/* Occasi couple's dashboard (v187, Stage 1). The approved v3 design: editorial black type with a marigold accent,
   a floating dock that becomes a bottom tab bar on phones, the guest mirror beside the content on desktop.
   Phone first. Every colour, size and radius is a token below, shared with the January app. */
@font-face{font-family:'Occasi Sans';src:url('../assets/fonts/dm-sans-latin.woff2') format('woff2');font-weight:100 1000;font-display:swap}
@font-face{font-family:'Occasi Serif';src:url('../assets/fonts/cormorant-latin.woff2') format('woff2');font-weight:300 700;font-display:swap}
:root{
  --bg:#fbfbf8;--paper:#ffffff;--ink:#1c1c1c;--ink2:#3a3a37;--muted:#5b5b57;--line:#dcdcd4;--line2:#ecebe4;--field:#8f8f86;
  --mari:#d4921f;--mari-ink:#7a4e08;--mari-soft:#fbf0d9;
  --yes:#1c1c1c;--no:#c9a46a;--wait:#e4e3dc;--ok:#2d5634;--ok-soft:#e5efe6;--bad:#8a1f1f;--bad-soft:#fbe9e7;
  --mirror-bg:#f3f2ec;
  --serif:'Occasi Serif',Georgia,'Times New Roman',serif;--sans:'Occasi Sans',Arial,Helvetica,sans-serif;
  --mirror:420px;--r:14px;--r-sm:10px;--pill:30px;--tap:44px;--gutter:16px;--top:60px;--dock-h:68px;
  --shadow:0 10px 30px #1c1c1c1f
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:15px/1.55 var(--sans);min-height:100vh;overflow-x:hidden}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--mari);outline-offset:3px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.i{width:1.2em;height:1.2em;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--ink);color:#fff;padding:0 14px;min-height:44px;display:inline-flex;align-items:center;border-radius:8px}
.skip:focus{left:8px}

