/* ============================================================
   TRIP TRACKER — design system tokens + components
   Source: Claude Design "Trip Tracker admin design system" skill.
   Light (default) + [data-theme="dark"]. Component CSS below maps the
   design system's .tt-* component specs onto this app's existing class
   names so the JS render functions didn't need to change.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --font-ui: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-xs: 11px; --text-sm: 13px; --text-base: 14px; --text-md: 16px;
  --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 36px;
  --leading-tight: 1.2; --leading-normal: 1.45; --leading-relaxed: 1.6;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;

  --space-1: 2px; --space-2: 4px; --space-3: 8px; --space-4: 12px; --space-5: 16px;
  --space-6: 20px; --space-7: 24px; --space-8: 32px; --space-9: 40px; --space-10: 48px; --space-11: 64px;

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 999px;

  /* ---- Surfaces (warm, desaturated off-whites — not clinical white) ---- */
  --bg-page: #F7F5F0;
  --bg-sidebar: #F1EEE5;
  --bg-card: #FFFFFF;
  --bg-recessed: #EDEAE1;
  --bg-recessed-hover: #E6E2D6;
  --bg-overlay-scrim: rgba(35, 38, 31, 0.42);

  --border-hairline: #E3DFD3;
  --border-strong: #CFC8B7;
  --border-focus: #2E5339;

  --text-primary: #23261E;
  --text-secondary: #63614F;
  --text-tertiary: #97927D;
  --text-on-accent: #FBFAF6;
  --text-link: #24523A;
  --text-link-hover: #1A3D2A;

  --accent-primary: #2E5339;
  --accent-primary-hover: #24422D;
  --accent-primary-pressed: #1B3222;
  --accent-primary-subtle: #E6EEE3;
  --accent-primary-subtle-border: #C3D6BD;

  --accent-secondary: #C1602E;
  --accent-secondary-hover: #A34F24;
  --accent-secondary-pressed: #833E1B;
  --accent-secondary-subtle: #FAEAE0;
  --accent-secondary-subtle-border: #EAC5AE;

  --color-success: #2E6B45; --color-success-subtle: #E4EFE6; --color-success-border: #BBD8C2;
  --color-warning: #A8721F; --color-warning-subtle: #F7EDD8; --color-warning-border: #E4CB94;
  --color-danger: #AC3B31; --color-danger-subtle: #F8E5E2; --color-danger-border: #E7BAB3;
  --color-info: #35637F; --color-info-subtle: #E4EDF2; --color-info-border: #B9D0DD;

  --activity-cycling: oklch(0.56 0.10 246); --activity-cycling-subtle: oklch(0.94 0.02 246);
  --activity-hiking: oklch(0.56 0.10 118); --activity-hiking-subtle: oklch(0.94 0.02 118);
  --activity-driving: oklch(0.60 0.11 48); --activity-driving-subtle: oklch(0.94 0.025 48);
  --activity-kayaking: oklch(0.56 0.10 196); --activity-kayaking-subtle: oklch(0.94 0.02 196);
  --activity-transit: oklch(0.56 0.09 322); --activity-transit-subtle: oklch(0.94 0.02 322);

  --focus-ring: 0 0 0 3px rgba(46, 83, 57, 0.28);
  --focus-ring-danger: 0 0 0 3px rgba(172, 59, 49, 0.25);

  --shadow-e1: 0 1px 2px rgba(35, 38, 31, 0.05), 0 1px 1px rgba(35, 38, 31, 0.04);
  --shadow-e2: 0 4px 12px rgba(35, 38, 31, 0.08), 0 1px 3px rgba(35, 38, 31, 0.06);
  --shadow-e3: 0 16px 40px rgba(35, 38, 31, 0.16), 0 4px 12px rgba(35, 38, 31, 0.08);

  --z-dropdown: 100; --z-sticky: 200; --z-drawer: 300; --z-modal: 400; --z-tooltip: 500; --z-toast: 600;

  --sidebar-w: 240px;

  /* Story editor stage backdrop — a near-black "camera app" letterbox behind
     the 1080x1920 card. Theme-independent by design; never used on ordinary
     app pages. */
  --stage-bg: #14150F;
}

