/* Text sizes in rem (1rem = 16 px) so a larger system / browser text size scales them.
   Pickie A v2 (DESIGN_CANDIDATE, Figma bW8Vlqruq7xYdEtfBArZxO, handoff 2026-09-29). Neutral white / charcoal; the
   brand red only for the one main step and small identity marks. Colour roles = handoff tokens.css (contrast.json:
   every text pair ≥ 4.5:1 in both modes). Dark follows the system setting (prefers-color-scheme), the page's only
   colour-scheme authority. No web fonts, no CDN. */
:root {
  --canvas: #FFFFFF; --surface: #FFFFFF; --subtle: #F5F6F7; --ink: #17191C; --muted: #626A73; --line: #DFE3E7;
  --accent: #C83C34; --on-accent: #FFFFFF; --tint: #FFF0EC; --good: #25634A; --warn: #8A570B; --bad: #A33932;
  --focus: #285D8F; --sheet-shadow: 0 -8px 32px rgba(23, 25, 28, .12); --press: inset 0 2px 6px rgba(23, 25, 28, .18);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;
  --r-button: 12px; --r-surface: 16px; --r-card: 24px;
  --side: 20px; --nav-h: 56px;
  --safe-b: env(safe-area-inset-bottom, 0px);   /* the phone's bottom safe area: ONE value for the tab bar and the page */
  /* the tab bar's REAL row height: large text can wrap its labels and make it taller than --nav-h; next.js measures it
     (--nav-used) and the page reserves whichever is larger, so nothing at the end of a tab ever stays under it */
  --nav-room: max(var(--nav-h), var(--nav-used, 0px));
  font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --canvas: #141719; --surface: #202528; --subtle: #2A3034; --ink: #F5F6F7; --muted: #B7C0C8; --line: #414A52;
    --accent: #FF9D90; --on-accent: #261410; --tint: #382726; --good: #93D4B1; --warn: #F5C77A; --bad: #FFB0A8;
    --focus: #97C9F5; --sheet-shadow: 0 -8px 32px rgba(0, 0, 0, .5); --press: inset 0 2px 6px rgba(0, 0, 0, .5);
    color-scheme: dark; }
}
@media (max-width: 359px) { :root { --side: 16px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); min-height: 100vh; font-size: 1rem; line-height: 1.5;
  padding-bottom: calc(var(--nav-room) + var(--safe-b) + var(--s4)); overflow-wrap: anywhere; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
p { margin: 0; }
button { font: inherit; color: inherit; }
button:disabled { cursor: not-allowed; }
a { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* header: identity mark, the demo label, and (wide screens) the tabs */
.top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: var(--s5) var(--side) var(--s2);
  padding-top: max(var(--s5), env(safe-area-inset-top, 0px)); max-width: 1440px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: var(--s3); font-weight: 700; font-size: 1.5rem; line-height: 1.2; margin-right: auto; }
.logo { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--accent);
  color: var(--on-accent); font-size: 1.375rem; font-weight: 700; line-height: 1; padding-bottom: 3px; }
.fixture-banner { order: 3; margin: 0; font-size: 0.75rem; color: var(--muted); padding: var(--s1) 0; }

/* tabs: fixed at the bottom on phones (with the safe area), in the header on wide screens */
.bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--canvas); border-top: 1px solid var(--line); padding-bottom: var(--safe-b); }
.nav { min-height: var(--nav-h); border: 0; background: transparent; color: var(--ink); font-size: 1rem; font-weight: 700; cursor: pointer; }
.nav.on { color: var(--accent); }
@media (max-width: 1023px) {
  /* a phone keyboard is open (next.js: the visual viewport shrank while an input has focus): the tab bar steps aside
     so it never covers the input; it comes back only after 0.4 s, so the tap that ends typing (送出) is never caught
     by the bar reappearing under it */
  body.kbd-open .bottom { visibility: hidden; }   /* its 0.4 s return delay lives in next.js (not a motion effect) */
  /* with results on screen, the conditions card already says what was asked (A v2 frame 03): the raw words step aside */
  .has-results .bubble { display: none; }
  .has-results .said { display: block; }
}

main { max-width: 1440px; margin: 0 auto; padding: var(--s2) var(--side) var(--s4); }
[hidden] { display: none !important; }

