/* Chinatown Trails — "Monocle" editorial theme (boss 2026-11-02: the whole app should feel like monocle.com; Hawaiian elements come later).
   A skin over proto.css: layout, sizes, touch targets and interactions are unchanged. Add ?wire to the URL to see the grayscale wireframe.
   What we took from monocle.com (measured 2026-11-02):
   - One quiet face, regular weight, never bold (their Plantin 400). Boss 2026-11-02: no serif — Gill Sans, Helvetica as fallback.
   - Kickers and meta: small capitals with light tracking, grey, joined by " | " (AFFAIRS · 3 MIN READ).
   - Controls: small semibold capitals (their Helvetica Neue Bold).
   - White paper, black ink, hairline black rules between items instead of boxes; heavy rule over a section title.
   - One accent on the main action (their yellow; ours is 琥珀黃 from the v2 standard). A dark panel for "special" blocks (their radio module; ours is 深綠).
   - Square corners. Only badges, stamps and the avatar stay round.
   Hawaiian layer: colours come from the v2 badge standard, warm set (see :root); illustration later. */
:root {
  /* Colours: design/HAWAII_COLOR_STANDARD.md v2 (13 colours). Boss 2026-11-02: recolour the app with it, then "warmer, livelier".
     Cool greys only for text and lines (tints of 深墨 #263238: 85% / 75% / 20%); warm grounds are tints of 蜜桃 #FFCCBC. App only, not badges. */
  --ink: #263238; --ink-2: #475156; --ink-3: #5c656a;   /* 13.2 · 8.1 · 5.8 :1 on white; ink-3 5.2:1 on --fill */
  --line-strong: #263238; --line: #d4d6d7; --line-2: #ffccbc; --fill: #ffebe4; --paper: #ececee; --page: #ffe6de;   /* app background light grey (boss 2026-11-02: pure white too bright) */
  --accent: #ff7043; --accent-ink: #263238;             /* 橙: main action, current tab, section rule; ink text 4.8:1 */
  --accent-2: #fcb400;                                  /* 琥珀黃: correct answer, earned badge, affordable treat, swipe fill */
  --hi: #f48fb1;                                        /* 粉: points panel, story clue highlighter; ink on it 5.9:1 */
  --panel: var(--hi); --panel-ink: #263238; --panel-ink-2: #263238;
  --rule: var(--accent);
  --progress: var(--accent);
  --r-s: 0px; --r: 0px; --r-l: 0px;
  --text: var(--sans);
  --sans: "Gill Sans", "Gill Sans MT", "Gill Sans Nova", "Helvetica Neue", Arial, "PingFang TC", "Noto Sans TC", sans-serif;
  --caps: .06em;
  font-family: var(--text);
}
:root:lang(zh-Hans) { --sans: "Gill Sans", "Gill Sans MT", "Helvetica Neue", Arial, "PingFang SC", "Noto Sans SC", sans-serif; font-family: var(--text); }
:root:lang(ja) { --sans: "Gill Sans", "Gill Sans MT", "Helvetica Neue", Arial, "Hiragino Sans", "Noto Sans JP", sans-serif; font-family: var(--text); }
:root:lang(ko) { --sans: "Gill Sans", "Gill Sans MT", "Helvetica Neue", Arial, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; font-family: var(--text); }

/* ── Type: one face, regular weight; Light (300) for display titles and big numbers ── */
.pr-screen h1, .pr-screen h2, .pr-notes h3, .pr-slide h1, .pr-done h1, .pr-plaque-card h2, .pr-langsheet-card h2, .pr-code-name, .pr-stop-name, .pr-feedback b, .pr-notes-screen, .tour-title { font-family: var(--text); font-weight: 400; letter-spacing: -.005em; }
.pr-screen h1 { font-size: 26px; line-height: 1.2; }
.pr-slide h1, .pr-done h1 { font-size: 30px; line-height: 1.15; font-weight: 300; }
.pr-kicker, .pr-qtag p, .pr-title-row p, .pr-about dt, .pr-notes-title, .tour-part, .tour-label, .tour-brand, .pr-stop small, .pr-summary > div > span, .pr-reward small, .pr-plaque-addr {
  font-family: var(--text); font-weight: 400; text-transform: uppercase; letter-spacing: var(--caps); color: var(--ink-3); }
