/* ===================================================================
   TOKYO FIELD NOTE — V6 THEME (loaded last)
   Apple clarity + MUJI grid notebook + Dieter Rams single signal colour.
   Same layout as before; only colours and interaction feel change.
   No black, no beige/yellow. Colours reference Pantone:
   - Veri Peri 17-3938 (#6667AB)   → the one accent (selection, buttons)
   - Living Coral 16-1546 (#FF6F61) → "now" signal dot (Rams' orange)
   - Rose Quartz 13-1520 (#F7CAC9)  → changed / inserted stops
   - Serenity 15-3919 (#92A8D1)     → transit
   - Peach Fuzz 13-1023 (#FFBE98)   → food / Bib Gourmand
   Illustrated maps are untouched.
   =================================================================== */

:root {
  /* Paper — clean neutral white/grey, faint MUJI grid, no tint */
  --bg-chassis: #F5F5F7;
  --bg-paper: #FFFFFF;
  --bg-surface: #FFFFFF;
  --bg-inset: #F2F3F5;
  --bg-grid-line: rgba(60, 64, 80, 0.045);

  /* Ink — deep slate navy instead of black */
  --ink-primary: #33355E;
  --ink-secondary: #5C5F7E;
  --ink-muted: #6E7089;
  --ink-faint: #B8BAC6;

  /* The ONE accent: Veri Peri 17-3938. Filled only on the main button.
     Kept under the --rose-* names so every component follows. */
  --rose: #6667AB;
  --rose-deep: #55569A;
  --rose-ink: #4E4F94;
  --rose-soft: #F2F3F5;       /* neutral — no lavender on paper */
  --rose-line: #DCDDE3;       /* neutral hairline */

  /* Signal dot (Rams' one orange): Living Coral 16-1546 — "now" only */
  --coral: #FF6F61;
  --coral-ink: #C2453A;
  /* Done / verified only */
  --matcha: #3E8A5C;
  --matcha-soft: #F2F3F5;

  /* Everything else collapses to neutrals */
  --sky: #9A9CB0;
  --sky-soft: #F2F3F5;
  --butter: var(--rose);
  --butter-soft: #F7F7F9;
  --butter-ink: var(--rose-ink);
  --peach: #9A9CB0;
  --peach-soft: #F2F3F5;
  --peach-ink: var(--ink-secondary);
  --cocoa: #6667AB;

  /* Re-map the V5 accents: category colours become ink, not paint */
  --accent-charcoal: var(--rose);
  --accent-sage: var(--ink-secondary);
  --accent-sage-soft: #F2F3F5;
  --accent-slate: var(--ink-secondary);
  --accent-slate-soft: #F2F3F5;
  --accent-amber: var(--ink-secondary);
  --accent-amber-soft: #F2F3F5;
  --accent-braun: var(--coral);

  --border-hairline: 1px solid rgba(51, 53, 94, 0.1);
  --border-strong: 1px solid rgba(51, 53, 94, 0.2);
  --shadow-surface: 0 1px 2px rgba(51, 53, 94, 0.04), 0 8px 24px rgba(51, 53, 94, 0.05);
  --shadow-tactile: 0 1px 2px rgba(51, 53, 94, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --shadow-inset: inset 0 1px 2px rgba(51, 53, 94, 0.05);

  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition: all 0.22s var(--ease);
}

body { background-color: var(--bg-chassis); color: var(--ink-primary); -webkit-font-smoothing: antialiased; }
::selection { background: var(--rose-soft); color: var(--rose-ink); }

/* ---------- Header: Apple-style frosted glass ---------- */
.app-header {
  background: rgba(245, 245, 247, 0.78) !important;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: var(--border-hairline);
}
.rams-spec-box { background: var(--rose-soft); color: var(--rose-ink); border: 1px solid var(--rose-line); border-radius: 999px; }
.spec-dot { background: var(--coral) !important; }
.tactile-btn.primary-dark { background: var(--rose); border-color: var(--rose); color: #FFFFFF; }
.tactile-btn.primary-dark:hover { background: var(--rose-deep); border-color: var(--rose-deep); }
.tactile-btn.dark-outline { border-color: var(--rose-line); color: var(--rose-ink); }
.tactile-btn { border-radius: 999px; }
.tab-chip { background: var(--rose-soft); color: var(--rose-ink); }
.nav-tab.active .tab-num { color: var(--coral); }

/* ---------- Selectors & chips (soft tint, never a dark fill) ---------- */
.day-tab.active,
.mode-btn.active,
.slot-item-btn.active,
.luggage-btn.active {
  background: var(--rose-soft);
  color: var(--rose-ink);
  border-color: var(--rose-line);
  box-shadow: none;
}
.day-tab.active .day-code { color: var(--rose); }
.day-tab.active strong { color: var(--ink-primary); }
.slot-item-btn.active .slot-jp-hint { color: var(--rose-ink); }

.lang-cat-btn.active, .lang-cat-btn:hover,
.chip-select-user:hover,
.mini-lang-chip:hover,
.mini-action-btn:hover,
.mini-action-btn.dark-accent,
.fold-indicator-btn:hover,
.spot-fold-card.unfolded .fold-indicator-btn {
  background: var(--rose-soft);
  color: var(--rose-ink);
  border-color: var(--rose-line);
}
.lang-cat-btn, .mini-action-btn, .mini-lang-chip, .chip-select-user, .fold-indicator-btn { border-radius: 999px; }

/* ---------- Interaction feel (Apple) ---------- */
button, .tactile-btn, .mini-action-btn, .day-tab, .zone-pill, .nav-tab, .pick-view, .lang-cat-btn, .rt-stop, a.transit-connector-dir {
  transition: var(--transition);
  -webkit-tap-highlight-color: transparent;
}
button:active:not([disabled]), .tactile-btn:active, .mini-action-btn:active, .day-tab:active, .zone-pill:active, .pick-view:active, .rt-stop:active {
  transform: scale(0.97);
}
:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.surface-card, .spot-fold-card, .pick-card { transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease), border-color 0.25s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Timeline cards ---------- */
.spot-fold-card.unfolded { border-left-color: var(--rose-line); }
.spot-fold-card.active-selection {
  border-color: var(--rose-line);
  border-left: 4.5px solid var(--rose);
  box-shadow: 0 8px 24px rgba(102, 103, 171, 0.14);
}
.spot-fold-card.is-verified { border-left-color: var(--matcha); }

/* Inserted / changed stops: Rose Quartz tint */
.spot-fold-card.is-modified {
  background: var(--butter-soft);
  color: var(--ink-primary);
  border-color: #F4D6D5;
  border-left: 4px solid var(--butter);
}
.spot-fold-card.is-modified .spot-title-main,
.spot-fold-card.is-modified .spot-body-desc { color: var(--ink-primary); }
.spot-fold-card.is-modified .spot-architect-sub { color: var(--butter-ink); }
.spot-fold-card.is-modified .spot-time-badge { background: #FFFFFF; color: var(--butter-ink); }
.spot-fold-card.is-modified .spot-fold-body { border-top-color: #F4D6D5; }
.spot-fold-card.is-modified .spot-photo-point { background: #FFFFFF; color: var(--ink-secondary); border-color: #F4D6D5; }
.timeline-insert-box { border-color: var(--rose-line); }

/* ---------- Map pins (illustration untouched) ---------- */
.pin-num-circle { background: var(--rose); }
.pin-dot.basecamp { background: var(--rose); }
.map-pin-btn.active .pin-num-circle { background: var(--coral); }
.pin-dot.modified { background: var(--butter); border-color: var(--butter-ink); }
.map-pin-btn.modified { background: var(--butter-soft); color: var(--ink-primary); border-color: var(--butter); }
.map-pin-btn.modified .pin-short-label { color: var(--ink-primary); }
.map-pin-btn.modified .pin-num-circle { background: var(--butter-ink); }

/* ---------- Phrase cards: paper boards instead of black split-flap ---------- */
.split-flap-board {
  background: var(--bg-paper);
  background-image: linear-gradient(to right, var(--bg-grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--bg-grid-line) 1px, transparent 1px);
  background-size: 16px 16px;
  border: 1px solid var(--rose-line);
  box-shadow: none;
}
.split-flap-crease { background: rgba(102, 103, 171, 0.16); box-shadow: none; }
.flap-jp-text { color: var(--ink-primary); }
.flap-pron-text { color: var(--rose-ink); }
.flap-note-text { color: var(--ink-muted); }

.slot-output-banner {
  background: var(--rose-soft);
  color: var(--ink-primary);
  border: 1px solid var(--rose-line);
}
.slot-out-jp { color: var(--ink-primary); }
.slot-out-pron { color: var(--rose-ink); }
.slot-out-kr { color: var(--ink-secondary); }

/* ---------- Misc ---------- */
.muji-toast { background: rgba(255, 255, 255, 0.92); color: var(--ink-primary); border: 1px solid var(--rose-line); box-shadow: 0 10px 30px rgba(51, 53, 94, 0.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.notebook-grid-paper {
  background-image:
    linear-gradient(to right, var(--bg-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--bg-grid-line) 1px, transparent 1px);
}
.modal-backdrop { background: rgba(245, 245, 247, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
input, select, textarea, .inset-input { color: var(--ink-primary); }

/* ---------- Tokyo picks directory ---------- */
.places-card { margin-top: 1rem; }
.pick-views { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.pick-view {
  font: 700 0.82rem var(--font-sans); padding: 0.5rem 0.95rem; border-radius: 999px; cursor: pointer;
  border: var(--border-hairline); background: var(--bg-surface); color: var(--ink-secondary);
}
.pick-view.active { background: var(--rose); border-color: var(--rose); color: #FFFFFF; box-shadow: 0 4px 14px rgba(102, 103, 171, 0.28); }
.pick-group { display: flex; flex-direction: column; gap: 0.55rem; }
.pick-group-head { display: flex; align-items: center; gap: 0.45rem; font-weight: 800; font-size: 0.9rem; color: var(--ink-primary); }
.pick-count { font-family: var(--font-mono); font-size: 0.66rem; padding: 0.08rem 0.45rem; border-radius: 999px; background: var(--bg-inset); color: var(--ink-muted); }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.6rem; }
.pick-card {
  --t: var(--rose); --ts: var(--rose-soft);
  display: flex; flex-direction: column; gap: 0.25rem; padding: 0.8rem 0.9rem 0.75rem;
  background: var(--bg-surface); border: var(--border-hairline); border-radius: var(--radius-md);
  border-top: 4px solid var(--t);
}
.pick-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-surface); }
.pick-card.tone-sky { --t: var(--sky); --ts: var(--sky-soft); }
.pick-card.tone-lilac { --t: #9B86D9; --ts: #F1ECFC; }
.pick-card.tone-butter { --t: var(--butter); --ts: var(--butter-soft); }
.pick-card.tone-peach { --t: var(--peach); --ts: var(--peach-soft); }
.pick-top { display: flex; justify-content: space-between; align-items: center; gap: 0.4rem; }
.pick-tag { font-size: 0.66rem; font-weight: 800; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--ts); color: var(--ink-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-area { font-size: 0.68rem; font-weight: 600; color: var(--ink-muted); white-space: nowrap; }
.pick-name { margin: 0.25rem 0 0; font-size: 0.95rem; font-weight: 800; line-height: 1.3; color: var(--ink-primary); }
.pick-jp { font-family: var(--font-jp); font-size: 0.72rem; color: var(--ink-muted); }
.pick-what { margin: 0.2rem 0 0; font-size: 0.8rem; line-height: 1.45; color: var(--ink-secondary); }
.pick-src { font-family: var(--font-mono); font-size: 0.62rem; color: var(--ink-faint); margin-top: 0.15rem; }
.pick-actions { display: flex; gap: 0.3rem; margin-top: 0.45rem; }
.pick-actions .mini-action-btn { text-decoration: none; }
.pick-actions .mini-action-btn[disabled] { cursor: default; }
.mini-action-btn.active-checked { background: var(--matcha-soft) !important; color: var(--matcha) !important; border-color: #CBE4D2 !important; }
.rt-stop.modified .pin-num-circle { background: var(--butter-soft); color: var(--butter-ink); outline: 1px dashed var(--butter-ink); }

/* ---------- Leftover yellow/brown/black from V5 → Pantone tints ---------- */
.spot-contingency-card { background: var(--butter-soft); border: 1px dashed var(--butter); }
.contingency-title { color: var(--butter-ink); }
.contingency-badge { background: #FFFFFF; color: var(--butter-ink); border-color: var(--butter); }
.contingency-row strong { color: var(--ink-primary); }
.dock-btn.contingency-btn { background: var(--butter-soft); color: var(--butter-ink); }
.ad-discount { color: var(--peach-ink); }
.pin-dot.visited, .crew-sync.online .dot-online, .crew-member.me::before { background: var(--matcha) !important; }
.crew-stats b.plus { color: var(--matcha); }

/* Browser-default black on buttons */
button { color: var(--ink-primary); }

/* ---------- Clean pass: one filled colour, selection = white + accent line ---------- */
.day-tab.active, .mode-btn.active, .slot-item-btn.active, .luggage-btn.active,
.lang-cat-btn.active, .mini-action-btn.dark-accent, .tone-seg.active {
  background: #FFFFFF; color: var(--rose-ink); border-color: var(--rose); box-shadow: 0 0 0 1px var(--rose) inset;
}
.zone-pill.active { border-color: var(--rose); box-shadow: 0 0 0 1px var(--rose) inset; }
.zone-pill .zone-num, .zone-pill.active .zone-num { background: var(--bg-inset); color: var(--ink-secondary); }
.pick-view.active { background: #FFFFFF; color: var(--rose-ink); border-color: var(--rose); box-shadow: 0 0 0 1px var(--rose) inset; }
.split-flap-board { border-color: var(--rose-line); }
.split-flap-crease { background: rgba(60, 64, 80, 0.08); }
.slot-output-banner { background: #FFFFFF; border-color: var(--rose-line); }
.spot-fold-card.active-selection { box-shadow: 0 8px 24px rgba(51, 53, 94, 0.08); }
.spot-fold-card.is-modified { border-left: 3px dashed var(--rose); border-color: var(--rose-line); }
.timeline-transit-connector { border-color: var(--rose-line); background: #FFFFFF; }
.spot-category-tag { background: var(--bg-inset) !important; color: var(--ink-secondary) !important; }
.pick-card, .pick-card.tone-sky, .pick-card.tone-lilac, .pick-card.tone-butter, .pick-card.tone-peach { --t: var(--rose-line); --ts: var(--bg-inset); border-top-width: 1px; }
.pick-card:hover { border-color: var(--rose); }

/* Map pins: one colour, coral only for the selected/now pin */
.pin-num-circle, .map-pin-btn .pin-num-circle,
.map-pin-btn.arch .pin-num-circle, .map-pin-btn.eat .pin-num-circle, .map-pin-btn.visited .pin-num-circle { background: var(--rose); }
.map-pin-btn.active .pin-num-circle { background: var(--coral); }
.pin-dot, .pin-dot.basecamp, .pin-dot.arch, .pin-dot.eat { background: var(--rose); }
.pin-dot.planb { background: var(--ink-faint); }
.pin-dot.modified, .map-pin-btn.modified .pin-num-circle { background: #FFFFFF; border: 1.5px dashed var(--rose); color: var(--rose-ink); }
.map-pin-btn.modified { background: #FFFFFF; border-color: var(--rose); }
.pin-dot.visited { background: var(--matcha) !important; }

/* Shared tone bar */
.phrase-tone-bar { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; padding: 0.7rem 0.9rem; margin-bottom: 1rem; }
.tone-bar-label { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; color: var(--ink-muted); margin-right: 0.3rem; }
.tone-seg {
  font: 700 0.8rem var(--font-sans); padding: 0.45rem 0.9rem; border-radius: 999px; cursor: pointer;
  border: var(--border-hairline); background: var(--bg-inset); color: var(--ink-secondary);
}
.slot-out-main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.slot-out-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }

/* Pick card facts: who · menu · price */
.pick-facts { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.35rem; padding-top: 0.45rem; border-top: var(--border-hairline); }
.pick-fact { display: grid; grid-template-columns: 2.6rem 1fr; gap: 0.4rem; font-size: 0.76rem; line-height: 1.45; color: var(--ink-primary); }
.pick-fact span { font-family: var(--font-mono); font-size: 0.64rem; font-weight: 700; color: var(--ink-muted); padding-top: 0.1rem; }