/* heading of the current step */
.head { display: flex; flex-direction: column; gap: var(--s1); margin: var(--s2) 0 0; }
.headline { font-size: 1.75rem; line-height: 1.35; font-weight: 700; margin: 0; }
.headline:focus { outline: none; }
.subline { font-size: 0.875rem; color: var(--muted); }
@media (min-width: 390px) { .headline { font-size: 1.875rem; } }
h2 { font-size: 1.25rem; line-height: 1.4; margin: 0; }
h3 { font-size: 1.125rem; line-height: 1.5; margin: 0; }

/* the Pickie tab: conversation, results, notices, input — one column on phones, two areas on wide screens */
#tab-pickie { display: flex; flex-direction: column; gap: var(--s5); }
.conv, .thread, .results, .alerts { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.thread:empty, .results:empty, .alerts:empty { display: none; }
.meal-bar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s2); }
.meal-bar:empty, .meal-bar[hidden] { display: none; }
.results-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* surfaces */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s5); min-width: 0;
  display: flex; flex-direction: column; gap: var(--s2); }
.soft { background: var(--subtle); border-color: transparent; }
.note { color: var(--muted); font-size: 0.875rem; }
.meta { color: var(--muted); font-size: 0.75rem; }
.label { font-size: 0.875rem; color: var(--muted); font-weight: 700; }
.status { font-size: 1rem; color: var(--muted); }
.status.failed { color: var(--bad); }
.notice { font-size: 1rem; padding: var(--s3) var(--s4); border-radius: var(--r-surface); background: var(--tint); color: var(--ink); }
/* Mike 2026-10-09: until the page's code has started (html.no-js), nothing that needs it is offered — a static notice
   says why instead of an input that cannot send */
.nojs-notice { display: none; }
html.no-js .nojs-notice { display: block; }
html.no-js #composer, html.no-js .meal-bar, html.no-js nav.bottom { display: none; }
.candidate-copy { font-size: 0.75rem; color: var(--muted); }

/* buttons: 48 px high (never below 44), the label always readable, two-line labels grow the button */
main button, .sheet button { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 48px;
  min-width: 44px; padding: var(--s2) var(--s5); border-radius: var(--r-button); font-size: 1rem; font-weight: 700; line-height: 1.4;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
main button.primary, .sheet button.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
main button.text, main button.quiet, .sheet button.text { background: transparent; border-color: transparent; }
main button.danger { background: var(--bad); border-color: var(--bad); color: var(--canvas); }
main button:not(:disabled):active, .sheet button:not(:disabled):active { box-shadow: var(--press); }
main button:not(.primary):not(.danger):not(:disabled):hover, .sheet button:not(.primary):not(:disabled):hover { background: var(--subtle); }
main button:disabled { background: var(--subtle); color: var(--muted); border-color: var(--line); }
main button.text:disabled, main button.quiet:disabled { background: transparent; border-color: transparent; }
.meal-bar button { min-height: 44px; padding: var(--s1) var(--s3); font-size: 0.875rem; }
.options { display: flex; flex-direction: column; gap: var(--s3); }
.card > button, .options > button { width: 100%; }

/* what the user said (the words themselves; 「你說：」 is decoration) */
.bubble { color: var(--muted); font-size: 0.875rem; }
.bubble::before { content: var(--said-prefix, "你說："); }   /* the viewer's language (i18n) */

/* 「Pickie 目前的理解」: the canonical conditions as the server keeps them, then 修改條件 */
.understood-card { background: var(--subtle); border-color: transparent; }
.understood { margin: 0; padding: 0; list-style: none; font-size: 1rem; line-height: 1.75; }
.understood .chip { display: inline; }
.understood .chip:not(:last-child)::after { content: "・"; color: var(--muted); font-weight: 400; display: inline-block; padding: 0 var(--s1); text-decoration: none; }
.chip.hard { font-weight: 700; }
.chip.relaxed { color: var(--muted); }   /* 2026-10-07: the words say what was lifted (料理不限（取消：…）) */

/* landmark confirmation: one card per option the server offered */
.place { background: var(--subtle); border-color: transparent; gap: var(--s3); }
.place-name { font-size: 1.25rem; font-weight: 700; line-height: 1.4; }

/* restaurant cards */
.cand.x, .cand.lead { background: var(--subtle); border-color: transparent; }
.cand-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); font-size: 0.875rem; font-weight: 700; }
.rank { font-size: 0.75rem; font-weight: 700; color: var(--on-accent); background: var(--accent); border-radius: 999px; padding: 1px 10px; }
.cand:not(.first) .rank { background: var(--canvas); color: var(--ink); border: 1px solid var(--line); }
.pill { font-size: 0.875rem; font-weight: 700; }
.pill.q { color: var(--good); }
.pill.q::before { content: "✓ "; }
.pill.lead { color: var(--warn); }
.pill.lead::before { content: "? "; }
.pill.x { color: var(--bad); }
.pill.x::before { content: "✕ "; }
.pill.badge { color: var(--good); }
.pill.badge::before { content: "・"; }
.cand.x .pill.badge, .cand.lead .pill.badge { color: var(--muted); }
.pill.done { color: var(--good); border: 1px solid var(--good); border-radius: 999px; padding: 0 var(--s2); }
.pill.done::before { content: "✓ "; }
.cand-name { font-weight: 700; font-size: 1.5rem; line-height: 1.4; }
.cand.x .cand-name, .cand.lead .cand-name { font-size: 1.125rem; }
.lines { display: flex; flex-direction: column; gap: var(--s1); }
.reason { font-size: 0.875rem; color: var(--muted); }
.reason.inference { font-style: italic; }
.verified { font-size: 0.875rem; color: var(--good); }
.unmet { font-size: 0.875rem; font-weight: 700; color: var(--bad); }
.cand.lead .unmet { color: var(--warn); }
.rule { border: 0; border-top: 1px solid var(--line); margin: var(--s2) 0 0; }
.actions { display: flex; flex-direction: column; gap: var(--s2); }
.actions button { width: 100%; }
.marks { display: flex; flex-wrap: wrap; gap: var(--s2); }
.order-reason { font-size: 0.875rem; color: var(--ink); background: var(--subtle); border-radius: 8px; padding: 2px var(--s2); width: fit-content; max-width: 100%; }
.cand.x .order-reason, .cand.lead .order-reason { background: var(--canvas); }
.order-note { font-size: 0.875rem; color: var(--muted); }
.why { display: none; }
.more summary { cursor: pointer; font-weight: 700; min-height: 48px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-button); list-style: none; }
.more summary::-webkit-details-marker { display: none; }
.more summary:hover { background: var(--canvas); }
.more .lines { padding-bottom: var(--s2); }
.next-meal { display: flex; flex-direction: column; gap: var(--s2); }
.next-meal button { width: 100%; }