.pr-kicker { color: var(--ink); }
.pr-note, .pr-src, .pr-figcap, .pr-loc { font-family: var(--text); }
.pr-notes p, .pr-slide p { font-family: var(--text); color: var(--ink-2); }
.pr-notes p { font-size: 17px; line-height: 1.6; }

/* ── Controls: small sans capitals ── */
.pr-btn, .pr-read, .pr-tabs button, .pr-reward button, .pr-chip, .pr-lang, .pr-hud-badges, .pr-swipe-label, .pr-toast, .pr-link, .pr-back, .pr-reset, .pr-index-title, .browser-switch button, .pr-redeemed, .tour-lang button {
  font-family: var(--sans); }
.pr-btn, .pr-read, .pr-tabs button, .pr-reward button, .pr-swipe-label, .pr-redeemed { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.pr-btn-primary { background: var(--accent); color: var(--accent-ink); }
.pr-btn-dark { border: 1px solid var(--ink); }
.pr-unflip { border: 0; background: var(--accent); color: var(--accent-ink); }
.pr-link { font-size: 14px; color: var(--ink); text-decoration-thickness: 1px; }
.pr-back { color: var(--ink); }
.pr-read { border: 0; background: var(--accent); color: var(--accent-ink); } /* orange fill, ink text 4.8:1 (boss 2026-11-02) */
/* Next sits beside the orange line after a right answer: an outline button so the two don't merge. */
.pr-qfoot .pr-next { border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); }
.pr-read:active { filter: brightness(.94); }

/* ── Player bar: a slim masthead ── */
.pr-hud { border-bottom: 1px solid var(--ink); } /* line under the top bar (boss 2026-11-02) */
.pr-wordmark { font-family: var(--text); font-weight: 400; font-size: 23px; line-height: 1; letter-spacing: -.01em; } /* reads as the page title (boss 2026-11-02) */
@media (max-width: 360px) { .pr-wordmark { font-size: 20px; } } /* stays clear of the two buttons on 320px phones */
.pr-hud-level { font-family: var(--text); }
.pr-hud-level b { font-weight: 400; font-size: 16px; }
.pr-hud-medal { font-family: var(--sans); font-weight: 600; }
.pr-meter { height: 3px; border-radius: 0; background: var(--line-2); }
.pr-meter span { background: var(--progress); }
.pr-lang, .pr-hud-badges { border-color: var(--ink); }
.pr-hud-about, .pr-info { font-family: var(--text); font-style: italic; font-weight: 400; border-color: var(--ink); color: var(--ink); }
.pr-info { border-width: 1px; }

/* ── Intro carousel: thin rules for progress ── */
.pr-bars button::before, .pr-bars button::after { top: 21px; height: 2px; border-radius: 0; }
.pr-bars button::after { background: var(--progress); }

