/* ============================================================
   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;
}

[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: flex; min-height: 100vh; }
#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; }
#sidebar .sidebar-foot { margin-top: auto; padding-top: 8px; }
.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, .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); }


@media (max-width: 900px) {
  #sidebar { position: fixed; left: -260px; z-index: 250; transition: left .2s; }
  #sidebar.open { left: 0; }
  #main { padding: 16px; }
  /* On mobile, stat grid collapses to 2 columns */
  .statcard-grid { grid-template-columns: repeat(2, 1fr) !important; }
  /* Card view is much better on mobile — hint user toward it */
  .daycard-summary { flex-wrap: wrap; }
}