/* ---------- shell (phone first) ---------- */
.shell{display:grid;grid-template-columns:minmax(0,1fr);min-height:100vh;min-height:100dvh}
.main{min-width:0;padding:0 var(--gutter) calc(var(--dock-h) + 90px)}
.top{display:flex;align-items:center;gap:8px;height:var(--top);position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line2);margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter)}
.brand{display:inline-flex;align-items:center;min-height:var(--tap);font:500 24px/1 var(--sans);letter-spacing:-.07em;text-decoration:none;color:var(--ink)}
.couple-chip{display:none;font:500 18px/1 var(--serif);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.search{display:none}
.icon-btn{display:grid;flex:none;place-items:center;width:var(--tap);height:var(--tap);border-radius:50%;border:1px solid var(--line);background:var(--paper);font-size:19px;text-decoration:none;color:var(--ink)}
.avatar{width:var(--tap);height:var(--tap);border-radius:50%;border:1px solid var(--ink);display:grid;place-items:center;text-decoration:none;font:600 13px var(--sans);flex:none;background:var(--paper);color:var(--ink);padding:0}
.avatar[aria-expanded=true]{background:var(--ink);color:#fff}
.mirror-fab{display:flex;margin-left:auto;align-items:center;gap:8px;min-height:var(--tap);padding:0 14px 0 6px;border-radius:var(--pill);background:var(--ink);color:#fff;border:0;font-weight:600;font-size:13.5px;white-space:nowrap}
.mirror-fab .eye{width:32px;height:32px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center}
/* v270: at 320px (small Android, or large text) the account button ran past the right edge. Tighten the top bar there. */
@media (max-width:359px){
  .top{gap:4px}
  .brand{font-size:21px}
  .mirror-fab{padding:0 12px}
  .embed .qr-downloads{grid-template-columns:minmax(0,1fr)}
}

/* dock: a bottom tab bar on phones, floating pill on desktop */
.dock{position:fixed;z-index:30;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;background:var(--paper);border-top:1px solid var(--line);padding:4px 4px calc(6px + env(safe-area-inset-bottom))}
.dock a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;border-radius:14px;text-decoration:none;font-weight:500;font-size:11.5px;color:var(--ink);position:relative}
.dock a svg.i{font-size:20px}
.dock a[aria-current=page]{background:var(--ink);color:#fff}
.dock .ext{position:absolute;top:6px;right:calc(50% - 22px);width:6px;height:6px;border-radius:50%;background:var(--mari)}

/* page head */
.head{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:20px 0 14px;border-bottom:2px solid var(--ink)}
.head h1{font:500 38px/1.02 var(--serif);letter-spacing:-.02em}
.head h1 em{font-style:italic;color:var(--mari-ink)}
.head p{color:var(--muted);font-size:14.5px;margin-top:8px}
.head .actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;width:100%;justify-content:space-between}
.saved{font-size:13px;color:var(--muted);display:flex;align-items:flex-start;gap:6px;max-width:340px}
.saved svg.i{color:var(--ok);font-size:16px;margin-top:2px}
.saved b{color:var(--ink);font-weight:600}
.live-note{font-size:13px;color:var(--muted);margin-top:8px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:var(--pill);border:1px solid var(--ink);background:var(--ink);color:#fff;text-decoration:none;font-weight:600;font-size:14.5px;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.ghost{background:var(--paper);color:var(--ink);border-color:var(--line)}
.btn.small{min-height:var(--tap);padding:0 16px;font-size:14px}
.btn.danger{background:var(--paper);color:var(--bad);border-color:#e3b4ae}
.link{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--tap);min-width:var(--tap);color:var(--mari-ink);font-weight:600;font-size:14px;text-underline-offset:4px;background:none;border:0;padding:0 2px;text-decoration:underline;text-decoration-color:#7a4e0855}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 14px;border-radius:var(--pill);border:1px solid var(--line);background:var(--paper);font-size:13.5px;color:var(--ink);text-decoration:none;white-space:nowrap}
.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip .n{font-variant-numeric:tabular-nums;opacity:.85}
.flag{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 14px;background:var(--mari-soft);color:var(--mari-ink);border-radius:var(--pill);font-weight:600;font-size:13.5px;text-decoration:none;border:0}
.tag{display:inline-flex;align-items:center;gap:5px;font:600 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:4px;background:var(--line2);color:var(--ink2)}
.tag.mari{background:var(--mari-soft);color:var(--mari-ink)}
.tag.ok{background:var(--ok-soft);color:var(--ok)}
.tag.bad{background:var(--bad-soft);color:var(--bad)}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}

/* sections */
.sec{margin-top:30px}
.sec-h{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:14px}
.sec-h h2{font:500 26px/1.05 var(--serif)}
.sec-h p{color:var(--muted);font-size:14px}
h3{font:500 22px/1.15 var(--serif)}
.muted{color:var(--muted)}
.small{font-size:13px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:18px}

/* concierge messages */
.needs{display:grid;margin-top:16px}
.msg{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;padding:16px 0;border-top:1px solid var(--line)}
.msg:first-child{border-top:0}
.msg .av{width:32px;height:32px;border-radius:50%;background:var(--mari-soft);color:var(--mari-ink);display:grid;place-items:center;font-size:16px}
.msg .k{font:600 11.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mari-ink)}
.msg p{font-size:16px;line-height:1.5;margin-top:5px;overflow-wrap:anywhere}
.msg .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center}
.msg .note{font-size:13px;color:var(--muted)}
.msg.calm .av{background:var(--ok-soft);color:var(--ok)}
.msg.calm .k{color:var(--ok)}

/* first run */
.firstrun{margin-top:18px;border:1px solid var(--ink);border-radius:var(--r);padding:18px;background:var(--paper)}
.firstrun h2{font:500 24px/1.1 var(--serif)}
.firstrun ol{margin:12px 0 0;padding-left:20px;display:grid;gap:6px;font-size:14.5px}
.firstrun .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* link-stage line */
.horizon{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;margin-top:6px}
.horizon .rule{position:absolute;left:0;right:0;top:38px;border-top:1px solid var(--ink)}
.horizon .past{position:absolute;left:0;top:37px;border-top:3px solid var(--ink)}
.mk{position:relative;display:grid;justify-items:center;align-content:start;text-align:center;background:none;border:0;padding:0 2px;min-height:var(--tap);color:var(--ink)}
.mk small{font-size:11px;color:var(--muted);min-height:16px}
.mk .pin{width:16px;height:16px;border-radius:50%;background:var(--bg);border:2px solid var(--ink);margin:10px 0 8px}
.mk.done .pin{background:var(--ink)}
.mk.now .pin{width:26px;height:26px;margin:5px 0 3px;background:var(--mari);border-color:var(--mari);box-shadow:0 0 0 6px var(--mari-soft)}
.mk strong{font:500 15px/1.1 var(--serif)}
.mk span{font-size:11px;color:var(--muted)}
.mk:hover strong{text-decoration:underline;text-underline-offset:4px}

/* weekend */
.days{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line)}
.day{padding:14px 0 18px;border-bottom:1px solid var(--line);min-width:0}
.day h3{font:600 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.day h3 b{font:500 28px/1 var(--serif);letter-spacing:0;text-transform:none;color:var(--ink);margin-right:8px}
.evrow{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.ev{border-left:4px solid var(--c,var(--ink));padding:2px 0 4px 16px;min-width:0}
.ev .t{font-size:13px;color:var(--muted)}
.ev h4{font:500 26px/1.05 var(--serif);margin:2px 0 3px;overflow-wrap:anywhere}
.ev h4 a{text-decoration:none;display:inline-flex;align-items:center;min-height:var(--tap)}
.ev h4 a:hover{text-decoration:underline;text-underline-offset:4px}
.ev .v{font-size:13.5px;color:var(--muted);margin-bottom:10px;overflow-wrap:anywhere}
.big{display:flex;align-items:baseline;gap:8px}.big b{font:500 38px/1 var(--serif)}.big span{color:var(--muted);font-size:13px}
.meter{display:flex;height:6px;background:var(--wait);margin:8px 0 6px;border-radius:3px;overflow:hidden}.meter .y{background:var(--yes)}.meter .n{background:var(--no)}
.ev .sub{font-size:12.5px;color:var(--muted)}
.ev .todo{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ok-line{display:inline-flex;align-items:center;gap:6px;margin-top:10px;min-height:var(--tap);font-size:13px;color:var(--muted)}
.ok-line svg.i{color:var(--ok)}
.legend{display:flex;gap:16px;font-size:13px;color:var(--muted);margin-top:12px;flex-wrap:wrap}.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}

.checklist{list-style:none;padding:0}
.checklist li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:14px;align-items:baseline}
.checklist li b{font:500 18px/1 var(--serif)}
.checklist li.done{color:var(--muted)}
.checklist li.done span{text-decoration:line-through}
.checklist li.now b{color:var(--mari-ink)}

/* ---------- mirror ---------- */
.mirror{display:none}
.pickers{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;align-self:stretch}
.pick{display:grid;gap:1px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:6px 10px 4px;position:relative;min-width:0}
.pick span{font-size:11.5px;color:var(--muted)}
.pick select{appearance:none;-webkit-appearance:none;border:0;background:transparent;font-weight:600;font-size:14px;min-height:44px;margin:-6px 0 -4px;padding-right:18px;width:100%;min-width:0;text-overflow:ellipsis}
.pick::after{content:"";position:absolute;right:12px;bottom:16px;width:7px;height:7px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);pointer-events:none}
/* v285 (tester 2 S4): "Skip the opening" is a tick box, not a dropdown: no arrow over its words, the box and words on one line */
.pick.pick-skip{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 10px;cursor:pointer}
.pick.pick-skip::after{content:none}
.pick.pick-skip input{width:18px;height:18px;margin:0;flex:none}
.pick.pick-skip span{font-size:13px;color:var(--ink)}
.device{position:relative;flex:1;min-height:0;aspect-ratio:390/844;max-width:100%;border-radius:42px;border:10px solid var(--ink);overflow:hidden;background:#fff;box-shadow:0 24px 50px #1c1c1c26}
.device iframe{position:absolute;left:0;top:0;width:390px;height:844px;border:0;transform-origin:0 0;background:#fff}
.device img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.device .fallback{position:absolute;left:8px;right:8px;bottom:8px;background:#1c1c1cd9;color:#fff;font-size:12px;padding:6px 10px;border-radius:10px}
.cap{font-size:12.5px;color:var(--muted);text-align:center;max-width:340px;align-self:center}
dialog.msheet{border:0;padding:0;max-width:none;max-height:none;width:100vw;height:100dvh;background:var(--mirror-bg)}
dialog.msheet::backdrop{background:#1c1c1c55}
.msheet .in{display:flex;flex-direction:column;gap:10px;height:100%;padding:12px 16px 16px}
.msheet .bar{display:flex;justify-content:space-between;align-items:center}
.msheet .bar h2{font:500 22px var(--serif)}
.close{flex:none;width:var(--tap);height:var(--tap);border-radius:50%;border:1px solid var(--line);background:var(--paper);display:grid;place-items:center;font-size:20px;color:var(--ink)}
.msheet .device{align-self:center;border-width:8px;border-radius:34px}
/* v199: Desktop | Mobile above the guest page; the desktop frame is a 16:10 screen with the page at 1280 x 800, scaled */
.devsw{display:flex;gap:3px;align-self:center;padding:3px;border-radius:26px;background:var(--paper);border:1px solid var(--line)}
.devsw button{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 16px;border:0;border-radius:22px;background:transparent;color:var(--muted);font-weight:600;font-size:13.5px}
.devsw button svg{width:18px;height:18px}
.devsw button[aria-pressed="true"]{background:var(--ink);color:#fff}
.device.is-desktop{flex:none;width:100%;max-width:100%;aspect-ratio:1280/800;border-radius:12px;border-width:8px;border-bottom-width:14px}
.msheet .device.is-desktop{border-radius:10px;border-width:6px;border-bottom-width:10px}

/* ---------- sheets (dialogs) ---------- */
dialog.sheet{border:0;padding:0;margin:auto auto 0;width:100%;max-width:640px;max-height:92dvh;border-radius:20px 20px 0 0;background:var(--paper);color:var(--ink);box-shadow:0 -10px 40px #1c1c1c33}
dialog.sheet::backdrop{background:#1c1c1c66}
.sheet .in{display:flex;flex-direction:column;max-height:92dvh}
.sheet .bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line2)}
.sheet .bar h2{font:500 24px/1.1 var(--serif)}
.sheet .body{overflow-y:auto;overflow-x:hidden;padding:16px;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-content:start}
.sheet .foot{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line2)}
.preview-text{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:14.5px;white-space:pre-wrap;overflow-wrap:anywhere}
.cost{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--mari-soft);border-radius:12px;padding:12px 16px;font-size:14.5px;flex-wrap:wrap}
.cost b{font-weight:700}
.warn{background:var(--bad-soft);color:var(--bad);border-radius:12px;padding:12px 14px;font-size:14px}
.okbox{background:var(--ok-soft);color:var(--ok);border-radius:12px;padding:12px 14px;font-size:14px}
/* v280: "Guests can’t change their reply themselves" with its own switch (Guests and the check before publishing) */
.chg-slot:empty{display:none}
.chg-line{margin:12px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.chg-line .btn{margin-left:4px;vertical-align:baseline}
.chg-line small{display:block;margin-top:6px;color:var(--muted);font-size:13px}
.who{list-style:none;padding:0;max-height:240px;overflow:auto;border:1px solid var(--line2);border-radius:12px}
.who li{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;border-top:1px solid var(--line2);font-size:13.5px}
.who li:first-child{border-top:0}
.who li small{color:var(--muted);text-align:right}

/* ---------- forms ---------- */
.form{display:grid;gap:14px}
.field{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;min-width:0}
.field label,.field .lab{font-size:14px;font-weight:600;color:var(--ink2)}
.field .help{font-size:13.5px;color:var(--muted)}
.in-t{min-height:46px;border:1px solid var(--field);border-radius:var(--r-sm);background:var(--paper);padding:10px 12px;font-size:16px;width:100%;min-width:0}
/* v270: iPhone Safari gives date and time fields a built-in width that ignored width:100% and ran past the right edge
   (owner, iPhone, "See it with your names"). Strip the native box so they size like every other field. */
input[type=date],input[type=time],input[type=datetime-local],input[type=month]{-webkit-appearance:none;appearance:none;display:block;box-sizing:border-box;width:100%;max-width:100%;min-width:0;min-height:46px}
input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value,input[type=datetime-local]::-webkit-date-and-time-value{text-align:left;min-height:1.2em}
textarea.in-t{min-height:110px;resize:vertical;line-height:1.5}
select.in-t{appearance:auto}
.row2{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
.checks{display:flex;flex-wrap:wrap;gap:6px}
.checks label{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);padding:0 12px;border:1px solid var(--line);border-radius:var(--pill);font-size:13.5px;background:var(--paper)}
.checks input{width:18px;height:18px;accent-color:var(--ink)}
.err{color:var(--bad);font-size:13.5px}

/* ---------- guests ---------- */
.gtools{display:grid;gap:14px;margin-top:16px}   /* v270b: 14px between the search, the filter box, the totals and the chips (10px read as touching) */
.gsearch{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 14px;border:1px solid var(--field);border-radius:var(--r-sm);background:var(--paper);color:var(--muted)}
.gsearch input{border:0;background:transparent;flex:1;min-width:0;min-height:44px;font-size:16px;color:var(--ink)}
.gsearch input:focus{outline:none}
.gsearch:focus-within{outline:3px solid var(--mari);outline-offset:2px}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) 2px}
.chips::-webkit-scrollbar{display:none}
.gactions{display:flex;gap:8px;flex-wrap:wrap}
.gactions-lab{flex-basis:100%;font-weight:600;font-size:14px}
/* v270: an action row straight after fields sat flush against the last box (owner, "See it with your names"). */
.form+.gactions,.field+.gactions,.row2+.gactions{margin-top:20px}
/* v271b: an action row after a link box, a list or a line of text sat 0-10px below it (Share, Budget, On the day). */
:where(* + .gactions){margin-top:14px}
.tl-list+[data-tl-add]{margin-top:14px}
/* v270: phone button rows no longer wrap unevenly. Two buttons share the row equally; three or more stack full width,
   the main (filled) one first; plain text links sit on their own line. */
@media (max-width:759px){
  .gactions{display:grid;grid-template-columns:minmax(0,1fr)}
  @media (min-width:421px){.gactions:has(> .btn:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
  .gactions>.btn{width:100%;justify-content:center}
  .gactions>.btn:not(.ghost){order:-1}
  .gactions>.link{justify-self:start}
}
.gsplit{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:14px}
.hh-head{display:flex;justify-content:space-between;align-items:center;padding:6px 4px;font-size:12.5px;color:var(--muted);gap:10px}
.hh-head .codes{display:flex;gap:var(--dg,3px)}
.hh-head .codes span{width:var(--dw,18px);text-align:center;font-weight:600}
.hh{list-style:none;padding:0}
.hh li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:stretch;border-top:1px solid var(--line)}
.hh .sel{display:grid;place-items:center;width:var(--tap);min-height:68px}
.hh .sel input{width:20px;height:20px;accent-color:var(--ink)}
.hh .open{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;width:100%;text-align:left;min-height:68px;padding:10px 8px 10px 0;border:0;background:none;color:var(--ink)}
.hh li[aria-current=true]{background:var(--paper);box-shadow:inset 3px 0 0 var(--mari)}
.hh b{font-weight:600;font-size:15px;overflow-wrap:anywhere}
.hh small{color:var(--muted);font-size:12.5px;display:block}
.evdots{display:flex;gap:var(--dg,3px);justify-content:flex-end;flex-wrap:nowrap}
.evdots i{width:var(--dw,18px);height:var(--dw,18px);border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:700;border:1.5px solid var(--c);color:var(--ink)}
.evdots i.y{background:color-mix(in srgb,var(--c) 24%,#fff)}
.evdots i.n{background:var(--paper);color:var(--muted)}
.evdots i.w{border-style:dashed;color:var(--muted)}
.evdots i.x{visibility:hidden}
.more-row{padding:12px 4px}
.detail{min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:18px;align-self:start}
.detail h3{font-size:28px;overflow-wrap:anywhere}
.detail .empty{color:var(--muted)}
.rtable{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:8px}
.rtable th,.rtable td{text-align:left;padding:8px 6px 8px 0;border-top:1px solid var(--line2);vertical-align:top;overflow-wrap:anywhere}
.rtable th{font-size:12px;color:var(--muted);font-weight:500;border-top:0}
.rtable td .dot{margin-right:6px;vertical-align:0}
.rtable select{max-width:100%}
.facts{display:grid;gap:6px;margin:12px 0;font-size:13.5px}
.facts div{display:flex;gap:8px;align-items:flex-start}
.facts svg.i{margin-top:2px;color:var(--muted)}
.linkbox{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--r-sm);padding:4px 4px 4px 12px;font-size:13px;color:var(--muted);min-height:50px}
.linkbox span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dactions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.status-line{font-size:13px;color:var(--muted);margin-top:10px}
.selbar{position:fixed;left:0;right:0;bottom:calc(var(--dock-h) + env(safe-area-inset-bottom));z-index:25;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--ink);color:#fff;padding:10px var(--gutter)}
.selbar .btn{background:#fff;color:var(--ink);border-color:#fff}
.selbar .btn.ghost{background:transparent;color:#fff;border-color:#ffffff66}

/* numbers & exports */
.num-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.num{border-left:4px solid var(--c,var(--ink));padding:4px 0 4px 14px}
.num h4,.num h2{font:500 22px/1.1 var(--serif)}
.num dl{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:4px 14px;font-size:13.5px;margin-top:8px}
.num dt{color:var(--ink2)}.num dd{font-variant-numeric:tabular-nums;text-align:right;font-weight:600}
.num dd.num-ages{grid-column:1/-1;text-align:left;font-weight:400;color:var(--ink2);margin-top:-2px}.num dt a{display:inline-block;padding:3px 0;min-height:24px}   /* v285: ages under Attending; a 24 px target */
.exports{list-style:none;padding:0}
.exports li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.exports li .ic{width:40px;height:40px;border-radius:50%;background:var(--line2);display:grid;place-items:center;font-size:19px}
.exports li b{font-weight:600}.exports li small{display:block;color:var(--muted);font-size:13px}
.exports li .go{grid-column:2;display:flex;gap:8px;flex-wrap:wrap}

/* import */
.imp-table{width:100%;border-collapse:collapse;font-size:13px}
.imp-table th,.imp-table td{border-top:1px solid var(--line2);padding:6px 6px 6px 0;text-align:left;vertical-align:top}
.imp-table input{width:100%;min-width:90px;min-height:var(--tap);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:14px}
.imp-wrap{overflow-x:auto;border:1px solid var(--line2);border-radius:12px;padding:0 8px}
.imp-row.bad td{background:var(--bad-soft)}
.imp-row .why{color:var(--bad);font-size:12px}

/* account sheet + search */
.acct{list-style:none;padding:0}
.acct li a,.acct li button{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center;width:100%;min-height:60px;padding:8px 0;border:0;border-top:1px solid var(--line);background:none;text-align:left;text-decoration:none;color:var(--ink)}
.acct .ic{width:40px;height:40px;border-radius:50%;background:var(--line2);display:grid;place-items:center;font-size:19px}
.acct b{font-weight:600;display:block}.acct small{color:var(--muted);font-size:13px}
.results{list-style:none;padding:0}
.results li a,.results li button{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:center;width:100%;min-height:52px;padding:6px 4px;border:0;border-top:1px solid var(--line2);background:none;text-align:left;color:var(--ink);text-decoration:none}
.results small{display:block;color:var(--muted);font-size:12.5px}
.results .grp{font:600 11.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:12px 4px 6px}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--dock-h) + 18px + env(safe-area-inset-bottom));z-index:60;background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px;font-size:14px;max-width:calc(100vw - 32px);box-shadow:var(--shadow)}
.demo-band{background:var(--mari-soft);color:var(--mari-ink);font-size:13px;padding:8px var(--gutter);text-align:center}
.loading{padding:60px 0;color:var(--muted)}
.qr-card{display:grid;justify-items:center;gap:8px;text-align:center}
.qr-card svg{width:220px;height:220px}

/* ---------- desktop ---------- */
@media (min-width:760px){
  .hh{--dw:22px;--dg:5px}.hh-head{--dw:22px;--dg:5px}
  .row2{grid-template-columns:1fr 1fr}
  .num-grid{grid-template-columns:1fr 1fr}
  .chips{margin:0;padding:0;flex-wrap:wrap;overflow:visible}
  dialog.sheet{margin:auto;border-radius:20px;max-height:86dvh}
  .sheet .in{max-height:86dvh}
}
@media (min-width:1101px){
  :root{--top:72px;--dock-h:0px}
  .shell{grid-template-columns:minmax(0,1fr) var(--mirror)}
  body.no-mirror .shell{grid-template-columns:minmax(0,1fr)}
  body.mirror-desktop{--mirror:clamp(420px,42vw,760px)}
  .main{padding:0 48px 130px}
  .top{margin:0 -48px;padding:0 48px;gap:20px}
  .couple-chip{display:block}
  .search{flex:1;max-width:460px;margin-left:auto;display:flex;align-items:center;gap:10px;min-height:var(--tap);padding:0 16px;border:1px solid var(--line);border-radius:var(--pill);background:var(--paper);color:var(--muted);font-size:14px;text-align:left}
  .search kbd{margin-left:auto;font:12px var(--sans);border:1px solid var(--line);border-radius:4px;padding:1px 6px;color:var(--muted)}
  .icon-btn.search-btn,.mirror-fab{display:none}
  .dock{left:calc((100vw - var(--mirror)) / 2);right:auto;bottom:18px;transform:translateX(-50%);display:flex;gap:4px;border:1px solid var(--ink);border-radius:40px;padding:5px;box-shadow:var(--shadow)}
  body.no-mirror .dock{left:50%}
  .dock a{flex-direction:row;gap:8px;min-height:46px;padding:0 18px;border-radius:var(--pill);font-size:15px}
  .dock .ext{top:8px;right:8px}
  .head{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:24px;padding:30px 0 16px}
  .head h1{font-size:52px;line-height:1}
  .head .actions{width:auto;justify-content:flex-end;flex:none}
  .sec{margin-top:34px}
  .sec-h{flex-direction:row;align-items:baseline;justify-content:space-between;gap:16px}
  .sec-h h2{font-size:30px}
  .msg{grid-template-columns:40px minmax(0,1fr);gap:14px;padding:18px 0}
  .msg .av{width:40px;height:40px;font-size:19px}
  .msg p{font-size:17px}
  .horizon{height:130px;display:block}
  .horizon .rule{top:60px}.horizon .past{top:59px}
  .mk{position:absolute;top:0;left:var(--x);transform:translateX(-50%);width:170px}
  .mk small{height:22px;font-size:12.5px}.mk .pin{margin:29px 0 10px}.mk.now .pin{margin:24px 0 5px}
  .mk strong{font-size:19px}.mk span{font-size:12px}
  .days{grid-template-columns:repeat(var(--days,3),minmax(0,1fr));gap:26px}
  .day{border-bottom:0;padding:14px 0 0}
  .evrow{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:20px}
  .ev h4{font-size:28px}
  .mirror{position:sticky;top:0;height:100vh;border-left:1px solid var(--line);background:var(--mirror-bg);display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 30px 18px;overflow:hidden}
  .mirror h2{align-self:stretch;font:500 22px/1.1 var(--serif);display:flex;justify-content:space-between;align-items:center}
  .mirror h2 small{font:12.5px var(--sans);color:var(--muted)}
  .gtools{grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .gtools .chips{grid-column:1/-1}
  .gsplit{grid-template-columns:minmax(0,1fr) 360px;gap:24px}
  .detail{position:sticky;top:90px;max-height:calc(100vh - 110px);overflow:auto}
  .selbar{left:calc((100vw - var(--mirror)) / 2);right:auto;transform:translateX(-50%);bottom:90px;border-radius:40px;padding:8px 8px 8px 20px;box-shadow:var(--shadow)}
  .toast{left:calc((100vw - var(--mirror)) / 2);bottom:96px}
  body.no-mirror .toast,body.no-mirror .selbar{left:50%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* the unchanged SMS send sheet (js/occasi-studio-sms.js) inside the dashboard's own sheet */
.sms-host{display:grid;gap:12px;border-top:1px solid var(--line2);padding-top:12px}
.sms-host .eyebrow{font:600 11.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mari-ink)}
.sms-host .sheet-title,.sms-host h2,.sms-host h3{font:500 22px/1.15 var(--serif)}
.sms-host .sms-preview{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:14px 16px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14.5px}
.sms-host .sms-note,.sms-host .sheet-who,.sms-host .sms-from,.sms-host .sms-phone{font-size:13.5px;color:var(--muted)}
.sms-host .sms-error{color:var(--bad);font-size:14px}
.sms-host .text-invite-cost{background:var(--mari-soft);border-radius:12px;padding:12px 14px;font-weight:600}
.sms-host .sms-consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;min-height:var(--tap)}
.sms-host .sms-consent input{width:20px;height:20px;margin-top:2px;accent-color:var(--ink);flex:none}
.sms-host .field{display:grid;gap:6px}
.sms-host select,.sms-host input:not([type=checkbox]):not([type=radio]){min-height:var(--tap);border:1px solid var(--field);border-radius:var(--r-sm);padding:8px 10px;background:var(--paper);font-size:16px;max-width:100%}
.sms-host .form-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.sms-host .button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:var(--pill);border:1px solid var(--ink);background:var(--ink);color:#fff;font-weight:600;font-size:14.5px}
.sms-host .button.secondary{background:var(--paper);color:var(--ink);border-color:var(--line)}
.sms-host .button[disabled]{opacity:.5;cursor:not-allowed}
.sms-host .text-link{background:none;border:0;padding:0 2px;min-height:var(--tap);color:var(--mari-ink);font-weight:600;text-decoration:underline}
.sms-host .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sms-host .sheet-remind,.sms-host .sheet-review,.sms-host .sheet-days{display:grid;gap:8px}
.saved.err{color:var(--bad)}
dialog.sheet.wide{max-width:820px}
#studio-dialog .bar span{flex:1}
.sms-host fieldset{border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;gap:8px;min-width:0}
.sms-host legend{padding:0 6px;font-weight:600;font-size:14px}
.sms-host details summary{min-height:var(--tap);display:flex;align-items:center;cursor:pointer;font-size:14px}
.rtable .dot{margin-right:8px}
#reply-form fieldset:has(input[value="no"]:checked) .evs,#reply-form fieldset:has(input[value=""]:checked) .evs{display:none}

/* ================================================================ Stage 2 (v188): the Film and Pass editors ==== */
/* phone first; the same tokens as above. Approved look: output/dashboard-redesign-v3/final/film.html, pass-*.html */
.saved-slot{display:contents}
.measure{max-width:62ch}
.tell-slot:empty{display:none}
.tell-slot{position:sticky;top:calc(var(--top) + 8px);z-index:15;margin-top:14px}
.changed{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;background:var(--mari-soft);border:1px solid #e7c98d;border-radius:var(--r);padding:12px 14px;box-shadow:var(--shadow)}
.changed>svg.i{font-size:22px;color:var(--mari-ink);margin-top:2px}
.changed b{font-weight:700}
.changed p{font-size:14px;margin-top:4px}
.tell-lines{margin:6px 0 0;padding-left:18px;font-size:14px}
.changed .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;align-items:center}
/* the design and the scene strip */
.design-row{display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.design-row img,.design-ph{width:84px;height:105px;object-fit:cover;object-position:center 30%;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;background:var(--line2)}
.design-row h3{font-size:24px;margin-top:6px}
.design-row>.btn{grid-column:1/-1;justify-self:start}
.scenes{display:grid;grid-auto-flow:column;grid-auto-columns:104px;gap:8px;overflow-x:auto;scrollbar-width:none;margin:16px calc(-1 * var(--gutter)) 0;padding:4px var(--gutter) 6px}
.scenes::-webkit-scrollbar{display:none}
.scene{display:grid;gap:6px;justify-items:center;text-align:center;text-decoration:none;color:var(--ink);padding:6px 4px;border-radius:14px;min-height:var(--tap)}
.scene b{font-size:12.5px;font-weight:600;line-height:1.25}.scene small{font-size:11.5px;color:var(--muted)}
.scene[aria-current=true]{background:var(--paper);box-shadow:0 0 0 1px var(--line)}
.sthumb{width:84px;aspect-ratio:390/600;border-radius:10px;border:3px solid transparent;box-shadow:0 0 0 1px var(--line);background:var(--tp,#f5f1ea);color:var(--ti,#2b2f45);display:grid;align-content:center;justify-items:center;gap:2px;padding:6px;overflow:hidden;font:500 11px/1.1 var(--serif)}
.scene[aria-current=true] .sthumb{border-color:var(--mari)}
.sthumb.is-img{padding:0}.sthumb.is-img img{width:100%;height:100%;object-fit:cover;object-position:top}
.sthumb .k{font:600 6.5px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ti,#2b2f45);font-style:normal}
.sthumb b{font:italic 500 13px/1 var(--serif);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sthumb .ln{display:block;width:100%;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-top:1px solid #0000001a;padding-top:2px}
.sthumb .dots{display:grid;grid-template-columns:repeat(3,14px);gap:4px}.sthumb .dots em{width:14px;height:14px;border-radius:50%;background:var(--ta,#9c7a46);opacity:.55}
.sthumb .q{white-space:normal;text-align:center;font-size:12px}.sthumb .bt{width:52px;height:10px;border-radius:6px;background:var(--ti,#2b2f45);margin-top:4px}
.ed-sec{margin-top:24px}
.ed-sec .sec-h h2{font-size:24px}
.ed-form,.ed-sec .form{display:grid;gap:14px}
.ed-h3{margin-top:18px}
/* switches */
.switch{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:56px;padding:6px 0;border-top:1px solid var(--line2)}
.switch>span{min-width:0}
.switch b{font-weight:600;font-size:14.5px;display:block}.switch small{display:block;color:var(--muted);font-size:13px}
.switch small.pending{color:var(--mari-ink)}
/* v190: "Lost your link?" cost and state under its switch */
.ed-note{margin-top:4px;padding:10px 12px;border:1px solid var(--line2);border-radius:12px;font-size:13px;color:var(--muted)}
.ed-note p{margin:0}.ed-note p+p{margin-top:6px}.ed-note b{color:var(--ink);font-weight:600}
.ed-note .relink-state{color:var(--ink)}
.tog{width:52px;height:30px;border-radius:22px;background-color:#8f8f86;position:relative;flex:none;border:7px solid transparent;background-clip:padding-box;box-sizing:content-box;padding:0}
.tog::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:left .2s}
.tog[aria-checked=true]{background-color:var(--ink)}.tog[aria-checked=true]::after{left:25px}
.tog[disabled]{opacity:.45;cursor:not-allowed}
/* chapters, people and photos */
.chapter,.person-ed{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:16px 0;border-top:1px solid var(--line2)}
.photo-ed{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:start}
.pframe{display:grid;place-items:center;width:96px;height:96px;overflow:hidden;background:var(--line2);color:var(--muted);font-size:24px;border:1px solid var(--line)}
.pframe.is-round{border-radius:50%}
.pframe.is-print{border-radius:6px;box-shadow:0 0 0 4px #fff,0 6px 14px -8px #1c1c1c55}
.pframe img{width:100%;height:100%;object-fit:cover;display:block}
.photo-ctl{display:grid;gap:8px;min-width:0}
.photo-ctl .btn{justify-self:start}
.upl{cursor:pointer}
.range{display:grid;gap:2px;font-size:13.5px;color:var(--ink2)}
.range input{width:100%;min-height:var(--tap);accent-color:var(--ink)}
.rowacts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.iconx{width:var(--tap);height:var(--tap);border-radius:50%;border:1px solid var(--line);background:var(--paper);display:grid;place-items:center;color:var(--ink);font-size:16px;flex:none;padding:0}
.iconx[disabled]{opacity:.35;cursor:not-allowed}
.in-t.is-sample{border-style:dashed;border-color:var(--mari);background:var(--mari-soft)}
.field label .tag{margin-left:6px;vertical-align:1px}
/* pass: sub-navigation, segments, split */
.subnav{display:flex;gap:2px;margin:14px calc(-1 * var(--gutter)) 0;padding:0 var(--gutter);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.subnav::-webkit-scrollbar{display:none}
.subnav a{display:flex;align-items:center;gap:6px;min-height:48px;padding:0 12px;text-decoration:none;color:var(--muted);font-weight:500;font-size:14px;border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap}
.subnav a[aria-current]{color:var(--ink);border-color:var(--mari);font-weight:600}
.segd{display:flex;background:var(--line2);border-radius:30px;padding:4px;gap:4px;margin-top:16px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.segd a{flex:1 0 auto;min-height:var(--tap);display:flex;align-items:center;justify-content:center;padding:0 14px;border-radius:26px;text-decoration:none;font-weight:600;font-size:14px;color:var(--muted);white-space:nowrap}
.segd a[aria-current]{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px #0001}
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:16px}
.evlist{display:grid;gap:2px;align-content:start}
.evlist h4{font:600 11.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:12px 0 4px}
.evlist h4:first-child{margin-top:0}
.evbtn{display:grid;grid-template-columns:4px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:56px;padding:6px 10px 6px 0;border:1px solid transparent;border-radius:10px;text-decoration:none;color:var(--ink)}
.evbtn .bar{height:36px;border-radius:2px;background:var(--c)}
.evbtn b{font:500 19px/1.1 var(--serif);display:block;overflow-wrap:anywhere}.evbtn small{color:var(--muted);font-size:12.5px}
.evbtn[aria-current=true]{background:var(--paper);border-color:var(--line)}
.addev{margin-top:8px}.addev summary{list-style:none;cursor:pointer}.addev summary::-webkit-details-marker{display:none}
.addev .form{margin-top:8px;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.ev-ed{min-width:0;scroll-margin-top:calc(var(--top,0px) + 12px)}.ev-ed:focus:not(:focus-visible){outline:none}
.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:start}
.course{border-top:1px solid var(--line2);padding-top:12px;margin-top:12px;display:grid;gap:10px}
.course-h{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.course-h .grow{flex:1;min-width:180px}
.dish-ed{display:grid;gap:8px;padding:8px 0 10px 12px;border-left:2px solid var(--line2)}
.diet-tags{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.dtag{min-width:var(--tap);min-height:var(--tap);padding:0 8px;border-radius:22px;border:1px solid var(--line);background:var(--paper);font:700 12px var(--sans);color:var(--ink2)}
.dtag[aria-pressed=true]{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.course-f{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.checks.one{display:flex}
.empty-card{text-align:center;display:grid;justify-items:center;gap:10px}
.empty-card svg.i{font-size:28px;color:var(--mari-ink)}
.list-ed{display:grid;gap:10px;padding:12px 0;border-top:1px solid var(--line2)}
.list-ed>.btn{justify-self:start}
.lines{list-style:none;padding:0;margin-top:8px}
.lines>li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:60px;padding:8px 0;border-top:1px solid var(--line)}
.lines .ic{width:36px;height:36px;border-radius:50%;background:var(--line2);display:grid;place-items:center;font-size:18px}
.lines b{font-weight:600}.lines small{display:block;color:var(--muted);font-size:13px}
/* wear */
.wear-row{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:18px 0;border-top:1px solid var(--line)}
.wear-row .who{border-left:4px solid var(--c);padding-left:12px}
.wear-row .who b{font:500 22px/1.1 var(--serif);display:block}.wear-row .who small{color:var(--muted);font-size:13px}
.sw{display:flex;gap:10px;flex-wrap:wrap}
.swatch{display:flex;align-items:center;gap:6px;padding:2px 2px 2px 6px;border:1px solid var(--line);border-radius:30px;background:var(--paper)}
.swatch i{width:30px;height:30px;border-radius:50%;border:1px solid #0000001f;flex:none}
.sw-name{width:110px;min-height:var(--tap);border:0;padding:6px;font-size:14px}
.pchips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.pchip{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 12px 0 8px;border-radius:30px;border:1px solid var(--line);background:var(--paper);font-size:13px;color:var(--ink)}
.pchip::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--c);border:1px solid #0000001f}
.pchip.custom::before{background:conic-gradient(#e9a531,#cc3f7c,#24477e,#1e6b4f,#e9a531)}
.pchip.custom input{width:32px;height:28px;border:0;padding:0;background:none}
/* modes and the plan with tap-to-seat */
.modes{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.mode{display:grid;grid-template-columns:minmax(0,1fr);gap:2px 10px;text-align:left;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink);min-height:var(--tap)}
/* v270: the 28px icon column only when the card has an icon. Without one, the title sat in that column one word per line (owner, iPhone). */
.mode:has(> svg.i){grid-template-columns:28px minmax(0,1fr)}
.mode svg.i{grid-row:span 2;font-size:22px;color:var(--muted)}
.mode b{font:500 19px/1.15 var(--serif)}.mode small{color:var(--muted);font-size:14px;line-height:1.4}
.mode[aria-checked=true]{border:2px solid var(--ink);padding:13px}
.mode[aria-checked=true] svg.i{color:var(--mari-ink)}
.selline{min-height:22px;font-size:14px;font-weight:600;color:var(--mari-ink)}
.unseated{margin:10px 0 14px;padding:12px;border:1px dashed var(--mari);border-radius:var(--r);background:var(--mari-soft)}
.unseated h4{font:600 11.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mari-ink);margin-bottom:8px}
.gchips{display:flex;gap:6px;flex-wrap:wrap}
.gchip{min-height:var(--tap);padding:0 12px;border-radius:22px;border:1px solid var(--line);background:var(--paper);font-size:13.5px;color:var(--ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gchip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.plan2{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.tblc{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);padding:10px;display:grid;gap:12px;align-content:start;min-width:0}
.tblc .tbl{justify-self:center;background:none;border:0;padding:0;min-height:var(--tap)}
.tblc .round{width:84px;height:84px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;align-content:center;background:var(--paper);color:var(--ink)}
.tblc .round b{font:500 24px/1 var(--serif)}.tblc .round small{font-size:11px;color:var(--muted)}
.tblc.is-full .round{background:var(--ink);color:#fff}.tblc.is-full .round small{color:#e6e6e0}
.tblc ul{list-style:none;padding:0;display:grid;gap:4px}
.tblc .gchip{width:100%;text-align:left}
/* design sheet and messages */
.dcards{list-style:none;padding:0;display:grid;gap:10px}
.dcard{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:var(--r)}
.dcard.is-cur{border:2px solid var(--ink);padding:7px}
.dcard img{width:72px;height:90px;object-fit:cover;object-position:top;border-radius:8px}
.dcard b{font:500 19px/1.1 var(--serif);display:block}.dcard small{display:block;color:var(--muted);font-size:13px;margin-bottom:6px}
.msgs{list-style:none;padding:0;display:grid}
.msg-item{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;padding:12px 0;border-top:1px solid var(--line2)}
.msg-item .ic{width:32px;height:32px;border-radius:50%;background:var(--mari-soft);color:var(--mari-ink);display:grid;place-items:center}
.msg-item.is-hidden{opacity:.7}
.msg-item .mh{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:13.5px}
.msg-item time{color:var(--muted);font-size:12px}
.msg-item .mb{margin-top:4px;font-size:15px;overflow-wrap:anywhere}
.msg-item .ma{display:flex;gap:6px;margin-top:6px;font-size:14px;color:var(--ok)}
.ma-form{display:grid;gap:8px;margin-top:8px}.ma-form .btn{justify-self:start}
.msg-item .acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
@media (min-width:760px){
  .design-row{grid-template-columns:120px minmax(0,1fr) auto;gap:20px}
  .design-row img,.design-ph{width:120px;height:150px}
  .design-row>.btn{grid-column:auto;justify-self:end}
  .scenes{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));margin:18px 0 0;padding:0}
  .sthumb{width:100%;max-width:120px}
  .chapter,.person-ed{grid-template-columns:minmax(0,260px) minmax(0,1fr)}
  .photo-ed{grid-template-columns:96px minmax(0,1fr)}
  .chapter .photo-ed,.person-ed .photo-ed{grid-template-columns:minmax(0,1fr);justify-items:start}
  .subnav{margin:18px 0 0;padding:0}
  .modes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mode,.mode:has(> svg.i){grid-template-columns:minmax(0,1fr);align-content:start;min-height:120px}
  .mode svg.i{grid-row:auto}
  .wear-row{grid-template-columns:190px minmax(0,1fr);gap:22px}
}
@media (min-width:1101px){
  .split{grid-template-columns:240px minmax(0,1fr);gap:28px}
  .evlist{position:sticky;top:calc(var(--top) + 16px);align-self:start}
}
.evcols{display:flex;flex-wrap:wrap;gap:6px}
.evcol{width:var(--tap);height:var(--tap);border-radius:50%;border:3px solid var(--paper);background:var(--c);box-shadow:0 0 0 1px var(--line);padding:0}
.evcol[aria-pressed=true]{box-shadow:0 0 0 2px var(--ink)}
.swatch-set{border:0;padding:0;margin:0}
.ed-more{border-top:1px solid var(--line2);padding:4px 0}
.ed-more summary{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:52px;cursor:pointer;font-weight:600;list-style:none}
.ed-more summary::-webkit-details-marker{display:none}
.ed-more summary small{color:var(--muted);font-weight:400;font-size:13px}
.ed-more[open]{padding-bottom:14px}
.ed-more .modes{margin:6px 0 12px}

/* ---------- Stage 3 (v189): Updates, Account, events ---------- */
.upd-formbox{max-width:720px}
.upd-who{display:flex;flex-wrap:wrap;gap:6px}
.upd-who .chip{white-space:normal;text-align:left}
.past{list-style:none;padding:0}
.past>li{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:14px 0;border-top:1px solid var(--line)}
.past time{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.past b{font-weight:600;display:block;overflow-wrap:anywhere}
.past small{display:flex;align-items:center;flex-wrap:wrap;gap:6px;color:var(--muted);font-size:13px;margin-top:2px}
.past .upd-detail{display:block;color:var(--ink2);white-space:pre-wrap;overflow-wrap:anywhere}
.upd-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sms-phone .preview-text{max-width:420px}
.text-invite-cost{font-size:14.5px}
.sms-consent{display:flex}
.plans{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:4px}
.plan-c{display:flex;flex-direction:column;align-items:flex-start;gap:8px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);padding:18px}
.plan-c.cur{border:2px solid var(--ink)}
.plan-c h3{font:500 28px/1.05 var(--serif)}
.plan-c .price{font:600 18px/1 var(--sans);font-variant-numeric:tabular-nums}
.plan-c ul{padding-left:18px;color:var(--ink2);font-size:14px;display:grid;gap:4px}
.plan-c small{font-size:12.5px;line-height:1.45}
.grid2{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.acc-col .sec-h h2{font-size:26px}
.credit-card{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:8px}
.big-money{font:500 46px/1 var(--serif);font-variant-numeric:lining-nums tabular-nums}
.lines .amt{font-variant-numeric:tabular-nums;font-weight:600;font-size:14px}
.help-form{margin-top:12px;display:grid;gap:12px}
.btn.small.danger{margin-top:10px}
@media (min-width:760px){
  .past>li{grid-template-columns:150px minmax(0,1fr) auto;align-items:start;gap:16px}
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid2{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
}

/* ================================================================ v193 (parity): every classic studio screen, natively */
/* a name that opens the household, anywhere */
.gname{display:inline-flex;align-items:center;min-height:var(--tap);min-width:var(--tap);vertical-align:middle;background:none;border:0;padding:0 2px;font:inherit;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--mari);text-underline-offset:3px;cursor:pointer;text-align:left;overflow-wrap:anywhere}
.gname.strong{font-weight:700}
.reach-names{font-size:13.5px}
.gdetail{display:grid;gap:4px}
.gd-name{font:500 28px/1.1 var(--serif);overflow-wrap:anywhere;margin-top:8px}
.seatlist{list-style:none;padding:0;display:grid;gap:4px;font-size:13.5px}
.seatlist li{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line2);padding:6px 0}
.dactions .danger,.btn.ghost.danger{color:var(--bad);border-color:#e3b4ae}
.btn.danger:not(.ghost){background:var(--bad);border-color:var(--bad);color:#fff}
/* the side panel on a computer (the same sheet, from the right) */
@media (min-width:1101px){
  dialog.sheet.side{margin:0 0 0 auto;height:100dvh;max-height:100dvh;width:440px;max-width:92vw;border-radius:0;box-shadow:-10px 0 40px #1c1c1c33}
  dialog.sheet.side .in{max-height:100dvh;height:100%}
}
/* the Undo bar after a delete */
.undo-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--dock-h) + 18px + env(safe-area-inset-bottom));z-index:61;display:flex;align-items:center;gap:12px;background:var(--ink);color:#fff;padding:8px 8px 8px 16px;border-radius:14px;max-width:calc(100vw - 32px);font-size:14px}
.undo-bar .btn{background:#fff;color:var(--ink);border-color:#fff}
/* guests' tabs, tools, the tour question */
.gtabs{margin-top:16px}
.tools-grid li a{min-height:64px}
@media (min-width:760px){.tools-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}}
.tour-ask{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-top:18px;border-color:var(--mari);background:var(--mari-soft)}
.tour-ask small{color:var(--ink2)}
.tour-ask+.setup{margin-top:14px}/* v271b: the setup card sat 8px under the tour card */
.danger-row b{color:var(--bad)}
/* ---------------------------------------------------------------- seating */
.seat-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:14px}
.seat-status{font-size:13.5px;color:var(--muted)}
.seat-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.checks.one{display:flex}
.checks.one label{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);font-size:14px}
.checks.one input{width:20px;height:20px;accent-color:var(--ink)}
.dl-menu{position:relative}
.dl-menu summary{list-style:none;cursor:pointer}
.dl-menu summary::-webkit-details-marker{display:none}
.dl-list{position:absolute;z-index:15;top:calc(100% + 6px);left:0;display:grid;gap:4px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:var(--shadow);min-width:250px}
.dl-list .btn{justify-content:flex-start;width:100%}
/* v270 (phones): iPhone Safari let the open Downloads list (250px, floating) push the whole Seating page sideways.
   On phones the list opens in place under its button, full width; the tools share a tidy two-column grid. */
@media (max-width:759px){
  .seat-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .seat-tools>.btn,.seat-tools>.dl-menu,.seat-tools>.dl-menu>summary{width:100%}
  .seat-tools>.dl-menu[open]{grid-column:1/-1}
  .dl-list{position:static;min-width:0;margin-top:6px;box-shadow:none}
  .dl-list .btn{white-space:normal;text-align:left}
  .photo-ctl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .photo-ctl .btn{justify-self:stretch}
  .photo-ctl>:not(.btn){grid-column:1/-1}
  /* any button keeps inside the screen: long labels wrap instead of running past the edge */
  .btn{white-space:normal;text-align:center;max-width:100%}
  /* iPhone zooms the page when a field under 16px is tapped */
  select,textarea,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]){font-size:16px !important}
}
.selbox{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-top:12px;padding:12px 14px;border:2px solid var(--ink);border-radius:var(--r);background:var(--paper);position:sticky;top:calc(var(--top) + 6px);z-index:12}
.selbox small{color:var(--muted)}
.seat-split{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:14px}
.seat-pool{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);padding:12px;display:grid;gap:10px;align-content:start;min-width:0}
.seat-pool .pool-h{display:grid;gap:12px}
.seat-pool h3{font:500 20px/1.1 var(--serif)}.seat-pool h3 .n{font:13px var(--sans);color:var(--muted)}
.gsearch.small{min-height:44px}
@media (max-width:359px){.seat-tools{grid-template-columns:minmax(0,1fr)}}
.chip.small{min-height:var(--tap);font-size:13px}
.gchips{display:flex;flex-wrap:wrap;gap:6px;max-height:260px;overflow-y:auto;padding:2px}
.gchip{touch-action:manipulation;-webkit-user-select:none;user-select:none}
.gchip small{color:inherit;opacity:.75;font-size:11.5px}
.gchip.is-seated{border-style:dashed}
.gchip.is-child{border-color:var(--mari)}
/* v282 item 4: the chosen guest, the Child tag, the list by household, Saved and Undo always in view */
.gchip.is-picked{outline:3px solid var(--mari);outline-offset:2px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.gchip.is-picked svg{width:15px;height:15px;flex:none}
.ctag{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:10px;background:var(--mari-soft);color:var(--mari-ink);font-size:11.5px;font-weight:600;line-height:1.5;vertical-align:1px}
.gchip[aria-pressed=true] .ctag{background:#fff;color:var(--ink)}
.ghouse{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:6px;padding:8px 0 10px;border-top:1px solid var(--line)}
.ghouse:first-child{border-top:0;padding-top:0}
.ghouse-h{flex:1 0 100%;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin:0;font-size:13.5px}
.ghouse-h b{font-weight:600;min-width:0;overflow-wrap:anywhere}.ghouse-h small{color:var(--muted);font-size:12px;margin-left:auto}
.tnames li.is-picked{font-weight:600;box-shadow:inset 3px 0 var(--mari);padding-left:6px;border-radius:3px;background:var(--mari-soft)}
.seat-dock{position:sticky;top:var(--top);z-index:12;background:var(--bg,var(--paper));padding:6px 0 4px}
.seat-dock .selbox{gap:8px;padding:10px 12px}.seat-dock .selbox p{flex:1 1 220px;margin:0}
.seat-dock .selbox .gactions{display:flex;flex-wrap:wrap;gap:6px;margin-top:0}.seat-dock .selbox .gactions>.btn{width:auto;flex:1 1 auto;min-height:var(--tap);padding:0 12px;order:0}
.seat-dock .seat-bar{margin-top:10px}
.seat-dock .selbox{position:static;margin-top:8px;box-shadow:0 6px 18px rgba(0,0,0,.08)}
.sr-always{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin:10px 0 14px;background:var(--paper)}
.sr-always h3{font:500 17px/1.2 var(--serif);margin:0 0 8px}
.sr-always ul{list-style:none;padding:0;margin:0;display:grid;gap:6px;font-size:14px}
.sr-always li{display:flex;gap:8px;align-items:flex-start}.sr-always li svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--mari-ink)}
.seat-pool.drop-over,.tcard.drop-over{outline:3px solid var(--mari);outline-offset:2px}
.seat-tables{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;min-width:0}
.tcard{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);padding:12px;display:grid;gap:10px;align-content:start;min-width:0}
.tcard header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.tcard h3{font:500 20px/1.1 var(--serif);overflow-wrap:anywhere}
.tcard .eyebrow{font:600 10.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tcard.is-over{border-color:var(--bad)}
.ring{position:relative;width:100%;max-width:236px;aspect-ratio:1;margin:0 auto}
.ring.is-long{aspect-ratio:auto;height:150px;max-width:none}
.ring.is-grid{aspect-ratio:auto;max-width:none;display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.tdisc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44%;aspect-ratio:1;border-radius:50%;border:1.5px solid var(--ink);background:var(--bg);display:grid;place-items:center;align-content:center;color:var(--ink);padding:0;min-height:var(--tap)}
.ring.is-long .tdisc{width:calc(100% - 20px);aspect-ratio:auto;height:52px;border-radius:12px}
.ring.is-grid .tdisc{position:static;transform:none;width:100%;aspect-ratio:auto;height:52px;border-radius:12px;margin-bottom:4px}
.tdisc b{font:500 22px/1 var(--serif)}.tdisc small{font-size:11px;color:var(--muted)}
.tcard.is-full .tdisc{background:var(--ink);color:#fff}.tcard.is-full .tdisc small{color:#e6e6e0}
.chair{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;border:1.5px solid var(--field);background:var(--paper);display:grid;place-items:center;padding:0;font:600 12px/1 var(--sans);color:var(--ink);touch-action:manipulation;-webkit-user-select:none;user-select:none}
.ring.is-grid .chair{position:static;transform:none}
.chair small{color:#5b5b57;font-weight:500}
.chair.is-taken{background:var(--mari-soft);border-color:var(--mari-ink)}
.chair.is-picked{background:var(--ink);border-color:var(--ink);color:#fff}
.chair.drop-over{outline:3px solid var(--mari);outline-offset:1px}
.tnames{list-style:none;padding:0;display:grid;gap:2px;font-size:13.5px}
.tnames li{display:flex;gap:8px;align-items:baseline;min-height:28px}
.tnames .cn{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px;width:18px;text-align:right;flex:none}
.drag-ghost{position:fixed;left:0;top:0;z-index:80;pointer-events:none;background:var(--ink);color:#fff;padding:8px 14px;border-radius:20px;font-size:14px;box-shadow:var(--shadow);white-space:nowrap}
body.is-dragging,body.is-dragging *{cursor:grabbing!important;-webkit-user-select:none;user-select:none}
.apart-list{display:grid;gap:2px;max-height:50dvh;overflow:auto}
.apart-list label{display:flex;align-items:center;gap:10px;min-height:var(--tap)}
.apart-list input{width:20px;height:20px;accent-color:var(--ink)}
@media (min-width:1101px){
  .seat-split{grid-template-columns:280px minmax(0,1fr);align-items:start}
  .seat-pool{position:sticky;top:90px;max-height:calc(100vh - 110px);overflow:auto}
  .gchips{max-height:none}
}
/* ---------------------------------------------------------------- on the day */
.day-body{display:grid;grid-template-columns:minmax(0,1fr)}   /* v280: a long row of event chips scrolls inside the phone width */
.ci-sum p{font-size:16px}
.ci-list{list-style:none;padding:0;margin-top:12px}
.ci-row{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:10px 0;border-top:1px solid var(--line)}
.ci-row small{display:block;color:var(--muted);font-size:12.5px}
.ci-row small.allergy{color:var(--bad);font-weight:600}
.ci-row.is-here .gname{text-decoration-color:var(--ok)}
.ci-acts{display:flex;gap:6px;flex-wrap:wrap}
@media (min-width:600px){.ci-row{grid-template-columns:minmax(0,1fr) auto;align-items:center}}
.qr-card{display:grid;justify-items:center;gap:10px;max-width:320px}
.qr-art{width:220px;max-width:100%}.qr-art svg{width:100%;height:auto;display:block}
.okline{color:var(--ok);font-weight:600;font-size:14px;text-align:center}
.plain{list-style:none;padding:0;display:grid;gap:8px;font-size:13.5px}
.plain .names{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:2px}
.run{list-style:none;padding:0}
.run li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px;padding:8px 0;border-top:1px solid var(--line2);font-size:14px}
.mus{list-style:none;padding:0;display:grid;gap:8px}
.mus li{display:flex;gap:8px;align-items:center}
.mus li.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto}
.songs{padding-left:20px;display:grid;gap:8px;font-size:14px}
.songs small{display:flex;flex-wrap:wrap;gap:2px 8px;color:var(--muted)}
/* ---------------------------------------------------------------- budget */
.bgt-sum{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bgt-sum .lab{display:block;font-size:12px;color:var(--muted)}
.bgt-sum b{font:500 24px/1.1 var(--serif);font-variant-numeric:lining-nums tabular-nums}
@media (min-width:760px){.bgt-sum{grid-template-columns:repeat(4,1fr)}}
.bgt-list{list-style:none;padding:0;margin-top:12px}
.bgt-item{border-top:1px solid var(--line)}
.bgt-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;min-height:60px;padding:8px 0;background:none;border:0;text-align:left;color:var(--ink)}
.bgt-head b{font-weight:600}.bgt-head small{display:block;color:var(--muted);font-size:12.5px}
.bgt-head .amt{text-align:right;font-variant-numeric:tabular-nums}
.bgt-more{display:grid;gap:8px;padding:0 0 14px}
.pays{list-style:none;padding:0;display:grid;gap:4px}
.pays li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:center;padding:8px 0;border-top:1px solid var(--line2);font-size:13.5px}
.pays li small{display:block;color:var(--muted)}
.pays .go{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap}
/* ---------------------------------------------------------------- memory book and gallery */
.mem-grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.mem-grid li{display:grid;gap:6px;align-content:start;min-width:0}
.mem-grid li.is-hidden{opacity:.55}
.mem-ph{display:block;width:100%;aspect-ratio:4/5;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--line2);padding:0}
.mem-ph img{width:100%;height:100%;object-fit:cover;display:block}
.mem-grid small{display:block;color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
.rowacts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.mem-pic{width:120px;height:150px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.mem-big{width:100%;max-height:70dvh;object-fit:contain;border-radius:12px}
.cover-chips{flex-wrap:wrap}
/* ---------------------------------------------------------------- access, plan, translations */
.perm-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
@media (min-width:760px){.perm-grid{grid-template-columns:1fr 1fr}}
.grant{display:grid;gap:10px;margin-top:10px}
.grant h3{font:500 22px/1.1 var(--serif)}
.tl-list,.cl-list{list-style:none;padding:0;display:grid;gap:8px}
.tl-list li{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:8px 0;border-top:1px solid var(--line2)}
@media (min-width:600px){.tl-list li{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:center}}
.cl-list li{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid var(--line2)}
.cl-list label{display:flex;gap:10px;align-items:center;min-height:var(--tap);font-size:14px}
.cl-list input{width:20px;height:20px;accent-color:var(--ink);flex:none}
.cl-add{align-items:end;margin-top:12px}
.tr-row{display:grid;gap:6px;padding:10px 0;border-top:1px solid var(--line2)}
.tr-row span{font-size:13.5px}
.tr-row.is-check textarea{border-color:var(--mari)}
.offscreen{position:absolute;left:-10000px;top:0;width:390px;height:700px;overflow:hidden}
.film-more{margin-top:6px}
/* ---------------------------------------------------------------- the classic modules kept unchanged (Publish, Text
   messages, QR, invitation password, save the date), shown in the dashboard's own type and colours */
.embed{display:grid;gap:14px;margin-top:16px}
.embed .page-heading{display:none}
.embed .panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:grid;gap:10px;min-width:0}
.embed .publish-grid,.embed .share-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
@media (min-width:1101px){.embed .publish-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.embed h2{font:500 24px/1.1 var(--serif)}.embed h3{font:500 20px/1.15 var(--serif)}
.embed h2 small{font:14px var(--sans);color:var(--muted)}
.embed .eyebrow{font:600 11.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mari-ink)}
.embed p,.embed li{font-size:14px}
.embed .help,.embed .sms-note{font-size:14px;color:var(--muted)}
.embed .notice{background:var(--ok-soft);color:var(--ok);border-radius:12px;padding:10px 12px;font-size:14px}
.embed .notice:empty{display:none}
.embed .error,.embed .sms-error{color:var(--bad);font-size:14px}
.embed .button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:var(--pill);border:1px solid var(--ink);background:var(--ink);color:#fff;font-weight:600;font-size:14.5px;text-decoration:none;max-width:100%;white-space:normal;text-align:center}
.embed .button.secondary{background:var(--paper);color:var(--ink);border-color:var(--line)}
.embed .button.small{min-height:var(--tap);padding:0 14px;font-size:13.5px}
.embed .button[disabled]{opacity:.5;cursor:not-allowed}
.embed .text-link{background:none;border:0;padding:0 2px;min-height:var(--tap);color:var(--mari-ink);font-weight:600;text-decoration:underline;text-align:left;font-size:14px}
.embed .field,.embed label.field{display:grid;gap:6px;font-size:13.5px}
.embed select,.embed input:not([type=checkbox]):not([type=radio]):not([type=file]),.embed textarea{min-height:var(--tap);border:1px solid var(--field);border-radius:var(--r-sm);padding:8px 10px;background:var(--paper);font-size:16px;max-width:100%;width:100%}
.embed input[type=checkbox],.embed input[type=radio]{width:20px;height:20px;accent-color:var(--ink)}
.embed .sms-consent,.embed .check{display:flex;gap:10px;align-items:flex-start;font-size:14px;min-height:var(--tap)}
.embed details{border-top:1px solid var(--line2);padding-top:6px}
.embed summary{min-height:var(--tap);display:flex;align-items:center;font-weight:600;cursor:pointer}
.embed .form-actions,.embed .sms-actions{display:flex;gap:8px;flex-wrap:wrap}
/* v270: on phones a wrapping button row left one button alone on a second line in another style (owner, iPhone).
   Stack them full width instead, the main action first. */
@media (max-width:759px){
  .embed .form-actions,.embed .sms-actions{display:grid;grid-template-columns:minmax(0,1fr)}
  .embed .form-actions>.button,.embed .sms-actions>.button,.embed .form-actions>button,.embed .sms-actions>button{width:100%}
  .embed .form-actions>.button:not(.secondary),.embed .sms-actions>.button:not(.secondary){order:-1}
}
/* v270: the QR link reads as one clean line with its own Copy button; the two downloads are equal */
.embed .qr-link{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.embed .qr-link input{text-overflow:ellipsis;min-width:0;color:var(--muted)}
.embed .qr-downloads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
/* v271b: the QR link field touched the download buttons; the texts sender, contact list and history were 0-10px apart */
.embed * + .qr-downloads{margin-top:12px}
.embed .sms-sender>label{display:block;margin-bottom:6px}
.embed .sms-sender-phone{margin-top:12px}
.embed .sms-bulk form>.field+.button{margin-top:14px}
.embed details.sms-fold[open]{row-gap:14px}
/* v271b: history and delivery rows ran together ("Invitation18 Oct", "segments3 delivered"): one line each */
.embed .sms-fold article{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.embed .sms-fold article>div>:is(strong,small){display:block}
.embed .sms-fold article+article{margin-top:12px;padding-top:12px;border-top:1px solid var(--line2)}
.embed .publish-checklist{padding-left:18px;display:grid;gap:2px}
.embed table{width:100%;border-collapse:collapse;font-size:13px;display:block;overflow-x:auto}
.embed td,.embed th{padding:6px 8px 6px 0;border-top:1px solid var(--line2);text-align:left}
.embed .pkg-bar,.embed .pkg-tabs{display:flex;flex-wrap:wrap;gap:8px}
.embed .pkg-tab,.embed .pkg-option{display:grid;gap:2px;min-height:var(--tap);padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:var(--paper);text-align:left;color:var(--ink)}
.embed .pkg-tab[aria-pressed=true],.embed .pkg-option[aria-pressed=true]{border:2px solid var(--ink)}
.embed svg{max-width:100%;height:auto}
.embed img{max-width:100%;height:auto}
.embed .sms-workspace,.embed #sms-workspace{display:grid;gap:14px}
.embed .sms-bubble,.embed .sms-preview{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:12px 14px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px}
.embed *{max-width:100%}
.embed,.embed *{overflow-wrap:anywhere}
/* forms in sheets: the SMS module's own mobile fieldset */
.guest-mobile{border:1px solid var(--line);border-radius:var(--r);padding:12px;display:grid;gap:10px;min-width:0}
.guest-mobile legend{font-size:13px;font-weight:600;padding:0 6px}
.guest-mobile .form-grid{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){.guest-mobile .form-grid{grid-template-columns:1fr 1fr}}
.guest-mobile .field{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--ink2)}
.guest-mobile select,.guest-mobile input[type=tel]{min-height:46px;border:1px solid var(--field);border-radius:var(--r-sm);padding:8px 10px;background:var(--paper);font-size:16px;width:100%;min-width:0}
.guest-mobile .sms-consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;min-height:var(--tap)}
.guest-mobile .sms-consent input{width:20px;height:20px;margin-top:2px;accent-color:var(--ink);flex:none}
.guest-mobile .help{font-size:12.5px;color:var(--muted)}
/* the embedded Text messages workspace */
.embed .sms-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.embed .sms-balance{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.embed .sms-balance strong{font:500 28px/1 var(--serif);font-variant-numeric:lining-nums}
.embed .sms-balance span{font-size:13px;color:var(--muted)}
.embed .sms-header-note{font-size:13px;color:var(--muted);flex-basis:100%}
.embed .sms-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
@media (min-width:1101px){.embed .sms-grid{grid-template-columns:1fr 1fr}}
.embed .sms-kind-switch,.embed .sms-options,.embed .sms-markets{display:flex;flex-wrap:wrap;gap:8px}
.embed .sms-count,.embed .sms-from,.embed .sms-state{font-size:13px;color:var(--muted)}
.embed .sms-fold-count{font-size:12px;color:var(--muted);margin-left:8px}
.embed .sms-sender-row{display:flex;flex-wrap:wrap;gap:8px;align-items:end}/* Home: the couple's own timeline */
.tl-strip{list-style:none;padding:0;display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) 4px}
.tl-strip::-webkit-scrollbar{display:none}
.tl-strip li{flex:0 0 auto;min-width:130px;border-top:3px solid var(--line);padding:8px 4px 0;display:grid;gap:2px}
.tl-strip li.past{border-color:var(--ink)}
.tl-strip li.now{border-color:var(--mari)}.tl-strip li.now b{color:var(--mari-ink)}
.tl-strip b{font-weight:600;font-size:14px}.tl-strip span{font-size:13px;color:var(--muted)}
@media (min-width:760px){.tl-strip{margin:0;padding:0 0 4px}}

/* v193 gate: the classic text workspace's choices and its inline help link get a full 44 px touch target */
.embed label:has(> input[type=radio]),.embed label:has(> input[type=checkbox]){min-height:44px;display:inline-flex;align-items:center;gap:8px}
.embed .sms-note a,.embed p > a[href^="mailto:"]{display:inline-block;padding:14px 0;margin:-14px 0}

/* ---------- v194 packaging: the Guest Pass card (Home, Account) and its sheet (js/occasi-dash-guestpass.js) ---------- */
.gp-card{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:18px 0 6px;padding:18px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.gp-card .k{display:block;font:600 11px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mari-ink)}
.gp-card h2{margin-top:6px;font:500 26px/1.1 var(--serif)}
.gp-card p{margin-top:8px;color:var(--ink2);font-size:14.5px;max-width:52ch}
.gp-card .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.gp-card .acts .btn{min-height:var(--tap)}
.gp-card.is-on{border-color:var(--ok);background:var(--ok-soft)}
.gp-mini{justify-self:center;width:min(100%,250px);padding:10px;border-radius:26px;background:var(--wk-bg,#f6f2ea);box-shadow:0 0 0 1px var(--line),0 16px 30px -22px #1c1c1c66}
.gp-mini-in{border-radius:18px;background:var(--wk-paper,#fff);color:var(--wk-ink,#2b2a33);padding:12px 12px 8px;font:400 12px/1.35 var(--wk-text,Georgia,serif);overflow:hidden}
.gp-mini-head{display:flex;align-items:center;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--wk-rule,#ddd);background:var(--opa-orn,none) top/100% 4px no-repeat}
.gp-seal{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--wk-btn,#2b2a33);color:var(--wk-onbtn,#fff);font:600 10px/1 var(--wk-display,Georgia,serif);flex:none}
.gp-k{font:700 8.5px/1.3 var(--wk-text,Georgia,serif);letter-spacing:.18em;text-transform:uppercase;color:var(--wk-soft,#6c6875)}
.gp-mini-h{margin-top:10px;font:var(--wk-display-style,normal) 400 19px/1.1 var(--wk-display,Georgia,serif);color:var(--wk-ink,#2b2a33)}
.gp-mini ul{list-style:none;padding:0;margin-top:8px;display:grid;gap:6px}
.gp-mini li{padding:7px 9px;border-radius:var(--wk-r,8px);background:var(--wk-bg,#f6f2ea);box-shadow:inset 0 0 0 1px var(--wk-rule,#ddd)}
.gp-mini li b{display:block;font:var(--wk-display-style,normal) 500 13px/1.2 var(--wk-display,Georgia,serif)}
.gp-mini li small{display:block;margin-top:2px;font-size:10.5px;color:var(--wk-soft,#6c6875)}
.gp-mini-tabs{display:flex;justify-content:space-between;gap:2px;margin-top:10px;padding-top:7px;border-top:1px solid var(--wk-rule,#ddd);font:600 7.5px/1.1 var(--wk-text,Georgia,serif);letter-spacing:.06em;text-transform:uppercase;color:var(--wk-soft,#6c6875)}
.gp-mini-tabs span:first-child{color:var(--wk-ink,#2b2a33)}
@media (min-width:760px){.gp-card{grid-template-columns:minmax(0,1fr) 250px;align-items:center;padding:22px 24px}}
.sheet.gp-wide .in{max-width:min(980px,96vw)}
.gp-sheet{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.gp-prev{display:flex;flex-direction:column;align-items:center;gap:10px}
.gp-device{width:min(300px,78vw);flex:none;aspect-ratio:390/760;border-width:8px;border-radius:34px}
.gp-tabs{justify-content:center;flex-wrap:wrap}
.gp-prev .cap{text-align:center;max-width:36ch}
.gp-h3{font:500 22px/1.15 var(--serif)}
.gp-list{margin-top:8px;padding-left:18px;display:grid;gap:4px;color:var(--ink2);font-size:14px}
.gp-route{margin-top:16px;padding:16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper)}
.gp-route h3{font:500 21px/1.15 var(--serif)}
.gp-route .help{margin-top:6px}
.gp-route .btn{margin-top:12px;min-height:var(--tap)}
.gp-route .small{margin-top:8px}
@media (min-width:860px){.gp-sheet{grid-template-columns:330px minmax(0,1fr);align-items:start}.gp-prev{position:sticky;top:0}}
/* ---------- v194 legal: order information and the "Start now" consent above Pay (js/occasi-studio-publishing.js) ---------- */
.order-info{margin-top:14px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font-size:14px;line-height:1.45}
.order-info p{margin:0 0 6px}
.order-seller{margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--muted,#5b5b57)}
.order-links{display:flex;flex-wrap:wrap;column-gap:10px;align-items:center}
.order-links a,.gp-links a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;text-decoration:underline;text-underline-offset:3px}
.start-consent{margin:12px 0 10px}
.start-consent-row,.gp-consent{display:flex;gap:12px;align-items:flex-start;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;cursor:pointer;font-size:14px;line-height:1.45}
.start-consent-row input,.gp-consent input{flex:none;width:22px;height:22px;margin:1px 0 0}
.start-consent .help{margin-top:6px;font-size:13px}.gp-pay{margin-top:16px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper)}
.gp-pay .small{margin-top:6px}
.gp-consent{margin-top:8px;background:var(--paper)}
.gp-side,.gp-prev,.gp-route,.gp-route .dcards,.gp-route .dcard,.gp-route .dcard>div{min-width:0}
.gp-route .dcard img{max-width:30%;height:auto}.gp-route .dcard .btn{max-width:100%;white-space:normal;height:auto;min-height:var(--tap);text-align:center}
/* v200 EU switch: the billing country above the "Start now" box */
.billing-country,.gp-country{margin:12px 0 6px;display:grid;gap:6px}
.billing-country label,.gp-country label{font-size:14px;font-weight:600}
.billing-country select,.gp-country select{min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--paper);font:inherit;font-size:16px;color:inherit;max-width:100%}
.billing-country .help,.gp-country .small{margin:0;font-size:13px}
.billing-country .eu-closed,.gp-country .gp-eu{margin:4px 0 0;padding:10px 12px;border-radius:12px;background:#f6efe2;color:#4a3b1f;font-size:14px;line-height:1.45}
/* v214: the live character counter under a field (walk-through designs); over the limit = a gentle warning, never cut */
.field .cnt { display: inline-block; margin-top: 2px; font-size: 12px; color: var(--muted, #6b6b6b); font-variant-numeric: tabular-nums; }
.field .cnt.is-over, .help.cnt.is-over { color: #9a4b16; }

/* ================================================================ v218 (24 Oct 2026): at a glance ============ */
/* The owner asked for the dashboard to be as easy to read as the Tide business banking app. Notes and sources:
   output/review-2026-10-24/dashboard-tide/TIDE-NOTES.md and MAPPING.md. One headline card with one big number, the
   reply states in words, one row of quick actions, Needs you beside the latest replies, larger type everywhere.
   Shapes: cards 14px, tiles 12px, buttons and circles round. Accent: marigold only for the badge, the "now" marks and
   the Not attending words. Light theme only (owner rule). Sizes under 15px on a phone are labels or timestamps. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--wait-ring:#8f8f86}
html{scroll-padding-top:calc(var(--top) + 12px);scroll-padding-bottom:calc(var(--dock-h) + 24px)}
.head-home{padding-bottom:12px}
.head-home h1{font-size:32px;line-height:1.08}

/* the headline card */
.glance{margin-top:16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:18px 16px 16px}
.gl-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
.gl-when{font-size:15px;color:var(--muted);min-width:0;overflow-wrap:anywhere}
.gl-days{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.gl-days b{font:500 26px/1 var(--serif);font-variant-numeric:lining-nums tabular-nums}
.gl-days span,.gl-days.is-text{font-size:15px;color:var(--ink2);font-weight:600}
.gl-head{margin-top:14px}
.gl-big{display:flex;align-items:flex-end;gap:12px}
.gl-big>b{font:500 64px/.86 var(--serif);letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums}
.gl-big>span{font-size:18px;font-weight:600;line-height:1.25;padding-bottom:2px}
.gl-big small{display:block;font-size:15px;font-weight:400;color:var(--muted)}
.gl-empty{font-size:16px;margin-bottom:12px}
.gl-bar{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--wait);margin-top:16px}
.gl-bar .y{background:var(--yes)}.gl-bar .n{background:var(--no)}
.gl-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.gl-tile{display:grid;align-content:start;gap:2px;min-width:0;min-height:var(--tap);padding:10px 10px 9px;border:1px solid var(--line2);border-radius:12px;background:var(--bg);color:var(--ink);text-decoration:none;text-align:left;font:inherit;transition:transform 160ms var(--ease-out),border-color 160ms ease}
.gl-tile:active{transform:scale(.97)}
.gl-k{display:flex;align-items:flex-start;gap:6px;font-size:14px;font-weight:600;line-height:1.25;color:var(--ink2)}
.sw{flex:none;width:10px;height:10px;border-radius:3px;margin-top:4px;background:var(--wait)}
.sw.y{background:var(--yes)}.sw.n{background:var(--no)}.sw.w{background:var(--paper);box-shadow:inset 0 0 0 2px var(--wait-ring)}
.gl-n{font:500 30px/1.1 var(--serif);font-variant-numeric:lining-nums tabular-nums;margin-top:2px}
.gl-tile small{font-size:14px;color:var(--muted)}
.gl-tile[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--paper)}
.gl-status{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line2)}
.gl-st{display:flex;align-items:flex-start;gap:10px;min-width:0}
.gl-st>svg.i{font-size:20px;margin-top:1px;color:var(--muted)}
.gl-status.is-live .gl-st>svg.i{color:var(--ok)}
.gl-st b{display:block;font-size:16px;font-weight:600}
.gl-st small{display:block;font-size:15px;color:var(--muted)}
.gl-link{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 240px;justify-content:flex-end}
.gl-url{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;color:var(--ink2)}

/* quick actions: one tap each */
.qa{margin-top:14px}
.qa ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px}
.qa a,.qa button{display:grid;justify-items:center;align-content:start;gap:6px;width:100%;min-height:var(--tap);padding:6px 0;border:0;background:none;color:var(--ink);text-decoration:none;font:inherit;border-radius:12px}
.qa-ic{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:var(--paper);transition:transform 160ms var(--ease-out)}
.qa-ic svg.i{width:24px;height:24px}
.qa a:active .qa-ic,.qa button:active .qa-ic{transform:scale(.95)}
.qa-ic em{position:absolute;top:-3px;right:-5px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--mari);color:var(--ink);font:700 12.5px/22px var(--sans);font-style:normal;text-align:center}
.qa-l{font-size:14px;font-weight:600;line-height:1.2;text-align:center;overflow-wrap:anywhere}

/* Needs you beside the latest replies */
.needs-sec,.act-sec{margin-top:28px}
.needs-sec .sec-h,.act-sec .sec-h{flex-direction:row;align-items:center;justify-content:space-between;margin-bottom:4px}
.sec-h h2 .count{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 8px;margin-left:6px;border-radius:14px;background:var(--mari-soft);color:var(--mari-ink);font:700 15px/1 var(--sans);vertical-align:4px}
.needs-sec .needs{margin-top:0}
.msg .note{font-size:14px}
.act-day{font:600 14px/1.2 var(--sans);color:var(--muted);margin:16px 0 2px}
.act-day:first-of-type{margin-top:6px}
.act{list-style:none;padding:0}
.act-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 0;border-top:1px solid var(--line2)}
.act-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--line2);color:var(--ink2)}
.act-ic svg.i{width:20px;height:20px}
.act-ic.is-replied,.act-ic.is-changed{background:var(--ok-soft);color:var(--ok)}
.act-ic.is-question,.act-ic.is-note,.act-ic.is-chair{background:var(--mari-soft);color:var(--mari-ink)}
.act-main{display:grid;justify-items:start;min-width:0}
.act-main .gname{font-size:16px}
.act-what{font-size:15px;color:var(--muted);overflow-wrap:anywhere}
.amt{display:grid;justify-items:end;font-size:16px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.amt small{font-size:14px;font-weight:400;color:var(--muted)}
.amt.n{color:var(--mari-ink)}
.act-empty{padding:10px 0}

/* guests: the reply state on the right of each row */
.hh .open{grid-template-columns:minmax(0,1fr) auto}
.hh-main{min-width:0}
.hh-right{display:grid;justify-items:end;gap:6px}
.hh-st{font-size:15px;font-weight:600;white-space:nowrap}
.hh-st.w{color:var(--muted);font-weight:500}.hh-st.n{color:var(--mari-ink)}
.gtools .gl-tiles{margin-top:0}

/* larger, calmer type where couples read (the v193 sizes were 11 to 14px) */
.head p{font-size:15px}
.ev .t,.ev .v,.ev .sub,.big span,.ok-line,.legend,.sec-h p{font-size:15px}
.mk small{font-size:13px}.mk span{font-size:13.5px}
.tl-strip b{font-size:15px}.tl-strip span{font-size:14px}
.checklist li{font-size:15px}
.acct b{font-size:16px}.acct small{font-size:14.5px}
.hh b{font-size:16px}.hh small{font-size:14.5px}
.chip{font-size:15px}
.field label,.field .lab{font-size:15px}
.field .help{font-size:14.5px}
.switch b{font-size:16px}.switch small{font-size:14.5px}
.exports li small{font-size:14.5px}
.warn,.okbox{font-size:15px}
.who li{font-size:15px}
.toast{font-size:15px}
.demo-band{font-size:14px}
.dock a{font-size:12.5px}
.scene b{font-size:14px}.scene small{font-size:13px}
.ed-note{font-size:14.5px}
.changed p,.tell-lines{font-size:15px}

@media (hover:hover) and (pointer:fine){
  .gl-tile:hover{border-color:var(--field)}
  .qa a:hover .qa-ic,.qa button:hover .qa-ic{border-color:var(--ink)}
}
@media (min-width:430px){.qa-l{font-size:15px}.gl-k{font-size:15px}}
@media (min-width:760px){
  .glance{padding:22px 24px 18px}
  .gl-big>b{font-size:76px}
  .gl-tiles{gap:12px}
  .gl-tile{padding:12px 14px}
  .qa ul{display:flex;gap:28px}
  .qa a,.qa button{width:auto;min-width:76px}
}
@media (min-width:1101px){
  body{font-size:16px}
  html{scroll-padding-bottom:110px}
  .head-home h1{font-size:44px}
  .head p,.sec-h p{font-size:16px}
  .gl-when,.gl-st small,.gl-url,.gl-big small{font-size:16px}
  .qa-ic{width:56px;height:56px}
  .home-pair{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:0 40px;align-items:start}
  .msg p{font-size:17px}
  .act-what,.ev .t,.ev .v,.ev .sub,.big span,.ok-line,.legend{font-size:16px}
  .hh small{font-size:15px}
  .checklist li{font-size:16px}
  .field .help,.switch small,.acct small,.exports li small{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.gl-tile:active,.qa a:active .qa-ic,.qa button:active .qa-ic{transform:none}}
.glance-mini{margin-top:14px;padding:12px 16px}
.glance-mini .gl-status{margin-top:0;padding-top:0;border-top:0}
/* v218: on phones the three reply states read as rows (label left, number right), like lines on a statement */
@media (max-width:759px){
  .gl-tiles{grid-template-columns:minmax(0,1fr);gap:0;margin-top:10px}
  .gl-tile{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:0;padding:9px 4px;border:0;border-top:1px solid var(--line2);border-radius:0;background:transparent}
  .gl-tile:first-child{border-top:0}
  .gl-k{grid-column:1;grid-row:1;font-size:15px;color:var(--ink)}
  .gl-tile small{grid-column:1;grid-row:2;padding-left:16px}
  .gl-n{grid-column:2;grid-row:1/span 2;margin:0;font-size:30px}
  .gl-tile[aria-pressed=true]{box-shadow:inset 3px 0 0 var(--ink);background:var(--paper);padding-left:12px}
  .gtools .gl-tiles{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:2px 12px}
}
/* v218: phones keep the short saved state ("Saved · live") and drop its second line; the guest list starts higher */
@media (max-width:759px){
  .saved-note{display:none}
  .gtools .gl-tile{padding-top:6px;padding-bottom:6px}
  .gtools .gl-n{font-size:26px}
}
.gtools .gl-tiles{grid-column:1/-1}
/* the editor shows the live/draft bar under its head, so the idle "Saved" line there is not repeated */
.head:has(+ .glance-mini) .saved-wrap{display:none}
/* v218 accessibility: the focus ring in the darker marigold (about 7:1 on the page; the light marigold was 2.4:1) */
:focus-visible{outline-color:var(--mari-ink)}
.gsearch:focus-within{outline-color:var(--mari-ink)}
/* v218 (web interface guidelines): no double-tap zoom delay on the new tap targets */
.qa a,.qa button,.gl-tile,.act-main .gname{touch-action:manipulation}
/* v218 polish: the chosen reply filter on a phone is a filled row (no coloured edge bar); the page's own selection colour */
@media (max-width:759px){.gl-tile[aria-pressed=true]{box-shadow:none;background:var(--line2);border-radius:10px;padding-left:10px}.gl-tile[aria-pressed=true]+.gl-tile{border-top-color:transparent}}
::selection{background:var(--mari-soft);color:var(--ink)}
/* v218 gate: buttons, links, flags, cost notes and day groups at 15px on phones too (icon labels under the quick actions stay 14px below 430px so "invitation" never breaks mid-word) */
.btn.small,.link,.flag,.msg .note,.act-day{font-size:15px}
/* v221: the Guest guide editor (js/occasi-dash-pass.js, tab "Guest guide") */
.gg-group{padding-top:4px}
.gg-group>.btn{margin-top:10px}
.gg-block{border-top:1px solid var(--line2)}
.gg-block[open]{padding-bottom:16px}
.gg-block.is-hidden .gg-sum b,.gg-block.is-hidden .form{opacity:.6}
.gg-head{display:flex;align-items:center;gap:10px;min-height:var(--tap);padding:10px 0;cursor:pointer;list-style:none}
.gg-head::-webkit-details-marker{display:none}
.gg-head::after{content:"";flex:none;width:9px;height:9px;margin-right:6px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg) translateY(-3px);transition:transform .15s}
.gg-block[open]>.gg-head::after{transform:rotate(225deg) translateY(-2px)}
.gg-sum{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.gg-sum b{min-width:0;overflow-wrap:anywhere;font-size:16px}
.gg-sum small{flex-basis:100%;color:var(--muted);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gg-acts{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px}
.gg-acts .gg-mv{min-width:var(--tap);padding:0;font-size:17px}
.gg-acts .btn[disabled]{opacity:.35;cursor:not-allowed}
.gg-photo{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:start}
.gg-thumb{display:grid;place-items:center;width:72px;height:48px;border-radius:6px;border:1px solid var(--line);background:var(--bg);overflow:hidden;color:var(--muted)}
.gg-thumb img{width:100%;height:100%;object-fit:cover}
.gg-see{margin-top:4px}

/* v225: the send sheet's progress, holds and "Sent ✓"; "Texts show as" (sender name); Add mobile on rows and in the detail */
.sms-progress{display:flex;align-items:center;gap:10px;background:var(--mari-soft);color:var(--mari-ink);border-radius:12px;padding:12px 14px;font-size:14.5px;font-weight:600}
.sms-progress[hidden]{display:none}
.sms-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;flex:none;animation:sms-spin .8s linear infinite}
@keyframes sms-spin{to{transform:rotate(360deg)}}
.sms-hold{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:14px;display:grid;gap:6px;color:var(--ink2)}
.sms-hold ul{margin:0;padding-left:18px;display:grid;gap:4px}
.sheet-sent{display:grid;justify-items:center;text-align:center;gap:8px;padding:24px 8px 8px;outline:none}
.sheet-sent-mark{width:56px;height:56px;border-radius:50%;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center;font-size:28px;font-weight:700;animation:sms-pop .28s cubic-bezier(.2,.8,.2,1)}
@keyframes sms-pop{from{transform:scale(.6);opacity:0}}
.sheet-sent .sheet-title{font:500 24px/1.15 var(--serif)}
.sheet-sent .sms-note{color:var(--muted);font-size:14px}
.sheet-sent-balance{font-weight:600;font-size:15px}
.sheet-sent .form-actions{display:flex;justify-content:center;width:100%;margin-top:6px}
.sheet-sent .button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 28px;border-radius:var(--pill);border:1px solid var(--ink);background:var(--ink);color:#fff;font-weight:600;font-size:14.5px}
.sms-sender-meta{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:2px 10px;align-items:center;margin:4px 0}.sms-sender-meta>span+span:not(:only-child)::before{content:"";}
.sms-sender-tip{background:none;border:0;padding:0 2px;min-height:32px;color:var(--mari-ink);font-weight:600;text-decoration:underline;font-size:13px}
.sms-sender-phone{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:10px 12px;max-width:320px}
.sms-sender-avatar{width:36px;height:36px;border-radius:50%;background:#8e9399;color:#fff;display:grid;place-items:center;font-weight:600;flex:none}
.sms-sender-phone strong{display:block;font-size:15px}.sms-sender-phone small{color:var(--muted);font-size:12px}
.hh li .hh-add{grid-column:2;justify-self:start;margin:-8px 0 10px 14px;min-height:32px;padding:0 12px;border-radius:var(--pill);border:1px dashed var(--field);background:var(--paper);color:var(--ink);font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.hh li .hh-add:hover{border-style:solid}
.gd-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.gd-head .gd-name{margin:0}
.gd-edit{background:none;border:0;padding:0 6px;min-height:var(--tap);color:var(--mari-ink);font-weight:600;font-size:14px;text-decoration:underline;display:inline-flex;align-items:center;gap:4px}
.status-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.optout-note{font-size:13.5px;color:var(--ink2);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-top:6px}
.who li .who-act{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.who li .who-why{display:block;color:var(--muted);font-size:12.5px}
/* v275: rows that carry their own buttons (Send reminders, "Not texted this time") sat in a narrow right-aligned column
   beside the buttons; with large text the reason ran a word per line. They now stack: name and reason full width, the
   buttons below in one wrapping row, and the list grows with the sheet instead of scrolling in a small box. */
.who:has(> li > .who-act){max-height:none;overflow:visible}
.who li:has(> .who-act){flex-direction:column;align-items:stretch;gap:10px;padding:12px}
.who li:has(> .who-act) small{text-align:left}
.who li:has(> .who-act) .who-act{justify-content:flex-start;gap:8px}
.who li:has(> .who-act) .who-act .btn{white-space:nowrap}
@media (prefers-reduced-motion:reduce){.sms-spinner{animation:none;border-right-color:currentColor;opacity:.6}.sheet-sent-mark{animation:none}}
/* v225: while a sheet or dialog is open the page behind it stays put (scroll lock, see js/occasi-scroll-lock.js) */
dialog{overscroll-behavior:contain}
dialog .body,dialog .in{overscroll-behavior:contain}
/* ---------- v228 pre-publish check (usability brief §10): blockers, optional suggestions, the package and hosting ---------- */
.ppc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:0 0 18px;font-size:16px;line-height:1.5}
.ppc h2{font:600 22px/1.2 var(--serif);margin:0 0 8px}
.ppc-lead{margin:0 0 12px;padding:10px 12px;border-radius:var(--r-sm)}
.ppc-lead.is-block{background:var(--bad-soft);color:var(--bad)}
.ppc-lead.is-ok{background:var(--ok-soft);color:var(--ok)}
.ppc-list{list-style:none;padding:0;margin:0 0 10px;display:grid;gap:8px}
.ppc-item{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--line2);background:var(--bg)}
.ppc-item.is-block{border-left:4px solid var(--bad)}
.ppc-item.is-tip{border-left:4px solid var(--mari)}
.ppc-text{flex:1;min-width:0;overflow-wrap:anywhere}
.ppc-fix{flex:none;display:inline-flex;align-items:center;min-height:var(--tap);min-width:var(--tap);justify-content:center;padding:0 14px;border-radius:var(--pill);background:var(--ink);color:#fff;text-decoration:none;font-weight:600;font-size:15px}
.ppc-item.is-tip .ppc-fix{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.ppc-more{margin:0 0 10px}
.ppc-subh{font:600 16px/1.3 var(--sans);margin:4px 0 8px}
.ppc-terms{margin:6px 0 0;color:var(--ink2);font-size:15px}
.dcard .dwarn{display:block;margin:6px 0;color:var(--bad);font-size:14px;line-height:1.4}
/* v251 (B1): a household that joined through the shared link: the note in its detail, and the "Merge into…" list */
.joined-note{display:grid;gap:8px;justify-items:start;margin:10px 0 4px;padding:12px 14px;border:1px solid var(--line2);border-radius:12px;background:var(--mari-soft)}
.joined-note p{margin:0;color:var(--ink)}
.mpicks{display:grid;border:1px solid var(--line2);border-radius:12px;max-height:46vh;overflow:auto;margin:6px 0 12px}
.mpick{display:flex;align-items:center;gap:12px;min-height:var(--tap,44px);padding:8px 12px;border-top:1px solid var(--line2);cursor:pointer}
.mpick:first-child{border-top:0}
.mpick[hidden]{display:none}
.mpick input{width:20px;height:20px;flex:none;accent-color:var(--ink)}
.mpick span{display:grid;gap:2px;min-width:0}
.mpick b{font-size:15px;font-weight:600;overflow-wrap:anywhere}
.mpick small{color:var(--muted);font-size:12.5px}
.mpick:has(input:checked){background:var(--mari-soft)}
.mpick:focus-within{outline:2px solid var(--ink);outline-offset:-2px}

/* v252: Share -> Your own link (js/occasi-dash-tools.js, ownLink) */
.ownlink{display:grid;gap:8px;max-width:560px}
.ownlink .lab{font-size:13px;font-weight:600;color:var(--ink2)}
.ownlink-field{display:flex;align-items:stretch;min-height:50px;border:1px solid var(--field);border-radius:var(--r-sm);background:var(--paper);overflow:hidden}
.ownlink-field:focus-within{outline:2px solid var(--ink);outline-offset:1px}
.ownlink-field:has(input[aria-invalid=true]){border-color:var(--bad)}
.ownlink-host{display:flex;align-items:center;flex:none;padding:0 1px 0 12px;color:var(--muted);font-size:16px;white-space:nowrap;user-select:none}
.ownlink-field input{flex:1;min-width:0;border:0;background:transparent;padding:10px 12px 10px 0;font:inherit;font-size:16px;color:var(--ink);outline:none}
.ownlink-status{min-height:1.55em;font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.ownlink-status[data-kind=ok],.ownlink-status[data-kind=yours],.ownlink-status[data-kind=saved]{color:var(--ok);font-weight:600}
.ownlink-status[data-kind=taken],.ownlink-status[data-kind=reserved],.ownlink-status[data-kind=format],.ownlink-status[data-kind=limit],.ownlink-status[data-kind=not_live],.ownlink-status[data-kind=error]{color:var(--bad);font-weight:600}
.ownlink .help{font-size:12.5px;color:var(--muted)}
.ownlink .gactions{margin-top:2px}
/* v270: the serif's old-style figures made "1 request" read "I request", "Table 1" read "Table I" and "£10" read "£1o".
   Lining figures everywhere in the dashboards (couple, Pro, admin). The "font:" shorthand used across these sheets resets
   the figure style per element, so the feature is set on every element; tabular-nums still combines with it. */
body *,body{font-feature-settings:"lnum" 1 !important}
/* v270b: "Refresh payment status" sat flush under the last Publish card */
.embed #refresh-payment{margin-top:14px}
/* v270b spacing sweep: inside an editor section every block (field, switch row, card, menu, details) keeps at least
   14px from the one above. Zero specificity, so any rule that sets its own margin still wins. */
:where(.ed-sec) > :where(* + *){margin-top:14px}
.list-ed{gap:12px}
.ed-more .modes{margin:12px 0}
.ed-sec > .btn.danger{margin-top:20px}   /* v270b: "Remove this event" kept apart from the everyday buttons above it */
/* v270b: the editor tab pills (Words & photos · Design · Events & days · Publishing · Share link) keep 16px above the
   first box (on Publish the "Your invitation" box sat flush under them) */
#view > nav.chips{margin-bottom:16px}

/* v280 (time cuts): Your weekend, every event in one table; on a phone each event is a small card */
.wk-table{display:grid;gap:6px}
.wk-tr{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1.1fr) minmax(0,.8fr) minmax(0,1.3fr) minmax(0,1fr) auto;gap:6px;align-items:center}
.wk-th{font:600 11.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0 2px}
.wk-tr .in-t{min-height:40px;padding:8px 10px}
.wk-adults{min-height:40px;border:1px solid var(--field);border-radius:999px;background:var(--paper);color:inherit;padding:6px 12px;font:inherit;font-size:13px;white-space:nowrap;cursor:pointer}
.wk-adults[aria-checked="true"]{background:var(--ink,#1c1c1c);color:var(--paper,#fff);border-color:transparent}
.wk-new{border-top:1px dashed var(--field);padding-top:8px}
@media (max-width:760px){.wk-th{display:none}.wk-tr{grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--field);border-radius:var(--r-sm);padding:8px}.wk-tr>:first-child{grid-column:1/-1}.wk-tr>.wk-adults,.wk-tr>.btn{justify-self:start}.wk-new{border-style:dashed}}

/* v281: Picture in your guests' emails (Share & QR) */
.ep-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:18px;align-items:start}
.ep-grid .checks{display:grid;gap:8px}
.ep-own{margin-top:12px;display:grid;gap:10px}
.ep-crop{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.ep-crop canvas{width:144px;height:auto;border-radius:8px;background:var(--field)}
.ep-ctl{display:grid;gap:8px}
.ep-preview{border:1px solid var(--field);border-radius:14px;background:var(--paper);padding:18px 16px;text-align:center}
.ep-preview img{display:block;margin:0 auto 12px;max-width:100%;height:auto;border-radius:8px}
.ep-preview img.ep-card{width:144px}
.ep-preview img.ep-band{width:100%}
.ep-names{font:400 22px/1.2 var(--serif,serif);margin:0}
.ep-date{margin:4px 0 0;color:var(--muted)}
@media (max-width:760px){.ep-grid{grid-template-columns:minmax(0,1fr)}.ep-crop{grid-template-columns:minmax(0,1fr)}.ep-crop canvas{width:144px;justify-self:center}}
/* v285 (podcast gems #2, #5): kind wordings as tone buttons; both families' names */
.kind-words { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0 12px; }
.kind-words .lab { flex-basis: 100%; margin: 0; }
.kw-box { padding-bottom: 4px; }
.families { margin: 4px 0 12px; }
.families > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
/* v285 (podcast gem #8): the call sheet in the event editor: time and words on one row, the tagged guests as chips */
.call-row { display: flex; gap: 8px; align-items: flex-end; }
.call-row .call-time { flex: 0 0 112px; }
.call-row .grow { flex: 1 1 auto; min-width: 0; }
.call-row > .btn { flex: 0 0 auto; margin-bottom: 4px; }
.call-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.call-who .lab { margin: 0; }
.call-tag { display: inline-flex; align-items: center; gap: 2px; padding-right: 2px; }
.call-tag .link { min-width: 44px; min-height: 44px; margin: -6px -8px -6px -6px; font-size: 18px; line-height: 1; }   /* a full 44 px tap target that does not make the chip taller */
.call-line { padding-bottom: 8px; border-bottom: 1px solid var(--line, #e7e0d6); margin-bottom: 8px; }
.call-which { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0; }
.call-which .btn { max-width: 100%; white-space: normal; text-align: left; }
@media (max-width: 400px) { .call-row { flex-wrap: wrap; } .call-row .call-time { flex: 1 1 100px; } .call-row .grow { flex-basis: 100%; order: 3; } }
/* v285 (podcast gem #7): final numbers on Numbers: the date they were saved and what changed since */
.final-card h2 { margin: 0 0 4px; }
.final-ch { margin: 8px 0; }
.final-ch summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.final-ch ul { padding-left: 18px; margin: 8px 0 0; }
.final-ok { display: flex; align-items: center; gap: 6px; margin: 8px 0; }
/* v285 (podcast gem #4): printed reminder cards, above the households still to reply */
.rm-cards { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 10px 0; }
.rm-cards .help { flex: 1 1 240px; margin: 0; font-size: 13.5px; color: var(--muted); }
/* v285 (podcast gem #10): costs couples forget, one tap each to add to the budget */
.bgt-forgot summary { display: flex; align-items: baseline; gap: 10px; cursor: pointer; min-height: var(--tap); }
.bgt-forgot summary .ed-h3 { margin: 0; }
.bgt-forgot summary small { color: var(--muted); }
.forgot-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.forgot { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; cursor: pointer; }
.forgot .tick { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); }
.forgot .tick svg { width: 16px; height: 16px; }
.forgot b { display: block; font-weight: 600; }
.forgot small { display: block; color: var(--muted); font-size: 13px; line-height: 1.4; margin-top: 2px; }
.forgot.on { border-color: var(--ink2); background: var(--bg); }
.forgot.on .tick { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* v285 (chk-r8): a counted box longer than the design's limit (kept whole; the board ends it in "…") */
.in-t.is-over { border-color: #9a4b16; box-shadow: inset 0 0 0 1px #9a4b16; }