:root {
  color-scheme: light;
  --color-canvas: #f7f8f6;
  --color-surface: #fff;
  --color-surface-subtle: #f0f4f2;
  --color-ink: #123238;
  --color-muted: #607178;
  --color-border: #d9e2e0;
  --color-primary: #0b6b67;
  --color-primary-hover: #075854;
  --color-primary-soft: #e5f3f0;
  --color-accent: #d96b2b;
  --color-info: #397cb5;
  --color-success: #3e8a5b;
  --color-warning: #9a6a32;
  --color-danger: #b42318;
  --color-focus: #167e78;
  --color-on-primary: #fff;
  --color-sky-soft: #eaf3fa;
  --color-nature-soft: #eaf5ed;
  --color-sunset-soft: #fff0e7;
  --color-sand-soft: #f7f0e6;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-low: 0 2px 10px rgb(18 50 56 / 8%);
  --shadow-mid: 0 14px 34px rgb(18 50 56 / 11%);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --motion-fast: 180ms;
  --motion-standard: 240ms;
  --keyboard-inset: 0px;
  --mobile-bottom-nav-height: 76px;
  --editor-command-bar-height: 132px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Noto Sans TC", sans-serif;
}

body { background: var(--color-canvas); color: var(--color-ink); }
html { scroll-padding-top: calc(var(--app-bar-height) + 20px); }
button, select, input, textarea { border-radius: var(--radius-sm); }
button { transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
button:active:not(:disabled) { transform: scale(.985); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-focus) 78%, white); outline-offset: 3px; }

