/* ==========================================================================
   Goal Tracker — semantic component layer
   ==========================================================================

   HOW TO USE THIS FILE

   1. DESIGN TOKENS (:root, below) are the knobs. Change the page
      background, fonts, surface colour, borders, radii or shadows in one
      place and every component follows.

   2. COMPONENT CLASSES describe what a thing *is* (.section-card,
      .page-title, .btn--primary) rather than how it looks. Templates use
      these instead of long Tailwind strings.

   3. TAILWIND UTILITIES ARE STILL USED for one-off layout — grid columns,
      flex alignment, spacing between specific elements. That's deliberate:
      naming every layout wrapper would trade one kind of noise for
      another. The rule of thumb is: appearance lives here, arrangement
      stays inline.

   Load order matters: Tailwind's CDN injects its stylesheet after this
   file, so a utility class in a template still overrides a component
   style when you need a one-off exception.
   ========================================================================== */

:root {
  /* ---- Typography ------------------------------------------------------ */
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               'Inter', sans-serif;
  --font-heading: var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Surfaces -------------------------------------------------------- */
  --color-canvas: #e6eed8;          /* page background (soft pistachio) */
  --color-surface: #ffffff;         /* cards, sections, panels */
  --color-surface-sunken: #f8fafc;  /* nested panels inside a card */
  --color-surface-muted: #f1f5f9;   /* count pills, code, progress track */

  /* ---- Lines ----------------------------------------------------------- */
  --color-border: #e2e8f0;          /* card borders */
  --color-border-subtle: #f1f5f9;   /* list dividers */

  /* ---- Brand accent ---------------------------------------------------- */
  --color-accent: #0f766e;          /* accent text */
  --color-accent-hover: #115e59;
  --color-accent-solid: #0d9488;    /* filled buttons */
  --color-accent-solid-hover: #0f766e;
  --color-accent-tint: #d8e6ee;     /* section header wash */
  --color-accent-line: #eed8e6;     /* section header border */

  /* ---- Text ------------------------------------------------------------ */
  --color-text: #1e293b;
  --color-text-strong: #0f172a;
  --color-text-muted: #64748b;
  --color-text-faint: #94a3b8;
  --color-text-on-accent: #ffffff;

  /* ---- Feedback -------------------------------------------------------- */
  --color-info-bg: #f0f9ff;         /* informational callouts */
  --color-info-text: #075985;
  --color-info-line: rgb(2 132 199 / 0.2);
  --color-tip-bg: #fffbeb;          /* "tip" callouts */
  --color-tip-text: #78350f;
  --color-tip-line: rgb(217 119 6 / 0.2);
  --color-today-bg: #fef3c7;        /* today's column in the habits grid */
  --color-today-text: #78350f;
  --color-success-bg: #ecfdf5;      /* success panels / headers */
  --color-success-text: #065f46;
  --color-success-line: #a7f3d0;
  --color-warning-solid: #f59e0b;   /* extend-deadline button */
  --color-warning-solid-hover: #d97706;
  --color-code-bg: #0f172a;
  --color-code-text: #e2e8f0;
  --color-danger: #e11d48;
  --color-danger-hover: #be123c;
  --color-success-solid: #059669;
  --color-success-solid-hover: #047857;

  /* ---- Shape & depth --------------------------------------------------- */
  --radius-section: 1rem;
  --radius-control: 0.375rem;
  --radius-pill: 9999px;
  --shadow-section: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-section-hover: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-control: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-overlay: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* ---- Branding -------------------------------------------------------- */
  --logo-size: 1.75rem;             /* header logo width/height */

  /* ---- Habits grid ----------------------------------------------------- */
  --day-cell-size: 2.25rem;         /* toggle square AND its column width */
  --habit-name-col: 280px;          /* habit-name column */

  /* ---- Spacing --------------------------------------------------------- */
  --space-section-x: 1.25rem;
  --space-section-y: 0.75rem;
  --space-body: 1.5rem;
}

/* ==========================================================================
   Touch behaviour  (iOS / iPadOS)
   ========================================================================== */

/* Kill the grey flash on tap and the long-press callout menu on things
   that act as controls. */
