@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("vendor/fonts/golos-text-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("vendor/fonts/golos-text-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("vendor/fonts/jetbrains-mono-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("vendor/fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f7f8;
  --surface: #ffffff;
  --surface-2: #edf0f1;
  --line: #dce2e4;
  --line-2: #cbd4d8;
  --fg: #0f181c;
  --fg-2: #44545c;
  --fg-3: #61727a;
  --accent: #17708c;
  --accent-strong: #105b73;
  --accent-tint: #e3f0f4;
  --ok: #277455;
  --ok-tint: #e4efe9;
  --warn: #aa422f;
  --warn-tint: #f6e7e2;
  --opt: #795b12;
  --opt-tint: #f3ead4;

  /* Compatibility aliases for the existing renderer. */
  --ink: var(--fg);
  --ocean: var(--accent);
  --ocean-press: var(--accent-strong);
  --forest: var(--ok);
  --sand: var(--surface-2);
  --fog: var(--bg);
  --paper: var(--surface);
  --coral: var(--warn);
  --gold: var(--opt);
  --ink-60: var(--fg-2);
  --ink-40: var(--fg-3);
  --ocean-tint: var(--accent-tint);
  --forest-tint: var(--ok-tint);
  --coral-tint: var(--warn-tint);
  --gold-tint: var(--opt-tint);
  --sand-tint: var(--surface-2);
  --gold-ink: var(--opt);
  --coral-ink: var(--warn);
  --surface-soft: var(--surface-2);
  --surface-veil: rgba(255, 255, 255, .92);
  --nav-veil: rgba(255, 255, 255, .96);
  --header-veil: rgba(245, 247, 248, .94);
  --ocean-08: rgba(23, 112, 140, .08);
  --ocean-30: rgba(23, 112, 140, .32);
  --focus-ring: rgba(23, 112, 140, .45);
  --font-display: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-card: none;
  --shadow-raised: none;
  --sidebar: 256px;

  /* Field Instrument spacing scale — 4px rhythm (tokens/spacing.css). */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --touch-min: 44px;

  /* Field Instrument motion — short position/opacity moves only (tokens/motion.css). */
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 240ms;
  --ease-out: ease-out;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --transition-color: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
  --transition-transform: transform var(--motion-base) var(--ease-out);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1417;
  --surface: #141b1f;
  --surface-2: #192227;
  --line: #232d33;
  --line-2: #344149;
  --fg: #e8eef0;
  --fg-2: #aab7bd;
  --fg-3: #87969d;
  --accent: #33add6;
  --accent-strong: #67c1df;
  --accent-tint: #17303a;
  --ok: #4fb286;
  --ok-tint: #193028;
  --warn: #e0785f;
  --warn-tint: #35241f;
  --opt: #c9a24b;
  --opt-tint: #302a1e;
  --surface-veil: rgba(20, 27, 31, .94);
  --nav-veil: rgba(14, 20, 23, .96);
  --header-veil: rgba(14, 20, 23, .94);
  --ocean-08: rgba(51, 173, 214, .1);
  --ocean-30: rgba(51, 173, 214, .36);
  --focus-ring: rgba(51, 173, 214, .56);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --bg: #0e1417;
    --surface: #141b1f;
    --surface-2: #192227;
    --line: #232d33;
    --line-2: #344149;
    --fg: #e8eef0;
    --fg-2: #aab7bd;
    --fg-3: #87969d;
    --accent: #33add6;
    --accent-strong: #67c1df;
    --accent-tint: #17303a;
    --ok: #4fb286;
    --ok-tint: #193028;
    --warn: #e0785f;
    --warn-tint: #35241f;
    --opt: #c9a24b;
    --opt-tint: #302a1e;
    --surface-veil: rgba(20, 27, 31, .94);
    --nav-veil: rgba(14, 20, 23, .96);
    --header-veil: rgba(14, 20, 23, .94);
    --ocean-08: rgba(51, 173, 214, .1);
    --ocean-30: rgba(51, 173, 214, .36);
    --focus-ring: rgba(51, 173, 214, .56);
  }
}