[data-theme="dark"] {
  --bg-page: #1B1D18; --bg-sidebar: #17190F; --bg-card: #24261F; --bg-recessed: #14150F; --bg-recessed-hover: #1C1E16;
  --bg-overlay-scrim: rgba(10, 11, 8, 0.6);
  --border-hairline: #363827; --border-strong: #4A4C37; --border-focus: #7FB587;
  --text-primary: #EFEEE4; --text-secondary: #A8A793; --text-tertiary: #767462;
  --text-on-accent: #14150F; --text-link: #8FCB97; --text-link-hover: #ACDCB2;
  --accent-primary: #7FB587; --accent-primary-hover: #97C69D; --accent-primary-pressed: #B0D5B5;
  --accent-primary-subtle: #26331F; --accent-primary-subtle-border: #3E4E31;
  --accent-secondary: #E08A54; --accent-secondary-hover: #E9A176; --accent-secondary-pressed: #F0B592;
  --accent-secondary-subtle: #382418; --accent-secondary-subtle-border: #573621;
  --color-success: #7DBE8E; --color-success-subtle: #223026; --color-success-border: #3C5443;
  --color-warning: #DBAE5C; --color-warning-subtle: #332A15; --color-warning-border: #5A4A24;
  --color-danger: #E08B7E; --color-danger-subtle: #3A231F; --color-danger-border: #603E36;
  --color-info: #86B4CC; --color-info-subtle: #1F2C33; --color-info-border: #3A5764;
  --activity-cycling: oklch(0.75 0.09 246); --activity-cycling-subtle: oklch(0.28 0.03 246);
  --activity-hiking: oklch(0.75 0.09 118); --activity-hiking-subtle: oklch(0.28 0.03 118);
  --activity-driving: oklch(0.76 0.10 48); --activity-driving-subtle: oklch(0.29 0.035 48);
  --activity-kayaking: oklch(0.75 0.09 196); --activity-kayaking-subtle: oklch(0.28 0.03 196);
  --activity-transit: oklch(0.75 0.08 322); --activity-transit-subtle: oklch(0.28 0.03 322);
  --focus-ring: 0 0 0 3px rgba(127, 181, 135, 0.35);
  --focus-ring-danger: 0 0 0 3px rgba(224, 139, 126, 0.3);
  --shadow-e1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.24);
  --shadow-e2: 0 4px 14px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-e3: 0 20px 48px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg-page); }
body { font-family: var(--font-ui); background: var(--bg-page); color: var(--text-primary); min-height: 100vh; font-size: var(--text-base); line-height: var(--leading-normal); }
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); text-decoration: underline; }
h1, h2, h3 { font-family: var(--font-ui); }

/* ---- Forms ---- */
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
input[type="text"], input[type="number"], input[type="date"], input[type="time"],
input[type="email"], input[type="password"], input[type="url"], textarea {
  font-family: var(--font-ui); font-size: var(--text-base); color: var(--text-primary);
  background: var(--bg-recessed); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 9px 12px; outline: none; width: auto;
  transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
input::placeholder, textarea::placeholder { color: var(--text-tertiary); }
input[type="text"]:hover:not(:disabled):not(:focus), input[type="number"]:hover:not(:disabled):not(:focus),
input[type="date"]:hover:not(:disabled):not(:focus), input[type="email"]:hover:not(:disabled):not(:focus),
input[type="password"]:hover:not(:disabled):not(:focus), input[type="url"]:hover:not(:disabled):not(:focus),
textarea:hover:not(:disabled):not(:focus) { border-color: var(--text-tertiary); }
input:focus, textarea:focus { background: var(--bg-card); border-color: var(--border-focus); box-shadow: var(--focus-ring); }
input:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; }
input[type="number"] { font-variant-numeric: tabular-nums; }

select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  font-family: var(--font-ui); font-size: var(--text-base); color: var(--text-primary);
  background-color: var(--bg-recessed);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M1 2.5L4 5.5L7 2.5' fill='none' stroke='%2363614F' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 9px 30px 9px 12px; cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