/* 查看依據: a sheet (modal dialog) — every verified line with ITS own sources */
.sheet { border: 0; padding: 0; margin: auto auto 0; width: 100%; max-width: 640px; max-height: 88vh; border-radius: var(--r-card) var(--r-card) 0 0;
  background: var(--surface); color: var(--ink); box-shadow: var(--sheet-shadow); overflow: auto; }
.sheet::backdrop { background: rgba(23, 25, 28, .45); }
.sheet-body { padding: var(--s6) var(--side) calc(var(--s6) + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: var(--s4); }
.sheet h2 { font-size: 1.75rem; line-height: 1.35; }
.source-group { border-bottom: 1px solid var(--line); padding-bottom: var(--s3); display: flex; flex-direction: column; gap: var(--s1); }
.source-line { font-weight: 700; font-size: 1.125rem; color: var(--good); }
.source-line::before { content: "✓ "; }
.source-line.stale { color: var(--muted); }
.source-line.stale::before { content: "! "; }
.said { display: none; }
.said summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.source-group a { display: flex; align-items: center; justify-content: center; min-height: 48px; font-weight: 700; color: var(--ink);
  text-decoration: none; border-radius: var(--r-button); }
.source-group a:hover { background: var(--subtle); }
.sheet .close { width: 100%; }
@media (min-width: 700px) { .sheet { margin: auto; border-radius: var(--r-card); } }

/* home and demo examples (FIXTURE launcher only) */
.hero { background: var(--subtle); border-color: transparent; padding: var(--s5) var(--s5) var(--s6); }
.hero-title { font-size: 1.5rem; font-weight: 700; line-height: 1.5; }
.hero .note { font-size: 1rem; }
.quick { display: flex; flex-direction: column; gap: var(--s3); }
.quick .label { font-weight: 400; color: var(--ink); }
.quick button { width: 100%; }
.demo-item { border-top: 1px solid var(--line); padding-top: var(--s3); display: flex; flex-direction: column; gap: var(--s1); }
.demo-item:first-of-type { border-top: 0; padding-top: 0; }
.demo-title { font-weight: 700; }
.demo-text { font-weight: 700; }
.demo-steps { margin: 0; padding-left: var(--s5); font-size: 0.875rem; color: var(--muted); }

/* input: fills the row; the 48 px send button never leaves the frame */
.composer { display: flex; align-items: flex-end; gap: var(--s2); padding: var(--s2) var(--s2) var(--s2) var(--s3); border: 1px solid var(--line);
  border-radius: var(--r-surface); background: var(--surface); scroll-margin-bottom: var(--s4); }
.composer:focus-within { border-color: var(--ink); }
.composer textarea { flex: 1 1 auto; min-width: 0; resize: none; border: 0; outline: none; padding: var(--s3) 0; min-height: 48px;
  font: inherit; font-size: 1rem; line-height: 1.5; background: transparent; color: var(--ink); field-sizing: content; max-height: 40vh; }
.composer textarea::placeholder { color: var(--muted); opacity: 1; }
.composer:has(textarea:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.composer button { flex: none; width: 48px; height: 48px; border: 0; border-radius: var(--r-button); background: var(--ink); color: var(--canvas);
  font-size: 1.375rem; font-weight: 700; cursor: pointer; }
.composer button:disabled { background: var(--line); color: var(--muted); }
.foot { display: flex; flex-direction: column; gap: var(--s2); }
.private-banner, .fine-print { font-size: 0.75rem; color: var(--muted); }
.extras { display: flex; flex-direction: column; gap: var(--s3); }
.extras:empty { display: none; }

/* recovery: what is still being checked, and the one safe step */
.recovery-card { background: var(--subtle); border-color: transparent; gap: var(--s3); }
.recovery-card .what { font-weight: 700; }
.recovery { display: flex; flex-direction: column; gap: var(--s2); }
.recovery button { width: 100%; }

/* 餐廳簿 */
.book { list-style: none; padding: 0; margin: var(--s4) 0 0; display: flex; flex-direction: column; }
.book > li { border-bottom: 1px solid var(--line); padding: var(--s3) 0; display: flex; flex-direction: column; gap: var(--s1); }
.book .label { font-size: 1.25rem; color: var(--ink); }
.book p { color: var(--muted); }
#tab-book > .note { margin-top: var(--s2); }
.memory { margin-top: var(--s6); display: flex; flex-direction: column; gap: var(--s3); }
.memory > button, .memory .options > button { width: 100%; }
.memory .pref { display: flex; flex-direction: column; gap: var(--s2); background: var(--subtle); border-radius: var(--r-surface); padding: var(--s4); }
.memory .pref > span { font-weight: 700; font-size: 1.125rem; }
.memory .pref button { width: 100%; }

/* feature cards (flags; CANDIDATE) */
.feature > button { width: 100%; }
.feedback textarea { width: 100%; font: inherit; font-size: 1rem; border: 1px solid transparent; border-radius: var(--r-button); padding: var(--s3);
  background: var(--subtle); color: var(--ink); min-height: 76px; field-sizing: content; }
.feedback textarea:focus-visible { border-color: var(--ink); }

/* wide screens: conversation and input on the left, results on the right; narrower than that, one column */
@media (min-width: 1024px) {
  body { background: var(--subtle); padding-bottom: var(--s8); }
  .top { padding: var(--s8) var(--s8) var(--s4); }
  .bottom { position: static; display: flex; order: 2; border: 0; background: var(--surface); border-radius: var(--r-button); padding: 0; }
  .nav { min-width: 118px; padding: 0 var(--s5); min-height: 48px; border-radius: var(--r-button); }
  main { padding: var(--s2) var(--s8); }
  #tab-pickie { display: grid; grid-template-columns: minmax(360px, 420px) minmax(0, 1fr); column-gap: var(--s8); row-gap: var(--s4);
    grid-template-rows: auto auto auto auto 1fr; align-items: start; }
  .conv { grid-column: 1; grid-row: 1; }
  .alerts { grid-column: 1; grid-row: 2; }
  .composer { grid-column: 1; grid-row: 3; }
  .extras { grid-column: 1; grid-row: 4; }
  .foot { grid-column: 1; grid-row: 5; }
  .results { grid-column: 2; grid-row: 1 / span 5; background: var(--surface); border-radius: var(--r-card); padding: var(--s6); }
  .results-title { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; font-size: 1.75rem; }
  .bubble { background: var(--surface); color: var(--ink); font-size: 1.125rem; border-radius: var(--r-card); padding: var(--s5); }
  .bubble::before { content: none; }
  .understood-card { background: transparent; padding: 0 var(--s3); }
  .hero, .place, .recovery-card, .cand.x, .cand.lead { background: var(--surface); }
  .results .cand.x, .results .cand.lead { background: var(--subtle); }
  .first-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
  .why { display: flex; flex-direction: column; gap: var(--s2); padding-top: var(--s2); }
  .why h3 { font-size: 1.5rem; }
  .headline { font-size: 2rem; }
  #tab-book, #tab-party { max-width: 720px; }
}
@media (min-width: 1024px) and (prefers-color-scheme: dark) { body { background: var(--canvas); } }

/* W4 Party v0 (flag `party`; FIXTURE): A v2 tokens and components */
.party { display: flex; flex-direction: column; gap: var(--s4); }
.pgrid { display: flex; flex-direction: column; gap: var(--s4); }
.pcol { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.prow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); }
.plabel { display: flex; flex-direction: column; gap: var(--s1); font-weight: 700; }
.pinput { font: inherit; font-size: 1rem; width: 100%; min-height: 48px; padding: var(--s2) var(--s3); border: 1px solid var(--line);
  border-radius: var(--r-button); background: var(--surface); color: var(--ink); }