.app-bar { isolation: isolate; overflow: hidden; background: linear-gradient(105deg, #fff9f0 0%, var(--color-surface) 52%, #edf7f6 100%); border-bottom-color: color-mix(in srgb, var(--color-border) 82%, transparent); box-shadow: 0 1px 0 rgb(18 50 56 / 4%); }
.app-bar::before { content: ""; position: absolute; z-index: -2; inset: 0 0 0 46%; background-image: linear-gradient(90deg, rgb(255 255 255 / 86%), rgb(255 255 255 / 42%)), var(--app-bar-destination-image, none), url("../assets/illustrations/planning-path.webp"); background-position: center, center 42%, center 48%; background-size: cover, cover, 420px auto; background-repeat: no-repeat; opacity: .2; filter: saturate(.82) contrast(.94); pointer-events: none; }
.app-bar::after { content: ""; position: absolute; z-index: -1; inset: 0 25% 0 auto; width: min(360px, 34vw); background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 96'%3E%3Cpath d='M8 72C54 14 103 79 151 42S245 11 351 62' fill='none' stroke='%230b6b67' stroke-width='3' stroke-linecap='round' stroke-dasharray='7 8'/%3E%3Ccircle cx='8' cy='72' r='6' fill='%23d96b2b'/%3E%3Ccircle cx='151' cy='42' r='6' fill='%230b6b67'/%3E%3Ccircle cx='351' cy='62' r='6' fill='%23397cb5'/%3E%3C/svg%3E"); opacity: .065; pointer-events: none; }
.app-bar > * { position: relative; z-index: 1; }
.app-status { min-height: 36px; padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--color-success) 22%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--color-surface) 78%, transparent); color: color-mix(in srgb, var(--color-success) 76%, var(--color-ink)); backdrop-filter: blur(12px); }
.brand-mark { background: var(--color-primary); color: var(--color-on-primary); border-radius: 12px; }
.status-dot { background: var(--color-success); }
.workspace { grid-template-columns: 300px minmax(0, 1fr); align-items: start; max-width: 1600px; margin: 0 auto; }
.side-rail { display: grid; grid-template-columns: 72px minmax(0, 1fr); padding: 0; background: var(--color-surface); border-inline-end: 1px solid var(--color-border); box-shadow: none; }
.global-rail { position: sticky; top: var(--app-bar-height); align-self: start; display: grid; align-content: start; gap: 8px; min-height: calc(100vh - var(--app-bar-height)); padding: 14px 10px; border-inline-end: 1px solid var(--color-border); background: var(--color-primary-soft); }
.global-rail-mark { display: grid; place-items: center; width: 42px; height: 42px; margin: 0 auto 8px; border-radius: 14px; background: var(--color-primary); color: var(--color-on-primary); font-size: 20px; font-weight: 850; }
.global-rail button { display: grid; place-items: center; gap: 5px; min-width: 0; min-height: 62px; padding: 7px 4px; border: 1px solid transparent; background: transparent; color: var(--color-muted); font-size: 11px; line-height: 1.25; text-align: center; }
.nav-icon { display: grid; place-items: center; width: 24px; height: 24px; }
.nav-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-icon circle { fill: currentColor; stroke: none; }
.global-rail button:hover, .global-rail button[aria-current="page"], .app[data-mode="library"] .global-rail button[data-mode="library"] { border-color: color-mix(in srgb, var(--color-primary) 24%, transparent); background: var(--color-surface); color: var(--color-primary); }
.trip-navigation { min-width: 0; max-height: calc(100dvh - var(--app-bar-height)); padding: 18px 14px 28px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.rail-trip { border-radius: var(--radius-md); background: linear-gradient(155deg, var(--color-primary-soft), var(--color-sky-soft)); border: 1px solid color-mix(in srgb, var(--color-primary) 16%, var(--color-border)); }
.section-nav { gap: 4px; }
.section-nav::before { content: none; }
.rail-section-label { margin: 16px 8px 4px; color: var(--color-muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.rail-section-label:first-child { margin-top: 4px; }
.section-nav button { min-height: 46px; border-radius: 12px; color: var(--color-muted); font-weight: 650; }
.section-nav button:hover { background: var(--color-surface-subtle); color: var(--color-ink); }
.section-nav button[aria-current="page"] { background: var(--color-primary-soft); color: var(--color-primary); box-shadow: inset 3px 0 0 var(--color-primary); }
.management-context, .management-nav { display: none; }
.management-context { gap: 4px; padding: 16px; border: 1px solid color-mix(in srgb, var(--color-primary) 16%, var(--color-border)); border-radius: var(--radius-md); background: linear-gradient(155deg, var(--color-primary-soft), var(--color-sky-soft)); }
.app[data-workspace="management"] .rail-trip, .app[data-workspace="management"] .trip-section-nav { display: none; }
.app[data-workspace="management"] .management-context, .app[data-workspace="management"] .management-nav { display: grid; }
.app[data-workspace="editor"] .workspace { grid-template-columns: 72px minmax(0, 1fr); }
.app[data-workspace="editor"] .side-rail { grid-template-columns: 72px; }
.app[data-workspace="editor"] .trip-navigation { display: none; }
.trip-library, .role-boundary { border-radius: var(--radius-md); background: var(--color-surface-subtle); border-color: var(--color-border); box-shadow: none; }
.trip-library-summary strong::after { content: none; }
.management-disclosure { margin-top: 18px; }
.management-disclosure > summary { min-height: 52px; }
.role-boundary { margin-top: 10px; }

.content-column { min-width: 0; max-width: 1500px; width: 100%; margin: 0 auto; padding: clamp(18px, 3vw, 38px); }
.main-content { display: grid; gap: var(--space-section, 20px); scroll-margin-top: calc(var(--app-bar-height) + 20px); }
.app[data-view="participants"] .main-content, .app[data-view="reminders"] .main-content, .app[data-view="review"] .main-content { max-width: 1080px; }
.app[data-view="operations"] .main-content, .app[data-view="readiness"] .main-content { max-width: 1180px; }
.app[data-view="itinerary"] .main-content, .app[data-view="logistics"] .main-content { max-width: 1280px; }
.app[data-mode="travel"] .main-content { max-width: 1120px; }
.app[data-mode="editor"] .main-content, .app[data-mode="library"] .main-content, .app[data-mode="sync"] .main-content, .app[data-mode="protection"] .main-content { max-width: 1320px; }
.page-heading, .action-center-return-notice, [id^="logistics-"], [id^="editor-"], [id^="travel-"] { scroll-margin-top: calc(var(--app-bar-height) + 20px); }
.trip-header { border: 0; background: transparent; padding: 0 0 22px; }
.trip-heading h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.12; letter-spacing: -.025em; }
.trip-subtitle { color: var(--color-muted); }
.mode-switch { padding: 4px; border-radius: 14px; background: var(--color-surface-subtle); border: 1px solid var(--color-border); }
.mode-switch button { min-height: 44px; border-radius: 10px; }
.mode-switch button[aria-pressed="true"] { background: var(--color-surface); color: var(--color-primary); box-shadow: var(--shadow-low); }
.metrics-strip { margin-bottom: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-low); }
.metrics-strip > div { padding: 16px 18px; }
.main-content { gap: var(--space-section, 20px); }
.app[data-mode="editor"] .main-content, .app[data-mode="library"] .main-content, .app[data-mode="sync"] .main-content, .app[data-mode="protection"] .main-content { max-width: 1320px; }
.editor-header, .editor-section-guide, .device-sync-card, .data-protection-card, .backup-health-card, .sync-difference-card { border-color: var(--color-border); background: var(--color-surface); box-shadow: var(--shadow-low); }
.editor-nav { padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-subtle); }
.day-reflection-card { padding-block: 10px; }
.editor-nav-group h3 { color: var(--color-muted); font-size: 12px; letter-spacing: .04em; }
.editor-nav button { min-height: 48px; border-radius: var(--radius-sm); }
.editor-nav button[aria-current="page"] { border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); background: var(--color-primary-soft); color: var(--color-primary); }
.editor-section-guide { border-radius: var(--radius-md); }
.editor-command-bar { border-radius: var(--radius-md); box-shadow: 0 12px 32px rgb(18 50 56 / 14%); }
.advanced-content-editor { border-color: color-mix(in srgb, var(--color-info) 24%, var(--color-border)); }
.advanced-content-editor > summary { color: var(--color-info); }
.workspace-disclosure { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-low); }
.workspace-disclosure-summary { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; list-style: none; }
.workspace-disclosure-summary::-webkit-details-marker { display: none; }
.workspace-disclosure-summary::after { content: "展開"; color: var(--color-primary); font-size: 13px; font-weight: 750; }
.workspace-disclosure[open] > .workspace-disclosure-summary::after { content: "收合"; }
.workspace-disclosure-summary > span { margin-inline-start: auto; color: var(--color-muted); font-size: 13px; }
.workspace-disclosure > :not(summary) { margin: 0 16px 16px; }
.timeline-controls, .logistics-health-controls, .readiness-controls { position: static; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.timeline-metrics, .logistics-health-metrics, .readiness-metrics { margin-top: 0; }
.timeline-edit-button { min-height: 40px; align-self: center; padding-inline: 10px; white-space: nowrap; }
.action-center-return { width: fit-content; max-width: 100%; margin-bottom: 12px; padding: 8px 10px; border-radius: var(--radius-sm); }
.action-center-return button { min-height: 40px; padding: 7px 10px; }
.page-heading { align-items: end; margin-bottom: 0; padding: clamp(18px, 2vw, 24px); border: 1px solid var(--color-border); background: var(--color-surface); }
.page-heading > div:first-child { max-width: 72ch; }
.content-band { padding: clamp(18px, 2vw, 24px); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-low); }
.content-band:first-of-type { padding-top: clamp(18px, 2vw, 24px); }
.content-band:last-child { border-bottom: 1px solid var(--color-border); }
.page-heading, .day-card, .operation-card, .finance-workspace, .readiness-workspace, .timeline-workspace, .logistics-workspace { border-radius: var(--radius-md); border-color: var(--color-border); box-shadow: var(--shadow-low); }