html { background: var(--bg); }
body { background: var(--bg); color: var(--fg); letter-spacing: -.006em; }
button, input, select { color: inherit; }
.not-found-page { margin: 0; font-family: var(--font-sans); }
.not-found-shell { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 24px; box-sizing: border-box; }
.not-found-card { width: min(100%, 520px); padding: clamp(24px, 6vw, 48px); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.not-found-card h1 { margin: 8px 0 12px; }
.not-found-card p { color: var(--fg-2); line-height: 1.6; }
.not-found-code { margin: 0; color: var(--accent); font: 600 14px/1 var(--font-mono); letter-spacing: .12em; }
.not-found-link { min-height: 44px; display: inline-flex; align-items: center; margin-top: 12px; padding: 8px 14px; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent-tint); color: var(--accent-strong); font-weight: 650; text-decoration: none; }
.not-found-link:hover { background: var(--surface-2); }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; min-height: 44px; display: inline-flex; align-items: center; padding: 8px 12px; border: 2px solid var(--accent); border-radius: 8px; background: var(--surface); color: var(--fg); font-weight: 650; text-decoration: none; transform: translateY(calc(-100% - 12px)); }
.skip-link:focus { transform: translateY(0); }
.main:focus { outline: none; }
h1, h2, h3, h4, h5, .place-name { font-family: var(--font-sans); letter-spacing: -.018em; }
h1 { font-size: clamp(28px, 3vw, 38px); font-weight: 650; }
h2 { font-size: 20px; font-weight: 650; }
h3 { font-weight: 600; }
.eyebrow,
.small,
.screen-subtitle,
.status,
.urgency,
.booking-when,
.payment-note,
.countdown,
.day-date,
.day-meta,
.transfer-time,
.transfer-mode,
.packing-section-count,
.online-required,
.site-footer,
.sidebar-foot,
.today-facts,
.today-reminder-time,
.weather-card-head span,
.route-leg-meta,
.route-leg-summary-side,
.pwa-state,
.theme-switch,
.date-control,
.date-navigator-date,
.date-navigator-legend {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }
.small { font-size: 12px; }
.compact { font-size: 15px; }