select option { background-color: var(--bg-card); color: var(--text-primary); }
select:hover:not(:disabled) { border-color: var(--text-tertiary); }
select:focus { outline: none; background-color: var(--bg-card); border-color: var(--border-focus); box-shadow: var(--focus-ring); }
select:disabled { opacity: .55; cursor: not-allowed; }
[data-theme="dark"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M1 2.5L4 5.5L7 2.5' fill='none' stroke='%23A8A793' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ---- Buttons ---- */
.btn { font-family: var(--font-ui); font-weight: 500; font-size: var(--text-sm); line-height: 1;
  border-radius: var(--radius-md); padding: 10px 18px; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--text-primary); cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, transform .04s ease; }
.btn:hover:not(:disabled) { background: var(--bg-recessed); }
.btn:active:not(:disabled) { transform: scale(0.98); background: var(--bg-recessed-hover); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-sm { padding: 6px 12px; font-size: var(--text-xs); border-radius: var(--radius-sm); }
.btn-primary { background: var(--accent-primary); color: var(--text-on-accent); border-color: var(--accent-primary); }
.btn-primary:hover:not(:disabled) { background: var(--accent-primary-hover); border-color: var(--accent-primary-hover); }
.btn-primary:active:not(:disabled) { background: var(--accent-primary-pressed); border-color: var(--accent-primary-pressed); }
.btn-danger { background: transparent; color: var(--color-danger); border-color: var(--color-danger-border); }
.btn-danger:hover:not(:disabled) { background: var(--color-danger-subtle); }
.btn-danger:active:not(:disabled) { background: var(--color-danger-subtle); filter: brightness(0.94); }

.card { background: var(--bg-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-e1); padding: var(--space-6); }
.muted { color: var(--text-secondary); }

/* ---- Badges ---- */
.badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-ui); font-size: var(--text-xs);
  font-weight: 600; padding: 3px 10px; border-radius: var(--radius-full); border: 1px solid transparent; line-height: 1.4; white-space: nowrap; }
.badge-green { background: var(--color-success-subtle); color: var(--color-success); border-color: var(--color-success-border); }
.badge-blue { background: var(--color-info-subtle); color: var(--color-info); border-color: var(--color-info-border); }
.badge-orange { background: var(--color-warning-subtle); color: var(--color-warning); border-color: var(--color-warning-border); }
.badge-red { background: var(--color-danger-subtle); color: var(--color-danger); border-color: var(--color-danger-border); }
.badge-gray { background: var(--bg-recessed); color: var(--text-secondary); border-color: var(--border-hairline); }
.badge-activity { color: var(--text-primary); border-color: var(--border-hairline); }
.activity-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }

/* ---- Avatar chips ---- */
.avatar-chip { border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff;
  font-family: var(--font-ui); font-weight: 600; box-shadow: 0 0 0 2px var(--bg-card); flex: none; }
.avatar-chip-sm { width: 24px; height: 24px; font-size: 10px; }
.avatar-chip-md { width: 32px; height: 32px; font-size: 12px; }
.avatar-group { display: inline-flex; }
.avatar-group .avatar-chip:not(:first-child) { margin-left: -8px; }

/* ---- App shell / sidebar ---- */
#appShell { display: none; min-height: 100vh; }
#appShell.show { display: flex; }
#sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--bg-sidebar); border-right: 1px solid var(--border-hairline);
  display: flex; flex-direction: column; padding: 16px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
#sidebar .brand { padding: 4px 4px 14px; font-weight: 700; font-size: var(--text-md); color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
#sidebar .navgroup { padding: 14px 8px 4px; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); font-weight: 600; }
#sidebar .navitem { display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: background-color .1s ease, color .1s ease; }
#sidebar .navitem:hover { background: var(--bg-recessed-hover); color: var(--text-primary); }
#sidebar .navitem.on { background: var(--accent-primary-subtle); color: var(--text-primary); font-weight: 600; }
#sidebar .navitem .navicon { width: 18px; height: 18px; flex: none; color: inherit; display: inline-flex; }
#sidebar .navitem.on .navicon { color: var(--accent-primary); }
#sidebar .backlink { padding: 0 8px 12px; }
/* Sticky rather than just margin-top:auto — a fully-featured trip has enough
   nav rows to overflow the drawer's height, and without this the footer
   (including the link back to triptracker.cc) required scrolling past every
   nav item to reach, with no visual cue that it existed. */