select.pinput { margin-bottom: var(--s2); }
/* very large text (WebKit, 300 %): a Party card can report a few px of layout overflow although every child fits; clip
   it sideways so the page never scrolls sideways (no scroll container: the docked composer keeps working; the cards'
   padding keeps focus outlines inside) */
#tab-party .card { overflow-x: clip; }
/* Party on phones (Mike: the tab bar covered 送出訊息): the message box and 送出 share one row, so whenever the box is on
   screen 送出 is too. On phones that row docks just above the tab bar (and its safe area) while the chat card is on
   screen, like a messaging app: it can never sit under the bar, and nothing scrolls, focuses or moves the page. The
   browser's own focus scrolling also keeps clear of the bar while the Party tab shows. */
.pcompose { display: flex; align-items: flex-end; gap: var(--s2); }
.pcompose .pinput { flex: 1 1 auto; width: auto; min-width: 0; }
.pcompose button { flex: none; }
@media (max-width: 1023px) {
  #tab-party [data-slot="composer"] { position: sticky; bottom: calc(var(--nav-room) + var(--safe-b)); z-index: 1;
    background: var(--surface); padding: var(--s2) 0; }
  body.kbd-open #tab-party [data-slot="composer"] { bottom: 0; }   /* the bar steps aside for the keyboard: dock at the edge */
  html:has(#tab-party:not([hidden])) { scroll-padding-bottom: calc(var(--nav-room) + var(--safe-b)); }
}
.pwho { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
.pnick { font-weight: 700; }
.pchip { font-size: 0.75rem; font-weight: 700; border: 1px solid var(--line); border-radius: 999px; padding: 0 var(--s2); color: var(--muted);
  background: var(--subtle); }
.pchip.host { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.pstate { font-size: 0.875rem; color: var(--muted); }
.pstate.ok { color: var(--good); }
.pfield { border: 1px solid var(--line); border-radius: var(--r-surface); padding: var(--s2) var(--s3); margin: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.pfield legend { font-weight: 700; padding: 0 var(--s1); }
.pcheck { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; }
.pcheck input { width: 22px; height: 22px; }
.pcond { display: flex; flex-direction: column; gap: var(--s1); border-top: 1px solid var(--line); padding-top: var(--s2); }
.plist { margin: 0; padding-left: var(--s5); display: flex; flex-direction: column; gap: var(--s1); }
.plist .hard { font-weight: 700; }
div.plist { padding-left: 0; }
.pcand { border-top: 1px solid var(--line); padding-top: var(--s2); }
.pcand .cand-name { font-size: 1.25rem; }
/* Party chat: the LINE / WhatsApp layout — mine on the right, others on the left; a bubble is as wide as its words (at
   most 80 % of the list; on wide screens also 34rem); long words and links wrap, never scroll sideways */
.pmsgs { display: flex; flex-direction: column; gap: var(--s3); max-height: 50vh; overflow-y: auto; overflow-x: hidden;
  padding: var(--s1) 0; }
.pmsg { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); align-self: flex-start;
  max-width: 80%; min-width: 0; }
.pmsg.mine { align-self: flex-end; align-items: flex-end; }
.ptext { background: var(--subtle); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-surface);
  border-bottom-left-radius: 4px; padding: var(--s2) var(--s3); white-space: pre-wrap; overflow-wrap: anywhere;
  word-break: break-word; text-align: left; max-width: 100%; margin: 0; }
.pmsg.mine .ptext { background: var(--tint); border-color: color-mix(in srgb, var(--accent) 30%, var(--tint));
  border-radius: var(--r-surface); border-bottom-right-radius: 4px; }
@media (min-width: 1024px) {
  #tab-party:not([hidden]) { max-width: 1200px; }
  .pmsg { max-width: min(80%, 34rem); }
  .pgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--s6); }
}

