/* ============================================================
   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 ---------- */
.wordmark{font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--ink-3);
  margin:0 0 9px;font-weight:500}
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, up to three cells each */
.facts{display:flex;background:var(--surface-2);border-radius:6px;margin:0 0 8px;overflow:hidden}
.facts:last-of-type{margin-bottom:12px}
.fact{flex:1 1 0;min-width:0;padding:8px 10px}
.fact + .fact{border-left:1px solid var(--rule)}
.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}

/* ---------- 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 ---------- */
#ask{margin-top:15px}
.askc{background:var(--surface);border:1px solid var(--seal);border-left:4px solid var(--seal);
  border-radius:10px;padding:14px;margin-bottom:10px;box-shadow:var(--shadow)}
.askc p{margin:0 0 11px;font-size:15px;color:var(--ink)}
.askrow{display:flex;gap:8px}
.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)}

/* ---------- 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)}
#toast{position:fixed;top:calc(10px + env(safe-area-inset-top));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)}
#toast.show{opacity:1}
: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}

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