.app-shell { min-height: 100dvh; }
.sidebar {
  width: var(--sidebar);
  padding: 24px 20px 20px;
  background: var(--surface);
  backdrop-filter: none;
}
.brand { margin-bottom: 30px; gap: 5px; }
.brand strong { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 20px; font-weight: 600; letter-spacing: -.03em; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line-2); border-radius: 8px; color: var(--accent); }
.brand span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.sidebar-nav { gap: 3px; }
.nav-button {
  min-height: 48px;
  gap: 11px;
  border-radius: 8px;
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.nav-button:hover { background: var(--surface-2); }
.nav-button[aria-current="page"] { background: var(--accent-tint); border-color: transparent; color: var(--accent); }
.nav-icon { width: 20px; height: 20px; }
.sidebar-foot { display: grid; gap: 12px; padding: 16px 0 0; font-size: 10px; line-height: 1.5; }
.sidebar-note { color: var(--fg-3); }
.theme-label { color: var(--fg-3); letter-spacing: .09em; text-transform: uppercase; }
.theme-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.theme-switch button { min-height: 44px; padding: 5px 3px; border: 0; border-radius: 5px; background: transparent; color: var(--fg-3); cursor: pointer; font: inherit; font-size: 11px; text-transform: uppercase; }
.theme-switch button[aria-pressed="true"] { background: var(--surface); color: var(--accent); }
.pwa-state { display: flex; align-items: center; gap: 7px; color: var(--fg-3); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.pwa-state-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: 0 0 auto; }
.pwa-state.is-offline .pwa-state-dot { background: var(--warn); }
.pwa-state-updated { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen-header-side { display: grid; gap: 7px; justify-items: end; text-align: right; }

.mobile-header { background: var(--surface); }
.mobile-header strong { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 17px; }
.mobile-header-actions { min-width: 0; display: flex; align-items: center; gap: 8px; }
.mobile-header .pwa-state { min-width: 0; }
.theme-cycle { width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--fg-2); cursor: pointer; }
.theme-cycle svg { width: 18px; height: 18px; }

.main { margin-left: var(--sidebar); padding: 28px clamp(24px, 4vw, 56px) 56px; }
.screen { max-width: 1220px; }
.screen-header { margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.screen-subtitle { font-size: 12px; }

.card { border-color: var(--line); border-radius: 12px; background: var(--surface); box-shadow: none; }
.card-pad { padding: 18px; }
.btn { border-radius: 8px; background: var(--surface); font-size: 14px; }
.btn:hover, .btn:active { background: var(--surface-2); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover, .btn-primary:active { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn-maps { background: var(--accent-tint); border-color: transparent; color: var(--accent); }
.btn-maps:hover { background: var(--ocean-08); }
.status { min-height: 26px; border-radius: 5px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.status-confirmed, .status-booked { background: var(--ok-tint); color: var(--ok); }
.status-working { background: var(--accent-tint); color: var(--accent); }
.status-option { background: var(--opt-tint); color: var(--opt); }
.status-decide { background: var(--warn-tint); color: var(--warn); }
.status-recheck { color: var(--fg-2); }

/* Compact today header. Operational detail stays in the sections below. */
.brief { position: relative; overflow: hidden; margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.brief::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent); z-index: 1; }
.brief-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; padding: 15px 16px 0 18px; }
.brief-head .pwa-state { margin-top: 4px; }
.brief-place { margin: 0; font-size: 20px; font-weight: 650; line-height: 1.2; }
.brief-place small { display: block; margin-top: 3px; color: var(--fg-3); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }
.brief-countdown { padding: 8px 16px 0 18px; }
.brief-countdown b { display: block; font-family: var(--font-mono); font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1.1; }
.brief-countdown span { display: block; margin-top: 3px; color: var(--fg-2); font-size: 14px; line-height: 1.45; }
.brief-date { margin: 10px 0 0; padding: 0 16px 0 18px; color: var(--fg-2); font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.brief-date:last-child { padding-bottom: 15px; }
.progress-track { height: 4px; border-radius: 0; background: var(--line); }
.progress-bar { border-radius: 0; }

.section-block { margin-top: 28px; }
.section-heading { padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.attention-grid, .adventure-grid, .today-dashboard { gap: 10px; }
.attention-row { border-left-width: 3px; }
.attention-row summary { padding: 14px 16px; }
.attention-row summary:hover { background: var(--surface-2); }
.attention-row h3 { font-size: 16px; }
.today-card { border-left-width: 3px; padding: 20px; }
.today-panel { padding: 16px; }
.today-panel-head { padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.today-panel-head h3 { font-size: 16px; }
.today-list li { color: var(--fg-2); }
.today-list li::before { width: 5px; height: 5px; border-radius: 1px; transform: rotate(45deg); }
.today-place-item, .today-booking, .day-practical, .info-row, .food-card, .food-summary-row { background: var(--surface-2); }

.date-control-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; margin-bottom: 14px; }
.date-control { min-width: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: stretch; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; }
.date-control > button { min-height: 50px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--fg-2); cursor: pointer; }
.date-control > button:last-child { border-right: 0; border-left: 1px solid var(--line); }
.date-control > button:disabled { color: var(--fg-3); opacity: .4; cursor: not-allowed; }
.date-control-main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 12px; text-align: left; }
.date-control-main svg { width: 18px; height: 18px; color: var(--accent); }
.date-control-copy { min-width: 0; display: grid; gap: 2px; }
.date-control-copy strong { overflow: hidden; font-family: var(--font-mono); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.date-control-copy span { overflow: hidden; color: var(--fg-3); font-size: 10px; letter-spacing: .04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.date-return-today { min-height: 50px; white-space: nowrap; }

.date-navigator { width: min(760px, calc(100vw - 32px)); max-height: min(82dvh, 760px); padding: 0; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); color: var(--fg); }
.date-navigator::backdrop { background: rgba(3, 8, 10, .68); backdrop-filter: blur(4px); }
.date-navigator-shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: inherit; }
.date-navigator-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px; border-bottom: 1px solid var(--line); }
.date-navigator-head h2 { margin: 0 0 3px; }
.date-navigator-head p { margin: 0; color: var(--fg-2); }
.date-navigator-body { overflow: auto; overscroll-behavior: contain; padding: 10px 18px 18px; }
.date-navigator-month { margin-top: 14px; }
.date-navigator-month h3 { position: sticky; top: -10px; z-index: 1; margin: 0; padding: 11px 0 8px; background: var(--surface); color: var(--fg-3); font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.date-navigator-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.date-navigator-date { position: relative; min-height: 76px; display: grid; align-content: space-between; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--fg); cursor: pointer; text-align: left; }
.date-navigator-date:hover { border-color: var(--accent); background: var(--accent-tint); }
.date-navigator-date[aria-current="date"] { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); }
.date-navigator-date.is-today::after { content: ""; position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); }
.date-navigator-date strong { font-size: 15px; }
.date-navigator-date span { overflow: hidden; color: var(--fg-3); font: 500 11px/1.2 var(--font-mono); text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.date-markers { display: flex; gap: 3px; }
.date-marker { width: 5px; height: 5px; border-radius: 1px; background: var(--fg-3); }
.date-marker.is-booking { background: var(--ok); }
.date-marker.is-action { background: var(--warn); }
.date-marker.is-option { background: var(--opt); border-radius: 50%; }
.date-marker.is-transfer { background: var(--accent); transform: rotate(45deg); }
.date-navigator-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); }
.date-navigator-legend { display: flex; flex-wrap: wrap; gap: 10px; color: var(--fg-3); font-size: 11px; text-transform: uppercase; }
.date-navigator-legend span { display: inline-flex; align-items: center; gap: 5px; }

