/* ============================================================================
   Time Warden — Outpace design system
   Aligned to "The Outpace Standard" Brand Guide v1.0:
   Executive Navy (structure) · Momentum Orange (action) · restrained accents,
   white surfaces, calm typography, 8-point spacing. Color communicates purpose.
   ========================================================================== */
:root {
  /* Primary brand */
  --navy: #08233F;          /* Executive Navy — trust, structure, navigation */
  --navy-2: #0C2C4D;        /* raised navy (hover on dark surfaces) */
  --sidebar-navy: #08233F;
  --orange: #F97316;        /* Momentum Orange — action, progress, focus */
  --orange-strong: #EA6A0C; /* orange hover/pressed */
  --accent-ink: #C2410C;    /* accessible orange for text/links (AA on white) */
  --blue: #F97316;          /* interactive accent (borders, rings, selected) */

  /* Day-type legend — a functional domain palette kept within the family */
  --free: #2563EB;          /* Free Day — rest */
  --session: #16A34A;       /* Session Day — Success Green */
  --checkin: #F59E0B;       /* Check-in Day — Warning Amber */
  --buffer: #DB2777;        /* Buffer Day — magenta (clear separation from Free's blue) */

  /* Status */
  --warn: #F59E0B;          /* Warning Amber */
  --danger: #DC2626;        /* Critical Red */

  /* Neutrals & surfaces (guide: ~70% white/light, 20% navy, 8% gray) */
  --surface: #FFFFFF;
  --bg: #F8FAFC;
  --wash: #EAF2F8;          /* Executive Navy tint — quiet surfaces */
  --ink: #0F2942;           /* body text (dark navy-slate) */
  --muted: #64748B;         /* Neutral Gray */
  --line: #E2E8F0;

  /* Flattened fills (guide: avoid decorative gradients; keep it calm) */
  --grad-blue: var(--orange);
  --grad-hero: var(--navy);
  --grad-amber: var(--checkin);

  /* Elevation — soft, navy-tinted */
  --shadow-card: 0 1px 2px rgba(8, 35, 63, 0.05), 0 8px 24px rgba(8, 35, 63, 0.06);
  --shadow-hover: 0 12px 32px rgba(8, 35, 63, 0.12);
  --radius: 16px;
  --radius-sm: 12px;
  --sidebar-w: 260px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;          /* guide: body ≥ 16px */
  line-height: 1.5;         /* guide: 1.5× */
  -webkit-font-smoothing: antialiased;
}
/* Hierarchy comes from size + weight, not decoration (guide: three weights). */
h1, h2, h3 { margin: 0 0 0.4rem; letter-spacing: -0.01em; color: var(--navy); }
h1 { font-size: 1.9rem; font-weight: 700; }
h2 { font-size: 1.4rem; font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 600; }
a { color: var(--accent-ink); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; }
.muted { color: var(--muted); }
.small { font-size: 0.8rem; }

