:root {
    color-scheme: dark;
    --bg: #0b0c0e;
    --bg-glow: none;
    --panel: #14161a;
    --panel-2: #1a1d22;
    --border: #1f2227;
    --border-hi: #2a2e35;
    --text: #f1f1ef;
    --muted: #8b8f96;
    --accent: #2B7BFF;
    --accent-dim: #123A6B;
    --accent-deep: #0A2342;
    --on-accent: #0b0c0e;
    --ok: #3ddc97;
    /* how far the floating tab bar sits off the bottom edge: dips 12px into
       the iPhone safe area (Ethan wanted it lower, twice, 2026-09-03), never
       closer than 8px on devices without one */
    --tab-bottom: max(8px, calc(env(safe-area-inset-bottom) - 12px));
    --warn: #f5b95a;
    --danger: #ff6b6b;
    --danger-dim: #5c2a2a;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  }
  * { box-sizing: border-box; }
  ::selection { background: var(--accent-dim); color: var(--text); }
  html { -webkit-text-size-adjust: 100%; }
  body {
    font-family: var(--sans);
    margin: 0; padding: 0;
    background: var(--bg-glow), var(--bg);
    background-attachment: fixed;
    color: var(--text);
    line-height: 1.55;
    min-height: 100vh;
  }
  a { color: var(--accent); }
  /* ---- tick boxes and radios (2026-09-12). Nothing had ever styled these,
     so they fell through to the generic input/select/textarea rule far
     below (12px padding, 14px radius, width 100%) and rendered as a fat
     rounded blob — Ethan spotted it on "include ROOT" in Approvals. Placed
     HERE, near the top, on purpose: .switch input and .seg-opt input hide
     the native control and draw their own, and both have the same
     specificity as this rule, so they must come later in the file to keep
     winning. Do not move this block down. */
  input[type="checkbox"], input[type="radio"] {
    appearance: none; -webkit-appearance: none;
    width: 20px; height: 20px; flex: none; padding: 0; margin: 0;
    border-radius: 6px; background: var(--panel-2); border: 1.5px solid var(--border-hi);
    display: inline-grid; place-content: center; cursor: pointer; vertical-align: middle;
    transition: background 0.12s ease, border-color 0.12s ease;
  }
  input[type="radio"] { border-radius: 50%; }
  input[type="checkbox"]::before {
    content: ""; width: 11px; height: 11px; background: var(--on-accent);
    transform: scale(0); transition: transform 0.12s ease;
    clip-path: polygon(14% 46%, 0 60%, 40% 100%, 100% 18%, 86% 4%, 39% 72%);
  }
  input[type="radio"]::before {
    content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--on-accent);
    transform: scale(0); transition: transform 0.12s ease;
  }
  input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--accent); border-color: var(--accent); }
  input[type="checkbox"]:checked::before, input[type="radio"]:checked::before { transform: scale(1); }
  input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  }
  header {
    padding: 10px 14px; border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    z-index: 5;
    padding-top: max(10px, env(safe-area-inset-top));
  }
  header .brand {
    font-family: var(--sans); font-weight: 600; font-size: 14px; letter-spacing: 0.01em;
    text-decoration: none; color: var(--text);
    display: flex; align-items: center; gap: 8px; flex: none;
  }
  header .brand .logo { height: 26px; width: auto; display: block; filter: drop-shadow(0 0 6px rgba(43, 123, 255, 0.45)); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 45%, transparent)); }
  header nav.top { display: none; align-items: center; gap: 2px; flex: 1; justify-content: center; margin: 0 10px; }
  header nav.top a {
    color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--sans); font-size: 13.5px; font-weight: 500;
    padding: 8px 13px; border-radius: 12px; transition: color 0.15s, background 0.15s;
  }
  header nav.top a svg { width: 16px; height: 16px; }
  header nav.top a:hover { color: var(--text); background: var(--panel); }
  header nav.top a.active { color: var(--text); background: var(--panel); }
  header .tools { display: flex; align-items: center; gap: 8px; flex: none; }
  header .tools form.search { display: none; }
  header .tools input.q {
    width: 180px; padding: 8px 10px 8px 34px; font-size: 13px; min-height: 0; border-radius: 19px;
    background: var(--panel-2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237d8b93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") 10px center no-repeat;
    border-color: var(--border);
  }
  header .tools input.q:focus { width: 260px; }
  header .tools .kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-family: var(--sans); font-size: 10.5px; color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; pointer-events: none; }
  header .tools form.search { position: relative; }
  header .tools a.icon, header .tools button.icon {
    color: var(--muted); display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 19px; text-decoration: none;
    background: none; border: none; padding: 0; font: inherit; cursor: pointer;
  }
  header .tools a.icon:hover, header .tools a.icon.active, header .tools button.icon:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
  header .tools a.icon svg, header .tools button.icon svg { width: 20px; height: 20px; }
  header .tools .user { color: var(--muted); font-family: var(--sans); font-size: 13px; font-weight: 500; display: none; margin-left: 4px; }
  @media (min-width: 700px) {
    header { padding: 12px 22px; }
    header nav.top { display: flex; }
    header .tools form.search { display: block; }
    header .tools .user { display: inline; }
    header .tools a.icon.search-link { display: none; }
  }
  /* overflow: visible, not auto (2026-09-12) — the category dropdowns below
     are absolutely positioned inside this nav, and a scroll container would
     clip them. Safe because the row is seven items now, never a long one. */
  header nav.top { overflow: visible; scrollbar-width: none; -ms-overflow-style: none; min-width: 0; }
  header nav.top::-webkit-scrollbar { display: none; }
  header nav.top a { white-space: nowrap; flex: none; }
  /* Desktop nav: icons only, the current section shows its label as a pill
     — twelve sections with labels no longer fit a normal laptop width. */
  header nav.top a span { display: none; }
  header nav.top a { padding: 9px 11px; }
  header nav.top a.active { padding: 9px 14px 9px 12px; }
  header nav.top a.active span { display: inline; }
  /* ---- desktop nav categories (2026-09-12): nineteen sections no longer
     read as a row of icons, so they sit in hover-opened dropdowns — Home
     and Settings stay direct icons, and any section not assigned to a group
     keeps its own icon at the end rather than disappearing. Pure CSS on
     purpose: the header is persistent chrome the swap engine never
     rebuilds, so there is nothing here for it to re-bind or leave open.
     :has(a.active) lights the category you're currently inside — it reads
     the .active class the swap engine already toggles on these links. */
  header nav.top .navgroup { position: relative; flex: none; }
  header nav.top .navgroup-trigger {
    background: none; border: none; box-shadow: none; min-height: 0; cursor: pointer;
    color: var(--muted); font-family: var(--sans); font-size: 13.5px; font-weight: 500;
    padding: 8px 12px; border-radius: 12px;
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    transition: color 0.15s, background 0.15s;
  }
  header nav.top .navgroup-trigger:hover { filter: none; color: var(--text); background: var(--panel); }
  header nav.top .navgroup-trigger:active { transform: none; }
  header nav.top .navgroup-trigger svg { width: 13px; height: 13px; transition: transform 0.18s ease; }
  header nav.top .navgroup:hover .navgroup-trigger svg { transform: rotate(180deg); }
  header nav.top .navgroup:has(a.active) .navgroup-trigger { color: var(--text); background: var(--panel); }
  header nav.top .navmenu {
    position: absolute; top: 100%; left: 50%; z-index: 7;
    transform: translateX(-50%) translateY(-4px);
    /* a transparent lip, so the pointer can cross from trigger to panel
       without the menu closing underneath it mid-move */
    padding-top: 8px; min-width: 190px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  }
  header nav.top .navgroup:hover .navmenu,
  header nav.top .navgroup:focus-within .navmenu {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  header nav.top .navmenu-panel {
    background: var(--panel); border-radius: 16px; padding: 6px;
    display: flex; flex-direction: column; gap: 1px;
    box-shadow: inset 0 0 0 1px var(--border), 0 16px 40px rgba(0, 0, 0, 0.42);
  }
  header nav.top .navmenu a, header nav.top .navmenu a.active { padding: 9px 12px; border-radius: 11px; gap: 10px; width: 100%; }
  header nav.top .navmenu a span { display: inline; }
  /* ---- phone tab bar — a floating pill (2026-09-03 redesign, step 1 of
     the calm & minimal look). Sits at --tab-bottom (see :root) — slightly
     into the iPhone safe area, like a native floating bar. The active tab is
     text-coloured with a small accent dot under the label, rather than the
     old accent-coloured icon. */
  nav.tabbar {
    position: fixed; left: 16px; right: 16px; bottom: var(--tab-bottom); z-index: 6;
    height: 64px; border-radius: 32px;
    display: flex; justify-content: space-around; align-items: center; padding: 0 8px;
    background: var(--panel);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), inset 0 0 0 1px var(--border);
  }
  nav.tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    height: 52px; padding: 0 2px; color: var(--muted); text-decoration: none;
    font-size: 10.5px; font-weight: 500; letter-spacing: 0.01em;
  }
  nav.tabbar a svg { width: 22px; height: 22px; }
  nav.tabbar a::after { content: ""; width: 4px; height: 4px; border-radius: 2px; background: transparent; margin-top: 1px; }
  nav.tabbar a.active { color: var(--text); }
  nav.tabbar a.active::after { background: var(--accent); }
  @media (min-width: 700px) { nav.tabbar { display: none; } }

  /* ---- fan/carousel quick-access menu — the tab bar's bigger, squircle
     3rd button. Opens shortcuts to sections that don't fit the 4 direct
     tabs, across up to 3 curved, independently-looping rows. Only relevant
     on the phone tab bar layout (<700px) — desktop already shows every
     section in the header nav. */
  .fab-slot { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; z-index: 12; }
  .fab {
    width: 52px; height: 52px; border-radius: 26px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent); border: none; cursor: pointer; padding: 0;
    transition: background 0.2s ease, transform 0.15s ease;
  }
  .fab:active { transform: scale(0.94); }
  .fab.open { background: var(--text); }
  .fab .fab-icon { display: flex; color: var(--bg); transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease; }
  .fab.open .fab-icon { transform: rotate(45deg); }
  .fab svg { width: 22px; height: 22px; stroke-width: 2.25; }
  @media (min-width: 700px) { .fab-slot { display: none; } }

  .fan-menu { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
  @media (min-width: 700px) { .fan-menu { display: none; } }
  .fan-backdrop {
    position: absolute; inset: 0;
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    transition: opacity 0.25s ease;
    border: none; padding: 0; margin: 0; cursor: grab; opacity: 0; pointer-events: none;
    touch-action: none;
  }
  .fan-backdrop:active { cursor: grabbing; }
  .fan-item {
    /* anchored on the FAB's own visual centre (bottom: 20px + half its 64px
       height = 52px) so the collapsed/closed state sits exactly on the FAB,
       not some other point nearby. The box itself must be exactly 64px tall
       for that bottom/margin-bottom trick (and the transform's centre
       origin) to land on the FAB's true centre — so the label is
       positioned absolutely below rather than stacked in flex flow, which
       would otherwise inflate the box and drag the anchor upward. */
    position: absolute; z-index: 11; left: 50%; bottom: calc(var(--tab-bottom) + 32px);
    width: 64px; height: 64px; margin-left: -32px; margin-bottom: -32px;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; font-family: var(--sans);
    touch-action: none; opacity: 0; pointer-events: none; -webkit-tap-highlight-color: transparent;
    transform: translate(0, 0) scale(0.3);
    transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
  }
  .fan-icon {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--panel); border: none;
    display: flex; align-items: center; justify-content: center;
    color: var(--text); flex: none;
    box-shadow: inset 0 0 0 1px var(--border), 0 8px 24px rgba(0, 0, 0, 0.4);
  }
  .fan-icon svg { width: 26px; height: 26px; }
  .fan-label {
    position: absolute; top: 100%; left: 50%; margin-top: 7px;
    transform: translateX(-50%);
    font-size: 11.5px; font-weight: 500; color: var(--text); letter-spacing: 0.01em; white-space: nowrap;
  }
  .fan-more {
    /* which shortcuts are queued off-screen in the single row — shown above
       the arc when there are more sections than fit */
    position: absolute; z-index: 11; left: 0; right: 0; bottom: calc(var(--tab-bottom) + 250px);
    text-align: center; font-size: 12px; color: var(--muted);
    opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
  }
  .fan-edit {
    /* centred just above the tab bar, below the arc */
    position: absolute; z-index: 11; bottom: calc(var(--tab-bottom) + 80px); left: 50%; transform: translateX(-50%);
    width: 34px; height: 34px; border-radius: 50%;
    background: none; border: none; padding: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--muted); opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
  }
  .fan-edit svg { width: 16px; height: 16px; }

  /* ---- fan editor — a bottom sheet for choosing which sections show in
     the fan and in what order (opened via the edit icon above). A single
     flat drag-to-reorder list plus an on/off switch per row; row
     assignment back into the 3 curved rows stays automatic (fanRowCounts)
     so this only ever curates membership + order, never row layout. */
  .fan-editor { position: fixed; inset: 0; z-index: 20; }
  .fan-editor[hidden] { display: none; }
  @media (min-width: 700px) { .fan-editor { display: none; } }
  .fan-editor-backdrop {
    position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    border: none; padding: 0; margin: 0;
  }
  .fan-editor-sheet {
    position: absolute; left: 0; right: 0; bottom: 0; max-height: 78vh;
    display: flex; flex-direction: column;
    background: var(--panel); border-top: 1px solid var(--border-hi);
    border-radius: 16px 16px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.4);
  }
  .fan-editor-head h3 { margin: 0 0 4px; font-family: var(--sans); font-size: 17px; font-weight: 600; color: var(--text); }
  .fan-editor-hint { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); }
  .fan-editor-list { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; }
  .fan-editor-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); touch-action: pan-y; }
  .fan-editor-row:last-child { border-bottom: none; }
  .fan-editor-row .grip { cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; color: var(--muted); flex: none; width: 24px; display: inline-flex; align-items: center; justify-content: center; }
  .fan-editor-row .grip svg { width: 16px; height: 16px; }
  .fan-editor-row .grip:active { cursor: grabbing; }
  .fan-editor-icon { width: 30px; height: 30px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--border-hi); display: flex; align-items: center; justify-content: center; color: var(--accent); flex: none; }
  .fan-editor-icon svg { width: 16px; height: 16px; }
  .fan-editor-label { flex: 1; font-size: 14px; color: var(--text); }
  .fan-editor-row.off .fan-editor-label, .fan-editor-row.off .fan-editor-icon { opacity: 0.45; }
  .fan-editor-row.dragging { position: fixed; z-index: 30; pointer-events: none; background: var(--panel-2); border: 1px solid var(--accent-dim); border-radius: 8px; padding: 9px 10px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5); }
  .fan-editor-drop-placeholder { border: 1.5px dashed var(--accent-dim); border-radius: 6px; margin: 4px 0; background: color-mix(in srgb, var(--accent) 6%, transparent); }
  .fan-editor-actions { display: flex; gap: 10px; margin-top: 14px; }
  .fan-editor-actions .btn { flex: 1; }
  .switch { position: relative; display: inline-block; width: 42px; height: 25px; flex: none; }
  .switch input { opacity: 0; width: 0; height: 0; position: absolute; }
  .switch .slider { position: absolute; inset: 0; background: var(--border-hi); border-radius: 999px; transition: background 0.15s ease; cursor: pointer; }
  .switch .slider::before { content: ""; position: absolute; width: 19px; height: 19px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform 0.15s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
  .switch input:checked + .slider { background: var(--accent); }
  .switch input:checked + .slider::before { transform: translateX(17px); }

  /* ---- sheet quick-access menu — the alternative to the fan (Settings →
     Tab bar → Quick menu). The centre button pulls up a sheet with every
     overflow section as a grid; same order/hidden list as the fan, same
     editor. Only relevant on the phone layout (<700px). */
  .sheet-menu { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
  .sheet-menu.open { pointer-events: auto; }
  @media (min-width: 700px) { .sheet-menu { display: none; } }
  .sheet-backdrop {
    position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 65%, transparent);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    border: none; padding: 0; margin: 0; opacity: 0; transition: opacity 0.25s ease;
  }
  .sheet-menu.open .sheet-backdrop { opacity: 1; }
  .sheet-panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: var(--panel); border-radius: 28px 28px 0 0;
    padding: 10px 18px calc(28px + env(safe-area-inset-bottom));
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 var(--border);
    transform: translateY(105%); transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .sheet-menu.open .sheet-panel { transform: translateY(0); }
  .sheet-grip { width: 40px; height: 5px; border-radius: 3px; background: var(--border-hi); margin: 0 auto 16px; }
  .sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
  .sheet-head h3 { margin: 0; font-size: 17px; font-weight: 600; color: var(--text); }
  .sheet-head button { background: none; border: none; padding: 6px 0; min-height: 0; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--accent); box-shadow: none; }
  .sheet-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .sheet-item {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 14px 4px 10px; border-radius: 16px; background: var(--panel-2);
    color: var(--text); text-decoration: none; min-height: 72px;
  }
  .sheet-item:active { background: var(--border); }
  .sheet-item svg { width: 24px; height: 24px; }
  .sheet-item span { font-size: 12px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .sheet-empty { text-align: center; color: var(--muted); font-size: 13px; padding: 10px 0 4px; }

  /* the main button */
  .fab-icon { display: flex; transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease; }
  .fab-icon svg { width: 22px; height: 22px; }
  main { max-width: 1040px; margin: 0 auto; padding: 22px 14px calc(var(--tab-bottom) + 88px); }
  @media (min-width: 700px) { main { padding: 28px 18px 70px; } }

  /* Installed as an app (2026-09-12, Ethan): the home-screen app drops the
     top bar and the greeting line. The phone already frames the app, so the
     bar was spending a strip of a small screen on chrome. Nothing is lost —
     theme and log out are both in Settings, and search is offered in the +
     menu (layout.js). Deliberately display-mode and NOT a width query: in
     Safari the bar stays, so there is always a way back to all of it. */
  @media (display-mode: standalone) {
    /* The header is EMPTIED rather than removed, on purpose. iOS 26 applies a
       scroll-edge effect in standalone: whatever occupies the top strip gets
       blurred as content scrolls under it, and there is no documented way to
       switch it off. display:none left the date sitting in that strip, so the
       date blurred. A pinned, opaque, safe-area-tall strip gives the effect a
       flat surface to act on instead — content slides cleanly behind it, the
       way it does in a native app. Its contents are hidden, not the box. */
    header {
      height: env(safe-area-inset-top, 0px);
      min-height: 0; padding: 0; gap: 0;
      border-bottom: none;
      background: var(--bg);
      backdrop-filter: none; -webkit-backdrop-filter: none;
      overflow: hidden;
    }
    /* !important on purpose: header .tools, header .brand .logo and several
       responsive rules all set display with higher specificity than any
       child selector here, so a plain rule silently loses to them and the
       logo keeps showing through the strip. This is an override of a whole
       stack of rules, not a specificity skirmish worth winning.
       NB: no backticks in comments in this file — it is one big template
       literal, and a backtick ends the string. That is what broke the
       build at 14:35 on 2026-09-12, and the same trap caught another
       session earlier the same day. */
    header * { display: none !important; }
    main { padding-top: 26px; }
    .home-greeting h1 { display: none; }
    .home-greeting { margin-top: 0; }
  }
  /* Calm & minimal (2026-09-03): soft borderless cards, sans headings, no
     uppercase/mono labels. The old "$ prompt" in h1 is hidden rather than
     removed from every section's markup. */
  .card {
    background: var(--panel); border: none; border-radius: 20px;
    padding: 18px; margin-bottom: 12px;
    position: relative;
  }
  @media (min-width: 640px) { .card { padding: 20px; margin-bottom: 14px; } }
  .card.terminal { border-top: none; }
  h1 {
    font-family: var(--sans); font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1;
    margin: 6px 0 20px; color: var(--text); overflow-wrap: anywhere;
  }
  @media (min-width: 640px) { h1 { font-size: 34px; margin-bottom: 24px; } }
  h1 .prompt { display: none; }
  h1 .glow-badge { font-size: 12px; letter-spacing: 0; vertical-align: middle; position: relative; top: -4px; }
  h2 {
    font-family: var(--sans); font-size: 12px; font-weight: 500;
    margin: 0 0 12px; color: var(--muted); text-transform: none; letter-spacing: 0.01em;
  }
  .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
  .section-head h2 { margin: 0; }
  table { width: 100%; border-collapse: collapse; font-size: 14px; }
  th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); }
  th {
    font-family: var(--sans); font-weight: 500; color: var(--muted);
    font-size: 11.5px; text-transform: none; letter-spacing: 0.01em;
  }
  tr:hover td { background: color-mix(in srgb, var(--accent) 4%, transparent); }
  .muted { color: var(--muted); font-size: 13px; }
  .mono { font-family: var(--mono); }
  .num { font-family: var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
  .amount { font-variant-numeric: tabular-nums; text-align: right; font-family: var(--sans); letter-spacing: -0.01em; }
  label { display: block; font-family: var(--sans); font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0.01em; color: var(--muted); margin: 0 0 6px; }
  .field { margin-bottom: 16px; }
  .field .hint { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
  input, select, textarea {
    width: 100%; padding: 12px 14px; border: 1px solid transparent; border-radius: 14px;
    font-size: 16px; background: var(--panel-2); color: var(--text);
    font-family: var(--sans); margin: 0;
  }
  input[type="date"] { min-height: 46px; -webkit-appearance: none; appearance: none; }
  textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
  input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  }
  input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.7; }
  button, .btn {
    background: var(--accent); color: var(--on-accent); border: none; border-radius: 22px;
    padding: 11px 18px; font-size: 14.5px; font-family: var(--sans); font-weight: 600;
    cursor: pointer; transition: box-shadow 0.15s, transform 0.05s;
    text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; line-height: 1;
  }
  button:hover, .btn:hover { filter: brightness(1.08); }
  button:active, .btn:active { transform: translateY(1px); }
  button.secondary, .btn.secondary {
    background: var(--panel-2); color: var(--text); border: none;
  }
  button.secondary:hover, .btn.secondary:hover { filter: none; background: var(--border); color: var(--text); }
  button.danger, .btn.danger { background: transparent; color: var(--danger); border: 1px solid var(--danger-dim); }
  button.danger:hover, .btn.danger:hover { filter: none; border-color: var(--danger); }
  button.small, .btn.small { padding: 7px 14px; font-size: 13px; min-height: 36px; border-radius: 18px; }
  .actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
  .actions .spacer { flex: 1; }
  .row-actions { white-space: nowrap; }
  .row-actions button { padding: 4px 10px; font-size: 12px; margin-left: 4px; }
  .error {
    color: var(--danger); font-size: 13.5px; margin-bottom: 12px;
    font-family: var(--sans); font-weight: 500; padding: 12px 14px; background: color-mix(in srgb, var(--danger) 10%, transparent);
    border: none; border-radius: 14px;
  }
  .notice {
    color: var(--accent); font-size: 13.5px; margin-bottom: 12px;
    font-family: var(--sans); font-weight: 500; padding: 12px 14px; background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: none; border-radius: 14px;
  }
  form.inline { display: inline; }
  .empty { text-align: center; padding: 30px 0; color: var(--muted); font-family: var(--sans); font-size: 13.5px; }
  code, pre { font-family: var(--mono); }
  .back { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--muted); text-decoration: none; display: inline-block; margin-bottom: 10px; }
  .back:hover { color: var(--accent); }
  .breadcrumbs { font-family: var(--sans); font-size: 13px; font-weight: 500; margin-bottom: 16px; color: var(--muted); overflow-wrap: anywhere; }
  .breadcrumbs a { color: var(--muted); text-decoration: none; }
  .breadcrumbs a:hover { color: var(--accent); }
  .breadcrumbs .sep { margin: 0 6px; opacity: 0.5; }
  .file-list { list-style: none; margin: 0; padding: 0; }
  .file-list li {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 4px; border-bottom: 1px solid var(--border);
    font-family: var(--sans); font-size: 15px; font-weight: 500;
  }
  .file-list li:last-child { border-bottom: none; }
  .file-list a { color: var(--text); text-decoration: none; flex: 1; overflow-wrap: anywhere; }
  .file-list a:hover { color: var(--accent); }
  .file-list .icon { color: var(--muted); width: 18px; display: inline-block; text-align: center; flex: none; }
  .file-list .type-dir .icon { color: var(--accent); }
  .file-list .size { color: var(--muted); font-size: 12px; flex: none; }
  .md-content { font-family: var(--sans); font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
  .md-content h1, .md-content h2, .md-content h3 { font-family: var(--sans); color: var(--text); text-transform: none; letter-spacing: normal; }
  .md-content h1 { font-size: 22px; margin: 20px 0 10px; }
  .md-content h2 { font-size: 18px; margin: 18px 0 8px; }
  .md-content h3 { font-size: 15px; margin: 16px 0 6px; }
  .md-content code { background: var(--panel-2); padding: 2px 5px; border-radius: 4px; font-size: 0.88em; color: var(--accent); }
  .md-content pre { background: var(--panel-2); padding: 12px 14px; border-radius: 6px; overflow-x: auto; border: 1px solid var(--border); }
  .md-content pre code { background: none; padding: 0; color: var(--text); }
  .md-content a { color: var(--accent); }
  .md-content ul, .md-content ol { padding-left: 22px; }
  .md-content blockquote { border-left: 3px solid var(--accent-dim); margin: 10px 0; padding: 2px 14px; color: var(--muted); }
  .md-content .table-wrap { overflow-x: auto; margin: 10px 0; -webkit-overflow-scrolling: touch; }
  .md-content table { margin: 0; min-width: 100%; }
  .md-content img { max-width: 100%; }
  .plain-file { white-space: pre-wrap; word-break: break-word; font-size: 13px; color: var(--text); max-height: 70vh; overflow-y: auto; margin: 0; }
  .commit-log { list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: 12px; }
  .commit-log li { padding: 8px 0; border-bottom: 1px solid var(--border); color: var(--muted); overflow-wrap: anywhere; }
  .commit-log li:last-child { border-bottom: none; }
  .commit-log .sha { color: var(--accent); margin-right: 8px; }
  .commit-log .msg { color: var(--text); }
  .glow-badge {
    display: inline-block; font-family: var(--sans); font-size: 12px; font-weight: 500;
    color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 999px;
    padding: 3px 10px; margin-left: 10px; vertical-align: middle;
  }
  /* ---- home dashboard (2026-09-03 calm & minimal): a greeting, then soft
     borderless tiles with one big number each; the first tile spans the
     full width. Sans throughout — the mono/uppercase treatment is gone
     here (the rest of the site follows in a later step). */
  .home-greeting { margin: 2px 0 20px; }
  .home-date { font-size: 13px; font-weight: 500; color: var(--muted); }
  .home-greeting h1 { font-family: var(--sans); font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin: 4px 0 0; }
  @media (min-width: 640px) { .home-greeting h1 { font-size: 34px; } }
  .home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  @media (min-width: 900px) { .home-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
  .tile { background: var(--panel); border: none; border-radius: 20px; padding: 18px; text-decoration: none; color: var(--text); display: flex; flex-direction: column; gap: 6px; min-height: 128px; transition: background 0.15s, transform 0.1s; }
  .tile.wide { grid-column: 1 / -1; }
  .tile:hover { background: var(--panel-2); }
  .tile:active { transform: scale(0.985); }
  .tile .tile-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0.01em; }
  .tile .tile-head svg { width: 16px; height: 16px; }
  .tile .tile-stat { font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; margin-top: 6px; overflow-wrap: anywhere; }
  .tile.wide .tile-stat { font-size: 34px; }
  .tile .tile-sub { font-size: 12.5px; color: var(--muted); line-height: 1.35; flex: 1; }
  .tile.soon { opacity: 0.55; }
  /* ---- home groups (2026-09-07): tiles arranged by life area instead of
     one flat grid — a label, then up to two tiles per row. .tile itself is
     unchanged; these are the group wrapper plus the custom widget bodies
     a few tiles now return instead of the plain stat/sub pair (count-trio,
     lens grid, month dots, budget status, the system summary row). */
  .home-group { margin-bottom: 18px; break-inside: avoid; -webkit-column-break-inside: avoid; }
  .home-group:last-child { margin-bottom: 0; }
  .home-group-label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
  .home-tile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  /* 2026-09-07: on a phone, .home-groups is just a plain block — each group
     stacks full-width, same as always. From 900px the groups flow into a
     two-column masonry (CSS multi-column, not grid — groups vary in height
     so a balanced two-column read matters more than strict row alignment).
     break-inside: avoid on .home-group keeps one group's cards from being
     split across the column break. This is what stops a "wide" tile
     (Budget, Trains) or a two-tile group (Vehicles+Lenses) from stretching
     across the full desktop content width with mostly empty card — each
     group is now only as wide as one masonry column (~half that width). */
  @media (min-width: 900px) {
    .home-groups { column-count: 2; column-gap: 20px; }
  }
  .home-count-trio { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; flex: 1; }
  .home-count-line { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: var(--panel-2); border-radius: 12px; }
  .home-count-label { font-size: 12.5px; font-weight: 500; color: var(--text); }
  .home-count-figure { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ok); }
  .home-count-figure.warn { color: var(--warn); }
  .home-count-figure.danger { color: var(--danger); }
  .home-pair { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
  .home-pair-num { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
  /* 2026-09-07 (later still): was repeat(10, 1fr) — 3 rows for the full
     30-square reference, which at a typical count (17, say) made this
     tile noticeably taller than its Household group-mate (Vehicles) next
     to it in the desktop masonry column. Briefly tried a single
     proportional bar instead, but Ethan wanted the squares kept — just
     tidier. 15 columns instead of 10: the same 30-square, fill-to-your-
     count-then-hollow reference grid, just two rows instead of three. */
  .home-lens-grid { display: grid; grid-template-columns: repeat(15, 1fr); gap: 2px; margin-top: 10px; }
  .home-lens-grid i { height: 9px; border-radius: 2px; background: var(--warn); display: block; }
  .home-lens-grid.full i { background: var(--ok); }
  /* was class="empty" — collided with the sitewide .empty placeholder-text
     class (padding: 30px 0), which forced these squares to ~62px tall
     despite the explicit height: 9px above (box-sizing: border-box can't
     shrink a box below its own padding). Renamed to .hollow, scoped to this
     grid, so it can't collide with an unrelated global class again. */
  .home-lens-grid i.hollow { background: transparent; border: 1px solid var(--border-hi); }
  /* ---- Trains home tile (2026-09-07): time and platform side by side,
     picked from four mocked concepts — Ethan wanted platform and delay
     status readable without opening /trains. The small tag carries
     on-time/delayed/cancelled; the sub line adds the scheduled time and/or
     reason only when there's something to say. */
  .home-train-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
  .home-train-time { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
  .home-train-time.warn { color: var(--warn); }
  .home-train-time.danger { color: var(--danger); }
  .home-train-plat-col { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
  .home-train-plat {
    font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--text);
    background: var(--panel-2); border: 1px solid var(--border-hi); border-radius: 10px;
    padding: 5px 10px; min-width: 40px; text-align: center;
  }
  .home-train-was { font-size: 11px; color: var(--muted); font-weight: 500; }
  .home-train-tag {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  }
  .home-train-tag.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, transparent); }
  .home-train-tag.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }
  .home-train-tag.danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 16%, transparent); }
  .home-train-sub { font-size: 12.5px; color: var(--muted); margin-top: 8px; line-height: 1.4; }
  .home-month-dots { display: flex; gap: 8px; margin-top: 12px; }
  .home-month-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--border-hi); }
  .home-month-dot.done { background: var(--ok); }
  .home-month-dot.missing { background: var(--danger); }
  .home-month-dot.notyet { background: var(--border-hi); }
  .home-budget-status { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
  .home-budget-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
  .home-budget-dot.warn { background: var(--warn); }
  .home-budget-dot.danger { background: var(--danger); }
  .home-sys-row { display: flex; align-items: center; gap: 10px; background: var(--panel); border-radius: 20px; padding: 16px 18px; text-decoration: none; color: var(--text); }
  .home-sys-row:hover { background: var(--panel-2); }
  .home-sys-icon { width: 32px; height: 32px; border-radius: 9px; background: var(--panel-2); display: flex; align-items: center; justify-content: center; color: var(--muted); flex: none; }
  .home-sys-icon svg { width: 16px; height: 16px; }
  .home-sys-title { font-size: 13.5px; font-weight: 600; }
  .home-sys-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
  .home-sys-status { margin-left: auto; font-size: 12px; color: var(--warn); font-weight: 600; white-space: nowrap; }
  .home-sys-status.ok { color: var(--ok); }
  .home-sys-status.danger { color: var(--danger); }
  /* ---- home, "Today first" (2026-09-10): the layout Ethan picked from the
     Claude Design mockups. One Today card (Habits, Budget, Trains), then
     grouped list rows — icon chip, name, one line, figure on the right.
     .home-group / .home-groups above still do the spacing and the desktop
     two-column masonry. Black shadows on purpose: soft depth in light mode,
     invisible on the dark background. */
  .home-card { background: var(--panel); border-radius: 22px; overflow: hidden; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 8px 24px -12px rgba(0, 0, 0, 0.14); }
  .home-groups .home-group { margin-bottom: 24px; }
  .home-list-label { font-size: 13px; font-weight: 650; color: var(--text); margin: 0 4px 10px; }
  .home-today { padding: 4px 18px; }
  .home-today-item { display: flex; align-items: center; gap: 14px; padding: 14px 0; text-decoration: none; color: var(--text); }
  .home-today-item + .home-today-item { border-top: 1px solid var(--border); }
  .home-today-item.block { display: block; padding: 16px 0; }
  .home-today-head { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
  .home-today-head svg { width: 14px; height: 14px; }
  .home-today-item.block .home-train-time { font-size: 38px; letter-spacing: -0.035em; }
  .home-today-title { font-size: 15px; font-weight: 600; }
  .home-today-sub { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
  .home-today-figure { font-size: 18px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .home-ring { position: relative; width: 44px; height: 44px; flex: none; }
  .home-ring svg { width: 44px; height: 44px; display: block; transform: rotate(-90deg); }
  .home-ring .track { stroke: var(--panel-2); }
  .home-ring .fill { stroke: var(--accent); }
  .home-ring span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .home-chip { width: 34px; height: 34px; border-radius: 11px; background: var(--panel-2); color: var(--text); display: flex; align-items: center; justify-content: center; flex: none; }
  .home-chip svg { width: 17px; height: 17px; }
  .home-chip.big { width: 44px; height: 44px; border-radius: 22px; }
  .home-chip.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
  .home-chip.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
  .home-chip.danger { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
  .home-chev { color: var(--border-hi); display: flex; flex: none; }
  .home-chev svg { width: 16px; height: 16px; }

  /* Home — Calendar's today timeline (2026-09-12). All-day entries are the
     quiet line at the top; timed ones are rows on a rail, the running one
     marked with a filled dot. */
  .home-agenda { display: flex; flex-direction: column; margin-top: 12px; }
  .home-agenda-allday { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); padding-bottom: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .home-agenda-allday span { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border-hi); border-radius: 999px; padding: 2px 8px; flex: none; }
  .home-agenda-row { display: flex; align-items: flex-start; gap: 12px; }
  .home-agenda-time { font-size: 12.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; width: 42px; flex: none; padding-top: 1px; }
  .home-agenda-rail { display: flex; flex-direction: column; align-items: center; align-self: stretch; flex: none; padding-top: 4px; }
  .home-agenda-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--border-hi); flex: none; }
  .home-agenda-dot.now { width: 11px; height: 11px; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 16%, transparent); }
  .home-agenda-line { width: 1px; flex: 1; background: var(--border); margin-top: 4px; }
  .home-agenda-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding-bottom: 16px; }
  .home-agenda-main.last { padding-bottom: 0; }
  .home-agenda-title { font-size: 15px; font-weight: 600; }
  .home-agenda-sub { font-size: 12.5px; color: var(--muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Home — the quiet strip (2026-09-12): every section that had nothing to
     say today, as an icon and a short label. */
  .home-chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 6px; padding: 18px 14px; }
  .home-chip-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--text); }
  .home-chip-cell:hover .home-chip { background: var(--border-hi); }
  .home-chip-label { font-size: 10.5px; color: var(--muted); text-align: center; line-height: 1.2; min-height: 13px; }
  @media (max-width: 359px) { .home-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .home-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .home-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-height: 60px; text-decoration: none; color: var(--text); }
  .home-row + .home-row::before { content: ""; position: absolute; top: 0; left: 62px; right: 0; height: 1px; background: var(--border); }
  .home-row:hover { background: var(--panel-2); }
  .home-row-title { font-size: 15px; font-weight: 550; }
  .home-row-sub { font-size: 12.5px; color: var(--muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .home-row-value { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .home-row-value.ok { color: var(--ok); }
  .home-row-value.warn, .home-row-value.danger { font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
  .home-row-value.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }
  .home-row-value.danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
  .home-lens-grid.mini { width: 120px; margin-top: 6px; }
  .home-lens-grid.mini i { height: 5px; }
  .home-row-value .home-month-dots { margin-top: 0; }
  .pill { display: inline-block; font-family: var(--sans); font-size: 11.5px; font-weight: 500; border-radius: 999px; padding: 3px 9px; border: none; background: var(--panel-2); color: var(--muted); }
  .pill.accent { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
  .pill.warn { color: #f5b95a; background: color-mix(in srgb, #f5b95a 14%, transparent); }
  .pill.danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
  .list { display: flex; flex-direction: column; }
  .list-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; }
  .list-row:last-child { border-bottom: none; }
  .list-row:hover .row-title { color: var(--accent); }
  .row-title { font-size: 15px; font-weight: 500; color: var(--text); }
  .row-sub { font-size: 12px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
  .row-right { text-align: right; white-space: nowrap; display: flex; align-items: center; gap: 10px; }
  .pencil { color: var(--muted); display: inline-flex; padding: 7px; border: none; background: var(--panel-2); border-radius: 10px; flex: none; }
  .pencil svg { width: 15px; height: 15px; }
  button svg, .btn svg { width: 16px; height: 16px; flex: none; }
  .btn, button { white-space: nowrap; }
  .list-row:hover .pencil { color: var(--accent); }
  /* a segmented control, shared by sections (Trains routes, Roadmap columns, Settings) */
  .seg { display: inline-flex; background: var(--panel-2); border-radius: 12px; padding: 3px; gap: 3px; margin: 4px 0; border: none; overflow: hidden; }
  .seg.full { display: flex; width: 100%; }
  .seg.full .seg-opt, .seg.full a { flex: 1; min-width: 0; }
  .seg.full a { padding: 9px 6px; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
  .seg-opt { position: relative; }
  .seg-opt input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; inset: 0; }
  .seg-opt span, .seg a { display: block; text-align: center; padding: 9px 14px; border-radius: 9px; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; }
  .seg-opt:not(:first-child) span { border-left: none; }
  .seg-opt input:checked + span, .seg a.active { background: var(--text); color: var(--bg); }
  kbd { font-family: var(--mono); font-size: 11px; border: 1px solid var(--border-hi); border-radius: 4px; padding: 1px 5px; color: var(--muted); }