/* FamVoyage — luxurious dark-first
 *
 * Every text colour here clears WCAG AAA (7:1) against the worst background it
 * can land on, in both themes. Not AA — AAA. This app gets used outdoors in a
 * Chengdu August, where ambient light reflecting off the glass adds a constant
 * to both text and background and drags every ratio towards 1:1. A pair that
 * only just clears 4.5:1 indoors measures under 2:1 in the street, so the extra
 * headroom is the whole point.
 *
 * The accent is a different colour in each theme on purpose. #CAA964 gold is
 * 7:1 on near-black; the same gold on white is 2.3:1 and illegible, and
 * darkening it far enough turns it to mud. So the light themes use a deep blue
 * instead — see the note above [data-theme="light"].
 *
 * Values were solved numerically, not picked by eye. audit.mjs re-checks every
 * rendered text node in all three themes and fails the build on any AA miss.
 */

:root, [data-theme="dark"] {
  --bg:#0B0B10; --bg-2:#101018; --card:#1A1A23; --card-2:#22222D;
  --ink:#F2EFE8; --soft:#D6D2C9; --muted:#B3B0A9;
  --line:#4A4A5A; --hair:#3C3C49;
  --gold:#CAA964; --gold-dim:#B09A63; --on-gold:#0B0B10;
  --ok:#8FCB9F; --warn:#E5BC5E; --danger:#E89185;
  --shadow:0 1px 3px rgba(0,0,0,.5);
}
/* Light mode is white and blue, not cream and gold.
 *
 * Gold is the right accent on near-black — #CAA964 measures 7:1 there. On a
 * light background it cannot be: to clear 7:1 on white the same hue has to be
 * darkened to a muddy olive-brown, which is what #654D18 was, and it neither
 * reads as gold nor as anything else. A deep blue clears 8.3:1 on every surface
 * in this theme at a colour that is still recognisably a colour.
 *
 * Every value below was solved against the four backgrounds text can land on
 * (#FFFFFF card, #F7FAFD page, #EDF2F8 alt page, #F1F5FA alt card) rather than
 * picked by eye. Worst case for body text is 15.6:1 and for the quietest
 * secondary text 7.65:1 — AAA on both.
 */
[data-theme="light"] {
  --bg:#F7FAFD; --bg-2:#EDF2F8; --card:#FFFFFF; --card-2:#F1F5FA;
  --ink:#0E1524; --soft:#243349; --muted:#3D4A60;
  --line:#6F7E95; --hair:#A3AEBF;
  --gold:#12408F; --gold-dim:#2E5AA5; --on-gold:#FFFFFF;
  --ok:#0B5132; --warn:#6A4200; --danger:#8C1D14;
  --shadow:0 1px 3px rgba(14,21,36,.10);
}

:root {
  --cjk:'PingFang SC','PingFang TC','Hiragino Sans GB','Noto Sans SC','Microsoft YaHei',sans-serif;
  --serif:'Newsreader',Georgia,'Songti SC','Noto Serif SC',serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --sans:'Work Sans',system-ui,-apple-system,var(--cjk);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { background:#000; }
body {
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.45;
  overscroll-behavior-y:none; min-height:100dvh;
}
button, input, textarea, select { font:inherit; color:inherit; }
button { background:none; border:none; cursor:pointer; }
::-webkit-scrollbar { width:0; height:0; }

#app {
  min-height:100dvh; background:var(--bg);
  display:flex; flex-direction:column;
  max-width:460px; margin:0 auto; position:relative;
}

/* ---------------- header ---------------- */
header.top {
  padding:calc(14px + var(--safe-t)) 20px 14px;
  border-bottom:1px solid var(--line);
  background:var(--bg); position:sticky; top:0; z-index:20;
}
.top .row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.wordmark {
  font-family:var(--serif); font-style:italic; font-size:25px; font-weight:500;
  color:var(--gold); line-height:1.1; letter-spacing:-.01em;
}
.top .row { align-items:center; }
.tripsel {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:11px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink);
}

