/* Theme tokens: Evergreen (light) is the default; every colour a screen uses comes from here so a theme can restyle the whole app. The call screen, the tear-off calendar page, the QR panel, photo borders and shadows deliberately stay literal. */
:root{color-scheme:light;--lh:1.42;--fs:17px}
:root,.lookprev[data-theme=evergreen]{
--bg:#fbf7f0;--fg:#22301f;--muted:#6b7565;--green:#1f5a3a;--red:#b3261e;--gold:#f7d774;--card:#fff;--line:#e5dfd2;
--green-2:#2f7a50;--band:#1f5a3a;--band-2:#2f7a50;--bar:var(--card);--accent-ink:#1f5a3a;--on-accent:#fff;--field:#fff;--field-edge:#bfb8a6;--glass:rgba(250,246,239,.97);--press:rgba(31,90,58,.08);--focus:#2f8f5b;
--accent-soft:#e6f0e9;--chip:#eeeae0;--track:#c9c4b4;--tile-ph:#e9e4d6;--grown:#f6f1e4;
--muted-2:#6b665a;--muted-3:#777;--muted-4:#5b6b5f;--ink-2:#555;--asst-ink:#35553f;--avatar-ink:#5b4a2e;
--red-ink:#a1231a;--red-soft:#fff1f0;--red-soft2:#fbd9d5;--red-edge:#e3b0ab;--red-edge2:#e9a7a2;--flag-soft:#fde8e6;--flag-edge:#f3c2bd;--flag-glow:#d9534f;
--amber-ink:#8a5a12;--amber-soft:#fdf0e0;--hold-soft:#fdf1d6;--warn-edge:#e6c48f;--warn-dot:#e0a030;
--ok-soft:#eaf5ec;--ok-edge:#b9dcc0;--open-soft:#e8f3ea;--bought:#e4e4e4;--info-ink:#394a8a;--info-soft:#eef0f8;color-scheme:light}
/* Themes. The server puts the person's theme on <html data-theme>; each block overrides only the tokens that differ from Evergreen. "Go dark at night" adds data-dark to a light theme, and the media block at the end gives it its dark partner's tokens when the phone is in dark mode (Evergreen to Evergreen Night, Cream & Crimson to Hoosier Knight, Winter to Midnight); those copies must stay identical to the dark theme blocks, and test/themes.test.mjs checks. */
html[data-theme=cranberry],.lookprev[data-theme=cranberry]{--bg:#fbf6ec;--fg:#2a1d1a;--muted:#75625c;--green:#990000;--green-2:#b32b2b;--accent-ink:#990000;--line:#e8dccb;--field-edge:#cdbba6;--glass:rgba(251,246,236,.97);--press:rgba(153,0,0,.08);--focus:#c04040;
--accent-soft:#f6e3dd;--chip:#efe6d8;--track:#d6c8b4;--tile-ph:#ece2d0;--grown:#f7ecdc;--muted-2:#6f5b55;--muted-3:#76645e;--muted-4:#82635b;--ink-2:#5a443e;--asst-ink:#7a2a30;--avatar-ink:#5b3a2e;--red-soft:#ffeceb;--red-soft2:#fbd0d0;--band:#990000;--band-2:#b32b2b}
html[data-theme=winter],.lookprev[data-theme=winter]{--bg:#f2f7fb;--fg:#1d2b38;--muted:#586c81;--green:#2a5b86;--green-2:#3b78a8;--accent-ink:#2a5b86;--line:#d6e3ee;--field-edge:#b2c4d6;--glass:rgba(242,247,251,.97);--press:rgba(42,91,134,.08);--focus:#4a8fc4;
--accent-soft:#e0edf8;--chip:#e4ecf3;--track:#bdcddc;--tile-ph:#dde8f1;--grown:#eaf1f7;--muted-2:#566a7e;--muted-3:#5f7185;--muted-4:#55697d;--ink-2:#475a6c;--asst-ink:#2c4f70;--avatar-ink:#3d4a5a;--band:#2a5b86;--band-2:#3b78a8}
html[data-theme=night],.lookprev[data-theme=night]{--bg:#0e1812;--fg:#e8f0ea;--muted:#a3b5a9;--green:#276b46;--red:#e0554d;--gold:#f7d774;--card:#16241c;--line:#2a3b30;
--green-2:#348055;--accent-ink:#7fd0a0;--on-accent:#fff;--field:#1b2c22;--field-edge:#3b5244;--glass:rgba(14,24,18,.97);--press:rgba(127,208,160,.14);--focus:#5fd08f;
--accent-soft:#1d3a29;--chip:#223329;--track:#3d5246;--tile-ph:#1f3025;--grown:#1a2c21;
--muted-2:#a9b9ae;--muted-3:#93a79a;--muted-4:#9bb0a2;--ink-2:#c3d1c7;--asst-ink:#9fd8b3;--avatar-ink:#f3e3bd;
--red-ink:#ff9a92;--red-soft:#3a1c1b;--red-soft2:#4d2523;--red-edge:#7a3a36;--red-edge2:#8c4440;--flag-soft:#3d1f1d;--flag-edge:#6e3532;--flag-glow:#ff6b64;
--amber-ink:#f0c36d;--amber-soft:#3a2d14;--hold-soft:#3b3015;--warn-edge:#7a5f2b;--warn-dot:#f0a830;
--ok-soft:#1c3827;--ok-edge:#2f6445;--open-soft:#1c3827;--bought:#2c3530;--info-ink:#a9b8f0;--info-soft:#232b4a;color-scheme:dark;--band:#174a2e;--band-2:#1b5736;--band-line:rgba(127,208,160,.22)}
html[data-theme=midnight],.lookprev[data-theme=midnight]{--bg:#0b1020;--fg:#e9edf8;--muted:#a1abc6;--green:#3a57b0;--red:#e0554d;--gold:#f7d774;--card:#141b33;--line:#28325a;
--green-2:#4d6fd0;--accent-ink:#9db4ff;--on-accent:#fff;--field:#182140;--field-edge:#3a4676;--glass:rgba(11,16,32,.97);--press:rgba(157,180,255,.14);--focus:#8fa8ff;
--accent-soft:#1c2850;--chip:#1f2845;--track:#3b4670;--tile-ph:#19213d;--grown:#151d38;
--muted-2:#aab4cf;--muted-3:#98a3c2;--muted-4:#9ba7c7;--ink-2:#c5cde4;--asst-ink:#aebdf0;--avatar-ink:#f4e6c0;
--red-ink:#ff9a92;--red-soft:#3a1c24;--red-soft2:#4d2530;--red-edge:#7a3a46;--red-edge2:#8c4450;--flag-soft:#3d1f28;--flag-edge:#6e3542;--flag-glow:#ff6b72;
--amber-ink:#f0c36d;--amber-soft:#3a2d1c;--hold-soft:#3b3020;--warn-edge:#7a5f3b;--warn-dot:#f0a830;
--ok-soft:#17332a;--ok-edge:#2f6450;--open-soft:#17332a;--bought:#262d44;--info-ink:#b5c3ff;--info-soft:#222c52;color-scheme:dark;--band:#2b4082;--band-2:#334c99;--band-line:rgba(157,180,255,.22)}
html[data-theme=knight],.lookprev[data-theme=knight]{--bg:#0f0d0d;--fg:#f3eae6;--muted:#b5a29c;--green:#990000;--red:#e0554d;--gold:#f7d774;--card:#181515;--line:#2b2626;
--green-2:#b32b2b;--accent-ink:#f1d9c4;--on-accent:#fff;--field:#1e1a1a;--field-edge:#433a3a;--glass:rgba(15,13,13,.97);--press:rgba(241,217,196,.14);--focus:#f1d9c4;
--accent-soft:#4a141c;--chip:#221e1e;--track:#473e3e;--tile-ph:#191515;--grown:#161212;
--muted-2:#bba8a2;--muted-3:#a8958f;--muted-4:#b09b95;--ink-2:#d6c6c0;--asst-ink:#f1d9c4;--avatar-ink:#f4e3bf;
--red-ink:#ff9aa4;--red-soft:#3a1519;--red-soft2:#4a1c21;--red-edge:#7a2f38;--red-edge2:#8a3a43;--flag-soft:#3d1619;--flag-edge:#6c2c34;--flag-glow:#ff6b78;
--amber-ink:#f0c36d;--amber-soft:#3a2d14;--hold-soft:#3b3015;--warn-edge:#7a5f2b;--warn-dot:#f0a830;
--ok-soft:#1c3827;--ok-edge:#2f6445;--open-soft:#1c3827;--bought:#2c2a28;--info-ink:#a9b8f0;--info-soft:#232b4a;color-scheme:dark;--band:#7a0000;--band-2:#8e0000;--band-line:rgba(241,217,196,.22);--bar:#0c0a0a}
@media (prefers-color-scheme:dark){html[data-dark][data-theme=evergreen]{--bg:#0e1812;--fg:#e8f0ea;--muted:#a3b5a9;--green:#276b46;--red:#e0554d;--gold:#f7d774;--card:#16241c;--line:#2a3b30;
--green-2:#348055;--accent-ink:#7fd0a0;--on-accent:#fff;--field:#1b2c22;--field-edge:#3b5244;--glass:rgba(14,24,18,.97);--press:rgba(127,208,160,.14);--focus:#5fd08f;
--accent-soft:#1d3a29;--chip:#223329;--track:#3d5246;--tile-ph:#1f3025;--grown:#1a2c21;
--muted-2:#a9b9ae;--muted-3:#93a79a;--muted-4:#9bb0a2;--ink-2:#c3d1c7;--asst-ink:#9fd8b3;--avatar-ink:#f3e3bd;
--red-ink:#ff9a92;--red-soft:#3a1c1b;--red-soft2:#4d2523;--red-edge:#7a3a36;--red-edge2:#8c4440;--flag-soft:#3d1f1d;--flag-edge:#6e3532;--flag-glow:#ff6b64;
--amber-ink:#f0c36d;--amber-soft:#3a2d14;--hold-soft:#3b3015;--warn-edge:#7a5f2b;--warn-dot:#f0a830;
--ok-soft:#1c3827;--ok-edge:#2f6445;--open-soft:#1c3827;--bought:#2c3530;--info-ink:#a9b8f0;--info-soft:#232b4a;color-scheme:dark;--band:#174a2e;--band-2:#1b5736;--band-line:rgba(127,208,160,.22)}html[data-dark][data-theme=cranberry]{--bg:#0f0d0d;--fg:#f3eae6;--muted:#b5a29c;--green:#990000;--red:#e0554d;--gold:#f7d774;--card:#181515;--line:#2b2626;
--green-2:#b32b2b;--accent-ink:#f1d9c4;--on-accent:#fff;--field:#1e1a1a;--field-edge:#433a3a;--glass:rgba(15,13,13,.97);--press:rgba(241,217,196,.14);--focus:#f1d9c4;
--accent-soft:#4a141c;--chip:#221e1e;--track:#473e3e;--tile-ph:#191515;--grown:#161212;
--muted-2:#bba8a2;--muted-3:#a8958f;--muted-4:#b09b95;--ink-2:#d6c6c0;--asst-ink:#f1d9c4;--avatar-ink:#f4e3bf;
--red-ink:#ff9aa4;--red-soft:#3a1519;--red-soft2:#4a1c21;--red-edge:#7a2f38;--red-edge2:#8a3a43;--flag-soft:#3d1619;--flag-edge:#6c2c34;--flag-glow:#ff6b78;
--amber-ink:#f0c36d;--amber-soft:#3a2d14;--hold-soft:#3b3015;--warn-edge:#7a5f2b;--warn-dot:#f0a830;
--ok-soft:#1c3827;--ok-edge:#2f6445;--open-soft:#1c3827;--bought:#2c2a28;--info-ink:#a9b8f0;--info-soft:#232b4a;color-scheme:dark;--band:#7a0000;--band-2:#8e0000;--band-line:rgba(241,217,196,.22);--bar:#0c0a0a}html[data-dark][data-theme=winter]{--bg:#0b1020;--fg:#e9edf8;--muted:#a1abc6;--green:#3a57b0;--red:#e0554d;--gold:#f7d774;--card:#141b33;--line:#28325a;
--green-2:#4d6fd0;--accent-ink:#9db4ff;--on-accent:#fff;--field:#182140;--field-edge:#3a4676;--glass:rgba(11,16,32,.97);--press:rgba(157,180,255,.14);--focus:#8fa8ff;
--accent-soft:#1c2850;--chip:#1f2845;--track:#3b4670;--tile-ph:#19213d;--grown:#151d38;
--muted-2:#aab4cf;--muted-3:#98a3c2;--muted-4:#9ba7c7;--ink-2:#c5cde4;--asst-ink:#aebdf0;--avatar-ink:#f4e6c0;
--red-ink:#ff9a92;--red-soft:#3a1c24;--red-soft2:#4d2530;--red-edge:#7a3a46;--red-edge2:#8c4450;--flag-soft:#3d1f28;--flag-edge:#6e3542;--flag-glow:#ff6b72;
--amber-ink:#f0c36d;--amber-soft:#3a2d1c;--hold-soft:#3b3020;--warn-edge:#7a5f3b;--warn-dot:#f0a830;
--ok-soft:#17332a;--ok-edge:#2f6450;--open-soft:#17332a;--bought:#262d44;--info-ink:#b5c3ff;--info-soft:#222c52;color-scheme:dark;--band:#2b4082;--band-2:#334c99;--band-line:rgba(157,180,255,.22)}}
/* Backgrounds (v0.54.0): a wallpaper behind the three Home panels only (the server writes data-bg on that page alone). It sits on a fixed layer behind the page, so nothing scrolls it or
   fights the fixed band and tab bar; the page background goes transparent so it shows between the cards. Cards, tiles and buttons keep their solid surfaces: text never sits straight on a
   wallpaper except the few bare lines below, which switch to light text (and the plan text moves onto a card). All gradients are dark enough for white text. */
html[data-bg]:not([data-bg=none]) body{background:transparent}
html[data-bg]:not([data-bg=none])::before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;z-index:-1;pointer-events:none;background-color:var(--wall-base);background-image:var(--wall);background-size:var(--wall-size,auto)}
html[data-bg]:not([data-bg=none]){background-color:var(--wall-base)}
/* the wallpapers: --wall-base is the plain colour behind and under them, --wall the gradient layers, --wall-size their sizes; the Preferences swatches (.lookprev[data-bg]) use the same values */
html[data-bg=evergreen],.lookprev[data-bg=evergreen]{--wall-base:#0a1a12;--wall:radial-gradient(ellipse at 50% 30%,#2b6146 0%,#173c2a 55%,#0a1a12 100%)}
html[data-bg=midnight],.lookprev[data-bg=midnight]{--wall-base:#050814;--wall:radial-gradient(2.2px 2.2px at 20px 30px,#fff,transparent),radial-gradient(1.6px 1.6px at 90px 140px,rgba(255,255,255,.9),transparent),radial-gradient(2.2px 2.2px at 170px 70px,rgba(255,255,255,.95),transparent),radial-gradient(1.6px 1.6px at 60px 210px,rgba(255,255,255,.85),transparent),radial-gradient(ellipse at 50% 30%,#1d2e5e 0%,#0d1633 55%,#050814 100%);--wall-size:210px 250px,263px 230px,190px 170px,300px 280px,100% 100%}
html[data-bg=candy],.lookprev[data-bg=candy]{--wall-base:#4a0a14;--wall:linear-gradient(rgba(30,0,8,.58),rgba(30,0,8,.58)),repeating-linear-gradient(135deg,#9a1428 0,#9a1428 26px,#e9cfcc 26px,#e9cfcc 52px)}
html[data-bg=winter],.lookprev[data-bg=winter]{--wall-base:#2c5176;--wall:radial-gradient(2px 2px at 30px 40px,rgba(255,255,255,.9),transparent),radial-gradient(1.6px 1.6px at 110px 150px,rgba(255,255,255,.8),transparent),radial-gradient(2.2px 2.2px at 180px 80px,rgba(255,255,255,.9),transparent),radial-gradient(ellipse at 50% 18%,#7ba9cc 0%,#4a7aa3 45%,#2c5176 100%);--wall-size:240px 220px,310px 260px,200px 190px,100% 100%}
html[data-bg=cranberry],.lookprev[data-bg=cranberry]{--wall-base:#2a0710;--wall:radial-gradient(ellipse at 50% 30%,#8e2036 0%,#5a1222 52%,#2a0710 100%)}
html[data-bg=aurora],.lookprev[data-bg=aurora]{--wall-base:#07101f;--wall:radial-gradient(ellipse at 18% 22%,rgba(46,204,160,.55),transparent 55%),radial-gradient(ellipse at 82% 28%,rgba(130,95,225,.5),transparent 55%),radial-gradient(ellipse at 50% 95%,rgba(30,120,185,.4),transparent 60%)}
html[data-bg]:not([data-bg=none]) :is(.homehead .tx,.phead,.h1s,.bare){color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
html[data-bg]:not([data-bg=none]) .checkback{color:var(--gold);text-shadow:0 1px 3px rgba(0,0,0,.5)}
html[data-bg]:not([data-bg=none]) .legal{color:rgba(255,255,255,.82);text-shadow:0 1px 3px rgba(0,0,0,.5)}
html[data-bg]:not([data-bg=none]) .hpanel .btn.ghost{background:var(--card)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:var(--fs)/var(--lh) system-ui,-apple-system,Segoe UI,Roboto,sans-serif}   /* --lh: line height, a little tighter in large text where 1.5 reads airy */
body.senior{--fs:24px;--lh:1.32}
main{max-width:860px;margin:0 auto;padding:16px}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:var(--band);box-shadow:inset 0 -1px 0 var(--band-line,transparent);color:var(--on-accent);padding:10px 16px}
.top a{color:var(--on-accent);text-decoration:none;margin-right:14px}.brand{font-weight:700;font-size:1.1em}
.top nav{display:flex;align-items:center;flex-wrap:wrap}.top .link{color:var(--on-accent);text-decoration:none;opacity:.85}
h1{font-size:1.7em;margin:.4em 0}h2{font-size:1.25em}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin:14px 0}
.narrow{max-width:460px;margin:8vh auto}
.muted,small{color:var(--muted)}
label{display:block;margin:10px 0;font-weight:600}
input:not([type=checkbox]):not([type=radio]),textarea,select{display:block;width:100%;font:inherit;padding:10px;margin-top:4px;border:1px solid var(--field-edge);border-radius:10px;background:var(--field)}
.choice{display:flex;align-items:center;gap:10px;font-weight:500}.choice input{width:1.3em;height:1.3em}
fieldset{border:0;padding:0;margin:0 0 12px}legend{font-size:1.3em;font-weight:700;margin-bottom:8px}
.btn{display:inline-block;background:var(--green);color:var(--on-accent);border:0;border-radius:12px;padding:10px 18px;font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.btn.big{padding:16px 26px;font-size:1.15em;margin:6px 0}.btn.small{padding:5px 12px;font-size:.85em}
.btn.ghost{background:transparent;color:var(--accent-ink);border:2px solid var(--accent-ink)}.btn.danger{background:var(--red)}
.btn[disabled]{opacity:.4}
[hidden]{display:none!important}
.addbtn{display:inline-flex;align-items:center;gap:8px;margin:2px 0 14px;padding:9px 18px 9px 14px;border-radius:999px;background:var(--green);color:var(--on-accent);font-weight:600;font-size:.95em;cursor:pointer;box-shadow:0 1px 3px #0003}
.phead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 6px}.phead h1{margin:0}.phead .addbtn{margin:0}
.addbtn svg{width:18px;height:18px;flex:none}.addbtn.busy{opacity:.6;pointer-events:none}
body.senior .addbtn{padding:16px 26px 16px 20px;font-size:1.15em}
.link{background:none;border:0;color:var(--accent-ink);text-decoration:underline;font:inherit;cursor:pointer;padding:0}.link.danger{color:var(--red)}
form.inline{display:inline}.row{display:flex;gap:8px;align-items:center}.row input{margin:0}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:14px 0}
.tile{display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;text-decoration:none;color:inherit}
.tile .ico{font-size:2em}.tile.santa{background:var(--red-soft);border-color:var(--red-edge2)}.tile.alert{background:var(--red-soft);border-color:var(--red)}
.list{list-style:none;padding:0}.list li{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.notice{background:var(--ok-soft);border:1px solid var(--ok-edge);border-radius:10px;padding:10px}
.flag{background:var(--red-soft);border:2px solid var(--red);border-radius:12px;padding:12px;margin:12px 0}
.line.flagged{background:var(--red-soft);border-left:4px solid var(--red);padding-left:8px}.line.assistant{color:var(--asst-ink)}
table{width:100%;border-collapse:collapse}td,th{border-bottom:1px solid var(--line);padding:6px;text-align:left;vertical-align:top}
details summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px}
.grid a{display:block;aspect-ratio:1;overflow:hidden;border-radius:8px}.grid img{width:100%;height:100%;object-fit:cover}
.throwback img{filter:sepia(.55);border:5px solid #f3ead2;box-shadow:0 1px 4px #0003}
.viewer{text-align:center}.viewer img{max-width:100%;max-height:75vh;border-radius:8px}
.vnav{display:flex;justify-content:space-between;align-items:center;margin:10px 0}
.pager{display:flex;justify-content:space-between}
.stepnav{display:flex;justify-content:space-between;gap:10px;margin:10px 0}
.idea{display:grid;grid-template-columns:2fr 2fr auto;gap:6px;margin:8px 0}.idea input{margin:0}
.btn.who{display:flex;justify-content:flex-start;align-items:center;gap:14px;width:100%;margin:10px 0;padding:10px 20px 10px 12px;text-align:left}
.callbadge{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#fff3;flex:none}.callbadge .ic{width:20px;height:20px;margin:0;vertical-align:middle}
/* Full-screen phone-call view: fills a phone, a centred column on a PC or tablet */
.callscreen{position:fixed;inset:0;z-index:100;display:flex;justify-content:center;color:#fff;--lvl:0;background:radial-gradient(120% 80% at 50% 22%,#2a2a2d 0%,#151517 48%,#050505 100%)}
.cs-inner{width:min(100%,420px);height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;padding:max(env(safe-area-inset-top),28px) 20px max(env(safe-area-inset-bottom),28px)}
.cs-name{font-size:2em;font-weight:700;letter-spacing:.01em}#status,#wstatus,#istatus{font-size:1.1em;opacity:.85;margin-top:6px;min-height:1.4em}#timer,#wtimer{font-size:1.15em;opacity:.85;margin-top:4px;min-height:1.4em;font-variant-numeric:tabular-nums}
.cs-note{font-size:2.1rem;line-height:1;font-weight:700}
#recbadge{display:inline-flex;align-items:center;gap:7px;margin-top:8px;padding:3px 12px;border-radius:999px;background:rgba(255,255,255,.1);font-size:.85em;letter-spacing:.04em;opacity:.9}#recbadge[hidden]{display:none}.recdot{width:9px;height:9px;border-radius:50%;background:#ff4b4b;animation:recpulse 1.6s ease-in-out infinite}@keyframes recpulse{50%{opacity:.35}}@media (prefers-reduced-motion:reduce){.recdot{animation:none}}
.cs-avatar{position:relative;width:200px;height:200px;margin:8px 0;display:flex;align-items:center;justify-content:center}
.santa-face{position:relative;z-index:1;width:200px;height:200px;border-radius:50%;background:#ffffff1f;border:3px solid #fff5;display:flex;align-items:center;justify-content:center;font-size:104px;line-height:1}
.cs-ring{position:absolute;inset:-6px;border-radius:50%;border:3px solid var(--gold);opacity:calc(.15 + var(--lvl)*.85);transform:scale(calc(1 + var(--lvl)*.22));transition:transform .08s linear,opacity .08s linear}
.ringing .santa-face{animation:cshake 4s ease-in-out infinite}.ringing .cs-ring{animation:csring 2s ease-out infinite}
@keyframes csring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.5);opacity:0}}
@keyframes cshake{0%,38%,100%{transform:none}4%,12%,20%{transform:rotate(-4deg)}8%,16%,24%{transform:rotate(4deg)}}
.cs-controls{display:flex;justify-content:center;gap:28px;width:100%}
.cs-btn,.cs-end{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;color:#fff;font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.cs-ic,.cs-endic{width:68px;height:68px;border-radius:50%;display:flex;align-items:center;justify-content:center}.cs-ic{background:#ffffff2e;border:2px solid #fff4}
.cs-btn[aria-pressed=true] .cs-ic{background:#fff;color:#17492f}.cs-btn:disabled{opacity:.4}.cs-btn:active .cs-ic{filter:brightness(.85)}
.cs-ic .ic{width:28px;height:28px;margin:0;vertical-align:middle}.cs-ic .ic+.ic{display:none}.cs-btn[aria-pressed=true] .cs-ic .ic{display:none}.cs-btn[aria-pressed=true] .cs-ic .ic+.ic{display:block}
.cs-endic{background:#b3261e;width:76px;height:76px}.cs-endic .ic{width:32px;height:32px;margin:0;vertical-align:middle;transform:rotate(135deg)}.cs-end:active .cs-endic{filter:brightness(.85)}.cs-end:disabled{opacity:.5}
.cs-lbl{font-size:.95em;font-weight:600}
.cs-btn:focus-visible,.cs-end:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:12px}
body.senior .cs-ic{width:80px;height:80px}body.senior .cs-endic{width:92px;height:92px}body.senior .cs-lbl{font-size:1.2em}body.senior #status,body.senior #timer,body.senior #wstatus,body.senior #wtimer,body.senior #istatus{font-size:1.35em}
@media(max-height:620px){.cs-avatar,.santa-face{width:130px;height:130px}.santa-face{font-size:68px}.cs-name{font-size:1.6em}}
@media(prefers-reduced-motion:reduce){.ringing .santa-face,.ringing .cs-ring{animation:none}}
body.senior .grid{display:none}body.senior .btn{padding:16px 24px}
@media(max-width:560px){.idea{grid-template-columns:1fr}}
.tabs{display:flex;gap:6px;margin:8px 0 14px;flex-wrap:wrap}.tabs a{padding:8px 14px;border-radius:999px;border:1px solid var(--line);text-decoration:none;color:inherit}.tabs a.on{background:var(--line);font-weight:700}
.badge{font-weight:400;opacity:.7;margin-left:6px}.hint{display:block;font-weight:400;opacity:.7}.notice{margin:10px 0}
.witems{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:12px 0}
.witem{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.witem>img{width:100%;aspect-ratio:4/3;object-fit:cover}.witem .wbody{padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.witem details{padding:0 12px 10px}.preview-img{max-width:160px;border-radius:8px;display:block}.preview-img[hidden],.preview-status[hidden]{display:none}
.wmini{display:flex;gap:10px;flex-wrap:wrap}.wmini .witem{width:150px}.wmini .witem>img{aspect-ratio:1}
.signedin{text-align:center;margin:28px 16px 0;font-size:.9rem;opacity:.8;display:flex;flex-direction:column;align-items:center;gap:6px;word-break:break-all}.signedin .link{font-size:1rem}
.ver{text-align:center;font-size:.75rem;opacity:.5;margin:24px 0 12px}
/* wishlist items: full-width rows (photo left, text right), edit form opens underneath */
.witems{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.witem{flex-direction:row;flex-wrap:wrap;align-items:stretch}
.witem>img{width:110px;height:110px;aspect-ratio:auto;flex:none}
.witem .wbody{flex:1;min-width:0;padding:12px 14px;justify-content:center}
.witem .wbody b{font-size:1.05em;overflow-wrap:anywhere}
.witem details{flex-basis:100%;padding:0 14px 12px;border-top:1px solid var(--line)}
.witem details summary{justify-content:flex-start;padding:8px 0;color:var(--muted,inherit);font-size:.9em}
.wmini.witems{flex-direction:row;flex-wrap:wrap}.wmini .witem{width:150px;flex-direction:column}.wmini .witem>img{width:100%;height:auto;aspect-ratio:1}
@media(max-width:480px){.witem>img{width:88px;height:88px}}
/* people list: tap rows */
.list.people{list-style:none;padding:0;margin:12px 0}
.list.people li{display:block;border:0;padding:0;margin:8px 0}.list.people a{display:flex;align-items:center;gap:6px;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:14px;text-decoration:none;color:inherit}
.list.people .chev{margin-left:auto;opacity:.5;font-size:1.4em}
/* family view: gift status */
.gift-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 0}.gift-actions form{margin:0}
.badge-status{font-size:.85em;padding:3px 10px;border-radius:999px;border:1px solid var(--line)}
.badge-status.open{background:var(--open-soft)}.badge-status.hold{background:var(--hold-soft)}.badge-status.bought{background:var(--bought)}
.witem.done{opacity:.65}
/* wishlist row: smaller contained thumbnail, edit pencil on the right, edit in a dialog */
.witem>img{width:84px;height:84px;object-fit:contain;background:var(--card);padding:4px;box-sizing:border-box;align-self:center;margin-left:10px}
@media(max-width:480px){.witem>img{width:68px;height:68px}}
.witem{flex-wrap:nowrap;align-items:center;position:relative}
.witem .wbody{flex:1}
.iconbtn{flex:none;width:44px;height:44px;margin:0 10px 0 0;border:1px solid var(--line);border-radius:50%;background:var(--card);cursor:pointer;font-size:1.05rem;line-height:1}
.iconbtn:hover{background:var(--line)}
dialog.modal{border:0;border-radius:14px;padding:18px;width:min(520px,92vw);max-height:90vh;overflow:auto;background:var(--card);color:inherit}
dialog.modal::backdrop{background:#0008}
dialog.modal h2{margin-top:0}
.modal-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px}.modal-foot form{margin:0}
.wmini .witem{flex-wrap:wrap}.wmini .witem>img{width:100%;height:auto;margin:0;aspect-ratio:1}
.badge-status.side{flex:none;margin-right:10px;align-self:center;white-space:nowrap}
/* household list rows: overview clamped to two lines */
.list.people .prow{flex:1;min-width:0}.clamp{margin:4px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.92em}
/* profile cards: heading row with edit pencil, facts list */
.cardhead{display:flex;justify-content:space-between;align-items:center;gap:10px}.cardhead h2{margin:0}.cardhead .iconbtn{margin:0}
.small{font-size:.85em}
.facts{margin:10px 0 0;display:grid;grid-template-columns:max-content 1fr;gap:6px 14px}.facts dt{font-weight:700}.facts dd{margin:0;overflow-wrap:anywhere}
@media(max-width:480px){.facts{grid-template-columns:1fr;gap:0}.facts dd{margin-bottom:8px}}
dialog.modal .card{border:0;padding:0;margin:0;background:none}
.modal-sub{margin-top:12px;text-align:center}.modal-sub form{margin:0}
/* Santa questions: one tappable row each */
.qlist{list-style:none;padding:0;margin:12px 0}.qlist li{margin:8px 0}
.qrow{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;padding:12px 44px 12px 14px;background:var(--card);border:1px solid var(--line);border-radius:14px;cursor:pointer;position:relative;font:inherit;color:inherit}
.qlabel{font-weight:700}.qans{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qedit{position:absolute;right:14px;top:50%;transform:translateY(-50%);opacity:.7}
/* avatars */
.avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;background:var(--line)}
.avatar.ph{display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:1.3rem;color:var(--avatar-ink)}
.avatar.lg{width:76px;height:76px;font-size:2rem}
.namehead{display:flex;align-items:center;gap:12px;margin:8px 0}.namehead h1{margin:0}
.avatarrow{display:flex;align-items:center;gap:14px;margin:6px 0 14px}
.list.people a{gap:12px}
/* call history rows */
.calldate{display:block;white-space:nowrap;font-size:.9em;margin:2px 0 0}
.callhead{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.flagbadge{font-size:.8em;padding:2px 9px;border-radius:999px;background:var(--flag-soft);color:var(--red-ink);border:1px solid var(--flag-edge);white-space:nowrap}
.clamp.c3{-webkit-line-clamp:3}
.list.people.calls li.flagged a{box-shadow:inset 5px 0 0 var(--flag-glow)}
.list.people.calls a{align-items:flex-start}.list.people.calls .chev{align-self:center}
.giftcount{display:block;font-size:.9em;margin:2px 0 0}
.rowactions{display:flex;gap:14px;align-items:center}.rowactions form{margin:0}
#lnk{width:100%;font-size:.85rem}
/* wish-list rows: actions in a right-hand column, vertically centered; name line carries the gift count */
.wside{flex:none;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:6px;margin:0 12px 0 0}
.wside:not(:has(*)){display:none}
.wside .gift-actions{flex-direction:column;align-items:flex-end;gap:6px;margin:0}
.wside form{margin:0}
.namerow{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0 10px}
.namerow .giftcount{margin:0 0 0 auto;white-space:nowrap}
@media(max-width:480px){
  .witem{flex-wrap:wrap}
  .wside{flex-basis:100%;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;margin:0 14px 12px}
  .wside .gift-actions{flex-direction:row;flex-wrap:wrap;align-items:center}
  .witem .iconbtn{position:absolute;top:10px;right:10px;margin:0}
  .witem:has(.iconbtn) .wbody{padding-right:58px}
}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* admin households list */
.list.people.hh .namerow{align-items:center}.list.people.hh .badge-status{white-space:nowrap}
.list li .badge-status{display:inline-block;margin-top:4px}
.statusline{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:3px;font-size:.92em}.statusline .badge-status{margin:0;white-space:nowrap}
.list li.emailrow{flex-direction:column;align-items:flex-start;gap:6px}
.cardhead .btn{white-space:nowrap}
.btnrow{display:flex;flex-wrap:wrap;gap:10px}
/* phones: the gift count always gets its own left-aligned line under the name */
@media(max-width:600px){
  .namerow{display:block}
  .namerow .giftcount{display:block;margin:2px 0 0;white-space:normal}
}
button:disabled{opacity:.75;cursor:wait}
html.busy,html.busy *{cursor:wait}
/* checkbox + explanation: hint sits under the label, not squeezed beside it */
.choice{flex-wrap:wrap;align-items:flex-start}.choice small.hint{flex-basis:100%;margin:0 0 0 2.3em}
/* person rows on the admin household page */
.personrow{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}.personrow .prow{flex:1;min-width:0}.personrow .iconbtn{margin:0}
.personrow.removed{opacity:.75}
.danger-btn{color:var(--red-ink);border-color:var(--red-edge)}
.choice{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:start}
.choice small.hint{grid-column:2;flex-basis:auto;margin:0}
.personrow.removed{flex-wrap:wrap}.personrow.removed .rowactions{flex-basis:100%;padding-left:60px}
.btn.ghost.danger-btn{color:var(--red-ink);border-color:var(--red-edge);background:transparent}
.notice.warn{background:var(--amber-soft);border-color:var(--warn-edge)}
/* Home Screen app (standalone, translucent status bar): keep content clear of the notch, status bar and home bar */
.top{padding-top:calc(10px + env(safe-area-inset-top));padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right))}
body{padding-bottom:env(safe-area-inset-bottom)}
main{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
@media all and (display-mode:standalone){body:not(:has(.top)){padding-top:env(safe-area-inset-top)}}
/* Back links: chevron + label; a bordered pill in large-text (senior) mode */
a.back{display:inline-flex;align-items:center;gap:2px;color:var(--accent-ink);font-weight:600;text-decoration:none;padding:8px 8px 8px 0}
a.back::before{content:"";width:22px;height:22px;margin-left:-4px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center/contain no-repeat}
body.senior a.back{border:2px solid var(--accent-ink);border-radius:999px;background:var(--card);min-height:48px;padding:10px 22px 10px 12px;margin:4px 0}
body.senior a.back::before{margin-left:0;width:26px;height:26px}
/* Line icons in buttons and links (replace emoji); inherit colour and size from the text */
.ic{width:1.15em;height:1.15em;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.22em;margin-right:.4em;flex:none}
.iconbtn{display:inline-grid;place-items:center}.iconbtn .ic,.qedit .ic{margin:0;width:20px;height:20px}
.pager a,.vnav .btn{display:inline-flex;align-items:center;gap:2px}.vnav .btn .ic,.pager .ic{margin:0}
/* Comfortable tap size on phones: small buttons look small but are not hard to hit */
.btn.small{min-height:40px;display:inline-flex;align-items:center;justify-content:center}
/* Press and keyboard-focus feedback */
.btn:active,.addbtn:active{transform:scale(.97);filter:brightness(.92)}
.btn,.addbtn,.iconbtn,.tabs a,a.back,.link{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* Large-text mode: everything bigger and at least 48px to tap */
body.senior .btn{min-height:52px;display:inline-flex;align-items:center;justify-content:center}
body.senior .btn.small{min-height:48px;padding:10px 18px;font-size:.95em}
body.senior .iconbtn{width:52px;height:52px}body.senior .iconbtn .ic{width:26px;height:26px}
body.senior .ic{width:1.2em;height:1.2em}
body.senior .tabs a{padding:12px 18px}
a.back.next{padding:8px 0 8px 8px}a.back.next::before{display:none}a.back.next .ic{margin:0 -4px 0 2px}body.senior a.back.next{padding:10px 12px 10px 22px}
.card{overflow-wrap:anywhere}
/* v0.15.1: pill buttons; text actions (.link) become quiet outlined pills */
.btn{border-radius:999px}
.link{display:inline-flex;align-items:center;min-height:40px;padding:6px 16px;border-radius:999px;border:1.5px solid var(--accent-ink);background:transparent;color:var(--accent-ink);text-decoration:none;font-weight:600;font-size:.95em}
.link.danger{border-color:var(--red-edge);color:var(--red-ink)}
.link:active{transform:scale(.97);background:var(--press)}
.rowactions{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}.rowactions form{margin:0}
body.senior .link{min-height:48px;padding:10px 20px;font-size:1em}
/* Home Screen app: solid green strip behind the status bar so scrolled content never runs under the clock (height is 0 in a normal browser) */
body::before{content:"";position:fixed;top:var(--vvtop,0px);left:0;right:0;height:env(safe-area-inset-top);background:var(--band);z-index:1000;pointer-events:none}
/* Back link row: keep the 40px+ tap area but drop the extra paragraph margins around it */
p:has(>a.back){margin:0 0 4px}
/* Photo viewer: Previous/Next share the row equally, Save/Delete are the same size, labels centred */
.vnav{gap:10px;margin-bottom:18px}.vnav .btn{flex:1 1 0;min-height:48px;min-width:0;display:inline-flex;align-items:center;justify-content:center;text-align:center}
.vnav>span:empty{flex:1}.vnav .vcount{flex:none;padding:0 4px}
.viewer>p,.viewer>form{display:flex;justify-content:center;margin:10px 0}
.viewer>p .btn,.viewer>form .btn{width:min(100%,260px);min-height:48px;display:inline-flex;align-items:center;justify-content:center;text-align:center;margin:0}
/* v0.15.8 button size scale: one border on every button (outlined = filled height), then small 40 / regular 48 / big 58 (large text: 52 / 48 / 58+).
   Buttons in the same row always share a size class. Widths: equal only for a paired choice (Cancel/Save, Previous/Next, Save/Delete); otherwise sized to the label. */
.btn{border:2px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:0;min-height:48px;text-align:center;line-height:1.2;box-sizing:border-box}
.btn.ghost{border-color:var(--accent-ink)}.btn.ghost.danger-btn{border-color:var(--red-edge)}
.btn.big{min-height:58px}.btn.small{min-height:40px}
.addbtn{min-height:48px}
body.senior .btn{min-height:52px}body.senior .btn.small{min-height:48px}body.senior .btn.big{min-height:62px}
.btnpair,.modal-foot:has(>.btn:nth-child(2):last-child){display:flex;gap:10px}
.btnpair .btn,.modal-foot:has(>.btn:nth-child(2):last-child)>.btn{flex:1 1 0;min-width:0}
.btnpair .btn{white-space:nowrap}.btnpair .btn:first-child{flex-grow:1.8}
/* v0.16.0 Home tiles (flat icons, two per row) */
.h1s{font-size:1.5rem;margin:6px 0 2px;line-height:1.25}.sub{margin:0;opacity:.75;font-size:.92rem}
.tiles2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.tiles2 .tile{padding:14px;gap:8px;border-radius:18px}
.tiles2 .tile b{font-size:1.05em;line-height:1.2}.tiles2 .tile small{opacity:.7;line-height:1.25}
.chip{width:42px;height:42px;border-radius:14px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;flex:none}
.chip svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tiles2 .tx{display:flex;flex-direction:column;gap:3px;min-width:0}.tiles2 .wide{grid-column:1/-1;flex-direction:row;align-items:center;gap:12px}
.tiles2 .santa .chip{background:var(--red-soft2);color:var(--red-ink)}
.status{display:inline-block;font-size:.78rem;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--amber-soft);color:var(--amber-ink);width:max-content}
.status.ok{background:var(--accent-soft);color:var(--accent-ink)}.status.no{background:var(--chip);color:var(--muted-2)}
body.senior .tiles2{grid-template-columns:1fr}body.senior .tiles2 .tile{flex-direction:row;align-items:center;gap:14px;padding:18px}
body.senior .tiles2 .tx{flex:1}
body.senior .chip{width:56px;height:56px;border-radius:18px}body.senior .chip svg{width:30px;height:30px}
/* v0.16.0 RSVP (invitation style) */
.hero{background:linear-gradient(160deg,var(--band),var(--band-2));color:var(--on-accent);border-radius:20px;padding:18px;margin:6px 0 12px}
.hero h1{margin:0;font-size:1.35rem;color:var(--on-accent)}.hero p{margin:4px 0 0;opacity:.92}
.choice2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0}
.ch{position:relative;border:2px solid var(--line);background:var(--card);border-radius:18px;padding:14px 8px;text-align:center;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;margin:0}
.ch input{position:absolute;opacity:0;pointer-events:none}.ch small{font-weight:500;opacity:.7;margin:0}
.ch .chip{width:38px;height:38px;border-radius:50%;background:var(--chip);color:var(--muted-3)}
.ch:has(input:checked){border-color:var(--accent-ink);background:var(--accent-soft);color:var(--accent-ink)}.ch:has(input:checked) .chip{background:var(--green);color:var(--on-accent)}
.ch:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.stepper{display:flex;align-items:center;justify-content:space-between;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px;margin:6px 0}
.stepper .stp{width:48px;height:48px;border-radius:50%;border:0;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;cursor:pointer;padding:0}
.stepper .stp svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
.stepper .lbl{display:flex;flex-direction:column;align-items:center;margin:0;line-height:1.1}
.stepper input{width:3.5ch;border:0;background:transparent;text-align:center;font:inherit;font-size:1.7rem;font-weight:700;padding:0;margin:0;-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper small{opacity:.65;font-weight:400}
#hc.off .stepper{opacity:.4;pointer-events:none}
body.senior .stepper .stp{width:60px;height:60px}body.senior .ch{padding:20px 8px}
.stepper .lbl input.hcnum{display:inline-block;width:3.5ch;border:0;background:transparent;padding:0;margin:0;box-shadow:none;text-align:center}
.hero .count{display:inline-block;margin-top:8px;background:rgba(255,255,255,.18);border-radius:999px;padding:3px 12px;font-weight:700;font-size:.9rem}
/* Icon-only containers: the icon's text-gap margin must not push it off centre */
.chip .ic,.stp .ic,.iconbtn .ic,.qedit .ic{margin:0;vertical-align:middle}
/* v0.16.2 flat icons replacing emoji in controls, badges and tiles */
.tiles .tile .chip{margin-bottom:8px}.tile.alert .chip{background:var(--red-soft2);color:var(--red-ink)}
.badge-status .ic,.giftcount .ic,.flagbadge .ic,.flag b .ic,.tabs a .ic,.wbody a .ic,.stat .ic{width:1em;height:1em;margin-right:.3em;vertical-align:-.12em}
.flagbadge .ic,.flag b .ic,.tabwarn .ic{color:var(--red-ink)}.tabwarn .ic{margin:0 0 0 .2em}
.yes .ic{color:var(--accent-ink)}.no .ic{color:var(--red-ink)}.ok{color:var(--accent-ink);font-weight:700}.bad{color:var(--red-ink);font-weight:700}
td .ic{width:1.2em;height:1.2em;margin:0}
.notice a{color:var(--accent-ink);font-weight:600}
/* v0.17.0 footer: view controls first, then the account block (Signed in as + Sign Out) */
.modes{display:flex;flex-direction:column;align-items:center;gap:8px;margin:28px 16px 0}.modes:empty{display:none}
.signedin{margin:20px 32px 0;padding-top:18px;border-top:1px solid var(--line)}.modes:empty+.signedin{margin-top:28px;padding-top:0;border-top:0}
/* v0.18.0 RSVP lodging question (radio rows) and admin lodging chips */
.fieldhint{margin:-4px 0 8px;font-size:.92em}
.chrows{display:flex;flex-direction:column;gap:8px;margin:6px 0 10px}
.chrow{position:relative;display:flex;align-items:center;gap:12px;border:2px solid var(--line);background:var(--card);border-radius:18px;padding:10px 12px;margin:0;cursor:pointer}
.chrow input{position:absolute;opacity:0;pointer-events:none}
.chrow .chip{width:40px;height:40px;border-radius:50%;background:var(--chip);color:var(--muted-3)}
.chrow .tx{display:flex;flex-direction:column;line-height:1.2}.chrow small{opacity:.7}
.chrow:has(input:checked){border-color:var(--accent-ink);background:var(--accent-soft)}.chrow:has(input:checked) .chip{background:var(--green);color:var(--on-accent)}
.chrow:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
#stay.off .chrows{opacity:.4;pointer-events:none}
.stay{display:inline-block;font-weight:700;font-size:.85em;padding:1px 9px;border-radius:999px;background:var(--chip)}.stay.yes{background:var(--amber-soft);color:var(--amber-ink)}.stay.maybe{background:var(--info-soft);color:var(--info-ink)}.stay.no{color:var(--muted-2)}
.chrow small{font-weight:400}
/* v0.18.5 footer: one account block under a line on every page; buttons first, then Signed in as + Sign Out */
.acct{margin:28px 32px 0;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:8px}
.acct .signedin{margin:10px 0 0;padding:0;border:0}
/* v0.19.0 admin dashboard: panels, segmented control, switch, stat tiles, link rows */
.panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px;margin:10px 0}
.panel .ph{display:flex;align-items:center;justify-content:space-between;gap:10px}
.panel h3{margin:0;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;opacity:.6;font-weight:700}
.seg{display:grid;grid-template-columns:repeat(3,1fr);background:var(--chip);border-radius:999px;padding:4px;margin-top:10px}.seg.two{grid-template-columns:repeat(2,1fr)}
.seg form{display:contents}
.seg button{border:0;background:transparent;font:inherit;font-weight:700;font-size:.92rem;color:var(--ink-2);padding:11px 4px;border-radius:999px;cursor:pointer;min-height:44px}
.seg button.on{background:var(--green);color:var(--on-accent)}
.switch{width:58px;height:34px;border-radius:999px;border:0;background:var(--track);position:relative;cursor:pointer;padding:0;flex:none}
.switch::after{content:"";position:absolute;left:4px;top:4px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s}
.switch.on{background:var(--green)}.switch.on::after{left:28px}
.tile.stat .num{font-size:1.7rem;line-height:1}.tile.stat .tx{gap:2px}.tiles2 .tile.alert{background:var(--red-soft);border-color:var(--red-edge2)}.tiles2 .tile.alert .chip{background:var(--red-soft2);color:var(--red-ink)}
.acc{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 14px;margin:10px 0;text-decoration:none;color:inherit}
.acc .chip{width:40px;height:40px}.acc .tx{display:flex;flex-direction:column;line-height:1.25;flex:1;min-width:0}.acc small{opacity:.65}.acc>.ic{margin:0;opacity:.4;flex:none}
body.senior .seg button{min-height:56px}body.senior .switch{width:72px;height:42px}body.senior .switch::after{width:34px;height:34px}body.senior .switch.on::after{left:34px}
.card input[readonly]+form{margin-top:10px}
/* iOS draws date/time inputs wider than their box and centres the value; make them behave like the other fields */
input[type=date],input[type=datetime-local],input[type=time]{-webkit-appearance:none;appearance:none;min-width:0;max-width:100%;min-height:48px;text-align:left;line-height:1.3}
input[type=date]::-webkit-date-and-time-value,input[type=datetime-local]::-webkit-date-and-time-value{text-align:left;margin:0;min-height:1.4em}
/* v0.21.0 RSVP: separate Adults / Kids steppers; no double-tap zoom on controls (tapping + quickly looked like a double tap to iOS) */
.stepper{border-radius:999px}.stepper .slab{display:flex;flex-direction:column;line-height:1.15;padding-left:10px;min-width:0}.stepper .slab small{opacity:.65;font-weight:400}
.stepper .ctl{display:flex;align-items:center;gap:4px;flex:none}
.stepper .stp{width:46px;height:46px}
.stepper .lbl input.hcnum,.stepper .ctl input.hcnum{display:inline-block;width:3ch;border:0;background:transparent;padding:0;margin:0;box-shadow:none;text-align:center;font:inherit;font-size:1.6rem;font-weight:700;min-height:0}
#hc .stepper+.stepper{margin-top:8px}
a,button,input,select,textarea,label,summary,.btn,.stp{touch-action:manipulation}
.stp,.seg button,.switch{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* v0.22.0 RSVP: Save bar pinned to the bottom, unsaved marker, saved banner on Home */
body.hasbar{padding-bottom:calc(128px + env(safe-area-inset-bottom))}
.savebar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:8px 16px calc(10px + env(safe-area-inset-bottom))}
.savebar .in{max-width:860px;margin:0 auto}
.savebar .btnpair{margin:0}.savebar .btn.big{margin:0;min-height:52px}
.dirtymsg{margin:0 0 6px;text-align:center;font-size:.85rem;font-weight:700;color:var(--amber-ink)}.dirtymsg::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--warn-dot);margin-right:6px;vertical-align:middle}
.dirtymsg[hidden]{display:none}
.hero .where{opacity:.92;font-size:.95rem}
.saved{background:var(--accent-soft);border:1px solid var(--ok-edge);border-radius:18px;padding:14px;margin:6px 0 12px}
.saved b{display:flex;align-items:center;color:var(--accent-ink)}.saved p{margin:6px 0 10px}
.saved .btn{margin:0}
body.senior.hasbar{padding-bottom:calc(170px + env(safe-area-inset-bottom))}
.modal-foot:has(>.btn:nth-child(2):last-child)>.btn{flex:1 1 auto;white-space:nowrap;padding-left:14px;padding-right:14px}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:10px}.twocol label{margin:0}.twocol+p{margin:6px 0 10px}
.hero .when{margin-top:2px;font-weight:700}
/* v0.23.2 the Santa answer you just saved: a green row with a Saved line (the page keeps your scroll position) */
.qrow.justsaved{border-color:var(--accent-ink);background:var(--accent-soft)}
.savedtag{display:flex;align-items:center;gap:2px;margin-top:4px;font-size:.85em;font-weight:700;color:var(--accent-ink)}.savedtag .ic{margin-right:.3em}

.voices{margin:10px 0}.vrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}.vrow label{display:flex;align-items:center;gap:10px;margin:0;flex:1}.vrow input{width:22px;height:22px;margin:0}
.alertpanel{background:var(--red-soft);border-color:var(--red)}.alertpanel h3{color:var(--red);opacity:1}.alertpanel p{margin:8px 0}

/* While a call is up the whole page is dark: no green status-bar strip, and nothing light can show at the edges (the iPhone Home Screen app can leave a gap below the call screen) */
html.callon,html.callon body{background:#050505}html.callon body::before{display:none}
body.senior .btn.who{justify-content:flex-start}

.qdone{color:var(--accent-ink);margin-right:.35em}.qdone .ic{margin:0;vertical-align:-.12em}

/* Santa calls you, the grown-ups note and the lead line */
.cs-calls{display:flex;justify-content:space-around;width:100%}.cs-accept .cs-endic{background:#2e9d57}.cs-accept .cs-endic .ic{transform:none}
.cs-hint{margin:0;opacity:.85;line-height:1.4;max-width:28ch}body.senior .cs-hint{font-size:1.25em}
.lead{font-size:1.12em;margin:.3em 0 1em}.notelist{padding-left:1.1em;margin:.6em 0}.notelist li{margin:.55em 0}.card.grownups{background:var(--grown)}.card.grownups h3{margin-top:0}
#delayrow select{margin-top:6px}#modehint{margin:8px 0 12px}

/* Titles that wrap on purpose ("Santa's Finding / His Phone"): each line stays whole */
.cs-name .ln{display:block;white-space:nowrap}
.cs-name{font-size:min(2em,calc((100vw - 56px) / 9.6))} /* the longest title line must fit, even in large-text mode and on small phones */
/* On a PC or tablet the call is a phone-shaped panel in the middle of a dark backdrop; on a phone it stays full screen */
@media (min-width:720px) and (min-height:600px){
  .callscreen{align-items:center;background:#070707}
  .cs-name{font-size:min(2em,34px)}
  .cs-inner{width:380px;height:min(820px,calc(100vh - 48px));border-radius:46px;overflow:hidden;background:radial-gradient(120% 80% at 50% 22%,#2a2a2d 0%,#151517 48%,#050505 100%);box-shadow:0 0 0 9px #151515,0 0 0 10px #2e2e2e,0 28px 80px #000c;padding-top:44px;padding-bottom:36px}
  /* large-text mode keeps its bigger buttons and words, but the panel is a fixed size, so the avatar and spacing give way */
  body.senior .cs-avatar,body.senior .santa-face{width:150px;height:150px}body.senior .santa-face{font-size:78px}
  body.senior #status,body.senior #timer,body.senior #wstatus,body.senior #wtimer,body.senior #istatus{font-size:1.1em;margin-top:2px;min-height:0}body.senior .cs-hint{font-size:1.05em}
}
/* a short PC window (about 640px high): shrink the avatar and padding so every call screen still fits the panel, even in large-text mode */
@media (min-width:720px) and (min-height:600px) and (max-height:760px){
  .cs-avatar,.santa-face,body.senior .cs-avatar,body.senior .santa-face{width:120px;height:120px}.santa-face,body.senior .santa-face{font-size:62px}
  .cs-inner{padding-top:30px;padding-bottom:22px}.cs-name,body.senior .cs-name{font-size:min(1.7em,30px)}body.senior .cs-hint{font-size:1em}body.senior .cs-ic{width:68px;height:68px}body.senior .cs-endic{width:76px;height:76px}
}

/* Home panels (v0.32.0): one panel at a time, a bottom bar to switch, swipe on touch screens */
.hpanel{display:none}.hpanel.on{display:block}
.swipehint{font-size:.85em;margin-top:18px}
body.haspanels{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
.ptabs{position:fixed;left:0;right:0;bottom:0;z-index:20;will-change:transform;display:flex;background:var(--bar);border-top:1px solid var(--line);box-shadow:0 -2px 10px #0000001a;padding-bottom:env(safe-area-inset-bottom)}
.ptabs :is(button,a){flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px;padding:6px 4px;border:0;background:none;font:inherit;font-size:.8em;font-weight:600;color:var(--muted);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.ptabs :is(button,a) .ic{margin:0;width:24px;height:24px}
.ptabs :is(button,a)[aria-selected=true],.ptabs a[aria-current=page]{color:var(--accent-ink);box-shadow:inset 0 3px 0 var(--accent-ink)}
.ptabs :is(button,a):focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
body.senior.haspanels{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
body.senior .ptabs :is(button,a){min-height:84px;gap:4px;font-size:.85em}
body.senior .ptabs :is(button,a) .ic{width:34px;height:34px}

/* Rich text (Santa's Plan, v0.33.0) */
.richtext{overflow-wrap:anywhere;line-height:1.55;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 18px 14px;margin:14px 0}   /* the same look as the invitation email: a clean card, bold headings in the theme's accent, roomy spacing */
.richtext>:first-child{margin-top:0}.richtext>:last-child{margin-bottom:0}
.richtext h2{font-size:1.25em;line-height:1.25;font-weight:800;color:var(--accent-ink);margin:1.2em 0 .45em;text-wrap:balance}.richtext h3{font-size:1.1em;line-height:1.25;font-weight:800;color:var(--accent-ink);margin:1.1em 0 .35em}
.richtext p{margin:0 0 .85em}.richtext ul,.richtext ol{margin:0 0 .85em;padding-left:1.3em}.richtext li{margin:0 0 .3em}
.richtext a{color:var(--accent-ink);font-weight:700}.richtext blockquote{margin:0 0 .85em;padding:.2em 0 .2em 1em;border-left:4px solid var(--gold);color:var(--muted)}.richtext hr{border:0;border-top:1px solid var(--line);margin:1.1em 0}
.rtetools{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.rte{min-height:260px;max-height:60vh;overflow:auto;border:1px solid var(--field-edge);border-radius:10px;background:var(--field);padding:12px;margin-bottom:8px}
.rte:focus{outline:3px solid var(--gold);outline-offset:1px}

/* Panel tab labels: never wrap; large-text mode uses the short label ("Plan") (v0.34.0) */
.ptabs :is(button,a) span{white-space:nowrap}.ptabs .short{display:none}
body.senior .ptabs .full{display:none}body.senior .ptabs .short{display:inline}

/* Agenda (v0.34.0) */
.nowcard{background:linear-gradient(160deg,var(--band),var(--band-2));color:var(--on-accent);border-radius:20px;padding:18px;margin:12px 0}
.nowcard h2{margin:6px 0 2px;font-size:1.6em;line-height:1.2;color:var(--on-accent)}.nowcard p{margin:4px 0 0;opacity:.95}
.nowcard .agtime{font-size:1.15em;font-weight:700;margin:10px 0 0}.nowcard.done,.nowcard.before{background:linear-gradient(160deg,#7a2a22,#a03c32)}.nowcard.before{background:linear-gradient(160deg,var(--band),var(--band-2))}
.agchip{display:inline-block;background:rgba(255,255,255,.2);border-radius:999px;padding:3px 12px;font-weight:700;font-size:.85em;letter-spacing:.02em}
.agwhere{font-weight:400;font-size:1rem;display:flex;align-items:center;gap:6px;margin-top:6px;opacity:.9}.agwhere .ic{flex:none;width:1.05em;height:1.05em;margin:0}.agnote{font-size:.92em;opacity:.9}
.upnext{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin:10px 0}
.upnext h3{margin:4px 0 2px;font-size:1.2em}.upnext .agwhere{margin-top:3px;color:var(--muted);font-size:.95rem;opacity:1}
.aglabel{font-size:.8em;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.agfoot{text-align:center;margin-top:14px}
.aglist{list-style:none;padding:0;margin:12px 0}
.aglist li{display:flex;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin:10px 0}
.aglist .agt{flex:0 0 5.2em;font-weight:800;font-size:1.05em;color:var(--accent-ink)}
.aglist .agb{min-width:0;flex:1}.aglist b{font-size:1.1em;line-height:1.25}.aglist .agwhere{margin-top:3px;color:var(--muted);font-size:.95rem;opacity:1}.aglist .agnote{margin:4px 0 0;color:var(--muted)}
.aglist li.now{border:2px solid var(--accent-ink);background:var(--ok-soft)}.aglist li.now .agchip{background:var(--green);color:#fff;margin-top:8px}
.aglist li.past{opacity:.6}.agdone{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:.85em;font-weight:700;color:var(--accent-ink)}
/* Admin run-the-day controls */
.runbox{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px;margin:10px 0}
.runbox .nowline{margin:4px 0 12px}.runbox .nowline b{font-size:1.1em}
.runbtns{display:flex;gap:10px;margin:6px 0}.runbtns form{display:block}.runbtns .back-f{flex:0 0 32%}.runbtns .next-f{flex:1}.runbtns .btn{width:100%;height:100%;margin:0;box-sizing:border-box}
.agadmin li{align-items:center}.agadmin li a{flex:1;text-decoration:none;color:inherit}.agadmin li.cur{background:var(--ok-soft);border-radius:10px;padding-left:8px;padding-right:8px}
.runbox h3{margin:0 0 4px}
body.senior .aglist li{flex-direction:column;gap:4px}body.senior .aglist .agt{flex:none}

/* Facilities (v0.35.0) */
.fachead{font-size:1.25em;margin:26px 0 0}
.wifipage{text-align:center}.wifipage .wqr{background:#fff;display:inline-block;padding:12px;border-radius:12px;border:1px solid #d9e3da}.wifipage .wqr img{display:block;width:min(62vw,260px);height:auto}.wifipage .wnote{margin:8px 0 14px}.wifipage .wl{margin:10px 0 0;color:var(--muted-4);font-size:.9em;text-transform:uppercase;letter-spacing:.05em}.wifipage .wv{margin:2px 0 6px;font-size:1.5em;font-weight:700;overflow-wrap:anywhere}.wifipage .wpass{font-family:ui-monospace,Menlo,Consolas,monospace}
.maptitle{margin:2px 0 8px}
.mapbox{overflow:auto;border:1px solid var(--line);border-radius:14px;background:var(--card);-webkit-overflow-scrolling:touch;cursor:zoom-in;text-align:center}
.mapbox img{display:block;margin:0 auto;width:auto;height:auto;max-width:100%;max-height:calc(100vh - 205px)}   /* the whole map fits the screen, in width and height */
body.senior .mapbox img{max-height:calc(100vh - 330px)}
.mapbox.zoomed{cursor:zoom-out;max-height:calc(100vh - 160px)}.mapbox.zoomed img{max-width:none;max-height:none;width:240%}
.maphint{text-align:center;margin:8px 0 0}.mapbtn{text-align:center;margin:10px 0 0}
.mapprev{display:block;max-width:100%;max-height:340px;margin:0 auto 12px;border:1px solid var(--line);border-radius:10px;background:var(--card)}

/* Photos panel and viewer (v0.37.0) */
.mosaic{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:12px 0}
.mosaic .mt{display:block;overflow:hidden;border-radius:10px;aspect-ratio:1;background:var(--tile-ph)}
.mosaic .mt img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 25%}   /* keep faces: crop from the bottom first */
.mosaic .mt.f{grid-column:span 2;aspect-ratio:16/10}
.mosaic .throwback img{border-width:4px}
.photopanel .addbtn{margin:8px 0 4px}
/* Wide screens: the feature is a 2x2 block with four photos beside it (4 columns), and from 1100px up the Photos panel breaks out of the narrow page column so the pictures are large (about 520px feature, 250px others). */
@media (min-width:720px){.mosaic{grid-template-columns:repeat(4,1fr)}.mosaic .mt.f{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}}
@media (min-width:1100px){.photopanel{width:1040px;margin-left:calc(50% - 520px)}}
@media (hover:none) and (pointer:coarse){body:not(.senior) .vnav{display:none}}
.vnav .vcount:empty{display:none}

/* Tear-off calendar page (v0.38.0, sized up in v0.38.2): stretches to the height of the text beside it */
.calpg{flex:none;width:118px;perspective:600px;align-self:stretch;display:flex}
.calstack{position:relative;width:100%;display:flex}
.calsheet{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;background:#fff;color:#111;border-radius:8px;padding:11px 4px 8px;text-align:center;box-shadow:0 2px 0 #d9d3c4,0 6px 14px #0004;transform-origin:50% 0;border-top:7px solid #b3261e}
.calsheet::before,.calsheet::after{content:"";position:absolute;top:-5px;width:8px;height:8px;border-radius:50%;background:#0003;box-shadow:inset 0 1px 1px #0006}
.calsheet::before{left:16px}.calsheet::after{right:16px}
.caltop{display:block;font-size:.8rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#b3261e;line-height:1.2}
.calnum{display:block;font-size:3.6rem;line-height:1;font-weight:900;margin-top:4px;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.d3 .calnum{font-size:2.9rem}
.calsheet.today .calnum{font-size:2.1rem;line-height:1.2;margin-top:10px}
.calstack .calsheet+.calsheet{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none}
/* a tear: the page lifts at its corner (a little peel), then is ripped up and off to the upper left */
.calsheet.torn{-webkit-animation:calrip 1.05s cubic-bezier(.45,0,.85,.55) forwards;animation:calrip 1.05s cubic-bezier(.45,0,.85,.55) forwards;transform-origin:0 0}
@-webkit-keyframes calrip{0%{-webkit-transform:none;opacity:1}16%{-webkit-transform:rotate(-5deg) translate(2px,-3px);opacity:1}100%{-webkit-transform:translate(-95%,-190%) rotate(-52deg);opacity:0}}
@keyframes calrip{0%{transform:none;opacity:1}16%{transform:rotate(-5deg) translate(2px,-3px);opacity:1}100%{transform:translate(-95%,-190%) rotate(-52deg);opacity:0}}
body.senior .calpg{width:150px}body.senior .caltop{font-size:.95rem}body.senior .calnum{font-size:4.4rem}body.senior .d3 .calnum{font-size:3.5rem}
.hero.withcal h1{margin-bottom:8px}.herorow{display:flex;gap:14px;align-items:stretch;justify-content:space-between}.herorow .herotx{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center}.herorow .herotx p{font-size:1.06rem;margin-top:3px}.herorow .herotx .where{font-size:.98rem}
.homehead{display:flex;gap:14px;align-items:stretch;justify-content:space-between;margin:6px 0 10px}.homehead .tx{min-width:0;flex:1}.homehead .calpg{width:104px}.homehead .calnum{font-size:3.3rem}.homehead .d3 .calnum{font-size:2.6rem}.homehead .caltop{font-size:.66rem}.homehead .calsheet{min-height:0}
.homehead .h1s{margin-top:0}
/* large text stacks the calendar under the text on a phone only; wider screens keep it beside the text */
@media (max-width:719px){body.senior .homehead{flex-direction:column;align-items:stretch}body.senior .homehead .calpg{align-self:center}}
.checkback{font-size:1.25rem;font-weight:800;line-height:1.3;margin:16px 0 6px;color:var(--accent-ink)}
@media (max-width:719px){body.senior .herorow{flex-direction:column}body.senior .herorow .calpg{align-self:center;min-height:150px;margin-top:6px}}
/* Large text on a wide screen: the calendar is centred on the card and never makes it taller than the text on the left (it floats, so the text sets the height); the Home header keeps the regular-size calendar */
@media (min-width:720px){
  body.senior .hero.withcal{position:relative}
  body.senior .herorow{padding-right:150px}
  body.senior .herorow .calpg{width:132px}body.senior .herorow .calnum{font-size:3.6rem}body.senior .herorow .d3 .calnum{font-size:2.9rem}body.senior .herorow .caltop{font-size:.8rem}
  body.senior .herorow .calpg{position:absolute;right:18px;top:50%;transform:translateY(-50%);align-self:auto}
  body.senior .homehead{align-items:center}
  body.senior .homehead .calpg{width:104px}body.senior .homehead .calnum{font-size:3.3rem}body.senior .homehead .d3 .calnum{font-size:2.6rem}body.senior .homehead .caltop{font-size:.66rem}
}

.livetiles{margin-top:14px}

/* Agenda editing (v0.39.1) */
.editico{display:inline-block;color:var(--accent-ink);vertical-align:-.1em;margin-left:4px}.editico .ic{margin:0;width:1em;height:1em}
.agedit .twocol{align-items:end}.agedit label.agremove{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--red);margin-bottom:14px}.agedit label.agremove input{width:1.3em;height:1.3em;margin:0}

/* On a PC or tablet the tab bar is a compact 560px bar in the middle, not a strip across the whole window (v0.39.1) */
@media (min-width:640px){.ptabs{left:50%;right:auto;width:560px;transform:translateX(-50%);border:1px solid var(--line);border-bottom:0;border-radius:16px 16px 0 0}}

/* Slim band (family screens): the page title lives in the green band; account items live on /settings */
.top.slim{flex-wrap:nowrap;height:calc(64px + env(safe-area-inset-top));min-height:0;padding-top:calc(8px + env(safe-area-inset-top));padding-bottom:8px}   /* same height on panels and sub-pages */
.top.slim nav{flex:none}.top.slim nav a{margin:0 0 0 12px;font-weight:600;font-size:.9rem;opacity:.9}
.btitle{flex:1;min-width:0;margin:0;font-size:1.3rem;font-weight:700;line-height:1.2;color:var(--on-accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .bback{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:0 2px 0 -10px;border-radius:50%;color:var(--on-accent)}
.top .bback .ic{margin:0;width:26px;height:26px;stroke-width:2.6}.top .bback:active{background:#ffffff26}
body.senior .btitle{font-size:1.5rem;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
body.senior .top.slim{height:calc(80px + env(safe-area-inset-top))}
body.senior .top .bback{width:52px;height:52px;border:2px solid var(--on-accent);margin-left:-6px}body.senior .top .bback .ic{width:30px;height:30px}
.sub.first{margin-top:4px}
/* Bottom line of the three panels */
.legal{text-align:center;margin:28px 16px 12px;font-size:.78rem;color:var(--muted)}
.legal p{margin:2px 0}.legal .vers,.vers{font-size:.72rem;opacity:.6}
body.senior .legal{font-size:.9rem}
/* Settings page */
.setcard{padding:4px 16px}.setrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-top:1px solid var(--line)}.setrow:first-child{border-top:0}
.setrow .tx{min-width:0}.setrow .tx b{display:block}.setrow .tx small{display:block}.setrow .em{word-break:break-all}
.tsz{display:inline-flex;flex:none;border:2px solid var(--accent-ink);border-radius:999px;overflow:hidden;margin:0}
.tsz .tszb{min-height:44px;padding:8px 16px;border:0;border-radius:0;box-shadow:none;margin:0;background:var(--card);color:var(--accent-ink);font:inherit;font-weight:600;cursor:pointer}.tsz .tszb.on{background:var(--green);color:var(--on-accent);display:inline-flex;align-items:center}
body.senior .tsz .tszb{min-height:52px}
body.senior .setrow{flex-direction:column;align-items:flex-start;gap:12px}body.senior .setrow .link{min-height:52px}
body.senior .setrow.lnk{flex-direction:row;align-items:center;gap:14px}   /* a link row (Theme, Background) keeps its chevron beside the label; only rows with buttons stack */

/* Band: the logo on every panel (plus the panel name from 720px up) and a person icon */
#bandtitle{display:flex;align-items:center;gap:16px;overflow:visible;white-space:normal}
.bandlogo{display:block;height:48px;width:auto;max-width:100%}
.bandname{display:none;margin:0;font-size:1.3rem;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:720px){.bandname{display:block;padding-left:16px;border-left:2px solid #ffffff40}}
body.senior .bandlogo{height:56px}
.top .bme{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:-4px -8px -4px 8px;border-radius:50%;color:var(--on-accent)}
.top .bme .ic{margin:0;width:26px;height:26px}.top .bme:active{background:#ffffff26}
body.senior .top .bme{width:52px;height:52px;border:2px solid var(--on-accent);margin-right:-4px}body.senior .top .bme .ic{width:30px;height:30px}
.setacts{display:flex;flex-direction:column;align-items:flex-end;gap:8px}body.senior .setacts{align-items:flex-start}.setrow .link{white-space:nowrap}

/* The band stays put while the page scrolls (the safe-area strip behind the status bar is already fixed) */
.top.slim{position:fixed;top:0;left:0;right:0;z-index:50}   /* fixed like the tab bar (sticky misplaces the band in the iPhone Home Screen app) */
body.slimband{padding-top:calc(64px + env(safe-area-inset-top))}body.senior.slimband{padding-top:calc(80px + env(safe-area-inset-top))}
.nameage{margin:0;font-size:1.1em;font-weight:600;color:var(--muted)}
.phead.alone{justify-content:flex-end}
/* Sub-page band: back chevron on the left, the page title centered (so it reads as a title, not as where you are going back to) */
.top.slim.inner{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;column-gap:0}
.top.slim.inner .btitle{grid-column:2;text-align:center;padding:0 6px}
body.senior .top.slim.inner{grid-template-columns:52px 1fr 52px}
/* Wide screens (v0.59.0): the logo stays top left on sub-pages like on the panels, then a divider and "‹ <where Back goes>" (a word is clearer than a bare chevron); the title is centered once there is room (1280px+), otherwise it follows the back link */
.top .blogo,.top .bback .bl{display:none}
@media (min-width:720px){
  .top.slim.inner{display:flex;justify-content:flex-start;gap:16px}
  .top.slim.inner .blogo{display:block;order:1;margin:0;position:relative;flex:none}
  .top.slim.inner .blogo::after{content:"";position:absolute;right:-9px;top:50%;height:26px;width:2px;background:#ffffff40;transform:translateY(-50%)}
  .top.slim.inner .bback{order:2;width:auto;min-width:44px;margin:0;padding:0 14px 0 8px;border-radius:999px;display:inline-flex;align-items:center;gap:2px;max-width:240px}
  .top.slim.inner .bback .bl{display:block;font-weight:600;font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .top.slim.inner .btitle{order:3;grid-column:auto;text-align:left;padding:0}
  body.senior .top.slim.inner .blogo{margin-right:16px}body.senior .top.slim.inner .blogo::after{right:-17px}   /* the divider sits midway between the logo and the bordered pill, not under it */
  body.senior .top.slim.inner .bback{padding:0 16px 0 10px;margin:0}body.senior .top.slim.inner .bback .bl{font-size:1.2rem}
}
@media (min-width:1280px){
  .top.slim.inner .btitle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);flex:none;max-width:calc(100% - 1040px);text-align:center}
  body.senior .top.slim.inner .btitle{max-width:calc(100% - 1160px)}
}
/* Large Text needs more room to center a title between the logo and the right edge (at 1300px it was cut to 140px): follow the back link until there is */
@media (min-width:1280px) and (max-width:1499px){body.senior .top.slim.inner .btitle{position:static;transform:none;flex:1;max-width:none;text-align:left}}

/* Person pages: a full-width tab control, the photo button on the avatar row, links instead of popups */
.pseg{display:grid;grid-template-columns:repeat(3,1fr);margin:8px 0 14px;border:2px solid var(--accent-ink);border-radius:999px;overflow:hidden;background:var(--card)}
.pseg a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 4px;text-decoration:none;color:var(--accent-ink);font-weight:600;white-space:nowrap}
.pseg a.on{background:var(--green);color:var(--on-accent)}
body.senior .pseg a{flex-direction:column;min-height:72px;font-size:.8em}body.senior .pseg a .ic{margin:0 0 2px;width:1.4em;height:1.4em}
.namehead{flex-wrap:wrap}.namehead .photobtn{margin-left:auto}
.photopreview{display:flex;justify-content:center;margin:6px 0 12px}.qtitle{margin:.2em 0}
.iconbtn:not(.danger){color:var(--accent-ink)}a.iconbtn{text-decoration:none}a.qrow{text-decoration:none}
a.link.wrap{white-space:normal;text-align:center;justify-content:center;border-radius:24px}
/* Landing on #q-... / #item-... (after a save or the back arrow) must not hide the row under the fixed band */
.qlist li,.witem{scroll-margin-top:calc(84px + env(safe-area-inset-top))}body.senior .qlist li,body.senior .witem{scroll-margin-top:calc(100px + env(safe-area-inset-top))}
/* Santa question page: the question is the label of the box, so it stays next to it when the keyboard opens */
.qform .qtitle{display:block;font-size:1.15em;font-weight:700}.qform textarea{scroll-margin-top:calc(150px + env(safe-area-inset-top))}
/* Large text: the Add photos pill and the person page's photo button stay on one line */
.addbtn{white-space:nowrap}.addbtn svg{width:1.1em;height:1.1em}
.phead{flex-wrap:wrap}.phead h1{white-space:nowrap}
.photobtn{white-space:nowrap}.lbl-short{display:none}
body.senior .lbl-full{display:none}body.senior .lbl-short{display:inline}
body.senior .namehead{flex-wrap:nowrap}body.senior .nameage{font-size:1em}
.cardhead .badge{white-space:nowrap}
.gc-up{white-space:nowrap}body.senior .gc-sep{display:none}body.senior .gc-up{display:block;margin-left:1.5em}
/* All Photos: year tabs and the Add photos button share one row (the button drops below if there are many years) */
.toprow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 14px}.toprow .tabs{margin:0;flex-wrap:nowrap}.toprow form{margin:0 0 0 auto}.toprow .addbtn{margin:0}
@media (max-width:430px){.toprow .tabs a{padding:8px 9px;font-size:.92em}.toprow .tabs a .ic{display:none}.toprow .addbtn{padding:8px 12px 8px 10px;font-size:.88em;gap:5px}.toprow{gap:6px}.toprow .tabs{gap:4px}}
/* Large text, Photos panel: "Just Posted" and Add photos share one row (a slimmer pill, only here) */
body.senior .phead{gap:8px}body.senior .phead h1.h1s{font-size:1.4rem}body.senior .phead .addbtn{padding:9px 14px 9px 11px;font-size:.88em;gap:5px}

/* Theme and Background pickers (v0.55.0): swatches are miniatures of the real screen; .lookprev[data-theme|data-bg] take the same tokens as <html> */
.setrow.lnk{text-decoration:none;color:inherit}.setrow.lnk .ic{flex:none;margin:0;color:var(--muted)}
.lookead{margin:4px 0 8px}
.lookgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
body.senior .lookgrid{grid-template-columns:1fr}
.lk{margin:0;display:flex;position:relative;font-weight:400}
.lk input.sr{position:absolute;opacity:0;pointer-events:none}
.lkbox{display:flex;flex-direction:column;gap:8px;width:100%;flex:1;margin:0;text-align:left;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:10px;font:inherit;color:inherit;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent}
.lkbox:active{background:var(--press)}
.lkbox .lk-tx b{display:block;line-height:1.25;font-weight:700;font-size:.9em;letter-spacing:-.01em}
body:not(.senior) .lkbox .lk-tx b{font-size:min(.9em,3.85vw)}   /* two columns: scale the name with the screen so "Cream & Crimson" stays on one line down to 360px */.lkbox .lk-tx small{display:block;color:var(--muted);line-height:1.3;font-weight:400}
.lkbox.on,.lk input:checked + .lkbox{border-color:var(--accent-ink);box-shadow:0 0 0 1px var(--accent-ink)}
.lk input:focus-visible + .lkbox,.lkbox:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.lkbox>.ic{display:none;position:absolute;top:16px;right:16px;margin:0;width:24px;height:24px;padding:4px;border-radius:50%;background:var(--green);color:var(--on-accent);box-shadow:0 1px 3px #0005}
.lkbox.on>.ic,.lk input:checked + .lkbox>.ic{display:block}
.deflook{margin:10px 0}.lkbox.wide{flex-direction:row;align-items:center;justify-content:space-between}.lkbox.wide>.ic{position:static;display:none}.lkbox.wide.on>.ic{display:block}
.lookprev{display:flex;flex-direction:column;height:96px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg);color:var(--fg)}
.lookprev[data-bg]:not([data-bg=none]){background-color:var(--wall-base);background-image:var(--wall);background-size:var(--wall-size,auto)}
.lp-band{display:block;height:16px;background:var(--band);flex:none}
.lp-body{padding:8px;display:flex;flex-direction:column;gap:6px}
.lp-head{display:block;height:7px;width:46%;border-radius:4px;background:#fff;opacity:.92}
.lp-card{background:var(--card);border:1px solid var(--line);border-radius:7px;padding:7px;display:flex;flex-direction:column;gap:5px}
.lp-card b{display:block;height:6px;width:56%;border-radius:3px;background:var(--fg)}
.lp-card s{display:block;height:5px;width:82%;border-radius:3px;background:var(--muted);opacity:.7}
.lp-row{display:flex;gap:6px}.lp-pill{display:block;height:12px;width:46px;border-radius:99px;background:var(--green)}.lp-chip{display:block;height:12px;width:32px;border-radius:99px;background:var(--accent-soft);border:1px solid var(--line)}
.lp-split{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.lp-split .lp-pill{width:30px}.lp-split .lp-chip{width:20px}

/* Admin Console (v0.58.0): the main admin screen has the logo with "Admin Console" centered in the band, and the wallpaper like the Home panels; admin sub-pages use the family sub-page band */
.adminbar #bandtitle{flex:1;min-width:0}
.adminbar .bandname{display:block;flex:1;min-width:0;padding:0;border:0;text-align:center;font-size:1.05rem;line-height:1.1;white-space:normal}
.adminbar #bandtitle{gap:10px}
body.senior .adminbar .bandlogo{height:40px}
body.senior .adminbar .bandname{font-size:1.1rem}
@media (min-width:720px){body.senior .adminbar .bandlogo{height:56px}.adminbar .bandname{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);flex:none;font-size:1.3rem;white-space:nowrap}}
.tscroll{overflow-x:auto;margin:0 -16px;padding:0 16px}.tscroll table{min-width:520px}   /* a wide admin table scrolls inside its own box, not the whole page */
body.adminhome{padding-bottom:calc(64px + env(safe-area-inset-bottom))}body.senior.adminhome{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
.ptabs a{text-decoration:none;position:relative}.ptabs a .tabwarn{position:absolute;top:6px;left:calc(50% + 8px);color:var(--red);line-height:0}.ptabs a .tabwarn .ic{width:16px;height:16px;margin:0}

/* v0.60.0 Help: the floating Help button, the help page and the answer */
.helpfab{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:30;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:10px 18px 10px 14px;border-radius:999px;background:var(--green);color:var(--on-accent);font-weight:700;text-decoration:none;box-shadow:0 3px 12px #0005;-webkit-tap-highlight-color:transparent}
.helpfab .ic{width:24px;height:24px;margin:0}.helpfab:active{transform:scale(.96)}.helpfab:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
body.senior .helpfab{min-height:62px;padding:14px 24px 14px 18px;font-size:1.15em}body.senior .helpfab .ic{width:32px;height:32px}
.helpsteps{margin:6px 0 0;padding-left:1.3em}.helpsteps li{margin:0 0 10px}
.helpcard h2{margin-top:0}.helpacts{display:flex;flex-direction:column;gap:10px;margin:12px 0}.helpacts form{margin:0}.helpacts .btn{margin:0;width:100%}
.helpacts .btn .ic,.qform .btn .ic{margin-right:8px}.helph{margin:20px 0 8px}
.helpfaq details{border-top:1px solid var(--line);padding:12px 0}.helpfaq details:first-child{border-top:0}.helpfaq summary{font-weight:700;cursor:pointer;min-height:32px}.helpfaq p{margin:8px 0 0}
.helpanswer p{margin:0 0 10px;font-size:1.05em}
.qform select{width:100%;min-height:48px}
/* Admin bottom bar on a short page (Family, Photos & TV): the iPhone Home Screen app floats a fixed bottom bar up when the page cannot scroll (the long Event tab, which scrolls, was always flush). v0.58.3 made the page exactly a screen tall, which was not enough; v0.58.4 makes it a hair taller than the screen so it always scrolls (2px of rubber-banding) */
body.adminhome{min-height:calc(100vh + 2px);min-height:calc(100lvh + 2px);box-sizing:border-box}body.adminhome .ptabs{will-change:transform}   /* v0.83.5: lvh is static (dvh changes while iOS settles the viewport after a tab tap, which looked like the bar rising then sinking) */

/* v0.60.5 Help: while a slow form is sent the button goes away and a toast says so */
.qform.is-thinking button,.qform.is-thinking .muted{display:none}.qform.is-thinking textarea,.qform.is-thinking select{opacity:.55;pointer-events:none}
.thinking{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);z-index:1100;display:flex;align-items:center;gap:14px;max-width:86vw;padding:18px 24px;border-radius:18px;background:var(--card);color:var(--fg);border:2px solid var(--accent-ink);box-shadow:0 8px 30px #0006;font-weight:700;font-size:1.1em}
.thinking .spin{flex:none;width:26px;height:26px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--accent-ink);animation:thinkspin .9s linear infinite}
@keyframes thinkspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.thinking .spin{animation:none}}
body.senior .thinking{font-size:1.3em;padding:24px 30px}

.guidehint{margin:-2px 4px 0;text-align:center}
.tourlink{margin:.6em 0}.tourlink a{white-space:nowrap;font-weight:700}
.guidepages img{display:block;width:100%;height:auto;margin:0 0 14px;background:#fff;border:1px solid var(--line);border-radius:8px}

/* v0.61.2 Help placement: a labelled pill in the band on phones and narrow windows (it covers nothing and is in the same place on every screen), a floating pill in the bottom right corner from 1200px up */
.helpfab{display:none}
@media (min-width:1200px){
  .helpfab{display:inline-flex;bottom:calc(14px + env(safe-area-inset-bottom))}
  body.haspanels .helpfab{bottom:calc(8px + env(safe-area-inset-bottom))}   /* level with the centered tab bar */
  body.senior.haspanels .helpfab{bottom:calc(11px + env(safe-area-inset-bottom))}
  .bhelp{display:none!important}
  body.hashelp main{padding-bottom:84px}body.senior.hashelp main{padding-bottom:104px}
}
.bhelp{flex:none;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px 0 10px;margin:0 0 0 8px;border:2px solid var(--on-accent);border-radius:999px;color:var(--on-accent);font-weight:700;font-size:1rem;text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.bhelp .ic{width:22px;height:22px;margin:0}.bhelp:active{background:#ffffff26}.bhelp:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
body.senior .bhelp{height:52px;padding:0 16px 0 12px;font-size:1.15rem}body.senior .bhelp .ic{width:28px;height:28px}
.top.slim.inner .bhelp{grid-column:3;justify-self:end;margin-right:-4px}
@media (min-width:720px){.top.slim.inner .bhelp{order:9;margin-left:auto;margin-right:0}}
/* panels: the Help pill takes room, so the logo shrinks in proportion (it must never be squeezed narrower than its picture) */
.hashelp.haspanels .bandlogo{height:auto;width:auto;max-width:100%;max-height:48px;object-fit:contain}
body.senior.hashelp.haspanels .bandlogo{max-height:46px}
/* with the Help pill beside it, a sub-page title may take two lines (also in Regular text) instead of being cut off with "..." */
.top.slim.inner.hasbhelp .btitle{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.15}
/* narrow phones in Large Text: a long sub-page title ("Tell Santa about Emma") gets a little smaller instead of being cut off */
@media (max-width:399px){body.senior .top.slim.inner.hasbhelp .btitle{font-size:1.25rem}}

/* v0.61.5 Help in the band: on a phone's sub-pages it is a round button the same size as the back button, so the title sits exactly in the middle of the screen (it was 35px off with a wide pill); the three Home panels keep the labelled pill */
@media (max-width:719px){
  .top.slim.inner .bhelp{width:44px;height:44px;padding:0;gap:0;justify-content:center;border:0;margin:0 -8px 0 0}
  .top.slim.inner .bhelp .bl{display:none}
  .top.slim.inner .bhelp > .ic{width:28px;height:28px}
  /* Large Text: the button has its own circle (like the back button), so it holds a bare "?" instead of the circled one, never a circle inside a circle */
  body.senior .top.slim.inner .bhelp{width:52px;height:52px;border:2px solid var(--on-accent);margin:0 -4px 0 0}
  body.senior .top.slim.inner .bhelp > .ic{display:none}
  body.senior .top.slim.inner .bhelp .qm{display:grid}
  body.senior .top.slim.inner .bhelp .qm .ic{width:32px;height:32px;stroke-width:3}
}
.bhelp .qm{display:none;line-height:0}
/* panels: Help sits snug beside the person icon (the gap was 34px) */
.top:not(.inner) .bhelp + .bme{margin-left:-14px}
/* The welcome card between an emailed link and the app: the email's band, a gold rule, the Elves' voice */
.welcome{padding:0;overflow:hidden;text-align:center}
.wband{background:radial-gradient(circle at 12% 30%,rgba(255,255,255,.22) 0 2px,transparent 3px),radial-gradient(circle at 82% 22%,rgba(255,255,255,.18) 0 2px,transparent 3px),radial-gradient(circle at 66% 78%,rgba(255,255,255,.2) 0 1.5px,transparent 2.5px),radial-gradient(circle at 30% 80%,rgba(255,255,255,.16) 0 1.5px,transparent 2.5px),linear-gradient(160deg,var(--band),var(--band-2));padding:20px 16px;border-bottom:4px solid var(--gold)}
.wband img{display:block;margin:0 auto;width:min(220px,70%);height:auto}
.wbody{padding:24px 22px 28px}.wkick{margin:0 0 6px;font-size:.78em;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.welcome h1{margin:0 0 10px;color:var(--accent-ink);font-weight:800;text-wrap:balance}.wlead{margin:0 0 18px}
.wwho{display:inline-block;max-width:100%;background:var(--accent-soft);border-radius:999px;padding:7px 16px;margin:0 0 18px;overflow-wrap:anywhere;font-size:.95em}
.tickrow{display:flex;align-items:flex-start;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line);cursor:pointer;font-weight:400}.tickrow input{width:22px;height:22px;margin-top:2px;flex:none;accent-color:var(--green)}.tickrow small{display:block;color:var(--muted);overflow-wrap:anywhere;font-weight:400}


/* White Elephant game tab (the first Home tab while the game is on; src/views/game.js) */
.gamepanel .gamecard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;margin:10px 0 14px;text-align:center}
.gamepanel .gamecard.live{border:2px solid var(--accent-ink)}
.gamepanel .glabel{margin:0;font-size:.8em;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--muted)}
.gamepanel .gname{margin:2px 0 0;font-size:2.4em;line-height:1.1;font-weight:900;color:var(--accent-ink);overflow-wrap:anywhere}
.gamepanel .gpick{margin:2px 0 12px;font-weight:700}
.gamepanel .gwait{margin:6px 0 14px;font-size:1.15em;font-weight:700}
.gamepanel .gamecam{margin:0}
.gamepanel .gamecam label{display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;width:100%;box-sizing:border-box}
.gamepanel .gamecam label.off{opacity:.45;pointer-events:none;cursor:default}
.gamepanel .gamecam input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.gamepanel .gwhy{margin:12px 0 0}
.gamepanel .h2s{margin:18px 0 6px;font-size:1.05em}
.gamepanel .gamepicks{list-style:none;margin:0;padding:0}
.gamepanel .gamepicks li{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px;margin:0 0 8px}
.gamepanel .gamepicks img{width:84px;height:64px;object-fit:cover;border-radius:8px;flex:none}
.gamepanel .gamepicks .tx{min-width:0}.gamepanel .gamepicks b{display:block}.gamepanel .gamepicks i{display:block;font-size:.88em;line-height:1.25;margin:2px 0}.gamepanel .gamepicks small{color:var(--muted)}
.gamepanel .gamerules ol{margin:6px 0 0;padding-left:1.3em}.gamepanel .gamerules li{margin:0 0 6px}
.gamepanel .gtrade{margin:10px 0 0;font-size:.95em}
.gamepanel .gameholders img{width:56px;height:42px}
/* White elephant admin: full-width action buttons, and one size for the small side buttons so they never wrap */
.btn.wide{width:100%;box-sizing:border-box}
.btn.wepill{min-width:8.5rem;min-height:2.75rem;white-space:nowrap;text-align:center;flex:none}
.gamepanel .gameresults .grade{flex:none;width:44px;height:44px;border-radius:50%;border:3px solid var(--accent-ink);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.5em;font-style:italic}
.gamepanel .gameresults .gA{background:#e2a31a;color:#0f3d22}
/* wish-list cards (v0.77): whole card is one tap target to the item's page; bigger photo, price and Top Pick star */
.witem>img{width:96px;height:96px}
@media(max-width:480px){.witem>img{width:80px;height:80px}}
.witem.tap{flex-wrap:nowrap;align-items:center;text-decoration:none;color:inherit}
.witem.tap .wbody{padding:12px 6px 12px 14px}.witem.tap .gift-actions{margin:4px 0 0}
.witem.tap .chev{flex:none;margin:0 14px 0 0;opacity:.5;font-size:1.4em}
.witem .wbody small.clamp{margin:0}.wprice{font-weight:600}
.star{color:var(--star,#c8921a)}
.wdetail-img{display:block;width:100%;max-height:60vh;object-fit:contain;background:var(--card);border:1px solid var(--line);border-radius:14px;margin:8px 0}
.wnote{white-space:pre-line;overflow-wrap:anywhere}
.wdetail .gift-actions{margin:14px 0}.wdetail .btn{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.curphoto{display:flex;flex-direction:column;gap:8px;margin:6px 0}.curphoto .preview-img{max-width:140px;max-height:140px;object-fit:contain;background:var(--card);border:1px solid var(--line);padding:4px}
/* wishlist pass 2 (v0.81): add pill row, Gift Notes card, two-line card titles, add/edit form pieces */
.witem .wbody>b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.closerow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0 10px;min-height:40px}
.closerow .pill{margin-left:auto;display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:9px 18px;font-size:1rem;text-decoration:none}
.closerow .addmore{display:none}@media (min-width:720px){.closerow .addmore{display:inline}}
.giftnotes{margin:10px 0}.giftnotes h2{margin:0 0 6px;font-size:1.1em}.giftnotes .wnote{margin:0}
.giftnotes .cardhead{align-items:center}.giftnotes .cardhead h2{margin:0}
.itemform textarea.grow{resize:none;overflow:hidden}
.edithead{display:flex;gap:12px;align-items:flex-start}.edithead>label{flex:1;min-width:0}
.edithead>img{flex:none;width:84px;height:84px;object-fit:contain;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:4px;box-sizing:border-box;margin-top:1.7em}
.pricerow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 18px}.pricerow>label:first-child{flex:0 1 8.5em}.pricerow .startoggle{margin:0 0 14px;white-space:nowrap}
.linkbox .openlink{display:inline-block;margin:2px 0 8px;font-size:.95em}.linkbox .openlink[hidden]{display:none}
.itemform .addlink{display:inline-flex;align-items:center;gap:6px;margin:4px 0 10px}
.photoblock{margin:10px 0}.photoblock .lbl{display:block;font-weight:600}.photoblock .hint{margin-bottom:6px}
.photorow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}.filebtn{cursor:pointer;margin:0}
.filename{overflow-wrap:anywhere;font-size:.9em}
.wdetail h1{font-size:1.35em;line-height:1.3;margin:.3em 0}
/* Back from an item page returns to #item-N; keep that card clear of the fixed band */
.witem,.list.people li{scroll-margin-top:90px}

/* Add Photos (past years): the batch uploader */
.archiveup progress{width:100%;height:14px;border-radius:7px;accent-color:var(--green);margin:14px 0 6px}
.archiveup .uptext{font-weight:700;margin:4px 0 8px}
.archiveup #upbad{margin:0 0 10px;padding-left:18px;font-size:.92em;color:var(--red)}
/* Admin: the archive grid */
.archgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:12px 0}
.archgrid figure{margin:0;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:6px}
.archgrid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;display:block}
.archgrid figcaption{font-size:.85em;line-height:1.3;color:var(--muted);overflow-wrap:anywhere}.archgrid figcaption b{color:var(--ink);display:block}
.archgrid form{margin:0}.archgrid .btn{width:100%}

/* White Elephant settings: one row per character (name on its own line on a phone, beside the controls on a wide screen); the voice and pace boxes are only as wide as their words */
.werow{padding:10px 0;border-bottom:1px solid var(--line)}.werow:last-of-type{border-bottom:0}
.werow .wname{font-weight:700;white-space:nowrap}
.werow .wctl{display:flex;align-items:flex-end;gap:8px;margin-top:4px}
.werow .wsel{display:block;margin:0;font-weight:400}.werow .wsel small{display:block;opacity:.65;font-size:.78rem;line-height:1.2}
.werow .wsel select{width:auto;min-width:0;max-width:100%;margin-top:2px;padding:8px 6px 8px 10px;font-size:.95em}
.werow .vplay{margin:0 0 1px;flex:none;padding-left:12px;padding-right:12px}
@media (min-width:640px){.werow{display:flex;align-items:flex-end;gap:16px}.werow .wname{width:9.5rem;padding-bottom:10px}.werow .wctl{margin-top:0}}
/* Admin → Photos: size choices, tick boxes, and the White Elephant flag */
.libacts{display:flex;gap:8px;flex-wrap:wrap}.libacts .btn{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}.libbar .libshow{flex:1 1 auto;min-width:0}.libbar .libshow select{width:100%}.libbar label{white-space:nowrap}body.senior .libbar{flex-wrap:wrap}body.senior .libbar .libshow{flex:1 1 100%}.libbar{display:flex;gap:10px;align-items:flex-end;margin:10px 0}.libbar label{margin:0;font-weight:600;font-size:.9em}.libbar select{width:auto;margin-top:2px}
.libtools{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}.libtools .btn{margin:0}.selbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:center;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--bar);border-top:1px solid var(--line);box-shadow:0 -2px 10px #0000001a}.selbar[hidden]{display:none}.selbar .btn{margin:0;width:100%;max-width:520px;display:inline-flex;align-items:center;justify-content:center}#libdel.hassel{padding-bottom:96px}
.archgrid.sm{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}.archgrid.lg{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.archgrid .pick{position:relative;display:block;margin:0;cursor:pointer}.archgrid .pick input{position:absolute;top:6px;left:6px;width:22px;height:22px;margin:0;z-index:2}
.archgrid .weflag{position:absolute;right:4px;bottom:4px;background:var(--amber-soft);color:var(--amber-ink);font-size:.7rem;font-weight:700;padding:1px 7px;border-radius:999px;line-height:1.4}
.archgrid.sm figure{padding:4px;gap:3px}.archgrid.sm figcaption,.archgrid.sm .libone{display:none}.archgrid.sm .weflag{font-size:.6rem;padding:0 5px}
.archgrid figcaption a{color:var(--accent-ink);font-weight:600}
/* First-visit tour (src/tour.js, public/js/tour.js): a centered card over a dim backdrop; the page behind does not scroll */
.tour{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));background:#000a}
.tour[hidden]{display:none}body.tourOpen{overflow:hidden}
.tourcard{width:min(440px,100%);max-height:100%;overflow:auto;background:var(--card);color:var(--fg);border-radius:20px;padding:22px 20px 18px;box-shadow:0 10px 40px #0007}
.tourh{margin:0 0 10px;font-size:1.3em;color:var(--accent-ink)}
.toursteps{list-style:none;margin:0;padding:0}.toursteps li[hidden]{display:none}.toursteps p{margin:.5em 0}.toursteps ol{margin:.5em 0;padding-left:1.3em}.toursteps li li{margin:.3em 0}
.tourtabs{display:flex;gap:8px;margin:6px 0 10px}.tourtabs span{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border:2px solid var(--line);border-radius:14px;font-size:.8em;font-weight:700;text-align:center;color:var(--accent-ink)}.tourtabs .ic{width:26px;height:26px;margin:0}
.tourdots{display:flex;justify-content:center;gap:8px;margin:14px 0 12px}.tourdots span{width:9px;height:9px;border-radius:50%;background:var(--line)}.tourdots span.on{background:var(--accent-ink)}
.tourbtns{display:flex;align-items:center;gap:10px}.tourgap{flex:1}.tourbtns .btn{min-height:48px;margin:0}.tourbtns button[hidden]{display:none}
body.senior .tourbtns .btn{min-height:56px}
/* My Family: the sign-in addresses card at the bottom */
.signins{margin-top:22px}.signins h2{margin:0 0 8px;font-size:1.1em}.signins ul{list-style:none;margin:0 0 8px;padding:0}.signins li{padding:4px 0;overflow-wrap:anywhere}.signins p{margin:6px 0 0}.signins a{color:var(--accent-ink);font-weight:700}
.signins .signask{margin:2px 0 0}.signins .signask a{display:inline-block;padding:6px 0}
.weplayers summary{list-style:none;min-height:44px;gap:10px}.weplayers summary::-webkit-details-marker{display:none}.weplayers summary h2{margin:0}.weplayers summary .ic{flex:none;margin:0;color:var(--muted);transition:transform .15s}.weplayers[open] summary .ic{transform:rotate(90deg)}.weplayers[open] summary{margin-bottom:4px}
.wenotice{border-color:var(--accent-ink)}.livedot{display:inline-block;width:10px;height:10px;margin-left:6px;border-radius:50%;background:var(--accent-ink);animation:livepulse 1.6s ease-in-out infinite}@keyframes livepulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}@media (prefers-reduced-motion:reduce){.livedot{animation:none}}
.gnlines p{margin:0 0 6px;overflow-wrap:anywhere}.gnlines p:last-child{margin-bottom:0}.gnlines .notelink{display:inline-flex;align-items:center;max-width:100%;margin:2px 8px 6px 0;text-align:left;overflow-wrap:anywhere;white-space:normal}
.tidy{margin:4px 0 12px}.tidy .muted{margin-left:8px}.tidybox{margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--accent-soft)}.tidybox .wnote{margin:6px 0;white-space:pre-line}.tidybox p{margin:8px 0 0}
.ideacard{margin:10px 0;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card)}.ideacard b{display:block;overflow-wrap:anywhere}.ideacard p{margin:4px 0 0;color:var(--muted);overflow-wrap:anywhere}.ideaacts{display:flex;gap:8px;margin-top:10px}.ideaadded{margin-top:10px;font-weight:700;color:var(--accent-ink)}
.who .whotx{display:flex;flex-direction:column;align-items:flex-start;text-align:left}.who .whotx small{display:block;font-size:.75em;font-weight:600;color:var(--on-accent);opacity:1;background:rgba(255,255,255,.22);padding:1px 9px;border-radius:999px;margin-top:3px}.setupnote{margin:14px 0}.setupnote p{margin:8px 0}.setupnote .btn{margin:4px 8px 4px 0}.setupnote[hidden]{display:none}
.statrows{list-style:none;margin:0;padding:0}.statrows li{padding:10px 0;border-top:1px solid var(--line)}.statrows li:first-child{border-top:0}.statrows b{overflow-wrap:anywhere}.statrows small{overflow-wrap:anywhere}.statrows .statline{display:block;margin-top:2px;color:var(--muted);font-size:.92em}
.daytable{width:100%;border-collapse:collapse}.daytable th,.daytable td{white-space:nowrap;padding:8px 4px;text-align:right}.daytable th:first-child,.daytable td:first-child{text-align:left;padding-left:0;width:100%}.daytable th{font-size:.85em}.daytable td{border-top:1px solid var(--line)}.daybar{height:6px;border-radius:3px;background:var(--accent-ink);margin-top:5px;opacity:.85}
/* the Dinner Menu page, laid out like a menu card (the text comes from the rich-text editor: a leading Heading is the title, the line after it the time and place) */
.menucard{margin:14px 0;padding:26px 20px 22px;background:var(--card);border:1px solid var(--line);border-radius:18px;text-align:center;box-shadow:inset 0 0 0 5px var(--card),inset 0 0 0 6px var(--gold)}
.menutop{padding-bottom:6px}.menutop::before{content:"\2726  \25C6  \2726";display:block;color:var(--gold);letter-spacing:.35em;font-size:.8em;margin-bottom:10px}
.menutitle{font-family:Georgia,"Times New Roman",serif;font-size:1.75em;line-height:1.15;font-weight:700;color:var(--accent-ink);margin:0;text-wrap:balance;overflow-wrap:anywhere}
.menumeta{margin:8px 0 0;color:var(--muted);font-size:.95em;letter-spacing:.04em}
.menutop::after{content:"";display:block;width:56%;max-width:240px;height:1px;margin:16px auto 6px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.menucard .menubody{background:none;border:0;padding:0;margin:0;text-align:center}
.menubody ul,.menubody ol{list-style:none;padding:0;margin:.4em 0 1em}.menubody li{font-family:Georgia,"Times New Roman",serif;font-size:1.18em;font-weight:600;line-height:1.3;margin:0;padding:.85em 0}
.menubody li{position:relative}.menubody li+li::before{content:"\25C6";position:absolute;left:50%;top:0;transform:translate(-50%,-50%);color:var(--gold);font-size:.42em;line-height:1}   /* the diamond sits exactly on the line between two dishes */
.menubody h2,.menubody h3{display:flex;align-items:center;gap:12px;font-family:Georgia,"Times New Roman",serif;font-size:.95em;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:var(--accent-ink);margin:1.4em 0 .3em}
.menubody h2::before,.menubody h2::after,.menubody h3::before,.menubody h3::after{content:"";flex:1;height:1px;background:var(--line)}
.menubody p{margin:.8em 0 0;font-size:.85em;font-style:italic;color:var(--muted);line-height:1.45}