#sidebar .sidebar-foot { margin-top: auto; padding-top: 8px; position: sticky; bottom: 0;
  background: var(--bg-sidebar); border-top: 1px solid var(--border-hairline); padding-bottom: 4px; }
.theme-toggle { display: flex; align-items: center; gap: 8px; padding: 8px; font-size: var(--text-xs); color: var(--text-tertiary); }
.theme-toggle button { border: 1px solid var(--border-hairline); background: var(--bg-card); color: var(--text-secondary);
  border-radius: var(--radius-sm); padding: 4px 9px; font-size: var(--text-xs); cursor: pointer; font-weight: 500; }
.theme-toggle button.on { background: var(--accent-primary-subtle); color: var(--accent-primary); border-color: var(--accent-primary-subtle-border); font-weight: 600; }

#main { flex: 1; min-width: 0; padding: 28px 32px 64px; max-width: 1200px; }
h1 { font-size: var(--text-2xl); font-weight: 600; color: var(--text-primary); margin-bottom: 4px; letter-spacing: -0.01em; }
h2 { font-size: var(--text-lg); font-weight: 600; color: var(--text-primary); margin-bottom: 14px; }
.pagehead { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; gap: 12px; flex-wrap: wrap; }
.subtitle { color: var(--text-secondary); font-size: var(--text-sm); margin-top: 4px; }

.saveIndicator { font-size: var(--text-xs); color: var(--text-tertiary); display: inline-flex; align-items: center; gap: 6px; }
.saveIndicator.saving { color: var(--color-info); }
.saveIndicator.saved { color: var(--color-success); }

/* ---- Stat cards (Overview) ---- */
.statcard { background: var(--bg-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-e1); padding: var(--space-6); text-align: center; }
.statcard .stat-value { font-size: var(--text-3xl); font-weight: 600; color: var(--text-primary); font-family: var(--font-mono); letter-spacing: -0.01em; }
.statcard .stat-label { font-size: var(--text-sm); color: var(--text-secondary); font-weight: 500; margin-top: 4px; }

/* ---- Day grid ---- */
.gridWrap { overflow-x: auto; border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: var(--shadow-e1); }
table.daygrid { width: 100%; border-collapse: collapse; font-size: var(--text-base); min-width: 900px; }
table.daygrid th { background: var(--bg-recessed); color: var(--text-secondary); text-align: left; padding: 8px 10px; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border-hairline); position: sticky; top: 0; white-space: nowrap; }
table.daygrid td { border-bottom: 1px solid var(--border-hairline); padding: 0; vertical-align: top; color: var(--text-primary); }
table.daygrid tr:last-child td { border-bottom: none; }
table.daygrid tr:hover td { background: var(--bg-recessed); }
table.daygrid td .cell { padding: 8px 10px; min-height: 34px; display: flex; align-items: center; cursor: text; }
table.daygrid td input, table.daygrid td select { width: 100%; border: none; background-color: transparent; padding: 8px 10px; border-radius: 0; }
table.daygrid td input:focus, table.daygrid td select:focus { background-color: var(--bg-card); box-shadow: inset 0 0 0 1.5px var(--border-focus); }
table.daygrid td[data-col="distance_km"] input, table.daygrid td[data-col="ascent_m"] input, table.daygrid td[data-col="date"] input {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
table.daygrid td.rownum { color: var(--text-tertiary); text-align: center; width: 30px; font-family: var(--font-mono); font-size: var(--text-sm); }
table.daygrid td.opencol { width: 34px; text-align: center; cursor: pointer; color: var(--text-tertiary); font-size: var(--text-lg); }
table.daygrid td.opencol:hover { color: var(--text-primary); }
table.daygrid tr.restday td .cell { color: var(--text-tertiary); font-style: italic; }

/* ---- Drawer ---- */
#drawerOverlay { position: fixed; inset: 0; background: var(--bg-overlay-scrim); z-index: var(--z-drawer); display: none; }
#drawerOverlay.show { display: block; }
#drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 420px; max-width: 92vw; background: var(--bg-card); border-left: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-e3); z-index: calc(var(--z-drawer) + 1); transform: translateX(100%); transition: transform .2s ease; overflow-y: auto; padding: var(--space-7); }
#drawer.show { transform: translateX(0); }
.drawerhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border-hairline); }
.drawerhead h2 { margin-bottom: 0; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: var(--text-sm); color: var(--text-primary); margin-bottom: 6px; font-weight: 500; }
.field input:not([type="checkbox"]):not([type="radio"]), .field textarea, .field select { width: 100%; }
.field textarea { min-height: 70px; resize: vertical; font-family: var(--font-ui); }