/* US trial 2026-10-07 — 「Pickie 目前的理解」 in four groups (地點 / 日期・時間 / 必要條件 / 偏好) */
.u-group + .u-group { margin-top: var(--s2); }
.u-head { margin: 0; font-size: 0.75rem; font-weight: 700; color: var(--muted); letter-spacing: 0.02em; }

/* the questions Pickie asked and what each step found, between the user's words */
.pickie-line { margin: 0; font-size: 0.875rem; color: var(--ink); padding-left: var(--s3); border-left: 3px solid var(--tint); }
.pickie-line.result { color: var(--muted); }

/* Pickie at work: the Pickie mark breathing, a moving ellipsis; a stage line only when the server reports one */
.working { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--s3); row-gap: var(--s1);
  padding: var(--s3) 0; }
.working-mark { width: 32px; height: 32px; border-radius: 9px; font-size: 1rem; animation: pickie-breathe 1.6s ease-in-out infinite; }
.working-text { margin: 0; font-size: 1rem; color: var(--ink); }
.working-dots { display: inline-block; width: 1.5em; overflow: hidden; vertical-align: bottom; animation: pickie-dots 1.2s steps(4, end) infinite; }
.working-stage { grid-column: 2; margin: 0; font-size: 0.875rem; color: var(--muted); }
@keyframes pickie-breathe { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-3px) scale(1.06); } 60% { transform: translateY(0) scale(1); } }
@keyframes pickie-dots { from { width: 0; } to { width: 1.5em; } }
@media (prefers-reduced-motion: reduce) { .working-dots { width: auto; } }