.booking-briefing { overflow: hidden; }
.booking-briefing-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 17px; border-bottom: 1px solid var(--line); }
.booking-briefing-head h2 { margin: 0; }
.booking-briefing-group + .booking-briefing-group { border-top: 1px solid var(--line); }
.booking-briefing-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 17px; background: var(--surface-2); }
.booking-briefing-group-head h3 { margin: 0; color: var(--fg-2); font: 700 11px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.booking-briefing-group-head span { color: var(--fg-3); font: 650 10px/1 var(--font-mono); }
.booking-briefing-group-now .booking-briefing-group-head { box-shadow: inset 3px 0 var(--warn); }
.booking-briefing-group-optional .booking-briefing-group-head { box-shadow: inset 3px 0 var(--fg-3); }
.booking-briefing-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.booking-briefing-row { min-width: 0; align-self: start; border-bottom: 1px solid var(--line); }
.booking-briefing-row:nth-child(odd) { border-right: 1px solid var(--line); }
.booking-briefing-row > summary { min-height: 72px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 13px 17px; cursor: pointer; list-style: none; }
.booking-briefing-row > summary::-webkit-details-marker { display: none; }
.booking-briefing-row > summary:hover { background: var(--surface-2); }
.booking-briefing-row > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.booking-briefing-row[open] > summary { background: var(--surface-2); border-bottom: 1px solid var(--line); }
.booking-briefing-summary strong { display: block; margin-bottom: 3px; font-size: 14px; }
.booking-briefing-summary > span { color: var(--fg-3); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; }
.booking-briefing-row .booking-briefing-date { color: var(--fg); font-weight: 750; }
.booking-briefing-icons { display: inline-flex; align-items: center; gap: 7px; color: var(--warn); }
.booking-briefing-icons svg { width: 17px; height: 17px; }
.booking-briefing-chevron { display: inline-flex; color: var(--fg-3); transition: transform .18s ease; }
.booking-briefing-chevron svg { width: 15px; height: 15px; }
.booking-briefing-row[open] .booking-briefing-chevron { transform: rotate(180deg); }
.booking-briefing-body { display: grid; gap: 9px; padding: 14px 17px 17px; background: var(--surface); }
.booking-briefing-body p { margin: 0; color: var(--fg-2); font-size: 12px; line-height: 1.5; }
.booking-briefing-body p b { color: var(--fg); font-weight: 700; }
.booking-briefing-reason { display: grid; gap: 5px; padding: 11px 12px; border-left: 3px solid var(--warn); border-radius: 5px; background: var(--warn-tint); }
.booking-briefing-reason > strong { margin: 0; color: var(--fg); font-size: 12px; }
.booking-briefing-reason p { color: var(--fg-2); }
.booking-briefing-row-later .booking-briefing-reason { border-left-color: var(--accent); background: var(--accent-tint); }
.booking-briefing-row-optional .booking-briefing-reason { border-left-color: var(--fg-3); background: var(--surface-2); }
.booking-briefing-body .row-actions { margin-top: 2px; }

.option-booking { display: grid; gap: 8px; margin-top: 12px; padding: 13px; border: 1px solid color-mix(in srgb, var(--opt) 45%, var(--line)); border-radius: 8px; background: var(--opt-tint); }
.option-booking.is-compact { margin-top: 10px; }
.option-booking-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 7px 12px; }
.option-booking-status { display: inline-flex; align-items: center; gap: 6px; color: var(--opt); font: 650 11px/1.25 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.option-booking-status svg { width: 15px; height: 15px; flex: 0 0 auto; }
.option-booking-requirement { color: var(--fg-2); font-size: 11px; }
.option-booking h4 { margin: 0; font-size: 15px; }
.option-booking p { margin: 0; color: var(--fg-2); font-size: 12px; line-height: 1.5; }
.option-booking p b { color: var(--fg); font-weight: 650; }
.option-booking-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.option-booking-foot > span { color: var(--fg-3); font: 500 11px/1.25 var(--font-mono); text-transform: uppercase; }
.option-booking .row-actions { margin-top: 0; }
.option-booking-decide { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); background: var(--warn-tint); }
.option-booking-decide .option-booking-status { color: var(--warn); }
.option-booking-considering { border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); background: var(--ok-tint); }
.option-booking-considering .option-booking-status { color: var(--ok); }
.option-booking-unavailable { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); background: var(--surface-2); }
.option-booking-unavailable .option-booking-status { color: var(--warn); }
.option-booking-skipped { border-color: var(--line); background: var(--surface-2); opacity: .78; }
.option-booking-skipped .option-booking-status { color: var(--fg-3); }
.option-decision-btn { min-height: 44px; }
.option-decision-btn.is-selected { border-color: var(--ok); background: var(--ok-tint); color: var(--ok); }
.day-option-bookings { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.day-option-bookings > h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; }
.day-option-bookings > h4 svg { width: 17px; height: 17px; color: var(--opt); }
.day-option-booking-list { display: grid; gap: 10px; }
.day-option-booking-list .option-booking { margin-top: 0; }
.option-queue-subhead { padding-top: 18px; border-top: 1px solid var(--line); }
.option-queue-requirement { margin-top: 8px !important; color: var(--opt) !important; font-weight: 650; }
.skipped-options { margin-top: 18px; border-top: 1px solid var(--line); }
.skipped-options summary { min-height: 44px; display: flex; align-items: center; color: var(--fg-3); cursor: pointer; font-size: 13px; }
.status-considering { background: var(--ok-tint); color: var(--ok); }
.status-skipped { color: var(--fg-3); border: 1px solid var(--line); }
.status-unavailable { background: var(--warn-tint); color: var(--warn); }