/* ---- Modal ---- */
.modal-ov { position: fixed; inset: 0; background: var(--bg-overlay-scrim); z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal { background: var(--bg-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-xl); box-shadow: var(--shadow-e3);
  padding: var(--space-7); max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto; }

/* ---- Trip cards / entry points ---- */
.tripgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-5); }
.tripcard { background: var(--bg-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-e1);
  padding: var(--space-6); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease; }
.tripcard:hover { border-color: var(--border-strong); box-shadow: var(--shadow-e2); transform: translateY(-1px); }
.entrypoints { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-5); }
.entrypoint { border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); padding: var(--space-6); cursor: pointer; text-align: left;
  background: var(--bg-card); transition: border-color .15s ease, box-shadow .15s ease; }
.entrypoint:hover { border-color: var(--border-strong); box-shadow: var(--shadow-e1); }
.entrypoint .ico { font-size: 22px; margin-bottom: 6px; }
.entrypoint .ttl { font-weight: 600; margin-bottom: 3px; color: var(--text-primary); }
.entrypoint .desc { font-size: var(--text-sm); color: var(--text-secondary); }
.entrypoint.primary { grid-column: 1 / -1; border-color: var(--accent-primary-subtle-border); background: var(--accent-primary-subtle); }

table.simple { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
table.simple th { text-align: left; color: var(--text-secondary); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--border-hairline); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; }
table.simple td { padding: 10px; border-bottom: 1px solid var(--border-hairline); color: var(--text-primary); }
table.simple tr:last-child td { border-bottom: none; }

/* ---- Checklist item (readiness) ---- */
.checklist-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md);
  border: 1px solid transparent; margin-bottom: 8px; }
.checklist-item:last-child { margin-bottom: 0; }
.checklist-item.warning { background: var(--color-warning-subtle); border-color: var(--color-warning-border); }
.checklist-item.done { background: var(--color-success-subtle); border-color: var(--color-success-border); }
.checklist-item .check-icon { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.checklist-item .check-title { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.checklist-item .check-desc { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 2px; }
.pct-ring { font-size: var(--text-3xl); font-weight: 600; font-family: var(--font-mono); color: var(--text-primary); }

.module-off-note { color: var(--text-secondary); font-size: var(--text-sm); padding: 40px 20px; text-align: center; }

/* ---- Empty state ---- */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  padding: var(--space-9) var(--space-7); border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg);
  background: var(--bg-card); }
.empty-state .empty-title { font-size: var(--text-md); font-weight: 600; color: var(--text-primary); }
.empty-state .empty-desc { font-size: var(--text-sm); color: var(--text-secondary); max-width: 320px; margin: 0 auto; }

