/* ============================================================
   app.css — "Counter Note": a warm printed-card look rather than
   a web form. Serif for the names of places, mono for facts and
   labels, one oxblood action colour for the thing that actually
   books, one green for marks the guest makes herself.

   Trip-agnostic. Nothing here needs editing for a new visit.
   Fonts are system faces (Iowan Old Style ships on iOS, which is
   what the guest reads this on) so there is nothing to download
   on hotel wifi and nothing to fall back from.
   ============================================================ */

:root{
  --page:#E2DDD0; --surface:#FFFEFB; --surface-2:#F1EDE3;
  --rule:#C9C1AE; --rule-soft:#EBE5D8;
  --ink:#1E1B16; --ink-2:#4C463B; --ink-3:#635C4E;
  --seal:#7A1F32; --seal-bg:#7A1F32; --seal-fg:#FFFFFF; --seal-soft:#F6E9EA;
  --mark:#2F5233; --mark-bg:#2F5233; --mark-fg:#FFFFFF; --mark-soft:#EFF3EC;
  --warn:#8A4B00; --warn-soft:#F8EEDF;
  --shadow:0 1px 1px rgba(58,46,28,.05),0 3px 10px rgba(58,46,28,.06);
  --serif:"Iowan Old Style",Charter,ui-serif,Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,system-ui,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --page:#181511; --surface:#221E19; --surface-2:#2B2620;
    --rule:#3F3830; --rule-soft:#2F2A24;
    --ink:#F0EBE1; --ink-2:#C6BEAD; --ink-3:#9E9584;
    --seal:#E9A3B0; --seal-bg:#8E2438; --seal-fg:#FFF4F5; --seal-soft:#2A1519;
    --mark:#92C29D; --mark-bg:#33683F; --mark-fg:#F2F8F1; --mark-soft:#1B2A1E;
    --warn:#E0A45C; --warn-soft:#2A1F11;
    --shadow:0 1px 1px rgba(0,0,0,.3),0 3px 10px rgba(0,0,0,.32);
  }
}
:root[data-theme="dark"]{
  --page:#181511; --surface:#221E19; --surface-2:#2B2620;
  --rule:#3F3830; --rule-soft:#2F2A24;
  --ink:#F0EBE1; --ink-2:#C6BEAD; --ink-3:#9E9584;
  --seal:#E9A3B0; --seal-bg:#8E2438; --seal-fg:#FFF4F5; --seal-soft:#2A1519;
  --mark:#92C29D; --mark-bg:#33683F; --mark-fg:#F2F8F1; --mark-soft:#1B2A1E;
  --warn:#E0A45C; --warn-soft:#2A1F11;
  --shadow:0 1px 1px rgba(0,0,0,.3),0 3px 10px rgba(0,0,0,.32);
}
:root[data-theme="light"]{
  --page:#E2DDD0; --surface:#FFFEFB; --surface-2:#F1EDE3;
  --rule:#C9C1AE; --rule-soft:#EBE5D8;
  --ink:#1E1B16; --ink-2:#4C463B; --ink-3:#635C4E;
  --seal:#7A1F32; --seal-bg:#7A1F32; --seal-fg:#FFFFFF; --seal-soft:#F6E9EA;
  --mark:#2F5233; --mark-bg:#2F5233; --mark-fg:#FFFFFF; --mark-soft:#EFF3EC;
  --warn:#8A4B00; --warn-soft:#F8EEDF;
  --shadow:0 1px 1px rgba(58,46,28,.05),0 3px 10px rgba(58,46,28,.06);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.5;-webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:34rem;margin:0 auto;padding:18px 16px calc(48px + env(safe-area-inset-bottom))}

/* ---------- masthead ---------- */
.mast{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.wordmark{font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--ink-3);
  margin:0;font-weight:500}
/* The trip switcher exists only on the control board. */
.navbtn{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--ink-2);background:var(--surface);border:1px solid var(--rule);
  border-radius:7px;padding:11px 14px;min-height:44px;cursor:pointer}
.navbtn[hidden]{display:none}
#nav{display:none}
#nav.on{display:block;background:var(--surface);border:1px solid var(--rule);border-radius:10px;
  padding:14px;margin-bottom:14px;box-shadow:var(--shadow)}
