:root{
  /* ── W11 ground: soft matte pastel sage. Nothing here is pure white — a white
     panel on a wall lit 16h a day is the main source of glare and eye strain.
     Every value below is contrast-validated by test/palette.mjs. ── */
  --bg:#E7EDE3; --panel:#F5F8F2; --panel2:#DDE5D7; --rail:#E1E9DC;
  --line:#C9D4C0; --text:#2C3730; --muted:#5E6C62;
  /* muted, playful accents — never fluorescent */
  --accent:#A85B2E; --accent-soft:#EFDCCB;
  --star:#A87722; --pos:#3D7350; --danger:#A64F4B;
  /* per-person identity: ink (edge/avatar/badge) + tint (pill fill).
     All 36 pairs separate by ΔE ≥ 18 so they are tellable apart across a room. */
  --teal:#3F8F84;   --teal-t:#DCEBE7;
  --red:#C06A6A;    --red-t:#F3DFDE;
  --blue:#5C86B8;   --blue-t:#DEE7F2;
  --green:#5E9150;  --green-t:#DFEBD9;
  --amber:#A2761F;  --amber-t:#F2E6CE;
  --purple:#8C6BA8; --purple-t:#E8E0F0;
  --pink:#A85F82;   --pink-t:#F2DEE7;
  --indigo:#455780; --indigo-t:#DEE3EC;
  --slate:#75837A;  --slate-t:#E2E7E1;
  --shadow:0 1px 3px rgba(44,55,48,.06), 0 4px 14px rgba(44,55,48,.05);
}
/* W1 — density + text size. Device-local (localStorage), never synced: the wall
   wants roomy/large, a phone wants snug/medium. Consumed from W7 onward. */
html[data-density="roomy"]{ --row-h:68px; --pad:13px; --gap:8px; }
html[data-density="cozy"] { --row-h:56px; --pad:10px; --gap:6px; }
html[data-density="snug"] { --row-h:44px; --pad:7px;  --gap:4px; }
html[data-text="s"]{ --fs-body:12px;   --fs-title:12px;   --fs-head:17px; }
html[data-text="m"]{ --fs-body:13px;   --fs-title:12.5px; --fs-head:19px; }
html[data-text="l"]{ --fs-body:15px;   --fs-title:14px;   --fs-head:22px; }
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased;
}
.app{ min-height:100dvh; display:flex; flex-direction:column; }

/* layout */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:rgba(231,237,227,.92); backdrop-filter:blur(8px);
  /* clear the iOS status bar (notch / Dynamic Island) in standalone PWA mode */
  padding-top:calc(14px + env(safe-area-inset-top));
}
.topbar h1{ font-size:17px; margin:0; font-weight:700; }
.topbar .who{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted); }
.dot{ width:12px; height:12px; border-radius:50%; display:inline-block; }
.content{ flex:1; padding:22px 18px; max-width:560px; width:100%; margin:0 auto; }

/* buttons */
button{
  font:inherit; cursor:pointer; border:none; border-radius:10px;
  padding:11px 16px; background:var(--accent); color:#fff; font-weight:600;
}
button.ghost{ background:transparent; color:var(--muted); border:1px solid var(--line); }
button.link{ background:none; color:var(--muted); padding:6px 8px; font-weight:500; }
button:disabled{ opacity:.5; cursor:default; }

/* centered card screens (login / picker) */
.center{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; }
.card{ width:100%; max-width:380px; background:var(--panel); border:1px solid var(--line);
  border-radius:18px; padding:26px; box-shadow:var(--shadow); }
.card h2{ margin:0 0 6px; font-size:22px; text-align:center; }
.card p.sub{ margin:0 0 22px; color:var(--muted); text-align:center; font-size:14px; }
label{ display:block; font-size:13px; color:var(--muted); margin:14px 0 6px; }
input{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line);
  background:var(--panel2); color:var(--text); font:inherit;
}
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--accent); }
.card button[type=submit]{ width:100%; margin-top:20px; }
.err{ color:var(--danger); font-size:13px; margin-top:14px; text-align:center; min-height:18px; }

/* profile picker */
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:8px; }
.tile{
  background:var(--panel); border:1px solid var(--line); border-radius:18px;
  padding:22px 14px; display:flex; flex-direction:column; align-items:center; gap:12px;
  color:var(--text); font-weight:600; transition:transform .08s, border-color .12s, box-shadow .12s;
  box-shadow:var(--shadow);
}
.tile:hover{ transform:translateY(-2px); border-color:var(--accent); }
.avatar{
  width:64px; height:64px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:26px; font-weight:700; color:#fff;
  box-shadow:0 0 0 3px #fff, var(--shadow);
}
.tile .role{ font-size:12px; color:var(--muted); font-weight:500; }

/* home */
.empty{
  margin-top:40px; text-align:center; color:var(--muted);
  border:1px dashed var(--line); border-radius:16px; padding:48px 20px;
}
.empty .big{ font-size:40px; }
.row{ display:flex; gap:10px; justify-content:center; margin-top:26px; flex-wrap:wrap; }

/* ---- M2: calendar ---- */
.topbar h1{ display:flex; align-items:center; gap:8px; }
.iconbtn{ background:var(--panel); border:1px solid var(--line); color:var(--text);
  width:36px; height:36px; padding:0; border-radius:9px; font-size:18px; line-height:1; }