/* the interface language (per device): one button in the header, a small menu */
.lang-switch { position: relative; order: 2; }
.lang-button { min-height: 36px; padding: 2px var(--s3); font-size: 0.875rem; border-radius: 999px; background: transparent;
  border: 1px solid var(--line, currentColor); color: var(--ink); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; display: flex; flex-direction: column; min-width: 150px;
  background: var(--surface); border: 1px solid var(--line, currentColor); border-radius: 12px; padding: var(--s1);
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.14); }
.lang-menu[hidden] { display: none; }
.lang-menu button { text-align: left; min-height: 40px; padding: var(--s1) var(--s3); background: transparent; border: 0; border-radius: 8px; color: var(--ink); }
.lang-menu button[aria-checked="true"] { font-weight: 700; color: var(--accent); }
.lang-menu button[aria-checked="true"]::after { content: " ✓"; }
.lang-menu button:focus-visible, .lang-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* B1a (flag media): card photo + results map. The map sits after the list on phones; wide screens put it beside the
   list (sticky). Status is never colour alone: a lead marker carries "?", an excluded one "✕" and a square shape. */
.results-wrap { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.cand.with-media { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: var(--s4); align-items: start; cursor: pointer; }
.cand.with-media > .cand-body { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.cand.with-media.map-sel { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.cand-photo { width: 96px; height: 96px; border-radius: var(--r-button); overflow: hidden; position: relative; background: var(--subtle);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s1); }
.cand-photo img { width: 96px; height: 96px; object-fit: cover; display: block; }
.cand-photo.ph { border: 1px dashed var(--line); }
.cand-photo .ph-icon { font-size: 1.5rem; line-height: 1; opacity: .7; }
.cand-photo .ph-text { font-size: 0.75rem; color: var(--muted); text-align: center; padding: 0 var(--s1); }
.cand-photo .ph-sim { position: absolute; left: 4px; top: 4px; font-size: 0.6875rem; font-weight: 700; background: rgba(0, 0, 0, .6);
  color: #fff; border-radius: 6px; padding: 0 4px; }
.cand-num { font-variant-numeric: tabular-nums; }
.cand-where { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); font-size: 0.875rem; }
.cand-where .cand-map { font-size: 0.875rem; }
.cand-locate { padding: 0; min-height: 32px; text-decoration: underline; background: none; border: 0; cursor: pointer; font-weight: 700; }
.results-map { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s3); min-width: 0; }
.results-map[hidden] { display: none; }
.pm-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); }
.pm-title { font-size: 1.125rem; margin: 0; }
.pm-count { flex: 1 1 auto; }
.pm-tools { display: flex; flex-wrap: wrap; gap: var(--s1); }
.pm-tools button { min-height: 36px; padding: 0 var(--s2); border: 1px solid var(--line); border-radius: var(--r-button); background: var(--canvas); cursor: pointer; }
.pm-body { position: relative; margin-top: var(--s2); }
.pm-canvas { height: 300px; border-radius: var(--r-button); overflow: hidden; background: var(--subtle); touch-action: none; }
.results-map.big .pm-canvas { height: 70vh; }
.results-map.collapsed .pm-body { display: none; }
.pm-svg { display: block; width: 100%; height: 100%; user-select: none; }
.pm-bg { fill: var(--subtle); }
.pm-grid { stroke: var(--line); stroke-width: 1; }
.pm-watermark { fill: var(--muted); font-size: 12px; opacity: .8; }
.pm-leader { stroke: var(--muted); stroke-width: 1.5; }
.pm-true { fill: var(--muted); }
.pm-marker { cursor: pointer; outline: none; }
.pm-marker .pm-shape { fill: var(--accent); stroke: var(--surface); stroke-width: 3; }
.pm-marker .pm-num { fill: var(--on-accent); font-size: 13px; font-weight: 700; pointer-events: none; }
.pm-marker.lead .pm-shape { fill: var(--surface); stroke: var(--warn); stroke-dasharray: 4 3; stroke-width: 3; }
.pm-marker.lead .pm-num { fill: var(--ink); }
.pm-marker.x .pm-shape { fill: var(--subtle); stroke: var(--muted); }
.pm-marker.x .pm-num { fill: var(--muted); font-size: 12px; }
.pm-marker.sel .pm-shape { stroke: var(--ink); stroke-width: 4; }
.pm-marker:focus-visible .pm-shape { stroke: var(--focus); stroke-width: 4; }
.pm-halo { fill: none; stroke: var(--ink); stroke-width: 2; opacity: .35; }
.pm-center rect { fill: var(--ink); }
.pm-center text { fill: var(--ink); font-size: 12px; font-weight: 700; }
.pm-popup { position: absolute; z-index: 2; left: 8px; right: 8px; bottom: 8px; background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r-button); box-shadow: 0 6px 20px rgba(0, 0, 0, .18); padding: var(--s2); }
.pm-pop { display: flex; flex-direction: column; gap: var(--s2); }
.pm-pop-row { display: flex; gap: var(--s2); align-items: flex-start; }
.pm-pop-photo { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex: none; }
.pm-pop-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 0.875rem; }
.pm-close { position: absolute; right: 4px; top: 0; background: none; border: 0; font-size: 1.25rem; cursor: pointer; }
.pm-showcard { min-height: 36px; border-radius: var(--r-button); border: 1px solid var(--line); background: var(--canvas); cursor: pointer; }
.pm-msg { margin-top: var(--s2); }
.pm-foot { margin-top: var(--s2); }
.pm-pin { min-width: 28px; height: 28px; padding: 0 6px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 13px; border: 3px solid #fff; }
.pm-pin.lead { background: #fff; color: #17191C; border: 3px dashed #8A570B; }
.pm-pin.x { background: #F5F6F7; color: #626A73; border-radius: 6px; }
.pm-pin.sel { outline: 3px solid #17191C; }
.pm-pin.center { background: #17191C; color: #fff; border-radius: 6px; font-size: 12px; }
@media (min-width: 1024px) {
  .results-wrap { grid-column: 2; grid-row: 1 / span 5; }
}
@media (min-width: 1280px) {
  .results-wrap:has(.results-map:not([hidden])) { display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: var(--s6); align-items: start; }
  .results-wrap .results-map { position: sticky; top: var(--s4); }
}
.cand.with-media .cand-name { font-size: 1.25rem; }
.cand-reason { font-size: 0.9375rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cand-more > summary { cursor: pointer; font-size: 0.875rem; font-weight: 700; color: var(--muted); min-height: 32px; display: flex; align-items: center; }
.cand-more[open] > summary { margin-bottom: var(--s2); }
.cand-more { display: flex; flex-direction: column; gap: var(--s2); }
.cand.with-media .cand-name { display: flex; align-items: flex-start; gap: var(--s2); }
.cand-num { flex: none; min-width: 1.75rem; height: 1.75rem; border-radius: 0.875rem; background: var(--ink); color: var(--canvas);
  font-size: 0.875rem; display: inline-flex; align-items: center; justify-content: center; margin-top: 0.125rem; }
.cand.lead .cand-num { background: var(--surface); color: var(--ink); border: 2px dashed var(--warn); }
.cand.x .cand-num { background: var(--subtle); color: var(--muted); border-radius: 6px; border: 1px solid var(--muted); }
.cand-label { min-width: 0; }
.pm-tools .pm-btn { min-height: 32px; padding: 0 var(--s2); font-size: 0.875rem; border: 1px solid var(--line); border-radius: var(--r-button);
  background: var(--canvas); color: var(--ink); cursor: pointer; }
.pm-head { row-gap: var(--s2); }
.pm-tools { margin-left: auto; }
.pm-pop-text { padding-right: 18px; }
.pm-pop { gap: var(--s1); }
.pm-pop-photo { width: 52px; height: 52px; }
.pm-pop-text p, .pm-pop-text strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-showcard { min-height: 32px; font-size: 0.875rem; }
/* Google's info window is always white: fixed dark text, whatever the page theme */
.gm-style .pm-pop, .gm-style .pm-pop strong { color: #17191C; }
.gm-style .pm-pop .note { color: #4A5159; }
.gm-style .pm-showcard { background: #fff; color: #17191C; border-color: #C9CDD2; }
@media (min-width: 1024px) {
  .results-wrap > .results { grid-column: auto; grid-row: auto; }     /* the page grid places the wrapper, not the list */
}
@media (min-width: 1280px) {
  .results-wrap > .results { grid-column: 1; grid-row: 1; }
  .results-wrap > .results-map { grid-column: 2; grid-row: 1; }
}
@media (min-width: 1024px) {   /* beside a map, the first card and its "why" stack (no squeezed half-width card) */
  .results-wrap:has(.results-map:not([hidden])) .first-row { grid-template-columns: minmax(0, 1fr); }
}

/* B1b: Pickie's short next-step lines and the share block (Party) */
.pickie-says { background: var(--tint); border-radius: var(--r-button); padding: var(--s2) var(--s3); font-size: 0.9375rem; }
.ptime { font-weight: 700; }
.pshare { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); }
.pshare-text { width: 100%; font: inherit; font-size: 0.875rem; resize: vertical; }

/* B1c: Pickie's explanation and offered changes when results fall short */
.assist { display: flex; flex-direction: column; gap: var(--s2); }
.assist-options { display: flex; flex-direction: column; gap: var(--s2); }
.assist-option button { font-weight: 700; text-decoration: underline; background: none; border: 0; padding: 0; min-height: 32px; cursor: pointer; text-align: left; }

/* ChatGPT display options (A): Google's place element on a stored card; the preview stand-in is labelled */
.gplace{margin:8px 0;border:1px solid var(--line, #3a3f45);border-radius:12px;padding:10px 12px}
.gplace:empty{display:none}
.gplace.gplace-measuring{display:block;min-height:1px}   /* waiting for Google's element: measurable (Codex R206 #1) */
.gplace-photo{width:100%;height:72px;border-radius:8px;background:#2b3036;display:flex;align-items:center;justify-content:center;font-size:28px}
.gplace-name{font-weight:700;margin:8px 0 2px}
.gplace-attr{text-align:right;margin:4px 0 0}
.gplace-sim{margin:0 0 6px}

/* display option A: Google's element carries the photo, so the card has one full-width column (no photo column) */
.cand.with-media.via-element { grid-template-columns: minmax(0, 1fr); }
.gplace gmp-place-details-compact { width: 100%; display: block; }