/* ---- App shell ----------------------------------------------------------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0; background: var(--sidebar-navy);
  color: #cdd9ea; display: flex; flex-direction: column; padding: 1.25rem 0.9rem;
  position: sticky; top: 0; height: 100vh; gap: 0.4rem;
}
.brand { display: flex; align-items: center; gap: 0.65rem; padding: 0.4rem 0.6rem 1rem; text-decoration: none; }
.brand img { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 8px 24px rgba(8,35,63,0.30); }
.brand__word { font-weight: 800; color: #fff; letter-spacing: 0.06em; font-size: 1rem; line-height: 1; }
.brand__tag { color: #7d93b0; font-size: 0.68rem; letter-spacing: 0.05em; }
.side-nav { display: flex; flex-direction: column; gap: 0.15rem; }
.side-nav a {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.75rem; border-radius: 11px;
  color: #aebfd6; font-weight: 600; font-size: 0.92rem;
}
.side-nav a .ico { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.85; }
.side-nav a:hover { background: rgba(255,255,255,0.05); color: #fff; }
/* Guide: one active item, an orange indicator (a left bar), not a loud pill. */
.side-nav a.is-active { background: rgba(249,115,22,0.14); color: #fff; box-shadow: inset 3px 0 0 var(--orange); }
/* Count badge on a nav item (e.g. pending Decisions). */
.nav-badge { margin-left: auto; background: var(--orange); color: #fff; font-size: 0.68rem;
  font-weight: 800; min-width: 18px; height: 18px; line-height: 18px; text-align: center;
  border-radius: 999px; padding: 0 5px; }
.side-context { margin: 0.6rem 0.2rem; padding: 0.6rem 0.7rem; background: rgba(255,255,255,0.04); border-radius: 12px; }
.side-context label { color: #7d93b0; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; }
.side-context select { width: 100%; margin-top: 0.3rem; padding: 0.4rem 0.5rem; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12); background: #0c2138; color: #e6eefb; font: inherit; font-size: 0.85rem; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 0.15rem; }
.profile-chip { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; border-radius: 12px; background: rgba(255,255,255,0.04); margin-bottom: 0.3rem; }
.profile-chip .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--orange); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; }
.profile-chip .who { font-size: 0.82rem; color: #fff; font-weight: 600; line-height: 1.1; }
.profile-chip .role { font-size: 0.68rem; color: #7d93b0; }
.side-foot a { color: #aebfd6; font-size: 0.85rem; padding: 0.45rem 0.75rem; border-radius: 10px; font-weight: 600; }
.side-foot a:hover { background: rgba(255,255,255,0.05); color: #fff; }

.main { flex: 1; min-width: 0; }
.content { max-width: 1200px; margin: 0 auto; padding: 1.75rem 2rem 4rem; }

/* Mobile top bar + bottom nav (hidden on desktop) */
.topbar-m, .bottom-nav { display: none; }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 44px; padding: 0 1.1rem; border-radius: 12px; border: 1px solid transparent;
  font: inherit; font-weight: 600; cursor: pointer; background: var(--surface); color: var(--ink);
  border-color: var(--line); text-decoration: none; transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-1px); }
/* Primary = Momentum Orange with white text (guide). One primary per screen. */
.btn-primary { background: var(--orange); color: #fff; border: none; box-shadow: 0 6px 18px rgba(249,115,22,0.28); }
.btn-primary:hover { background: var(--orange-strong); box-shadow: 0 10px 26px rgba(249,115,22,0.34); }
/* Google sign-in — follows Google's identity guidelines (white, neutral border,
   the 4-colour G), not the brand's orange, so users recognise it as Google auth. */
.btn-google { background: #fff; color: #1f1f1f; border: 1px solid #dadce0; box-shadow: none; font-weight: 500; }
.btn-google:hover { background: #f7f8f8; border-color: #d2d5da; box-shadow: 0 1px 3px rgba(8,35,63,0.10); }
.btn-google svg { width: 18px; height: 18px; flex: none; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-small { min-height: 34px; padding: 0 0.7rem; font-size: 0.83rem; border-radius: 9px; }
.btn-danger { color: var(--danger); border-color: #f6c9c9; background: #fff; }
.btn-danger:hover { background: #fdf2f2; }

/* ---- Badges / pills ------------------------------------------------------ */
.badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.74rem; font-weight: 700; }
.badge--done { background: color-mix(in srgb, var(--session) 16%, #fff); color: #047857; }
.badge--fail { background: #fdecec; color: var(--danger); cursor: help; }
.badge--pending { background: #fff6e0; color: #b45309; }
.badge--role { background: var(--wash); color: var(--navy); text-transform: capitalize; }

/* ---- Cards --------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem 1.5rem; box-shadow: var(--shadow-card);
}
.card--hover { transition: transform .14s ease, box-shadow .14s ease; }
.card--hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.card__title { font-size: 0.78rem; text-transform: uppercase; font-weight: 700; letter-spacing: 0.05em; color: var(--muted); }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.page-head h1 { margin-bottom: 0.15rem; }
.section-title { margin: 2rem 0 0.9rem; font-size: 1.15rem; font-weight: 700; }
.swatch { width: 14px; height: 14px; border-radius: 5px; display: inline-block; flex-shrink: 0; }

/* ---- Dashboard ----------------------------------------------------------- */
.greeting h1 { font-size: 2.1rem; }
.greeting p { color: var(--muted); margin: 0; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.1rem; }
.kpi { position: relative; overflow: hidden; }
.kpi__head { display: flex; align-items: center; justify-content: space-between; }
.kpi__label { font-size: 0.82rem; font-weight: 700; color: var(--muted); }
.kpi__icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; }
.kpi__big { font-size: 2.6rem; font-weight: 800; line-height: 1.05; margin-top: 0.5rem; letter-spacing: -0.03em; }
.kpi__big .of { font-size: 1.1rem; font-weight: 600; color: var(--muted); }
.kpi__meta { color: var(--muted); font-size: 0.85rem; margin-top: 0.15rem; }
.kpi__bar { height: 8px; border-radius: 999px; background: var(--line); margin-top: 0.9rem; overflow: hidden; }
.kpi__bar > span { display: block; height: 100%; border-radius: 999px; }
.kpi__avail { margin-top: 0.55rem; font-size: 0.85rem; font-weight: 600; }
/* Segmented Free-Days toggle, sitting inside the Free Days KPI box. Full-width so
   both labels fit the card; segments wrap to two lines on narrow cards. */
.free-toggle { display: flex; width: 100%; margin-top: 0.7rem; border: 1px solid var(--line);
  border-radius: 14px; padding: 2px; background: var(--surface-2, #f4f6f9); gap: 2px; }
.free-toggle .seg { flex: 1; border: none; background: transparent; cursor: pointer;
  border-radius: 12px; padding: 0.34rem 0.4rem; font: inherit; font-size: 0.7rem; font-weight: 600;
  color: var(--muted); line-height: 1.15; text-align: center; white-space: normal; }
.free-toggle .seg.is-active { background: var(--orange); color: #fff; box-shadow: 0 2px 6px rgba(249,115,22,0.28); }
.insight { display: flex; gap: 0.9rem; align-items: flex-start; border-left: 4px solid var(--orange); }
.insight--warn { border-left-color: var(--warn); }
.insight__ico { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; background: var(--wash); }
.insight--warn .insight__ico { background: #fff3df; }
.insight h3 { font-size: 1.02rem; margin-bottom: 0.2rem; }
.insight p { margin: 0; color: var(--muted); font-size: 0.92rem; }
.stack { display: grid; gap: 1.1rem; }

/* Decisions page — calendar-conflict cards. */
.decision__head { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; align-items: center;
  justify-content: space-between; }
.decision__date { font-size: 1.02rem; margin-left: 0.5rem; }
.decision__flag { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem;
  font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: #92400E;
  background: #FEF3C7; border: 1px solid #FCD34D; border-radius: 999px; padding: 0.2rem 0.6rem;
  cursor: help; white-space: nowrap; }
/* Session-spacing flags: too-close reads red, too-far amber (the base). */
.decision__flag--close { color: #991B1B; background: #FEE2E2; border-color: #FCA5A5; }
.decision__event { display: flex; align-items: center; gap: 0.45rem; color: var(--ink);
  font-size: 0.92rem; margin-top: 0.7rem; }
.decision__prompt { margin: 0.85rem 0 0.6rem; font-weight: 600; }
.decision__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.decision__actions form { margin: 0; }
.decision__hint { margin: 0.7rem 0 0; }
.pill { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em;
  color: #fff; border-radius: 999px; padding: 2px 9px; vertical-align: middle; }
.pill--session { background: var(--session); }
.pill--checkin { background: var(--checkin); }
.pill--free { background: var(--free); }
.pill--buffer { background: var(--buffer); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

/* ---- Calendar ------------------------------------------------------------ */
.palette {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 0.7rem 0.9rem; box-shadow: var(--shadow-card); position: sticky; top: 0.75rem; z-index: 5; margin-bottom: 1.25rem;
}
.palette__label { font-weight: 700; font-size: 0.82rem; color: var(--muted); margin-right: 0.2rem; }
.palette__hint { color: var(--muted); font-size: 0.78rem; margin-left: auto; }
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; user-select: none;
  padding: 0.4rem 0.8rem; border: 1.5px solid var(--line); border-radius: 999px; font-size: 0.85rem; font-weight: 600;
  transition: box-shadow .12s ease, border-color .12s ease;
}
.chip input { display: none; }
.chip.is-active { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(249,115,22,0.20); color: var(--accent-ink); }
.swatch--clear { background: repeating-linear-gradient(45deg, #fff, #fff 3px, #d7dee9 3px, #d7dee9 6px); border: 1px solid var(--line); }

.legend { display: flex; flex-wrap: wrap; gap: 1.1rem; margin: 0 0 1.1rem; font-size: 0.82rem; color: var(--muted); }
.legend__item { display: inline-flex; align-items: center; gap: 0.4rem; }
.legend__swatch { width: 16px; height: 16px; border-radius: 5px; border: 1px solid var(--line); display: inline-block; }
.legend__swatch--booked { background: repeating-linear-gradient(-45deg, #fff 0, #fff 3px, #9aa7bd 3px, #9aa7bd 5px); outline: 2px solid var(--ink); outline-offset: -2px; }
.legend__swatch--busy { background: repeating-linear-gradient(-45deg, #fff 0, #fff 3px, #cbd5e1 3px, #cbd5e1 5px); }

.months { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.4rem; }
.month { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.05rem; box-shadow: var(--shadow-card); }
.month__title { margin: 0.1rem 0 0.8rem; font-size: 1.02rem; font-weight: 700; }
.weekgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.weekday { text-align: center; font-size: 0.66rem; color: var(--muted); font-weight: 600; padding-bottom: 0.3rem; }

.day {
  aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer;
  padding: 3px; font: inherit; color: var(--ink); display: flex; flex-direction: column; align-items: flex-start;
  justify-content: space-between; position: relative; overflow: hidden; transition: transform .1s ease, border-color .1s ease, box-shadow .1s ease;
}
.day:hover { transform: translateY(-2px); border-color: var(--orange); box-shadow: 0 6px 16px rgba(8,35,63,0.12); z-index: 2; }
.day--blank { border: none; background: transparent; cursor: default; }
.day__num { font-size: 0.72rem; line-height: 1; padding: 1px 2px; font-weight: 600; }
.day__tag { font-size: 0.5rem; align-self: stretch; text-align: center; border-radius: 4px; padding: 1px; color: #fff; font-weight: 700; letter-spacing: 0.02em; }
.day--free    { background: color-mix(in srgb, var(--free) 12%, #fff); border-color: color-mix(in srgb, var(--free) 45%, #fff); }
.day--session { background: color-mix(in srgb, var(--session) 12%, #fff); border-color: color-mix(in srgb, var(--session) 45%, #fff); }
.day--checkin { background: color-mix(in srgb, var(--checkin) 14%, #fff); border-color: color-mix(in srgb, var(--checkin) 45%, #fff); }
.day--buffer  { background: color-mix(in srgb, var(--buffer) 12%, #fff); border-color: color-mix(in srgb, var(--buffer) 45%, #fff); }
.day--free .day__tag { background: var(--free); }
.day--session .day__tag { background: var(--session); }
.day--checkin .day__tag { background: var(--checkin); }
.day--buffer .day__tag { background: var(--buffer); }
/* Both a Time Warden booking and a Salesforce-scheduled session read as "Booked". */
.day--booked, .day--busy { position: relative; }
.day--booked::after, .day--busy::after {
  content: ""; position: absolute; inset: 0; border-radius: 9px; pointer-events: none;
  background: repeating-linear-gradient(-45deg, transparent 0, transparent 4px,
    color-mix(in srgb, var(--ink) 36%, transparent) 4px, color-mix(in srgb, var(--ink) 36%, transparent) 6px);
}
/* A day with an undecided calendar conflict — pulled from the link, flagged for a decision. */
.day--decision { position: relative; box-shadow: inset 0 0 0 2px var(--warn); }
/* Holidays: a bold navy frame around the day (named on hover via data-tip). */
.day--holiday { box-shadow: inset 0 0 0 2px var(--navy); }
.day--holiday.day--decision { box-shadow: inset 0 0 0 2px var(--warn); }
.day__flag { position: absolute; top: 1px; right: 2px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--warn); color: #fff; font-size: 0.6rem; font-weight: 800; line-height: 12px;
  text-align: center; }
/* Auto-reserved travel Buffer day (bracketing an out-of-town trip): a dashed navy frame
   over the buffer fill, a navy "Travel" tag, and a ✈ marker (destination named on hover). */
.day--travel { box-shadow: inset 0 0 0 2px var(--navy); }
.day--travel { border-style: dashed; }
.day--travel .day__tag { background: var(--navy); }
.day__flag--travel { background: var(--navy); font-size: 0.55rem; }
/* A long-day (band 2) Session Day: labelled only (no reserved travel days). A subtle plane
   marker on the green Session cell; the "· Long day" note rides in the hover. */
.day__flag--longday { background: transparent; color: var(--navy); font-size: 0.6rem;
  right: 1px; top: 0; }
/* A manually-allocated cluster travel trip (OM/coach picked the dates in Settings). An
   orange frame names the cluster on hover; tentative = dashed, locked = solid + a ✓ flag.
   Placed after travel/holiday so the trip frame wins when they coincide. */
.day--trip { box-shadow: inset 0 0 0 2px var(--orange); }
.day--trip-tentative { border-style: dashed; }
.day__flag--trip { left: 2px; right: auto; background: var(--orange); font-size: 0.6rem; }

/* Custom calendar hover tooltip (fast, controlled delay via JS). */
.tw-tip {
  position: fixed; z-index: 60; pointer-events: none;
  background: var(--ink); color: #fff;
  font-size: 0.78rem; font-weight: 600; line-height: 1.25;
  padding: 0.36rem 0.55rem; border-radius: 8px;
  max-width: 240px; white-space: normal;
  box-shadow: 0 8px 22px rgba(2, 6, 23, 0.28);
}
.tw-tip[hidden] { display: none; }

/* Dashboard weekend-counting toggle. */
.dash-controls { display: flex; justify-content: flex-end; margin: 0.25rem 0 0.75rem; }
.toggle-inline { display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.85rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.toggle-inline input { width: 1rem; height: 1rem; cursor: pointer; }
.range-label { font-size: 0.8rem; font-weight: 500; color: var(--muted); margin-left: 0.4rem; }

/* Account match under the email field (public booking page). */
.account-id:empty { display: none; }
.account-id { margin: -0.4rem 0 0.9rem; }
.account-id__match { margin: 0; padding: 0.4rem 0.7rem; border-radius: 9px;
  background: var(--wash, #f1f5f9); border: 1px solid var(--line); }
.account-id__note { margin: 0; padding: 0.4rem 0.7rem; }
.account-id__choose { display: flex; flex-direction: column; gap: 0.3rem;
  padding: 0.5rem 0.7rem; border-radius: 9px; background: var(--wash, #f1f5f9);
  border: 1px solid var(--line); }
.account-id__select { padding: 0.4rem 0.5rem; border: 1px solid var(--line);
  border-radius: 8px; background: var(--card, #fff); font: inherit; }
/* Ordered Last Session / Next Session summary (after the account resolves). */
.sessinfo { margin: 0.6rem 0 0; display: grid; gap: 0.7rem; }
.sessinfo__group { padding: 0.7rem 0.85rem; border: 1px solid var(--line);
  border-radius: 11px; background: var(--surface); }
.sessinfo__label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); }
.sessinfo__type { font-size: 1.15rem; font-weight: 700; color: var(--navy); margin-top: 0.1rem; }
.sessinfo__meta { color: var(--muted); font-size: 0.9rem; }
.sessinfo__rows { margin: 0.45rem 0 0; display: grid; gap: 0.2rem; }
.sessinfo__rows > div { display: flex; justify-content: space-between; gap: 0.8rem;
  align-items: baseline; font-size: 0.9rem; }
.sessinfo__rows dt { color: var(--muted); margin: 0; }
.sessinfo__rows dd { margin: 0; text-align: right; }
.sessinfo__change { margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px solid var(--line);
  display: grid; gap: 0.3rem; }
.sessinfo__change label { color: var(--muted); font-weight: 600; }

/* Leadership Team editor (beneath the date grid). */
.lt { margin: 1.5rem 0 0; }
.lt__title { font-size: 1.05rem; margin: 0 0 0.15rem; }
.lt__list { display: grid; gap: 0.4rem; margin: 0.7rem 0; }
.lt__member { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.7rem;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }
.lt__member input { width: 1.05rem; height: 1.05rem; accent-color: var(--orange); flex: none; }
.lt__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.5rem; }
.lt__name { font-weight: 600; }
.lt__role { color: var(--muted); font-size: 0.85rem; }
.lt__add { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.lt__in { flex: 1 1 130px; min-width: 0; padding: 0.45rem 0.55rem; border: 1px solid var(--line);
  border-radius: 9px; font: inherit; font-size: 0.9rem; }
.lt__add .btn { flex: none; }
.lt__note { display: none; margin: 0.4rem 0 0; font-size: 0.82rem; }
.lt__note--active { display: block; color: var(--danger); font-weight: 600; }

/* In-flight lookup indicator (shown only while an HTMX request is running). */
.lookup-indicator { display: none; align-items: center; gap: 0.5rem; margin: 0.5rem 0;
  color: var(--muted); font-size: 0.9rem; }
.lookup-indicator.htmx-request { display: flex; }
.spinner { flex: none; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--orange) 30%, transparent);
  border-top-color: var(--orange); animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }

/* Booking confirmation → next-step offers (schedule quarters / check-ins). */
.nextsteps { margin: 1.4rem 0 0; border-top: 1px solid var(--line); padding-top: 1.2rem; }
.nextsteps__title { font-size: 1.05rem; margin: 0 0 0.8rem; }
.nextsteps__opt { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.85rem 1rem;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  margin-bottom: 0.7rem; cursor: pointer; }
.nextsteps__opt:hover { border-color: var(--orange); }
/* Each next step navigates to its own page — a clickable card, not a checkbox row. */
.nextsteps__opt--link { text-decoration: none; color: inherit;
  transition: border-color .1s ease, transform .1s ease; }
.nextsteps__opt--link:hover { transform: translateY(-1px); }
.nextsteps__opt input { margin-top: 0.2rem; width: 1.15rem; height: 1.15rem;
  accent-color: var(--orange); flex: none; }
.nextsteps__body { display: flex; flex-direction: column; gap: 0.2rem; }
.nextsteps__body strong { color: var(--navy); }
.nextsteps__section { margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.nextsteps__section h3 { margin: 0 0 0.6rem; }

/* "Plan next session" vs "Plan your year" choice cards (the booking interstitial). */
.choose { display: flex; flex-direction: column; gap: 0.8rem; margin: 1.2rem 0 0.4rem; }
.choose__opt { display: flex; padding: 1rem 1.1rem; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface); text-decoration: none; color: inherit;
  transition: border-color .1s ease, transform .1s ease; }
.choose__opt:hover { border-color: var(--orange); transform: translateY(-1px); }
.choose__opt--primary { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange) inset; }
.choose__body { display: flex; flex-direction: column; gap: 0.25rem; }
.choose__body strong { color: var(--navy); font-size: 1.05rem; }

/* No open dates — client message (the OM is alerted via a Salesforce task). */
.nodates { margin: 0.8rem 0 0; padding: 0.9rem 1.1rem; border: 1px solid var(--line);
  border-radius: 12px; background: var(--wash); }
.nodates__msg { margin: 0 0 0.2rem; font-weight: 600; color: var(--navy); }

/* Year-ahead planning (public booking page). */
.plan-cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem 1rem;
  background: var(--bg); margin: 0.25rem 0 1rem; }
.plan-cta strong { display: block; }
.yearplan { margin: 0 0 1.25rem; }
.yearplan h3 { margin: 0.2rem 0 0.3rem; }
.yp-annual { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }
.yp-annual-edit { margin: 0.1rem 0 0.4rem; }
.yp-annual-edit summary { display: inline; cursor: pointer; color: var(--accent-ink); font-size: 0.82rem; font-weight: 600; }
.yp-annual-edit summary::-webkit-details-marker { display: none; }
.yp-list { list-style: none; margin: 0.8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.yp-row { display: flex; align-items: center; gap: 0.75rem; border: 1px solid var(--line);
  border-radius: 12px; padding: 0.7rem 0.9rem; background: var(--surface); }
.yp-row--red { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.yp-chip { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); }
.yp-chip--green { background: var(--session); }
.yp-chip--amber { background: var(--checkin); }
.yp-chip--red { background: var(--danger); }
.yp-main { flex: 1 1 auto; min-width: 0; }
.yp-type { font-weight: 700; }
.yp-date { font-size: 0.92rem; }
/* Annual: First day / Second day stacked, not on one line. */
.yp-date--annual { display: flex; flex-direction: column; gap: 0.15rem; }
.yp-dayline strong { color: var(--navy); }
.yp-msg { margin-top: 0.1rem; }
.yp-more-btn { margin-top: 0.35rem; font-size: 0.8rem; }
.yp-more:not(:empty) { margin-top: 0.5rem; }
.yp-more__panel { border-top: 1px dashed var(--line); padding-top: 0.5rem; }
.yp-more__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.4rem; margin-top: 0.35rem; }
.yp-more__grid .date-pill { padding: 0.45rem; font-size: 0.85rem; }
.yp-back { margin: 0 0 0.6rem; font-size: 0.9rem; }

/* Year divider inside the holidays table. */
.year-row th {
  background: var(--wash, #f1f5f9); color: var(--muted);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; text-align: left;
  padding: 0.35rem 0.7rem; border-top: 1px solid var(--line);
}

/* ---- Booking links cards ------------------------------------------------- */
.link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1.2rem; }
.linkcard__head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.linkcard__icon { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; }
.linkcard__count { font-weight: 800; font-size: 1.05rem; }
.link-url { display: block; font-size: 0.78rem; word-break: break-all; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 0.5rem 0.6rem; margin: 0.7rem 0; color: var(--muted); }
/* Actions stacked in rows: Copy/Preview · New/Revoke · Auto-expire. */
.linkcard__actions { display: flex; flex-direction: column; gap: 0.5rem; }
.linkcard__row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.linkcard__expiry { margin-top: 0.2rem; padding-top: 0.5rem; border-top: 1px solid var(--line); }
.linkcard__expiry input[type="date"] { margin-left: 0.4rem; }
.linkcard__expiry-note { margin-top: 0.5rem; }
/* Future (not-yet-live) scheduling option. */
.linkcard--future { border-style: dashed; opacity: 0.85; }

/* ---- Bookings / generic tables ------------------------------------------- */
.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; }
table.tw { width: 100%; border-collapse: collapse; }
table.tw th, table.tw td { text-align: left; padding: 0.8rem 1rem; border-bottom: 1px solid var(--line); font-size: 0.9rem; vertical-align: middle; }
table.tw th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); background: #fbfcfe; }
table.tw tbody tr:hover { background: #fafbff; }
table.tw tr:last-child td { border-bottom: none; }
.actions { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.pending-tag { display: inline-block; background: #fff6e0; color: #b45309; padding: 0.25rem 0.8rem; border-radius: 999px; font-size: 0.82rem; font-weight: 700; margin-bottom: 0.8rem; }
.mark-form { display: flex; gap: 0.35rem; align-items: center; }
.sf-id { padding: 0.3rem 0.45rem; border: 1px solid var(--line); border-radius: 8px; font-size: 0.8rem; width: 110px; }

/* ---- Settings cards ------------------------------------------------------ */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.2rem; align-items: start; }
.scard__head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.3rem; }
.scard__icon { width: 36px; height: 36px; border-radius: 10px; background: var(--wash); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.scard p.muted { margin: 0 0 0.9rem; font-size: 0.86rem; }
.field-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0.55rem 0; }
.field-row label { font-size: 0.9rem; font-weight: 500; }
.field-row input { width: 150px; }
/* A number input followed by a "miles" unit label. */
.miles-field { display: inline-flex; align-items: center; gap: 0.45rem; }
.miles-field input { width: 90px; }
.miles-field .unit { font-size: 0.85rem; color: var(--muted); }
.field-row .readonly-val { font-size: 0.9rem; font-weight: 600; color: var(--navy); }

/* Collapsible Settings sections (accordion — one open at a time). */
.settings-accordion { display: flex; flex-direction: column; gap: 1rem; margin-top: 0.5rem; }
.settings-section { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; }
.settings-section > summary { list-style: none; cursor: pointer; padding: 1.05rem 1.3rem;
  font-size: 1.15rem; font-weight: 700; color: var(--navy); display: flex; align-items: center;
  gap: 0.65rem; user-select: none; }
.settings-section > summary::-webkit-details-marker { display: none; }
.settings-section > summary::after { content: "▾"; margin-left: auto; color: var(--muted);
  transition: transform .15s ease; }
.settings-section[open] > summary::after { transform: rotate(180deg); }
.settings-section > summary:hover { background: var(--wash); }
.settings-body { padding: 0.25rem 1.3rem 1.4rem; }
.settings-body .section-title:first-child { margin-top: 0.6rem; }
/* Transient "Saved ✓" flash beside a section heading after an HTMX save. */
.saved-flash { margin-left: 0.55rem; font-size: 0.8rem; font-weight: 700; color: var(--session);
  opacity: 0; transition: opacity .2s ease; }
.saved-flash.show { opacity: 1; }
/* One cluster's block inside the Clusters card: its trip shape + member list. */
.cluster-block { border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.85rem 1rem; margin-top: 0.9rem; }
.cluster-block__head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cluster-block__head .miles-field label { margin-right: 0.15rem; }
.cluster-ordered { font-size: 0.85rem; margin: 0; }
.cluster-itin { margin: 0.5rem 0 0.2rem; font-style: italic; }
/* Fixed columns so Client + Days line up across every cluster. */
.cluster-members { table-layout: fixed; width: 100%; margin-top: 0.5rem; }
.cluster-members .col-move { width: 58px; white-space: nowrap; }
.cluster-members .col-next { width: 210px; }
.cluster-members .col-days { width: 220px; }
.cluster-members td, .cluster-members th { overflow: hidden; text-overflow: ellipsis; }
.btn-move { border: 1px solid var(--line); background: #fff; border-radius: 7px; cursor: pointer;
  width: 24px; height: 26px; line-height: 1; font-size: 0.85rem; color: var(--navy); padding: 0; }
.btn-move:hover { background: var(--wash); }
.cluster-plan__list { margin: 0.2rem 0 0.2rem; padding-left: 1.1rem; }
.cluster-plan__list li { font-size: 0.85rem; margin: 0.2rem 0; }
.cluster-trips { margin: 0.8rem 0 0.2rem; }
.cluster-trips__head { margin-bottom: 0.4rem; }
.cluster-trips__list { list-style: none; margin: 0.3rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.cluster-trip { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.4rem 0.6rem; }
.cluster-trip--locked { border-color: color-mix(in srgb, var(--orange) 55%, #fff);
  background: color-mix(in srgb, var(--orange) 6%, #fff); }
.cluster-trip__dates { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  font-size: 0.9rem; color: var(--navy); font-weight: 600; }
.cluster-trip__dates input[type=date] { padding: 0.25rem 0.4rem; border: 1px solid var(--line);
  border-radius: 7px; font: inherit; font-size: 0.85rem; color: var(--navy); }
.cluster-trip__check { color: var(--orange); font-weight: 800; }
.cluster-trip__lock { margin-left: auto !important; }
.cluster-trip__remove { color: var(--muted); }
.cluster-trips__add { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-top: 0.5rem; }
.cluster-trips__add input[type=date] { margin-left: 0.3rem; padding: 0.3rem 0.4rem;
  border: 1px solid var(--line); border-radius: 7px; font: inherit; font-size: 0.85rem; color: var(--navy); }
.cluster-notes { display: block; margin: 0.7rem 0 0.2rem; }
.cluster-notes__input { display: block; width: 100%; margin-top: 0.25rem; padding: 0.45rem 0.6rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; font-size: 0.9rem;
  color: var(--navy); resize: vertical; box-sizing: border-box; }
.cluster-notes__input:focus { outline: none; border-color: var(--orange); }
.toggle-row { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0.7rem 0; font-size: 0.9rem; cursor: pointer; }
.toggle-row input { margin-top: 0.2rem; width: 18px; height: 18px; accent-color: var(--blue); flex-shrink: 0; }
/* A checkbox that only matters when its parent toggle is on — indented under it. */
.toggle-suboption { margin-left: 1.7rem; padding-left: 0.6rem; border-left: 2px solid var(--line); }
input[type=number], input[type=text], input[type=time], input[type=email], input[type=date], select, .field input {
  padding: 0.5rem 0.6rem; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 0.92rem; background: #fff; min-height: 40px;
}
input:focus, select:focus, .btn:focus-visible { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(249,115,22,0.22); }
.notice { padding: 0.75rem 1rem; border-radius: 11px; background: var(--wash); color: var(--navy); font-size: 0.9rem; }
.notice--warn { background: #fff6e0; color: #92400e; }

/* ---- Audit log ----------------------------------------------------------- */
.audit-table th, .audit-table td { padding: 0.5rem 0.6rem; }

/* ---- Empty states -------------------------------------------------------- */
.empty-state { text-align: center; padding: 2rem 1rem; }
.empty-state img { width: 64px; height: 64px; opacity: 0.9; margin-bottom: 0.6rem; }
.empty-state h2 { font-size: 1.15rem; }
.empty-state p { max-width: 40ch; margin: 0.3rem auto 0; color: var(--muted); }

/* ============================================================================
   Public booking pages (client-facing)
   ========================================================================== */
.pub-topbar { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1.5rem;
  background: #fff; border-bottom: 1px solid var(--line); }
.pub-topbar img { height: 26px; width: auto; }
.content--narrow { max-width: 560px; margin: 0 auto; padding: 2rem 1.25rem 4rem; display: flex; justify-content: center; }
.book-card { width: 100%; max-width: 540px; margin-top: 1.5rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 2rem 2.25rem 2.25rem; box-shadow: var(--shadow-card); }
.book-card__head { margin-bottom: 0.6rem; }
/* Navy hero + help card on the client booking page. */
.book-hero { position: relative; overflow: hidden; background: var(--navy);
  border-radius: 14px; padding: 1.3rem 1.5rem; color: #fff; margin-bottom: 1rem; }
.book-hero::after { content: ""; position: absolute; right: -60px; top: -40px;
  width: 200px; height: 200px; border-radius: 50%; background: rgba(249,115,22,0.10); }
.book-hero__eyebrow { position: relative; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; color: #BFD2E4; }
.book-hero__title { position: relative; color: #fff; margin: 0.25rem 0 0.1rem; }
.book-hero__sub { position: relative; margin: 0; color: #BFD2E4; }
.help-card { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.9rem 1.1rem;
  border: 1px solid var(--line); border-radius: 12px; background: var(--wash); margin-bottom: 0.6rem; }
.help-card__icon { font-size: 1.2rem; line-height: 1.4; }
.help-card strong { color: var(--navy); }
.help-card p { margin: 0.2rem 0 0; }
.help-contact { margin: 0 0 0.4rem; }
.field { display: block; margin: 1.1rem 0 0.4rem; font-weight: 600; }
.field input { display: block; width: 100%; margin-top: 0.35rem; }
.field-label { font-weight: 600; margin: 1.2rem 0 0.5rem; }
.date-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.5rem; }
.date-pill { padding: 0.6rem; border: 1px solid var(--line); border-radius: 11px; background: #fff; cursor: pointer; font: inherit; text-align: center; transition: transform .1s ease, border-color .1s ease; }
.date-pill:hover { transform: translateY(-2px); border-color: var(--orange); background: #FFF7ED; }
/* The chosen date stays highlighted after clicking. */
.date-pill.is-selected { border-color: var(--orange); background: #FFF7ED; font-weight: 700;
  color: var(--navy); box-shadow: 0 0 0 3px rgba(249,115,22,0.22); }
/* "Need to meet sooner?" — a quiet reveal of earlier-than-recommended check-in dates. */
.sooner { margin: 0.85rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.sooner__toggle { display: inline; cursor: pointer; font-weight: 600; color: var(--accent-ink);
  text-decoration: underline; }
.sooner__note { margin: 0.45rem 0 0.6rem; }
/* Quiet secondary action to switch to year planning (sits below the dates). */
.yearcta { margin: 0.8rem 0 0; text-align: center; color: var(--muted); font-size: 0.9rem; }
.linklike { background: none; border: none; padding: 0; font: inherit; font-weight: 600;
  color: var(--accent-ink); cursor: pointer; text-decoration: underline; }
/* A quieter, smaller text button — for secondary toggles (e.g. "Change to 1 Day")
   that shouldn't carry the same weight as a primary link like "See more dates". */
.linklike-sm { background: none; border: none; padding: 0; font: inherit; font-size: 0.78rem;
  font-weight: 400; color: var(--muted); cursor: pointer; text-decoration: underline; }
.linklike-sm:hover { color: var(--accent-ink); }
.yp-second { margin: 0.15rem 0 0.35rem; padding: 0.3rem 0.5rem; font-size: 0.85rem;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.yp-change1 { margin-top: 0.1rem; }
.yp-annual-grid { margin: 0.2rem 0 0.3rem; }
.yp-loc { margin-top: 0.5rem; display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
.yp-loc label { margin: 0; }
.yp-loc-sel { padding: 0.3rem 0.5rem; font-size: 0.85rem; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface); }
.yp-loc-other { padding: 0.3rem 0.5rem; font-size: 0.85rem; border: 1px solid var(--line);
  border-radius: 8px; min-width: 12rem; }
.preview { margin-top: 1.5rem; }
.preview-card { border: 1px solid var(--line); border-radius: 14px; padding: 1.3rem 1.5rem; background: var(--surface); box-shadow: var(--shadow-card); }
.detail { display: grid; grid-template-columns: max-content 1fr; gap: 0.55rem 1.25rem; margin: 1rem 0; align-items: center; }
.detail dt { color: var(--muted); font-size: 0.85rem; }
.detail dt label { color: var(--muted); font-size: 0.85rem; }
.detail dd { margin: 0; }
.detail dd input, .detail dd select { width: 100%; }
.attendees { margin: 0; padding-left: 1.1rem; }
.invite-opt { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem; font-size: 0.9rem; color: var(--ink); cursor: pointer; }
.invite-opt input { accent-color: var(--orange); width: 1rem; height: 1rem; }
.slot-grid { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.slot { display: inline-flex; align-items: center; gap: 0.3rem; border: 1.5px solid var(--line); border-radius: 999px; padding: 0.35rem 0.7rem; font-size: 0.85rem; cursor: pointer; }
.slot:has(input:checked) { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(249,115,22,0.20); color: var(--accent-ink); }
.slot input { accent-color: var(--blue); }
.confirmed { border: 1px solid var(--line); border-radius: 14px; padding: 1.4rem 1.6rem; background: #fff; text-align: center; box-shadow: var(--shadow-card); }
.confirmed .detail { text-align: left; }
.check { width: 52px; height: 52px; margin: 0 auto 0.6rem; border-radius: 50%; background: var(--session); color: #fff; font-size: 1.7rem; line-height: 52px; box-shadow: 0 8px 22px rgba(22,163,74,0.30); }
/* Nothing-placed state: amber, not the green success check. */
.check--warn { background: var(--warn); box-shadow: 0 8px 22px rgba(245,158,11,0.30); font-weight: 800; }

/* ============================================================================
   Login (split hero)
   ========================================================================== */
.login-wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; min-height: 100vh; }
.login-hero { background: var(--grad-hero); color: #fff; padding: 3.5rem; display: flex; flex-direction: column; justify-content: center; gap: 1rem; position: relative; overflow: hidden; }
.login-hero::after { content: ""; position: absolute; width: 460px; height: 460px; right: -160px; top: -120px; background: radial-gradient(circle, rgba(249,115,22,0.28), transparent 60%); }
.login-hero img { width: 76px; height: 76px; border-radius: 18px; box-shadow: 0 18px 50px rgba(8,35,63,0.45); }
.login-hero .word { font-size: 2.3rem; font-weight: 800; letter-spacing: 0.04em; margin-top: 0.6rem; }
.login-hero .tag { color: var(--warn); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.85rem; }
.login-hero .pitch { color: #b9cae3; max-width: 30ch; font-size: 1.05rem; }
.login-side { display: flex; align-items: center; justify-content: center; padding: 2rem; }
.login-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 2.25rem; box-shadow: var(--shadow-card); }
.login-card h1 { font-size: 1.5rem; }
.login-card .btn { width: 100%; margin: 0.5rem 0; }
.hint { color: var(--muted); font-size: 0.82rem; margin-top: 1.25rem; }
code { background: #eef2ff; padding: 0.1em 0.35em; border-radius: 5px; font-size: 0.85em; }
.inline { display: inline; margin: 0; }

/* ============================================================================
   Responsive — mobile (top bar + bottom nav)
   ========================================================================== */
@media (max-width: 860px) {
  .sidebar { display: none; }
  .topbar-m { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; background: var(--sidebar-navy); position: sticky; top: 0; z-index: 20; }
  .topbar-m img { width: 30px; height: 30px; border-radius: 8px; }
  .topbar-m .brand__word { color: #fff; font-size: 0.9rem; }
  .content { padding: 1.1rem 1rem 6rem; }
  .grid-2 { grid-template-columns: 1fr; }
  .bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; background: #fff;
    border-top: 1px solid var(--line); padding: 0.4rem 0.4rem calc(0.4rem + env(safe-area-inset-bottom)); justify-content: space-around; box-shadow: 0 -8px 24px rgba(15,23,42,0.06); }
  .bottom-nav a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; color: var(--muted); font-size: 0.66rem; font-weight: 600; padding: 0.3rem 0.4rem; border-radius: 10px; }
  .bottom-nav a.is-active { color: var(--blue); }
  .bottom-nav a .ico { width: 22px; height: 22px; }
  /* Pending-count badge anchored to the icon corner on the stacked bottom-nav item. */
  .bottom-nav .nav-badge--dot { position: absolute; top: 0; left: 50%; margin-left: 4px;
    min-width: 15px; height: 15px; line-height: 15px; font-size: 0.6rem; padding: 0 4px; }
  .login-wrap { grid-template-columns: 1fr; }
  .login-hero { padding: 2.5rem 1.75rem; min-height: 240px; }
  .months { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .page-head { flex-direction: column; }
}