/* v234 (usability brief Part 12): navigation, Home stages, guest filters, "Recorded by you", connection.
   Loaded after css/occasi-dash.css; js/occasi-dash-usab.js builds the markup. Calm: no motion, status never by colour alone. */

/* phones: 16 px body text, nothing under 14 px in the bar */
@media (max-width:759px){
  body{font-size:16px}
}

/* ---------- the dock: Home · Invitation · Guests · Guest Pass · Planning · More ---------- */
.dock{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
.dock a,.dock button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;min-width:0;border:0;background:none;border-radius:14px;text-decoration:none;font:500 14px/1.15 var(--sans);color:var(--ink);text-align:center;padding:0 2px;cursor:pointer}
.dock a span,.dock button span{max-width:100%;overflow-wrap:anywhere}
.dock button[aria-current=page]{background:var(--ink);color:#fff}
.dock a svg.i,.dock button svg.i{font-size:20px;flex:none}
@media (max-width:759px){
  .dock.has-pass .d-plan{display:none}
}
@media (min-width:1101px){
  .dock a,.dock button{flex-direction:row;gap:8px;min-height:46px;padding:0 16px;border-radius:var(--pill);font-size:15px}
}
@media (min-width:1101px) and (max-width:1380px){
  .dock a,.dock button{padding:0 11px;font-size:14px;gap:6px}
}

/* ---------- each destination's tabs ---------- */
.chip[aria-current=page]{background:var(--ink);border-color:var(--ink);color:#fff}
.subtabs{margin-top:16px}
.subtabs .chip,.gtabs .chip{font-size:14px}

/* ---------- More ---------- */
.more-h{font:600 14px/1.3 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:18px 0 4px}
.more-h:first-child{margin-top:0}
.more-list li a{min-height:var(--tap)}
.more-preview{margin-top:16px}

/* ---------- the sample's stage switch ---------- */
.stage-switch{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0 16px;padding:10px 12px;border:1px dashed var(--field);border-radius:var(--r)}
.stage-switch .ss-l{font-weight:600;font-size:14px;margin-right:4px}
.stage-switch small{flex-basis:100%;font-size:14px}

/* ---------- before publishing ---------- */
.setup{margin:8px 0 22px}
.setup-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.setup-top h2{font:500 28px/1.1 var(--serif)}
.setup-n{font-weight:600}
.setup-replyby{margin:10px 0 0;font-size:15px;color:var(--ink2)}
.setup-bar{height:8px;border-radius:8px;background:var(--line2);margin:12px 0 6px;overflow:hidden}
.setup-bar i{display:block;height:100%;background:var(--ink)}
.setup-steps{list-style:none;padding:0;margin:8px 0 16px;display:grid;gap:2px}
.setup-steps li{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:var(--tap);border-top:1px solid var(--line2)}
.setup-steps a{color:var(--ink);text-decoration:none;font-weight:500;min-height:var(--tap);display:flex;align-items:center}
.setup-steps a:hover{text-decoration:underline}
.st-mark{width:22px;height:22px;border-radius:50%;border:2px solid var(--field);display:grid;place-items:center}
.is-done .st-mark{background:var(--ok);border-color:var(--ok);color:#fff}
.is-done .st-mark svg.i{font-size:14px}
.is-next .st-mark{border-color:var(--ink);border-width:3px}
.st-word{font-size:14px;color:var(--muted)}
.is-done .st-word{color:var(--ok);font-weight:600}
.is-next .st-word{color:var(--ink);font-weight:600}
.is-done a{color:var(--muted)}
.req-list{list-style:none;padding:0;margin:0 0 8px}
.req-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line2)}
.req-list li::before{content:none}
.req-sec .req-list li span::before{content:"Required · ";font-weight:600;color:var(--bad)}
.req-list.is-opt li span::before{content:"Optional · ";font-weight:600;color:var(--muted)}
.okline{display:flex;gap:8px;align-items:center;justify-content:flex-start;text-align:left;font-size:15px}

/* ---------- near the day / after the wedding ---------- */
.near,.after{margin:18px 0}
.near-list{list-style:none;padding:0;margin:0}
.near-list li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line2)}
.near-list li p{margin:0}
.near-list .ic svg.i{font-size:20px}
.near-h3{font:600 15px/1.3 var(--sans);margin:16px 0 8px}
.near-day{margin-top:12px}
@media (max-width:520px){.near-list li,.req-list li{grid-template-columns:28px minmax(0,1fr)}.near-list li .btn{grid-column:2;justify-self:start}.req-list li{grid-template-columns:minmax(0,1fr)}.req-list li .btn{justify-self:start}}