.travel-identity { display: grid; grid-template-columns: minmax(240px, .75fr) minmax(0, 1.25fr); min-height: 228px; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-mid); }
.travel-identity-cover { position: relative; display: flex; align-items: flex-end; justify-content: space-between; min-height: 228px; padding: 24px; overflow: hidden; color: white; background: linear-gradient(145deg, #75b8d7 0%, #e7b77d 58%, #0b6b67 100%); isolation: isolate; }
.travel-identity-image { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 66% center; }
.travel-identity-cover::before, .travel-identity-cover::after { content: ""; position: absolute; z-index: -1; }
.travel-identity-cover::before { width: 230px; height: 230px; top: -100px; right: -35px; }
.travel-identity-cover::before { border-radius: 50%; background: rgb(255 255 255 / 18%); }
.travel-identity-cover::after { inset: 0; background: linear-gradient(180deg, transparent 30%, rgb(5 48 46 / 58%) 100%); }
.travel-identity-mark { font-size: clamp(38px, 6vw, 72px); font-weight: 800; letter-spacing: -.08em; text-shadow: 0 4px 20px rgb(0 0 0 / 18%); }
.travel-identity-cover-label { padding: 7px 10px; border-radius: 999px; background: rgb(255 255 255 / 88%); color: var(--color-primary); font-size: 12px; font-weight: 750; }
.travel-identity-copy { display: grid; align-content: center; gap: 8px; padding: clamp(24px, 4vw, 48px); }
.travel-identity-copy h2 { margin: 0; font-size: clamp(30px, 4.4vw, 54px); line-height: 1.08; letter-spacing: -.035em; }
.travel-identity-copy p { margin: 0; color: var(--color-muted); font-size: 17px; }
.travel-identity-summary { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.next-action-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: clamp(20px, 3vw, 30px); border: 1px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-border)); border-radius: var(--radius-lg); background: linear-gradient(120deg, var(--color-primary-soft), var(--color-surface)); box-shadow: var(--shadow-low); }
.next-action-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: var(--color-primary); color: white; }
.next-action-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.next-action-copy h3 { margin: 2px 0 4px; font-size: clamp(21px, 2.4vw, 30px); }
.next-action-copy p { margin: 0; color: var(--color-muted); }
.next-action-card .primary-command { min-height: 48px; padding-inline: 20px; }
.mobile-home-jump-nav { display: none; }