/* language segmented control */
.langseg {
  display:flex; border:1px solid var(--gold-dim); border-radius:7px; overflow:hidden; flex:0 0 auto;
}
.langseg button {
  /* Sized for a thumb, not a cursor. 44px is the smallest target Apple and the
     WCAG 2.2 target-size guidance both accept; the old 24px-tall control was
     fine on a laptop and missable on a phone. */
  padding:0 13px; min-width:46px; min-height:44px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:13px; font-weight:600;
  letter-spacing:.06em; color:var(--muted);
}
.langseg button.cjk { font-family:var(--cjk); letter-spacing:0; }
.langseg button.on { background:var(--gold); color:var(--on-gold); }
.langseg button + button { border-left:1px solid var(--gold-dim); }

/* ---------------- shared ---------------- */
main {
  flex:1;
  /* --tabbar-h is set from the real element height at render time, so this
     stays correct when Sunlight mode makes the bar taller. */
  padding:16px 20px calc(var(--tabbar-h, 62px) + var(--safe-b) + 20px);
}
.pane[hidden] { display:none; }
.sechead {
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold); margin-bottom:10px;
}
.sechead .cn { font-family:var(--cjk); letter-spacing:.05em; }
/* Anything followed by a section needs the same air. Previously only
   .section + .section matched, so a section sitting under a card — the FX
   converter, for one — ended up flush against it. */
.section + .section,
.card + .section,
.fx + .section,
.pane > .card + .section { margin-top:26px; }
.empty { font-size:14.5px; color:var(--muted); padding:14px 0; }
.hint { font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--muted); }

.card {
  background:var(--card); border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--shadow);
}
.card + .card { margin-top:10px; }

/* primary / secondary text pair */
.pri   { font-family:var(--serif); font-size:19px; line-height:1.28; }
.pri.zh{ font-family:var(--serif); font-size:20px; line-height:1.35; }
.sec   { font-size:14px; color:var(--soft); margin-top:2px; line-height:1.4; }
.sec.zh{ font-size:17px; color:var(--soft); margin-top:3px; line-height:1.4; }
.meta  { font-size:13px; color:var(--muted); margin-top:4px; display:flex; align-items:center; gap:5px; }
.meta svg { width:11px; height:11px; flex:0 0 auto; }

/* ---------------- weather ---------------- */
.wx {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:15px 18px; margin-bottom:16px;
}
.wx .l .sechead { margin-bottom:5px; }
.wx .cond { font-family:var(--serif); font-size:21px; line-height:1.2; }
.wx .r { text-align:right; flex:0 0 auto; }
.wx .deg { font-family:var(--serif); font-size:31px; line-height:1; color:var(--gold); }
.wx .hilo { font-size:11.5px; color:var(--muted); margin-top:3px; }

/* ---------------- day strip ---------------- */
.daystrip {
  display:flex; gap:4px; overflow-x:auto; padding:2px 0 14px;
  scroll-snap-type:x proximity;
}
.chip {
  flex:0 0 auto; min-width:54px; padding:7px 6px 9px; border-radius:9px;
  border:1px solid transparent; text-align:center; scroll-snap-align:center;
  position:relative;
}
.chip .dow {
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--muted);
}
.chip .dd { font-family:var(--serif); font-size:21px; line-height:1.25; margin-top:1px; }
.chip.on { border-color:var(--gold); }
.chip.on .dow, .chip.on .dd { color:var(--gold); }
.chip.today::after {
  content:''; position:absolute; left:50%; bottom:3px; transform:translateX(-50%);
  width:3px; height:3px; border-radius:50%; background:var(--gold);
}

/* ---------------- itinerary ---------------- */
.item {
  display:flex; gap:12px; align-items:flex-start; width:100%; text-align:left;
  padding:12px; margin-bottom:9px;
}
.thumb {
  width:58px; height:58px; flex:0 0 auto; border-radius:8px; overflow:hidden;
  background:var(--card-2); display:flex; align-items:center; justify-content:center;
  border:1px solid var(--hair);
}
.thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.thumb svg { width:24px; height:24px; color:var(--gold-dim); }
.item .body { flex:1; min-width:0; }
.item .time {
  font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.08em;
  color:var(--gold); margin-bottom:2px;
}