/* ── Stop brief ── */
.pr-bubble { border: 0; border-left: 2px solid var(--ink); padding: 2px var(--s2) 2px var(--s3); font-family: var(--text); font-size: 17px; line-height: 1.45; }
.pr-mission li { border-radius: 0; border-color: var(--ink); color: var(--ink); font-family: var(--sans); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.pr-earn { border: 0; border-block: 1px solid var(--ink); font-family: var(--text); }
.pr-photo .pr-earn { border: 1px solid var(--ink); border-radius: 0; font-size: 15px; } /* reward label on the picture (boss 2026-11-02) */
.pr-earn b { font-weight: 400; font-size: 24px; line-height: 1; }
.pr-loc.is-off, .pr-pts-note, .pr-goal { border: 0; background: var(--fill); }

/* ── Puzzles ── */
.pr-qtag .pr-qtag-step { color: var(--ink); font-size: 13px; } /* sits straight on the picture, so full ink */
.pr-dots i { height: 2px; border-radius: 0; }
.pr-dots i.on { background: var(--progress); }
.pr-dots i.done { background: var(--ink-3); }
.pr-object { background: var(--fill); }
/* Puzzle 1 trial (boss 2026-11-02): the text sits at the bottom of the card and the picture takes all the space above it.
   The bucket keeps one size in every language, set by the language with the most text (English in iPhone Safari: 85% of a 1.3:1 box),
   and only gets smaller when a box is shorter than that. The bucket plus shadow is 62.5% of the image height, centred at 52.6%;
   where a taller box shows past the image, the image fades into its own edge colour. */
.pr-object-scene { flex: 1; container-type: size; background: #fcf0e5; }
/* 5:4 engravings that already match the stamp (all five puzzles, boss 2026-11-02): fill the stamp at one shared zoom, and each
   picture is nudged (--art-y, measured per image) so the floor line — where wall meets floor — sits at 77% of the stamp height
   on every stamp. */
.pr-object-art { background: #fcf0e5; }
.pr-object-art img { object-fit: cover; transform: translate(var(--art-x, 0%), var(--art-y, 0%)) scale(var(--art-zoom, 1)); } /* --art-x only where a caption would touch the object */ /* the image's own edge colour (v7-b copperplate etching) */
.pr-object-scene img { inset: auto; left: 50%; top: 50%; width: auto; height: min(103.3cqw, 134cqh); transform: translate(-50%, -53%); -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.pr-object img, .pr-fig img, .pr-lb-view img { filter: none; }
.pr-tag { border-radius: 0; border-color: var(--ink); font-family: var(--text); text-transform: uppercase; letter-spacing: var(--caps); }
.pr-front h2 { font-size: 19px; font-weight: 600; line-height: 1.25; } /* 21 → 19 and heavier, so it still leads the options (boss 2026-11-02); options stay 16 */
.pr-options { gap: 0; border-top: 1px solid var(--ink); }
.pr-opt { border: 0; border-bottom: 1px solid var(--ink); padding: 12px 2px; background: transparent; font-family: var(--text); font-size: 16px; } /* no fill: the textured paper shows through (boss 2026-11-02) */ /* one size down so options stay on one line (boss 2026-11-02) */
.pr-opt:last-child { border-bottom: 0; } /* the card's own edge closes the list (boss 2026-11-02) */
/* Answered: options keep their look; only the ✓ / ✗ mark is added (proto.css). */
.pr-feedback { border-left: 2px solid var(--ink); background: transparent; font-family: var(--text); font-size: 15px; }
.pr-feedback b { font-size: 20px; }

.pr-notes h3 { font-size: 26px; line-height: 1.2; }
.pr-clue { background: linear-gradient(transparent 58%, var(--hi) 58%); font-weight: 400; }
.pr-fig-zoom { border-radius: 0; background: var(--ink); }
.pr-notes .pr-onsite { border: 0; border-block: 1px solid var(--ink); padding: var(--s3) 0; }

/* ── Done ── */
.pr-stamp-slot { border: 1px solid var(--ink); }
.pr-summary { gap: 0; border-block: 1px solid var(--ink); }
.pr-summary div { border: 0; border-radius: 0; }
.pr-summary div + div { border-left: 1px solid var(--line); }
.pr-summary b { font-family: var(--text); font-weight: 300; font-size: 26px; }

/* ── Lists: hairline rows like a contents page ── */
.pr-title-row { flex-wrap: wrap; row-gap: 0; } /* no rule above the title (boss 2026-11-02: too heavy) */
.pr-title-row h1 { flex: 0 1 auto; min-width: 0; text-transform: uppercase; font-size: 20px; line-height: 1.15; letter-spacing: .01em; }
.pr-stops { gap: 0; border-top: 1px solid var(--ink); }
.pr-stop { border: 0; border-bottom: 1px solid var(--line); padding: var(--s3) 0; background: transparent; }   /* rows sit on the paper, no fill of their own */
.pr-stop-name { font-size: 19px; }
.pr-stop-plaque { border: 1px solid var(--ink); border-radius: 0; background: var(--paper); font-family: var(--text); }
.pr-stop-plaque b { font-weight: 400; font-size: 18px; }
.pr-stop-pts { font-family: var(--sans); }
.pr-stop-go { color: var(--ink); }
.pr-level-card { border: 0; }
/* The rule above each scrolling list belongs to the list itself and runs edge to edge, so content scrolls right up to it (no white band). */
.pr-stops, .pr-rewards, .pr-stamps { margin-inline: calc(var(--s4) * -1); padding-inline: var(--s4); }
.pr-stamps { border-top: 1px solid var(--ink); padding-top: var(--s3); }
.pr-level-card > p:first-child b { font-family: var(--text); font-weight: 400; font-size: 22px; }
.pr-stamp i { border: 1px solid var(--line); font-family: var(--text); font-weight: 400; }
.pr-stamp.is-done i { border: 2px solid var(--ink); background: var(--accent-2); }
.pr-stamp span { font-family: var(--text); }

/* Points wallet: the charcoal "special" block */
.pr-points { border: 0; background: var(--panel); color: var(--panel-ink); font-family: var(--sans); text-transform: uppercase; letter-spacing: .06em; font-size: 13px; font-weight: 600; }
.pr-points b { font-family: var(--text); font-weight: 300; font-size: 30px; color: var(--panel-ink); letter-spacing: 0; }
.pr-rewards { gap: 0; border-top: 1px solid var(--ink); }
.pr-reward { border: 0; border-bottom: 1px solid var(--line); padding: var(--s3) var(--s2) var(--s3) 0; font-family: var(--text); font-size: 16px; }
.pr-reward.is-open { border-color: var(--line); }
.pr-reward > b { border: 1px solid var(--ink); font-family: var(--text); font-weight: 400; }
.pr-reward.is-open > b { background: var(--accent-2); border-color: var(--accent-2); }
.pr-reward button { border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); } /* outline button (boss 2026-11-02) */
.pr-reward button:active:not(:disabled) { background: var(--fill); }
.pr-reward button:disabled { border-color: transparent; background: transparent; color: var(--ink-3); }

/* ── Redeem ── */
.pr-code-card, .pr-voucher, .pr-confirm-sum, .pr-redeemed { border: 1px solid var(--ink); }
.pr-swipe { border-radius: 0; box-shadow: inset 0 0 0 1px var(--ink); }
.pr-swipe::before { border-radius: 0; background: var(--accent-2); }
.pr-swipe-knob { border-radius: 0; }
.pr-voucher-ok, .pr-voucher-clock { font-family: var(--text); font-weight: 300; }
.pr-voucher-band { background-image: repeating-linear-gradient(var(--band-angle, 45deg), var(--accent) 0 10px, var(--accent-2) 10px 20px); }

/* ── Bottom tabs ── */
.pr-tabs { border-top: 1px solid var(--ink); }
.pr-tabs button { font-size: 13px; color: var(--ink-3); }
.pr-tabs button.is-on { color: var(--ink); }
/* Each tab has its own colour (from the approved 13-colour set), and its screen wears the same colour:
   current-tab underline, scroll indicator, and the level meter on Badges (--rule is the screen colour). */
.pr-tabs [data-go="stops"] { --tab-color: #009944; }          /* 綠 · Explore */
.pr-tabs [data-go="achievements"] { --tab-color: #1e88e5; }   /* 藍 · Badges */
.pr-tabs [data-go="rewards"] { --tab-color: #f48fb1; }        /* 粉 · Treats (same pink as the points panel) */
[data-screen="stops"] { --rule: #009944; }
[data-screen="achievements"] { --rule: #1e88e5; --progress: #1e88e5; }
[data-screen="rewards"], [data-screen="redeem"] { --rule: #f48fb1; }

/* ── Sheets ── */
.pr-plaque-card h2, .pr-langsheet-card h2 { font-size: 24px; }
.pr-plaque-earn { font-family: var(--sans); text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
.pr-plaque-where, .pr-rules-list { font-family: var(--text); }
.pr-langsheet-list { gap: var(--s2); border-top: 1px solid var(--ink); padding-top: var(--s2); }
/* Language rows (boss 2026-11-02): spaced apart, no flat fill (the sheet's textured paper shows through), the chosen one marked
   only by a tick at the end of the row — a rounded, slightly heavy tick like iPhone settings, not the thin typeface "✓". */
.pr-langsheet-list button { display: flex; align-items: center; justify-content: space-between; border: 0; border-bottom: 1px solid var(--ink); background: transparent; font-family: var(--text); font-size: 18px; }
.pr-langsheet-list button[aria-pressed="true"] { border: 0; border-bottom: 1px solid var(--ink); font-weight: 400; background: transparent; }
.pr-langsheet-list { gap: 0; border-top: 0; padding-top: 0; } /* rules only between languages: none under the title, none after the last (boss 2026-11-02) */
.pr-langsheet-list button:last-child { border-bottom: 0; }
.pr-langsheet-list button[aria-pressed="true"]::after { content: ""; flex: none; width: 20px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M2.5 8.5l5 5L17.5 2.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M2.5 8.5l5 5L17.5 2.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.pr-toast { border-radius: 0; background: var(--ink); color: var(--accent-2); text-transform: uppercase; letter-spacing: .08em; font-size: 14px; }
.pr-info-card { border-radius: 0; }
.pr-about > div { border-bottom-color: var(--line); }
.pr-about dd { font-family: var(--text); font-size: 16px; }

/* Placeholders: flat grey, no dashed frame */
.ph { border: 0; border-radius: 0; font-family: var(--sans); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.ph-emblem, .ph-stamp, .ph-avatar, .ph-guide { border-radius: 50%; }
.ph-avatar, .ph-guide { text-transform: none; letter-spacing: 0; font-size: 10px; overflow: hidden; }

/* ── Desktop shell (designer view) ── */
.pr-index, .pr-notes-panel { border: 0; border-top: 3px solid var(--rule); border-radius: 0; }
.pr-index-title { font-family: var(--text); font-weight: 400; font-size: 20px; text-transform: uppercase; letter-spacing: .04em; }
.pr-index-list button { border-radius: 0; font-family: var(--text); font-size: 14px; }
.pr-index-list button[aria-current="true"] { background: var(--accent); color: var(--ink); }
.pr-reset { border-radius: 0; border-style: solid; border-color: var(--ink); color: var(--ink); font-family: var(--sans); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; font-weight: 600; }
.pr-notes-body p, .pr-notes-body li { font-family: var(--text); font-size: 14px; }
.pr-notes-body .q { border-left-width: 2px; }
.browser-switch { border-radius: 0; border-color: var(--ink); background: var(--paper); }
.browser-switch button { border-radius: 0; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; font-weight: 600; }
.browser-switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }

/* Proposal panel (tour.css) */
.tour-panel { border: 0; border-top: 3px solid var(--rule); border-radius: 0; }
.tour-title { font-size: 30px; }
.tour-body, .tour-scene, .tour-task p, .tour-why p { font-family: var(--text); }
.tour-big { border-left-width: 2px; font-weight: 400; }
.tour-task { border-radius: 0; border-width: 1px; }
.tour-lang, .tour-lang button { border-radius: 0; }
.tour-lang button[aria-pressed="true"] { background: var(--ink); }
.tour-dots i { height: 2px; border-radius: 0; }
.tour-dots i.done { background: var(--ink-3); }
.tour-dots i.on { background: var(--accent); }
/* Proposal tap highlight: 藍 #1E88E5 (kept cool so it stands out against the warm UI). */
:root { --tour-blue: #1e88e5; --tour-blue-soft: rgba(30, 136, 229, .28); }
.pr-lightbox { background: rgba(38, 50, 56, .96); }
.tour-done-tag { border-radius: 0; background: var(--accent-2); color: var(--ink); }

/* Touch only: no hover states on the phone. Feedback shows while the finger is down (:active), never on mouse-over;
   iOS's grey tap flash is turned off so this is the only press feedback. */
.pr-phone { -webkit-tap-highlight-color: transparent; }
.pr-opt:active:not(:disabled), .pr-stop:active, .pr-langsheet-list button:active, .pr-read:active, .pr-btn-dark:active { background: var(--fill); }
.pr-btn-primary:active:not(:disabled) { filter: brightness(.92); }
.pr-tabs button:active, .pr-reward button:active:not(:disabled) { opacity: .75; }