/* ---------- Home: per-event totals are links ---------- */
.ev .big a{color:inherit;text-decoration:none;display:inline-flex;align-items:baseline;gap:6px;min-height:var(--tap)}
.ev .big a:hover span,.ev-links a:hover{text-decoration:underline}
.ev-links a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;display:inline-block;min-height:32px;line-height:32px}

/* ---------- Guests: filters in use, per-event states ---------- */
.active-filters{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:12px 0 0;padding:8px 10px;background:var(--line2);border-radius:var(--r-sm)}
.af-l{font-weight:600;font-size:14px}
.fchip{background:var(--paper)}
.active-filters .link{min-height:var(--tap);padding:0 6px;font-size:14px}
.af-n{margin-left:auto;font-size:14px;color:var(--muted)}
.hh-st.x{color:var(--muted);font-weight:500;font-style:italic}
.sw.x{background:none;box-shadow:inset 0 0 0 2px var(--line);position:relative}
.sw.x::after{content:"";position:absolute;left:1px;right:1px;top:50%;height:2px;background:var(--field);transform:rotate(-45deg)}
.gl-tiles:has(.is-ni){grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:759px){.gl-tiles:has(.is-ni){grid-template-columns:1fr}}

/* ---------- "Recorded by you" ---------- */
.rec-tag{margin:8px 0}
.rec-tag .tag{display:inline-flex;align-items:center;gap:6px;font-size:14px;background:var(--mari-soft);color:var(--mari-ink);border-radius:var(--pill);padding:3px 10px}
.rec-tag .tag svg.i{font-size:14px}