/* ---------------- detail sheet ---------------- */
.sheet {
  position:fixed; inset:0; z-index:60; background:var(--bg);
  display:flex; flex-direction:column; max-width:460px; margin:0 auto;
  overflow-y:auto;
}
.sheet .shead {
  display:flex; align-items:center; gap:12px; padding:calc(14px + var(--safe-t)) 20px 12px;
  border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:2;
}
.sheet .shead .back { display:flex; align-items:center; gap:6px; color:var(--gold); font-size:14px; }
.sheet .shead svg { width:16px; height:16px; }
.sheet .sbody { padding:20px 20px calc(28px + var(--safe-b)); }
.hero {
  width:100%; height:150px; border-radius:12px; overflow:hidden; margin-bottom:18px;
  background:var(--card-2); display:flex; align-items:center; justify-content:center;
  border:1px solid var(--hair);
}
.hero img { width:100%; height:100%; object-fit:cover; }
.hero svg { width:46px; height:46px; color:var(--gold-dim); }

.addr {
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:16px 18px; width:100%; text-align:left; box-shadow:var(--shadow);
}
.addr .big { font-family:var(--serif); font-size:26px; line-height:1.35; }
.addr .en  { font-size:13.5px; color:var(--muted); margin-top:7px; }

.btnrow { display:flex; gap:9px; margin-top:12px; }
.btn {
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:12px 8px; border-radius:10px; border:1px solid var(--line);
  background:var(--card); font-size:13.5px; font-weight:500;
}
.btn svg { width:15px; height:15px; color:var(--gold); }
.btn.primary { background:var(--gold); color:var(--on-gold); border-color:var(--gold); }
.btn.primary svg { color:var(--on-gold); }

textarea.note {
  width:100%; min-height:84px; background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-radius:10px; padding:12px 13px;
  font:inherit; font-size:14.5px; line-height:1.55; resize:vertical;
}
textarea.note:focus { outline:none; border-color:var(--gold-dim); }

/* full-screen "show this" */
.showcard {
  position:fixed; inset:0; z-index:80; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:28px; text-align:center; gap:20px;
}
.showcard .zh { font-family:var(--serif); font-size:min(12.5vw,52px); line-height:1.35; }
.showcard .en { font-size:15px; color:var(--muted); }
.showcard .close { font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--gold); }

/* ---------------- lists ---------------- */
.row {
  display:flex; gap:12px; align-items:flex-start; width:100%; text-align:left;
  padding:13px 0; border-top:1px solid var(--line);
}
.row:first-of-type { border-top:none; }
.row .lead { flex:1; min-width:0; }
.tag {
  flex:0 0 auto; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); border-radius:5px; padding:3px 6px; margin-top:3px;
}
.check { display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:11px 0; border-bottom:1px solid var(--hair); }
.check .box {
  width:21px; height:21px; flex:0 0 auto; border-radius:5px; border:1px solid var(--muted);
  display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--on-gold);
}
.check.done .box { background:var(--gold); border-color:var(--gold); }
.check.done .label { color:var(--muted); text-decoration:line-through; }

.filters { display:flex; gap:7px; overflow-x:auto; padding-bottom:12px; }
.filter {
  flex:0 0 auto; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; padding:6px 11px; border-radius:20px;
  border:1px solid var(--line); color:var(--muted);
}
.filter.on { background:var(--gold); border-color:var(--gold); color:var(--on-gold); }

input.search, input.text, select.text {
  width:100%; background:var(--card); border:1px solid var(--line); color:var(--ink);
  border-radius:10px; padding:11px 13px; font-size:15px;
}
input.search:focus, input.text:focus, select.text:focus { outline:none; border-color:var(--gold-dim); }
select.text { appearance:none; background-image:none; }

a.tel {
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:13px 0; border-top:1px solid var(--line); text-decoration:none; color:inherit;
}
a.tel .num { font-family:var(--mono); font-size:16.5px; color:var(--gold); }

/* ---------------- currency ---------------- */
.fx { padding:20px 18px; }
.fxrow { display:flex; align-items:center; gap:12px; }
.fxrow + .fxrow { margin-top:16px; padding-top:16px; border-top:1px solid var(--hair); }
.fxrow .lab { width:74px; flex:0 0 auto; }
.fxrow .lab .code { font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--ink); }
.fxrow .lab .what { font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:2px; }
.fxrow input {
  flex:1; min-width:0; background:transparent; border:none;
  font-family:var(--serif); font-size:33px; color:var(--ink); padding:0;
  -moz-appearance:textfield;
}
.fxrow input:focus { outline:none; }
.fxrow input.hero { color:var(--gold); }
.fxrow input::-webkit-outer-spin-button, .fxrow input::-webkit-inner-spin-button { -webkit-appearance:none; }
.fxnote { font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--muted); margin-top:16px; }
.fxgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.fxgrid button {
  border:1px solid var(--line); background:var(--card); border-radius:9px;
  padding:9px 3px; text-align:center;
}
.fxgrid .a { font-family:var(--mono); font-size:11px; color:var(--muted); }
.fxgrid .b { font-family:var(--serif); font-size:16px; margin-top:1px; }