.navh{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin:0 0 10px}
.navrow{border-top:1px solid var(--rule-soft);padding:12px 0 2px}
#nav .navrow:first-of-type{border-top:none;padding-top:0}
.navrow.cur{border-left:3px solid var(--mark);padding-left:11px;margin-left:-11px}
.navtop{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.navname{font-family:var(--serif);font-size:17px;font-weight:700;color:var(--ink)}
.navstate{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;white-space:nowrap}
.navdate{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin-top:3px}
.navacts{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.navacts .chip{cursor:pointer;background:var(--surface);font-family:var(--mono)}
.navacts .chip.on{border-color:var(--mark);color:var(--mark);cursor:default}
.navurl{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-top:8px;
  overflow-wrap:anywhere;line-height:1.4}
.navnote{font-size:12.5px;color:var(--ink-3);line-height:1.5;margin:14px 0 0;
  border-top:1px solid var(--rule-soft);padding-top:11px}
h1{font-family:var(--serif);font-size:30px;line-height:1.08;margin:0;font-weight:700;
  letter-spacing:-.005em;text-wrap:balance}
.when{color:var(--ink-2);font-size:15px;margin-top:4px}
.intro{background:var(--surface);border:1px solid var(--rule);border-radius:10px;
  padding:13px 15px;margin-top:15px;font-size:15.5px;color:var(--ink-2);box-shadow:var(--shadow)}
.intro b{font-weight:700;color:var(--ink)}

/* ---------- section headings ---------- */
h2{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin:32px 0 4px;font-weight:600}
.sub{color:var(--ink-3);font-size:13.5px;margin:0 0 13px}

/* ---------- the card ---------- */
.card{background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:14px;
  margin-bottom:11px;box-shadow:var(--shadow);border-left:4px solid transparent;position:relative}
.card.flash{animation:fl 1.4s ease}
@keyframes fl{0%,100%{box-shadow:var(--shadow)}30%{box-shadow:0 0 0 3px var(--seal)}}

.catline{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 4px;font-weight:600;padding-right:74px}
.catline .num{color:var(--seal);font-weight:700}
.ttl{font-family:var(--serif);font-size:20px;font-weight:700;margin:0 0 6px;color:var(--ink);
  line-height:1.2;letter-spacing:-.005em;padding-right:74px;text-wrap:balance}
.why{color:var(--ink-2);font-size:15px;line-height:1.5;margin:0 0 12px}

/* facts: labelled strips. Grid rather than flex so that at large text
   sizes cells wrap to a new line instead of being clipped. The person
   who enlarged the type is the last person who can afford to silently
   lose the price. */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
  background:var(--surface-2);border-radius:6px;margin:0 0 8px;overflow:hidden}
.facts:last-of-type{margin-bottom:12px}
.fact{min-width:0;padding:8px 10px;border-left:1px solid var(--rule)}
.fact:first-child{border-left:none}
.fact dt{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 2px}
.fact dd{font-size:13.5px;font-weight:600;color:var(--ink);margin:0;line-height:1.35;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

/* The address, plain text. Knowing where a place is must not require
   marking it booked. */
.addr{font-family:var(--mono);font-size:11.5px;letter-spacing:.01em;color:var(--ink-3);
  margin:0 0 11px;line-height:1.45}

.bootmsg{color:var(--ink-3);font-size:14px;padding:18px 2px}

/* ---------- buttons ---------- */
a.go,button.go{display:block;width:100%;text-align:center;background:var(--seal-bg);color:var(--seal-fg);
  border:none;border-radius:9px;padding:14px;font-size:16.5px;font-weight:650;font-family:var(--sans);
  text-decoration:none;margin-bottom:7px;min-height:52px;cursor:pointer;letter-spacing:.005em}
a.alt{display:block;width:100%;text-align:center;background:var(--surface);color:var(--ink-2);
  border:1px solid var(--rule);border-radius:9px;padding:12px;min-height:48px;
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;margin-bottom:7px;line-height:1.9}
a.alt.dir{border-color:var(--mark);color:var(--mark)}
button.did{display:block;width:100%;background:none;color:var(--mark);border:1.5px dashed var(--mark);
  border-radius:9px;padding:12px;font-size:15.5px;font-weight:700;min-height:48px;
  font-family:var(--sans);cursor:pointer}
button.did.on{border-style:solid;background:var(--mark-bg);color:var(--mark-fg)}
button.cal{display:block;width:100%;background:var(--surface);color:var(--ink-2);
  border:1px solid var(--rule);border-radius:9px;padding:12px;min-height:48px;
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;margin-bottom:7px}
button.undo{display:block;width:100%;background:none;border:none;color:var(--ink-3);
  font-size:14px;text-decoration:underline;padding:12px;min-height:44px;
  font-family:var(--sans);cursor:pointer}
.note{color:var(--ink-3);font-size:13.5px;line-height:1.5;margin:11px 0 0;
  border-left:1px solid var(--rule);padding-left:11px}

/* ---------- deadlines ----------
   On the card and nowhere else. It sits above the description so she
   meets it as she reads the place, and clears itself once booked. */
.flag{background:var(--warn-soft);border-left:3px solid var(--warn);border-radius:0 6px 6px 0;
  padding:9px 11px;margin:0 0 11px;font-size:14px;line-height:1.45;color:var(--ink)}
.flagl{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--warn);font-weight:700;margin-bottom:2px}
.card.done .flag{display:none}

/* ---------- booked ---------- */
.card.done{border-left-color:var(--mark);background:var(--mark-soft)}
.card.done .ttl{text-decoration:underline;text-decoration-color:var(--mark);
  text-decoration-thickness:2px;text-underline-offset:4px}
.stamp{position:absolute;top:14px;right:14px;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;color:var(--mark);font-weight:700;display:none}
.card.done .stamp{display:block}

/* ---------- the change panel ---------- */
.panel{display:none;margin-top:13px;padding-top:13px;border-top:1px solid var(--rule)}
.panel.open{display:block}
.q{font-size:15px;font-weight:700;margin:0 0 7px;color:var(--ink)}
.opts{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.opts button{flex:1 1 30%;min-width:96px;background:var(--surface);border:1px solid var(--rule);
  color:var(--ink-2);border-radius:8px;padding:12px 4px;font-size:14.5px;font-weight:600;
  min-height:48px;font-family:var(--sans);cursor:pointer}
.opts button.sel{background:var(--mark-bg);border-color:var(--mark-bg);color:var(--mark-fg)}
.fixedday{background:var(--surface-2);border-radius:8px;padding:11px 13px;font-size:14.5px;
  color:var(--ink-2);margin-bottom:14px}
.fixedday b{color:var(--ink)}
input[type=text],input[type=time]{width:100%;font-family:var(--sans);font-size:16px;
  padding:13px;border-radius:8px;border:1px solid var(--rule);background:var(--page);
  color:var(--ink);margin-bottom:11px;min-height:48px}
label{display:block;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.075em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}

/* ---------- the plan ---------- */
#plan{background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:15px;
  margin-top:16px;display:none;box-shadow:var(--shadow)}
#plan.on{display:block}
#plan h2{font-family:var(--serif);font-size:21px;letter-spacing:-.005em;text-transform:none;
  color:var(--ink);font-weight:700;margin:0 0 8px}