/* ---------- connection / failed save ---------- */
.conn{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px var(--gutter);background:var(--bad-soft);color:var(--bad);font-size:15px;border-bottom:1px solid var(--bad)}
.conn[hidden]{display:none}
.conn-ic{width:22px;height:22px;border-radius:50%;background:var(--bad);color:#fff;display:grid;place-items:center;font-weight:700;flex:none}

/* lead (24 Oct): the last content on every screen scrolls clear of the dock (phone bar or the floating pill) */
.main{padding-bottom:calc(var(--dock-h) + 96px + env(safe-area-inset-bottom))}
@media (min-width:1101px){.main{padding-bottom:170px}}
.ad-over{font-weight:600;font-size:14px;margin-left:4px}
.imp-map,.imp-sum{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 14px;margin:12px 0}
.imp-map h3{font:600 15px/1.3 var(--sans);margin-bottom:6px}
.imp-map ul,.imp-sum ul{margin:4px 0 0;padding-left:18px}
.imp-sum{background:var(--line2)}
.imp-map ul.imp-cols{list-style:none;padding-left:0}.imp-cols li{margin:6px 0}.imp-cols label{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.imp-cols b{min-width:84px}.imp-cols select{flex:1 1 150px;min-width:0;max-width:100%;min-height:40px}

/* ---------- seating: confirm, event, meals, flags ---------- */
.seat-confirm{border:2px solid var(--ink)}
.seat-for{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:10px 0}
.seat-for .pick{min-width:240px}
.seat-for .help{margin:0}
/* v285 (tester u16 S4, 360 px): the select sits inside its label box, so its own focus ring cut through the label; ring the box */
.pick select:focus-visible{outline:none}
.pick:has(select:focus-visible){outline:3px solid var(--mari);outline-offset:3px}
.seat-for .seat-for-saved{margin:0;flex-basis:100%;font-weight:600}
.tmeals{margin:8px 0 0;color:var(--ink2);font-size:14px}
.stale{border:1px solid var(--bad);background:var(--bad-soft);border-radius:var(--r-sm);padding:10px 14px;margin:12px 0}
.stale h3{display:flex;gap:8px;align-items:center;font:600 15px/1.3 var(--sans);color:var(--bad);margin-bottom:6px}
.stale ul{list-style:none;margin:0;padding:0}
.stale li{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:6px 0;border-top:1px solid #e9c9c4}

/* ---------- Guest Pass: each household sees its own ---------- */
.pass-note{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;margin:14px 0 4px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper)}
.pass-note p{margin:0 0 8px}
.pass-note .ic svg.i{font-size:20px}
.pn-state{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px}
.pn-mark{width:20px;height:20px;border-radius:50%;border:2px solid var(--field);display:grid;place-items:center;flex:none}
.pn-mark.is-live{background:var(--ok);border-color:var(--ok);color:#fff}
.pn-mark svg.i{font-size:12px}
.aud{margin:0 0 10px;padding:8px 12px;background:var(--line2);border-radius:var(--r-sm);font-size:15px}

/* ---------- readable everywhere: nothing under 14 px in the dashboard's own words; 44 px targets ---------- */
.mirror-fab{font-size:14px}
@media (max-width:389px){
  .top{gap:6px}
  .mirror-fab{padding:0 12px}
  .mirror-fab .eye{display:none}
  .brand{font-size:22px}
}
#view .chip.small,#view .pick>span,#view .help.small,#view .muted.small,#view .small.muted,#view small,#view .tag,#view .eyebrow,
#view .seat-status,#view .gchip,#view .hh-head,#view .hh-head .codes span,#view .hh-add,#view .more-row,#view .ev .sub,#view .ev .t,
#view .ok-line,#view .legend span,#view .flag,#view .ad-k,#view .act-day,#view .gl-k,#view .qa-l,#view .tdisc small,#view .tl-strip span,
#view .horizon small,#view .horizon span,#view .day h3,#view .days h3 b,#view .stage-switch .chip{font-size:14px}
#view .hh-add{min-height:var(--tap);display:inline-flex;align-items:center}
.sheet small,.sheet .help,.sheet .small{font-size:14px}
#view .evlist h4,#view .ed-more .checks label,#view .num dt,#view .num dd,#view .num dt b,#view .num li,#view .num .gname,
#view .pool-h .n,#view .tnames .cn,#view .tnames .gname,#view .home-pair .count,#view .act-sec em{font-size:14px}
/* the initials on a chair are a picture of the table (each chair is named in full for screen readers) */

/* v240: the guided tour (js/occasi-dash-tour.js): a dimmed page, a cut-out around the real element and a small card */
.otour{position:fixed;inset:0;z-index:2147483000}
.otour-catch{position:absolute;inset:0}
.otour-hole{position:fixed;border-radius:14px;box-shadow:0 0 0 2px var(--paper),0 0 0 5px var(--ink),0 0 0 200vmax rgba(28,24,20,.58);pointer-events:none;transition:left .22s ease,top .22s ease,width .22s ease,height .22s ease}
.otour-wait .otour-hole{box-shadow:0 0 0 200vmax rgba(28,24,20,.58)}
.otour-card{position:fixed;background:var(--paper);color:var(--ink);border:1px solid var(--ink);border-radius:16px;box-shadow:var(--shadow);padding:16px 18px 14px;max-width:calc(100vw - 32px);box-sizing:border-box;transition:left .22s ease,top .22s ease}
.otour-card:focus{outline:3px solid var(--ink);outline-offset:3px}
.otour-card h2{font-family:var(--serif);font-weight:500;font-size:24px;line-height:1.15;margin:2px 0 6px}
.otour-card p{margin:0;font-size:15px;line-height:1.45}
.otour-card .otour-n{font-size:13px;color:var(--muted);letter-spacing:.04em}
.otour-acts{display:flex;align-items:center;gap:8px;margin-top:14px;flex-wrap:wrap}
.otour-acts .otour-sp{flex:1}
.otour-acts .btn{min-height:var(--tap)}
.otour-still .otour-hole,.otour-still .otour-card{transition:none}
@media (prefers-reduced-motion:reduce){.otour-hole,.otour-card{transition:none}}
/* v240: the preview's Invitation | Guest Pass switch, with every moment under More moments */
.mview{align-self:stretch;justify-content:stretch}
.mview button{flex:1;justify-content:center}
.mmore{min-width:0;align-self:center}
.mmore summary{min-height:var(--tap);display:flex;align-items:center;cursor:pointer;font-weight:600;font-size:14px;padding:0 6px}
.mmore[open]{grid-column:1 / -1}
.mmore-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
/* v240: Start again (js/occasi-dash-restart.js) */
.restart-opt{padding:14px 16px;margin:12px 0;display:grid;gap:8px;justify-items:start}
.restart-opt h3{margin:0;font-size:17px}
.restart-opt p{margin:0}
.restart-opt.danger-card{border-color:var(--bad)}
.restart-list{margin:6px 0 12px;padding-left:20px;display:grid;gap:4px}
.danger-text{color:var(--bad);border-color:var(--bad)}
/* v240 (customer research): nothing sits under the floating dock on a computer (toasts, the selection bar, the last card) */
@media (min-width:1101px){:root{--dock-h:84px}.main{padding-bottom:calc(var(--dock-h) + 64px)}}
/* one slim sample bar; on a phone the sample's stage switch and wedding-day strip open from it */
.demo-band{display:flex;align-items:center;justify-content:center;gap:6px 12px;flex-wrap:wrap;padding:4px var(--gutter);min-height:36px}
.demo-band[hidden]{display:none}
/* v285 item d: the bar drawn by couple.html before the app arrives (html[data-sample] from js/occasi-dash-route.js) */
.demo-band.db-boot{display:none}
html[data-sample] .demo-band.db-boot{display:flex}
html[data-sample] .demo-band .db-t[data-for]{display:none}
html[data-sample="light"] .demo-band .db-t[data-for="light"],html[data-sample="new"] .demo-band .db-t[data-for="new"],html[data-sample="quick"] .demo-band .db-t[data-for="quick"]{display:inline}
html[data-sample="quick"] .demo-band .db-views{display:none}
.demo-band .db-views{font-weight:600;min-height:36px;text-decoration:underline}
.demo-band .db-x{display:inline-grid;place-items:center;width:36px;height:36px;border:0;background:transparent;color:inherit;border-radius:50%}
.demo-band .db-x .i{width:18px;height:18px}
@media (min-width:760px){.demo-band .db-views{display:none}}
@media (max-width:759px){body.is-sample:not(.sample-open) #view .stage-switch,body.is-sample:not(.sample-open) #view .td-strip{display:none}}
/* v240: the top bar fits a 390 px phone with the "?" (Help, guide and the tour): the preview button says "Preview" */
.mirror-fab .fab-short{display:none}
@media (max-width:479px){
  .top{gap:6px}
  .mirror-fab{padding:0 14px}
  .mirror-fab .eye{display:none}
  .mirror-fab .fab-long{display:none}
  .mirror-fab .fab-short{display:inline}
}
@media (max-width:759px){.demo-band{font-size:13px;line-height:1.3}}
/* v240: guest columns name their events (short names on a computer; numbered with a legend on a phone) */
.codes span i{font-style:normal}
.codes .cn{display:none}
.ev-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 0 4px;font-size:14px;color:var(--muted)}
.ev-legend b{color:var(--ink)}
@media (min-width:760px){
  .ev-legend{display:none}
  .hh,.hh-head{--dcol:56px}
  .codes span{width:var(--dcol);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
  .codes .cn{display:inline}.codes .cx{display:none}
  .evdots i{margin:0 calc((var(--dcol) - var(--dw,18px)) / 2)}
}

/* ---- v244 (usability study #2) ---------------------------------------------------------------------------------- */
/* #3 one publish model: the classic panel's own checklist is shown once, as the check's blockers above */
#pub-host p:has(+ .publish-checklist), #pub-host .publish-checklist { display: none; }
/* #4 the send and reminder sheet is full height on phones, the list inside no longer a small scroll box */
@media (max-width: 767px) {
  .sheet.tall { height: 92dvh; }
  .sheet.tall .in { height: 100%; }
  .sheet.tall .who { max-height: none; overflow: visible; }
}
/* #6 a partner sees who tops up texts instead of a Top up button they can't use */
.sms-topsup { display: block; margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--ink2, #4a4a4a); }
/* #13 the dock steps out of the way on the way down a page and comes back on the way up (js/occasi-dash-app.js) */
/* v273: the dock used to fade as it went, so mid-fade the page text showed through it. It now slides away fully
   opaque, and hides only once it is off the screen. */
.dock { transition: translate .25s ease, visibility 0s; }
.dock.is-tucked { translate: 0 calc(100% + 28px); visibility: hidden; pointer-events: none; transition: translate .25s ease, visibility 0s .25s; }
@media (prefers-reduced-motion: reduce) { .dock, .dock.is-tucked { transition: none; } }
/* #14 a laptop's Home opens on the numbers too: the sample's stage switch and wedding-day mode sit behind "Sample views"
   in the sample bar, as on a phone */
@media (min-width: 760px) {
  .demo-band .db-views { display: inline-flex; align-items: center; }
  body.is-sample:not(.sample-open) #view .stage-switch, body.is-sample:not(.sample-open) #view .td-strip { display: none; }
}
/* #15 the preview: no Desktop | Mobile switch on a phone (it only ever shows the phone there); its labels at 12 px */
@media (max-width: 767px) { .devsw:not(.mview) { display: none; } }
.pickers .pick > span { font-size: 12px; }
/* v246: Fix in the check before publishing (js/occasi-dash-fixguide.js): the field is ringed, a small card steps through every issue; the page stays usable */
.fixg{position:fixed;left:50%;transform:translateX(-50%);bottom:96px;z-index:2147482000;background:var(--paper);color:var(--ink);border:1px solid var(--ink);border-radius:16px;box-shadow:var(--shadow);padding:14px 16px 12px;width:min(420px,calc(100vw - 32px));box-sizing:border-box}
.fixg-n{margin:0 0 4px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fixg-t{margin:0 0 10px;font-size:16px;line-height:1.4}
.fixg-b{display:flex;gap:8px;align-items:center}
.fixg-done{margin-left:auto}
.fixg-ring{outline:3px solid var(--mari);outline-offset:4px;border-radius:10px;animation:fixg-pulse 1.2s ease-in-out 3}
@keyframes fixg-pulse{50%{outline-offset:9px}}
@media (min-width:1100px){.fixg{left:calc((100vw - var(--mirror)) / 2)}}
@media (prefers-reduced-motion:reduce){.fixg-ring{animation:none}}
/* v283: while a part is ringed, the "You changed something guests see" notice stays where it is instead of sticking over the ring */
body:has(.fixg-ring) .tell-slot{position:static}

/* ---- v257 (usability study #3) ---------------------------------------------------------------------------------- */
/* #3 a household that joined through the shared link: a small badge beside its name */
.jbadge{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;background:var(--mari-soft);color:var(--mari-ink);font:600 13px/1.4 var(--sans);vertical-align:1px;white-space:nowrap}
/* #2 after a merge: each person's state in one calm line */
.tag.tag-people{text-transform:none;letter-spacing:0;font-size:13px;line-height:1.35;flex-wrap:wrap}
/* #11 guest columns: the event's colour and two letters (phones), the same pairs in the line above */
.hh-head .codes span{border-bottom:3px solid var(--c,transparent);padding-bottom:2px}
.ev-legend .evsw{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--c);margin-right:6px;vertical-align:0}
.ev-legend b{margin-right:3px}
@media (max-width:759px){.hh,.hh-head{--dw:22px;--dg:4px}#view .hh-head .codes span{font-size:13px}}
/* #9 search lands on the part: ringed for a moment, below the sticky top bar */
.landed{outline:3px solid var(--mari);outline-offset:6px;border-radius:12px;transition:outline-color .8s ease}
.film-panel,#own-link,#acc-settings,#acc-restart,#g-active,.acct li{scroll-margin-top:calc(var(--top) + 16px)}
@media (prefers-reduced-motion:reduce){.landed{transition:none}}
/* #16 laptop: the floating dock sits on a calm strip, so it never covers a row with words or buttons at rest */
@media (min-width:760px){
  body::after{content:'';position:fixed;left:0;bottom:0;width:calc(100vw - var(--mirror));height:92px;background:linear-gradient(to bottom,rgba(251,251,248,0),var(--bg) 42%);z-index:29;pointer-events:none}
  body.no-mirror::after{width:100%}
  html{scroll-padding-bottom:104px}
}
/* v265 (owner, 27 Oct 2026, fix #5): the simpler phone dashboard. Phones only (the JS draws these parts below 760 px). */
.gl-status.ph-share{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.ph-share-btn{width:100%;justify-content:center;min-height:48px;font-size:16px;gap:8px}
.ph-all{margin:4px 0 0}
.ph-all .btn{width:100%;justify-content:center;min-height:44px}
.ph-rest[hidden]{display:none}
.hh-phone .hh-right{gap:4px;align-content:center}
.evsum{font-size:13px;line-height:1.25;color:var(--muted);white-space:nowrap}
.evsum.all{color:var(--ok)}
.evsum.some{color:var(--mari-ink)}
.ad-hint{margin:2px 0 8px;font-size:13px}
.ad-side-list li.total{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;min-height:48px;padding:8px 0;border-top:1px solid var(--line);font-weight:600}
.ad-side-list li.total .ad-sv{font-weight:600}
@media (max-width:759px){
  .ad-side-list li.total{grid-column:1 / -1}
}
@media (max-width:759px){
  /* v265: no row of tabs or filters runs off a phone's screen; they wrap */
  #view .chips.subtabs,#view .chips.gfilt{flex-wrap:wrap;overflow:visible;margin-left:0;margin-right:0;padding-left:0;padding-right:0}
}
/* v270 readability (older couples and parents with large text): the small print up a step, same look */
.evsum{font-size:14px}
.ad-sides .help,.jbadge{font-size:14px}
.tag{font-size:12.5px}
.msg .k{font-size:12.5px}
.msg-item time,.past time,.who li .who-why{font-size:13.5px}
.bgt-sum .lab{font-size:13.5px}
/* v270: a list row with two buttons (Review / Decline on Planner & venue access) squeezed its text to one word per
   line on phones. The buttons move under the text there. */
@media (max-width:759px){
  .lines>li:has(> :nth-child(3) .btn ~ .btn){grid-template-columns:36px minmax(0,1fr)}
  .lines>li>:nth-child(3):has(.btn ~ .btn){grid-column:2/-1;display:flex;gap:8px;flex-wrap:wrap}
}
.lines small{font-size:14px}
/* v270: the reply links on each event card ("0 declined · 6 awaiting reply") were 32px tall; now a full 44px to tap */
.ev-links a{display:inline-flex;align-items:center;min-height:44px}
/* v270 (narrow phones and large text): a list row's link or button ("Send us a message", "Download") goes under the
   text instead of squeezing it into a narrow column */
@media (max-width:420px){
  .lines>li:has(> :nth-child(3) :is(a,button)),.lines>li:has(> :nth-child(3):is(a,button)){grid-template-columns:36px minmax(0,1fr)}
  .lines>li>:nth-child(3):is(a,button),.lines>li>:nth-child(3):has(:is(a,button)){grid-column:2/-1;justify-self:start}
}
/* v284 (behind a flag): Start over (js/occasi-dash-startover.js) */
.so-sheet .body>p:first-child{margin-top:0}
.so-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.so-facts p{margin:0;background:var(--mari-soft);border-radius:12px;padding:10px 12px}
.so-facts b{display:block;font:500 24px/1.1 var(--serif)}
.so-facts span{font-size:13px;color:var(--ink2)}
.so-opts,.so-pick,.so-undo{list-style:none;margin:8px 0;padding:0;display:grid;gap:8px}
.so-opt,.so-row{width:100%;display:flex;gap:12px;align-items:flex-start;text-align:left;background:var(--paper);border:1px solid var(--line2);border-radius:14px;padding:10px 12px;min-height:var(--tap);font:inherit;color:inherit;cursor:pointer}
.so-opt .n{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;font:500 15px/1 var(--serif)}
.so-opt b,.so-row b{display:block;font-size:16px}
.so-opt small,.so-row small{display:block;color:var(--ink2);font-size:13.5px;margin-top:2px}
.so-opt .chev{margin-left:auto;align-self:center;color:var(--ink2)}
.so-opt.danger{color:var(--bad)}
.so-opt.danger small{color:var(--ink2)}
.so-opt:disabled,.so-row:disabled{opacity:.5;cursor:default}
.so-row{flex-direction:column;gap:0}
.so-undo li{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid var(--line2);padding:6px 0}
.so-undo small{color:var(--ink2)}
.so-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 12px}
.so-cols>div{border:1px solid var(--line2);border-radius:14px;padding:10px 12px}
.so-cols h4{margin:0 0 6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.so-cols ul{margin:0;padding-left:16px;font-size:13.5px;display:grid;gap:3px}
.so-note{border-left:3px solid var(--mari);background:var(--mari-soft);padding:10px 12px;border-radius:0 12px 12px 0;font-size:14px}
.so-note.red{border-left-color:var(--bad);background:var(--bad-soft);color:var(--ink)}
.so-sheet .foot .so-del:disabled{opacity:.45}
.sec-h:has(>.so-menu){position:relative;padding-right:48px}
.so-menu{position:absolute;right:-6px;top:-8px}
.so-menu summary{list-style:none;cursor:pointer;width:var(--tap);height:var(--tap);display:grid;place-items:center;border-radius:50%;font-size:20px;line-height:1}
.so-menu summary::-webkit-details-marker{display:none}
.so-menu summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.so-menu [role=menu]{position:absolute;right:0;top:calc(100% + 4px);z-index:5;min-width:220px;background:var(--paper);border:1px solid var(--line2);border-radius:14px;box-shadow:var(--shadow);padding:6px;display:grid}
.so-menu [role=menu] button{text-align:left;background:none;border:0;border-radius:10px;padding:0 12px;min-height:var(--tap);font:inherit;color:inherit;cursor:pointer}
.so-menu [role=menu] button:hover,.so-menu [role=menu] button:focus-visible{background:var(--mari-soft)}
.so-hidden{margin:6px 0 0;font-size:13.5px;color:var(--bad);width:100%}
.so-hidden .linkish{background:none;border:0;padding:0 2px;font:inherit;font-weight:600;color:var(--ink);text-decoration:underline;cursor:pointer;min-height:24px}
/* v285 (usability #6): a mobile that isn't saved is a note, not an error; event names matched to the invitation's */
.imp-row .why.warn{color:var(--warn,#8a5a12)}
/* v285 (fresh triple run): a person listed twice, or already on the list, is shown but not added */
.imp-row.imp-skip td input:not([type=checkbox]){text-decoration:line-through;color:var(--muted,#6b6259)}
/* v285 (round-3 S2 #3): a child marker the list couldn't read: its Child box is marked for the couple to tick */
.imp-table td.imp-ask{background:var(--warn-soft,#fbf0dc);box-shadow:inset 0 0 0 2px var(--warn,#8a5a12);border-radius:6px}
.imp-evmap ul{list-style:none;padding-left:0}
.imp-evmap li{margin:8px 0}
.imp-evmap label{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.imp-evmap select{min-height:44px;max-width:100%;font:inherit;border:1px solid var(--line);border-radius:var(--r-sm);padding:0 10px;background:var(--card,#fff)}
/* v285 (#6): the import result lists read as a name with its reason under it, left-aligned */
.who.imp-done li small.who-why{text-align:left;margin-top:2px}
/* v285: Still to reply (js/occasi-dash-remind.js) */
.rm-events{list-style:none;padding:0;margin:4px 0 14px;display:flex;flex-wrap:wrap;gap:6px}
.rm-events li{font:500 13px/1.2 var(--sans);padding:6px 10px;border:1px solid var(--line);border-radius:999px}
.rm-auto{margin:0 0 14px;display:grid;gap:10px}
/* v285 item e: Guests "Remind the N who opened"; Still to reply showing only them (js/occasi-dash-seen.js) */
.seen-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:12px 0 0}
.seen-line .help{margin:0}
.seen-only{margin:0 0 12px}
.seen-only a{white-space:nowrap}
.rm-auto h2{margin:0;font:600 17px/1.3 var(--sans)}
.rm-auto-row{display:grid;gap:6px;padding-top:10px;border-top:1px solid var(--line)}
.rm-auto-row p{margin:0}
.rm-auto-row .btn{justify-self:start}
.rm-when{list-style:none;padding:0;margin:0;display:grid;gap:4px;font-size:14px}
.rm-msg{margin:0 0 12px;border:1px solid var(--line);border-radius:12px;padding:8px 14px}
.rm-msg summary{cursor:pointer;font-weight:600;min-height:40px;display:flex;align-items:center}
.rm-msg textarea{width:100%;min-height:104px;font:inherit}
.rm-list{list-style:none;padding:0;margin:0}
.rm-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:12px 0;border-top:1px solid var(--line)}
.rm-who{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:0}
.rm-who small{flex-basis:100%;color:var(--ink2)}
.rm-row .gactions{margin:0;display:flex;flex-wrap:wrap;gap:6px;width:100%}
.rm-row .gactions>.btn{width:auto;flex:1 1 auto;justify-content:center;padding:0 14px;order:0;white-space:nowrap}
@media (min-width:640px){.rm-row .gactions{width:auto}.rm-row .gactions>.btn{flex:0 0 auto}}

/* v285 (tester u17 S3): with a household open at 1280 the list is about 360px wide, and the event columns squeezed a long
   name to a letter a line. A name keeps at least 14 characters a line (half the row on a narrow phone); a narrow list numbers its event columns, with the
   legend that names them (as on a phone). */
.hh .open{grid-template-columns:minmax(min(14ch,50%),1fr) auto}
#g-rows{container-type:inline-size}
@container (max-width:560px){
  .ev-legend{display:flex}
  .hh,.hh-head{--dcol:30px !important}
  .codes .cn{display:none}.codes .cx{display:inline}
}
/* v285.4 (tester v2863 S3): on a phone "Viewing as" and "Jump to a page" stack, so the chosen guest reads in full
   (side by side at 360 it was cut to "A guest (sam…") */
@media (max-width:420px){.pickers{grid-template-columns:minmax(0,1fr)}.mmore{align-self:stretch}}

/* item 24: an event with no seating plan, a calm line instead of the plan */
.seat-off{display:grid;gap:8px;justify-items:start;margin:12px 0}
.seat-off h3{margin:0;font-size:18px}
.seat-off p{margin:0}