a, button, [role="button"], summary, label {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* Removes the 300ms delay browsers reserve for double-tap-to-zoom. */
a, button, [role="button"], input, select, textarea {
  touch-action: manipulation;
}

/* Hover styles latch on after a tap on touch screens, leaving controls
   stuck in a highlighted state. Only apply them where hover is real. */
@media (hover: none) {
  .section-card--link:hover { box-shadow: var(--shadow-section); }
  .section-row--link:hover { background-color: transparent; }
  .btn--secondary:hover { border-color: var(--color-border); color: var(--color-text); }
  .quick-habit:hover { border-color: var(--color-border); background-color: var(--color-surface); }
  .quick-habit--done:hover { background-color: var(--color-accent-solid); }
}

/* Minimum comfortable touch target (Apple HIG is 44pt). Applied to the
   controls that were smallest. */
@media (pointer: coarse) {
  .btn { min-height: 2.75rem; }
  .btn--sm { min-height: 2.5rem; }
  .nav-link { padding-block: 0.25rem; }
  /* 44pt targets in the habits grid — moving the token keeps the columns
     in step with the squares. */
  :root { --day-cell-size: 2.75rem; }
}

/* Narrow phones: give the day columns room by shrinking the name column
   (the grid scrolls horizontally; quick-log is the better phone surface). */
@media (max-width: 640px) {
  :root { --habit-name-col: 170px; }
}

/* Keep horizontal scroll (the habits grid) from chaining to the page and
   triggering back-swipe navigation. */
.overflow-x-auto { overscroll-behavior-x: contain; }

/* ==========================================================================
   App shell
   ========================================================================== */

.app-canvas {
  background-color: var(--color-canvas);
}

.app-body {
  font-family: var(--font-sans);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

/* Safe-area padding keeps content clear of the notch, Dynamic Island and
   home indicator when launched standalone from the iOS home screen.
   env() resolves to 0 everywhere else, so this is inert in a browser. */
.app-container {
  margin-inline: auto;
  max-width: 72rem;
  padding-top: calc(2rem + env(safe-area-inset-top));
  padding-bottom: calc(2rem + env(safe-area-inset-bottom));
  padding-left: calc(1rem + env(safe-area-inset-left));
  padding-right: calc(1rem + env(safe-area-inset-right));
}

@media (min-width: 640px) {
  .app-container {
    padding-left: calc(1.5rem + env(safe-area-inset-left));
    padding-right: calc(1.5rem + env(safe-area-inset-right));
  }
}

@media (min-width: 1024px) {
  .app-container {
    padding-left: calc(2rem + env(safe-area-inset-left));
    padding-right: calc(2rem + env(safe-area-inset-right));
  }
}

/* Large iPads in landscape: use the extra width rather than leaving deep
   empty margins. */
@media (min-width: 1400px) { .app-container { max-width: 84rem; } }

/* Below --nav-breakpoint the nav collapses behind a menu button; above
   it, brand and links share one row as before. */
.app-topbar {
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-accent-line);
}

.app-topbar-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-toggle {
  margin-left: auto;
  display: inline-flex;
  height: 2.75rem;
  width: 2.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-control);
  color: var(--color-text-muted);
}

/* The menu icon's two states are toggled with Alpine x-show on <g>
   elements, deliberately not x-if. A template element parsed inside an
   svg is not an HTMLTemplateElement, so Alpine has no content fragment
   to clone and the icon renders as nothing at all. */
.nav-toggle svg { height: 1.5rem; width: 1.5rem; }
.nav-toggle:hover { color: var(--color-accent); background-color: var(--color-surface-sunken); }

/* Collapsed: hidden until toggled, then a stacked list. */
.app-nav {
  display: none;
  flex-direction: column;
  gap: 0.125rem;
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.app-nav--open { display: flex; }

/* `contents` keeps the logout <form> from breaking the flex/stack flow. */
.contents { display: contents; }

.app-nav .nav-link {
  border-radius: var(--radius-control);
  padding: 0.625rem 0.5rem;
}

.app-nav .nav-link:hover { background-color: var(--color-surface-sunken); }

.nav-link--button {
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

@media (min-width: 768px) {
  .app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
  }

  .app-topbar-row { gap: 1.5rem; }
  .nav-toggle { display: none; }

  .app-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 0;
    font-size: 0.875rem;
  }

  .app-nav .nav-link { padding: 0; border-radius: 0; }
  .app-nav .nav-link:hover { background-color: transparent; }
  .nav-link--button { width: auto; }
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-text-strong);
}

/* Site logo. Uses the small square PNG circled with border-radius rather
   than the 318KB SVG — the artwork's clip circle is effectively full-bleed,
   so the result is visually identical at a fraction of the weight.
   Adjust --logo-size to scale it. */
.app-brand-mark {
  display: inline-block;
  height: var(--logo-size);
  width: var(--logo-size);
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  object-fit: cover;
}

.app-greeting {
  display: none;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

@media (min-width: 1024px) { .app-greeting { display: inline; } }

/* Superseded by the collapsible nav rules above — kept only the hover. */
.nav-link:hover,
.app-nav button:hover { color: var(--color-accent); }

.app-footer {
  margin-top: 4rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-text-faint);
}

/* Django messages */
.flash {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background-color: var(--color-surface);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: #334155;
  box-shadow: var(--shadow-control);
}

.flash--error { color: #be123c; }

/* ==========================================================================
   Page headers  (the title block at the top of a view)
   ========================================================================== */

.page-header { margin-bottom: 1.5rem; }
@media (min-width: 640px) { .page-header { margin-bottom: 2rem; } }

.page-header--split {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.page-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text-strong);
}

@media (min-width: 640px) { .page-title { font-size: 1.875rem; } }

.page-subtitle {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.back-link {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.back-link:hover { color: var(--color-text-strong); }

/* ==========================================================================
   Sections  (the primary card surface)
   ========================================================================== */

.section-card {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-section);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-section);
}

/* Card with no header bar — content sits directly inside. */
.section-card--padded { padding: var(--space-body); }

/* Interactive card (e.g. a project tile that links somewhere). */
.section-card--link { display: block; transition: box-shadow 150ms, border-color 150ms; }
.section-card--link:hover { box-shadow: var(--shadow-section-hover); }

.section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: var(--space-section-y) var(--space-section-x);
  border-bottom: 1px solid var(--color-accent-line);
  background-color: color-mix(in srgb, var(--color-accent-tint) 50%, transparent);
}

.section-title {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
}

/* Small print sitting beside a section title. */
.section-meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.section-body { padding: var(--space-body); }

/* Success-tinted header (Achievements). */
.section-header--success {
  border-bottom-color: var(--color-success-line);
  background-color: color-mix(in srgb, var(--color-success-bg) 60%, transparent);
}

.section-header--success .section-title { color: var(--color-success-text); }

/* A heading for a block *inside* a section body. */
.subsection-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

/* Divided list inside a section. */
.section-list > * + * { border-top: 1px solid var(--color-border-subtle); }

.section-row {
  display: block;
  padding: 0.625rem var(--space-section-x);
}

.section-row--link { transition: background-color 150ms; }
.section-row--link:hover { background-color: color-mix(in srgb, var(--color-surface-sunken) 70%, transparent); }

