:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;color:#24354b;background:#f3f5f8}*{box-sizing:border-box}body{margin:0}.topbar{background:#24354b;color:white;display:flex;align-items:center;gap:2rem;padding:.9rem clamp(1rem,4vw,4rem);position:sticky;top:0;z-index:2}.brand{font-size:1.35rem;font-weight:800;color:white;text-decoration:none}.topbar nav{display:flex;gap:1.5rem;flex:1}.topbar a{color:white;text-decoration:none}.topbar nav a:hover{text-decoration:underline}.topbar form{margin:0}main{max-width:1460px;margin:auto;padding:clamp(1rem,3vw,2rem)}h1{font-size:clamp(1.6rem,3vw,2.5rem);margin:.2rem 0 1rem}h2{font-size:1.2rem;margin:0 0 1rem}h3{margin:0;font-size:1.05rem}.eyebrow{font-size:.75rem;font-weight:800;letter-spacing:.14em;color:#6c7d90;margin:0}.heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.panel{background:white;border:1px solid #e0e7ee;box-shadow:0 3px 15px #26384d08;border-radius:17px;padding:clamp(1rem,2vw,1.5rem);min-width:0}.dashboard{display:grid;grid-template-columns:1.3fr 1fr;gap:1.1rem}.right-column{display:flex;flex-direction:column;gap:1.1rem}.muted,.empty{color:#768498}.muted{font-size:.9rem}.person-group{border-top:1px solid #edf0f4;padding:1rem 0}.person-group h3{display:flex;align-items:center;gap:.5rem;margin-bottom:.7rem}.person-dot{display:inline-block;flex:0 0 12px;width:12px;height:12px;border-radius:50%}.count{color:#7c8898;margin-left:auto;font-size:.78rem;font-weight:500}.task{display:flex;align-items:center;gap:.85rem;padding:.7rem .4rem;border-radius:.6rem;cursor:pointer;min-height:60px}.task:hover{background:#f7f9fc}.task input{width:25px;height:25px;accent-color:#4b9a7a;flex-shrink:0}.task span{display:flex;flex-direction:column}.task small,.event small,.source-name small{color:#7d8997;font-size:.78rem;display:block;margin-top:.2rem}.task .overdue{color:#bc613c;font-weight:700}.task.completed{opacity:.5;text-decoration:line-through}.section-head{display:flex;justify-content:space-between;gap:.5rem;align-items:baseline}.section-head a{font-size:.85rem;color:#366ba5}.event{border-left:4px solid #537ab9;border-radius:4px;background:#f6f8fb;padding:.65rem .85rem;margin:.55rem 0;display:flex;flex-direction:column}.weekstrip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}.day{text-align:center;border-radius:10px;background:#f4f6f9;padding:.55rem .1rem;display:flex;flex-direction:column;align-items:center;gap:.2rem}.day.current{background:#dbe8f8;color:#225da1}.day small{font-size:.72rem}.dot{background:#507fb9;border-radius:50%;width:5px;height:5px}.split{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.form-grid label{display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;font-weight:600}input:not([type=checkbox]),select{width:100%;border:1px solid #cbd5e1;padding:.72rem .75rem;border-radius:9px;font:inherit;background:white;min-width:0}.check{display:flex!important;flex-direction:row!important;align-items:center;gap:.4rem!important}button,.button{border:none;border-radius:9px;background:#345f90;color:white;padding:.75rem 1rem;cursor:pointer;font:inherit;font-weight:700;text-decoration:none;display:inline-block;text-align:center}button:hover,.button:hover{filter:brightness(1.1)}.secondary{background:#e4edf7;color:#285580}.subtle{background:transparent;padding:.4rem}.inline-form{display:flex;align-items:center;gap:.7rem;margin:.6rem 0}.inline-form input{flex:1}.source-name{flex:1}.chore-grid{display:grid;gap:.5rem}.chore-edit{display:grid;grid-template-columns:minmax(160px,2fr) 1fr .8fr 1.1fr auto auto;gap:.5rem;align-items:center;padding:.5rem 0;border-bottom:1px solid #e8edf2}.chore-edit button{padding:.65rem}.alert{border-radius:9px;padding:.8rem 1rem;margin:.5rem 0;background:#dfe9f8}.alert.error{background:#fee2e2;color:#8d2525}.alert.success{background:#dcfce7;color:#22633a}.login{max-width:420px;margin:6vh auto}.login form{display:grid;gap:1rem}.login label{display:grid;gap:.3rem}@media(max-width:860px){.dashboard,.split{grid-template-columns:1fr}.chore-edit{grid-template-columns:1fr 1fr}.topbar{gap:1rem}.topbar nav{gap:.7rem}}@media(max-width:560px){.topbar{flex-wrap:wrap}.topbar nav{order:3;width:100%;justify-content:space-between}.topbar form{margin-left:auto}.form-grid{grid-template-columns:1fr}.heading .button{font-size:.85rem}.chore-edit{grid-template-columns:1fr 1fr}.chore-edit input[name=name]{grid-column:1/-1}}

/* v0.2: coloured notification toasts, shared by all modules */
.notifications {
  position: fixed; top: max(70px, calc(env(safe-area-inset-top) + 60px));
  right: max(1rem, env(safe-area-inset-right)); z-index: 80;
  display: flex; flex-direction: column; gap: .6rem;
  width: min(450px, calc(100vw - 2rem)); pointer-events: none;
}
.notifications:empty { display: none; }
.notifications .alert {
  margin: 0; display: flex; align-items: center; gap: .65rem;
  min-height: 52px; border-radius: 12px; border: 1px solid;
  padding: .75rem .85rem; font-size: .91rem; font-weight: 650;
  box-shadow: 0 8px 30px #17253726; pointer-events: auto;
  background: #eaf3ff; color: #214a7d; border-color: #9abfe9;
}
.notifications .alert::before { content: "ℹ"; flex: 0 0 22px; text-align: center; font-size: 1.1rem; }
.notifications .alert.success { background: #e8f8ef; border-color: #9fdbb6; color: #175734; }
.notifications .alert.success::before { content: "✓"; font-weight: 900; }
.notifications .alert.error { background: #fff0f0; border-color: #edaaaa; color: #8c242c; }
.notifications .alert.error::before { content: "!"; font-weight: 900; }
.notifications .alert.info { background: #eaf3ff; border-color: #9abfe9; color: #214a7d; }
.notifications .alert-message { flex: 1; line-height: 1.4; }
.notifications .alert-dismiss {
  background: transparent; color: inherit; border-radius: 8px;
  padding: .1rem .35rem; font-size: 1.3rem; line-height: 1; font-weight: 500;
  opacity: .75;
}
.notifications .alert-dismiss:hover { background: #00000010; opacity: 1; filter: none; }
@media (max-width: 560px) {
  .notifications { top: max(114px, calc(env(safe-area-inset-top) + 104px)); }
}