.home-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.home-section-copy h3 { margin: 2px 0 0; font-size: clamp(22px, 2.4vw, 30px); }
.home-upcoming, .home-day-preview { display: grid; gap: 14px; }
.home-upcoming-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.home-upcoming-item { display: grid; align-content: space-between; gap: 16px; min-width: 0; padding: 18px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-low); }
.home-upcoming-item[data-tone="warning"] { background: linear-gradient(155deg, var(--color-sunset-soft), var(--color-surface)); }
.home-upcoming-item[data-tone="info"] { background: linear-gradient(155deg, var(--color-sky-soft), var(--color-surface)); }
.home-upcoming-item[data-tone="danger"] { border-color: color-mix(in srgb, var(--color-danger) 30%, var(--color-border)); }
.home-upcoming-item h4 { margin: 10px 0 5px; font-size: 17px; }
.home-upcoming-item p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--color-muted); -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.home-upcoming-item .inline-command { justify-self: start; min-height: 44px; }

.home-day-preview { padding: clamp(20px, 3vw, 28px); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-low); }
.home-day-preview-body { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; align-items: stretch; }
.home-day-visual { display: grid; place-items: center; min-height: 190px; overflow: hidden; border-radius: var(--radius-md); background: linear-gradient(155deg, #82bfd8, #397cb5 50%, #0b6b67); }
.home-day-visual img { width: 100%; height: 100%; min-height: 190px; object-fit: cover; }
.home-day-timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.home-day-timeline li { position: relative; display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 16px; min-height: 60px; padding: 10px 0 10px 24px; border-bottom: 1px solid var(--color-border); }
.home-day-timeline li:last-child { border-bottom: 0; }
.home-day-timeline li::before { content: ""; position: absolute; left: 1px; top: 20px; width: 11px; height: 11px; border: 3px solid var(--color-primary); border-radius: 50%; background: white; }
.home-day-timeline li::after { content: ""; position: absolute; left: 6px; top: 34px; bottom: -20px; width: 1px; background: var(--color-border); }
.home-day-timeline li:last-child::after { display: none; }
.home-day-timeline time { color: var(--color-primary); font-weight: 750; }
.home-day-event-copy { display: grid; gap: 2px; }
.home-day-event-copy span { color: var(--color-muted); font-size: 13px; }

.home-content-entries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.content-entry-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 94px; padding: 16px; text-align: left; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-low); }
.content-entry-card:hover { border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border)); box-shadow: var(--shadow-mid); }
.content-entry-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: var(--color-primary-soft); color: var(--color-primary); }
.content-entry-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.content-entry-route { background: var(--color-sky-soft); }
.content-entry-guide { background: var(--color-nature-soft); }
.content-entry-people { background: var(--color-sunset-soft); }
.content-entry-review { background: var(--color-sand-soft); }
.content-entry-copy { display: grid; gap: 2px; }
.content-entry-copy small { color: var(--color-muted); }
.content-entry-arrow { display: grid; place-items: center; width: 32px; height: 32px; color: var(--color-muted); }
.content-entry-arrow svg { width: 20px; height: 20px; }
.content-entry-illustrated { min-height: 148px; grid-template-columns: auto minmax(0, 1fr) auto 104px; overflow: hidden; }
.content-entry-media { align-self: stretch; width: 104px; min-height: 114px; overflow: hidden; border-radius: 12px; background: var(--color-surface-subtle); }
.content-entry-illustration { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .88; }
.travel-identity-cover[data-visual-tone="sunrise"] { background: linear-gradient(145deg, #efbd84 0%, #dc7d58 54%, #397cb5 100%); }
.travel-identity-cover[data-visual-tone="forest"] { background: linear-gradient(145deg, #8fc6aa 0%, #3e8a5b 54%, #0b6b67 100%); }
.travel-identity-cover[data-visual-tone="coast"] { background: linear-gradient(145deg, #91c9df 0%, #397cb5 52%, #e7b77d 100%); }
.home-day-visual { position: relative; align-content: center; gap: 8px; padding: 24px; color: white; text-align: center; background: linear-gradient(155deg, var(--color-sky-soft), #75b8d7 52%, var(--color-primary)); isolation: isolate; }
.home-day-visual::before { content: ""; position: absolute; z-index: -1; width: 150px; height: 150px; right: -36px; top: -42px; border: 24px solid rgb(255 255 255 / 16%); border-radius: 50%; }
.home-day-visual-icon { display: grid; place-items: center; width: 54px; height: 54px; margin-inline: auto; border-radius: 18px; background: rgb(255 255 255 / 88%); color: var(--color-primary); }
.home-day-visual-icon svg { width: 28px; height: 28px; }
.home-day-visual strong { font-size: 22px; }
.home-day-visual > span:last-child { color: rgb(255 255 255 / 88%); font-size: 14px; }

/* TOS-043-A5 compact trip context */
.app[data-mode="planning"][data-view="overview"] .trip-header,
.app[data-mode="planning"][data-view="overview"] .metrics-strip,
.app[data-mode="library"] .trip-header,
.app[data-mode="library"] .metrics-strip,
.app[data-mode="editor"] .trip-header,
.app[data-mode="editor"] .metrics-strip,
.app[data-mode="sync"] .trip-header,
.app[data-mode="sync"] .metrics-strip,
.app[data-mode="protection"] .trip-header,
.app[data-mode="protection"] .metrics-strip { display: none; }
.app[data-mode="planning"]:not([data-view="overview"]) .trip-header,
.app[data-mode="travel"] .trip-header { align-items: center; padding: 14px 0 10px; }
.app[data-mode="planning"]:not([data-view="overview"]) .trip-heading h1,
.app[data-mode="travel"] .trip-heading h1 { font-size: clamp(24px, 3vw, 32px); }
.app[data-mode="planning"]:not([data-view="overview"]) .title-row,
.app[data-mode="travel"] .title-row { margin-bottom: 6px; }
.app[data-mode="planning"]:not([data-view="overview"]) .metrics-strip,
.app[data-mode="travel"] .metrics-strip { margin-bottom: 10px; }
.app[data-mode="planning"]:not([data-view="overview"]) .metrics-strip > div,
.app[data-mode="travel"] .metrics-strip > div { min-height: 58px; padding: 9px 12px; }
.app[data-mode="planning"]:not([data-view="overview"]) .main-content,
.app[data-mode="travel"] .main-content { padding-top: 14px; }

.library-management { min-width: 188px; }
.library-management > summary { display: flex; min-height: 48px; align-items: center; justify-content: center; padding: 0 16px; border: 1px solid var(--color-border); border-radius: 10px; color: var(--color-ink); font-weight: 750; cursor: pointer; }
.library-management-actions { display: flex; gap: 8px; }
.editor-secondary-commands { display: contents; }
.product-icon, .nav-icon svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.brand-mark, .global-rail-mark { display: block; object-fit: contain; }

.mobile-bottom-nav { display: none; }

@media (max-width: 1023px) {
  .workspace { display: grid; grid-template-columns: 232px minmax(0, 1fr); }
  .side-rail { position: sticky; top: var(--app-bar-height); display: grid; grid-template-columns: 58px minmax(0, 1fr); padding: 0; border-right: 1px solid var(--color-border); border-bottom: 0; }
  .global-rail { padding-inline: 6px; }
  .global-rail-mark { width: 38px; height: 38px; }
  .global-rail button { min-height: 56px; }
  .global-rail button strong { display: none; }
  .trip-navigation { padding-inline: 10px; }
  .rail-trip, .role-boundary { display: grid; }
  .section-nav { display: grid; grid-template-columns: 1fr; }
  .section-nav button { text-align: left; }
  .home-upcoming-list { grid-template-columns: 1fr; }
  .home-content-entries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-entry-illustrated { grid-template-columns: auto minmax(0, 1fr) auto 88px; }
  .content-entry-media { width: 88px; }
  .travel-identity { grid-template-columns: minmax(180px, .65fr) minmax(0, 1.35fr); }
}

@media (max-width: 767px), (max-width: 1023px) and (max-height: 520px) and (orientation: landscape) {
  .mobile-home-jump-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .mobile-home-jump-nav button { min-height: 48px; padding: 8px 6px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); color: var(--color-primary); font: inherit; font-size: 13px; font-weight: 800; }
  .home-upcoming, .home-day-preview, .home-content-entries { scroll-margin-top: 88px; }
  body { padding-bottom: var(--mobile-bottom-nav-height, calc(76px + env(safe-area-inset-bottom))); }
  .app-bar { position: sticky; min-height: 58px; padding: 8px 14px; }
  .app-bar::before { inset-inline-start: 55%; background-size: cover, cover, 300px auto; opacity: .12; }
  .app-bar::after { inset-inline-end: 0; width: 190px; opacity: .045; }
  .brand small, .app-status { display: none; }
  .workspace { display: block; }
  .side-rail { position: static; display: block; width: auto; min-height: auto; padding: 0 14px; border: 0; background: transparent; }
  .global-rail, .rail-trip, .section-nav, .management-context { display: none; }
  .trip-navigation { padding: 0; }
  .trip-library { display: none; }
  .trip-library[open] { position: fixed; z-index: 90; inset: 64px 12px calc(82px + env(safe-area-inset-bottom)); display: block; margin: 0; overflow: auto; border: 1px solid var(--color-border); background: var(--color-surface); box-shadow: 0 18px 60px rgb(18 50 56 / 24%); }
  .trip-library[open] > summary { position: sticky; z-index: 1; top: 0; background: var(--color-surface); }
  .role-boundary { position: fixed; z-index: 91; left: 28px; right: 28px; bottom: calc(96px + env(safe-area-inset-bottom)); display: none; max-height: 42vh; overflow: auto; margin: 0; box-shadow: var(--shadow-mid); }
  .trip-library[open] + .role-boundary { display: none; }
  .trip-library:not([open]) + .role-boundary { display: none; }
  .content-column { padding: 14px 14px 24px; }
  .trip-header { display: grid; gap: 10px; padding-bottom: 12px; }
  .trip-heading h1 { font-size: 29px; }
  .trip-subtitle { font-size: 14px; }
  .mode-switch { width: 100%; }
  .mode-switch button { flex: 1; }
  .metrics-strip { display: none; }
  .travel-identity { grid-template-columns: 1fr; min-height: 0; }
  .travel-identity-cover { min-height: 148px; }
  .travel-identity-copy { padding: 20px; }
  .travel-identity-copy h2 { font-size: 30px; }
  .next-action-card { grid-template-columns: auto minmax(0, 1fr); }
  .next-action-card .primary-command { grid-column: 1 / -1; width: 100%; }
  .home-section-heading { align-items: start; }
  .home-day-preview-body { grid-template-columns: 1fr; }
  .home-day-visual { min-height: 132px; }
  .home-content-entries { grid-template-columns: 1fr 1fr; }
  .content-entry-card { min-height: 112px; grid-template-columns: 1fr auto; align-content: start; }
  .content-entry-icon { grid-column: 1; }
  .content-entry-copy { grid-column: 1 / -1; }
  .content-entry-arrow { grid-column: 2; grid-row: 1; }
  .content-entry-illustrated { grid-template-columns: minmax(0, 1fr) auto; }
  .content-entry-media { grid-column: 1 / -1; grid-row: 3; width: 100%; min-height: 96px; max-height: 112px; }
  .app[data-mode="planning"]:not([data-view="overview"]) .trip-header,
  .app[data-mode="travel"] .trip-header { padding: 10px 0 6px; }
  .app[data-mode="planning"]:not([data-view="overview"]) .trip-heading h1,
  .app[data-mode="travel"] .trip-heading h1 { font-size: 24px; }
  .app[data-mode="planning"]:not([data-view="overview"]) .trip-subtitle,
  .app[data-mode="travel"] .trip-subtitle { font-size: 13px; }
  .app[data-mode="planning"]:not([data-view="overview"]) .main-content,
  .app[data-mode="travel"] .main-content { padding-top: 10px; }
  .library-home { gap: 16px; }
  .library-hero { gap: 16px; padding: 20px; }
  .library-hero h1 { font-size: 34px; }
  .library-hero-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .library-management { min-width: 0; }
  .library-management > summary { display: flex; }
  .library-management:not([open]) .library-management-actions { display: none; }
  .library-management-actions { display: grid; gap: 8px; padding-top: 8px; }
  .library-management-actions button { width: 100%; }
  .trip-card-grid { order: 2; }
  .library-tools { order: 3; }
  .library-filters { order: 4; }
  .library-result-count { order: 5; }
  .library-onboarding { order: 6; }
  .library-draft-section { order: 7; }
  .mobile-bottom-nav { position: fixed; z-index: 80; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 7px 6px calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid var(--color-border); background: var(--color-surface); box-shadow: 0 -8px 28px rgb(18 50 56 / 10%); }
  .mobile-bottom-nav[hidden] { display: none; }
  .mobile-bottom-nav button { display: grid; place-items: center; gap: 3px; min-width: 0; min-height: 52px; padding: 4px 2px; border: 0; background: transparent; color: var(--color-muted); font-size: 12px; }
  .mobile-bottom-nav button[aria-current="page"] { color: var(--color-primary); font-weight: 750; }
  .mobile-bottom-nav button[aria-current="page"] .nav-icon { border-radius: 8px; background: var(--color-primary-soft); }
  html, .trip-editor { scroll-padding-bottom: calc(var(--editor-command-bar-height, 132px) + var(--keyboard-inset, 0px) + env(safe-area-inset-bottom) + 16px); }
  .trip-editor { padding-bottom: calc(var(--editor-command-bar-height, 132px) + var(--keyboard-inset, 0px) + env(safe-area-inset-bottom) + 16px); }
  .editor-header { padding: 20px 18px; }
  .editor-command-bar { bottom: calc(74px + env(safe-area-inset-bottom)); }
  .app[data-mode="editor"] .editor-command-bar { position: fixed; z-index: 95; left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); bottom: calc(var(--keyboard-inset, 0px) + max(8px, env(safe-area-inset-bottom))); }
  .editor-command-bar { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 8px; }
  .editor-command-status { display: none; }
  .editor-command-bar > .primary-command { width: 100%; min-height: 48px; }
  .editor-secondary-commands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .editor-secondary-commands button { width: 100%; min-height: 44px; padding-inline: 8px; }
  .workspace-disclosure-summary { align-items: flex-start; flex-direction: column; gap: 2px; }
  .workspace-disclosure-summary > span { margin-inline-start: 0; }
  .timeline-edit-button { width: auto; justify-self: start; }
}

@media (max-height: 620px) and (min-height: 521px) and (min-width: 768px) {
  .side-rail, .global-rail { position: sticky; top: 0; }
  .trip-navigation { max-height: 100dvh; }
}

@media (max-width: 1023px) and (max-height: 520px) and (orientation: landscape) {
  .editor-header { padding: 14px 16px; }
  .app[data-mode="editor"] .editor-command-bar { grid-template-columns: minmax(150px, 1fr) minmax(260px, 1.4fr); align-items: center; }
  .app[data-mode="editor"] .editor-secondary-commands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .home-content-entries { grid-template-columns: 1fr; }
  .home-day-timeline li { grid-template-columns: 68px minmax(0, 1fr); gap: 10px; }
}

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