/* Nested panel inside a card (habit cards, expanded journal entries). */
.surface-sunken {
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  background-color: var(--color-surface-sunken);
}

/* ==========================================================================
   Year tracker  (the goal-year banner at the top of the dashboard)
   ========================================================================== */

.year-tracker {
  background-image: linear-gradient(
    to bottom right,
    var(--color-surface),
    color-mix(in srgb, var(--color-accent-tint) 30%, var(--color-surface))
  );
}

.year-tracker-figure {
  margin-top: 0.25rem;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text-strong);
}

@media (min-width: 640px) { .year-tracker-figure { font-size: 1.5rem; } }

.quarter-tile {
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  background-color: var(--color-surface-sunken);
  padding: 0.75rem 0.5rem;
}

.quarter-tile--current {
  border-color: #5eead4;
  background-color: var(--color-accent-tint);
}

/* ==========================================================================
   Buttons & links
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--radius-control);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: var(--shadow-control);
  transition: background-color 150ms, border-color 150ms, color 150ms;
  cursor: pointer;
}

.btn--primary {
  background-color: var(--color-accent-solid);
  color: var(--color-text-on-accent);
}
.btn--primary:hover { background-color: var(--color-accent-solid-hover); }

.btn--success {
  background-color: var(--color-success-solid);
  color: var(--color-text-on-accent);
}
.btn--success:hover { background-color: var(--color-success-solid-hover); }

.btn--secondary {
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text);
}
.btn--secondary:hover { border-color: #2dd4bf; color: var(--color-accent); }

.btn--warning {
  background-color: var(--color-warning-solid);
  color: #fff;
}
.btn--warning:hover { background-color: var(--color-warning-solid-hover); }

.btn--sm { padding: 0.375rem 0.75rem; font-size: 0.75rem; }

/* Inert placeholder button (e.g. a disabled "next period" arrow). */
.btn--muted {
  border: 1px solid var(--color-border-subtle);
  background-color: var(--color-surface-sunken);
  color: #cbd5e1;
  box-shadow: none;
  cursor: default;
}

/* Category colour stripe down the left edge of a project card. */
.project-stripe {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 1rem;
}

.btn:disabled { cursor: not-allowed; opacity: 0.5; }

/* Text links */
.link-accent { color: var(--color-accent); font-weight: 500; }
.link-accent:hover { color: var(--color-accent-hover); }

.link-muted { color: var(--color-text-muted); }
.link-muted:hover { color: var(--color-text-strong); }

.link-danger { color: var(--color-text-faint); }
.link-danger:hover { color: var(--color-danger); }

/* ==========================================================================
   Segmented control

   Two or three mutually exclusive view options, e.g. the card/row layout
   switch on the projects list. Icon-only: the labels live in aria-label.
   ========================================================================== */

.segmented {
  display: inline-flex;
  gap: 0.125rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background-color: var(--color-surface);
  padding: 0.125rem;
}

.segmented-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--radius-control) - 2px);
  padding: 0.3125rem 0.5rem;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color 150ms, color 150ms;
}
.segmented-item:hover { color: var(--color-accent); }
.segmented-item svg { height: 1rem; width: 1rem; }

.segmented-item--active {
  background-color: var(--color-accent-tint);
  color: var(--color-accent);
}

@media (pointer: coarse) {
  .segmented-item { min-height: 2.75rem; min-width: 2.75rem; }
}

/* ==========================================================================
   Row lists

   The dense alternative to a grid of cards — same information, one line
   per item on a wide screen, stacked below 768px. Shared by the projects
   list and the high-altitude board; the trailing column's width differs
   between them, so each list sets --row-status-w for itself.
   ========================================================================== */

.row-list {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-section);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-section);
}

.row-item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.875rem;
  padding: 0.75rem 1rem 0.75rem 1.75rem;
  transition: background-color 150ms;
}
.row-item:hover { background-color: var(--color-surface-sunken); }
.row-list > * + * { border-top: 1px solid var(--color-border-subtle); }

.row-item-stripe {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 0.5rem;
}

/* Below 900px each part takes its own line; above, they share one. */
.row-item-head { flex: 1 1 100%; min-width: 0; }

.row-item-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-strong);
}
a.row-item:hover .row-item-name { color: var(--color-accent); }