/* ---------------- tab bar ---------------- */
nav.tabs {
  display:flex; border-top:1px solid var(--line); background:var(--bg);
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:460px;
  padding-bottom:var(--safe-b); z-index:30;
}
nav.tabs button {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:11px 0 12px; font-size:11px; color:var(--muted); font-weight:600;
}
nav.tabs button svg { width:20px; height:20px; }
nav.tabs button.on { color:var(--gold); }

/* ---------------- misc ---------------- */
.toast {
  position:fixed; left:50%; bottom:calc(var(--tabbar-h, 62px) + var(--safe-b) + 18px); transform:translateX(-50%);
  background:var(--ink); color:var(--bg); font-size:13px; padding:9px 16px;
  border-radius:20px; opacity:0; pointer-events:none; transition:opacity .18s; z-index:90;
  max-width:82vw; text-align:center;
}
.toast.show { opacity:1; }
.modal {
  position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.55);
  display:flex; align-items:flex-end; justify-content:center;
}
.modal .panel {
  width:100%; max-width:460px; background:var(--bg); border-radius:16px 16px 0 0;
  padding:20px 20px calc(24px + var(--safe-b)); max-height:80dvh; overflow-y:auto;
}
.statuspill {
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--muted);
  border:1px solid var(--line); border-radius:20px; padding:3px 8px;
}
.statuspill[data-s="on"]  { color:var(--ok);   border-color:var(--ok); }
.statuspill[data-s="off"] { color:var(--warn); border-color:var(--warn); }

/* ---------------- login ---------------- */
.login {
  position:fixed; inset:0; z-index:100; background:var(--bg);
  display:flex; align-items:center; justify-content:center; padding:26px;
  overflow-y:auto;
}
.loginbox { width:100%; max-width:360px; }
.loginbox .sec { margin-top:6px; }
.loginerr { color:var(--danger); font-size:13.5px; margin-top:11px; min-height:18px; }
.login .btn.primary:disabled { opacity:.6; }

/* checkbox rows are buttons inside a div now */
.check .box { background:transparent; }
.check .lead { flex:1; min-width:0; background:none; }
.check .lead .label { font-size:15px; }
.check.done .lead .label { color:var(--muted); text-decoration:line-through; }

/* ---------------- family seal ---------------- */
.markrow { display:flex; align-items:center; gap:9px; }
.seal {
  width:26px; height:26px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--gold); border-radius:6px;
  font-family:'Noto Serif SC','Songti SC',serif; font-weight:700;
  font-size:15px; line-height:1; color:var(--gold); padding-bottom:1px;
}
.seal.big {
  width:60px; height:60px; border-radius:12px; font-size:34px;
  border-width:2px; padding-bottom:3px;
}