.pday{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin:16px 0 4px;padding-bottom:5px;border-bottom:1px solid var(--rule)}
.prow{padding:10px 0;border-bottom:1px solid var(--rule-soft);cursor:pointer;
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;min-height:44px}
.prow:last-child{border-bottom:none}
.prow .a{font-family:var(--serif);font-size:17px;font-weight:700;color:var(--ink);line-height:1.25}
.prow .t{font-family:var(--mono);font-size:11.5px;color:var(--mark);font-weight:700;
  margin-bottom:2px;letter-spacing:.05em}
.prow .b{font-size:12.5px;color:var(--ink-3);margin-top:2px;line-height:1.4}
.prow .miss{color:var(--warn);font-weight:700}
.prow .chev{font-family:var(--mono);font-size:10.5px;color:var(--seal);font-weight:700;
  white-space:nowrap;letter-spacing:.1em}
.clash{background:var(--warn-soft);border-left:3px solid var(--warn);border-radius:0 6px 6px 0;
  padding:9px 11px;margin:6px 0;font-size:13.5px;color:var(--ink)}

/* ---------- the "did it work out?" prompt ----------
   Anchored to the bottom of the screen. iOS restores the scroll position
   on return from the booking site, so rendered at the top of the page
   this was many screens away at the one moment it exists for. */
#ask{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:var(--page);border-top:1px solid var(--rule);
  box-shadow:0 -4px 18px rgba(0,0,0,.10)}