.row-item-sub {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.row-item-meta {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.row-item-progress {
  display: flex;
  flex: 1 1 7rem;
  align-items: center;
  gap: 0.5rem;
}

.row-item-pct {
  min-width: 2.25rem;
  text-align: right;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.row-item-status {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.5rem;
}

.row-item-aside { font-size: 0.75rem; color: var(--color-text-faint); }

/* Trailing controls — an actions menu on rows that aren't links. */
.row-item-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 0.25rem; }

/* An item wanting attention (a landed high-altitude goal). A left inset
   would sit behind the category stripe, so the cue is a background wash;
   the hover rule is repeated because the two have equal specificity. */
.row-item--flagged { background-color: var(--color-tip-bg); }
.row-item--flagged:hover {
  background-color: color-mix(in srgb, var(--color-tip-bg) 85%, var(--color-text-faint));
}

/* Expanded description under a row. */
.row-item-detail { padding: 0 1rem 0.875rem 1.75rem; }

/* One line per item. The gain over a card is only worth having when
   everything fits without squeezing, so in the middle band the exact due
   date gives way — the chip beside it already says how long is left —
   and the progress column runs narrow. */
@media (min-width: 768px) {
  .row-item { flex-wrap: nowrap; padding-top: 0.625rem; padding-bottom: 0.625rem; }
  .row-item-head { display: flex; flex: 1 1 auto; align-items: baseline; gap: 0.5rem; }
  /* The name absorbs the shrinking; the goal keeps its width so it never
     truncates down to a meaningless stub. */
  .row-item-name { flex: 0 1 auto; }
  .row-item-sub { flex: 0 0 auto; max-width: 10rem; }
  .row-item-meta { flex: 0 0 auto; }
  .row-item-progress { flex: 0 0 6rem; }
  .row-item-aside { display: none; }
  /* Fixed width, contents right-aligned: that pins the left edge of the
     column before it, so bars, percentages and chips line up down the
     list instead of drifting with each row's chip widths. */
  .row-item-status { flex: 0 0 var(--row-status-w, auto); justify-content: flex-end; }
  /* Fixed too, or a row without notes shifts everything before it. */
  .row-item-actions { flex: 0 0 var(--row-actions-w, auto); justify-content: flex-end; }
  .row-list--hags { --row-actions-w: 9.5rem; }
  .row-list--projects { --row-status-w: 7rem; }
  .row-list--hags { --row-status-w: 11rem; }
}

@media (min-width: 1100px) {
  .row-item-progress { flex: 0 0 10rem; }
  .row-item-aside { display: block; }
  .row-list--projects { --row-status-w: 13.5rem; }
  .row-list--hags { --row-status-w: 19rem; }
}

/* ==========================================================================
   Action menu

   One trigger that drops the page's actions into a list, for headers that
   would otherwise carry a row of buttons competing for the same attention.
   ========================================================================== */

.menu { position: relative; }

.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.375rem);
  z-index: 30;
  min-width: 12rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background-color: var(--color-surface);
  padding: 0.25rem;
  box-shadow: var(--shadow-overlay);
}

.menu-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  border-radius: calc(var(--radius-control) - 1px);
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
}
.menu-item:hover { background-color: var(--color-surface-sunken); color: var(--color-accent); }

/* The action the page is really for — kept green, as the standalone button
   was, so it still reads as the primary move. */
.menu-item--success { color: var(--color-success-text); }
.menu-item--success:hover { background-color: var(--color-success-bg); color: var(--color-success-text); }

.menu-sep { margin: 0.25rem 0; border-top: 1px solid var(--color-border-subtle); }

.menu-chevron { height: 0.875rem; width: 0.875rem; transition: transform 150ms; }
.menu-chevron--open { transform: rotate(180deg); }

@media (pointer: coarse) {
  .menu-item { padding: 0.75rem; }
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #475569;
}

.form-input {
  margin-top: 0.25rem;
  display: block;
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-control);
  background-color: var(--color-surface);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--color-text-strong);
  box-shadow: var(--shadow-control);
}

.form-input:focus {
  outline: none;
  border-color: #14b8a6;
  box-shadow: 0 0 0 1px #14b8a6;
}

.form-input--mono { font-family: var(--font-mono); }

/* iOS Safari zooms the page when focusing a field whose text is under
   16px, and our controls are 14px. Bump to 16px on touch devices only.
   Must come after .form-input above, or that 14px wins on cascade order. */
@media (pointer: coarse) {
  .form-input,
  input[type="text"], input[type="password"], input[type="number"],
  input[type="date"], input[type="datetime-local"], input[type="time"],
  input[type="url"], input[type="email"], select, textarea {
    font-size: 16px;
  }
}

/* Safari lays date inputs out as content-box and ignores box-sizing on
   them, so a full-width date field ends up its own padding wider than its
   container and runs into the edge (seen on the journal modal). It also
   centres the date text, which reads oddly next to our left-aligned
   fields. Opting out of the native appearance fixes both, and is a no-op
   in Chrome/Firefox where these already behave. */
input[type="date"],
input[type="datetime-local"],
input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  max-width: 100%;
}