/* ---------------- defect fixes ---------------- */
/* Long unbroken strings (pasted URLs, booking refs) must not blow the layout out */
body, .pri, .sec, .meta, .label, .lead, .addr .big, .addr .en, .showcard .zh, .card, .row {
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Only the sheets clip horizontally. Putting overflow-x:hidden on #app or main
   was quietly breaking the tab bar: per spec, overflow-x:hidden makes a
   visible overflow-y compute to auto, which turns the element into a scroll
   container — so position:sticky on the nav anchored to #app instead of the
   viewport and scrolled away with the page. Long strings are handled by
   overflow-wrap above, not by clipping. */
.sheet { overflow-x: hidden; }

/* Driver card: scroll rather than clip when the address is long */
.showcard { overflow-y: auto; justify-content: flex-start; padding-top: 12vh; padding-bottom: 12vh; }
.showcard .zh { max-width: 100%; }

/* Language control repeated inside the detail sheet */
.sheet .shead .langseg { flex: 0 0 auto; }
.sheet .shead .langseg button { padding:0 9px; min-width:40px; min-height:40px; font-size:12px; }

/* ---------------- SUNLIGHT MODE ----------------
 * For walking around Chengdu in August. Under ~50,000 lux the ambient light
 * reflecting off the glass adds a constant to both text and background, which
 * crushes every contrast ratio towards 1:1 — a nominal 15:1 pair measures about
 * 2.3:1 in direct sun. Two consequences drive this theme:
 *
 *  1. Dark backgrounds lose harder. The screen cannot emit less than zero, so
 *     reflected light dominates the background completely. Every small-text pair
 *     in the dark theme lands below 1.8:1 outdoors; the light theme keeps them
 *     around 2.0–2.3:1. So sunlight mode is light-based, always.
 *  2. Greys stop existing. --muted and --soft collapse first, and they carry
 *     most of the Chinese secondary lines. So there are no greys here — the
 *     hierarchy is carried by weight and size instead of by tone.
 *
 * Borders also vanish outdoors (1.1:1), so cards get a real outline.
 */
[data-theme="sun"] {
  --bg:#FFFFFF; --bg-2:#FFFFFF; --card:#FFFFFF; --card-2:#EDEDED;
  --ink:#000000; --soft:#000000; --muted:#2B2B2B;
  --line:#767676; --hair:#9A9A9A;
  --gold:#08265E; --gold-dim:#08265E; --on-gold:#FFFFFF;
  --ok:#14532D; --warn:#6B4400; --danger:#8A1C10;
  --shadow:none;
}
/* Size and weight do the work that colour cannot */
[data-theme="sun"] body { font-size:16px; }
[data-theme="sun"] .pri    { font-size:21px; font-weight:500; }
[data-theme="sun"] .pri.zh { font-size:23px; font-weight:500; }
[data-theme="sun"] .sec    { font-size:16px; font-weight:500; }
[data-theme="sun"] .sec.zh { font-size:19px; font-weight:500; }
[data-theme="sun"] .meta   { font-size:14.5px; font-weight:500; }
[data-theme="sun"] .hint   { font-size:12px; font-weight:600; letter-spacing:.06em; }
[data-theme="sun"] .sechead{ font-size:12px; font-weight:600; letter-spacing:.1em; }
[data-theme="sun"] .item .time { font-size:13.5px; font-weight:600; }
[data-theme="sun"] .card, [data-theme="sun"] .addr, [data-theme="sun"] .thumb,
[data-theme="sun"] .hero { border-width:2px; }
[data-theme="sun"] .chip.on { border-width:2px; }
[data-theme="sun"] .row, [data-theme="sun"] .check, [data-theme="sun"] .tel { border-top-width:2px; }
[data-theme="sun"] .check { border-bottom-width:2px; }
[data-theme="sun"] nav.tabs button { font-size:11.5px; font-weight:600; }
[data-theme="sun"] .langseg button { font-size:12px; font-weight:700; }
[data-theme="sun"] .fxrow input { font-weight:500; }
[data-theme="sun"] .btn { border-width:2px; font-weight:600; }

/* The driver card is the one screen that is *always* used outdoors, held at
   arm's length, so it ignores the theme entirely: black on white, heaviest
   weight available. Nothing else on screen to compete with it. */
.showcard {
  background:#FFFFFF !important;
}
.showcard .zh { color:#000000 !important; font-weight:600; }
.showcard .en { color:#2B2B2B !important; font-weight:500; font-size:16px; }
.showcard .close { color:#08265E !important; font-weight:700; }

/* ---------------- shopping item detail ---------------- */
.buythumb {
  width:46px; height:46px; flex:0 0 auto; border-radius:8px; overflow:hidden;
  border:1px solid var(--line); background:var(--card-2);
}
.buythumb img { width:100%; height:100%; object-fit:cover; display:block; }
.check .lead.withthumb { display:flex; gap:11px; align-items:center; }

.pricerow {
  display:flex; align-items:center; gap:10px; position:relative;
  padding:13px 0; border-top:1px solid var(--line);
}
.pricerow:first-of-type { border-top:none; }
.pricerow .lead { flex:1; min-width:0; }
.pricerow .amount {
  font-family:var(--serif); font-size:22px; flex:0 0 auto; color:var(--ink);
}
.pricerow.best .amount { color:var(--gold); }
.pricerow .besttag {
  position:absolute; top:2px; right:34px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; color:var(--gold);
}
.pricerow .pricedel {
  flex:0 0 auto; width:26px; height:26px; display:flex;
  align-items:center; justify-content:center; color:var(--muted);
}
.pricerow .pricedel svg { width:14px; height:14px; }

.priceadd { display:flex; gap:8px; margin-top:14px; align-items:stretch; }
.priceadd input:first-child { flex:1 1 auto; min-width:0; }
.priceadd input:nth-child(2) { flex:0 0 92px; }
.priceadd .btn { flex:0 0 52px; padding:11px 0; }

[data-theme="sun"] .pricerow { border-top-width:2px; }
[data-theme="sun"] .pricerow .amount { font-size:24px; font-weight:500; }
[data-theme="sun"] .pricerow .besttag { font-size:11px; font-weight:700; }

.btnrow + .section, .hero + .section { margin-top:22px; }
#buysheet .sbody > .section:first-of-type { margin-top:22px; }

/* location-aware currency suggestion */
.fxsuggest {
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:14px 16px; margin-bottom:16px;
}
.fxsuggest svg { width:18px; height:18px; color:var(--gold); flex:0 0 auto; }
.fxsuggest .lead { flex:1; min-width:0; }
.fxsuggest .pri { font-size:17px; }

/* ---------------- where we are in the day ----------------
 * Past items are de-emphasised with --muted, which is a 7:1 token, rather than
 * with opacity. Opacity would composite against the background and quietly
 * undo the contrast work — a faded item still has to be readable, because it is
 * still tappable. */
.item .timerow { display:flex; align-items:center; gap:8px; margin-bottom:2px; }

.item.now {
  border-color:var(--gold); border-width:2px; padding:11px;
}
.nowtag {
  font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.14em;
  color:var(--on-gold); background:var(--gold);
  padding:2px 6px; border-radius:4px;
}
.nexttag {
  font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.14em;
  color:var(--gold); border:1px solid var(--gold); padding:1px 5px; border-radius:4px;
}
.pasttag {
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; color:var(--muted);
}

.item.past { background:var(--card-2); }
.item.past .pri, .item.past .sec, .item.past .time { color:var(--muted); }
.item.past .thumb { border-style:dashed; }
.item.past .thumb img { filter:grayscale(1); }
.item.past .thumb svg { color:var(--muted); }

[data-theme="sun"] .item.now { border-width:3px; }
[data-theme="sun"] .nowtag, [data-theme="sun"] .nexttag, [data-theme="sun"] .pasttag {
  font-size:11px; font-weight:700;
}
[data-theme="sun"] .item.past { background:var(--card-2); }

/* ---------------- profile ----------------
 * Two levels of hierarchy, where there used to be one. A group title in ink at
 * reading size says which of the three things you are in — you, this holiday,
 * organiser — and the small gold labels below it name the individual settings.
 * Previously everything was a small gold label, so "Holiday" and "YOUR NAME"
 * looked like siblings and the page read as one flat list of thirteen items.
 */
.pgroup { margin-top:34px; }
.pgroup:first-child { margin-top:4px; }
.pgrouphead { padding-bottom:13px; margin-bottom:17px; border-bottom:1px solid var(--line); }
.pgrouptitle {
  font-family:var(--serif); font-size:24px; line-height:1.2; color:var(--ink);
}
.pgroupsub { font-size:13px; color:var(--muted); margin-top:5px; line-height:1.5; }
[data-theme="sun"] .pgrouptitle { font-size:26px; font-weight:600; }
[data-theme="sun"] .pgroupsub  { font-size:14px; font-weight:500; }
[data-theme="sun"] .pgrouphead { border-bottom-width:2px; }

.setting { margin-top:22px; }
.pgrouphead + .setting { margin-top:0; }
.setting > .hint:first-child { margin-bottom:6px; display:block; }
/* Helper text is sentence case in the body font, not mono. It is a sentence,
   and mono with wide letter-spacing reads as a label — fine for two words,
   punishing for two lines. */
.settingnote {
  margin-top:8px; display:block; line-height:1.55;
  font-family:var(--sans); font-size:13px; letter-spacing:0;
  text-transform:none; color:var(--muted);
}
.settingnote.warn { color:var(--warn); }
[data-theme="sun"] .settingnote { font-size:14px; font-weight:500; }
.setting .btn, .setting input.text, .setting select.text { margin-top:0; }
.setting .btn + .btn { margin-top:9px; }
.setting .card + .card { margin-top:8px; }
.setting .filters { margin:0; }
/* The foldable sub-sections inside a group.
   `.setting > .hint:first-child` sets display:block and outranks .collapsehead's
   own display:flex, which collapsed the layout and let the caret svg size itself
   to the full row width. Restated here at matching specificity. */
.setting > .collapsehead.hint:first-child {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; margin-bottom:0;
}
.setting > .collapsehead + .collapsebody { margin-top:12px; }
.collapsehead .caret { width:16px; height:16px; flex:0 0 auto; }

/* photo preview inside the plan editor */
.editphoto {
  width:100%; height:120px; border-radius:10px; overflow:hidden;
  background:var(--card-2); border:1px solid var(--hair);
  display:flex; align-items:center; justify-content:center;
}
.editphoto img { width:100%; height:100%; object-fit:cover; display:block; }
.editphoto svg { width:32px; height:32px; color:var(--gold-dim); }

/* ---------------- photo slots ----------------
 * The box is the button. An empty slot shows a + so it reads as an offer rather
 * than as decoration; a filled one carries a small camera badge so it is
 * obviously still changeable. */
.thumb.editable, .hero.editable, .editphoto.editable {
  position:relative; padding:0; cursor:pointer; overflow:hidden;
}
.thumb.editable .photoadd, .hero.editable .photoadd, .editphoto.editable .photoadd {
  position:absolute; right:3px; bottom:3px;
  display:flex; align-items:center; justify-content:center;
  width:17px; height:17px; border-radius:50%;
  background:var(--gold); color:var(--on-gold);
}
.thumb.editable .photoadd svg { width:11px; height:11px; }
.hero.editable .photoadd { width:30px; height:30px; right:10px; bottom:10px; }
.hero.editable .photoadd svg { width:17px; height:17px; }
.editphoto.editable .photoadd { width:26px; height:26px; right:8px; bottom:8px; }
.editphoto.editable .photoadd svg { width:15px; height:15px; }

.photobadge {
  position:absolute; right:4px; bottom:4px;
  display:flex; align-items:center; justify-content:center;
  width:19px; height:19px; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff;
}
.photobadge svg { width:12px; height:12px; }
.hero.editable .photobadge { width:32px; height:32px; right:10px; bottom:10px; }
.hero.editable .photobadge svg { width:18px; height:18px; }

/* an empty editable slot should look invited-in, not dead */
.thumb.editable:not(:has(img)), .hero.editable:not(:has(img)),
.editphoto.editable:not(:has(img)) {
  border-style:dashed; border-color:var(--gold-dim);
}
.hero.editable:not(:has(img)) .kindglyph svg { width:40px; height:40px; }

.editphoto {
  width:100%; height:120px; border-radius:10px; overflow:hidden;
  background:var(--card-2); border:1px solid var(--hair);
  display:flex; align-items:center; justify-content:center;
}
.editphoto img { width:100%; height:100%; object-fit:cover; display:block; }
.editphoto svg { width:32px; height:32px; color:var(--gold-dim); }

/* ---------------- pronunciation line ----------------
 * Pinyin, rōmaji, romaja — whatever the trip's script calls it. Mono, because
 * tone marks and letter spacing read more clearly in a fixed pitch, and --muted
 * because it is the third line of a three-line row and already AAA-solved.
 */
.roman {
  font-family:var(--mono); font-size:12px; letter-spacing:.02em;
  color:var(--muted); margin-top:3px; line-height:1.5;
}
.showcard .roman.big {
  font-size:min(5vw,20px); letter-spacing:.04em; color:var(--soft); margin-top:0;
}
[data-theme="sun"] .roman { font-size:13px; font-weight:600; }
[data-theme="sun"] .showcard .roman.big { color:#2B2B2B !important; font-weight:700; }

/* ---------------- collapsible section ---------------- */
.collapsehead {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; text-align:left; padding:2px 0 0; background:none; border:none;
}
.collapsehead .caret {
  width:16px; height:16px; flex:0 0 auto; color:var(--gold);
  transition:transform .18s ease;
}
.collapsehead .caret.up { transform:rotate(180deg); }
.collapsebody[hidden] { display:none; }

/* ---------------- inline row edit ---------------- */
.rowedit {
  flex:0 0 auto; width:34px; height:34px; margin-left:2px;
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); background:none; border:none; border-radius:8px;
}
.rowedit svg { width:16px; height:16px; }
.rowedit:active { background:var(--card-2); }
[data-theme="sun"] .rowedit { color:#2B2B2B; width:40px; height:40px; }
[data-theme="sun"] .rowedit svg { width:19px; height:19px; }

/* ---------------- header clock ----------------
 * The clock is the tap target; the chevron next to it is a separate button for
 * the holiday picker. Keeping them apart stops "check the time at home" and
 * "switch to last year's trip" sharing one 30px target.
 */
.tripsel .clock {
  display:flex; align-items:center; background:none; border:none; padding:0;
  font:inherit; color:inherit; text-align:left;
  /* Tighter than .tripsel so "HOME · LONDON 11:17" stays on one line next to
     the language control at 390px. */
  letter-spacing:.08em; white-space:nowrap;
}
/* The holiday picker. Deliberately a separate, bordered pill rather than a bare
   chevron sitting against the clock — two different jobs a few pixels apart is
   how you end up switching to last year's trip while checking the time. */
.tripchev {
  display:flex; align-items:center; justify-content:center; gap:5px;
  min-width:44px; min-height:36px; padding:0 12px;
  background:none; border:1px solid var(--line); border-radius:16px;
  color:var(--muted); flex:0 0 auto;
}
.tripchev svg { width:14px; height:14px; }
.tripchev .lbl { font-family:var(--mono); font-size:10px; letter-spacing:.12em; }
[data-theme="sun"] .tripchev { min-height:38px; border-width:2px; }

/* Humidity line on the weather card — only rendered when it changes what you
   would wear or carry, so it never becomes wallpaper. */
.humid {
  display:flex; align-items:center; gap:6px; margin-top:5px;
  font-size:13.5px; color:var(--soft);
}
.humid svg { width:13px; height:13px; flex:0 0 auto; color:var(--gold); }
[data-theme="sun"] .humid { font-size:15px; font-weight:500; }

/* ---------------- speak-aloud on the full-screen phrase ---------------- */
.saybtn {
  display:flex; align-items:center; justify-content:center; gap:9px;
  min-height:52px; padding:0 22px; margin-top:6px;
  border:1px solid var(--gold); border-radius:26px;
  color:var(--gold); font-size:16px; font-weight:500;
}
.saybtn svg { width:20px; height:20px; flex:0 0 auto; }
.saybtn:disabled { color:var(--muted); border-color:var(--line); }
.saynote {
  font-size:13px; color:var(--muted); max-width:34ch; line-height:1.5; text-align:center;
}
.saynote:empty { display:none; }
[data-theme="sun"] .saybtn {
  color:#08265E !important; border-color:#08265E !important; border-width:2px;
  font-weight:700; min-height:58px; font-size:17px;
}
[data-theme="sun"] .saynote { color:#2B2B2B !important; font-weight:500; }

/* ---------------- selected row in a picker ----------------
 * The selected holiday used to be marked by a 20px outlined tick at the end of
 * the row, which is invisible at arm's length. It now takes the accent as a
 * filled block: tinted panel, a rule down the leading edge, and a solid tick.
 */
.row.picked {
  background:var(--card-2); border-radius:10px;
  padding-left:13px; padding-right:11px; margin:0 -13px;
  border-top-color:transparent; position:relative;
}
.row.picked::before {
  content:''; position:absolute; left:0; top:8px; bottom:8px;
  width:3px; border-radius:3px; background:var(--gold);
}
.row.picked .pri { color:var(--gold); }
.row.picked + .row { border-top-color:transparent; }
.pickmark {
  flex:0 0 auto; width:26px; height:26px; margin-top:2px; border-radius:50%;
  background:var(--gold); color:var(--on-gold);
  display:flex; align-items:center; justify-content:center;
}
.pickmark svg { width:15px; height:15px; }
[data-theme="sun"] .row.picked { border:2px solid var(--gold); }
[data-theme="sun"] .pickmark { width:32px; height:32px; }
[data-theme="sun"] .pickmark svg { width:19px; height:19px; }

/* A chevron at the end of a tappable row. Not .tag — that is a bordered pill
   meant for a word, and an icon inside it renders as an empty box. */
.rowchev {
  flex:0 0 auto; width:14px; height:14px; margin-top:6px;
  color:var(--muted); transform:rotate(-90deg);
}
[data-theme="sun"] .rowchev { width:17px; height:17px; }

/* Section heading with something on the right — a progress count, usually. */
.sechead.headrow { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.sechead .progress { color:var(--muted); letter-spacing:.12em; }