/* ---- Day card view (card-mode alternative to the grid table) ---- */
.daycard { background: var(--bg-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-e1); overflow: hidden; }
.daycard-rest { opacity: .85; }
.daycard-summary { display: flex; gap: 12px; align-items: center; padding: 14px 16px; cursor: pointer; list-style: none; user-select: none; }
.daycard-summary::-webkit-details-marker { display: none; }
.daycard-summary:hover { background: var(--bg-recessed); }
.daycard[open] > .daycard-summary { border-bottom: 1px solid var(--border-hairline); }
.daynum-chip { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-primary-subtle); color: var(--accent-primary); font-family: var(--font-mono); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.daycard-title { font-weight: 600; font-size: var(--text-base); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.daycard-meta { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.daycard-body { padding: 14px 16px 16px; }

/* ---- POI drag handles ---- */
.drag-handle { cursor: grab; color: var(--text-tertiary); padding: 0 2px; font-size: 14px; flex-shrink: 0; }
.drag-handle:active { cursor: grabbing; }

/* ---- Assignment pill ---- */
.assignment-pill { display: inline-flex; align-items: center; gap: 4px; }
.assignment-pill:hover .badge { border-color: var(--border-focus); }


/* ---- Day card detail rows (info lines inside an expanded day card) ---- */
.irow { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--border-hairline); font-size: var(--text-sm); }
.irow:first-child { border-top: none; }
.irow .ico { width: 20px; flex: none; text-align: center; font-size: 14px; line-height: 1.4; }
.irow .ilbl { width: 92px; flex: none; color: var(--text-secondary); font-weight: 500; }
.irow .ival { flex: 1; min-width: 0; color: var(--text-primary); }
.irow .ival .sub { color: var(--text-secondary); font-size: var(--text-xs); margin-top: 2px; }

/* Mini stat tiles inside a day card */
.ministats { display: grid; gap: 8px; margin-bottom: 12px; }
.ministat { background: var(--bg-recessed); border-radius: var(--radius-md); padding: 9px 6px; text-align: center; }
.ministat .mv { font-family: var(--font-mono); font-weight: 700; font-size: var(--text-md); color: var(--text-primary); line-height: 1.2; }
.ministat .ml { font-size: 10px; color: var(--text-secondary); margin-top: 2px; text-transform: uppercase; letter-spacing: .03em; }

.map-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.day-map { width: 100%; height: 260px; border: 1px solid var(--border-hairline); border-radius: var(--radius-md); display: block; }

/* ---- Trip overview combined map ---- */
/* position+z-index establishes a local stacking context: Leaflet's own
   internal panes/controls default to z-index up to 1000, which otherwise
   competes directly with (and wins over) the mobile sidebar/scrim's z-index
   in the page's root stacking order, since #tripMap sits in normal flow with
   no stacking context of its own to contain them. */
#tripMap { position: relative; z-index: 0; width: 100%; height: 380px; border-radius: var(--radius-md); border: 1px solid var(--border-hairline); background: var(--bg-recessed); }
#tripMap .leaflet-tile-pane { filter: none; }
[data-theme="dark"] #tripMap .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9); }
.maplegend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; font-size: var(--text-xs); color: var(--text-secondary); }
.maplegend .lg { display: inline-flex; align-items: center; gap: 5px; }
.maplegend .sw { width: 14px; height: 3px; border-radius: 2px; flex: none; }

/* ---- Logistics: read-only participant presentation ---- */
.leg-card { background: var(--bg-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-e1); overflow: hidden; }
.leg-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 16px 0; }
.leg-head .leg-sub { font-size: var(--text-sm); color: var(--text-secondary); }
.leg-body { padding: 14px 16px 16px; }
.leg-route { display: flex; align-items: center; gap: 12px; }
.leg-end { min-width: 0; }
.leg-end.arr { text-align: right; }
.leg-time { font-family: var(--font-mono); font-weight: 700; font-size: var(--text-xl); color: var(--text-primary); line-height: 1.1; }
.leg-place { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 3px; word-break: break-word; }
.leg-mid { flex: 1; text-align: center; min-width: 50px; }
.leg-dur { font-size: var(--text-xs); color: var(--text-secondary); margin-bottom: 4px; }
.leg-line { height: 2px; border-radius: 2px; background: linear-gradient(to right, var(--accent-primary-subtle-border), var(--accent-primary)); position: relative; }
.leg-line::after { content: ''; position: absolute; right: -1px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-primary); }
.leg-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-hairline); }
.leg-fact .fk { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); font-weight: 600; }
.leg-fact .fv { font-size: var(--text-sm); color: var(--text-primary); font-weight: 500; margin-top: 2px; word-break: break-word; }
.leg-fact .fv.mono { font-family: var(--font-mono); }