.monthnav{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.monthnav strong{ font-size:16px; min-width:150px; }
.monthnav .link{ margin-left:auto; }

.cal{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:10px; box-shadow:var(--shadow); }
.cal-head{ display:grid; grid-template-columns:repeat(7,1fr); text-align:center;
  font-size:11px; color:var(--muted); padding:4px 0 8px; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-cell{ background:transparent; border:1px solid transparent; border-radius:9px;
  aspect-ratio:1/1; padding:5px; display:flex; flex-direction:column; align-items:flex-start;
  justify-content:flex-start; color:var(--text); font-weight:500; min-height:0; }
.cal-cell:hover{ border-color:var(--line); }
.cal-cell.muted{ color:#C4BBAC; }
.cal-cell.today .cal-num{ background:var(--accent); color:#fff; border-radius:50%;
  width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; }
.cal-cell.sel{ border-color:var(--accent); background:var(--panel2); }
.cal-num{ font-size:13px; }
.cal-dots{ display:flex; flex-wrap:wrap; gap:2px; margin-top:auto; }
.evdot{ width:6px; height:6px; border-radius:50%; display:inline-block; }

.daylist{ margin-top:18px; }
.daygroup{ margin-bottom:16px; }
.daygroup h4{ margin:0 0 8px; font-size:14px; color:var(--muted); font-weight:600; }
.ev{ width:100%; display:flex; align-items:center; gap:10px; text-align:left;
  background:var(--panel); border:1px solid var(--line); border-radius:11px;
  padding:11px 12px; margin-bottom:7px; color:var(--text); box-shadow:var(--shadow); }
.ev:hover{ border-color:var(--accent); }
.evbar{ width:4px; align-self:stretch; border-radius:3px; flex:0 0 4px; }
.evtime{ font-variant-numeric:tabular-nums; color:var(--muted); font-size:13px; min-width:54px; }
.evtitle{ flex:1; font-weight:600; }
.evwho{ font-size:12px; font-weight:600; white-space:nowrap; }

/* ---- M2: event modal ---- */
.modal-overlay{ position:fixed; inset:0; background:rgba(46,42,38,.45); backdrop-filter:blur(3px);
  display:flex; align-items:flex-end; justify-content:center; z-index:50; }
/* lock background scroll whenever any modal is open (all overlays share this class) */
body:has(.modal-overlay){ overflow:hidden; }
.modal{ width:100%; max-width:520px; max-height:92dvh; background:var(--bg);
  border:1px solid var(--line); border-radius:18px 18px 0 0;
  /* scroll only vertically; horizontal overflow caused the sheet to slide sideways */
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  /* keep the sheet bottom clear of the home indicator */
  padding-bottom:env(safe-area-inset-bottom); }
@media(min-width:560px){ .modal-overlay{ align-items:center; } .modal{ border-radius:18px; } }
.modal-top{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); }
.modal-top strong{ font-size:16px; }
.modal-body{ padding:16px; }
.modal-body label{ margin-top:14px; }
.modal-body label.inline{ display:flex; align-items:center; gap:8px; margin-top:16px; color:var(--text); }
.modal-body label.inline input{ width:auto; }
select{ width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line);
  background:var(--panel2); color:var(--text); font:inherit; }
.modal-foot{ padding:14px 16px; border-top:1px solid var(--line); }
button.danger{ background:transparent; border:1px solid var(--danger); color:var(--danger); width:100%; }

.notes{ margin-top:20px; border-top:1px solid var(--line); padding-top:8px; }
.notelist{ margin:8px 0; }
.note{ font-size:14px; padding:8px 10px; background:var(--panel); border:1px solid var(--line);
  border-radius:9px; margin-bottom:6px; }
.noteauthor{ font-weight:700; }
.notetime{ color:var(--muted); font-size:12px; }
.noteadd{ display:flex; gap:8px; margin-top:6px; }
.noteadd input{ flex:1; }
.noteadd button{ flex:0 0 auto; }

/* ---- M3: nav tabs, chores ---- */
.tabs{ display:flex; gap:6px; margin-bottom:16px; background:var(--panel); border:1px solid var(--line);
  border-radius:11px; padding:4px; box-shadow:var(--shadow); }
.tabs a{ flex:1; text-align:center; padding:9px; border-radius:8px; color:var(--muted);
  text-decoration:none; font-weight:600; font-size:14px; }
.tabs a.on{ background:var(--accent); color:#fff; }

.chips{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.chip{ background:var(--panel); border:1px solid var(--line); color:var(--muted);
  padding:7px 14px; border-radius:999px; font-size:13px; font-weight:600; }
.chip.on{ background:var(--panel2); color:var(--text); border-color:var(--accent); }

.tasklist{ display:flex; flex-direction:column; gap:8px; }
/* W0.3: the whole row is the tap target (children 5–10 miss 23–24% of small targets,
   concentrated at edges — Woodward et al., CHI 2016). Min 56px ≈ 21mm on the wall. */
.task{ display:flex; align-items:center; gap:12px; background:var(--panel); min-height:56px;
  border:1px solid var(--line); border-radius:12px; padding:6px 12px; box-shadow:var(--shadow); }
.task.done{ opacity:.72; }
.task.done .tasktitle{ text-decoration:line-through; color:var(--muted); }
/* presentational glyph — never a tap target of its own */
.check{ flex:0 0 auto; width:28px; height:28px; padding:0; border-radius:8px; pointer-events:none;
  display:grid; place-items:center; box-sizing:border-box;
  background:transparent; border:2px solid var(--line); color:#fff; font-size:15px; line-height:1; }
.check.on{ background:var(--pos); border-color:var(--pos); }
.taskmain{ flex:1; align-self:stretch; display:flex; flex-direction:column; justify-content:center;
  align-items:flex-start; gap:3px; min-height:44px;
  background:transparent; border:none; padding:0; color:var(--text); text-align:left; }
.taskedit{ flex:0 0 auto; width:44px; height:44px; padding:0; border-radius:10px; font-size:16px;
  background:transparent; border:1px solid var(--line); color:var(--muted); }
details.missed{ margin-top:14px; }
details.missed > summary{ cursor:pointer; list-style:none; font-size:13px; font-weight:700;
  color:var(--muted); padding:10px 12px; border:1px dashed var(--line); border-radius:12px; }
details.missed > summary::-webkit-details-marker{ display:none; }
details.missed[open] > summary{ margin-bottom:8px; }
.tasktitle{ font-weight:600; }
.taskmeta{ display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted); }
.taskwho{ font-weight:600; }
.taskstar{ color:var(--star); font-weight:600; }
.taskdue{ color:var(--muted); }

textarea{ width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line);
  background:var(--panel2); color:var(--text); font:inherit; resize:vertical; }
.hint{ font-size:12px; color:var(--muted); margin:8px 0 0; }

/* ---- M4: recurrence editor ---- */
.recur{ margin-top:18px; border-top:1px solid var(--line); padding-top:6px; }
.r_row{ display:flex; align-items:center; gap:10px; }
.r_row input{ max-width:90px; }
.wdrow{ display:flex; gap:6px; margin-top:4px; flex-wrap:wrap; }
.wd{ width:34px; height:34px; padding:0; border-radius:50%; background:transparent;
  border:1px solid var(--line); color:var(--muted); font-weight:600; }
.wd.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
.r_end{ display:flex; flex-direction:column; gap:6px; }
.r_end .inline{ margin-top:0; }
.r_end input[type=date], .r_end input[type=number]{ width:auto; display:inline-block; margin-left:6px; }
.r_end input[type=number]{ max-width:70px; }
.rrule-preview{ font-size:12px; color:var(--muted); margin:10px 0 0; }
.rrule-preview code{ color:var(--text); background:var(--panel2); padding:2px 6px; border-radius:6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; word-break:break-all; }
.delchoice{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.delchoice button{ flex:1; min-width:120px; background:var(--panel2); border:1px solid var(--line); color:var(--text); }
.delchoice button.danger{ background:transparent; border-color:var(--danger); color:var(--danger); }

/* ---- M5: star zone ---- */
.balcard{ text-align:center; background:linear-gradient(160deg,#FFF3E6,#FFE2CF);
  border:1px solid var(--line); border-radius:20px; padding:30px 20px; margin-bottom:22px; box-shadow:var(--shadow); }
.balnum{ font-size:64px; font-weight:800; line-height:1; color:var(--star);
  text-shadow:0 2px 14px rgba(224,137,43,.22); font-variant-numeric:tabular-nums; }
.ballabel{ font-size:15px; color:var(--muted); margin-top:6px; }
.lbh{ font-size:15px; margin:6px 0 12px; }
.leaderboard{ display:flex; flex-direction:column; gap:8px; }
.lbrow{ display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--line);
  border-radius:11px; padding:10px 12px; box-shadow:var(--shadow); }
.lbrow.meRow{ border-color:var(--accent); }
.lbrank{ color:var(--muted); font-weight:700; width:20px; }
.lbname{ font-weight:700; }
.lbkid{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.lbbar{ flex:1; height:8px; background:var(--panel2); border-radius:5px; overflow:hidden; }
.lbbar i{ display:block; height:100%; border-radius:5px; transition:width .5s ease; }
.lbval{ font-weight:700; color:var(--star); font-variant-numeric:tabular-nums; }
.big-cta{ width:100%; margin-top:22px; padding:15px; font-size:16px;
  background:linear-gradient(120deg,var(--accent),#C57B4E); }

/* ---- M5: rewards ---- */
.rewardgrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.rewardcard{ background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:16px 12px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; box-shadow:var(--shadow); }
.rwemoji{ font-size:34px; }
.rwtitle{ font-weight:700; }
.rwcost{ color:var(--star); font-weight:700; }
.rwbtn{ width:100%; margin-top:4px; }
.rwbtn.locked{ background:var(--panel2); color:var(--muted); }
.rwedit{ padding:2px; font-size:12px; }
.redlist{ display:flex; flex-direction:column; gap:7px; }
.redrow{ display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:9px 12px; }
.redrow span:first-child{ flex:1; font-weight:600; }
.redcost{ color:var(--star); font-weight:700; }
.redstatus{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; padding:3px 8px; border-radius:999px;
  background:var(--panel2); color:var(--muted); }
.redstatus.s-pending{ color:var(--star); }
.redstatus.s-approved, .redstatus.s-fulfilled{ color:var(--pos); }
.redstatus.s-rejected{ color:var(--danger); }

/* ---- M5: animations ---- */
.starburst{ position:fixed; left:50%; top:40%; transform:translate(-50%,-50%); z-index:60;
  font-size:28px; font-weight:800; color:var(--star); pointer-events:none;
  animation:pop 1.3s ease-out forwards; text-shadow:0 2px 12px rgba(224,137,43,.4); }
.starburst .spark{ position:absolute; left:50%; top:50%; font-size:20px;
  animation:fly 1.1s ease-out forwards; }
@keyframes pop{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.4); }
  20%{ opacity:1; transform:translate(-50%,-50%) scale(1.15); }
  80%{ opacity:1; } 100%{ opacity:0; transform:translate(-50%,-90%) scale(1); } }
@keyframes fly{ 0%{ opacity:1; transform:translate(-50%,-50%) rotate(0); }
  100%{ opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)); } }
@media(prefers-reduced-motion:reduce){ .starburst,.starburst .spark{ animation:none; } .starburst .spark{ display:none; } }

/* ---- M6: finance ---- */
.fintotal{ display:flex; align-items:baseline; justify-content:space-between;
  background:linear-gradient(160deg,#FFF3E6,#E7F3EE); border:1px solid var(--line);
  border-radius:16px; padding:20px; margin-bottom:8px; box-shadow:var(--shadow); }
.finlabel{ color:var(--muted); font-size:14px; }
.finamt{ font-size:28px; font-weight:800; color:var(--pos); font-variant-numeric:tabular-nums; }
.finlist{ display:flex; flex-direction:column; gap:7px; }
.finrow{ display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:11px 12px; color:var(--text); box-shadow:var(--shadow); }
button.finrow:hover{ border-color:var(--accent); }
.findue{ font-size:13px; color:var(--muted); min-width:54px; font-variant-numeric:tabular-nums; }
.finname{ flex:1; font-weight:600; }
.fincat{ font-style:normal; font-size:11px; color:var(--muted); background:var(--panel2);
  padding:2px 7px; border-radius:999px; margin-left:6px; }
.fincycle{ font-size:12px; color:var(--muted); }
.finpay{ font-size:12px; font-weight:600; white-space:nowrap; }
.finmoney{ font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.finedithint{ font-size:12px; color:var(--muted); }

/* ---- M7a: combined calendar ---- */
.calmode{ display:flex; gap:6px; background:var(--panel); border:1px solid var(--line);
  border-radius:11px; padding:4px; margin-bottom:14px; box-shadow:var(--shadow); }
.calmode .seg{ flex:1; padding:8px; border-radius:8px; background:transparent; color:var(--muted); font-weight:600; }
.calmode .seg.on{ background:var(--accent); color:#fff; }
.memberchips{ margin-bottom:14px; }
.chip.mchip{ display:inline-flex; align-items:center; gap:6px; opacity:.45; }
.chip.mchip.on{ opacity:1; border-color:var(--accent); }
.chip.mchip .dot{ width:10px; height:10px; }

/* ---- Phase 2: family / member management ---- */
.avatar.sm{ width:46px; height:46px; font-size:19px; box-shadow:0 0 0 2px #fff, var(--shadow); }
.memrow{ display:flex; align-items:center; gap:14px; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:12px 14px; margin-bottom:10px; box-shadow:var(--shadow); }
.memrow .meminfo{ flex:1; }
.memrow .meminfo .mn{ font-weight:700; }
.memrow .meminfo .mr{ font-size:12px; color:var(--muted); display:flex; align-items:center; gap:5px; margin-top:2px; }
.memrow .ghost{ flex:0 0 auto; padding:9px 16px; }
.swatchrow{ display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; }
.swatch{ width:34px; height:34px; padding:0; border-radius:50%; border:2px solid transparent; cursor:pointer; }
.swatch.sel{ border-color:var(--text); }

/* ---- Phase 3: day / week views ---- */
.viewseg{ display:flex; gap:6px; background:var(--panel); border:1px solid var(--line);
  border-radius:11px; padding:4px; margin-bottom:12px; box-shadow:var(--shadow); }
.viewseg .seg{ flex:1; padding:8px; border-radius:8px; background:transparent; color:var(--muted); font-weight:600; }
.viewseg .seg.on{ background:var(--accent); color:#fff; }
.calnav{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.calnav strong{ font-size:16px; flex:1; }
.calnav .link{ margin-left:auto; }

.alldaystrip{ display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  background:var(--panel2); border-radius:12px; padding:10px; margin-bottom:10px; }
.alldaystrip .lbl{ font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.adchip{ font-size:12px; color:#fff; padding:3px 10px; border-radius:999px; font-weight:600; cursor:pointer; }

/* tab bar removed → reclaim the freed vertical space for the day grid */
/* W15.8: on the wall the scroller is a FITTED box — calFit() sizes the hour rows to
   it. .fitted means everything got in, so scrolling is off; without it the grid hit
   the readability floor and scrolling is honest. */
.dayscroll.fitted{ overflow-y:hidden; }
.dayscroll{ max-height:calc(100dvh - 288px); min-height:320px; overflow-y:auto;
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); background:var(--panel); }
.daygrid{ position:relative; background:var(--panel); }
.hourrow{ display:flex; height:56px; border-top:1px solid var(--line); }
.hourrow:first-child{ border-top:none; }
.hourlbl{ width:60px; flex:none; font-size:11px; color:var(--muted); padding:4px 8px; font-variant-numeric:tabular-nums; }
.hourslot{ flex:1; position:relative; cursor:pointer; }
.hourslot:hover::after{ content:'+'; position:absolute; left:8px; top:4px; color:var(--muted); font-weight:700; }
.evlayer{ position:absolute; top:0; left:60px; right:0; bottom:0; pointer-events:none; }
.evblock{ position:absolute; border-radius:9px; padding:6px 9px; color:#fff;
  pointer-events:auto; cursor:pointer; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.14); }
.evblock .bt{ font-weight:700; font-size:12px; line-height:1.25; }
.evblock .btime{ font-size:11px; opacity:.92; font-variant-numeric:tabular-nums; }
.nowline{ position:absolute; left:0; right:0; height:2px; background:var(--accent); z-index:5; }
.nowline::before{ content:''; position:absolute; left:-4px; top:-4px; width:9px; height:9px; border-radius:50%; background:var(--accent); }

.weekgrid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.weekcol{ background:var(--panel); border:1px solid var(--line); border-radius:11px;
  padding:8px 7px; min-height:calc(100dvh - 300px); box-shadow:var(--shadow); }
.weekcol h5{ margin:0 0 8px; font-size:11px; color:var(--muted); text-align:center; font-weight:700; cursor:pointer; }
.weekcol h5.today{ color:var(--accent); }
.wkev{ font-size:11px; color:#fff; padding:4px 6px; border-radius:7px; margin-bottom:5px;
  cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:tabular-nums; }
.favatar{ width:18px; height:18px; border-radius:50%; display:inline-grid; place-items:center;
  color:#fff; font-size:10px; font-weight:700; }
.bav{ position:absolute; top:6px; right:6px; width:18px; height:18px; border-radius:50%;
  background:rgba(255,255,255,.28); display:grid; place-items:center; font-size:10px; color:#fff; }
.fab{ position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom)); width:56px; height:56px; border-radius:50%;
  background:var(--accent); color:#fff; font-size:28px; line-height:1; border:none; padding:0;
  box-shadow:0 6px 18px rgba(255,122,69,.45); z-index:20; display:grid; place-items:center; }
/* floating Home button (bottom-left; sits opposite the + FAB) */
.homefab{ position:fixed; left:18px; bottom:calc(18px + env(safe-area-inset-bottom)); width:52px; height:52px;
  border-radius:50%; background:var(--panel); color:var(--text); font-size:23px; line-height:1;
  border:1px solid var(--line); padding:0; box-shadow:var(--shadow); z-index:30; display:grid; place-items:center; }

/* home hub */
.hubhi{ display:flex; align-items:center; gap:10px; font-size:18px; font-weight:700; margin:4px 0 18px; }
.hubgrid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.hubtile{ background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:26px 14px;
  display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--text);
  font-size:16px; font-weight:700; box-shadow:var(--shadow); transition:transform .08s, border-color .12s; cursor:pointer; }
.hubtile:hover{ transform:translateY(-2px); border-color:var(--accent); }
.hubtile .he{ font-size:34px; line-height:1; }

/* ---- Phase 4: chores avatar home + rewards bank ---- */
.chorehome{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.choretile{ background:var(--panel); border:1px solid var(--line); border-radius:18px;
  padding:20px 14px; display:flex; flex-direction:column; align-items:center; gap:6px;
  color:var(--text); box-shadow:var(--shadow); transition:transform .08s, border-color .12s; }
.choretile:hover{ transform:translateY(-2px); border-color:var(--accent); }
.ctname{ font-weight:700; }
.ctstars{ color:var(--star); font-weight:800; font-variant-numeric:tabular-nums; }
.ctprog{ font-size:12px; color:var(--muted); }
.rewardbank{ display:flex; flex-direction:column; gap:10px; }
.rwbank{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px 14px; box-shadow:var(--shadow); }
.rwbank.ready{ border-color:var(--star); background:#FFF8E8; }
.rwbtop{ display:flex; align-items:center; justify-content:space-between; font-weight:700; gap:10px; }
.rwcostmut{ color:var(--muted); font-weight:700; font-variant-numeric:tabular-nums; }
.pill-redeem{ background:#FFF1CF; color:#9A6B00; border:1.5px solid var(--star); border-radius:999px;
  padding:6px 12px; font-weight:700; font-size:13px; white-space:nowrap; }
.rwbnote{ font-size:12px; color:var(--muted); margin-top:8px; display:flex; justify-content:space-between; align-items:center; }
.confetti{ position:fixed; top:-30px; font-size:24px; z-index:60; pointer-events:none; animation:cfall 1.8s linear forwards; }
@keyframes cfall{ to{ transform:translateY(100vh) rotate(380deg); opacity:0; } }
@media(prefers-reduced-motion:reduce){ .confetti{ display:none; } }
.topbar h1 .favatar{ box-shadow:0 0 0 2px #fff; }

/* ---- Phase 5: finance review ---- */
.finhead{ background:linear-gradient(160deg,#FFF3E6,#E7F3EE); border:1px solid var(--line);
  border-radius:16px; padding:18px; margin-bottom:14px; box-shadow:var(--shadow); }
.finhead .h{ font-size:13px; color:var(--muted); }
.finhead .amt{ font-size:32px; font-weight:800; font-variant-numeric:tabular-nums; }
.ppstrip{ display:flex; gap:16px; margin:0 0 16px; flex-wrap:wrap; }
.ppstrip .pp{ text-align:center; }
.ppstrip .pp .v{ font-size:12px; margin-top:4px; color:var(--muted); font-variant-numeric:tabular-nums; }
.catrow{ margin-top:11px; }
.catrow .ct{ display:flex; justify-content:space-between; font-size:13px; font-weight:600; }
.catrow .lbbar{ margin-top:5px; }
.fixedbar{ display:flex; height:36px; border-radius:9px; overflow:hidden; margin-top:10px; }
.fixedbar div{ display:grid; place-items:center; font-size:12px; font-weight:600; color:#fff; }

/* ---- Phase 6: meals & grocery ---- */
.mealhead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.pill{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px;
  border:1px solid var(--line); background:var(--panel); font-size:13px; font-weight:600; color:var(--text); cursor:pointer; }
.pill.on{ border-color:var(--accent); background:#FFF1EA; color:#C2410C; }
.catlbl{ text-transform:uppercase; font-size:10px; letter-spacing:.04em; margin:12px 0 2px; }
.mrow{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); }
.mrow:last-child{ border-bottom:none; }
.xbtn{ background:none; border:none; color:var(--muted); font-size:14px; padding:4px 6px; cursor:pointer; }
.ck{ width:26px; height:26px; border-radius:50%; border:2px solid var(--line); background:transparent;
  color:#fff; display:grid; place-items:center; font-size:14px; flex:none; cursor:pointer; padding:0; }
.ck.on{ background:var(--pos); border-color:var(--pos); }
.spillrow{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; padding-bottom:2px; }
.spill{ white-space:nowrap; padding:6px 14px; border-radius:999px; border:1px solid var(--line);
  background:var(--panel); font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; }
.spill.on{ border-color:var(--accent); background:#FFF1EA; color:#C2410C; }
.spill.manage{ margin-left:auto; }
/* buy-list item name (tap to edit) + shop group header */
.mname{ flex:1; text-align:left; font-weight:600; background:none; border:none; padding:0;
  color:inherit; font-size:inherit; cursor:pointer; }
.grpline{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.03em; margin:14px 0 4px; }
.grpline:first-child{ margin-top:2px; }
.grpline .dot{ width:9px; height:9px; border-radius:50%; }
.tagchip{ font-size:11px; color:#fff; padding:3px 10px; border-radius:999px; font-weight:600; white-space:nowrap; }
.mealchip{ font-size:12px; color:#fff; padding:3px 10px; border-radius:999px; font-weight:600; cursor:pointer; }
.planday{ border-bottom:1px solid var(--line); padding:9px 0; }
.planday:last-child{ border-bottom:none; }
.plandh{ font-weight:700; font-size:13px; }
.plandh.today{ color:var(--accent); }
/* tappable day header (add a meal on that day) */
.dayadd{ display:flex; align-items:center; width:100%; text-align:left; gap:8px;
  background:none; border:none; padding:2px 0; color:inherit; font-weight:700; font-size:13px; cursor:pointer; }
.dayadd .plus{ margin-left:auto; color:var(--muted); font-weight:700; font-size:16px; }
.dayadd.today{ color:var(--accent); }
.mealrow{ display:flex; align-items:center; gap:8px; margin-top:6px; cursor:pointer; }

/* ---- end-time vs duration toggle + compact modal ---- */
.endmode{ display:flex; gap:6px; margin:4px 0 8px; }
.endmode button{ flex:1; padding:8px; border-radius:9px; border:1px solid var(--line);
  background:var(--panel); color:var(--muted); font-weight:600; }
.endmode button.on{ background:var(--accent); color:#fff; border-color:var(--accent); }
.modal-body label{ margin-top:10px; }
.modal-body input:not([type=checkbox]):not([type=radio]), .modal-body select, .modal-body textarea{ padding:9px 12px; }
.recur{ margin-top:12px; padding-top:6px; }
.notes{ margin-top:12px; padding-top:6px; }
.rrule-preview{ margin:8px 0 0; }
.modal-foot{ padding:12px 16px; }

/* ---- calendar tasks (events + tasks) ---- */
.itemtype{ margin-bottom:6px; }
.taskchip{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--text);
  background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--line); border-radius:8px; padding:4px 9px; cursor:pointer; }
.taskchip.done{ opacity:.5; text-decoration:line-through; }
.tck{ width:16px; height:16px; border-radius:5px; border:1.5px solid var(--pos); display:inline-grid; place-items:center;
  font-size:11px; color:var(--pos); flex:none; cursor:pointer; background:transparent; }
.taskblock{ background:var(--panel) !important; color:var(--text); border:1px solid var(--line); border-left:4px solid var(--line);
  left:3px; right:3px; height:28px; display:flex; align-items:center; gap:6px; box-shadow:none; }
.taskblock .tbt{ font-weight:600; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.taskblock.done{ opacity:.5; text-decoration:line-through; }
.overduechip{ font-size:12px; font-weight:700; color:#fff; background:var(--danger); border-radius:999px; padding:4px 11px; cursor:pointer; }
.taskdot{ width:6px; height:6px; border-radius:2px; background:var(--accent); display:inline-block; }
.wkev.wktask{ background:var(--panel); color:var(--text); border:1px solid var(--line); border-left:4px solid var(--line); }
.wkev.wktask.done{ opacity:.5; text-decoration:line-through; }
.trow{ display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:10px 12px; margin-bottom:8px; box-shadow:var(--shadow); }
.trow .ck{ width:26px; height:26px; border-radius:50%; border:2px solid var(--line); background:transparent; color:#fff;
  display:grid; place-items:center; font-size:14px; flex:none; cursor:pointer; padding:0; }
.trow .ck.on{ background:var(--pos); border-color:var(--pos); }
.trow.done .trtitle{ text-decoration:line-through; color:var(--muted); }
.trmain{ flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:3px; background:none; border:none; padding:0; color:var(--text); text-align:left; cursor:pointer; }
.trtitle{ font-weight:600; }
.trmeta{ font-size:12px; }
.lbh.overdueh{ color:var(--danger); }

/* ---- grocery enhancements: store / low / critical / buy-by ---- */
.lowbadge{ font-size:10px; color:#C2410C; background:#FFF1EA; border:1px solid var(--accent); border-radius:999px; padding:1px 7px; font-weight:700; }
.critflag{ color:var(--danger); font-weight:800; margin-right:4px; }
.mrow.crit{ background:#FCEFEC; border-radius:8px; padding-left:6px; }
.byb{ font-size:11px; color:var(--muted); font-weight:600; }
.byb.over{ color:var(--danger); }

/* ---- M7b: offline pending marker ---- */
.pendmark{ font-size:12px; opacity:.85; }
.offline-banner{ position:sticky; top:0; z-index:40; background:#9A3412; color:#FFE8D6;
  text-align:center; font-size:13px; padding:6px; }

/* ==========================================================================
   W1 — WALL SHELL (Dell ST2220TC 22" @ 1280x720 landscape, Chromium kiosk)
   Exactly ONE breakpoint. Below it, every rule here is inert and the phone
   layout is untouched. 1280/487mm => 2.63 px/mm, so 44px = 16.7mm (adult ok)
   and 56px = 21.3mm (the kiosk floor, and the minimum a kid may tap).
   ========================================================================== */
#wallRail,#wallInfo,#wallPeople,#wallPrayer,#wallFab{ display:none; }

@media (min-width:1000px) and (orientation:landscape){
  body{
    display:grid; height:100dvh; overflow:hidden;
    grid-template-columns:104px 1fr;
    /* W16 — a fourth row for the prayer strip. 56+52+42 = 150px of chrome on a
       720px-tall panel; the pane below still clears 560px, which is more than
       the week grid needs. */
    grid-template-rows:56px 52px 42px 1fr;
    grid-template-areas:"rail info" "rail people" "rail prayer" "rail app";
  }
  #wallRail{ display:flex; grid-area:rail; }
  #wallInfo{ display:flex; grid-area:info; }
  #wallPeople{ display:flex; grid-area:people; }
  #wallPrayer{ display:flex; grid-area:prayer; }
  #app{ grid-area:app; min-height:0; overflow:auto; }
  .app{ min-height:0; }                 /* was min-height:100dvh — would push the pane past the viewport */
  .content{ max-width:none; padding:16px; }  /* THE defect: a 560px column on a 1280px panel */
  .homefab{ display:none !important; }  /* the rail replaces it */
  #wallFab{ display:grid; }

  /* the per-view topbar keeps its title and action button; only the profile
     switcher goes, because the wall has no profile to switch. */
  .topbar{ position:static; background:none; border-bottom:0; backdrop-filter:none; padding:6px 16px; }
  .topbar #switch{ display:none; }
  /* ONLY the calendar's switcher moved into the info bar. .viewseg is also the section
     tab class for Meals (In the house / Need to buy / Meals) and Finance (Overview /
     Monthly review) — hiding it wholesale silently removed their navigation. */
  .viewseg--cal,.memberchips{ display:none; }
  .viewseg{ max-width:520px; }

  /* ---- rail ---- */
  #wallRail{ flex-direction:column; gap:3px; padding:10px 8px; background:var(--rail); border-right:1px solid var(--line); }
  .railbrand{ display:grid; place-items:center; padding:6px 0 12px; margin-bottom:5px; border-bottom:1px solid var(--line); }
  .railbrand .rbm{ width:34px; height:34px; border-radius:11px; background:var(--accent); color:#fff;
    display:grid; place-items:center; font-weight:800; font-size:16px; }
  #wallRail .navitem{ background:none; border:0; padding:11px 4px 9px; border-radius:14px; min-height:56px;
    display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--muted); font-weight:600; font-size:11px; }
  #wallRail .navitem .ico{ font-size:22px; line-height:1; }
  #wallRail .navitem:hover:not(:disabled){ background:var(--panel2); }
  #wallRail .navitem.on{ background:var(--panel); color:var(--accent); box-shadow:var(--shadow); }
  #wallRail .navitem.soon{ opacity:.38; cursor:default; }
  .railspacer{ flex:1; }

  /* ---- info bar ---- */
  #wallInfo{ align-items:center; gap:14px; padding:0 16px; border-bottom:1px solid var(--line); }
  #wallInfo .famname{ font-size:19px; font-weight:800; letter-spacing:-.2px; }
  #wallInfo .wclock{ font-size:17px; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; }
  #wallInfo .ibspacer{ flex:1; }
  #wallInfo .segs{ display:flex; background:var(--panel2); border-radius:11px; padding:3px; gap:2px; }
  #wallInfo .seg{ background:none; border:0; font-size:13px; font-weight:600; color:var(--muted);
    padding:7px 14px; border-radius:9px; min-height:44px; }
  #wallInfo .seg.on{ background:var(--panel); color:var(--text); box-shadow:var(--shadow); }
  #wallInfo .ibtn{ border:1px solid var(--line); background:var(--panel); border-radius:10px; padding:8px 13px;
    font-size:13px; font-weight:600; color:var(--text); min-height:44px; }
  #wallInfo .ibtn:hover{ border-color:var(--accent); color:var(--accent); }

  /* ---- people strip: filter chip + chore progress in one control ---- */
  #wallPeople{ align-items:center; gap:10px; padding:0 16px; border-bottom:1px solid var(--line); background:var(--panel); overflow-x:auto; }
  #wallPeople .person{ display:flex; align-items:center; gap:8px; padding:5px 12px 5px 5px; border-radius:999px;
    border:1px solid var(--line); background:var(--panel); min-width:176px; min-height:44px; color:var(--text); }
  #wallPeople .person.off{ opacity:.38; }
  #wallPeople .pmeta{ flex:1; min-width:0; text-align:left; }
  #wallPeople .pname{ display:block; font-size:12.5px; font-weight:700; line-height:1.1; }
  #wallPeople .pbar{ display:block; height:5px; border-radius:3px; background:var(--line); margin-top:4px; overflow:hidden; }
  #wallPeople .pbar i{ display:block; height:100%; border-radius:3px; }
  #wallPeople .pfrac{ font-size:11px; color:var(--muted); font-weight:700; font-variant-numeric:tabular-nums; }

  /* ---- FAB ---- */
  #wallFab{ position:fixed; right:20px; bottom:20px; width:62px; height:62px; border-radius:50%;
    place-items:center; background:var(--accent); color:#fff; font-size:32px; line-height:1;
    box-shadow:0 6px 18px rgba(255,122,69,.42); z-index:40; padding:0; }
}

/* ==========================================================================
   W2 — SCHEDULE (wall hero), Day sidebar, Month pills, Meals reflow
   ========================================================================== */
/* Phone fallback: the same columns stack into a day-sectioned agenda. */
.sched{ display:flex; flex-direction:column; gap:14px; }
.scol{ border:1px solid var(--line); border-radius:14px; background:var(--panel); overflow:hidden; }
.shd{ padding:9px 11px 7px; border-bottom:1px solid var(--line); }
.shd .swd{ font-size:10.5px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.7px; }
.shd .dn{ font-size:19px; font-weight:800; line-height:1.15; display:flex; align-items:center; gap:7px; }
.shd .badge{ font-size:10px; font-weight:800; color:#fff; background:var(--accent); border-radius:999px; padding:2px 8px; letter-spacing:.4px; }
.sbody{ padding:8px 9px; }
.sev{ position:relative; display:block; width:100%; text-align:left; border-radius:10px; padding:7px 9px;
  margin-bottom:6px; border-left:3px solid; background:var(--panel2); cursor:pointer; }
.sev .ti{ display:block; font-weight:700; font-size:12px; line-height:1.25; }
.sev .tm{ display:block; font-size:10.5px; opacity:.72; font-weight:600; margin-top:1px; }
.sev .who{ position:absolute; right:6px; top:7px; width:16px; height:16px; border-radius:50%;
  font-size:9px; color:#fff; display:grid; place-items:center; font-weight:800; }
/* chores: same pill, dashed and unfilled — "must do" vs "happens", no legend needed */
.sev.task{ background:var(--panel); border:1px dashed var(--line); border-left:3px solid; }
.sev.task.done{ opacity:.5; }
.sev.task.done .ti{ text-decoration:line-through; }
.sfoot{ border-top:1px solid var(--line); padding:8px 11px; background:var(--panel);
  font-size:11.5px; display:flex; flex-direction:column; gap:5px; }
.sfoot .r{ display:flex; align-items:center; gap:6px; color:var(--text); }
.sfoot .chores{ color:var(--muted); font-weight:700; font-size:11px; }
.empt{ color:var(--muted); font-size:11.5px; font-style:italic; margin:6px 2px; }

@media (min-width:1000px) and (orientation:landscape){
  .content{ display:flex; flex-direction:column; min-height:0; height:100%; padding:12px 16px; }
  #calbody{ flex:1; min-height:0; }
  /* the info bar owns Today and the family name; keep the pane's chrome minimal so
     the pinned footers stay above the fold — that's the whole point of Schedule. */
  .calnav{ margin-bottom:8px; }
  .calnav #today{ display:none; }
  #enableNotif{ font-size:12px !important; margin:0 0 6px !important; }
  .topbar{ padding:4px 16px; }
  .app > .content{ overflow:hidden; }
  .sched{ display:grid; grid-template-columns:repeat(var(--scols,5),1fr); gap:0; height:100%; min-height:0; }
  .scol{ border:0; border-left:1px solid var(--line); border-radius:0; display:flex; flex-direction:column; min-height:0; }
  .scol:first-child{ border-left:0; }
  .scol.today{ background:var(--panel); box-shadow:inset 0 3px 0 var(--accent); }
  .sbody{ flex:1; overflow:auto; min-height:0; }
  .sfoot{ margin-top:auto; }

  /* ---- Day: 280px sidebar beside the untouched hour grid ---- */
  #calbody.dayhaswide{ display:grid; grid-template-columns:280px 1fr; gap:14px;
    align-items:stretch; min-height:0; }
  .dayside{ border:1px solid var(--line); border-radius:14px; background:var(--panel); padding:12px; }
  .dsblock + .dsblock{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
  .dsblock h5{ margin:0 0 8px; font-size:10.5px; font-weight:800; color:var(--muted);
    text-transform:uppercase; letter-spacing:.7px; }
  .dsrow{ display:flex; align-items:center; gap:8px; padding:5px 0; font-size:13px; }
  .dsdot{ width:9px; height:9px; border-radius:50%; flex:0 0 9px; }
  .dsti{ flex:1; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dstm{ color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; font-weight:700; }
  .dsmeal{ font-size:14px; font-weight:700; }

  /* ---- Month: named pills instead of dots (restyle only, no new features) ---- */
  .cal-cell{ aspect-ratio:auto; min-height:0; }
  .cal-grid{ grid-auto-rows:1fr; height:100%; }
  .cal{ height:100%; display:flex; flex-direction:column; }
  .cal-grid{ flex:1; min-height:0; }
  .cal-dots{ display:block; width:100%; margin-top:3px; overflow:hidden; }
  .mopill{ display:block; font-size:10.5px; font-weight:700; border-radius:5px; padding:1px 5px;
    margin-bottom:2px; border-left:2px solid; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .momore{ display:block; color:var(--muted); font-weight:700; font-size:10px; }

  /* ---- Meals: the 7-day plan reflows from a stack into 7 columns ---- */
  .planweek{ display:grid; grid-template-columns:repeat(7,1fr); gap:10px; align-items:start; }
  .planweek > .mealhead, .planweek > p.sub{ grid-column:1/-1; }
  .planweek .planday{ min-height:120px; border:1px solid var(--line); border-radius:12px;
    padding:8px; margin:0; display:flex; flex-direction:column; gap:6px; }
  .planweek .plandh{ min-height:44px; }
  .planweek .mealrow{ flex-wrap:wrap; }
}

/* ==========================================================================
   W3 — WEEK time grid (wall only; the phone keeps its chip columns)
   ========================================================================== */
@media (min-width:1000px) and (orientation:landscape){
  .wk{ display:flex; flex-direction:column; height:100%; min-height:0; }
  .wkhead,.wkallday{ display:grid; grid-template-columns:52px repeat(7,1fr); background:var(--panel);
    border-bottom:1px solid var(--line); }
  .wkgut{ position:relative; }
  .wkallday .lbl{ font-size:9.5px; color:var(--muted); font-weight:700; align-self:center;
    text-align:right; padding-right:6px; }
  .dh{ padding:6px 4px; text-align:center; border-left:1px solid var(--line); cursor:pointer; }
  .dh.wknd{ background:var(--panel2); }
  .dhw{ font-size:11px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
  .dhn{ font-size:17px; font-weight:700; line-height:1.15; }
  .dh.today .dhn{ background:var(--accent); color:#fff; border-radius:50%; width:26px; height:26px;
    display:inline-grid; place-items:center; font-size:15px; }
  .wkallday{ min-height:26px; }
  .adcell{ border-left:1px solid var(--line); padding:3px; min-height:26px; }
  .adcell.wknd{ background:var(--panel2); }
  .adchip{ display:block; font-size:10.5px; font-weight:700; border-radius:6px; padding:2px 6px;
    margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
  .wkscroll{ flex:1; overflow-y:auto; min-height:0; position:relative; }
  .wkscroll.fitted{ overflow-y:hidden; }
  /* the day view is a flex column on the wall so its scroller gets a real height to
     divide, rather than the viewport-maths guess the max-height rule was making */
  .dayhaswide .daywrap{ display:flex; flex-direction:column; min-height:0; }
  .dayhaswide .daywrap .dayscroll{ flex:1; min-height:0; max-height:none; }
  .wkgrid{ display:grid; grid-template-columns:52px repeat(7,1fr); position:relative; padding-top:9px; }
  .wkgrid .hr{ height:56px; border-top:1px solid var(--line); position:relative; }
  .wkgut .hr{ border-top:1px solid var(--line); }
  .hrt{ position:absolute; top:-8px; right:6px; font-size:10.5px; color:var(--muted); font-weight:600; }
  .wcol{ position:relative; border-left:1px solid var(--line); }
  .wcol.wknd{ background:var(--panel2); }
  .wev{ position:absolute; border-radius:8px; padding:4px 6px; overflow:hidden; cursor:pointer;
    border-left:3px solid; font-size:11px; line-height:1.25; background:var(--panel2); }
  .wti{ display:block; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .wtm{ display:block; font-size:10px; opacity:.78; }
  .wwho{ position:absolute; right:4px; bottom:3px; width:15px; height:15px; border-radius:50%;
    font-size:9px; color:#fff; display:grid; place-items:center; font-weight:800; }
  /* chores sit in the right half so they never blanket an event at the same hour */
  .wev.wtask{ left:auto; right:3px; width:calc(52% - 3px); background:var(--panel);
    border:1px dashed var(--line); border-left:3px solid; z-index:2; }
  .wev.wtask.done{ opacity:.5; }
  .wev.wtask.done .wti{ text-decoration:line-through; }
  .wmore{ position:absolute; right:3px; top:3px; font-size:10px; font-weight:800; color:var(--muted);
    background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:1px 5px; cursor:pointer; z-index:3; }
  .wnow{ position:absolute; left:0; right:0; border-top:2px solid var(--accent); z-index:5; }
  .wnow::before{ content:""; position:absolute; left:-4px; top:-5px; width:8px; height:8px;
    border-radius:50%; background:var(--accent); }
}

/* ==========================================================================
   W4 — Chores destination + rewards strip + PIN
   ========================================================================== */
.pinmodal .pininput{ font-size:34px; letter-spacing:14px; text-align:center; padding:14px; }
.claimmodal{ max-width:520px; }
.claimgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; padding:18px; }
.claimtile{ background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:18px 12px;
  display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--text); font-weight:700;
  min-height:120px; }
.claimtile:hover{ border-color:var(--accent); }

@media (min-width:1000px) and (orientation:landscape){
  .chorespane{ display:flex; flex-direction:column; gap:10px; min-height:0; }
  .rwstrip{ display:flex; gap:9px; align-items:center; overflow-x:auto; flex:0 0 auto; padding-bottom:2px; }
  .rwcard{ display:flex; align-items:center; gap:9px; background:var(--panel); border:1px solid var(--line);
    border-radius:13px; padding:7px 12px; min-width:300px; min-height:56px; }
  .rwgoal{ flex:1; min-width:0; }
  .rwnm{ display:block; font-size:11.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .rwbar{ display:block; height:5px; border-radius:3px; background:var(--line); margin-top:4px; overflow:hidden; }
  .rwbar i{ display:block; height:100%; background:var(--star); border-radius:3px; }
  .rwgo{ background:var(--star); color:#fff; font-size:12px; font-weight:800; border-radius:9px;
    padding:9px 13px; min-height:44px; white-space:nowrap; }
  .rwgo.off{ background:var(--line); color:var(--muted); }
  .rwpend{ display:flex; align-items:center; gap:8px; background:var(--accent-soft); border:1px solid var(--accent);
    border-radius:13px; padding:7px 12px; font-size:12px; min-height:56px; white-space:nowrap; }
  .rwpend button{ font-size:11.5px; font-weight:800; border-radius:8px; padding:8px 11px; min-height:44px; }
  .pfulfil{ background:var(--pos); } .pcancel{ background:transparent; color:var(--danger); border:1px solid var(--line); }

  .ccols{ flex:1; min-height:0; display:grid; grid-template-columns:repeat(var(--ccols,5),1fr); }
  .ccol{ border-left:1px solid var(--line); display:flex; flex-direction:column; min-height:0; padding:0 8px; }
  .ccol:first-child{ border-left:0; }
  .ccol.grab{ background:var(--panel2); }
  .chd{ display:flex; align-items:center; gap:8px; padding:8px 2px 10px; }
  .cnm{ font-weight:800; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cst{ margin-left:auto; font-size:12px; font-weight:800; color:var(--star); }
  .cbody{ flex:1; overflow:auto; min-height:0; padding-bottom:8px; }
  .cgroup{ font-size:10px; font-weight:800; color:var(--muted); text-transform:uppercase;
    letter-spacing:.6px; margin:10px 0 5px; }
  /* ONE tap target per row, 56px = 21.3mm on this panel — the accessible-kiosk floor
     and the minimum anything a child taps may be. */
  /* W15.9 (P3/F11b) — the row gets presence: a real picture tile, the owner's colour
     down the edge, and the title no longer fighting a tick and a glyph for width. */
  .citem{ display:flex; align-items:center; gap:10px; width:100%; text-align:left;
    background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--own,var(--slate));
    border-radius:12px; padding:8px 10px; min-height:58px; color:var(--text); }
  .ccol.grab .citem{ border-style:dashed; border-left-style:solid; }
  .citem:hover{ border-color:var(--accent); border-left-color:var(--own,var(--accent)); }
  /* the picture, at a size a person can actually recognise across a kitchen */
  .ctile{ position:relative; width:38px; height:38px; flex:0 0 38px; border-radius:11px;
    background:var(--ownt,var(--panel2)); display:grid; place-items:center; pointer-events:none; }
  .ctile .cico{ font-size:22px; line-height:1; }
  .ctile .cico img{ width:38px; height:38px; border-radius:11px; object-fit:cover; display:block; }
  .ctile .cico-none{ width:14px; height:14px; background:var(--own,var(--line)); opacity:.45; }
  /* the tick rides the tile instead of taking a column of its own */
  /* undone reads as an EMPTY checkbox, not a filled dot — a grey disc bottom-right of
     the tile looked like a bullet, which says nothing about state */
  .ctick{ position:absolute; right:-5px; bottom:-5px; width:19px; height:19px; border-radius:50%;
    background:var(--panel); border:2px solid var(--line); box-shadow:0 0 0 2px var(--panel);
    color:#fff; font-size:12px; font-weight:900; display:grid; place-items:center; line-height:1; }
  .ctxt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; pointer-events:none; }
  .clbl{ font-size:13.5px; font-weight:700; line-height:1.2;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .cpts{ font-size:11px; font-weight:800; color:var(--star); align-self:flex-start; }
  /* done = three signals, never colour alone */
  .citem.done{ opacity:.55; background:var(--panel2); }
  .citem.done .ctick{ background:var(--pos); border-color:var(--pos); }
  .citem.done .clbl{ text-decoration:line-through; }
  .citem.done .cico{ filter:grayscale(1); }
}

/* ==========================================================================
   W5 — KID MODE. Full-screen takeover: no rail, no other module, no dates.
   1280x720 on a 22" panel = 2.63 px/mm, so a 180px card is 68mm — well past the
   20mm accessible-kiosk floor, which is the point.
   ========================================================================== */
html.kidmode #wallRail, html.kidmode #wallInfo, html.kidmode #wallPeople,
html.kidmode #wallFab, html.kidmode .homefab, html.kidmode #phoneTabs,
html.kidmode #ambient{ display:none !important; }
/* W15.2 — Kid Mode is a FITTED screen, not a scrolling page. The whole day is on
   it at once; if it doesn't fit, the cards get smaller, they don't move off-screen. */
html.kidmode, html.kidmode body{ height:100dvh; overflow:hidden; }
html.kidmode body{ display:block; margin:0; padding:0; }
html.kidmode #app{ height:100dvh; overflow:hidden; }
.kidwrap{ height:100dvh; padding:10px 14px 12px; background:var(--bg);
  display:flex; flex-direction:column; gap:8px; overflow:hidden; }
.kidwrap > *{ flex:0 0 auto; }

.kidtop{ display:flex; align-items:center; gap:10px; }
.kidtop .avatar{ width:clamp(34px,6vh,54px); height:clamp(34px,6vh,54px); font-size:clamp(15px,2.6vh,22px); }
.kidname{ font-size:clamp(16px,3vh,26px); font-weight:800; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.kidstars{ margin-left:auto; font-size:clamp(17px,3.2vh,30px); letter-spacing:3px; }
.kidhome{ width:clamp(40px,6.5vh,56px); height:clamp(40px,6.5vh,56px); border-radius:50%;
  background:var(--panel2); color:var(--text); font-size:clamp(18px,3vh,24px); padding:0;
  display:grid; place-items:center; flex:0 0 auto; }

/* the day: one row per band, weighted so unfinished work gets the space */
.kday{ flex:1 1 auto; min-height:0; display:grid; gap:8px; }
.kband2{ display:grid; grid-template-rows:auto minmax(0,1fr); gap:6px; min-height:0;
  border-radius:18px; padding:6px 9px 9px; background:var(--panel2);
  border:2px solid transparent; }
/* the band happening NOW is the loudest thing on the screen — that was always the
   job bands were meant to do, and a tab bar made the child ask for it instead */
.kband2.now{ background:var(--accent-soft); border-color:var(--accent); }
/* still to come: full size, set back — visible without competing with now */
.kband2.later{ opacity:.7; }
.kband2.finished{ grid-template-rows:auto; padding:5px 9px 6px; opacity:.8; }

.kbhead{ display:flex; align-items:center; gap:8px; min-width:0; }
.kbico{ font-size:clamp(15px,2.6vh,22px); line-height:1; }
.kbword{ font-size:clamp(11px,1.9vh,16px); font-weight:800; color:var(--muted);
  text-transform:uppercase; letter-spacing:.6px; }
.kbnow{ font-size:clamp(10px,1.7vh,14px); font-weight:900; color:var(--accent);
  background:var(--panel); border-radius:999px; padding:2px 9px; }
.kbcount{ margin-left:auto; font-size:clamp(13px,2.2vh,19px); font-weight:800;
  color:var(--muted); letter-spacing:2px; }
.kband2.finished .kbcount{ color:var(--pos); }

.kbcards{ display:grid; gap:10px; min-height:0; min-width:0;
  grid-template-columns:repeat(var(--c,2),minmax(0,1fr));
  grid-template-rows:repeat(var(--r,1),minmax(0,1fr)); }
/* Cards stay CARD-shaped. Left to fill a 1200px band a single chore became a
   banner with a small glyph adrift in it — the art is what a pre-reader actually
   reads, so the box is tied to the height the band could give it and centred. */
.kcard{ position:relative; min-height:0; min-width:0;
  height:100%; width:auto; aspect-ratio:1.25;
  min-width:min(100%,150px); max-width:100%;
  justify-self:center; align-self:stretch; }
/* the whole card is the target; the cell sizes it, the contents scale to the cell */
.kmain{ width:100%; height:100%; border-radius:20px; background:var(--panel);
  border:3px solid var(--line); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:4px; padding:8px; color:var(--text); overflow:hidden; }
/* The art is sized from the card height kidFit actually computed (--kh), not from
   container-query units: cqmin needs size containment, which not every browser the
   family owns supports, and the silent fallback made a 220px card carry a 50px
   glyph. A number we already know beats a unit we have to hope for. */
.kemo{ font-size:clamp(16px, calc(var(--kh, 120px) * .38), 96px); line-height:1.05; overflow:hidden; }
.kimg{ width:clamp(24px, calc(var(--kh, 120px) * .50), 150px);
  height:clamp(24px, calc(var(--kh, 120px) * .50), 150px);
  border-radius:14px; object-fit:cover; }
.ktitle{ font-size:clamp(9px, calc(var(--kh, 120px) * .12), 22px); font-weight:700;
  text-align:center; line-height:1.15; padding:0 4px; display:-webkit-box;
  -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.kcheck{ position:absolute; right:8px; top:6px; font-size:clamp(18px,4.5vh,40px);
  color:var(--pos); font-weight:900; }
/* done = three redundant signals; never colour alone (~8% of boys are red/green deficient) */
.kcard.done .kmain{ background:var(--panel2); border-color:var(--pos); opacity:.62; }
.kcard.done .kemo,.kcard.done .kimg{ filter:grayscale(1); }
.kcard.done .ktitle{ text-decoration:line-through; }
.kspeak{ position:absolute; left:8px; top:6px; width:clamp(44px,6vh,52px); height:clamp(44px,6vh,52px);
  border-radius:50%; background:var(--kidt); color:var(--text); font-size:clamp(15px,2.6vh,22px);
  padding:0; display:grid; place-items:center; border:2px solid var(--kid); }
.kcard.pop .kmain{ animation:kpop .5s ease; }
@keyframes kpop{ 0%{transform:scale(1)} 40%{transform:scale(1.06)} 100%{transform:scale(1)} }

/* a finished band keeps its evidence — small, ticked, and still tappable to undo */
.kthumbs{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.kthumb{ position:relative; width:clamp(36px,6vh,54px); height:clamp(36px,6vh,54px);
  border-radius:12px; background:var(--panel); border:2px solid var(--pos); padding:0;
  display:grid; place-items:center; overflow:visible; opacity:.75; }
.kthumb .kemo.kt{ font-size:clamp(16px,2.8vh,24px); }
.kthumb .kimg.kt{ width:100%; height:100%; border-radius:10px; filter:grayscale(1); }
.ktick{ position:absolute; right:-5px; top:-7px; font-size:clamp(13px,2.2vh,18px);
  color:var(--pos); font-weight:900; }

.kdone{ font-size:clamp(16px,3vh,24px); font-weight:800; color:var(--muted);
  display:grid; place-items:center; }

/* W15.4 — what the stars are FOR, pinned where it can't scroll away */
.kready{ display:flex; gap:8px; flex-wrap:wrap; }
.kreadyb{ background:var(--panel); border:2px solid var(--star); color:var(--text);
  border-radius:14px; padding:8px 14px; font-size:clamp(12px,2vh,16px); font-weight:800;
  min-height:44px; }
.kprize{ display:flex; align-items:center; gap:12px; background:var(--panel);
  border:2px solid var(--line); border-radius:18px; padding:8px 14px;
  font-size:clamp(13px,2.2vh,20px); font-weight:800; }
.kprize.ready{ background:var(--accent-soft); border-color:var(--star); }
.kprize.empty{ color:var(--muted); }
.kpe{ font-size:clamp(22px,4vh,38px); line-height:1; }
.kpimg{ width:clamp(32px,6vh,56px); height:clamp(32px,6vh,56px); border-radius:12px; object-fit:cover; }
.kpt{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kpstars{ margin-left:auto; font-size:clamp(15px,3vh,28px); letter-spacing:3px; color:var(--star); }
.kpstars.num{ letter-spacing:0; font-size:clamp(12px,2vh,17px); color:var(--muted); font-weight:700; }
.kpcost{ font-size:clamp(12px,2vh,17px); color:var(--muted); }
.kpbtn{ background:var(--star); color:#fff; font-size:clamp(13px,2.2vh,19px); font-weight:800;
  border-radius:14px; padding:10px 18px; min-height:48px; }
.kprize.ready .kpbtn{ animation:kpulse 1.6s ease-in-out 3; }
@keyframes kpulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
@media(prefers-reduced-motion:reduce){
  .kcard.pop .kmain{ animation:none; }
  .kprize.ready .kpbtn{ animation:none; }
}
/* Short viewport (a phone on its side, or a laptop window squashed vertically):
   four stacked band headers cost ~80px of the ~390px available, which is the
   difference between 56px cards and 22px ones. Put the label BESIDE the cards. */
@media (max-height:560px){
  /* the prize strip moves UP beside the identity row: two short bars stacked cost
     ~68px of a 390px screen, which is exactly the margin between a 56px card and a
     47px one. Side by side they cost one. */
  .kidwrap{ padding:6px 10px 8px; gap:6px;
    display:grid; grid-template-columns:1fr minmax(200px,34%);
    grid-template-rows:auto auto minmax(0,1fr);
    grid-template-areas:"top prize" "err err" "day day"; }
  .kidtop{ grid-area:top; gap:8px; }
  .kidwrap > .kprize{ grid-area:prize; }
  .kidwrap > .err{ grid-area:err; }
  .kidwrap > .kday{ grid-area:day; }
  .kidwrap > .kready{ display:none; }   /* the prize strip carries the live action */
  .kday{ gap:6px; }
  /* align-items must stay STRETCH: centring makes .kbcards shrink to its content
     height, which collapsed every card to 22px in landscape. */
  .kband2{ grid-template-columns:minmax(66px,auto) minmax(0,1fr);
    grid-template-rows:minmax(0,1fr); gap:8px; padding:5px 8px; align-items:stretch; }
  .kband2 .kbhead{ align-self:center; }
  .kband2.finished{ grid-template-rows:auto; }
  .kbhead{ flex-direction:column; align-items:flex-start; gap:1px; }
  .kbword{ font-size:10px; letter-spacing:.3px; }
  .kbcount{ margin-left:0; font-size:10px; }
  .kbnow{ font-size:9px; padding:1px 6px; }
  .kbcards{ gap:6px; }
  .kprize{ padding:5px 10px; }
  .ktitle{ -webkit-line-clamp:2; }
}

@media (min-width:1000px) and (orientation:landscape){
  .kidwrap{ padding:14px 20px 18px; gap:10px; }
  .kday{ gap:10px; }
  .kbcards{ gap:14px; }
  .kpbtn{ min-height:56px; }
}

/* ---- W6: countdowns ---- */
.cdgrid{ display:grid; grid-template-columns:1fr; gap:12px; }
.cdcard{ display:flex; align-items:center; gap:14px; background:var(--panel); border:1px solid var(--line);
  border-radius:16px; padding:14px 16px; box-shadow:var(--shadow); }
.cdemo{ font-size:32px; }
.cdmeta{ display:flex; flex-direction:column; gap:2px; }
.cdmeta b{ font-size:14px; font-weight:800; }
.cdwhen{ font-size:11.5px; color:var(--muted); font-weight:600; }
.cddays{ margin-left:auto; text-align:center; }
.cddays b{ display:block; font-size:26px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
.cddays span{ font-size:10px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; }
.sev .cdd{ font-weight:800; color:var(--purple); }
@media (min-width:1000px) and (orientation:landscape){
  .cdgrid{ grid-template-columns:repeat(3,1fr); }
  #wallInfo .cdchip{ display:flex; align-items:center; gap:7px; background:var(--purple-t);
    border:1px solid var(--purple); color:var(--text); border-radius:999px; padding:5px 14px;
    font-size:12.5px; font-weight:700; min-height:44px; white-space:nowrap; }
  #wallInfo .cdchip b{ font-variant-numeric:tabular-nums; }
}

/* ---- W7: ambient + sleep + settings ---- */
.ambient{ position:fixed; inset:0; z-index:60; display:none; flex-direction:column;
  justify-content:center; gap:26px; padding:0 70px; cursor:pointer;
  background:linear-gradient(160deg,#2A2622,#3B332B); color:#fff; }
.ambient.on{ display:flex; }
.ambbig{ font-size:104px; font-weight:200; letter-spacing:-3px; line-height:1; font-variant-numeric:tabular-nums; }
.ambsub{ font-size:20px; opacity:.6; margin-top:-4px; }
.ambcards{ display:flex; gap:12px; flex-wrap:wrap; }
.acard{ background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14);
  border-radius:14px; padding:12px 16px; min-width:198px; }
.acard .k{ font-size:11px; opacity:.55; text-transform:uppercase; letter-spacing:1px; font-weight:800; }
.acard .v{ font-size:16px; font-weight:600; margin-top:5px; }
.acard .m{ font-size:12.5px; opacity:.6; margin-top:3px; min-height:15px; }
.ambhint{ position:absolute; bottom:26px; left:70px; font-size:12px; opacity:.38; }
/* sleep is BLACK, not dim — matching the reference, and pair it with the kiosk's DPMS
   so the backlight actually powers down rather than rendering black pixels all night. */
.sleepveil{ position:fixed; inset:0; z-index:70; background:#000; display:none; }
.sleepveil.on{ display:block; }
.setgrid{ display:flex; flex-direction:column; gap:4px; }
.setgrid select,.setgrid input[type=time]{ width:100%; padding:11px 12px; border-radius:10px;
  border:1px solid var(--line); background:var(--panel2); font:inherit; color:var(--text); }

/* ---- W8: Lists, side-panel editor, past-event dimming ---- */
.lists{ display:grid; grid-template-columns:1fr; gap:12px; }
.lcard{ background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:13px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; }
.lcard h4{ margin:0 0 4px; font-size:14px; display:flex; align-items:center; gap:7px; }
.lsw{ width:10px; height:10px; border-radius:3px; }
.laddbox{ border:1px dashed var(--line); border-radius:10px; padding:9px; font-size:12px;
  color:var(--muted); background:none; margin:9px 0; text-align:left; min-height:44px; }
.li{ display:flex; align-items:center; gap:9px; padding:8px 2px; font-size:12.5px;
  border-bottom:1px solid var(--line); min-height:44px; cursor:pointer; }
.litick{ width:22px; height:22px; flex:0 0 22px; border-radius:50%; border:2px solid var(--line);
  display:grid; place-items:center; font-size:12px; color:#fff; }
.li.done{ color:var(--muted); }
.li.done .litx{ text-decoration:line-through; }
.li.done .litick{ background:var(--green); border-color:var(--green); }
.litx{ flex:1; }

@media (min-width:1000px) and (orientation:landscape){
  .lists{ grid-template-columns:repeat(3,1fr); align-items:start; }

  /* Side-panel editor. Skylight uses full dialogs; on a 1280px canvas that blots out
     the thing you're editing. The overlay stops eating pointer events, so the grid
     behind stays visible AND interactive. */
  .modal-overlay{ background:transparent; backdrop-filter:none; justify-content:flex-end;
    align-items:stretch; pointer-events:none; }
  .modal-overlay > *{ pointer-events:auto; }
  .modal{ width:380px; max-width:380px; max-height:100dvh; height:100dvh; margin:0;
    border-radius:18px 0 0 18px; border-left:1px solid var(--line);
    box-shadow:-10px 0 34px rgba(60,45,25,.18); animation:slidein .18s ease; }
  @keyframes slidein{ from{ transform:translateX(24px); opacity:.6 } to{ transform:none; opacity:1 } }
  body:has(.modal-overlay){ overflow:hidden; }
  /* the PIN and claim prompts are decisions, not edits — keep those centred and modal */
  .pinov, .claimov{ justify-content:center; align-items:center; background:rgba(46,42,38,.45);
    backdrop-filter:blur(3px); pointer-events:auto; }
  .pinov .modal, .claimov .modal{ width:auto; height:auto; max-height:92dvh; border-radius:18px;
    box-shadow:var(--shadow); animation:none; }

  /* past events recede so "what's left today" reads at a glance */
  .sev.past, .wev.past{ opacity:.55; }
}
@media(prefers-reduced-motion:reduce){ .modal{ animation:none !important; } }

/* ==========================================================================
   W9 — fixes found by walking the live wall
   ========================================================================== */
/* nothing in the app should ever fail silently; a tap that does nothing reads as broken */
.fhtoast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(12px);
  background:#2E2A26; color:#fff; font-size:14px; font-weight:600; padding:12px 18px;
  border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.25); z-index:90;
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; max-width:80vw; text-align:center; }
.fhtoast.on{ opacity:1; transform:translateX(-50%) translateY(0); }
@media(prefers-reduced-motion:reduce){ .fhtoast{ transition:none; } }

.sleepveil{ display:none; place-items:center; }
.sleepveil.on{ display:grid; }
.sleephint{ color:#fff; opacity:.30; font-size:15px; letter-spacing:.5px; transition:opacity 1.2s; }
.sleepveil.dark .sleephint{ opacity:0; }
.cico-none{ width:18px; height:18px; border-radius:50%; background:var(--line); display:inline-block; }

@media (min-width:1000px) and (orientation:landscape){
  /* ---- who is actually using this screen, and how to change it ---- */
  #wallInfo .whochip{ display:flex; align-items:center; gap:8px; background:var(--panel);
    border:1px solid var(--line); border-radius:999px; padding:4px 12px 4px 4px;
    min-height:44px; color:var(--text); font-size:13px; font-weight:700; max-width:210px; }
  #wallInfo .whochip:hover{ border-color:var(--accent); }
  #wallInfo .whochip > span:nth-child(2){ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #wallInfo .whoswap{ color:var(--muted); font-weight:800; flex:0 0 auto; }
  .avatar.xs{ width:30px; height:30px; font-size:14px; box-shadow:none; flex:0 0 30px; }

  /* ---- rewards strip. .rwav was a bare <button>, so it inherited the global orange,
     11px/16px padded, 10px-radius button rule and burst out of its card. ---- */
  .rwav{ padding:0 !important; background:none !important; border:0; border-radius:50%;
    flex:0 0 auto; line-height:0; font-size:0; }
  /* line-height:0 on the button collapsed the initial inside it — restore on the avatar */
  .rwav .avatar.sm{ display:flex; line-height:1; font-size:15px; }
  .rwstrip{ flex-wrap:nowrap; }
  .rwcard{ flex:0 1 320px; min-width:0; }
  .rwnm{ display:block; font-size:12px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .rwnx{ display:block; font-size:11px; color:var(--muted); font-weight:600;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .rwqueue{ flex:0 0 auto; background:var(--accent-soft); border:1px solid var(--accent); color:var(--text);
    border-radius:13px; padding:9px 15px; font-size:12.5px; font-weight:700; min-height:56px; white-space:nowrap; }
  .rwqueue b{ font-size:15px; }
  .rqrow{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
  .rqtx{ flex:1; min-width:0; display:flex; flex-direction:column; }
  .rqtx b{ font-size:13px; } .rqtx span{ font-size:12px; color:var(--muted); }
  .rqrow button{ min-height:44px; font-size:12px; font-weight:800; border-radius:9px; padding:8px 12px; }

  /* ---- the active person's column, so "whose chores am I looking at" is never a guess ---- */
  .ccol.me{ background:var(--panel); box-shadow:inset 0 3px 0 var(--accent); }
  .cme{ font-size:9.5px; font-weight:800; color:#fff; background:var(--accent);
    border-radius:999px; padding:1px 6px; vertical-align:middle; letter-spacing:.4px; }
  .chd .cnm{ min-width:0; }
  .cst{ flex:0 0 auto; }
}

/* ---- W10 P0 ---- */
@media (min-width:1000px) and (orientation:landscape){
  /* a chore row is now [tap to toggle][edit] — the wall had no edit path at all */
  .crow{ display:flex; align-items:stretch; gap:4px; margin-bottom:6px; }
  .crow .citem{ flex:1; margin-bottom:0; min-width:0; }
  .cedit{ flex:0 0 auto; width:34px; min-height:58px; background:transparent; border:1px solid var(--line);
    border-radius:11px; font-size:15px; padding:0; color:var(--muted); }
  .cedit:hover{ border-color:var(--accent); background:var(--panel); }
  .cadd{ flex:0 0 auto; width:32px; height:32px; min-height:0; padding:0; border-radius:9px;
    background:transparent; border:1px solid var(--line); color:var(--muted);
    font-size:19px; line-height:1; display:grid; place-items:center; }
  .cadd:hover{ border-color:var(--accent); color:var(--accent); }
  .ccol .chd{ gap:6px; }
  /* Meals + Finance need the width back now that their tabs are visible again */
  .mealwrap,.finwrap{ max-width:none; }
}

/* ---- W11: streaks + surprise bonus chores ---- */
.kstreak{ margin-left:auto; font-size:20px; font-weight:800; color:var(--accent);
  background:var(--accent-soft); border-radius:999px; padding:6px 14px; }
.kidstars{ margin-left:12px; }
.kcard.bonus .kmain{ border-color:var(--star); box-shadow:0 0 0 3px var(--accent-soft); }
.kbonus{ position:absolute; right:10px; bottom:10px; font-size:15px; font-weight:800;
  color:#fff; background:var(--star); border-radius:999px; padding:4px 10px; }
.cstreak{ font-size:10px; font-weight:800; color:var(--accent);
  background:var(--accent-soft); border-radius:999px; padding:1px 6px; vertical-align:middle; }
.cpts.bonus{ color:#fff; background:var(--star); border-radius:999px; padding:2px 7px; }

/* ---- W12: Lists gets a real inline add row (prompt() is unusable on a wall) ---- */
.laddrow{ display:flex; gap:8px; margin:9px 0; }
.laddinput{ flex:1; min-height:44px; padding:10px 12px; border-radius:10px;
  border:1px dashed var(--line); background:var(--panel2); font:inherit; color:var(--text); }
.laddinput:focus{ border-style:solid; border-color:var(--accent); }
.laddgo{ flex:0 0 44px; min-height:44px; padding:0; border-radius:10px; font-size:20px; line-height:1; }

/* ---- W12: modules must actually use the wall. .card capped at 380px, which is why
     Meals rendered one narrow column in a 1400px pane. The login/picker card lives
     inside .center and keeps its narrow width. ---- */
@media (min-width:1000px) and (orientation:landscape){
  .content .card{ max-width:none; padding:18px; }
  .content .card + .card{ margin-top:14px; }
  /* pantry / buy lists read as columns, not one long ribbon */
  /* the in-house / buy lists flow into columns instead of one long ribbon down
     the left edge of a 1400px pane */
  #mealbody .card{ columns:3 320px; column-gap:30px; }
  #mealbody .card > .mealhead,#mealbody .card > p.sub{ column-span:all; }
  #mealbody .mrow,#mealbody .catlbl,#mealbody .planday{ break-inside:avoid; }
  #mealbody .planweek{ columns:auto; }
  .lists .lcard{ max-width:none; }
}

/* ==========================================================================
   W14 — the phone is a first-class surface, not a fallback.
   Same destinations as the wall rail, rendered as a bottom tab bar; same chore
   semantics (bands, streak, bonus, up-for-grabs, parent queue).
   ========================================================================== */
.phonetabs{ position:fixed; left:0; right:0; bottom:0; z-index:45; display:flex;
  background:var(--panel); border-top:1px solid var(--line);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  box-shadow:0 -2px 12px rgba(44,55,48,.06); }
.ptab{ flex:1; min-width:0; background:none; border:0; padding:6px 2px; border-radius:12px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--muted); font-weight:700; font-size:10.5px; min-height:52px; }
.ptab .pico{ font-size:20px; line-height:1; }
.ptab.on{ color:var(--accent); background:var(--accent-soft); }
.ptab.soon{ opacity:.4; }
.plbl{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
/* keep the last row clear of the bar */
html.hastabs .content{ padding-bottom:calc(74px + env(safe-area-inset-bottom)); }
html.hastabs .modal{ padding-bottom:calc(env(safe-area-inset-bottom) + 8px); }

/* chore progress on the phone's member chips */
.mfrac{ margin-left:6px; font-size:11px; font-weight:800; color:var(--muted);
  font-variant-numeric:tabular-nums; }
.mchip.on .mfrac{ color:inherit; opacity:.85; }

/* the phone chore list gains the wall's semantics */
.tasklist .cgroup{ font-size:10px; font-weight:800; color:var(--muted); text-transform:uppercase;
  letter-spacing:.6px; margin:14px 0 6px; }
.tasklist .cico{ margin-right:7px; font-size:16px; vertical-align:-2px; }
.tasklist .cico img{ width:22px; height:22px; border-radius:5px; object-fit:cover;
  display:inline-block; vertical-align:-5px; }
.taskstar.bonus{ color:#fff; background:var(--star); border-radius:999px; padding:2px 8px; font-weight:800; }
.tasklist.grabs .task{ border-style:dashed; }

@media (min-width:1000px) and (orientation:landscape){
  .phonetabs{ display:none !important; }
  html.hastabs .content{ padding-bottom:16px; }
}

/* W14: reward edit + create on the wall (there was no way to fix a price) */
@media (min-width:1000px) and (orientation:landscape){
  .rwedit{ flex:0 0 auto; width:40px; min-height:44px; padding:0; border-radius:10px;
    background:transparent; border:1px solid var(--line); color:var(--muted); font-size:14px; }
  .rwedit:hover{ border-color:var(--accent); }
  .rwnew{ flex:0 0 auto; min-height:56px; padding:0 16px; border-radius:13px; font-size:15px;
    font-weight:800; background:transparent; border:1px dashed var(--line); color:var(--muted); }
  .rwnew:hover{ border-color:var(--accent); color:var(--accent); }
}

/* ==========================================================================
   W15.1 — the icon field. Photo first, because that is what a parent standing
   in the bedroom actually wants, and it is the option the app never offered.
   ========================================================================== */
.iconfield{ border:1px solid var(--line); border-radius:14px; padding:10px;
  background:var(--panel); display:flex; flex-direction:column; gap:8px; }
.ipmain{ display:flex; gap:12px; align-items:flex-start; }
.ippreview{ width:76px; height:76px; flex:0 0 auto; border-radius:14px; background:var(--panel2);
  border:2px dashed var(--line); display:grid; place-items:center; overflow:hidden; }
.ippreview img{ width:100%; height:100%; object-fit:cover; }
.ipemo{ font-size:40px; line-height:1; }
.ipnone{ font-size:10px; color:var(--muted); text-align:center; padding:0 4px; line-height:1.2; }
.ipactions{ display:flex; flex-wrap:wrap; gap:6px; flex:1 1 auto; min-width:0; }
.ipbtn{ background:var(--panel2); color:var(--text); border:1px solid var(--line);
  border-radius:11px; padding:9px 12px; font-size:13px; font-weight:700; min-height:44px; }
.ipbtn.primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
.ipemoji{ display:grid; grid-template-columns:repeat(auto-fill,minmax(46px,1fr)); gap:6px;
  max-height:190px; overflow:auto; padding:4px; background:var(--panel2); border-radius:12px; }
.ipe{ background:var(--panel); border:1px solid var(--line); border-radius:10px;
  font-size:24px; padding:0; min-height:46px; }
.iplink input{ width:100%; }
.iphint{ font-size:12px; color:var(--muted); margin:0; }
.iphint.bad{ color:var(--danger); font-weight:700; }

/* ==========================================================================
   W15.5 — chore TOTALS in Schedule and Week; the list only on Day.
   ========================================================================== */
.sfoot .chores{ display:block; width:100%; text-align:left; background:transparent;
  border:0; padding:6px 0 0; color:var(--muted); font-size:12px; min-height:0; }
.cbar{ height:8px; border-radius:5px; background:var(--line); overflow:hidden; margin-bottom:4px; }
.cbar i{ display:block; height:100%; background:var(--pos); border-radius:5px; }
.cbar.all i{ background:var(--star); }
.cbnum{ font-size:12px; color:var(--muted); display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.cbnum b{ color:var(--text); }
.cbwho{ display:inline-flex; align-items:center; gap:3px; font-weight:700; }
.cbwho i{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.dhch{ font-size:11px; font-weight:800; color:var(--muted); margin-top:2px; }
.dhch.all{ color:var(--pos); }

/* Day's chore summary is the same component Schedule's footer uses — one bar, one
   sentence, one per-person split. It is a button because the detail is one tap away. */
.daychores{ display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  width:100%; text-align:left; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:10px 14px; margin-bottom:10px; color:var(--text); }
.dchl{ font-weight:800; font-size:14px; flex:0 0 auto; }
.daychores .cbar{ flex:1 1 160px; min-width:140px; margin:0; }
.daychores .cbnum{ flex:0 0 auto; font-size:13px; }

/* Narrow phone: the header star board and the prize strip were saying the same
   thing, and between them they squeezed the child's own name down to "D…" and the
   prize down to "l.". The prize strip wins — it has the picture — so the header
   board stands down and the stars wrap under the prize name. */
@media (max-width:520px){
  .kidtop .kidstars{ display:none; }
  .kidname{ flex:1 1 auto; min-width:0; margin-right:auto; }
  .kprize{ flex-wrap:wrap; row-gap:4px; }
  .kprize .kpt{ flex:1 1 auto; min-width:0; }
  .kprize .kpstars{ order:3; flex:1 0 100%; margin-left:0; text-align:center; }
  .kprize .kpstars.num{ text-align:left; }
}

/* ==========================================================================
   W16 — PRAYER, QUR'AN, ADHKAR
   --------------------------------------------------------------------------
   Arabic is set in a naskh face at a size that is genuinely readable across a
   kitchen, and it is the ONLY thing on these screens allowed to be that big.
   The stack degrades to whatever naskh the box has; on Debian that means
   `apt install fonts-hosny-amiri fonts-sil-scheherazade` — without it Arabic
   falls back to DejaVu, which renders the harakat badly.
   ========================================================================== */
:root{
  --arabic:"Amiri Quran","Amiri","KFGQPC Uthmanic Script HAFS","Scheherazade New",
           "Noto Naskh Arabic","Traditional Arabic","Times New Roman",serif;
  --q-arabic:34px;
  --pray:#3F7A6E;            /* one colour for everything prayer, distinct from
                                --accent so "the athan is next" never reads as
                                "you have an unsaved edit" */
  --pray-t:#DCEAE6;
}

/* ---- the always-on strip ---- */
#wallPrayer{ align-items:stretch; gap:0; padding:0 10px; background:var(--panel);
  border-bottom:1px solid var(--line); overflow-x:auto; }
.praycell{ background:none; border:0; border-radius:9px; padding:2px 11px; min-width:74px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  color:var(--muted); font-weight:600; flex:0 0 auto; }
.praycell.head{ min-width:40px; padding:2px 6px; }
.praycell .pico{ font-size:19px; }
.praycell .pn{ font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; }
.praycell .pt{ font-size:14px; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; }
.praycell.muted{ opacity:.5; }
.praycell.cur{ background:var(--panel2); }
.praycell.next{ background:var(--pray-t); color:var(--pray); }
.praycell.next .pt{ color:var(--pray); }
.praycell:hover{ background:var(--panel2); }
.prayspacer{ flex:1; min-width:8px; }
.praynext{ display:flex; align-items:center; gap:7px; flex:0 0 auto; padding-right:4px;
  color:var(--muted); font-size:12px; }
.praynext b{ font-size:15px; color:var(--pray); font-variant-numeric:tabular-nums; }
#wallInfo .hijri{ font-size:12.5px; color:var(--muted); font-weight:600; white-space:nowrap; }

/* ---- the stop bar. Above the screensaver (60) and the overnight veil (70),
       because those are exactly the moments an adhan needs silencing. ---- */
.stopbar{ position:fixed; z-index:120; left:50%; transform:translateX(-50%) translateY(140%);
  bottom:calc(18px + env(safe-area-inset-bottom)); display:flex; align-items:center; gap:12px;
  background:#22302B; color:#F2F6F3; border-radius:999px; padding:9px 10px 9px 18px;
  box-shadow:0 8px 30px rgba(0,0,0,.32); transition:transform .22s ease; max-width:92vw; }
.stopbar.on{ transform:translateX(-50%) translateY(0); }
.sbdot{ width:9px; height:9px; border-radius:50%; background:#8FD3BE; flex:0 0 9px;
  animation:sbpulse 1.4s ease-in-out infinite; }
@keyframes sbpulse{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }
.sbtxt{ font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sbbtn{ background:#F2F6F3; color:#22302B; border-radius:999px; padding:8px 18px; font-weight:800;
  font-size:14px; min-height:40px; }

/* ---- prayer page ---- */
.prnextbig{ background:var(--pray-t); border:1px solid var(--line); border-radius:18px;
  padding:20px 22px; text-align:center; }
.prnextbig .k{ font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--pray); }
.prnextbig .v{ font-size:34px; font-weight:800; letter-spacing:-.5px; margin-top:2px; }
.prnextbig .t{ font-size:20px; font-weight:700; color:var(--pray); font-variant-numeric:tabular-nums; }
.prnextbig .c{ font-size:15px; color:var(--muted); margin-top:4px; font-variant-numeric:tabular-nums; }
.prnextbig .h{ font-size:13px; color:var(--muted); margin-top:8px; }
.prtimes{ margin-top:16px; border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:var(--panel); }
.prrow{ display:flex; align-items:center; gap:12px; padding:0 14px; min-height:var(--row-h);
  border-bottom:1px solid var(--line); }
.prrow:last-child{ border-bottom:0; }
.prrow.next{ background:var(--pray-t); }
.prn{ flex:1; font-weight:700; display:flex; align-items:baseline; gap:10px; }
.prn i{ font-family:var(--arabic); font-style:normal; font-size:17px; color:var(--muted); }
.prt{ font-size:17px; font-weight:800; font-variant-numeric:tabular-nums; min-width:82px; text-align:right; }
button.prz{ background:none; border:1px solid var(--line); border-radius:10px; padding:8px 12px;
  font-size:16px; min-width:48px; min-height:44px; }
button.prz.off{ opacity:.55; }
span.prz{ min-width:82px; text-align:right; font-size:12px; }
.prtiles{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px; }
.prtile{ background:var(--panel); border:1px solid var(--line); border-radius:18px; color:var(--text);
  padding:18px; text-align:left; display:flex; flex-direction:column; gap:5px; min-height:104px; }
.prtile .e{ font-size:26px; }
.prtile b{ font-size:17px; }
.prtile .m{ font-size:12.5px; color:var(--muted); font-weight:400; line-height:1.4; }
.prfoot{ text-align:left !important; margin-top:18px !important; line-height:1.55; }
@media (max-width:560px){ .prtiles{ grid-template-columns:1fr; } }

/* ---- prayer settings rows ---- */
.prsetlist{ border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-top:10px; background:var(--panel); }
.prsetrow{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.prsetrow:last-child{ border-bottom:0; }
.psn{ flex:1 0 110px; font-weight:700; display:flex; flex-direction:column; }
.psn i{ font-style:normal; font-size:12px; color:var(--muted); font-weight:600; font-variant-numeric:tabular-nums; }
.psen{ margin:0 !important; flex:0 0 auto; }
.psv{ display:flex; align-items:center; gap:7px; flex:1 1 150px; }
.psv input[type=range]{ flex:1; min-width:90px; }
.psv i{ font-style:normal; font-size:12px; color:var(--muted); min-width:36px; font-variant-numeric:tabular-nums; }
.pso select{ min-width:104px; }

/* ---- Qur'an: surah list ---- */
.qsearchrow{ display:flex; gap:8px; margin-bottom:14px; }
.qsearchrow input{ flex:1; }
.qresume{ width:100%; text-align:left; background:var(--pray-t); color:var(--pray);
  border:1px solid var(--line); border-radius:14px; padding:14px 16px; font-weight:700; margin-bottom:14px; }
.qmarks{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
.qmark{ background:var(--panel); border:1px solid var(--line); color:var(--text); border-radius:999px;
  padding:8px 14px; display:flex; gap:8px; align-items:baseline; font-weight:600; font-size:13px; }
.qmark span{ color:var(--muted); font-weight:400; }
.qgrid{ display:grid; grid-template-columns:1fr; gap:8px; }
@media (min-width:700px){ .qgrid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .qgrid{ grid-template-columns:repeat(3,1fr); } }
.qcard{ background:var(--panel); border:1px solid var(--line); border-radius:14px; color:var(--text);
  padding:12px 14px; display:flex; align-items:center; gap:12px; text-align:left; min-height:64px; }
.qcard:hover{ border-color:var(--pray); }
.qnum{ width:34px; height:34px; flex:0 0 34px; border-radius:10px; background:var(--panel2);
  display:grid; place-items:center; font-weight:800; font-size:13px; color:var(--muted); }
.qmeta{ flex:1; display:flex; flex-direction:column; min-width:0; }
.qmeta b{ font-size:15px; }
.qsub{ font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qar{ font-family:var(--arabic); font-size:21px; color:var(--pray); }
.qres{ width:100%; text-align:left; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:12px 14px; margin-bottom:8px; color:var(--text);
  display:flex; flex-direction:column; gap:6px; }
.qrk{ font-size:11px; font-weight:800; color:var(--pray); letter-spacing:.5px; }
.qra{ font-family:var(--arabic); font-size:22px; line-height:2; }
.qrt{ font-size:13px; color:var(--muted); line-height:1.5; }

/* ---- Qur'an: the reader ---- */
.sbar{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.sbtn{ background:var(--pray); border-radius:999px; padding:10px 20px; font-weight:700; min-height:44px; }
.sbstate{ font-size:12px; color:var(--muted); }
.soptions{ background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:6px 16px 16px; margin-bottom:14px; }
.soptions input[type=range]{ width:100%; }
.bismillah{ font-family:var(--arabic); font-size:calc(var(--q-arabic) * .9); text-align:center;
  color:var(--pray); padding:10px 0 18px; line-height:2; }
.ayah{ border-bottom:1px solid var(--line); padding:14px 4px 18px; }
.ayah:last-child{ border-bottom:0; }
.ayah.on{ background:var(--pray-t); border-radius:14px; padding-left:12px; padding-right:12px; }
.ayah.flash{ animation:ayahflash 1.6s ease; }
@keyframes ayahflash{ 0%{ background:var(--accent-soft) } 100%{ background:transparent } }
.ahead{ display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.anum{ font-size:11px; font-weight:800; color:var(--pray); background:var(--pray-t);
  border-radius:999px; padding:3px 10px; }
.aico{ background:none; border:1px solid var(--line); border-radius:9px; color:var(--muted);
  padding:6px 10px; font-size:13px; min-height:36px; }
.aico:hover{ border-color:var(--pray); color:var(--pray); }
.aar{ font-family:var(--arabic); font-size:var(--q-arabic); line-height:2.15; text-align:right;
  word-spacing:.12em; }
/* The highlight. A background rather than a colour change: colour alone is not
   findable across a room, and a 5-year-old following along needs to SEE where
   the voice is. */
.aar .w{ display:inline-block; padding:1px 3px; border-radius:6px; transition:background .12s linear; }
.aar .w.on{ background:var(--pray); color:#fff; }
.aar .w i{ display:block; font-family:inherit; font-style:normal; font-size:11px;
  color:var(--muted); direction:ltr; text-align:center; line-height:1.4; }
.aar .w.on i{ color:rgba(255,255,255,.8); }
.aen{ font-size:14.5px; color:var(--muted); line-height:1.65; margin-top:12px; }

/* ---- Adhkar ---- */
.acard2{ width:100%; background:var(--panel); border:1px solid var(--line); border-radius:14px;
  color:var(--text); padding:13px 16px; margin-bottom:8px; display:flex; align-items:center;
  gap:12px; text-align:left; min-height:60px; }
.acard2:hover{ border-color:var(--pray); }
.ameta{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.ameta b{ font-size:15px; }
.aar2{ font-family:var(--arabic); font-size:17px; color:var(--pray); }
.ago{ color:var(--muted); font-size:20px; }
.dhikr{ border:1px solid var(--line); border-radius:16px; background:var(--panel);
  padding:12px 16px 16px; margin-bottom:10px; }
.dhikr.on{ border-color:var(--pray); background:var(--pray-t); box-shadow:0 0 0 3px var(--pray-t); }
.dhead{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.dnum{ font-size:11px; font-weight:800; color:var(--muted); background:var(--panel2);
  border-radius:999px; padding:3px 10px; }
.drep{ font-size:11px; font-weight:800; color:var(--pray); background:var(--pray-t);
  border-radius:999px; padding:3px 10px; }
.dcount{ font-size:13px; font-weight:800; color:var(--muted); background:var(--panel2);
  border-radius:999px; padding:8px 14px; min-width:52px; text-align:center; cursor:pointer;
  font-variant-numeric:tabular-nums; }
.dcount.done{ background:var(--pos); color:#fff; }
.dar{ font-family:var(--arabic); font-size:calc(var(--q-arabic) * .78); line-height:2.1; text-align:right; }
.den{ font-size:14px; color:var(--muted); line-height:1.6; margin-top:10px; }

/* ---- the verse on the idle screen ---- */
.ambverse{ max-width:70%; }
.ambverse .avar{ font-family:var(--arabic); font-size:30px; line-height:2.1; opacity:.94; }
.ambverse .aven{ font-size:15px; opacity:.62; line-height:1.6; margin-top:10px; }
.ambverse .avsrc{ font-size:11.5px; opacity:.42; margin-top:8px; letter-spacing:.5px;
  text-transform:uppercase; font-weight:800; }

/* ---- W16 on the wall ------------------------------------------------------
   The wall makes .content a full-height flex column that never scrolls, which
   is right for the calendar (a grid that must fit) and wrong for anything you
   read. These five panes are reading surfaces: they scroll, and their children
   keep their natural height instead of being squeezed to fit — without
   `flex:0 0 auto` the prayer table silently lost three of its six rows to
   flex-shrink, with `overflow:hidden` hiding the evidence.
   -------------------------------------------------------------------------- */
@media (min-width:1000px) and (orientation:landscape){
  /* `.app > .content{overflow:hidden}` above is deliberate for the calendar and
     fatal here, and it out-specifies a bare class — so these have to be written
     as descendants of .app to win. Getting this wrong hides the bottom half of
     every reading pane with no scrollbar to hint that anything is missing. */
  .app > .content.prayerpage,.app > .content.quranpage,.app > .content.surahpage,
  .app > .content.adhkarpage,.app > .content.dhikrpage,.app > .content.settingspage{ overflow-y:auto; }
  .prayerpage > *,.quranpage > *,.surahpage > *,.adhkarpage > *,.dhikrpage > *,
  .settingspage > *{ flex:0 0 auto; }
  .settingspage{ max-width:900px; margin:0 auto; width:100%; }
  /* A 1176px measure is unreadable. Cap it and centre; Arabic especially. */
  .prayerpage,.adhkarpage{ max-width:900px; margin:0 auto; width:100%; }
  .surahpage{ max-width:860px; margin:0 auto; width:100%; }
  .quranpage{ max-width:1100px; margin:0 auto; width:100%; }
  .surahpage .sbar{ position:sticky; top:0; z-index:3; background:var(--bg); padding:6px 0; margin:0 0 8px; }
  .dhikrpage{ max-width:820px; margin:0 auto; width:100%; }
  .prnextbig .v{ font-size:40px; }
  .prnextbig .t{ font-size:24px; }
}
.hint code{ background:var(--panel2); color:var(--text); padding:1px 6px; border-radius:5px;
  font-size:11.5px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }