/* Halterman Chore System — CHOREFIRE.
   Same soul as cc + the Refinery: auto day/night, layout NEVER changes
   between themes, ember is THE strike color. Phone-first at 375px,
   big tap targets for kid thumbs. */

:root{
  color-scheme: light dark;
  --paper:#F4F3F0; --panel:#FCFBF9; --panel-raised:#FFFFFF; --ink:#1D1C1A; --ink-soft:#6B6862;
  --line:#DDDAD3;
  --ember:#D95B07; --ember-soft:#FBE3D0; --ember-ink:#FFFFFF;
  --gold:#9A7B1E; --gold-soft:#F0E8CC;
  --good:#2F7D46; --good-soft:#DDEEDF;
  --bad:#C13527;  --bad-soft:#F6DDD9;
  --wait:#9A7B1E; --wait-soft:#F0E8CC;
  --emberglow:rgba(217,91,7,0.35);
  --shadow: 0 1px 2px rgba(30,28,25,0.06), 0 6px 16px rgba(30,28,25,0.06);
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#1E1E1E; --panel:#252527; --panel-raised:#2E2E30; --ink:#F5F5F7; --ink-soft:#98989D;
    --line:#38383A;
    --ember:#FF7A1A; --ember-soft:#3A2312; --ember-ink:#1E1E1E;
    --gold:#FFD60A; --gold-soft:#403A18;
    --good:#30D158; --good-soft:#1F3A28;
    --bad:#FF453A;  --bad-soft:#44201D;
    --wait:#FFD60A; --wait-soft:#403A18;
    --emberglow:rgba(255,122,26,0.45);
    --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 10px 24px rgba(0,0,0,0.35);
  }
}

*{box-sizing:border-box;}
/* [hidden] must beat every display: rule below it — any class with
   display:flex/grid otherwise out-specifies the UA stylesheet and the
   element stays visible. Bit us twice (redo bar, chore form). */
[hidden]{display:none !important;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; overscroll-behavior-y:contain;
}
button{font-family:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer;}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}

.wrap{max-width:520px;margin:0 auto;
  padding:calc(env(safe-area-inset-top,0px) + 1rem) 1rem 4rem;}

/* ===== wordmark bar ===== */
.bar{display:flex;align-items:flex-end;justify-content:space-between;gap:.8rem;padding-bottom:1rem;}
.wordmark{font-size:1.7rem;font-weight:800;letter-spacing:.05em;line-height:1;}
.wordmark em{font-style:normal;color:var(--ember);}
.sub{color:var(--ink-soft);font-size:.75rem;margin-top:.3rem;}
.mode-chip{font-size:.62rem;letter-spacing:.14em;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:999px;padding:.25rem .55rem;}
.mode-chip.live{color:var(--good);border-color:var(--good);}

/* ===== landing cards — one per person, stacked =====
   The wall panel runs Chromium 83: no flex `gap`, no `inset`, no color-mix
   anywhere in here. Margins and rgba only. */
.tiles{display:block;margin-top:.6rem;}
.tile{display:block;text-decoration:none;color:inherit;
  background:var(--panel);border:1px solid var(--line);border-radius:1.1rem;
  padding:1rem 1.1rem 1.05rem;box-shadow:var(--shadow);
  border-left:4px solid var(--kid);
  transition:transform .08s ease;}
.tile + .tile{margin-top:.75rem;}
.tile:active{transform:scale(.985);}

.tile-head{display:flex;align-items:center;}
.tile .big{width:2.5rem;height:2.5rem;border-radius:50%;display:flex;
  align-items:center;justify-content:center;
  font-size:1.15rem;font-weight:800;color:#fff;flex:none;}
.tile .who{font-weight:800;font-size:1.05rem;margin-left:.6rem;letter-spacing:-.01em;}
.tile .who .purse{display:block;font-size:.72rem;font-weight:800;color:var(--good);
  margin-top:.2rem;letter-spacing:.01em;}
.tile .score{margin-left:auto;text-align:right;line-height:1;}
.tile .score b{font-size:1.5rem;font-weight:800;color:var(--kid);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.tile .score i{font-style:normal;font-size:.8rem;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;}
.tile .score .cap{display:block;font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:.15rem;}

.week{display:flex;align-items:flex-end;margin-top:.75rem;}
.day{flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  position:relative;}
.day + .day{margin-left:.3rem;}
/* height is set inline in px: a percentage here would resolve against the
   column that also holds the label, and flex-shrink would then squash the
   bars unevenly - which silently breaks the whole point of the chart. */
.track{width:100%;background:var(--line);border-radius:4px 4px 0 0;
  position:relative;overflow:hidden;flex:none;}
.fill{position:absolute;left:0;right:0;bottom:0;background:var(--kid);
  transition:height .5s ease;}
.fill.wait{background:var(--kid);opacity:.32;}
.dlab{font-size:.58rem;letter-spacing:.06em;color:var(--ink-soft);
  text-align:center;margin-top:.28rem;font-weight:650;}
.day.today .dlab{color:var(--ember);font-weight:800;}
.day.today .track{box-shadow:0 0 0 1.5px var(--ember);}
.day.done .dlab{color:var(--kid);}
.tile .caption{font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:.5rem;}

.momrow{display:flex;justify-content:center;margin-top:1.4rem;}
.mombtn{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.85rem;
  letter-spacing:.12em;color:var(--gold);border:1.5px solid var(--gold);
  border-radius:999px;padding:.6rem 1.4rem;}
button.mombtn{font-family:inherit;background:transparent;cursor:pointer;}
.mombtn.saver{color:var(--ink-soft);border-color:var(--line);margin-left:.7rem;}
.mombtn.saver:active{color:var(--gold);border-color:var(--gold);}

/* ===== kid header ===== */
.kidhead{display:flex;align-items:center;gap:.8rem;background:var(--panel);
  border:1px solid var(--line);border-radius:1.1rem;padding: .9rem 1rem;box-shadow:var(--shadow);}
.kidhead .avatar{width:2.9rem;height:2.9rem;border-radius:50%;display:grid;place-items:center;
  font-size:1.35rem;font-weight:800;color:#fff;flex:0 0 auto;}
.kidhead .stats{display:flex;gap:1rem;margin-left:auto;text-align:right;}
.stat .num{font-size:1.25rem;font-weight:800;line-height:1;}
.stat .lbl{font-size:.6rem;letter-spacing:.13em;color:var(--ink-soft);margin-top:.25rem;}
.stat.flame .num{color:var(--ember);}
.stat.cash .num{color:var(--good);}

/* ===== sections & chore rows ===== */
.sect{margin-top:1.3rem;}
.sect h2{font-size:.68rem;letter-spacing:.2em;color:var(--ink-soft);
  font-weight:700;margin:0 0 .55rem .2rem;}
.rows{display:flex;flex-direction:column;gap:.55rem;}
.chore{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:.95rem;
  padding:.85rem .9rem;box-shadow:var(--shadow);min-height:3.4rem;
  transition:transform .07s ease, border-color .15s ease;}
.chore:active{transform:scale(.985);}
.chore .box{width:1.7rem;height:1.7rem;border-radius:.55rem;border:2px solid var(--line);
  display:grid;place-items:center;flex:0 0 auto;font-size:1rem;color:var(--ember-ink);}
.chore .body{min-width:0;flex:1;}
.chore .name{font-weight:650;font-size:.95rem;line-height:1.25;}
.chore .meta{font-size:.7rem;color:var(--ink-soft);margin-top:.15rem;}
.chore .meta .support{color:var(--gold);font-weight:700;}
.chore .pts{flex:0 0 auto;font-weight:800;font-size:.92rem;color:var(--ink-soft);}
.chore .pill{flex:0 0 auto;font-size:.6rem;font-weight:800;letter-spacing:.09em;
  border-radius:999px;padding:.3rem .55rem;white-space:nowrap;}

.chore[data-st="todo"] .pill{background:var(--paper);color:var(--ink-soft);border:1px solid var(--line);}
.chore[data-st="pending"]{border-color:var(--wait);}
.chore[data-st="pending"] .box{border-color:var(--wait);background:var(--wait);color:var(--paper);}
.chore[data-st="pending"] .pill{background:var(--wait-soft);color:var(--wait);}
.chore[data-st="approved"]{border-color:var(--good);}
.chore[data-st="approved"] .box{border-color:var(--good);background:var(--good);color:#fff;}
.chore[data-st="approved"] .pill{background:var(--good-soft);color:var(--good);}
.chore[data-st="approved"] .pts{color:var(--good);}
.chore[data-st="rejected"]{border-color:var(--bad);}
.chore[data-st="rejected"] .box{border-color:var(--bad);color:var(--bad);}
.chore[data-st="rejected"] .pill{background:var(--bad-soft);color:var(--bad);}
.chore[data-st="skipped"] .pill,.chore[data-st="expired"] .pill{
  background:var(--paper);color:var(--ink-soft);border:1px dashed var(--line);}
.chore.readonly{opacity:.62;}
.chore.readonly:active{transform:none;}

@keyframes emberpop{
  0%{box-shadow:0 0 0 0 var(--emberglow);}
  100%{box-shadow:0 0 0 16px rgba(0,0,0,0);}
}
.chore.just-checked{animation:emberpop .5s ease-out;}

/* ===== mom ===== */
.pinbox{display:flex;flex-direction:column;align-items:center;gap:1rem;
  background:var(--panel);border:1px solid var(--line);border-radius:1.1rem;
  padding:2rem 1rem;box-shadow:var(--shadow);margin-top:.6rem;}
.pinbox .lock{font-size:2rem;}
.pinbox input{font-size:1.9rem;letter-spacing:.7em;text-align:center;width:9.5rem;
  background:var(--paper);color:var(--ink);border:1.5px solid var(--line);
  border-radius:.8rem;padding:.55rem .2rem .55rem .9rem;font-family:ui-monospace,Menlo,monospace;}
.pinbox input:focus{outline:2px solid var(--gold);border-color:var(--gold);}
.pin-err{color:var(--bad);font-size:.8rem;font-weight:700;min-height:1.1em;}

.bigbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--ember);color:var(--ember-ink);font-weight:800;font-size:1.05rem;
  letter-spacing:.06em;border-radius:1rem;padding:1.05rem;box-shadow:var(--shadow);
  transition:transform .08s ease;}
.bigbtn:active{transform:scale(.97);}
.bigbtn[disabled]{opacity:.45;}
.goldbtn{background:none;border:1.5px solid var(--gold);color:var(--gold);
  font-weight:700;font-size:.8rem;letter-spacing:.1em;border-radius:999px;padding:.55rem 1.1rem;}

.kidgroup{margin-top:1.1rem;}
.kidgroup .khead{display:flex;align-items:center;gap:.55rem;margin-bottom:.5rem;}
.kidgroup .dot{width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;
  font-size:.75rem;font-weight:800;color:#fff;}
.kidgroup .kname{font-weight:750;}
.kidgroup .ksum{margin-left:auto;font-size:.75rem;color:var(--ink-soft);}
.badge{display:inline-grid;place-items:center;min-width:1.5rem;height:1.5rem;
  border-radius:999px;background:var(--ember);color:var(--ember-ink);
  font-size:.75rem;font-weight:800;padding:0 .4rem;}

.allclear{text-align:center;color:var(--ink-soft);background:var(--panel);
  border:1px dashed var(--line);border-radius:1rem;padding:2rem 1rem;margin-top:1rem;}
.allclear .fire{font-size:1.8rem;}
/* No opacity here. At .85 this measured 4.28:1 in dark mode — under the 4.5:1
   floor, on the ONE line that tells the family why the board is down. Full
   --ink-soft measures 5.33:1. (MACME: the element that fails the contrast check
   is always the small one you were not looking at.) */
.allclear .why{display:block;margin-top:.5rem;font-size:.78rem;color:var(--ink-soft);}

/* ===== stale banner — the board you're looking at is the LAST GOOD one =====
   Shown above a cached chart when the database is unreachable. Deliberately
   calm and NOT ember: nothing is wrong with the family's week, we just can't
   refresh it. Ember is reserved for strike points (AARON.md). */
.stalebar{text-align:center;background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--gold);border-radius:.9rem;padding:.6rem .9rem;
  margin-top:1rem;font-size:.78rem;color:var(--ink-soft);line-height:1.4;}
.stalebar b{color:var(--ink);font-weight:700;}

/* ===== quote of the day (kid pages, above the chores) ===== */
.qcard{background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--ember);border-radius:.9rem;
  padding:.9rem 1rem;margin-top:1rem;box-shadow:var(--shadow);}
.qcard.scripture{border-left-color:var(--gold);}
.qtext{font-size:.9rem;line-height:1.45;font-style:italic;color:var(--ink);}
.qwho{margin-top:.45rem;font-size:.66rem;letter-spacing:.14em;font-weight:800;
  color:var(--ink-soft);text-transform:uppercase;}
.qcard.scripture .qwho{color:var(--gold);}

/* Sunday — the rest day gets its own quiet treatment (no fire) */
.allclear.sabbath{border-style:solid;border-color:var(--gold-soft);
  background:var(--panel);padding:2.2rem 1.2rem;}
.sabbath .sab-head{font-size:1.15rem;font-weight:800;color:var(--gold);
  letter-spacing:.02em;margin-bottom:.9rem;}
.sabbath .sab-verse{font-size:.95rem;line-height:1.5;color:var(--ink);
  font-style:italic;max-width:22rem;margin:0 auto;}
.sabbath .sab-ref{margin-top:.7rem;font-size:.7rem;letter-spacing:.16em;
  font-weight:700;color:var(--ink-soft);}

/* stars masked (CHORES_CONFIG.SHOW_STARS) — buttons take the full width */
.scorebar.nostars .act{flex:1;text-align:center;}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:1.4rem;z-index:40;
  background:var(--panel-raised);border:1px solid var(--line);border-radius:.9rem;
  box-shadow:var(--shadow);padding:.8rem 1.1rem;font-weight:700;font-size:.85rem;
  max-width:92vw;text-align:center;}
.toast.good{border-color:var(--good);color:var(--good);}
.toast.bad{border-color:var(--bad);color:var(--bad);}

.foot{margin-top:2.2rem;text-align:center;font-size:.68rem;color:var(--ink-soft);}
.foot a{color:var(--ink-soft);}

/* ===== mom's pin wall ===== */
#pinwall{position:fixed;inset:0;z-index:998;background:var(--paper);
  display:grid;place-items:center;padding:1rem;transition:opacity .6s ease;}
#pinwall.wall-open{opacity:0;pointer-events:none;}
.wall-crown{font-size:2.1rem;line-height:1;}
.pin-pad{display:grid;grid-template-columns:repeat(3,4.6rem);gap:.5rem;justify-content:center;}
.pin-pad .wall-key{max-width:none;min-height:3.4rem;font-size:1.25rem;border-radius:.7rem;}
.pin-pad .wall-key.blank{visibility:hidden;}
#pinwall.wall-shake .wall-inner{animation:wallshake .4s ease;}
#pinwall.wall-shake .wall-slot{border-color:var(--bad);color:var(--bad);}

/* ===== mom's per-item scoring ===== */
.scorecard{display:flex;flex-direction:column;gap:.55rem;background:var(--panel);
  border:1px solid var(--line);border-radius:.95rem;padding:.8rem .85rem;box-shadow:var(--shadow);}
.scorecard .crow{display:flex;align-items:center;gap:.6rem;}
.scorecard .name{font-weight:650;font-size:.95rem;flex:1;min-width:0;line-height:1.25;}
.scorecard .pts{flex:0 0 auto;font-weight:800;font-size:.9rem;color:var(--ink-soft);}
.scorebar{display:flex;align-items:center;gap:.4rem;min-width:0;}
.stars{display:flex;gap:0;flex:1;min-width:0;}
.stars button{font-size:1.3rem;line-height:1;color:var(--line);padding:.1rem;
  transition:transform .06s ease;}
.stars button.on{color:var(--gold);}
.stars button:active{transform:scale(1.25);}
.act{border-radius:.7rem;font-weight:800;font-size:.7rem;letter-spacing:.02em;
  padding:.55rem .55rem;flex:0 0 auto;white-space:nowrap;}
.act.ok{background:var(--ember);color:var(--ember-ink);box-shadow:var(--shadow);}
.act.no{border:1.5px solid var(--bad);color:var(--bad);}
.act.plus{border:1.5px solid var(--good);color:var(--good);}
.act[disabled]{opacity:.45;}
.redobar{display:flex;gap:.45rem;align-items:center;}
.redobar input{flex:1;min-width:0;background:var(--paper);border:1px solid var(--line);
  border-radius:.7rem;padding:.6rem .7rem;color:var(--ink);font-family:inherit;font-size:.85rem;}
.redobar input:focus{outline:2px solid var(--bad);border-color:var(--bad);}

/* ===== payday ===== */
.rateline{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;
  font-size:.82rem;color:var(--ink-soft);margin-bottom:.7rem;}
.rateline input{width:4.2rem;background:var(--panel);border:1px solid var(--line);
  border-radius:.6rem;padding:.45rem .55rem;color:var(--ink);font-family:inherit;
  font-size:.95rem;font-weight:750;text-align:center;}
.rateline input:focus{outline:2px solid var(--ember);border-color:var(--ember);}
.ratehint{color:var(--good);font-weight:700;font-size:.75rem;}
#newpin{width:5.2rem;text-align:center;letter-spacing:.35em;}
.payrow{display:flex;align-items:center;gap:.6rem;background:var(--panel);
  border:1px solid var(--line);border-radius:.85rem;padding:.7rem .8rem;
  margin-bottom:.45rem;box-shadow:var(--shadow);}
.payrow .kname{font-weight:700;flex:1;min-width:0;}
.payrow .bal{font-weight:800;font-size:1.05rem;color:var(--good);}
.payrow .act{min-width:5.2rem;text-align:center;}

/* ===== mom's chore editor ===== */
.goldbtn.tiny{font-size:.6rem;padding:.3rem .7rem;letter-spacing:.12em;margin-left:.5rem;
  vertical-align:middle;}
.chips{display:flex;flex-wrap:wrap;gap:.35rem;flex:1;}
.chip{border:1.5px solid var(--line);border-radius:999px;padding:.45rem .7rem;
  font-weight:750;font-size:.78rem;color:var(--ink-soft);background:var(--panel);
  min-width:2.3rem;transition:transform .06s ease;}
.chip.on{border-color:var(--ember);color:var(--ember);background:var(--ember-soft);}
.chip:active{transform:scale(.92);}

.cform{display:flex;flex-direction:column;gap:.7rem;background:var(--panel);
  border:1px solid var(--line);border-radius:1rem;padding:.9rem;margin-top:.7rem;
  box-shadow:var(--shadow);}
.cform-title{font-size:.68rem;letter-spacing:.2em;font-weight:800;color:var(--ember);}
.cform input{background:var(--paper);border:1px solid var(--line);border-radius:.7rem;
  padding:.65rem .75rem;color:var(--ink);font-family:inherit;font-size:.95rem;width:100%;}
.cform input:focus{outline:2px solid var(--ember);border-color:var(--ember);}
.frow{display:flex;align-items:center;gap:.6rem;}
.frow .flab{flex:0 0 3.6rem;font-size:.62rem;letter-spacing:.14em;font-weight:800;
  color:var(--ink-soft);}
.frow input[type="number"]{width:5rem;flex:0 0 auto;}
.frow input[type="date"]{flex:1;}
.fnote{font-size:.7rem;color:var(--ink-soft);line-height:1.35;}
.fbtns{display:flex;gap:.5rem;align-items:center;}
.fbtns .act{flex:1;text-align:center;}

.clist-head{font-size:.62rem;letter-spacing:.18em;color:var(--ink-soft);font-weight:700;
  margin:.9rem 0 .4rem .2rem;}
.clist-row{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:.85rem;
  padding:.7rem .8rem;margin-bottom:.4rem;box-shadow:var(--shadow);}
.clist-row:active{transform:scale(.99);}
.clist-row .body{flex:1;min-width:0;}
.clist-row .name{font-weight:650;font-size:.9rem;line-height:1.25;}
.clist-row .meta{font-size:.68rem;color:var(--ink-soft);margin-top:.15rem;
  font-family:ui-monospace,Menlo,monospace;letter-spacing:.06em;}
.clist-row .pts{font-weight:800;font-size:.9rem;color:var(--ember);flex:0 0 auto;}
.clist-row .pen{color:var(--ink-soft);font-size:.9rem;flex:0 0 auto;}

/* ===== mom's blast ===== */
.blastbox{display:flex;flex-direction:column;gap:.6rem;align-items:stretch;}
.blastbox textarea{background:var(--panel);color:var(--ink);border:1px solid var(--line);
  border-radius:.9rem;padding:.8rem .9rem;font-family:inherit;font-size:.95rem;
  resize:none;box-shadow:var(--shadow);}
.blastbox textarea:focus{outline:2px solid var(--ember);border-color:var(--ember);}
.blastbox .goldbtn{align-self:center;}
button.mode-chip{cursor:pointer;}

/* ===== the front wall ===== */
#wall{position:fixed;inset:0;z-index:999;background:var(--paper);
  display:grid;place-items:center;padding:1rem;
  transition:opacity .6s ease;}
#wall.wall-open{opacity:0;pointer-events:none;}
.wall-inner{display:flex;flex-direction:column;align-items:center;gap:1.4rem;
  width:100%;max-width:420px;}
.wall-sub{font-size:.72rem;letter-spacing:.28em;font-weight:700;color:var(--ink-soft);}
.wall-slots{display:flex;gap:.3rem;justify-content:center;}
.wall-slot{width:2rem;height:2.5rem;border-radius:.5rem;border:1.5px solid var(--line);
  background:var(--panel);display:grid;place-items:center;
  font-weight:800;font-size:1.15rem;}
.wall-slot.filled{border-color:var(--ember);color:var(--ember);}
.wall-kb{display:flex;flex-direction:column;gap:.45rem;width:100%;}
.wall-row{display:flex;gap:.32rem;justify-content:center;}
.wall-key{flex:1;max-width:2.6rem;min-height:3rem;border-radius:.55rem;
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);
  font-weight:750;font-size:1.05rem;transition:transform .06s ease;}
.wall-key:active{transform:scale(.9);background:var(--ember);color:var(--ember-ink);}
.wall-key.wide{max-width:3.4rem;}
@keyframes wallshake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-9px);}40%{transform:translateX(8px);}
  60%{transform:translateX(-6px);}80%{transform:translateX(4px);}
}
.wall-shake .wall-inner{animation:wallshake .4s ease;}
.wall-shake .wall-slot{border-color:var(--bad);color:var(--bad);}

/* ===== screensaver (the wall panel at rest) =====
   Longhand offsets, not `inset`: the panel's Chromium 83 drops `inset`. */
#screensaver{
  position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;
  background:#000;opacity:0;pointer-events:none;
  transition:opacity 1.2s ease;
}
#screensaver.on{opacity:1;pointer-events:auto;}
#screensaver img{width:100%;height:100%;object-fit:cover;display:block;}
/* quote-of-the-day fallback (no photo chosen) — Chromium-83-safe on purpose:
   longhand offsets, margins not gap, min() and vmin only (both in 83) */
#screensaver .ss-quote{position:absolute;top:0;right:0;bottom:0;left:0;display:none;
  flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:9vmin 8vmin;
  background:radial-gradient(ellipse at 50% 38%, #26262A 0%, #151517 55%, #0A0A0B 100%);}
#screensaver.mode-quote .ss-quote{display:flex;}
#screensaver.mode-quote img{display:none;}
#screensaver .ssq-drift{max-width:82%;animation:ssdrift 80s ease-in-out infinite alternate;}
@keyframes ssdrift{0%{transform:translate(-10px,-14px);}100%{transform:translate(10px,14px);}}
#screensaver .ssq-mark{font-family:Georgia,'Times New Roman',serif;
  font-size:15vmin;line-height:.55;opacity:.3;margin-bottom:2.5vmin;}
#screensaver .ssq-text{font-family:Georgia,'Times New Roman',serif;font-weight:400;
  font-size:min(5.8vmin,3.4rem);line-height:1.42;color:#F5F5F7;margin:0;}
#screensaver .ssq-rule{width:64px;height:2px;margin-top:4.5vmin;margin-bottom:3vmin;
  margin-left:auto;margin-right:auto;}
#screensaver .ssq-who{font-size:min(2.6vmin,1.05rem);letter-spacing:.22em;
  text-transform:uppercase;color:#98989D;}
#screensaver .ss-quote.scripture .ssq-mark{color:#FFD60A;}
#screensaver .ss-quote.scripture .ssq-rule{background:#FFD60A;}
#screensaver .ss-quote.wisdom .ssq-mark{color:#FF7A1A;}
#screensaver .ss-quote.wisdom .ssq-rule{background:#FF7A1A;}
/* special-day card (2026-09-12): keeps its line breaks, a touch smaller so four lines fit */
#screensaver .ss-quote.special .ssq-text{white-space:pre-line;font-size:min(4.6vmin,2.7rem);line-height:1.38;}
#screensaver .ss-quote.special .ssq-who{color:#F5F5F7;letter-spacing:.16em;font-size:min(2.9vmin,1.15rem);}
#screensaver .ssq-brand{position:absolute;bottom:4vmin;left:0;right:0;text-align:center;
  font-size:.72rem;letter-spacing:.3em;color:#5A5A5E;font-weight:800;}
#screensaver .ssq-brand em{font-style:normal;color:#B34A12;}

/* ===== screensaver clock (Aaron, 2026-08-14) =====
   Rides ABOVE both modes — the panel is a wall clock as much as a chore board,
   and Mom choosing a photo must not cost the family the time. Same
   Chromium-83 discipline as everything else here: longhand offsets, no inset,
   no gap, min()/vmin only.
   It DRIFTS on its own 97s cycle — deliberately coprime-ish with the quote's
   80s so the two never lock into one arrangement. This panel is lit 24/7 and
   burn-in is the reason the quote drifts at all; a clock is the worst possible
   thing to nail down, because the colons and the leading digits barely ever
   change. */
#screensaver .ss-clock{position:absolute;top:0;right:0;left:0;
  padding-top:6.5vmin;text-align:center;color:#F5F5F7;
  animation:ssclock 97s ease-in-out infinite alternate;
  text-shadow:0 2px 20px rgba(0,0,0,.9), 0 0 5px rgba(0,0,0,.65);}
@keyframes ssclock{0%{transform:translate(-13px,-9px);}100%{transform:translate(13px,11px);}}
#screensaver .ssc-time{font-size:min(12.5vmin,7rem);line-height:1;font-weight:500;}
#screensaver .ssc-ampm{font-size:.32em;font-weight:700;letter-spacing:.16em;
  margin-left:.3em;color:#C9C9CE;}
#screensaver .ssc-date{margin-top:1.8vmin;font-size:min(3vmin,1.3rem);
  letter-spacing:.2em;text-transform:uppercase;color:#E4E4E8;}
/* Over a photo the clock would vanish into a bright sky, so lay a scrim under
   it. The quote card paints its own dark background and needs none.
   MEASURED, not eyeballed (2026-08-14): against a bright test photo the first
   attempt (36vmin, fading to .34 by 55%) left the DATE line at 1.65:1 — the
   big time was fine at 5.12:1 and the small line under it was effectively
   invisible. The scrim now holds dark THROUGH the date band before it fades.
   If you restyle this, re-measure contrast over a BRIGHT photo; a dark test
   image will pass anything. */
#screensaver .ss-scrim{position:absolute;top:0;right:0;left:0;height:42vmin;
  background-image:linear-gradient(to bottom, rgba(0,0,0,.82) 0%,
    rgba(0,0,0,.76) 30%, rgba(0,0,0,.60) 52%, rgba(0,0,0,.22) 78%,
    rgba(0,0,0,0) 100%);}
#screensaver.mode-quote .ss-scrim{display:none;}

/* ===== mom: screensaver picker ===== */
.sspick{display:flex;align-items:center;flex-wrap:wrap;}
.sspick > * + *{margin-left:.6rem;}
.ssthumb{
  width:4.2rem;height:5.6rem;border-radius:.5rem;object-fit:cover;
  border:1px solid var(--line);background:var(--panel);
}
.ssnone{color:var(--ink-soft);font-size:.8rem;}

/* ===== phone-width payday rows (v23) =====
   On a narrow phone the three action buttons (min-width 5.2rem each) eat the
   whole row; .kname{flex:1;min-width:0} then shrinks to ZERO width and its
   text paints straight over the balance — Aaron's 2026-09-02 screenshot.
   Fix: let the row wrap; name+balance keep line 1, buttons share line 2. */
@media (max-width: 560px){
  .payrow{flex-wrap:wrap;}
  .payrow .kname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .payrow .act{flex:1 1 0;min-width:0;}
}

/* =====================================================================
   v24 (2026-09-27) — Mom's page rebuilt as five tabs, kid devices +
   internet lockdown, kid roster, entry word, family name.
   Chromium-83 discipline throughout: margins not gap, longhand offsets.
   ===================================================================== */

/* ----- the tab bar (thumb reach: bottom, fixed) ----- */
.wrap.tabbed{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 6rem);}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;justify-content:space-around;align-items:stretch;
  background:var(--panel);border-top:1px solid var(--line);
  padding:.35rem .25rem calc(env(safe-area-inset-bottom,0px) + .35rem);
  box-shadow:0 -6px 18px rgba(0,0,0,.08);}
.tab{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:3.3rem;border-radius:.8rem;color:var(--ink-soft);position:relative;
  transition:transform .06s ease;}
.tab .ico{font-size:1.25rem;line-height:1;}
.tab .lbl{font-size:.55rem;letter-spacing:.14em;font-weight:800;margin-top:.3rem;}
.tab.on{color:var(--ember);background:var(--ember-soft);}
.tab:active{transform:scale(.94);}
.tab .nbadge{position:absolute;top:.2rem;right:calc(50% - 1.55rem);min-width:1.15rem;height:1.15rem;
  border-radius:999px;background:var(--bad);color:#fff;font-size:.58rem;font-weight:800;
  display:none;align-items:center;justify-content:center;padding:0 .3rem;}
.tab .nbadge.show{display:flex;}
.panel[hidden]{display:none !important;}
.panel-title{font-size:.68rem;letter-spacing:.2em;color:var(--ink-soft);font-weight:800;
  margin:.4rem 0 .8rem .1rem;}
.panel-title b{color:var(--ink);}

/* ----- generic card + section headers inside a panel ----- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:1rem;
  padding:.9rem 1rem;box-shadow:var(--shadow);margin-bottom:.8rem;}
.card h3{margin:0 0 .6rem;font-size:.66rem;letter-spacing:.2em;font-weight:800;color:var(--ink-soft);}
.card h3 .hint{font-weight:600;letter-spacing:0;text-transform:none;margin-left:.4rem;color:var(--ink-soft);}
.muted{font-size:.74rem;color:var(--ink-soft);line-height:1.4;}
.rowline{display:flex;align-items:center;}
.rowline > * + *{margin-left:.5rem;}
.grow{flex:1;min-width:0;}
.mt{margin-top:.6rem;}

/* ----- banners ----- */
.banner{border-radius:.9rem;padding:.7rem .85rem;font-size:.8rem;line-height:1.4;
  border:1px solid var(--line);background:var(--panel);margin-bottom:.8rem;}
.banner.info{border-color:var(--gold);color:var(--ink);}
.banner.warn{border-color:var(--wait);background:var(--wait-soft);color:var(--ink);}
.banner.lock{border-color:var(--bad);background:var(--bad-soft);color:var(--ink);font-weight:650;}
.banner.good{border-color:var(--good);background:var(--good-soft);color:var(--ink);}
.banner b{font-weight:800;}

/* ----- REVIEW tab ----- */
.autorule{font-size:.74rem;color:var(--ink-soft);line-height:1.45;text-align:center;
  margin:1rem .4rem 0;}
.autorule b{color:var(--ink);}

/* ----- MONEY tab ----- */
.moneycard{background:var(--panel);border:1px solid var(--line);border-radius:1rem;
  padding:.85rem .95rem;box-shadow:var(--shadow);margin-bottom:.7rem;border-left:4px solid var(--kid);}
.moneycard .mhead{display:flex;align-items:center;}
.moneycard .dot{width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-weight:800;color:#fff;flex:none;font-size:.9rem;}
.moneycard .mname{font-weight:800;font-size:1rem;margin-left:.6rem;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.moneycard .mbal{font-weight:800;font-size:1.35rem;color:var(--good);font-variant-numeric:tabular-nums;}
.moneycard .mbal.neg{color:var(--bad);}
.moneycard .mbtns{display:flex;margin-top:.7rem;}
.moneycard .mbtns .act{flex:1 1 0;min-width:0;text-align:center;padding:.65rem .3rem;font-size:.72rem;}
.moneycard .mbtns .act + .act{margin-left:.45rem;}
.moneycard .mbtns .act.ok{flex:1.6 1 0;}

/* ----- CHORES tab: the editor breathes on its own page ----- */
#panel-chores .bigbtn{margin-bottom:.2rem;}

/* ----- FAMILY tab: kids ----- */
.kidrow{display:flex;align-items:center;width:100%;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:.85rem;
  padding:.65rem .8rem;margin-bottom:.45rem;box-shadow:var(--shadow);}
.kidrow:active{transform:scale(.99);}
.kidrow .dot{width:1.9rem;height:1.9rem;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-weight:800;color:#fff;flex:none;font-size:.85rem;}
.kidrow .body{flex:1;min-width:0;margin-left:.65rem;}
.kidrow .name{font-weight:700;font-size:.95rem;}
.kidrow .meta{font-size:.68rem;color:var(--ink-soft);margin-top:.1rem;}
.kidrow .pen{color:var(--ink-soft);font-size:.9rem;flex:none;margin-left:.5rem;}
.swatches{display:flex;flex-wrap:wrap;flex:1;}
.sw{width:2rem;height:2rem;border-radius:50%;border:3px solid transparent;margin:0 .4rem .4rem 0;
  box-shadow:var(--shadow);transition:transform .06s ease;}
.sw.on{border-color:var(--ink);transform:scale(1.12);}
.frow .flab.wide{flex:0 0 4.6rem;}
.frow input.short{width:4.2rem;flex:0 0 auto;text-align:center;text-transform:uppercase;font-weight:800;}

/* ----- FAMILY tab: devices ----- */
.devcard{background:var(--panel);border:1px solid var(--line);border-radius:1rem;
  padding:.85rem .95rem;box-shadow:var(--shadow);margin-bottom:.7rem;border-left:4px solid var(--kid);}
.devcard .dhead{display:flex;align-items:center;}
.devcard .dot{width:1.8rem;height:1.8rem;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-weight:800;color:#fff;flex:none;font-size:.8rem;}
.devcard .dname{font-weight:800;font-size:.95rem;margin-left:.6rem;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.devcard .dname small{display:block;font-weight:600;font-size:.68rem;color:var(--ink-soft);}
.lockpill{flex:none;font-size:.6rem;font-weight:800;letter-spacing:.09em;border-radius:999px;
  padding:.3rem .55rem;border:1px solid var(--line);color:var(--ink-soft);background:var(--paper);}
.lockpill.on{border-color:var(--good);color:var(--good);background:var(--good-soft);}
.lockpill.off{border-color:var(--bad);color:var(--bad);background:var(--bad-soft);}
.lockpill.wait{border-color:var(--wait);color:var(--wait);background:var(--wait-soft);}
.devcard .dnet{font-size:.72rem;color:var(--ink-soft);margin-top:.55rem;line-height:1.4;}
.devcard .dnet b{color:var(--ink);font-weight:700;}
.devcard .dmodes{display:flex;margin-top:.6rem;}
.devcard .dmodes .chip{flex:1 1 0;text-align:center;margin-right:.35rem;min-width:0;}
.devcard .dmodes .chip:last-child{margin-right:0;}
.devcard .dcut{display:flex;align-items:center;margin-top:.55rem;font-size:.76rem;color:var(--ink-soft);}
.devcard .dcut input{margin-left:.45rem;margin-right:.45rem;width:6.4rem;background:var(--paper);
  border:1px solid var(--line);border-radius:.6rem;padding:.4rem .5rem;color:var(--ink);
  font-family:inherit;font-size:.9rem;font-weight:700;}
.devcard .dfoot{display:flex;align-items:center;margin-top:.6rem;}
.devcard .dfoot .goldbtn.tiny{margin-left:0;margin-right:.5rem;}
.devcard .dfoot .forget{margin-left:auto;font-size:.66rem;color:var(--bad);font-weight:700;letter-spacing:.06em;}
.devcard .thisone{font-size:.66rem;color:var(--gold);font-weight:800;letter-spacing:.1em;margin-left:.5rem;flex:none;}
.lanlist{margin-top:.5rem;}
.lanrow{display:flex;align-items:center;width:100%;text-align:left;
  background:var(--paper);border:1px solid var(--line);border-radius:.75rem;
  padding:.55rem .7rem;margin-bottom:.35rem;}
.lanrow .body{flex:1;min-width:0;}
.lanrow .name{font-weight:700;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lanrow .meta{font-size:.64rem;color:var(--ink-soft);font-family:ui-monospace,Menlo,monospace;margin-top:.1rem;}
.lanrow .tag{font-size:.6rem;color:var(--gold);font-weight:800;flex:none;margin-left:.5rem;}
.lanrow:active{transform:scale(.99);}

/* ----- SETUP tab ----- */
.rateline input.word{width:9.5rem;text-transform:uppercase;letter-spacing:.14em;font-weight:800;}
.rateline input.fam{width:10rem;font-weight:700;text-align:left;}
.rateline .goldbtn.tiny{margin-left:0;}
.aboutline{font-size:.7rem;color:var(--ink-soft);line-height:1.5;}

/* ----- kid page: lock banner + auto notes ----- */
.lockbar{border-radius:.9rem;padding:.75rem .9rem;font-size:.86rem;line-height:1.4;font-weight:650;
  border:1px solid var(--line);background:var(--panel);margin-bottom:.9rem;}
.lockbar.lock{border-color:var(--bad);background:var(--bad-soft);color:var(--ink);}
.lockbar.warn{border-color:var(--wait);background:var(--wait-soft);color:var(--ink);}
.chore .meta .auto{color:var(--good);font-weight:700;}
.foot #autonote{display:block;margin-top:.3rem;}
.foot .unpair{display:block;margin-top:.9rem;font-size:.62rem;color:var(--ink-soft);opacity:.7;}

/* the approve-all button: count on its own line instead of wrapping mid-sentence */
#approve-all{flex-direction:column;}
#approve-meta{display:block;font-size:.72rem;font-weight:700;opacity:.85;margin-top:.2rem;letter-spacing:.02em;}

/* ===== join.html (017) ===== */
.jstep{margin-top:1rem;}
.jbig{font-size:1.35rem;font-weight:800;letter-spacing:-.01em;margin:.6rem 0 1rem;text-align:center;}
.jwide{display:block;width:100%;text-align:center;padding:.9rem;}
.jcode{display:block;width:100%;text-align:center;font-size:2rem;font-weight:800;letter-spacing:.35em;
  text-transform:uppercase;background:var(--panel);border:1.5px solid var(--line);border-radius:1rem;
  padding:.8rem;color:var(--ink);font-family:ui-monospace,Menlo,monospace;margin-bottom:.9rem;}
.jcode:focus{outline:2px solid var(--ember);border-color:var(--ember);}
.jback{display:block;margin:1rem auto 0;color:var(--ink-soft);font-size:.8rem;}
.jcodebig{font-size:2.6rem;font-weight:800;letter-spacing:.3em;font-family:ui-monospace,Menlo,monospace;
  color:var(--ember);margin:.4rem 0 .8rem;}
.krow{display:flex;align-items:center;margin-bottom:.6rem;}
.krow .kn{flex:1;min-width:0;}
.krow .ki{width:3rem;flex:0 0 auto;margin-left:.4rem;text-align:center;text-transform:uppercase;font-weight:800;}
.krow .ksw{flex:0 0 auto;margin-left:.5rem;flex-wrap:nowrap;}
.krow .ksw .sw{width:1.4rem;height:1.4rem;margin:0 .25rem 0 0;border-width:2px;}
#c-tz{flex:1;background:var(--paper);border:1px solid var(--line);border-radius:.7rem;padding:.55rem .6rem;
  color:var(--ink);font-family:inherit;font-size:.9rem;}
.codecard .jcodebig{font-size:2rem;margin:.2rem 0 .5rem;}

/* ===== hello.html — the waitlist page (018) ===== */
.hwrap{max-width:640px;}
.hero{text-align:center;margin:1.2rem 0 1.6rem;}
.hero h1{font-size:1.65rem;line-height:1.2;letter-spacing:-.02em;margin:0 0 .9rem;font-weight:800;}
.hero h1 em{font-style:normal;color:var(--ember);}
.hero .lede{font-size:1rem;line-height:1.5;color:var(--ink);margin:0 auto 1.1rem;max-width:34rem;}
.hcta{display:flex;text-decoration:none;max-width:22rem;margin:0 auto .6rem;}
.center{text-align:center;}
.hgrid .card{margin-bottom:.8rem;}
.hico{font-size:1.6rem;line-height:1;margin-bottom:.4rem;}
.hsteps{margin:.2rem 0 0;padding-left:1.2rem;font-size:.9rem;line-height:1.5;}
.hsteps li{margin-bottom:.35rem;}
.hplans{display:flex;flex-direction:column;}
.hplan{text-align:center;}
.hplan-hot{border-color:var(--ember);box-shadow:0 0 0 2px var(--emberglow), var(--shadow);}
.hplan-name{font-size:.68rem;letter-spacing:.2em;font-weight:800;color:var(--ink-soft);}
.hplan-tag{display:inline-block;margin-left:.4rem;background:var(--ember-soft);color:var(--ember);border-radius:999px;padding:.15rem .5rem;letter-spacing:.06em;font-size:.6rem;}
.hplan-price{font-size:2.4rem;font-weight:800;letter-spacing:-.03em;margin:.3rem 0 .4rem;font-variant-numeric:tabular-nums;}
.hplan-price small{font-size:.9rem;font-weight:700;color:var(--ink-soft);margin-left:.2rem;}
.hfaq p{font-size:.86rem;line-height:1.5;margin:0 0 .7rem;}
.hfaq b{display:block;color:var(--ink);}
@media (min-width:560px){
  .hgrid{display:flex;}
  .hgrid .card{flex:1 1 0;margin-right:.7rem;}
  .hgrid .card:last-child{margin-right:0;}
  .hplans{flex-direction:row;}
  .hplans .hplan{flex:1 1 0;margin-right:.7rem;}
  .hplans .hplan:last-child{margin-right:0;}
  .hero h1{font-size:2.1rem;}
}

/* v28: a question line above a chip row inside the chore form */
.cform-sub{font-size:.62rem;letter-spacing:.14em;font-weight:800;color:var(--ink-soft);margin-bottom:-.3rem;}

/* ===== 💡 the lamp + sheet (v29, after the Refinery's) =====
   Chromium-83-safe: longhand offsets, margins not gap. */
.lamp{position:fixed;right:1rem;bottom:calc(env(safe-area-inset-bottom,0px) + 1rem);z-index:45;
  width:44px;height:44px;border-radius:50%;background:var(--panel-raised);color:var(--gold);
  border:1.5px solid var(--gold);box-shadow:var(--shadow);font-size:1.25rem;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:transform .06s ease;}
.lamp:active{transform:scale(.92);}
body.has-tabbar .lamp{bottom:calc(env(safe-area-inset-bottom,0px) + 6.4rem);}
.sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;background:rgba(0,0,0,.45);
  display:flex;align-items:flex-end;justify-content:center;}
.sheet-backdrop[hidden]{display:none !important;}
.sheet{width:100%;max-width:520px;background:var(--panel-raised);border:1px solid var(--line);border-bottom:none;
  border-radius:20px 20px 0 0;padding:.6rem 1.1rem calc(env(safe-area-inset-bottom,0px) + 1.1rem);
  box-shadow:0 -8px 30px rgba(0,0,0,.35);}
.sheet-grip{width:38px;height:4px;border-radius:2px;background:var(--line);margin:0 auto .8rem;}
.sheet-title{font-size:1.05rem;font-weight:800;margin-bottom:.3rem;}
.sheet textarea,.sheet input{display:block;width:100%;margin-top:.7rem;background:var(--paper);color:var(--ink);
  border:1px solid var(--line);border-radius:.8rem;padding:.7rem .8rem;font-family:inherit;font-size:.95rem;resize:none;}
.sheet textarea:focus,.sheet input:focus{outline:2px solid var(--gold);border-color:var(--gold);}
.sheet-actions{display:flex;justify-content:flex-end;margin-top:.8rem;}
.sheet-actions .act{padding:.65rem 1rem;}
.sheet-actions .act + .act{margin-left:.5rem;}