input[type="date"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit { text-align: left; }

.form-checkbox {
  height: 1rem;
  width: 1rem;
  border-radius: 0.25rem;
  border: 1px solid #cbd5e1;
  accent-color: var(--color-accent-solid);
}

.form-help {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.form-error {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--color-danger);
}

.form-error-banner {
  margin-bottom: 1rem;
  border: 1px solid #fecdd3;
  border-radius: var(--radius-control);
  background-color: #fff1f2;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #be123c;
}

/* Footer row of a form: cancel on the left, submit on the right. */
.form-actions {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-top: 1px solid var(--color-border-subtle);
  padding-top: 1.25rem;
}

/* ==========================================================================
   Chips  (status pills)

   Geometry lives here; the colours come from template filters in
   tracker_extras.py (pace_class, deadline_class, category_badge_class…)
   so status colour stays defined in one place per concept.
   ========================================================================== */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: var(--radius-pill);
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.chip--xs { padding: 0.125rem 0.5rem; font-size: 0.625rem; }

/* --- Chip colours -------------------------------------------------------
   Emitted by the filters in tracker_extras.py (pace_class, deadline_class,
   category_badge_class). Change a status colour once, here.            */

.chip--done        { background: #d1fae5; color: #065f46; box-shadow: inset 0 0 0 1px rgb(5 150 105 / 0.2); }
.chip--ahead       { background: #ccfbf1; color: #115e59; box-shadow: inset 0 0 0 1px rgb(13 148 136 / 0.2); }
.chip--on          { background: #f0fdfa; color: #0f766e; box-shadow: inset 0 0 0 1px rgb(13 148 136 / 0.2); }
.chip--behind      { background: #fef3c7; color: #92400e; box-shadow: inset 0 0 0 1px rgb(217 119 6 / 0.2); }
.chip--well-behind { background: #ffe4e6; color: #9f1239; box-shadow: inset 0 0 0 1px rgb(225 29 72 / 0.2); }
.chip--pending     { background: #f1f5f9; color: #334155; box-shadow: inset 0 0 0 1px rgb(71 85 105 / 0.2); }
.chip--missed      { background: #ffe4e6; color: #9f1239; box-shadow: inset 0 0 0 1px rgb(225 29 72 / 0.2); }

.chip--due-ok    { background: #d1fae5; color: #065f46; box-shadow: inset 0 0 0 1px rgb(5 150 105 / 0.2); }
.chip--due-soon  { background: #fef3c7; color: #92400e; box-shadow: inset 0 0 0 1px rgb(217 119 6 / 0.2); }
.chip--due-past  { background: #ffe4e6; color: #9f1239; box-shadow: inset 0 0 0 1px rgb(225 29 72 / 0.2); }

.chip--completed { background: #d1fae5; color: #065f46; box-shadow: inset 0 0 0 1px rgb(5 150 105 / 0.2); }
.chip--extended  { background: #fef3c7; color: #92400e; box-shadow: inset 0 0 0 1px rgb(217 119 6 / 0.2); }
.chip--parked    { background: #fffbeb; color: #92400e; box-shadow: inset 0 0 0 1px rgb(217 119 6 / 0.2); }
.chip--alert     { background: #ffe4e6; color: #9f1239; box-shadow: inset 0 0 0 1px rgb(225 29 72 / 0.2); }

/* Project categories — colour per area of life. */
.chip--cat-personal { background: #e0f2fe; color: #075985; box-shadow: inset 0 0 0 1px rgb(2 132 199 / 0.2); }
.chip--cat-family   { background: #fce7f3; color: #9d174d; box-shadow: inset 0 0 0 1px rgb(219 39 119 / 0.2); }
.chip--cat-braw     { background: #ffedd5; color: #9a3412; box-shadow: inset 0 0 0 1px rgb(234 88 12 / 0.2); }
.chip--cat-cec      { background: #e0e7ff; color: #3730a3; box-shadow: inset 0 0 0 1px rgb(79 70 229 / 0.2); }

/* --- Dots (category / calendar colour markers) --- */
.dot {
  display: inline-block;
  height: 0.5rem;
  width: 0.5rem;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background-color: #94a3b8;
}

.dot--sm { height: 0.375rem; width: 0.375rem; }
.dot--lg { height: 0.625rem; width: 0.625rem; }

.dot--cat-personal, .dot--sky     { background-color: #0ea5e9; }
.dot--cat-family,   .dot--pink    { background-color: #ec4899; }
.dot--cat-braw,     .dot--orange  { background-color: #f97316; }
.dot--cat-cec,      .dot--indigo  { background-color: #6366f1; }
.dot--teal    { background-color: #14b8a6; }
.dot--emerald { background-color: #10b981; }
.dot--amber   { background-color: #f59e0b; }
.dot--rose    { background-color: #f43f5e; }
.dot--violet  { background-color: #8b5cf6; }
.dot--slate   { background-color: #64748b; }

/* Category heading text colours (projects list). */
.cat-text-personal { color: #0369a1; }
.cat-text-family   { color: #be185d; }
.cat-text-braw     { color: #c2410c; }
.cat-text-cec      { color: #4338ca; }

/* Neutral count badge, e.g. "8" beside a section title. */
.count-pill {
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-muted);
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #475569;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Text helpers
   ========================================================================== */

.text-strong { color: var(--color-text-strong); }
.text-body { color: var(--color-text); }
.text-muted { color: var(--color-text-muted); }
.text-faint { color: var(--color-text-faint); }
.text-accent { color: var(--color-accent); }
/* Alert text on a normal surface — the token lightens in dark mode,
   which a fixed rose-700 does not. */
.text-danger { color: var(--color-danger); }

/* Token-driven surface helpers, so dark mode follows automatically. */
.bg-surface { background-color: var(--color-surface); }
.bg-sunken { background-color: var(--color-surface-sunken); }
.bg-muted { background-color: var(--color-surface-muted); }
.border-line { border-color: var(--color-border); }
.divide-line > * + * { border-top: 1px solid var(--color-border-subtle); }
.row-hover:hover { background-color: var(--color-surface-sunken); }

/* Informational callout (e.g. the Google Calendar instructions). */
.info-panel {
  border-radius: var(--radius-control);
  background-color: var(--color-info-bg);
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  color: var(--color-info-text);
  box-shadow: inset 0 0 0 1px var(--color-info-line);
}

.info-panel--tip {
  background-color: var(--color-tip-bg);
  color: var(--color-tip-text);
  box-shadow: inset 0 0 0 1px var(--color-tip-line);
}

.code-block {
  overflow-x: auto;
  border-radius: var(--radius-control);
  background-color: var(--color-code-bg);
  padding: 0.75rem;
  font-size: 0.75rem;
  color: var(--color-code-text);
}

.meta-text {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.empty-state {
  padding: 1.5rem var(--space-section-x);
  text-align: center;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--color-text-faint);
}

.empty-state--boxed {
  border: 1px dashed #cbd5e1;
  border-radius: var(--radius-section);
  background-color: var(--color-surface);
  padding: 2.5rem;
}

/* ==========================================================================
   Progress bars
   ========================================================================== */

.progress-track {
  overflow: hidden;
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-muted);
  height: 0.5rem;
}

.progress-track--slim { height: 0.375rem; }

.progress-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background-color: var(--color-accent-solid);
}

/* ==========================================================================
   Habit controls

   These are applied from Alpine :class bindings, so the done/missed/future
   states are named here rather than spelled out in JavaScript.
   ========================================================================== */

/* Grid view (habits_day). --day-cell-size drives both the toggle square
   and its table column, so they can't drift apart. */
.habit-grid {
  table-layout: fixed;
  width: 100%;
  border-collapse: separate;
  border-spacing: 3px;
}

.habit-grid-day-col { width: var(--day-cell-size); }
.habit-grid-name-col { min-width: var(--habit-name-col); }
.habit-grid-sticky { background-color: var(--color-surface); }

/* Column header states. */
.habit-grid-today {
  border-radius: var(--radius-control);
  background-color: var(--color-today-bg);
  color: var(--color-today-text);
  font-weight: 700;
}

.habit-grid-weekend {
  border-radius: var(--radius-control);
  background-color: var(--color-surface-sunken);
  color: var(--color-text-faint);
}

/* Goal grouping rows inside the grid. */
.habit-grid-group {
  border-radius: var(--radius-control);
  background-color: color-mix(in srgb, var(--color-accent-tint) 60%, transparent);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
}

.habit-grid-group--standalone {
  background-color: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-style: italic;
}

.day-cell {
  display: block;
  height: var(--day-cell-size);
  width: var(--day-cell-size);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  transition: background-color 150ms, border-color 150ms;
}

.day-cell--done {
  cursor: pointer;
  background-color: var(--color-accent-solid);
  border-color: var(--color-accent-solid-hover);
  color: #fff;
  box-shadow: var(--shadow-control);
}
.day-cell--done:hover { background-color: var(--color-accent-solid-hover); }

.day-cell--missed {
  cursor: pointer;
  background-color: var(--color-surface-muted);
  border-color: #cbd5e1;
}
.day-cell--missed:hover { background-color: #e2e8f0; border-color: #94a3b8; }

.day-cell--future {
  cursor: not-allowed;
  background-color: var(--color-surface-sunken);
  border-color: var(--color-border);
}

/* Quick-log view — large tap targets. */
.quick-habit {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-section);
  background-color: var(--color-surface);
  padding: 1rem;
  text-align: left;
  color: var(--color-text);
  box-shadow: var(--shadow-control);
  transition: background-color 150ms, border-color 150ms, transform 100ms;
}

@media (min-width: 640px) { .quick-habit { padding: 1.25rem; } }

.quick-habit:active { transform: scale(0.99); }
.quick-habit:hover { border-color: #2dd4bf; background-color: var(--color-surface-sunken); }

.quick-habit--done {
  border-color: var(--color-accent-solid-hover);
  background-color: var(--color-accent-solid);
  color: #fff;
}
.quick-habit--done:hover { background-color: var(--color-accent-solid-hover); border-color: var(--color-accent-solid-hover); }

.quick-habit-icon {
  display: flex;
  height: 3rem;
  width: 3rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-muted);
  color: var(--color-text-muted);
}

.quick-habit--done .quick-habit-icon {
  background-color: var(--color-accent-solid-hover);
  color: #fff;
}

.quick-habit-meta { margin-top: 0.125rem; font-size: 0.75rem; color: var(--color-text-muted); }
.quick-habit--done .quick-habit-meta { color: #ccfbf1; }

.quick-habit-check {
  display: flex;
  height: 2rem;
  width: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-border);
  font-size: 1.125rem;
}

.quick-habit--done .quick-habit-check {
  border-color: transparent;
  background-color: rgb(255 255 255 / 0.2);
}

/* Dashboard priority-habit "mark done" button. */
.habit-action {
  margin-top: 0.75rem;
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background-color: var(--color-surface);
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted);
  box-shadow: var(--shadow-control);
  transition: background-color 150ms, border-color 150ms, color 150ms;
}

.habit-action:hover { border-color: #2dd4bf; color: var(--color-accent); }

.habit-action--done {
  border-color: transparent;
  background-color: var(--color-accent-solid);
  color: #fff;
}
.habit-action--done:hover { background-color: var(--color-accent-solid-hover); color: #fff; }

/* Milestone completion checkbox. */
.milestone-check {
  display: flex;
  height: 1.5rem;
  width: 1.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid #cbd5e1;
  border-radius: 0.25rem;
  background-color: var(--color-surface);
  transition: background-color 150ms, border-color 150ms;
}

.milestone-check:hover { border-color: #2dd4bf; }

.milestone-check--done {
  border-color: var(--color-accent-solid-hover);
  background-color: var(--color-accent-solid);
  color: #fff;
}
.milestone-check--done:hover { background-color: var(--color-accent-solid-hover); }

@media (pointer: coarse) {
  .milestone-check { position: relative; height: 1.75rem; width: 1.75rem; }
  /* The box stays small so rows read as a list, but a 28px tap target is
     under the 44pt minimum — this grows the hit area, not the graphic. */
  .milestone-check::after { content: ''; position: absolute; inset: -0.5rem; }
}

/* Success confirmation panel. */
.notice--success {
  border: 1px solid var(--color-success-line);
  border-radius: var(--radius-section);
  background-color: var(--color-success-bg);
  padding: var(--space-body);
  color: var(--color-success-text);
  box-shadow: var(--shadow-section);
}

/* ==========================================================================
   Attachments

   The whole card is the drop target, so the cue has to read at card
   scale: a dashed accent border plus an overlay across the panel.
   ========================================================================== */

.dropzone--active {
  position: relative;
  border-color: var(--color-accent-solid);
  border-style: dashed;
}

.dropzone-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-section);
  background-color: color-mix(in srgb, var(--color-surface) 88%, transparent);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent);
  /* The overlay must not swallow the drop event it is announcing. */
  pointer-events: none;
}

/* Short file-type marker, e.g. PDF. Fixed width so names start on a line. */
.file-tag {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  border-radius: var(--radius-control);
  background-color: var(--color-surface-muted);
  padding: 0.1875rem 0.25rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

/* ==========================================================================
   Two-factor setup
   ========================================================================== */

/* The QR needs a white quiet zone whatever the theme — scanners read the
   contrast, not the palette. */
.qr-frame {
  display: inline-block;
  border-radius: var(--radius-control);
  background: #fff;
  padding: 0.75rem;
}
.qr-frame svg { display: block; height: 12rem; width: 12rem; }

.recovery-codes {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  border-radius: var(--radius-control);
  background-color: var(--color-surface-muted);
  padding: 1rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  color: var(--color-text-strong);
  user-select: all;
}

/* ==========================================================================
   Rendered markdown

   Typography for goal and project descriptions. These must live here, not
   in a <style> block in base.html: that block loads after this file, so an
   equal-specificity rule there would outrank the dark-mode overrides below.
   ========================================================================== */

.markdown { color: #334155; font-size: 0.875rem; line-height: 1.6; }
.markdown h1 { font-size: 1.25rem; font-weight: 600; color: #0f172a; margin: 1.25rem 0 0.5rem; }
.markdown h2 { font-size: 1.125rem; font-weight: 600; color: #0f172a; margin: 1.1rem 0 0.5rem; }
.markdown h3 { font-size: 1rem; font-weight: 600; color: #0f172a; margin: 1rem 0 0.4rem; }
.markdown h4, .markdown h5, .markdown h6 { font-size: 0.95rem; font-weight: 600; color: #0f172a; margin: 0.9rem 0 0.3rem; }
.markdown p { margin: 0.5rem 0; }
.markdown ul, .markdown ol { margin: 0.5rem 0; padding-left: 1.5rem; }
.markdown ul { list-style: disc; }
.markdown ol { list-style: decimal; }
.markdown li { margin: 0.2rem 0; }
.markdown a { color: #0f766e; text-decoration: underline; }
.markdown a:hover { color: #115e59; }
.markdown code { background: #f1f5f9; padding: 0.1rem 0.35rem; border-radius: 4px; font-size: 0.8125rem; font-family: var(--font-mono); }
.markdown pre { background: #f1f5f9; padding: 0.75rem; border-radius: 6px; overflow-x: auto; margin: 0.75rem 0; }
.markdown pre code { background: transparent; padding: 0; }
.markdown blockquote { border-left: 3px solid #cbd5e1; padding-left: 0.75rem; color: #64748b; margin: 0.75rem 0; }
.markdown hr { border: 0; border-top: 1px solid #e2e8f0; margin: 1rem 0; }
.markdown table { border-collapse: collapse; margin: 0.75rem 0; }
.markdown th, .markdown td { border: 1px solid #e2e8f0; padding: 0.35rem 0.6rem; text-align: left; }
.markdown th { background: #f8fafc; font-weight: 600; }
.markdown :first-child { margin-top: 0; }
.markdown :last-child { margin-bottom: 0; }

/* Compact bulleted list for Django's password-validator help text. */
.help-list { color: #64748b; font-size: 0.75rem; line-height: 1.15rem; margin-top: 0.375rem; }
.help-list ul { list-style: disc; padding-left: 1rem; }
.help-list li { margin-top: 0.125rem; }
.help-list :first-child { margin-top: 0; }

/* ==========================================================================
   Modal
   ========================================================================== */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow-y: auto;
  background-color: rgb(15 23 42 / 0.4);
  padding: 1rem;
}

.modal-panel {
  width: 100%;
  max-width: 32rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-section);
  background-color: var(--color-surface);
  padding: var(--space-body);
  box-shadow: var(--shadow-overlay);
}

.modal-title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-text-strong);
}

/* ==========================================================================
   Dark mode

   Almost everything is a token override — the component classes above
   don't change. Chips and dots need their own values because a light
   tint with dark text inverts badly on a dark surface.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    /* Surfaces: a desaturated green-grey so the pistachio identity
       survives without glowing on a dark screen. */
    --color-canvas: #1b2118;
    --color-surface: #232a21;
    --color-surface-sunken: #1e251c;
    --color-surface-muted: #2b332a;

    --color-border: #384034;
    --color-border-subtle: #2e352c;

    /* Accents lighten so they stay legible on dark surfaces. */
    --color-accent: #5eead4;
    --color-accent-hover: #99f6e4;
    --color-accent-solid: #0d9488;
    --color-accent-solid-hover: #14b8a6;
    --color-accent-tint: #24352f;
    --color-accent-line: #2f3d35;

    --color-text: #dbe3d6;
    --color-text-strong: #f1f5ef;
    --color-text-muted: #9aa694;
    --color-text-faint: #74806f;

    --color-info-bg: #17262f;
    --color-info-text: #a5d8f3;
    --color-info-line: rgb(56 189 248 / 0.25);
    --color-tip-bg: #2b2517;
    --color-tip-text: #fcd9a0;
    --color-tip-line: rgb(245 158 11 / 0.25);
    --color-today-bg: #3a2f14;
    --color-today-text: #fcd9a0;
    --color-success-bg: #16291f;
    --color-success-text: #86efac;
    --color-success-line: #2b4636;
    --color-code-bg: #12170f;
    --color-code-text: #dbe3d6;

    --color-danger: #fb7185;
    --color-danger-hover: #fda4af;

    /* Shadows do little on dark backgrounds — deepen them so cards still
       read as raised. */
    --shadow-section: 0 1px 3px 0 rgb(0 0 0 / 0.5), 0 1px 2px -1px rgb(0 0 0 / 0.4);
    --shadow-section-hover: 0 4px 8px -2px rgb(0 0 0 / 0.6);
    --shadow-control: 0 1px 2px 0 rgb(0 0 0 / 0.4);
    --shadow-overlay: 0 20px 25px -5px rgb(0 0 0 / 0.7);
  }

  /* Form controls need explicit dark values (the browser default is white). */
  .form-input { border-color: #454e41; background-color: var(--color-surface-sunken); color: var(--color-text-strong); }
  .form-input:focus { border-color: var(--color-accent-solid); box-shadow: 0 0 0 1px var(--color-accent-solid); }
  .form-label { color: var(--color-text-muted); }
  .btn--secondary { border-color: var(--color-border); background-color: var(--color-surface); color: var(--color-text); }
  .btn--muted { border-color: var(--color-border-subtle); background-color: var(--color-surface-sunken); color: var(--color-text-faint); }
  .flash { color: var(--color-text); }
  .empty-state--boxed { border-color: var(--color-border); background-color: var(--color-surface); }

  /* Date pickers render a light-on-light calendar glyph otherwise. */
  input[type="date"], input[type="datetime-local"], input[type="time"] { color-scheme: dark; }

  /* Status chips: darker tints, lighter text. */
  .chip--done, .chip--completed, .chip--due-ok { background: #16341f; color: #86efac; box-shadow: inset 0 0 0 1px rgb(134 239 172 / 0.2); }
  .chip--ahead { background: #123634; color: #5eead4; box-shadow: inset 0 0 0 1px rgb(94 234 212 / 0.2); }
  .chip--on { background: #172a28; color: #5eead4; box-shadow: inset 0 0 0 1px rgb(94 234 212 / 0.18); }
  .chip--behind, .chip--due-soon, .chip--extended { background: #3a2f14; color: #fcd34d; box-shadow: inset 0 0 0 1px rgb(252 211 77 / 0.2); }
  .chip--parked { background: #332c18; color: #fcd34d; box-shadow: inset 0 0 0 1px rgb(252 211 77 / 0.18); }
  .chip--well-behind, .chip--missed, .chip--due-past, .chip--alert { background: #3d1d24; color: #fda4af; box-shadow: inset 0 0 0 1px rgb(253 164 175 / 0.2); }
  .chip--pending { background: var(--color-surface-muted); color: var(--color-text); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }

  .chip--cat-personal { background: #16293a; color: #7dd3fc; box-shadow: inset 0 0 0 1px rgb(125 211 252 / 0.2); }
  .chip--cat-family   { background: #34172a; color: #f9a8d4; box-shadow: inset 0 0 0 1px rgb(249 168 212 / 0.2); }
  .chip--cat-braw     { background: #37220f; color: #fdba74; box-shadow: inset 0 0 0 1px rgb(253 186 116 / 0.2); }
  .chip--cat-cec      { background: #1f1f3d; color: #a5b4fc; box-shadow: inset 0 0 0 1px rgb(165 180 252 / 0.2); }

  .count-pill { background-color: var(--color-surface-muted); color: var(--color-text); }

  /* Sunken is darker than surface here, so a hover would read as a hole. */
  .menu-item:hover { background-color: var(--color-surface-muted); }
  .row-item:hover { background-color: var(--color-surface-muted); }

  /* Category heading text needs lifting off the dark surface. */
  .cat-text-personal { color: #7dd3fc; }
  .cat-text-family   { color: #f9a8d4; }
  .cat-text-braw     { color: #fdba74; }
  .cat-text-cec      { color: #a5b4fc; }

  /* Habit grid states. */
  .day-cell--missed { background-color: var(--color-surface-muted); border-color: #454e41; }
  .day-cell--missed:hover { background-color: #3a4238; border-color: #5a6455; }
  .day-cell--future { background-color: var(--color-surface-sunken); border-color: var(--color-border-subtle); }

  /* Markdown + help text. */
  .markdown { color: var(--color-text); }
  .markdown h1, .markdown h2, .markdown h3,
  .markdown h4, .markdown h5, .markdown h6 { color: var(--color-text-strong); }
  .markdown a { color: var(--color-accent); }
  .markdown code, .markdown pre { background: var(--color-surface-muted); }
  .markdown blockquote { border-left-color: var(--color-border); color: var(--color-text-muted); }
  .markdown hr { border-top-color: var(--color-border); }
  .markdown th, .markdown td { border-color: var(--color-border); }
  .markdown th { background: var(--color-surface-muted); }
  .help-list { color: var(--color-text-muted); }

  /* Year-tracker gradient and quarter tiles. */
  .year-tracker {
    background-image: linear-gradient(to bottom right, var(--color-surface), var(--color-accent-tint));
  }
  .quarter-tile { border-color: var(--color-border); background-color: var(--color-surface-sunken); }
  .quarter-tile--current { border-color: var(--color-accent-solid); background-color: var(--color-accent-tint); }
}

/* ==========================================================================
   High-altitude board
   ========================================================================== */

/* Altitude marker — deliberately neutral so the category and ETA chips
   beside it carry the colour. */
.hag-altitude {
  background-color: var(--color-surface-muted);
  color: var(--color-text-muted);
  box-shadow: inset 0 0 0 1px rgb(100 116 139 / 0.2);
  font-variant-numeric: tabular-nums;
}

/* A HAG whose ETA has arrived: nudge it forward visually. */
.hag-card--landed {
  border-color: var(--color-warning-solid);
  box-shadow: var(--shadow-section), inset 3px 0 0 0 var(--color-warning-solid);
}

@media (prefers-color-scheme: dark) {
  .hag-altitude {
    background-color: var(--color-surface-muted);
    color: var(--color-text);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
  }
}