#ask.on{display:block}
body.has-ask .wrap{padding-bottom:190px}
.askc{background:var(--surface);border:1px solid var(--seal);border-left:4px solid var(--seal);
  border-radius:10px;padding:13px;box-shadow:var(--shadow);max-width:34rem;margin:0 auto}
.askc p{margin:0 0 11px;font-size:15px;color:var(--ink)}
.askrow{display:flex;gap:10px}
.askrow button{flex:1;border-radius:8px;padding:12px 6px;font-size:15px;font-weight:650;
  min-height:48px;font-family:var(--sans);cursor:pointer;border:1px solid var(--seal-bg)}
.askrow button.y{background:var(--seal-bg);color:var(--seal-fg)}
.askrow button.n{background:none;color:var(--seal)}

/* Map and Call on a plan row. stopPropagation lives in app.js so these
   do not also fire the row's jump. */
.chips{display:flex;gap:7px;margin-top:7px}
.chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--ink-2);text-decoration:none;border:1px solid var(--rule);
  border-radius:7px;padding:11px 14px;min-height:44px;display:inline-flex;align-items:center}

/* ---------- collapsibles ---------- */
details{background:var(--surface);border:1px solid var(--rule);border-radius:10px;
  margin-bottom:11px;overflow:hidden;box-shadow:var(--shadow)}
summary{padding:15px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;cursor:pointer;list-style:none;color:var(--ink-2)}
summary::-webkit-details-marker{display:none}
summary::after{content:"  +";color:var(--seal)}
details[open] summary::after{content:"  \2212";color:var(--seal)}
.inner{padding:0 14px 6px}

/* ---------- alerts, toast ---------- */
#alert{background:var(--warn-soft);border:1px solid var(--warn);border-left:4px solid var(--warn);
  border-radius:10px;padding:14px;margin-top:14px;font-size:15px;display:none;color:var(--ink)}
#alert.on{display:block}
#alert b{color:var(--warn)}
/* Confirmations belong where her thumb and eyes already are, which is
   the bottom of the screen, not the top of a page that just scrolled. */
#toast{position:fixed;bottom:calc(18px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  background:var(--ink);color:var(--page);padding:12px 18px;border-radius:9px;font-size:15px;
  font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s;z-index:99;max-width:92vw;
  text-align:center;box-shadow:0 4px 16px rgba(0,0,0,.28);line-height:1.4}
#toast.show{opacity:1}
body.has-ask #toast{bottom:calc(178px + env(safe-area-inset-bottom))}
:focus-visible{outline:2px solid var(--seal);outline-offset:2px}

/* ---------- tabs ---------- */
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:16px;
  position:sticky;top:0;z-index:20;background:var(--page);padding:8px 0;
  border-bottom:1px solid var(--rule)}
.tabs button{background:var(--surface);border:1px solid var(--rule);color:var(--ink-2);
  border-radius:8px;padding:13px 8px;font-size:15.5px;font-weight:650;min-height:50px;
  font-family:var(--sans);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px}
.tabs button.on{background:var(--ink);border-color:var(--ink);color:var(--page)}
.tabs .cnt{background:var(--seal-bg);color:var(--seal-fg);border-radius:99px;padding:1px 8px;
  font-family:var(--mono);font-size:11.5px;font-weight:700;min-width:22px}
.tabs .cnt:empty{display:none}
.panel-tab{display:none}
.panel-tab.on{display:block}

.emptyplan{background:var(--surface);border:1px dashed var(--rule);border-radius:10px;
  padding:28px 20px;text-align:center;margin-top:18px}
.emptyplan h3{font-family:var(--serif);margin:0 0 8px;font-size:20px;font-weight:700;color:var(--ink)}
.emptyplan p{margin:0 0 16px;color:var(--ink-2);font-size:15px}

footer{margin-top:32px;color:var(--ink-3);font-size:12.5px;line-height:1.55;
  border-top:1px solid var(--rule);padding-top:14px}

/* ============================================================
   THE GUEST PAGE
   A different document from the planner: no catalogue, no booking, no
   choices to make. What is happening, what is needed, how to get there.
   ============================================================ */
.stamp-line{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-top:7px}
.gday{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin:24px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--rule)}
.gitem{background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:14px;
  margin-bottom:10px;box-shadow:var(--shadow);border-left:4px solid var(--rule)}