.route-leg-selected, .route-day-summary, .booking-row, .packing-section, .guide-section { border-radius: 10px; }
.route-leg-selected-head, .booking-row, .check-row, .guide-item { border-color: var(--line); }
.route-leg-map { background: var(--surface-2); }
.route-leg-map iframe { filter: saturate(.78) contrast(.96); }
.scenario-tab[aria-pressed="true"], .map-filter[aria-pressed="true"], .packing-filter .btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.route-mini, .scenario-tabs, .detail-nav { scrollbar-color: var(--line-2) transparent; }
.route-dot, .row-icon, .packing-section-icon, .section-icon { border-radius: 6px; }
.booking-side strong, .spend-metric strong, #packing-progress-text { font-family: var(--font-mono); }
.guide-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 10px; }
.guide-section .packing-section-head { cursor: pointer; }

.offline-strip, .update-prompt { position: fixed; z-index: 60; left: calc(var(--sidebar) + 24px); right: 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); color: var(--fg); font-family: var(--font-mono); font-size: 11px; }
.offline-strip { top: 16px; border-color: var(--warn); }
.update-prompt { bottom: 20px; border-color: var(--accent); }
.offline-strip[hidden], .update-prompt[hidden] { display: none; }
.update-prompt-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.update-prompt-actions .btn { min-height: 44px; }
.update-reminder[hidden] { display: none; }

.bottom-nav { background: var(--nav-veil); }
.site-footer { font-size: 10px; letter-spacing: .025em; }

@media (max-width: 1023px) {
  .sidebar { display: none; }
  .mobile-header { display: flex; min-height: 60px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
  .main { margin-left: 0; padding: 18px 16px 28px; }
  .bottom-nav { position: sticky; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); padding: 7px max(8px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); border-top: 1px solid var(--line); backdrop-filter: blur(18px); }
  .bottom-nav .nav-button { min-height: 54px; display: grid; justify-items: center; gap: 2px; padding: 4px; font-size: 11px; text-align: center; }
  .bottom-nav .nav-icon { width: 21px; height: 21px; }
  .offline-strip, .update-prompt { left: 12px; right: 12px; }
  .offline-strip { top: 70px; }
  .update-prompt { bottom: calc(82px + env(safe-area-inset-bottom)); }
}

@media (min-width: 821px) and (max-width: 1023px) {
  .main { padding-inline: 28px; }
  .screen { max-width: 900px; }
}

@media (max-width: 720px) {
  .date-control-wrap { grid-template-columns: 1fr; }
  .date-return-today { width: 100%; }
  .booking-briefing-list { grid-template-columns: 1fr; }
  .booking-briefing-row:nth-child(odd) { border-right: 0; }
  .date-navigator-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 430px) {
  .main { padding-inline: 12px; }
  .mobile-header { padding-inline: 12px; }
  .date-control-main { padding-inline: 8px; }
  .date-control-copy strong { font-size: 11px; }
  .date-navigator { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; }
  .date-navigator-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .date-navigator-date { min-height: 70px; padding: 7px; }
  .date-navigator-foot { align-items: flex-start; flex-direction: column; }
  .date-navigator-foot .btn { width: 100%; }
  .update-prompt { align-items: flex-start; flex-direction: column; }
  .update-prompt-actions { width: 100%; }
  .update-prompt-actions .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: .01ms; --motion-base: .01ms; --motion-slow: .01ms; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}