/* ---- Preview-as-participant banner ---- */
.preview-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--color-info-subtle);
  border: 1px solid var(--color-info-border); color: var(--color-info); border-radius: var(--radius-md);
  padding: 9px 14px; font-size: var(--text-sm); font-weight: 500; margin-bottom: 18px; }

/* ---- Per-tab view toggle (Cards / Edit) ---- */
.viewtoggle { display: flex; gap: 4px; background: var(--bg-recessed); border-radius: var(--radius-md); padding: 3px; flex: none; }

/* ---- Compact stat grid + quick links (Overview) ---- */
.statgrid { display: grid; gap: 10px; margin-bottom: 22px; }
.statgrid-4 { grid-template-columns: repeat(4, 1fr); }
.headactions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Quick links: dense list rows, not big tiles */
.quicklinks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.qlink { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: var(--radius-md);
  border: 1px solid var(--border-hairline); background: var(--bg-card); cursor: pointer;
  font-size: var(--text-sm); font-weight: 500; color: var(--text-primary);
  transition: border-color .12s ease, background-color .12s ease; }
.qlink:hover { border-color: var(--border-strong); background: var(--bg-recessed); }
.qlink .qico { font-size: 15px; flex: none; }

/* ---- Progress bar ---- */
.settingsgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.pbar { height: 8px; background: var(--bg-recessed); border-radius: 4px; overflow: hidden; }
.pbar > div { height: 100%; background: var(--accent-primary); border-radius: 4px; transition: width .3s ease; }

/* ---- Stat bar charts (Statistics tab) ---- */
.barchart { display: flex; gap: 5px; align-items: flex-end; height: 150px; padding: 0 2px; }
.barcol { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.barval { font-size: 10px; font-weight: 700; margin-bottom: 4px; white-space: nowrap; font-family: var(--font-mono); }
.barfill { width: 100%; border-radius: 4px 4px 0 0; min-height: 2px; transition: height .3s ease; }
.barlabels { display: flex; gap: 5px; padding: 6px 2px 0; border-top: 1px solid var(--border-hairline); margin-top: 6px; }
.barlabels > div { flex: 1; text-align: center; font-size: 10px; color: var(--text-tertiary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.chartnote { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border-hairline); line-height: 1.5; }

/* ---- Mobile top bar (hidden on desktop) ---- */
#mobilebar { display: none; }
#sidebarScrim { display: none; }

@media (max-width: 900px) {
  #appShell.show { display: block; }
  #mobilebar { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 240;
    background: var(--bg-sidebar); border-bottom: 1px solid var(--border-hairline); padding: 10px 14px; }
  #mobilebar #navToggle { background: none; border: none; color: var(--text-primary); cursor: pointer;
    display: inline-flex; align-items: center; padding: 4px; border-radius: var(--radius-sm); }
  #mobilebar #navToggle:active { background: var(--bg-recessed-hover); }
  #mobilebar #mobileTitle { font-weight: 600; font-size: var(--text-base); color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  #sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 264px; max-width: 84vw;
    transform: translateX(-100%); transition: transform .22s ease; z-index: 260; box-shadow: var(--shadow-e3); }
  #sidebar.open { transform: translateX(0); }
  #sidebarScrim { position: fixed; inset: 0; background: var(--bg-overlay-scrim); z-index: 255; }
  #sidebarScrim.show { display: block; }

  #main { padding: 16px 14px 56px; max-width: none; }
  h1 { font-size: var(--text-xl); }
  .pagehead { flex-direction: column; align-items: stretch; gap: 10px; }

  .settingsgrid { grid-template-columns: 1fr; }

  /* Metrics: one compact line, much smaller type */
  .statgrid { grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 16px; }
  .statgrid .statcard { padding: 8px 4px; border-radius: var(--radius-md); }
  .statgrid .statcard .stat-value { font-size: var(--text-md); }
  .statgrid .statcard .stat-label { font-size: 10px; margin-top: 1px; }

  /* Header buttons shrink to icons */
  .pagehead .headactions { position: absolute; top: 0; right: 0; gap: 6px; }
  .pagehead { position: relative; padding-right: 92px; }
  .headactions .iconbtn { padding: 8px 10px; }
  .headactions .iconbtn .btnlabel { display: none; }

  /* Quick links: two dense columns */
  .quicklinks { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .qlink { padding: 8px 10px; font-size: var(--text-xs); }
  .entrypoints { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)) !important; }

  .barchart { height: 120px; }
  .barval { font-size: 9px; }

  /* Tap targets and text sizing */
  .btn { padding: 11px 16px; }
  .btn-sm { padding: 8px 13px; }
  input[type="text"], input[type="number"], input[type="date"], input[type="time"],
  input[type="datetime-local"], input[type="email"], input[type="password"], input[type="url"],
  textarea, select { font-size: 16px; } /* 16px stops iOS Safari zooming on focus */

  .daycard-summary { padding: 12px 13px; }
  .daycard-body { padding: 12px 13px 14px; }
  .irow { flex-wrap: wrap; }
  .irow .ilbl { width: 74px; }
  .day-map { height: 200px; }
  #tripMap { height: 300px; }

  /* Checklist (tasks/packing): the table has a variable number of per-member
     columns plus item text, so on narrow screens rows become wrapping cards
     instead of squeezed table cells. */
  .checklist-table thead { display: none; }
  .checklist-table, .checklist-table tbody, .checklist-table td { display: block; }
  .checklist-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
    padding: 10px 12px; margin-bottom: 8px; }
  .checklist-table td { border-bottom: none; padding: 0; width: auto; }
  .checklist-table td:first-child { flex: 1 1 100%; order: -1; }
  .checklist-table td:last-child { margin-left: auto; }

  .leg-time { font-size: var(--text-lg); }
  .leg-route { gap: 8px; }

  /* Drawer becomes a bottom sheet */
  #drawer { width: 100vw; max-width: 100vw; height: 88vh; top: auto; bottom: 0; right: 0;
    border-left: none; border-top: 1px solid var(--border-hairline);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0; transform: translateY(100%); padding: var(--space-6); }
  #drawer.show { transform: translateY(0); }
}