.gtop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:5px}
.gtime{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--ink)}
/* A proposed time reads as a phrase, not a fixed slot, so it never looks
   booked when it is only being considered. */
.gtime.gtentative{font-family:var(--sans);font-weight:600;color:var(--ink-2);
  text-transform:none;font-style:italic}
.gitem:has(.st-think){border-left-color:var(--ink-3)}
.gstate{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;border-radius:99px;padding:3px 9px}
.st-booked{background:var(--mark-soft);color:var(--mark);border:1px solid var(--mark)}
.st-think{background:var(--surface-2);color:var(--ink-3);border:1px solid var(--rule)}
.st-needs{background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn)}
.gitem:has(.st-booked){border-left-color:var(--mark)}
.gitem:has(.st-needs){border-left-color:var(--warn)}
.gname{font-family:var(--serif);font-size:20px;font-weight:700;margin:0 0 6px;color:var(--ink);line-height:1.2}
.gwhy{color:var(--ink-2);font-size:15px;line-height:1.5;margin:0 0 9px}
.gnote{color:var(--ink-2);font-size:14px;line-height:1.5;margin:0 0 9px;
  border-left:1px solid var(--rule);padding-left:10px}
.gaddr{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin:0 0 11px;
  line-height:1.45;overflow-wrap:anywhere}
.gacts{display:flex;flex-wrap:wrap;gap:7px}
.gempty{background:var(--surface);border:1px dashed var(--rule);border-radius:10px;
  padding:26px 20px;text-align:center;margin-top:18px}
.gempty h3{font-family:var(--serif);margin:0 0 8px;font-size:20px;font-weight:700;color:var(--ink)}
.gempty p{margin:0;color:var(--ink-2);font-size:15px}

.gask{padding:4px 0 12px;border-bottom:1px solid var(--rule-soft);margin-bottom:12px}
.gask:last-of-type{border-bottom:none}
.gq{font-size:15.5px;font-weight:700;margin:0 0 9px;color:var(--ink)}

.gflight{background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:14px;
  margin-bottom:10px;box-shadow:var(--shadow)}