@media (max-width: 460px) {
  .statgrid { grid-template-columns: repeat(2, 1fr) !important; }
  .ministats { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---- Weather ---- */
:root { --wx-night: rgba(53, 99, 127, .07); }
[data-theme="dark"] { --wx-night: rgba(134, 180, 204, .07); }
.wxdays { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 16px;
  -webkit-overflow-scrolling: touch; }
.wxday { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 13px; border-radius: var(--radius-md); border: 1px solid var(--border-hairline);
  background: var(--bg-card); cursor: pointer; font-family: var(--font-ui); color: var(--text-secondary);
  transition: border-color .12s, background-color .12s; }
.wxday:hover { border-color: var(--border-strong); color: var(--text-primary); }
.wxday.on { background: var(--accent-primary-subtle); border-color: var(--accent-primary-subtle-border);
  color: var(--text-primary); }
.wxday b { font-size: var(--text-sm); font-weight: 600; }
.wxday span { font-size: 10.5px; color: var(--text-tertiary); white-space: nowrap; }
.wxlegend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--border-hairline); font-size: var(--text-xs); color: var(--text-secondary); }
.wxlegend span { display: inline-flex; align-items: center; gap: 6px; }
.wxlegend i { width: 14px; height: 3px; border-radius: 2px; flex: none; }

/* ---- Story editor ---- */
/* Full-bleed mobile "camera app" takeover + a fixed two-pane desktop split
   (see design_handoff_story_editor). Layout is built almost entirely from
   inline styles in js/trip-story.js, matching the high-fidelity handoff's
   own approach and this file's existing convention of inline structural
   styling with CSS reserved for things that need pseudo-states/animation. */
.storyCanvas, #storyCanvas { cursor: grab; }
#storyCanvas:active { cursor: grabbing; }
@keyframes storySheetUp { from { transform: translateY(24px); opacity: .4; } to { transform: translateY(0); opacity: 1; } }