.gfwho{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin-bottom:5px}
.gfno{font-family:var(--serif);font-size:18px;font-weight:700;color:var(--ink)}
.gfroute{display:flex;align-items:baseline;gap:10px;margin:7px 0 5px}
.gfport{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--ink);letter-spacing:.06em}
.gfarrow{font-family:var(--mono);font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.12em}
.gfwhen{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.gfnote{font-size:13.5px;color:var(--ink-3);margin-top:6px}

.gprow{display:grid;grid-template-columns:minmax(84px,32%) 1fr;gap:10px;padding:10px 0;
  border-bottom:1px solid var(--rule-soft)}
.gprow:last-child{border-bottom:none}
.gprow dt{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin:0;padding-top:2px}
.gprow dd{margin:0;font-size:15px;color:var(--ink);overflow-wrap:anywhere}

/* ---------- control-board extras ---------- */
.tabs.three{grid-template-columns:1fr 1fr 1fr}
.tabs.three button{font-size:14.5px;padding:13px 4px}
button.asidea{display:block;width:100%;background:none;border:none;color:var(--ink-3);
  font-size:13.5px;text-decoration:underline;padding:12px 4px;min-height:44px;
  font-family:var(--sans);cursor:pointer;text-align:center}
.card.ed{background:var(--surface-2)}
.edhead{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin:0 0 11px}
textarea{width:100%;font-family:var(--sans);font-size:16px;padding:13px;border-radius:8px;
  border:1px solid var(--rule);background:var(--page);color:var(--ink);margin-bottom:11px;
  line-height:1.45;resize:vertical}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Only fires for people who asked for it, so it costs the warm printed
   look nothing. In direct sun the hairline rules stop reading as edges. */
@media (prefers-contrast:more){
  :root{--rule:#8C8371; --ink-3:#4A4438;}
  @media (prefers-color-scheme:dark){ :root{--rule:#6E6455; --ink-3:#BDB4A2;} }
  .card,.facts .fact,input[type=text],input[type=time]{border-color:var(--rule)}
}

.puberr{background:var(--warn-soft);border-left:3px solid var(--warn);border-radius:0 6px 6px 0;
  padding:10px 12px;margin:10px 0 0;font-size:14px;line-height:1.45;color:var(--ink)}

/* Who the visit is for. Guest page only. */
.gfor{font-family:var(--serif);font-size:17px;font-style:italic;color:var(--ink-2);margin-top:8px}

/* A dot on the Guest page tab whenever what guests can see is behind
   what is on the board. */
.tabs button.stale::after{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--warn);display:inline-block;margin-left:6px;flex:none}
.tabs button.stale.on::after{background:var(--page)}

.pubwill{font-size:14.5px;color:var(--ink-2);line-height:1.5;margin:0 0 12px}

/* ============================================================
   THE GUIDED WALKTHROUGH  (/tutorial/)
   The page beneath is a picture of the control board, dimmed, with one
   thing lit at a time. Linear on purpose: one forward button, and the
   tour drives the screen so nobody has to work out where to go next.
   ============================================================ */
.tourbody{overflow-x:hidden}
/* Reserve the scrollbar always. Without this the bar appears when the
   page becomes scrollable, narrows the caption, its text wraps one more
   line and the caption grows after everything has been measured against
   its old height. No-op on a phone, where there is no persistent bar. */
html:has(.tourbody){scrollbar-gutter:stable}
.tourbody .wrap{padding-bottom:78vh}   /* so the last step can still scroll into the lit area */

#tourDim{position:fixed;inset:0;z-index:200;pointer-events:auto}
#tourHole{position:absolute;border-radius:10px;border:2px solid var(--seal);
  box-shadow:0 0 0 9999px rgba(24,21,17,.74);
  transition:top .28s ease,left .28s ease,width .28s ease,height .28s ease;
  pointer-events:none}

#tourCard{position:fixed;z-index:201;left:50%;transform:translateX(-50%);
  bottom:calc(16px + env(safe-area-inset-bottom));
  width:min(34rem,calc(100vw - 28px));
  background:var(--surface);border:1px solid var(--rule);border-radius:12px;
  padding:18px;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.tstep{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--seal);font-weight:700;margin:0 0 7px}
.ttitle{font-family:var(--serif);font-size:21px;font-weight:700;color:var(--ink);
  margin:0 0 8px;line-height:1.2;text-transform:none;letter-spacing:-.005em}
.ttext{font-size:15.5px;line-height:1.55;color:var(--ink-2);margin:0 0 16px}
.trow{display:flex;gap:10px}
.tback{flex:0 0 auto;background:none;border:1px solid var(--rule);color:var(--ink-2);
  border-radius:9px;padding:13px 18px;min-height:50px;font-family:var(--mono);
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.tnext{flex:1;background:var(--seal-bg);color:var(--seal-fg);border:none;border-radius:9px;
  padding:13px;min-height:50px;font-family:var(--sans);font-size:16.5px;font-weight:650;cursor:pointer}
.tquit{display:block;width:100%;background:none;border:none;color:var(--ink-3);
  font-size:13.5px;text-decoration:underline;padding:15px 0 6px;min-height:44px;
  font-family:var(--sans);cursor:pointer}

/* The mock is a picture. Nothing in it should look tappable. */
#mock, #mock *{cursor:default!important;user-select:none;-webkit-user-select:none}

.howlink{margin:14px 0 0;font-size:13.5px}
.howlink a{display:inline-block;color:var(--seal);text-decoration:underline;
  text-underline-offset:3px;padding:13px 2px;min-height:44px}

/* The guest page as it appears inside the walkthrough, framed so it is
   obvious this is someone else's phone and not the board. */
.gvframe{border:1px solid var(--rule);border-radius:14px;padding:16px;background:var(--page);
  box-shadow:inset 0 0 0 4px var(--surface-2)}
.gvlabel{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin:0 0 12px;text-align:center}
.ficon{display:block;margin:0 auto 14px;border-radius:17px;box-shadow:var(--shadow)}
.steps{margin:0 0 4px;padding-left:22px;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.steps li{margin-bottom:7px}
.steps b{color:var(--ink)}

/* On the opening step there is nothing lit and nothing else to do, so the
   one control that moves her forward says so. Only on that step: a button
   that pulses forever is noise. */
.tnext.pulse{animation:tpulse 2s ease-in-out infinite}
@keyframes tpulse{
  0%,100%{box-shadow:0 0 0 0 rgba(241,237,227,.55)}
  50%    {box-shadow:0 0 0 9px rgba(241,237,227,0)}
}
@media (prefers-reduced-motion:reduce){ .tnext.pulse{animation:none} }