/* Generated by scripts/split_dashboard_css.mjs from dashboard.full.css. */
    :root {
      color-scheme: dark;
      --bg: #02070b;
      --panel: rgba(10, 24, 32, 0.86);
      --panel2: rgba(11, 28, 38, 0.94);
      --panel3: rgba(4, 12, 18, 0.72);
      --text: #eef4f7;
      --muted: #93b4c2;
      --faint: #5f7d8a;
      --line: rgba(93, 219, 255, 0.16);
      --line-strong: rgba(93, 219, 255, 0.34);
      --accent: #66e7ff;
      --accent2: #1ea7ff;
      --gold: #f5c542;
      --bad: #ff6b6b;
      --good: #5ce08a;
      --warn: #f5c542;
      /* Typography contract: all normal UI text uses one family and shared scale.
         Monospace is reserved for technical readouts, code, and status telemetry. */
      --font-ui: "Segoe UI", Inter, Arial, sans-serif;
      --font-mono: "Cascadia Code", "Consolas", monospace;
      --type-page-title: 1.8rem;
      --type-section-title: 1.02rem;
      --type-body: 1rem;
      --type-secondary: 0.86rem;
      --type-meta: 0.78rem;
      --type-label: 0.68rem;
      --layer-dropdown: 30;
      --layer-sticky: 40;
      --layer-overlay: 6000;
      --layer-modal: 7000;
      --layer-popover: 7010;
      --layer-toast: 8000;
      --radius: 10px;
      --radius-sm: 8px;
      /* Slim icon rail (was a 236px labelled sidebar). Kept as an in-flow grid
         column -- not a fixed overlay -- so the chat page's fragile 100dvh mobile
         layout keeps resolving against the app-shell grid exactly as before. */
      --sidebar-w: 66px;
    }
    * { box-sizing: border-box; }
    html { font-size: 15px; }
    body {
      margin: 0;
      font-family: var(--font-ui);
      font-size: var(--type-body);
      background:
        radial-gradient(900px 520px at 18% -10%, rgba(32, 103, 123, 0.22), transparent 62%),
        linear-gradient(135deg, #03090e 0%, #06131b 46%, #02070b 100%);
      color: var(--text);
      min-height: 100vh;
      line-height: 1.45;
      overflow-wrap: anywhere;
    }
    .jarvis-reconnect {
      position: fixed; right: 14px; bottom: 14px; z-index: var(--layer-toast);
      padding: 8px 12px; border-radius: var(--radius-sm); background: #10232d;
      color: var(--text); font-size: var(--type-secondary); box-shadow: 0 4px 8px rgba(0,0,0,.32);
      opacity: 0; transform: translateY(8px); pointer-events: none;
      transition: opacity .18s ease-out, transform .18s ease-out;
    }
    html[data-jarvis-connection="reconnecting"] .jarvis-reconnect { opacity: 1; transform: none; }
    .content.stack > section:nth-of-type(n + 3),
    .content.stack > article:nth-of-type(n + 3),
    .content.stack > .card:nth-of-type(n + 4) {
      content-visibility: auto;
      contain-intrinsic-size: auto 320px;
    }
    .jarvis-skeleton {
      color: var(--muted);
      background: linear-gradient(100deg, rgba(102,231,255,.05) 20%, rgba(102,231,255,.12) 40%, rgba(102,231,255,.05) 60%);
      background-size: 220% 100%;
      animation: jarvis-skeleton 1.4s ease-in-out infinite;
    }
    @keyframes jarvis-skeleton { to { background-position-x: -220%; } }
    @media (prefers-reduced-motion: reduce) { .jarvis-skeleton { animation: none; }
}
    .jarvis-page-transition {
      position: fixed;
      inset: 0;
      z-index: var(--layer-toast);
      display: grid;
      place-items: center;
      pointer-events: none;
      opacity: 0;
      transform: translateX(100%);
      background:
        radial-gradient(circle at 68% 50%, rgba(30,167,255,.22), transparent 28%),
        linear-gradient(90deg, rgba(2,7,11,.05), rgba(2,7,11,.88) 42%, rgba(5,24,36,.96));
      transition: opacity .18s ease, transform .62s cubic-bezier(.16, .78, .22, 1);
    }
    .jarvis-page-transition.active {
      opacity: 1;
      transform: translateX(0);
    }
    .jarvis-page-transition.settle {
      opacity: 0;
      transform: translateX(-12%);
      transition: opacity .32s ease, transform .34s ease;
    }
    .jarvis-transition-scan {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, transparent 0 36%, rgba(102,231,255,.35) 48%, rgba(102,231,255,.08) 56%, transparent 72%),
        linear-gradient(rgba(102,231,255,.05) 1px, transparent 1px);
      background-size: auto, 100% 28px;
      transform: translateX(-34%);
      animation: jarvis-nav-scan .72s ease-out both;
    }
    .jarvis-transition-core {
      display: grid;
      place-items: center;
      gap: 12px;
      padding: 22px 28px;
      border: 1px solid rgba(102,231,255,.26);
      border-radius: 18px;
      color: var(--accent);
      background: rgba(3,14,21,.62);
      box-shadow: 0 0 42px rgba(30,167,255,.2), inset 0 0 28px rgba(102,231,255,.06);
      transform: translateY(10px) scale(.96);
      animation: jarvis-nav-core .62s ease-out both;
    }
    .jarvis-transition-core .brand-ring-svg {
      width: 74px;
      height: 74px;
      filter: drop-shadow(0 0 18px rgba(102,231,255,.46));
    }
    .jarvis-transition-core span {
      font: 900 .72rem "Cascadia Code", Consolas, monospace;
      letter-spacing: .18em;
      text-transform: uppercase;
    }
    @keyframes jarvis-nav-scan {
      from { transform: translateX(-42%); opacity: .25; }
      to { transform: translateX(26%); opacity: 1; }
    }
    @keyframes jarvis-nav-core {
      from { transform: translateY(14px) scale(.92); opacity: 0; }
      to { transform: translateY(0) scale(1); opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      .jarvis-page-transition { display: none; }
}
    h1, h2, h3 { font-family: var(--font-ui); font-weight: 700; line-height: 1.25; letter-spacing: 0; }
    h1 { font-size: var(--type-page-title); margin: 0 0 4px; }
    h2 { font-size: var(--type-section-title); margin: 0 0 10px; }
    p { margin: 0 0 8px; }
    ul { margin: 0; padding-left: 1.2em; }
    a { color: var(--accent); text-decoration: none; }
    a:hover { text-decoration: underline; }
    .brand {
      display: flex;
      align-items: center;
      gap: 11px;
      color: var(--text);
      text-decoration: none;
      min-height: 46px;
    }
    /* Brand logo: animated arc-reactor ring (inline SVG from shell.logo_ring_svg,
       same construction as the Talk page centerpiece). Replaced the old PNG +
       conic-gradient sweep wholesale.
       Deliberately NOT gated behind prefers-reduced-motion: a prior logo animation
       was reported as "not moving" on a real Chrome install, traced to Windows'
       OS-level "show animations" toggle being off (usually flipped for battery, not
       motion sensitivity) -- which silently killed a feature the user explicitly
       asked for. A slow, low-contrast rotation confined to a small circle is not
       the parallax/zoom category that gate exists for. If you're tempted to add
       the gate, talk to the user first. */
    .brand-ring-svg {
      width: 42px;
      height: 42px;
      display: block;
      flex: none;
      justify-self: center;
      overflow: visible;
      filter: drop-shadow(0 0 8px rgba(38, 124, 255, 0.5));
    }
    .brand-ring-svg.brand-ring-lg {
      width: 96px;
      height: 96px;
      margin: 0 auto 6px;
    }
    .brand-ring-svg circle {
      fill: none;
      stroke: var(--accent);
      transform-box: view-box;
      transform-origin: 50% 50%;
    }
    .brand-ring-svg .lr-core-fill { fill: #020711; stroke: rgba(127, 190, 255, 0.28); stroke-width: 1; }
    .brand-ring-svg .lr-blue-track { stroke: rgba(32, 98, 196, 0.36); stroke-width: 8; }
    .brand-ring-svg .lr-blue-ring {
      stroke: #2d8cff;
      stroke-width: 6;
      stroke-linecap: round;
      stroke-dashoffset: 0;
      animation: blue-ring-idle 14s linear infinite;
      filter: drop-shadow(0 0 4px rgba(45, 140, 255, 0.92));
    }
    .brand-ring-svg .lr-wordmark {
      fill: #f3f8ff;
      font-family: "Cascadia Code", "Consolas", monospace;
      font-size: 7px;
      font-weight: 700;
      letter-spacing: 1px;
    }
    .brand-ring-svg g { transform-box: view-box; transform-origin: 50% 50%; }
    /* Idle brand motion is deliberately calm; voice-state animations below remain responsive. */
    .brand-spin-a { animation: hud-spin 22s linear infinite; }
    .brand-spin-b { animation: hud-spin-rev 15s linear infinite; }
    .brand-spin-c { animation: hud-spin 10s linear infinite; }
    .brand-ring-svg .lr-broken { stroke-width: 2; opacity: 0.6; }
    .brand-ring-svg .lr-seg { stroke-width: 5; opacity: 0.5; }
    .brand-ring-svg .lr-arc { stroke-width: 2.5; stroke-linecap: round; opacity: 0.9; }
    .brand-ring-svg .lr-inner { stroke-width: 1.6; opacity: 0.9; }
    .brand-ring-svg .lr-dot {
      fill: var(--accent);
      stroke: none;
      animation: hud-pulse-core 2.4s ease-in-out infinite;
    }
    .brand-title {
      font-size: 0.92rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-weight: 800;
      text-shadow: 0 0 10px rgba(102, 231, 255, 0.4);
    }
    .brand-sub {
      font-size: 0.72rem;
      color: var(--faint);
      letter-spacing: 0.04em;
      margin-top: 1px;
    }

    /* App shell: persistent sidebar + content */
    .app-shell {
      display: grid;
      grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
      min-height: 100vh;
      min-height: 100dvh;
      align-items: stretch;
    }
    /* Let page sections shrink to their viewport instead of an implicit grid
       track taking a child's min-content width (notably Fuel on 320px phones). */
    .content.stack { grid-template-columns: minmax(0, 1fr); }
    /* ---- Corner rail: slim, icon-only site-wide nav (replaced the labelled
       sidebar). Stays an in-flow grid child so the app-shell grid + the chat
       page's 100dvh mobile layout keep working unchanged; only the look changed.
       Labels fly out on hover so the page keeps maximum negative space. */
    .corner-nav {
      position: sticky;
      top: 0;
      height: 100vh;
      height: 100dvh;
      overflow: visible;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 16px 8px;
      border-right: 1px solid var(--line);
      /* No backdrop-filter: a blur over a full-height, always-present element on
         every page is expensive; a solid translucent gradient reads the same over
         this dark UI at a fraction of the cost. */
      background: linear-gradient(180deg, rgba(3, 10, 16, 0.94), rgba(3, 10, 16, 0.78));
      z-index: 30;
    }
    .cn-brand {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      width: 100%;
      margin-bottom: 10px;
      flex-shrink: 0;
      text-decoration: none;
    }
    .cn-brand .brand-ring-svg { width: 34px; height: 34px; }
    .cn-brand-name {
      font-family: "Cascadia Code", "Consolas", monospace;
      font-size: 0.52rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      /* offset trailing letter-spacing so the wordmark stays optically centred */
      text-indent: 0.14em;
      color: var(--accent);
    }
    .cn-links { display: flex; flex-direction: column; align-items: center; gap: 4px; }
    /* A short desktop window must not push Search/Admin/Logout below a
       fixed-height rail. Keep the original icon rail, with a compact density. */
    @media (min-width: 901px) and (max-height: 760px) {
      .corner-nav { padding: 8px; gap: 2px; }
      .corner-nav .cn-brand { margin-bottom: 2px; }
      .corner-nav .cn-brand .brand-ring-svg { width: 26px; height: 26px; }
      .corner-nav .cn-links { gap: 2px; }
      .corner-nav .cn-link { height: 36px; flex-shrink: 0; }
}
    @media (min-width: 901px) and (max-height: 520px) {
      .corner-nav { position: relative; height: auto; min-height: 100dvh; }
}
    .cn-link {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 46px;
      height: 46px;
      border-radius: 13px;
      color: var(--muted);
      text-decoration: none;
      border: 1px solid transparent;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .cn-link:hover {
      color: var(--text);
      background: rgba(102, 231, 255, 0.07);
      border-color: var(--line);
    }
    .cn-link.active {
      color: #eafcff;
      background: linear-gradient(135deg, rgba(102, 231, 255, 0.16), rgba(30, 167, 255, 0.08));
      border-color: rgba(102, 231, 255, 0.3);
      box-shadow: 0 0 14px rgba(102, 231, 255, 0.1);
    }
    .cn-search { appearance: none; cursor: pointer; background: transparent; font: inherit; }
    /* The outline around the search icon Tyler kept flagging was neither the
       focus ring nor the base border -- it was a *sticky :hover state*. Chrome
       on Windows holds pseudo-hover on a <button> after a click until the
       cursor physically moves off it, and .cn-link:hover paints the cyan tint
       + visible border that were showing. The other nav items (<a> and
       <summary>) do not have this behaviour. Force every state on .cn-search
       to look identical: no background, no border, no shadow, no outline.
       Icon still gets a subtle color brighten on real hover as feedback. */
    .cn-search,
    .cn-search:hover,
    .cn-search:focus,
    .cn-search:focus-visible,
    .cn-search:active {
      background: transparent;
      border-color: transparent;
      box-shadow: none;
      outline: none;
    }
    .cn-search:hover { color: var(--text); }
    .nav-icon { width: 19px; height: 19px; flex-shrink: 0; opacity: 0.92; }
    /* Hover flyout label -- keeps the rail icon-only while staying discoverable. */
    .cn-label {
      position: absolute;
      left: calc(100% + 12px);
      top: 50%;
      transform: translateY(-50%) translateX(-4px);
      white-space: nowrap;
      padding: 5px 10px;
      border-radius: 8px;
      background: var(--panel2);
      border: 1px solid var(--line);
      color: var(--text);
      font-size: 0.76rem;
      font-weight: 600;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.14s, transform 0.14s;
      z-index: 40;
    }
    .cn-link:hover .cn-label { opacity: 1; transform: translateY(-50%) translateX(0); }
    /* Admin/maintenance surfaces collapse behind a single gear popover. */
    .cn-gear { position: relative; margin-top: auto; }
    .cn-gear ~ .cn-logout { margin-top: 0; }
    .cn-gear summary {
      list-style: none;
      cursor: pointer;
    }
    .cn-gear summary::-webkit-details-marker { display: none; }
    .cn-gear[open] summary {
      color: #eafcff;
      border-color: rgba(102, 231, 255, 0.3);
      background: rgba(102, 231, 255, 0.07);
    }
    .cn-gear-panel {
      position: absolute;
      left: calc(100% + 10px);
      bottom: 0;
      display: flex;
      flex-direction: column;
      gap: 3px;
      padding: 7px;
      border-radius: 13px;
      background: var(--panel2);
      border: 1px solid var(--line);
      box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
      z-index: 40;
    }
    /* Inside the popover, links show their label inline instead of a flyout. */
    .cn-gear-panel .cn-link { width: auto; justify-content: flex-start; gap: 10px; padding: 8px 12px; height: auto; min-height: 38px; }
    .cn-gear-panel .cn-label {
      position: static;
      transform: none;
      opacity: 1;
      padding: 0;
      background: none;
      border: 0;
      pointer-events: auto;
    }
    .cn-logout { margin-top: auto; color: var(--faint); }
    .cn-gear ~ .cn-logout { margin-top: 6px; }
    .cn-logout:hover { color: var(--bad); background: rgba(255, 107, 107, 0.08); border-color: rgba(255, 107, 107, 0.2); }

    .global-search-dialog {
      width: min(680px, calc(100vw - 32px));
      max-height: min(680px, calc(100dvh - 32px));
      margin: auto;
      padding: 0;
      color: var(--text);
      background: var(--panel2);
      border: 1px solid rgba(102, 231, 255, .3);
      border-radius: 14px;
      box-shadow: 0 20px 48px rgba(0, 0, 0, .58);
    }
    .global-search-dialog::backdrop { background: rgba(0, 5, 9, .72); }
    .global-search-panel { display: grid; gap: 12px; margin: 0; padding: 14px; }
    .global-search-input-row { display: flex; align-items: center; gap: 10px; padding: 5px 6px 5px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, .18); }
    .global-search-input-row svg { width: 19px; height: 19px; flex: 0 0 auto; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
    .global-search-input-row input { width: 100%; min-width: 0; padding: 9px 0; color: var(--text); background: transparent; border: 0; outline: 0; font: 500 1rem/1.3 system-ui, sans-serif; text-align: center; }
    .global-search-input-row input::placeholder { color: var(--muted); }
    .global-search-close { min-width: 38px; min-height: 38px; padding: 0; font-size: 1.45rem; line-height: 1; }
    .global-search-empty { margin: 0 4px; color: var(--muted); font-size: .84rem; }
    .global-search-results { display: grid; gap: 5px; max-height: min(510px, 62dvh); overflow: auto; }
    .global-search-result { display: grid; gap: 3px; padding: 11px 12px; color: var(--text); text-decoration: none; border-radius: 9px; }
    .global-search-result:hover, .global-search-result:focus-visible { background: rgba(102, 231, 255, .09); outline: 1px solid rgba(102, 231, 255, .35); }
    .global-search-kind { color: var(--accent); font: 700 .61rem/1.2 "Cascadia Code", Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
    .global-search-result strong { font-size: .92rem; }
    .global-search-detail { color: var(--muted); font-size: .8rem; line-height: 1.35; }

    .content {
      padding: 28px clamp(24px, 3vw, 56px) 52px;
      max-width: 1840px;
      width: 100%;
      margin: 0 auto;
    }
    .content.mission-content {
      max-width: none;
      padding: 16px clamp(16px, 2vw, 34px) 32px;
    }
    /* Standby core: full-bleed, no max-width. Deliberately no 100dvh clamp here --
       the app-shell grid stretches this row to full height already, and a hard dvh
       clamp on mobile reintroduces the header-overlap bug (see the mobile query). */
    .content.core-content {
      max-width: none;
      padding: 0;
      display: flex;
    }
    .content-header {
      margin-bottom: 24px;
      padding: 4px 0 12px;
      border-bottom: 1px solid rgba(93, 219, 255, 0.1);
    }
    .content-header h1 { font-size: var(--type-page-title); font-weight: 700; }
    .content-header .muted { font-size: var(--type-secondary); margin-top: 4px; max-width: 820px; }

    /* Restart handoff: a compact, readable state instead of a full-width empty card. */
    .restart-page { width: min(760px, 100%); margin: 0 auto; padding: clamp(34px, 8vh, 84px) 0 48px; }
    .restart-intro { margin-bottom: 24px; }
    .restart-kicker { color: var(--accent); font: 700 .68rem "Cascadia Code", Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; }
    .restart-intro h1 { margin: 5px 0 6px; font-size: 1.9rem; letter-spacing: -.025em; }
    .restart-intro p { margin: 0; color: var(--muted); }
    .restart-card { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(8, 25, 35, .92); }
    .restart-card-top { display: flex; align-items: flex-start; gap: 14px; padding: 22px 22px 20px; }
    .restart-mark { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border: 1px solid rgba(102, 231, 255, .38); border-radius: 50%; color: var(--accent); background: rgba(102, 231, 255, .08); font-size: 1.55rem; line-height: 1; animation: restart-mark-pulse 2.2s ease-in-out infinite; }
    .restart-state { color: var(--accent); font: 700 .66rem "Cascadia Code", Consolas, monospace; letter-spacing: .1em; }
    .restart-card h2 { margin: 5px 0 4px; font-size: 1.05rem; }
    .restart-card p { margin: 0; color: var(--muted); font-size: .82rem; }
    .restart-progress { height: 4px; margin: 0 22px; overflow: hidden; border-radius: 999px; background: rgba(102, 231, 255, .1); }
    .restart-progress span { display: block; width: 34%; height: 100%; border-radius: inherit; background: var(--accent); box-shadow: 0 0 12px rgba(102, 231, 255, .6); animation: restart-progress-sweep 1.6s ease-in-out infinite; }
    .restart-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 22px 20px; }
    .restart-countdown { color: var(--faint); font-size: .76rem; }
    .restart-note { margin: 12px 3px 0; color: var(--faint); font-size: .74rem; }
    @keyframes restart-progress-sweep { 0% { transform: translateX(-125%); } 100% { transform: translateX(315%); } }
    @keyframes restart-mark-pulse { 0%, 100% { box-shadow: 0 0 0 rgba(102, 231, 255, 0); } 50% { box-shadow: 0 0 18px rgba(102, 231, 255, .18); } }
    @media (max-width: 620px) {
      .restart-page { padding: 28px 0 36px; }
      .restart-card-top { padding: 18px; }
      .restart-progress { margin: 0 18px; }
      .restart-footer { align-items: flex-start; flex-direction: column; padding: 15px 18px 18px; }
      .restart-footer a { width: 100%; justify-content: center; }
}
    @media (prefers-reduced-motion: reduce) {
      .restart-mark, .restart-progress span { animation: none; }
      .restart-progress span { width: 100%; opacity: .5; }
}

    button, input, select, textarea {
      font: inherit;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--panel2);
      color: var(--text);
      padding: 10px 12px;
      min-height: 42px;
    }
    button {
      cursor: pointer;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color: #021018;
      border: 0;
      font-weight: 700;
      font-size: var(--type-secondary);
      box-shadow: 0 0 12px rgba(102, 231, 255, 0.16);
      transition: transform 0.15s, filter 0.15s, box-shadow 0.15s;
    }
    button:hover { filter: brightness(1.06); transform: translateY(-1px); }
    button:disabled { opacity: 0.5; cursor: wait; filter: none; }
    button.btn-ghost {
      background: rgba(102, 231, 255, 0.05);
      color: var(--muted);
      border: 1px solid var(--line);
      box-shadow: none;
      font-weight: 600;
    }
    button.btn-ghost:hover { color: var(--text); border-color: var(--line-strong); }
    button.btn-danger {
      background: rgba(255, 107, 107, 0.08);
      color: #ffb3b3;
      border: 1px solid rgba(255, 107, 107, 0.28);
      box-shadow: none;
      font-weight: 600;
    }
    button.btn-danger:hover { background: rgba(255, 107, 107, 0.16); }
    button.btn-sm { padding: 7px 10px; font-size: var(--type-meta); }
    /* Ringtone actions are simple secondary controls; keep them compact instead of
       making each one consume a full oversized form row. */
    button.setup-ringtone-action { min-height: 36px; padding: 7px 12px; font-size: var(--type-meta); }
    /* Anchor styled as a ghost button (e.g. the Projects "Keep working" link). */
    a.btn-ghost {
      display: inline-flex; align-items: center; text-decoration: none;
      background: rgba(102, 231, 255, 0.05); color: var(--muted);
      border: 1px solid var(--line); border-radius: var(--radius-sm);
      font-weight: 600; min-height: 42px; padding: 10px 12px;
    }
    a.btn-ghost.btn-sm { min-height: 0; padding: 7px 10px; font-size: var(--type-meta); }
    a.btn-ghost:hover { color: var(--text); border-color: var(--line-strong); }
    .capability-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
    .capability-actions .capability-delete { margin-top: 0; }
    .project-summary-card {
      position: relative;
      transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
    }
    .project-summary-card:hover,
    .project-summary-card:focus-within {
      border-color: var(--line-strong);
      background: rgba(102, 231, 255, 0.07);
      transform: translateY(-1px);
    }
    .project-card-link {
      color: inherit;
      text-decoration: none;
      display: grid;
      gap: 12px;
      min-height: 104px;
      padding-bottom: 52px;
    }
    .project-card-link::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      cursor: pointer;
    }
    .project-card-title {
      color: #f5fbfd;
      font-size: 1rem;
      font-weight: 800;
      line-height: 1.2;
    }
    .project-card-delete {
      position: absolute;
      left: 20px;
      bottom: 20px;
      z-index: 2;
      margin: 0;
    }
    /* Persona toggle in the Voice settings section. */
    .persona-toggle { margin-top: 4px; }
    .persona-toggle-buttons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
    .persona-switch-form { margin: 0; display: inline-flex; }
    button.persona-btn.active { border-color: var(--good); color: var(--text); font-weight: 600; }
    button.persona-btn.active:disabled { opacity: 1; cursor: default; filter: none; }
    .action-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 42px;
      padding: 10px 16px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-sm);
      color: #eafcff;
      background: linear-gradient(135deg, rgba(102, 231, 255, 0.2), rgba(30, 167, 255, 0.12));
      box-shadow: 0 0 10px rgba(102, 231, 255, 0.1);
      text-decoration: none;
      font-weight: 700;
      white-space: nowrap;
    }
    .icon-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      padding: 0;
      flex-shrink: 0;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-sm);
      color: #eafcff;
      background: linear-gradient(135deg, rgba(102, 231, 255, 0.2), rgba(30, 167, 255, 0.12));
      box-shadow: 0 0 10px rgba(102, 231, 255, 0.1);
    }
    .icon-btn:hover { transform: translateY(-1px); box-shadow: 0 0 14px rgba(102, 231, 255, 0.18); }
    .icon-btn svg { width: 20px; height: 20px; }
    .action-link:hover {
      text-decoration: none;
      transform: translateY(-1px);
      box-shadow: 0 0 14px rgba(102, 231, 255, 0.18);
    }
    input:focus, select:focus, textarea:focus {
      outline: none;
      border-color: rgba(102, 231, 255, 0.65);
      box-shadow: 0 0 0 3px rgba(102, 231, 255, 0.12);
    }
    input, select, textarea {
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
    }
    /* Native <select> popup on Windows/Chrome ignores :root color-scheme in
       some GPU-composited paths and paints the option list in light mode --
       greyed-out text on white, which is what Tyler saw with the mic picker.
       Setting color-scheme on the select itself forces the popup dark; the
       explicit option colors are the belt-and-braces for browsers that render
       the popup with the OS chrome instead. */
    select { color-scheme: dark; }
    select option { background: #0a1820; color: var(--text); }
    select option:checked { background: rgba(102, 231, 255, 0.18); }
    label {
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    label input, label select, label textarea {
      margin-top: 7px;
      letter-spacing: 0;
      text-transform: none;
      display: block;
      width: 100%;
    }
    label:has(input[type="checkbox"]) {
      display: flex;
      align-items: center;
      flex-direction: row-reverse;
      justify-content: flex-end;
      gap: 9px;
      text-transform: none;
      font-size: 0.88rem;
      font-weight: 500;
      color: var(--text);
      /* A narrow grid column (e.g. a permission checkbox at span2/span3) could otherwise
         wrap the label text onto a second line while the checkbox stays vertically centered
         against the whole two-line block, reading as visually broken. */
      white-space: nowrap;
    }
    label:has(input[type="checkbox"]) input { margin: 0; width: auto; accent-color: var(--accent); }
    .readout {
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: rgba(5, 14, 20, 0.6);
      padding: 12px 14px;
      color: var(--text);
      min-height: 44px;
    }
    .readout-label {
      color: var(--muted);
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 6px;
    }
    textarea { width: 100%; min-height: 100px; resize: vertical; line-height: 1.45; }
    .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; align-items: start; }
    .section-title {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 14px;
      margin: 10px 0 2px;
    }
    .section-title h2 { margin: 0; font-size: 1rem; }
    .section-title .muted { margin: 0; font-size: 0.86rem; }
    .card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 20px;
      position: relative;
      box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.025);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
    }
    .card h2 { color: #f5fbfd; }
    .card.tight { padding: 14px; }
    a.card-link {
      display: block;
      color: inherit;
      text-decoration: none;
      transition: transform 0.15s;
    }
    a.card-link .card { transition: border-color 0.15s, box-shadow 0.15s; height: 100%; }
    a.card-link:hover { transform: translateY(-2px); }
    a.card-link:hover .card {
      border-color: var(--line-strong);
      box-shadow: 0 0 0 1px rgba(102, 231, 255, 0.08), 0 12px 24px rgba(0, 0, 0, 0.25);
    }
    .quick-action { display: flex; gap: 14px; align-items: flex-start; }
    .quick-action-icon {
      width: 38px;
      height: 38px;
      flex-shrink: 0;
      border-radius: 10px;
      display: grid;
      place-items: center;
      background: rgba(102, 231, 255, 0.08);
      border: 1px solid var(--line);
      color: var(--accent);
    }
    .quick-action-icon .nav-icon { width: 19px; height: 19px; }
    .quick-action h2 { font-size: 0.96rem; }
    .quick-action p { margin: 0; font-size: 0.86rem; }
    .mission-hero {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(102, 231, 255, 0.24);
      border-radius: 10px;
      background:
        linear-gradient(135deg, rgba(8, 29, 38, 0.96), rgba(5, 13, 20, 0.98) 58%, rgba(16, 18, 26, 0.98)),
        linear-gradient(90deg, rgba(102, 231, 255, 0.04) 1px, transparent 1px);
      background-size: auto, 36px 36px;
      padding: 28px;
      box-shadow: 0 20px 46px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    }
    .mission-hero::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(245, 197, 66, 0.75), rgba(102, 231, 255, 0.75), transparent);
    }
    .mission-layout {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
      gap: 28px;
      align-items: stretch;
    }
    .eyebrow {
      color: var(--gold);
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      margin-bottom: 8px;
    }
    .hero-title {
      font-size: clamp(2rem, 4vw, 4.2rem);
      line-height: 0.95;
      margin: 0 0 14px;
      font-weight: 850;
      text-shadow: 0 0 26px rgba(102, 231, 255, 0.18);
    }
    .hero-copy {
      max-width: 680px;
      color: #b9d8e4;
      font-size: 1rem;
      margin: 0 0 18px;
    }
    .hero-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
    .status-panel {
      border: 1px solid rgba(102, 231, 255, 0.18);
      border-radius: 10px;
      background: rgba(3, 9, 14, 0.56);
      padding: 16px;
      display: grid;
      gap: 12px;
      align-content: start;
    }
    .status-panel-header {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--line);
    }
    .status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .status-tile {
      min-height: 86px;
      border: 1px solid rgba(102, 231, 255, 0.14);
      border-radius: 8px;
      background: rgba(9, 24, 31, 0.66);
      padding: 12px;
    }
    .status-tile .metric { margin-top: 3px; font-size: 1.38rem; }
    .status-tile p { margin: 3px 0 0; font-size: 0.82rem; }
    .command-strip {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 14px;
    }
    .command-pill {
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      padding: 6px 10px;
      border: 1px solid rgba(245, 197, 66, 0.25);
      border-radius: 999px;
      color: #ffe7a3;
      background: rgba(245, 197, 66, 0.06);
      font-size: 0.82rem;
      white-space: nowrap;
    }
    .metric-card {
      min-height: 142px;
      display: grid;
      align-content: space-between;
      border-top: 2px solid rgba(102, 231, 255, 0.24);
    }
    .metric-card .metric { font-size: 1.8rem; }
    .data-label {
      color: var(--muted);
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .capability {
      min-height: 132px;
      display: grid;
      gap: 10px;
      align-content: start;
    }
    .capability-top {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: flex-start;
    }
    .capability h2 { margin: 0; font-size: 1rem; }
    .capability p { margin: 0; font-size: 0.86rem; }
    .profile-card h2 { margin-bottom: 8px; }
    .profile-card .readout { margin-top: 12px; font-size: 0.82rem; color: var(--muted); min-height: auto; }
    .ops-shell {
      display: grid;
      gap: 14px;
    }
    .ops-deck {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
      gap: 16px;
      align-items: stretch;
    }
    .ops-hero {
      position: relative;
      overflow: hidden;
      min-height: 220px;
      border: 1px solid rgba(102, 231, 255, 0.28);
      border-radius: 8px;
      padding: clamp(18px, 2vw, 28px);
      background: linear-gradient(135deg, rgba(8, 31, 40, 0.96), rgba(3, 10, 16, 0.98) 54%, rgba(11, 21, 28, 0.96));
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }
    .ops-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(90deg, rgba(102, 231, 255, 0.14), transparent 22%, transparent 78%, rgba(245, 197, 66, 0.1)),
        radial-gradient(560px 260px at 80% 18%, rgba(102, 231, 255, 0.16), transparent 64%);
      opacity: 0.86;
    }
    .ops-hero-inner {
      position: relative;
      display: grid;
      grid-template-columns: minmax(320px, 0.72fr) minmax(420px, 1fr);
      align-items: start;
      gap: 16px;
    }
    .ops-kicker {
      color: var(--gold);
      font-size: 0.74rem;
      font-weight: 850;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }
    .ops-title {
      max-width: 620px;
      margin: 6px 0 8px;
      font-size: clamp(2.15rem, 3.4vw, 3.95rem);
      line-height: 0.94;
      font-weight: 900;
      letter-spacing: 0;
      text-shadow: 0 0 34px rgba(102, 231, 255, 0.2);
    }
    .ops-copy {
      max-width: 620px;
      color: #c4dce5;
      font-size: 0.96rem;
      margin: 0;
    }
    .ops-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
    }
    .ops-side {
      display: grid;
      gap: 10px;
    }
    .ops-readout {
      min-height: 86px;
      border-radius: 8px;
      border: 1px solid rgba(102, 231, 255, 0.2);
      background: rgba(7, 21, 29, 0.88);
      padding: 14px;
      display: grid;
      align-content: space-between;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
    }
    .ops-readout.big {
      position: relative;
      min-height: 116px;
      background: linear-gradient(135deg, rgba(12, 35, 45, 0.92), rgba(4, 12, 18, 0.95));
    }
    .ops-readout .metric {
      margin: 2px 0 0;
      font-size: clamp(1.75rem, 2.2vw, 2.7rem);
    }
    .ops-readout p { margin: 4px 0 0; font-size: 0.84rem; }
    .ops-band {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .ops-stat {
      min-height: 96px;
      border-radius: 8px;
      border: 1px solid rgba(102, 231, 255, 0.16);
      background: rgba(8, 22, 30, 0.84);
      padding: 13px;
      display: grid;
      align-content: space-between;
    }
    .ops-stat strong {
      display: block;
      font-size: clamp(1.15rem, 1.45vw, 1.65rem);
      line-height: 1.1;
      margin-top: 6px;
    }
    .ops-board {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(360px, 0.42fr);
      gap: 16px;
      align-items: start;
    }
    .ops-card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 10px;
    }
    .ops-control {
      min-height: 106px;
      border-radius: 8px;
      display: grid;
      align-content: space-between;
      gap: 10px;
    }
    .ops-control .quick-action-icon {
      width: 34px;
      height: 34px;
      border-radius: 8px;
    }
    .ops-control h2 { margin: 0; font-size: 1rem; }
    .ops-control p { margin: 0; font-size: 0.82rem; }
    .ops-profile-stack {
      display: grid;
      gap: 10px;
    }
    .ops-profile-card {
      border-radius: 8px;
      min-height: 112px;
    }
    .ops-profile-card .readout {
      margin-top: 10px;
      font-size: 0.78rem;
    }
    .span2 { grid-column: span 2; }
    .span3 { grid-column: span 3; }
    .span4 { grid-column: span 4; }
    .span5 { grid-column: span 5; }
    .span6 { grid-column: span 6; }
    .span7 { grid-column: span 7; }
    .span8 { grid-column: span 8; }
    .span12 { grid-column: span 12; }
    .muted { color: var(--muted); }
    .metric { font-size: 26px; font-weight: 800; margin-top: 6px; }
    .metric-text { font-size: 15px; font-weight: 700; margin-top: 8px; line-height: 1.5; }
    .ok { color: var(--good); }
    .bad { color: var(--bad); }
    .warn { color: var(--warn); }
    .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
    .stack { display: grid; gap: 10px; }
    .justify-between { justify-content: space-between; }
    .justify-end { justify-content: flex-end; }
    .items-end { align-items: flex-end; }
    .self-end { align-self: flex-end; }
    .self-end-b { align-self: end; }
    .border-strong { border-color: var(--line-strong); }
    .inline { display: inline; }
    .inline-flex-m0 { display: inline-flex; margin: 0; }
    .m0 { margin: 0; }
    .mt-0 { margin-top: 0; }
    .mt-4 { margin: 4px 0 0; }
    .mt-6 { margin-top: 6px; }
    .mt-16 { margin-top: 16px; }
    .mt-20 { margin-top: 20px; }
    .mb-0 { margin-bottom: 0; }
    .minw-160 { min-width: 160px; }
    .minw-200 { min-width: 200px; }
    .pill {
      display: inline-flex;
      align-items: center;
      padding: 4px 9px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: #c7f4ff;
      font-size: 12.5px;
      background: rgba(102, 231, 255, 0.05);
      white-space: nowrap;
    }
    .pill.pill-good { color: var(--good); border-color: rgba(92, 224, 138, 0.35); background: rgba(92, 224, 138, 0.12); }
    .pill.pill-bad { color: var(--bad); border-color: rgba(255, 107, 107, 0.3); }
    .pill.pill-warn { color: var(--warn); border-color: rgba(245, 197, 66, 0.3); }
    .capability-delete { margin-top: 10px; }
    .capability-delete .danger {
      background: rgba(255, 107, 107, 0.08); color: var(--bad);
      border: 1px solid rgba(255, 107, 107, 0.3); border-radius: var(--radius-sm);
      padding: 6px 12px; cursor: pointer; font: inherit; font-size: 0.82rem;
    }
    .capability-delete .danger:hover { background: rgba(255, 107, 107, 0.16); border-color: rgba(255, 107, 107, 0.5); }
    .overall-progress-bar {
      position: relative;
      height: 30px;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid var(--line-strong);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
        rgba(6, 20, 27, 0.88);
      box-shadow: inset 0 1px 8px rgba(0, 0, 0, 0.35);
    }
    .overall-progress-fill {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      min-width: 42px;
      max-width: 100%;
      height: 100%;
      padding-right: 10px;
      color: #041116;
      font-size: 0.84rem;
      font-weight: 800;
      background: linear-gradient(90deg, var(--good), var(--warn));
      box-shadow: 0 0 18px rgba(92, 224, 138, 0.22);
    }
    .overall-progress-fill span { line-height: 1; white-space: nowrap; }
    .capability-note { margin: 4px 0 0; padding-left: 18px; color: var(--muted); font-size: .9rem; line-height: 1.5; }
    .capability-note li { margin-bottom: 5px; }
    /* Commute Setup: each house collapses to a summary row with a +/- toggle. */
    .setup-commute-house { border: 1px solid var(--line); border-radius: 8px; }
    .setup-commute-house > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px; position: relative; padding-right: 36px; }
    .setup-commute-house > summary::-webkit-details-marker { display: none; }
    .setup-commute-house > summary::after { content: "+"; position: absolute; top: 50%; right: 14px; transform: translateY(-50%); color: var(--accent); font: 700 1.15rem "Cascadia Code", Consolas, monospace; line-height: 1; }
    .setup-commute-house[open] > summary::after { content: "\2212"; }
    .setup-commute-house[open] > summary { border-bottom: 1px solid var(--line); }
    .setup-commute-house > summary:hover .setup-house-name { color: var(--accent); }
    .setup-commute-house > summary:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
    .setup-house-name { font-weight: 600; }
    .setup-house-status { margin-left: auto; font-size: .85rem; }
    .setup-commute-house-body { padding: 14px; }
    .setup-commute-house-body label.row, .setup-acc-body > form label.row { position: relative; }
    .address-suggestions[hidden] { display: none; }
    .setup-acc#commute .setup-acc-body > form > button {
      width: max-content;
      max-width: 100%;
      min-width: 0;
      white-space: nowrap;
    }
    .address-suggestions { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; display: grid; gap: 2px; padding: 5px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: rgba(6, 20, 29, .98); box-shadow: 0 12px 24px rgba(0, 0, 0, .32); }
    .address-suggestion { min-height: 34px; padding: 7px 9px; background: transparent; color: var(--text); border: 0; box-shadow: none; text-align: left; font-size: var(--type-meta); font-weight: 600; }
    .address-suggestion:hover, .address-suggestion[aria-selected="true"] { background: rgba(102, 231, 255, .12); color: var(--accent); transform: none; }
    .capability-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.82rem;
      padding: 4px 9px 4px 7px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.02);
      white-space: nowrap;
    }
    .capability-chip .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
    .capability-chip.good .dot { background: var(--good); }
    .capability-chip.warn .dot { background: var(--warn); }
    .capability-chip.bad { color: var(--muted); }
    .capability-chip.bad .dot { background: rgba(147, 180, 194, 0.5); }
    .current-capabilities-list { display: grid; gap: 9px; margin-bottom: 0; }
    .current-capabilities-list li { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 0; }
    .current-capabilities-list .pill { flex: 0 0 auto; }
    .daily-work-record { display: grid; gap: 10px; }
    .daily-work-day summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
    .daily-work-day ul { margin: 12px 0 0; padding-left: 20px; color: var(--muted); }
    .daily-work-day li { margin: 5px 0; line-height: 1.45; }
    .content.memory-content {
      max-width: none;
      padding-top: 18px;
    }
    .compact-memory-card {
      padding: 0;
      border-radius: 7px;
      box-shadow: none;
      background: rgba(7, 20, 28, 0.78);
    }
    .compact-memory-card summary {
      display: grid;
      grid-template-columns: 16px auto minmax(0, 1fr) max-content;
      gap: 8px;
      align-items: center;
      min-height: 40px;
      padding: 7px 10px;
      flex-wrap: nowrap;
    }
    .compact-memory-card summary::before {
      width: 12px;
      text-align: center;
    }
    .compact-memory-card .pill {
      padding: 2px 7px;
      font-size: 0.74rem;
      min-height: 24px;
    }
    .compact-memory-card .pill-slot { width: 1px; }
    .compact-memory-card summary > .muted {
      white-space: nowrap;
      font-size: 0.82rem;
    }
    .compact-memory-card textarea {
      min-height: 74px;
    }
    /* Voice links sit below the persona controls; match the compact Connector actions. */
    .setup-acc#voice .action-link {
      min-height: 34px;
      padding: 6px 10px;
      gap: 6px;
      font-size: var(--type-meta);
    }
    .compact-memory-card {
      border: 0;
      border-bottom: 1px solid rgba(93, 219, 255, 0.09);
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }
    .compact-memory-card summary::before { width: 12px; color: var(--faint); }
    .compact-memory-card summary > .muted { white-space: nowrap; font-size: 0.66rem; color: var(--faint); }
    .compact-memory-card:hover summary { background: rgba(102, 231, 255, 0.035); }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
    .archived-memory-list { display: grid; gap: 1px; background: var(--line); }
    .archived-memory-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: rgba(6, 21, 30, .96); color: var(--muted); font-size: .76rem; }
    .archived-memory-row span { overflow-wrap: anywhere; }
    /* The text takes the slack so a leading "Pinned" pill sits next to it rather than
       pushing it into the middle of the row. */
    .recent-memory-text, .aboutme-text {
      flex: 1 1 auto; min-width: 0; color: var(--text); font-size: .82rem; line-height: 1.45; overflow-wrap: anywhere;
    }
    .recent-memory-meta .muted { font-size: .7rem; white-space: nowrap; }
    .aboutme-row .pill { flex: 0 0 auto; }
    /* Connector page accordions: every connector collapses to a title + status row. */
    .setup-toolbar { margin-bottom: 12px; gap: 10px; flex-wrap: wrap; }
    /* Connector search: filters the accordion list as you type. */
    .connector-search-wrap { align-items: center; gap: 8px; }
    .connector-search {
      min-width: 220px;
      padding: 7px 11px;
      border-radius: 8px;
      border: 1px solid rgba(120, 160, 200, 0.28);
      background: rgba(10, 18, 30, 0.55);
      color: inherit;
      font-size: 0.95rem;
    }
    .connector-search:focus {
      outline: none;
      border-color: #62E4ED;
      box-shadow: 0 0 0 2px rgba(98, 228, 237, 0.22);
    }
    .connector-search-count { font-size: 0.85rem; white-space: nowrap; }
    /* Filtered-out cards. `hidden` alone loses to `.setup-list`'s grid display, so the
       class carries the actual hide and the attribute stays for assistive tech. */
    .connector-hidden { display: none !important; }
    @media (max-width: 640px) {
      .connector-search-wrap { width: 100%; }
      .connector-search { flex: 1; min-width: 0; }
}
    .setup-list {
      display: grid;
      gap: 8px;
      max-width: 1180px;
    }
    .setup-main-connectors {
      display: grid;
      gap: 8px;
      max-width: 1180px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
    }
    /* Keep the overview dense, but let a configuration form use the full reading width. */
    .setup-main-connectors > .setup-acc[open] { grid-column: 1 / -1; }
    @media (max-width: 760px) {
      .setup-main-connectors { grid-template-columns: 1fr; }
      .setup-main-connectors > .setup-acc[open] { grid-column: auto; }
}
    .setup-group {
      display: grid;
      gap: 8px;
      max-width: 1180px;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel);
      box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.025);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
    }
    .setup-group > summary {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 48px;
      padding: 12px 16px;
      cursor: pointer;
      list-style: none;
      font-weight: 700;
    }
    .setup-controls-group > summary .muted { margin-left: auto; }
    .setup-group > summary::-webkit-details-marker { display: none; }
    .setup-group > summary::before {
      content: "\25B8";
      color: var(--faint);
      transition: transform 0.15s;
    }
    .setup-group[open] > summary::before { transform: rotate(90deg); }
    .setup-group-list {
      display: grid;
      gap: 8px;
      padding: 0 8px 8px;
      border-top: 1px solid var(--line);
    }
    .setup-acc { padding: 0; }
    .setup-nested-connector { margin: 10px 16px 16px; border-color: var(--line); }
    .setup-acc > summary {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 48px;
      padding: 12px 16px;
      cursor: pointer;
      list-style: none;
      font-weight: 700;
    }
    .setup-acc > summary::-webkit-details-marker { display: none; }
    .setup-acc > summary::before {
      content: "\25B8";
      color: var(--faint);
      transition: transform 0.15s;
    }
    .setup-acc[open] > summary::before { transform: rotate(90deg); }
    .setup-acc-title { flex: 1; min-width: 0; }
    .setup-brand-logo { width: 18px; height: 18px; vertical-align: -4px; margin-right: 9px; }
    /* Docker-hosted app marks ship as <img> official logos of varying aspect ratios; contain
       keeps a non-square mark (e.g. Portainer) from stretching inside the 18x18 box. */
    img.setup-brand-logo { object-fit: contain; }
    /* Persona rows are nested details, so they do not inherit the outer
       accordion summary layout. Keep the name and Edit affordance separated. */
    .persona-editor-entry > summary {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 44px;
      padding: 10px 16px;
      cursor: pointer;
      list-style: none;
    }
    .persona-editor-entry > summary .setup-acc-title {
      font-family: var(--font-ui);
      font-size: var(--type-body);
      font-weight: 700;
      line-height: 1.25;
    }
    .persona-editor-entry > summary::-webkit-details-marker { display: none; }
    .persona-editor-entry > summary::before {
      content: "\25B8";
      flex: 0 0 auto;
      color: var(--faint);
      transition: transform 0.15s;
    }
    .persona-editor-entry[open] > summary::before { transform: rotate(90deg); }
    .setup-acc-body {
      padding: 14px 16px 16px;
      border-top: 1px solid var(--line);
    }
    /* Connector actions are one control family: keep Save, Connect,
       Reconnect, Test, and Disconnect compact and aligned instead of letting
       the global button size make every card feel oversized. */
    .setup-acc-body button {
      box-sizing: border-box;
      flex: 0 1 auto;
      width: auto;
      min-width: 136px;
      max-width: 100%;
      min-height: 34px;
      height: 34px;
      padding: 7px 10px;
      font-size: var(--type-meta);
      line-height: 1.1;
      white-space: nowrap;
    }
    .setup-acc-body > button,
    .setup-acc-body form:not(.stack) > button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .setup-acc-body .action-link {
      min-height: 34px;
      padding: 6px 10px;
      gap: 6px;
      font-size: var(--type-meta);
    }
    /* Keep expanded connector cards task-focused. The full explanation remains
       available in the native Setup details disclosure added by setup.py. */
    .connector-summary {
      margin: 0 0 10px;
      color: var(--muted);
    }
    .setup-acc-body > .connector-advanced {
      margin: 0 0 12px;
    }
    .connector-advanced .muted:last-child,
    .connector-advanced p:last-child {
      margin-bottom: 0;
    }
    .home-location-current {
      display: grid;
      gap: 4px;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: color-mix(in srgb, var(--surface) 72%, transparent);
      min-width: 0;
    }
    .home-location-current strong {
      color: var(--text);
      font-weight: 600;
      overflow-wrap: anywhere;
    }
    .home-location-action {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    .home-location-action .muted { margin: 0; }
    .home-location-help { margin-top: 2px; }
    .home-location-help > summary {
      color: var(--text);
      font-weight: 600;
      cursor: pointer;
    }
    .setup-visibility-form {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0 16px 12px;
      padding-top: 10px;
      border-top: 1px solid var(--line);
    }
    .setup-visibility-form label {
      margin: 0;
      color: var(--muted);
      font-size: .75rem;
    }
    .setup-visibility-form button { margin-left: auto; }
    @media (max-width: 620px) {
      .setup-visibility-form button { width: 100%; margin-left: 0; }
}
    .setup-inline-status {
      flex-basis: 100%;
      margin: 0;
      min-height: 1.2em;
      font-size: .78rem;
    }
    .setup-inline-status.good { color: var(--good); }
    .setup-inline-status.bad { color: var(--bad); }
    .setup-connection-state { margin: -2px 0 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: .86rem; line-height: 1.45; }
    .setup-connection-state b { color: var(--ink); }
    a.setup-acc-link {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 48px;
      padding: 12px 16px 12px 34px;
      color: var(--text);
      text-decoration: none;
      font-weight: 700;
    }
    a.setup-acc-link:hover { text-decoration: none; border-color: var(--line-strong); }
    /* Settings card divider + link row (formerly inline styles -- the no-inline
       -style regression test rejects style="" attributes on any rendered page,
       Tyler 2026-07-31). */
    .settings-divider {
      border: none;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      margin: 1rem 0;
    }
    .settings-link-row {
      gap: 1rem;
      flex-wrap: wrap;
    }
    .connector-ready-note {
      margin: 0;
      padding: 10px 12px;
      border: 1px solid rgba(65, 218, 143, 0.28);
      border-radius: 7px;
      color: var(--muted);
      background: rgba(19, 96, 65, 0.12);
    }
    .connector-ready-note b { color: var(--good); }
    .connector-advanced {
      border: 1px solid var(--line);
      border-radius: 7px;
      padding: 0 10px 10px;
    }
    .connector-advanced > summary {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      cursor: pointer;
      padding: 10px 0;
      color: var(--muted);
      font-size: 0.8rem;
      font-weight: 700;
      list-style: none;
    }
    .connector-advanced > summary::-webkit-details-marker { display: none; }
    .connector-advanced > summary::before { content: "▸"; color: var(--faint); }
    .connector-advanced[open] > summary::before { content: "▾"; }
    .setup-more { margin-top: 12px; }
    .news-assistant-dock .core-voice-controls { position: static; width: 100%; transform: none; margin-top: 8px; }
    .news-assistant-dock .core-voice-controls .talk-status { min-height: 1.2em; }
    .news-assistant-dock .core-voice-controls .talk-heard, .news-assistant-dock .core-voice-controls .talk-reply { max-width: 100%; }
    .news-assistant-dock .core-voice-controls .talk-main-btn { min-width: 104px; min-height: 36px; font-size: .82rem; }
    .news-assistant-dock .core-voice-controls .btn-ghost { min-height: 32px; padding: 6px 9px; font-size: .72rem; }
    .fox-news-logo { display: block; width: 46px; height: 46px; object-fit: contain; border-radius: 4px; filter: drop-shadow(0 0 10px rgba(74, 169, 232, 0.3)); }
    .setup-acc-title .setup-news-logo { display: inline-block; width: 18px; height: 18px; margin-right: 9px; vertical-align: -4px; }
    .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #42e58b; box-shadow: 0 0 12px rgba(66, 229, 139, 0.85); animation: news-live-pulse 1.5s ease-in-out infinite; }
    @keyframes news-live-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
    @keyframes news-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    .agents-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 4px 0 18px; }
    .metric-value { display: block; margin: 8px 0 2px; color: var(--accent); font-size: 1.8rem; }
    .agent-card h2 { margin-top: 5px; }
    .agent-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 10px 0; color: var(--faint); font-size: .72rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .agent-config { display: grid; grid-template-columns: 100px 1fr; gap: 6px 10px; margin: 12px 0; font-size: .8rem; }
    .agent-config dt { color: var(--faint); }
    .agent-config dd { margin: 0; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }
    .agent-actions { margin-top: 12px; }
    .agent-run { display: grid; grid-template-columns: max-content 1fr max-content; }
    .agent-run p { grid-column: 1 / -1; margin: 0; color: var(--muted); white-space: pre-wrap; max-height: 160px; overflow: auto; }
    .pending-memory-card { margin-top: 10px; border-color: rgba(245,197,66,.32); }
    .pending-memory-card p { color: var(--text); white-space: pre-wrap; }
    .archived-memory-card { padding: 10px 12px; }
    .archived-memory-card small { display: block; margin-top: 4px; }
    @media (max-width: 900px) { .agents-summary { grid-template-columns: 1fr; }
}
    /* The Brain lives in the standard app shell (so it gets the nav rail); brain-bleed makes
       its content cell full-bleed -- no padding/max-width -- so the graph fills the space next
       to the rail instead of the whole viewport. */
    .content.brain-bleed { padding: 0; margin: 0; max-width: none; width: 100%; height: 100dvh; min-height: 0; overflow: hidden; display: block; gap: 0; }
    .docker-apps { display: grid; gap: 7px; margin: 8px 0 12px; }
    .docker-apps h3 { margin: 0 0 2px; font-size: .82rem; }
    .docker-app-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid #24414b; border-radius: 7px; background: rgba(7, 25, 32, .7); }
    .docker-app-row strong { display: block; color: #e7fbff; }
    .docker-app-row small { display: block; margin-top: 2px; color: #8faeb8; font-size: .72rem; }
    .docker-app-row b { font-size: .75rem; white-space: nowrap; }
    .docker-app-up { border-color: rgba(44, 201, 111, .45); }
    .docker-app-up b { color: #4de18a; }
    .docker-app-down { border-color: rgba(255, 92, 104, .45); }
    .docker-app-down b { color: #ff6875; }
    @keyframes brainActivityPulse { 0%,100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.25); } }
    .eyebrow {
      display: block;
      font-family: "Cascadia Code", "Consolas", monospace;
      font-size: 0.65rem;
      font-weight: 800;
      letter-spacing: 0.16em;
      color: var(--accent);
    }
    .map-favorite-shortcuts, .weather-favorite-shortcuts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--muted); font-size: .7rem; }
    .map-favorite-chip, .weather-favorite-chip { padding: 4px 8px; border: 1px solid rgba(102,231,255,.25); border-radius: 999px; color: var(--accent); background: rgba(6,28,40,.7); font-size: .7rem; text-decoration: none; }
    .map-favorite-chip:hover, .weather-favorite-chip:hover { border-color: var(--accent); text-decoration: none; }

    .backup-toolbar { margin-bottom: 8px; }
    .backup-days { gap: 14px; }
    .backup-day { gap: 6px; }
    .backup-day h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.92rem; }
    .backup-day-list { display: grid; gap: 5px; }
    .backup-row {
      border: 1px solid var(--line);
      border-radius: 7px;
      background: rgba(7, 20, 28, 0.78);
    }
    .backup-row summary {
      display: grid;
      grid-template-columns: 70px minmax(0, 1fr) max-content;
      gap: 10px;
      align-items: center;
      min-height: 38px;
      padding: 7px 10px;
      cursor: pointer;
      list-style: none;
    }
    .backup-row summary::-webkit-details-marker { display: none; }
    .backup-row-time { font-size: 0.8rem; white-space: nowrap; }
    .backup-row-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 0.88rem;
    }
    .backup-row-body {
      margin: 0;
      padding: 10px;
      border-top: 1px solid rgba(93, 219, 255, 0.12);
    }
    .activity-latest-backup { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; padding: 18px 20px; background: linear-gradient(135deg, rgba(11, 35, 46, 0.96), rgba(4, 16, 24, 0.96)); }
    .activity-latest-backup h2 { margin: 5px 0 2px; font-size: 1.05rem; }
    .activity-section { margin-top: 22px; }
    .activity-section-head { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
    .activity-section-head h2 { margin: 0; font-size: 0.86rem; letter-spacing: 0.13em; }
    .activity-section-head p { margin: 5px 0 0; }
    .activity-attention { color: var(--faint); font: 700 0.7rem "Cascadia Code", "Consolas", monospace; text-align: right; }
    .activity-note { margin: 0 0 8px; font-size: 0.78rem; }
    .activity-event-list { display: grid; gap: 5px; }
    .activity-event-row, .activity-archive-group { border: 1px solid var(--line); border-radius: 7px; background: rgba(5, 18, 26, 0.82); }
    .activity-event-row summary, .activity-archive-group summary { display: grid; grid-template-columns: max-content max-content minmax(0, 1fr) max-content; gap: 9px; align-items: center; min-height: 38px; padding: 8px 11px; cursor: pointer; list-style: none; }
    .activity-event-row summary::-webkit-details-marker, .activity-archive-group summary::-webkit-details-marker { display: none; }
    .activity-event-row summary::before, .activity-archive-group summary::before { content: "›"; color: var(--faint); transition: transform 0.15s; }
    .activity-event-row[open] summary::before, .activity-archive-group[open] summary::before { transform: rotate(90deg); }
    .activity-event-message { min-width: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
    .activity-event-row time { color: var(--faint); font-size: 0.72rem; white-space: nowrap; }
    .activity-event-detail { padding: 9px 12px 11px 32px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.8rem; overflow-wrap: anywhere; }
    .activity-empty { padding: 15px; border: 1px dashed var(--line); border-radius: 7px; color: var(--muted); }
    .activity-archive-list { display: grid; gap: 5px; }
    .activity-archive-group summary { grid-template-columns: max-content max-content 1fr max-content; }
    .activity-archive-group summary strong { font-size: 0.84rem; }
    .activity-chevron { color: var(--accent); font-size: 1.1rem; }
    .activity-archive-group[open] { border-color: var(--line-strong); }
    .activity-archive-group > .activity-archive-list { padding: 0 10px 10px; }
    .activity-archive-row { display: grid; grid-template-columns: max-content max-content max-content minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 9px; border-top: 1px solid rgba(93, 219, 255, 0.08); color: var(--muted); font-size: 0.78rem; }
    .activity-archive-row span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .activity-collapsed { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 13px; }
    .activity-collapsed > summary { cursor: pointer; color: var(--muted); font-size: 0.8rem; }
    .activity-collapsed h2 { margin: 14px 0 8px; font-size: 0.86rem; }
    .activity-latency-list { display: grid; gap: 4px; }
    .activity-latency-row { display: grid; grid-template-columns: minmax(0, 1fr) max-content max-content; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: 0.78rem; }
    @media (max-width: 680px) {
      .activity-latest-backup, .activity-section-head { align-items: flex-start; flex-direction: column; }
      .activity-attention { text-align: left; }
      .activity-event-row summary { grid-template-columns: max-content max-content minmax(0, 1fr); }
      .activity-event-row time { grid-column: 3; }
      .activity-archive-row { grid-template-columns: max-content max-content minmax(0, 1fr); }
      .activity-archive-row span:last-child { grid-column: 1 / -1; }
}
    /* Activity concept 2: one quiet log, one readable detail surface, one archive disclosure. */
    .activity-latest-strip { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding: 12px 0 14px; border-bottom: 1px solid var(--line); }
    .activity-latest-strip > div { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex-wrap: wrap; }
    .activity-latest-strip .data-label { flex-basis: 100%; }
    .activity-latest-strip strong { font-size: 0.94rem; }
    .activity-latest-strip .muted { font-size: 0.78rem; }
    .activity-split { display: grid; grid-template-columns: minmax(300px, 0.86fr) minmax(0, 1.34fr); gap: 12px; align-items: stretch; }
    .activity-log-panel, .activity-detail-panel { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: rgba(5, 18, 26, 0.7); }
    .activity-log-panel { overflow: hidden; }
    .activity-log-panel .activity-section-head { margin: 0; padding: 14px 15px 11px; }
    .activity-event-list { gap: 0; }
    button.activity-event-row { width: 100%; display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: center; gap: 10px; min-height: 62px; padding: 10px 14px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; color: inherit; text-align: left; box-shadow: none; cursor: pointer; }
    button.activity-event-row:hover, button.activity-event-row.is-active { background: rgba(102, 231, 255, 0.06); }
    button.activity-event-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
    .activity-event-row > time { color: var(--faint); font-size: 0.68rem; white-space: nowrap; }
    .activity-event-main { display: grid; min-width: 0; gap: 3px; }
    .activity-event-kind-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
    .activity-event-kind-line strong { font-size: 0.82rem; }
    .activity-event-message { min-width: 0; overflow: hidden; color: var(--muted); font-size: 0.76rem; text-overflow: ellipsis; white-space: nowrap; }
    .activity-event-source { max-width: 100px; overflow: hidden; color: var(--faint); font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; }
    .activity-detail-panel { padding: 18px; }
    .activity-detail-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-top: 7px; }
    .activity-detail-title-row h2 { margin: 0 0 8px; font-size: 1.2rem; }
    .activity-detail-title-row time { padding-top: 3px; white-space: nowrap; font-size: 0.74rem; }
    .activity-detail-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 22px; padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .activity-detail-meta > div { display: grid; gap: 5px; min-width: 0; }
    .activity-detail-meta strong { overflow: hidden; font-size: 0.82rem; text-overflow: ellipsis; white-space: nowrap; }
    .activity-detail-message-block { margin-top: 18px; }
    .activity-detail-message-block p { margin: 8px 0 0; padding: 12px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: 0.82rem; line-height: 1.5; overflow-wrap: anywhere; }
    .activity-detail-empty { display: flex; min-height: 180px; flex-direction: column; justify-content: center; }
    .activity-detail-empty h2 { margin: 8px 0 4px; font-size: 1.05rem; }
    .activity-detail-empty p { margin: 0; }
    .activity-archive-disclosure { margin-top: 18px; border-top: 1px solid var(--line); }
    .activity-archive-disclosure > summary { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: 12px; align-items: center; padding: 14px 2px; color: var(--text); cursor: pointer; list-style: none; }
    .activity-archive-disclosure > summary::-webkit-details-marker { display: none; }
    .activity-archive-disclosure > summary::before { content: "+"; color: var(--faint); font: 700 0.9rem "Cascadia Code", "Consolas", monospace; }
    .activity-archive-disclosure[open] > summary::before { content: "-"; }
    .activity-archive-disclosure > summary strong { font-size: 0.78rem; letter-spacing: 0.12em; }
    .activity-archive-body { display: grid; gap: 10px; padding: 0 0 12px 22px; }
    .activity-archive-body > .action-link { justify-self: start; font-size: 0.75rem; }
    .activity-archive-body .activity-archive-list { max-width: 800px; }
    @media (max-width: 760px) {
      .activity-split { grid-template-columns: 1fr; }
      .activity-latest-strip { align-items: flex-start; flex-direction: column; }
      .activity-detail-panel { min-height: 0; }
}
    @media (max-width: 520px) {
      button.activity-event-row { grid-template-columns: max-content minmax(0, 1fr); }
      .activity-event-source { display: none; }
      .activity-detail-meta { grid-template-columns: 1fr; gap: 10px; }
      .activity-archive-disclosure > summary { grid-template-columns: max-content minmax(0, 1fr); }
      .activity-archive-disclosure > summary .activity-chevron { display: none; }
}
    /* Concept 2 reference match: the backup strip is a real control, while the
       activity list reads as a timeline and the detail panel carries the context. */
    .activity-latest-strip { align-items: center; min-height: 56px; margin-bottom: 14px; padding: 12px 18px; border: 1px solid var(--line); border-radius: 8px; background: rgba(5, 18, 26, 0.72); }
    .activity-latest-status { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
    .activity-latest-status strong { color: var(--success, #66e27a); font-size: 0.8rem; }
    .activity-latest-status b { color: var(--text); font-size: 0.82rem; font-weight: 700; }
    .activity-strip-divider { width: 1px; height: 17px; background: var(--line-strong); }
    .activity-latest-strip .action-link { flex-shrink: 0; }
    .activity-latest-strip .action-link span { margin-left: 5px; }
    .activity-status-orb { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
    .activity-status-good { color: #63db78; }
    .activity-status-warn { color: #f5ae19; }
    .activity-status-orb.activity-status-good, .activity-dot-good { background: #63db78; }
    .activity-status-orb.activity-status-warn, .activity-dot-warn { background: #f5ae19; }
    .activity-split { grid-template-columns: minmax(330px, 0.9fr) minmax(0, 1.35fr); gap: 10px; }
    .activity-log-panel, .activity-detail-panel { border-radius: 8px; background: rgba(3, 13, 20, 0.62); }
    .activity-log-panel .activity-section-head { min-height: 54px; padding: 14px 14px 10px; }
    .activity-log-panel .activity-section-head p { display: none; }
    .activity-log-panel .activity-section-head h2 { font-size: 0.8rem; }
    .activity-event-list { position: relative; }
    button.activity-event-row { grid-template-columns: 24px 52px minmax(0, 1fr); min-height: 68px; padding: 9px 14px 9px 10px; gap: 6px; }
    button.activity-event-row.is-active { outline: 1px solid rgba(48, 211, 99, 0.72); outline-offset: -2px; border-radius: 8px; background: rgba(25, 94, 58, 0.18); }
    .activity-event-row > time { grid-column: 2; grid-row: 1; font-size: 0.7rem; }
    .activity-event-rail { position: relative; display: grid; grid-column: 1; grid-row: 1; place-items: center; align-self: stretch; }
    .activity-event-rail::before { display: none; }
    .activity-event-main { grid-column: 3; grid-row: 1; }
    .activity-event-dot { z-index: 1; width: 10px; height: 10px; border: 2px solid rgba(2, 10, 16, 0.95); border-radius: 50%; box-shadow: 0 0 0 1px currentColor; }
    .activity-event-dot.activity-dot-good { color: #63db78; }
    .activity-event-dot.activity-dot-warn { color: #f5ae19; }
    .activity-event-kind-line { gap: 9px; }
    .activity-event-kind-line strong { font-size: 0.82rem; }
    .activity-event-status { font-size: 0.76rem; font-weight: 700; }
    .activity-event-message { font-size: 0.76rem; line-height: 1.35; white-space: normal; }
    .activity-detail-panel { padding: 16px 18px 18px; }
    .activity-detail-heading { display: flex; align-items: center; gap: 12px; }
    .activity-detail-mark { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(102, 231, 255, 0.56); border-radius: 50%; color: var(--accent); }
    .activity-detail-mark .nav-icon { width: 22px; height: 22px; }
    .activity-detail-heading h2 { margin: 0 0 5px; }
    .activity-detail-heading time { display: block; margin-top: 5px; font-size: 0.75rem; }
    .activity-detail-title-row > .pill { min-width: 70px; text-align: center; }
    .activity-detail-meta { margin-top: 14px; padding: 14px 0; }
    .activity-detail-meta strong { font-size: 0.84rem; }
    .activity-related-actions { display: grid; gap: 8px; margin-top: 22px; }
    .activity-related-actions > .data-label { margin-bottom: 1px; }
    .activity-related-action { display: grid; grid-template-columns: 20px minmax(0, 1fr) max-content; align-items: center; gap: 10px; min-height: 38px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: 0.78rem; text-decoration: none; }
    .activity-related-action:hover { border-color: var(--line-strong); color: var(--text); background: rgba(102, 231, 255, 0.05); }
    .activity-related-action .nav-icon { width: 17px; height: 17px; color: var(--accent); }
    .activity-related-action > span:last-child { color: var(--accent); font-size: 1rem; }
    .activity-archive-disclosure { margin-top: 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(3, 13, 20, 0.62); }
    .activity-archive-disclosure > summary { grid-template-columns: max-content minmax(0, 1fr) max-content max-content; padding: 13px 15px; }
    .activity-archive-disclosure > summary::before { content: ""; width: 10px; height: 10px; border: 2px solid #63db78; border-radius: 50%; }
    .activity-archive-disclosure[open] > summary::before { content: ""; }
    .activity-archive-latest { color: var(--text); font-size: 0.8rem; }
    .activity-archive-body { padding: 0 15px 12px 39px; }
    @media (max-width: 760px) {
      .activity-latest-status { align-items: flex-start; }
      .activity-strip-divider { display: none; }
      .activity-split { grid-template-columns: 1fr; }
      .activity-detail-panel { min-height: 0; }
}
    @media (max-width: 520px) {
      .activity-latest-strip { align-items: flex-start; }
      .activity-latest-strip .action-link { align-self: flex-end; }
      button.activity-event-row { grid-template-columns: 24px 52px minmax(0, 1fr); }
      .activity-archive-disclosure > summary { grid-template-columns: max-content minmax(0, 1fr) max-content; }
      .activity-archive-disclosure > summary > .muted { display: none; }
}
    /* Loading affordance: reusable spinner + skeleton for async widgets (radar, live tiles, chat). */
    @keyframes jarvis-spin { to { transform: rotate(360deg); } }
    @keyframes jarvis-shimmer { to { background-position: -200% 0; } }
    .spinner { width: 26px; height: 26px; border: 3px solid rgba(102, 231, 255, 0.22); border-top-color: rgba(102, 231, 255, 0.9); border-radius: 50%; animation: jarvis-spin 0.8s linear infinite; }
    .skeleton { background: linear-gradient(90deg, rgba(102, 231, 255, 0.06) 25%, rgba(102, 231, 255, 0.16) 37%, rgba(102, 231, 255, 0.06) 63%); background-size: 200% 100%; border-radius: 6px; animation: jarvis-shimmer 1.4s ease-in-out infinite; }
    @media (prefers-reduced-motion: reduce) { .spinner, .skeleton { animation: none; }
}
    /* Comfortable touch targets: keep compact controls on desktop, enlarge only for touch input. */
    @media (pointer: coarse) {
      .btn-sm { min-height: 44px; }
}
    @keyframes weatherRadarHerePulse { 0% { transform: scale(0.55); opacity: 0.95; } 100% { transform: scale(1.6); opacity: 0; } }
    .btn-secondary { background: rgba(9, 31, 42, .8); color: var(--text); border-color: var(--line); box-shadow: none; }
    .btn-secondary:hover { background: rgba(102, 231, 255, .1); border-color: var(--accent); }
    @keyframes fuelLoadingPulse { from { opacity: .55; } to { opacity: 1; } }
    .futurecast-panel { overflow: hidden; }
    .futurecast-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(112px, 1fr); gap: 7px; overflow-x: auto; padding-bottom: 4px; }
    .futurecast-card { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: rgba(4, 15, 23, 0.84); }
    .futurecast-time, .futurecast-condition, .futurecast-rain { color: var(--muted); font-size: 0.72rem; }
    .futurecast-temp { margin: 8px 0 3px; color: var(--text); font-size: 1.2rem; font-weight: 800; }
    .futurecast-temp span { margin-left: 2px; color: var(--faint); font-size: 0.68rem; font-weight: 600; }
    .futurecast-rain { margin-top: 8px; color: var(--accent); }
    .code-block {
      display: block;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: rgba(3, 9, 14, 0.74);
      padding: 10px 12px;
      color: var(--text);
      font-family: "Cascadia Code", "Consolas", monospace;
      font-size: 0.82rem;
      overflow-wrap: anywhere;
    }
    pre {
      /* Keep intentional line breaks in lists, but do not let stray model
         whitespace create a visibly wider gap inside one line. */
      white-space: pre-line;
      overflow-wrap: anywhere;
      background: rgba(3, 9, 14, 0.74);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      padding: 12px;
      color: var(--text);
    }
    hr.divider { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
    .login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 24px; }
    /* Public policy/support pages. This lived in a style="" attribute on each
       card, which style-src drops -- so /privacy, /terms and /support rendered
       edge-to-edge with no top margin. */
    .legal-card { max-width: 820px; margin: 32px auto; }
    .login { min-width: 0; max-width: 400px; width: min(100%, 400px); }
    .login .card { min-width: 0; max-width: 100%; padding: 28px 26px; text-align: center; }
    .login h1 { letter-spacing: 0.06em; }
    .login form { text-align: left; margin-top: 14px; }
    .login label input { margin-top: 6px; }

    /* Chat page */
    .content.chat-content {
      max-width: none;
      padding: 0;
      display: grid;
      grid-template-rows: auto 1fr auto;
      height: 100vh;
      /* 100vh on mobile Safari is calculated as if the browser's address/toolbar were fully
         collapsed, so the real visible area is shorter -- the composer ends up rendered below
         the fold, hidden under the browser chrome. 100dvh (dynamic viewport height) tracks the
         toolbar's actual current state. Older browsers that don't understand dvh just ignore
         this line and keep the 100vh value above. */
      height: 100dvh;
      min-height: 0;
      overflow: hidden;
    }
    .voice-action-row { margin: 2px 0; }
    .voice-action-card {
      display: grid;
      gap: 4px;
      max-width: 640px;
      padding: 9px 12px;
      border: 1px solid rgba(88, 213, 244, 0.48);
      border-radius: var(--radius-sm);
      background: rgba(26, 86, 107, 0.20);
      color: var(--muted);
      font-size: .86rem;
    }
    .voice-action-card strong { color: var(--ink); font-size: .9rem; }
    @keyframes chat-typing-pulse {
      0%, 80%, 100% { opacity: 0.45; }
      40% { opacity: 1; }
    }
    .location-map-link {
      display: block;
      width: fit-content;
      cursor: pointer;
    }
    .location-map-image {
      display: block;
      max-width: 100%;
      width: 420px;
      margin-top: 10px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--line);
      transition: border-color 120ms ease, filter 120ms ease;
    }
    .location-map-link:hover .location-map-image,
    .location-map-link:focus-visible .location-map-image {
      border-color: var(--accent);
      filter: brightness(1.06);
    }
    /* Project mode: generated option cards attached under the reply that pulled them up. */
    .project-cards { margin-top: 12px; }
    .project-cards-stub {
      margin-top: 10px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: rgba(102, 231, 255, 0.06);
      color: var(--muted);
      font-size: 0.86rem;
    }
    .project-cards-stub-dot { color: var(--accent); }
    .project-cards-stub-open {
      margin-left: 4px;
      background: rgba(102, 231, 255, 0.1);
      color: var(--accent);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      padding: 3px 10px;
      cursor: pointer;
      font: inherit;
      font-size: 0.8rem;
    }
    .project-cards-stub-open:hover { border-color: var(--accent); }
    .project-cards-title {
      font-size: 0.78rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 8px;
    }
    .project-cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 10px;
    }
    .project-card {
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      padding: 12px;
      background: rgba(93, 219, 255, 0.04);
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .project-card-start {
      border-color: var(--accent);
      box-shadow: 0 0 0 1px var(--accent) inset, 0 6px 20px rgba(93, 219, 255, 0.12);
    }
    .project-card-head {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
    }
    .project-card-head strong { font-size: 0.95rem; }
    .project-card-diff {
      font-size: 0.68rem;
      padding: 1px 7px;
      border-radius: 999px;
      border: 1px solid var(--line-strong);
      color: var(--muted, #9fb8c6);
    }
    .project-card-badge {
      font-size: 0.66rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      padding: 1px 8px;
      border-radius: 999px;
      background: var(--accent);
      color: #06202b;
      font-weight: 700;
      margin-left: auto;
    }
    .project-card-svg {
      display: block;
      max-width: 100%;
      height: auto;
      margin: 2px 0;
      overflow: visible;
    }
    .project-card-svg-node { fill: rgba(93, 219, 255, 0.10); stroke: var(--line-strong); stroke-width: 1; }
    .project-card-svg-edge { stroke: var(--accent); stroke-width: 1.5; opacity: 0.7; }
    .project-card-svg-label { fill: var(--text, #dbeff8); font-size: 11px; }
    .project-card-approach { font-size: 0.85rem; margin: 0; color: var(--text, #cfe6f0); }
    .project-card-proscons { display: flex; gap: 12px; flex-wrap: wrap; }
    .project-card-list { font-size: 0.78rem; flex: 1 1 40%; }
    .project-card-list-label {
      display: block;
      font-weight: 600;
      margin-bottom: 2px;
      color: var(--muted, #9fb8c6);
    }
    .project-card-list ul { margin: 0; padding-left: 16px; }
    .project-card-pro .project-card-list-label { color: #7fe0a8; }
    .project-card-con .project-card-list-label { color: #f0a9a0; }
    /* Live timer/alarm countdown attached to the reply that scheduled it. */
    .timer-countdown {
      display: inline-flex;
      align-items: baseline;
      gap: 10px;
      margin-top: 11px;
      padding: 7px 13px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(120, 190, 255, 0.10);
    }
    .timer-countdown-label {
      font-size: 0.86em;
      opacity: 0.78;
    }
    .timer-countdown-value {
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.04em;
      font-size: 1.06em;
    }
    .timer-countdown.is-done {
      background: rgba(255, 170, 90, 0.16);
    }
    .timer-countdown.is-done .timer-countdown-value {
      opacity: 0.9;
    }
    @media (prefers-reduced-motion: reduce) {
      .timer-countdown { transition: none; }
}
    .spotify-playlist-preview {
      display: flex;
      align-items: center;
      gap: 11px;
      width: min(100%, 360px);
      margin-top: 11px;
      padding: 9px;
      color: var(--text);
      text-decoration: none;
      background: rgba(19, 82, 61, 0.22);
      border: 1px solid rgba(76, 214, 133, 0.34);
      border-radius: var(--radius-sm);
      transition: border-color .18s ease, background .18s ease;
    }
    a.spotify-playlist-preview:hover {
      text-decoration: none;
      border-color: rgba(76, 214, 133, 0.72);
      background: rgba(19, 82, 61, 0.36);
    }
    .spotify-playlist-cover {
      width: 68px;
      height: 68px;
      flex: none;
      object-fit: cover;
      border-radius: 6px;
      background: rgba(0, 0, 0, 0.25);
    }
    .spotify-playlist-details {
      display: grid;
      min-width: 0;
      gap: 2px;
    }
    .spotify-playlist-label {
      color: #70eaa0;
      font-size: .69rem;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    .spotify-playlist-details strong {
      overflow: hidden;
      font-size: .94rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .spotify-playlist-meta {
      color: var(--muted);
      font-size: .78rem;
    }

    /* Drop-to-attach hint. Matching the ChatGPT pattern: a compact pill
       centered on the page while a file is being dragged, no full-page dim
       or dashed border -- the rest of the UI stays fully readable. Hidden
       via display:none by default (a stylesheet display:flex on an element
       with `hidden` was showing it on page load); JS toggles .visible.
       Pointer-events off so the drop still lands on the underlying page. */
    #composerDropOverlay {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 100;
      pointer-events: none;
    }
    #composerDropOverlay.visible { display: block; }
    /* Collapses to zero width when there's nothing worth saying (the common case) --
       only takes up room while actively listening, receiving, or reporting an error. */
    .voice-status { flex: 1 1 auto; min-width: 160px; margin: 0; font-size: 0.78rem; text-align: left; }
    .voice-status:empty { display: none; flex: 0 0 0; min-width: 0; }
    .profile-option { display: block; width: 100%; margin-top: 8px; }

    @media (max-width: 980px) {
      .span2 { grid-column: span 6; }
      .span3, .span4, .span5, .span6, .span7, .span8 { grid-column: span 12; }
      .app-shell {
        grid-template-columns: 1fr;
        /* Header row on top, then a 1fr content row. Crucially NO fixed height here
           (only the base min-height:100dvh): a definite 100dvh clamp on a tall page
           makes iOS Safari render the content overlapping the header, because the
           grid's 1fr row overflows the locked container. With only min-height, the
           1fr row grows with tall content (page scrolls, no overlap) yet still fills
           the viewport for short pages so e.g. the Talk ring stays centered. The
           chat page opts into the clamped layout below. */
        grid-template-rows: auto 1fr;
      }
      /* Chat needs the fixed-viewport layout: header + a bounded 1fr body that scrolls
         internally + a pinned composer. .content.chat-content resolves its height:100%
         against that definite 1fr row. */
      .app-shell.chat-shell {
        grid-template-rows: auto 1fr;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
      }
      /* Rail becomes a horizontal top bar on narrow screens -- same structure the
         labelled sidebar used, so the app-shell grid (auto nav row + 1fr content)
         and the chat 100dvh layout are untouched. */
      .corner-nav {
        /* Sticky, not static: a static top bar scrolls away the moment you move
           down a page, taking the HUD button with it and leaving no way back to
           it (Tyler on iPhone: "i dont see the button on the mobile site").
           Pinned to the top, it is always reachable. */
        position: sticky;
        top: 0;
        height: auto;
        width: 100%;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        overflow-x: auto;
        overflow-y: visible;
        scrollbar-width: none;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        /* viewport-fit=cover (see render_page()) lets the page draw under the notch/Dynamic
           Island on iPhone -- without this the header row renders partly behind the notch.
           max() keeps the original padding on devices with no notch (env() resolves to 0). */
        padding-top: max(14px, env(safe-area-inset-top));
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
        padding-bottom: 12px;
      }
      .corner-nav::-webkit-scrollbar { display: none; }
      /* The mobile rail is a compact header; keep the shared brand visible without
         letting the logo consume the first quarter of the screen. */
      .corner-nav { gap: 4px; padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: 8px; }
      /* width:auto is the fix for "the nav is off-screen on mobile": the brand
         inherits width:100% from the desktop rail, and in the horizontal mobile
         bar that made the logo eat the whole row and shove every nav icon --
         including the HUD button -- off the right edge (Tyler, iPhone). Shrunk to
         its content, the icons sit next to it as intended. flex-direction: row so
         the ring and wordmark sit side by side instead of stacking tall. */
      /* margin-right opens a clear gap between the logo and the first nav icon so
         the brand reads as separate from the buttons (Tyler, iPhone). */
      .cn-brand { width: auto; flex-direction: row; gap: 6px; margin-bottom: 0; margin-right: 20px; }
      .cn-brand .brand-ring-svg { width: 30px; height: 30px; }
      .cn-brand-name { font-size: .48rem; }
      .cn-links { flex-direction: row; }
      /* Touch has no hover, so the flyout labels can't help -- hide them. */
      .cn-label { display: none; }
      /* Gear + logout pinned to the right edge of the bar; the popover drops down. */
      .cn-gear { margin: 0 0 0 auto; }
      /* position: FIXED, not absolute. The parent .corner-nav uses overflow-x: auto
         so its icons scroll horizontally on narrow screens, and per CSS spec that
         silently promotes overflow-y from visible to auto -- which clips any
         absolutely-positioned descendant that tries to render below the bar
         (Tyler, iPhone: "creates a box under it that i cannot see"). Fixed
         positioning anchors to the viewport, escaping the overflow parent
         entirely, so the dropdown paints on top of the page. */
      .cn-gear-panel {
        position: fixed;
        left: auto;
        right: 8px;
        top: calc(env(safe-area-inset-top) + 60px);
        bottom: auto;
        min-width: 200px;
        max-width: calc(100vw - 16px);
        max-height: calc(100dvh - 80px);
        overflow-y: auto;
      }
      .cn-gear-panel .cn-label { display: block; }
      .cn-logout { margin-top: 0; }
      .cn-gear ~ .cn-logout { margin-top: 0; }
      /* Same reasoning as .sidebar above, for the bottom edge -- without it the last card on
         a page (e.g. the "Pending" stat on Mission Control) renders flush against, or behind,
         the home indicator / Safari's own toolbar instead of clearing it. */
      .content { padding: 22px 18px calc(32px + env(safe-area-inset-bottom)); }
      .mission-layout { grid-template-columns: 1fr; }
      .ops-deck, .ops-board { grid-template-columns: 1fr; }
      .ops-hero-inner { grid-template-columns: 1fr; }
      .ops-band, .ops-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .status-grid { grid-template-columns: 1fr; }
      .mission-hero { padding: 20px; }
      .hero-title { font-size: 2.3rem; }
      .section-title { align-items: flex-start; flex-direction: column; }
      /* Fills the "1fr" row .app-shell hands it (see above) instead of a fixed height that
         has to guess the sidebar's height ahead of time. */
      .content.chat-content { height: 100%; min-height: 0; }
}
    @media (max-width: 1500px) and (min-width: 981px) {
      .ops-deck { grid-template-columns: 1fr; }
      .ops-hero { min-height: auto; }
      .ops-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .ops-readout.big { min-height: 120px; }
      .ops-board { grid-template-columns: 1fr; }
      .ops-profile-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
    @media (max-width: 680px) {
      .ops-band, .ops-card-grid { grid-template-columns: 1fr; }
      .ops-title { font-size: 3rem; }
      .ops-hero { min-height: auto; }
}

    /* iPhone touch pass: keep controls comfortably tappable without changing desktop
       density. Safari's dynamic toolbar and the home indicator are handled by the
       safe-area padding above; this only improves target size and tap behavior. */
    @media (max-width: 680px) {
      button, .action-link, .icon-btn { min-height: 44px; touch-action: manipulation; }
      .login-shell { padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
      .login { width: calc(100vw - 32px); max-width: calc(100vw - 32px); }
      .login .card, .login form, .login label, .login input { min-width: 0; max-width: 100%; }
      .login .card { padding: 24px 18px; }
}

    /* --orange kept as a secondary accent token: the Talk page's "thinking" state
       still uses it. The dense HUD layer that leaned on it (chamfered panels, radar,
       gauges, reactor core, waveform, scan lines, panel tags, tick rulers) was
       removed in the minimalist pass -- Mission Control is a clean flat dashboard now. */
    :root { --orange: #ff9142; }

    /* Live clock in the Mission Control hero. */
    .ops-kicker-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 14px;
    }

    /* Shared rotation/pulse keyframes -- still used by the brand ring logo
       (.brand-ring-svg) and the Talk page ring. Deliberately NOT gated behind
       prefers-reduced-motion: a slow rotation confined to a small circle isn't the
       parallax/zoom motion that gate exists for, and gating it previously caused a
       "this isn't animating" report when the OS 'show animations' setting was off.
       Talk to the user before adding that gate. */
    @keyframes hud-spin {
      to { transform: rotate(360deg); }
    }
    @keyframes hud-spin-rev {
      to { transform: rotate(-360deg); }
    }
    @keyframes hud-pulse-core {
      0%, 100% { opacity: 0.75; transform: scale(0.9); }
      50% { opacity: 1; transform: scale(1.05); }
    }
    @keyframes blue-ring-idle {
      to { stroke-dashoffset: -202; }
    }
    @keyframes blue-ring-listening {
      0%, 100% { stroke-width: 6; opacity: 0.82; }
      50% { stroke-width: 8; opacity: 1; }
    }
    @keyframes blue-ring-speaking {
      to { stroke-dashoffset: -202; }
    }
    @keyframes blue-ring-speaking-pulse {
      0%, 100% {
        stroke-width: 6;
        opacity: 0.84;
        transform: scale(0.985);
        filter: drop-shadow(0 0 4px rgba(45, 140, 255, 0.82));
      }
      50% {
        stroke-width: 9;
        opacity: 1;
        transform: scale(1.035);
        filter: drop-shadow(0 0 12px rgba(102, 231, 255, 0.95));
      }
    }

    @media (max-width: 980px) {
      .ops-kicker-row { flex-direction: column-reverse; align-items: flex-start; gap: 6px; }
}

    /* ---- Talk page: full-screen voice conversation around an arc-reactor ring
       assembly. The ring idles with slow counter-rotations and reacts to the
       conversation state via [data-state] on .talk-stage (idle / listening /
       thinking / speaking) -- markup stays fixed, only CSS retunes the motion.
       Same prefers-reduced-motion reasoning as .brand-ring-svg. */
    .content.talk-content {
      display: flex;
      flex-direction: column;
      max-width: none;
    }
    .talk-shell {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      text-align: center;
      padding: 12px 0 24px;
    }
    .talk-stage {
      width: min(420px, 76vw);
      flex-shrink: 0;
    }
    .talk-ring-svg {
      display: block;
      width: 100%;
      height: auto;
      filter: drop-shadow(0 0 16px rgba(102, 231, 255, 0.22));
    }
    .talk-stage .brand-ring-svg { width: 100%; height: auto; margin: 0; }
    .talk-ring-svg circle {
      fill: none;
      stroke: var(--accent);
      transform-box: view-box;
      transform-origin: 50% 50%;
    }
    .talk-spin-slow, .talk-spin-rev, .talk-spin-mid, .talk-spin-fast {
      transform-box: view-box;
      transform-origin: 50% 50%;
    }
    .talk-spin-slow { animation: hud-spin 46s linear infinite; }
    .talk-spin-rev { animation: hud-spin-rev 34s linear infinite; }
    .talk-spin-mid { animation: hud-spin 24s linear infinite; }
    .talk-spin-fast { animation: hud-spin-rev 18s linear infinite; }
    .talk-ring-faint { stroke-width: 1; opacity: 0.3; }
    .talk-ring-broken { stroke-width: 1.5; opacity: 0.65; }
    .talk-ring-ticks { stroke-width: 5; opacity: 0.4; }
    .talk-ring-arc { stroke-width: 2.5; stroke-linecap: round; opacity: 0.85; }
    .talk-ring-seg { stroke-width: 12; opacity: 0.55; }
    .talk-ring-dots { stroke-width: 4; opacity: 0.5; }
    .talk-ring-arc2 { stroke-width: 2; stroke-linecap: round; opacity: 0.9; }
    .talk-ring-inner { stroke-width: 1.5; opacity: 0.9; }
    .talk-ring-fill { stroke: none; fill: rgba(102, 231, 255, 0.05); }
    .talk-core-text {
      fill: #eafcff;
      font-family: "Cascadia Code", "Consolas", monospace;
      font-size: 25px;
      font-weight: 600;
      letter-spacing: 6px;
    }

    @keyframes talk-glow-pulse {
      0%, 100% { filter: drop-shadow(0 0 14px rgba(102, 231, 255, 0.25)); }
      50% { filter: drop-shadow(0 0 34px rgba(102, 231, 255, 0.6)); }
    }
    @keyframes talk-scale-pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.035); }
    }
    /* Marches the dash pattern around its circle; stacked on top of the parent
       group's rotation for a "spun up" feel while Mako talks or thinks. */
    @keyframes talk-march {
      to { stroke-dashoffset: -264; }
    }
    .talk-stage[data-state="speaking"] .talk-ring-svg {
      animation: talk-glow-pulse 1.2s ease-in-out infinite, talk-scale-pulse 1.6s ease-in-out infinite;
    }
    .talk-stage[data-state="speaking"] .talk-ring-seg {
      opacity: 0.9;
      animation: none;
      stroke-width: 7;
    }
    .talk-stage[data-state="speaking"] .talk-ring-fill { fill: rgba(102, 231, 255, 0.12); }
    .talk-stage[data-state="thinking"] .talk-ring-arc {
      animation: talk-march 0.9s linear infinite;
    }
    .talk-stage[data-state="thinking"] .talk-ring-dots { opacity: 0.85; }
    .talk-stage[data-state="listening"] .talk-ring-inner {
      stroke: var(--good);
      animation: hud-pulse-core 1.8s ease-in-out infinite;
    }
    .talk-stage[data-state="listening"] .talk-ring-fill { fill: rgba(92, 224, 138, 0.06); }

    .talk-status {
      font-family: "Cascadia Code", "Consolas", monospace;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--accent);
    }
    .talk-stage[data-state="listening"] ~ .talk-status { color: var(--good); }
    .talk-stage[data-state="thinking"] ~ .talk-status { color: var(--orange); }
    .talk-heard {
      margin: 0;
      font-size: 0.84rem;
      min-height: 1.2em;
      max-width: 640px;
    }
    .talk-action-plan {
      max-width: min(640px, 92vw);
      padding: 8px 11px;
      border: 1px solid rgba(88, 213, 244, 0.48);
      border-radius: var(--radius-sm);
      background: rgba(26, 86, 107, 0.20);
      color: var(--muted);
      font-size: .82rem;
      line-height: 1.45;
    }
    .talk-reply {
      margin: 0;
      max-width: 680px;
      min-height: 3em;
      color: #cfe6ee;
      font-size: 1rem;
      line-height: 1.5;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
    .talk-controls {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
    .talk-main-btn {
      min-width: 150px;
      min-height: 48px;
      font-size: 1rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .talk-type-row {
      display: flex;
      gap: 8px;
      /* 100% (of .talk-shell's content box), NOT 92vw -- a vw unit ignores the
         page's own horizontal padding, which forced 6px of page overflow at 375px. */
      width: min(560px, 100%);
    }
    .talk-type-row input { flex: 1; min-width: 0; }
    @media (max-width: 680px) {
      .talk-shell { gap: 12px; }
      .talk-stage { width: min(300px, 82vw); }
      .talk-reply { font-size: 0.94rem; padding: 0 12px; }
      .talk-controls { width: 100%; }
      .talk-main-btn { flex: 1 1 100%; }
}
    .cr-faint { stroke-width: 1; opacity: 0.22; }
    .cr-broken { stroke-width: 1.5; opacity: 0.6; }
    .cr-ticks { stroke-width: 6; opacity: 0.32; }
    .cr-arc { stroke-width: 2.5; stroke-linecap: round; opacity: 0.85; }
    .cr-dots { stroke-width: 4; opacity: 0.5; }
    @keyframes core-hex-pulse {
      0%, 100% { opacity: 0.75; }
      50% { opacity: 1; }
    }
    .readout-brand {
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      color: var(--text);
    }
    .readout-brand span { color: var(--faint); font-weight: 600; }
    .readout-time {
      font-size: 2.4rem;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0.04em;
      color: #eafcff;
      text-shadow: 0 0 18px rgba(102, 231, 255, 0.25);
      font-variant-numeric: tabular-nums;
    }
    .readout-date {
      margin-top: 4px;
      font-size: 0.7rem;
      letter-spacing: 0.22em;
      color: var(--muted);
    }
    .readout-uptime, .readout-key {
      font-size: 0.64rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--faint);
    }
    .readout-uptime b { color: var(--muted); font-weight: 700; margin-left: 4px; }
    .load-group { display: flex; flex-direction: column; gap: 7px; }
    .load-group .readout-key { margin-bottom: 2px; }
    .load-row {
      display: grid;
      grid-template-columns: 34px 1fr auto;
      align-items: center;
      gap: 10px;
      min-width: 220px;
    }
    .load-name {
      font-size: 0.66rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      color: var(--muted);
    }
    .load-bar {
      height: 6px;
      border-radius: 4px;
      background: rgba(102, 231, 255, 0.08);
      border: 1px solid var(--line);
      overflow: hidden;
    }
    .load-bar-fill {
      display: block;
      height: 100%;
      width: 100%;
      border-radius: 4px;
      background: linear-gradient(90deg, var(--accent2), var(--accent));
      box-shadow: 0 0 10px rgba(102, 231, 255, 0.4);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 0.6s cubic-bezier(.16, 1, .3, 1);
    }
    .load-val {
      font-size: 0.68rem;
      font-weight: 700;
      color: var(--text);
      font-variant-numeric: tabular-nums;
      min-width: 3.2em;
      text-align: right;
    }
    .readout-line {
      font-size: 0.68rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--faint);
    }
    .readout-line b { color: var(--muted); font-weight: 700; margin-left: 6px; overflow-wrap: anywhere; }
    .readout-line b.ok { color: var(--good); }
    .readout-line b.bad { color: var(--bad); }
    a.readout-link { display: block; color: var(--muted); transition: color 0.15s; }
    a.readout-link:hover { color: var(--accent); text-decoration: none; }
    a.readout-link span { color: var(--accent); margin-left: 4px; }
    .mic-level-meter {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: min(280px, 70vw);
      min-height: 18px;
      color: var(--faint);
      font: 700 .61rem "Cascadia Code", Consolas, monospace;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .mic-level-label { color: var(--accent); }
    .mic-level-track {
      position: relative;
      flex: 1 1 auto;
      height: 5px;
      overflow: hidden;
      border: 1px solid rgba(102, 231, 255, .22);
      border-radius: 999px;
      background: rgba(102, 231, 255, .06);
    }
    .mic-level-fill {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #4dd8ff 0%, #66e7ff 58%, #f5c542 82%, #ff6b8a 100%);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 90ms linear;
    }
    .mic-level-text { min-width: 60px; text-align: right; }
    .talk-shell .mic-level-meter { margin: 3px auto 0; }
    .voice-state-proxy { display: none; }

    /* Below the point where corner clusters would collide with the core, drop the
       absolute positioning and let everything stack + scroll. No 100dvh clamp, so
       no iOS header overlap. */
    @media (max-width: 900px) {
      .load-row { min-width: 0; width: 100%; max-width: 320px; }
}

    /* Server control is a read-only health console with one deliberate owner-only recovery path. */
    .server-page { max-width: 1420px; margin: 0 auto; padding-bottom: 42px; }
    .server-hero { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin: 16px 0 18px; }
    .server-kicker, .server-panel-label { color: var(--accent); font: 700 .67rem "Cascadia Code", Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; }
    .server-hero h1 { margin: 5px 0 4px; font-size: 1.75rem; letter-spacing: -.025em; }
    .server-hero p { max-width: 68ch; margin: 0; color: var(--muted); }
    .server-stat-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin-bottom: 15px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--line); }
    .server-stat { display: grid; gap: 4px; min-width: 0; padding: 13px; background: rgba(6, 21, 30, .94); }
    .server-stat span { color: var(--faint); font: 700 .62rem "Cascadia Code", Consolas, monospace; letter-spacing: .07em; text-transform: uppercase; }
    .server-stat strong { color: var(--text); font-size: 1.12rem; overflow-wrap: anywhere; }
    .server-stat small { color: var(--muted); font-size: .66rem; overflow-wrap: anywhere; }
    .server-recovery-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 15px; padding: 16px 18px; border: 1px solid rgba(255, 119, 147, .32); border-radius: 10px; background: rgba(50, 16, 28, .42); }
    .server-recovery-pending { border-color: rgba(245, 197, 66, .42); background: rgba(54, 42, 10, .42); }
    .server-recovery-panel h2 { margin: 5px 0 4px; font-size: 1rem; }
    .server-recovery-panel p { max-width: 70ch; margin: 0; color: var(--muted); font-size: .78rem; }
    .server-health-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .server-panel { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: rgba(4, 15, 23, .88); }
    .server-panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
    .server-panel-heading h2 { margin: 0; font-size: 1rem; }
    .server-panel-heading p { margin: 4px 0 0; color: var(--muted); font-size: .73rem; }
    .server-health-dot { width: 9px; height: 9px; margin-top: 4px; border-radius: 50%; }
    .server-health-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid rgba(102, 231, 255, .09); color: var(--text); font-size: .77rem; }
    .server-health-row b { font: 700 .64rem "Cascadia Code", Consolas, monospace; text-transform: uppercase; }
    .server-good { color: var(--good); background: var(--good); box-shadow: 0 0 8px rgba(92, 224, 138, .4); }
    .server-warn { color: var(--warn); background: var(--warn); }
    .server-bad { color: var(--bad); background: var(--bad); }
    .server-health-row .server-good, .server-health-row .server-warn, .server-health-row .server-bad { background: transparent; box-shadow: none; }
    .server-muted, .server-muted-label { color: var(--faint); }
    .server-count { display: grid; place-items: center; min-width: 26px; height: 26px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--accent); font: 700 .68rem "Cascadia Code", Consolas, monospace; }
    .server-errors-panel ul { display: grid; gap: 7px; max-height: 220px; overflow: auto; margin: 0; padding: 0 0 0 17px; color: var(--muted); font: .7rem/1.4 "Cascadia Code", Consolas, monospace; }
    .server-footnote { margin: 14px 0 0; color: var(--faint); font-size: .68rem; }
    .server-flash { max-width: 1420px; margin: 12px auto; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 7px; color: var(--text); background: rgba(102, 231, 255, .06); font-size: .78rem; }
    .connector-flash { width: fit-content; max-width: min(100%, 620px); margin: 10px 0 14px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 7px; color: var(--muted); background: rgba(102, 231, 255, .06); font-size: .78rem; line-height: 1.35; }
    .connector-flash p { margin: 0; }
    @media (max-width: 1050px) { .server-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
    @media (max-width: 720px) {
      .server-hero { align-items: stretch; flex-direction: column; gap: 14px; }
      .server-hero h1 { font-size: 1.5rem; }
      .server-stat-grid, .server-health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .server-recovery-panel { align-items: stretch; flex-direction: column; }
}

    /* Shared mobile browser contract.
       Keep this at the end so new pages inherit the same iPhone/Android behavior without
       needing a page-specific patch. Safari zooms controls below 16px, dense flex rows can
       create a one-pixel horizontal page scroll, and the native tap highlight otherwise makes
       the dark UI feel inconsistent between Safari and Chrome. */
    html {
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
      overflow-x: clip;
    }
    body { overflow-x: clip; }
    .app-shell, .content, main { min-width: 0; }
    button, a, summary, select, input, textarea { -webkit-tap-highlight-color: rgba(102, 231, 255, .16); }

    @media (max-width: 680px) {
      html, body { min-height: 100%; }
      .app-shell { min-height: 100svh; }
      .corner-nav {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
      }
      .content {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
      }
      /* Prevent iOS Safari from zooming the page when a form field receives focus. */
      input:not([type="checkbox"]):not([type="radio"]),
      select,
      textarea { font-size: 16px; }
      button, .action-link, .icon-btn, .cn-link,
      .setup-group > summary, .setup-acc > summary,
      .chat-session-link, .chat-new-link, .chat-settings-toggle,
      .map-go-to summary, .memory-add-trigger { min-height: 44px; }
      summary { touch-action: manipulation; }
      label:has(input[type="checkbox"]) {
        align-items: flex-start;
        white-space: normal;
      }
      label:has(input[type="checkbox"]) input { flex: 0 0 auto; margin-top: 3px; }
      .row > input, .row > select, .row > textarea { min-width: 0; flex: 1 1 180px; }
      .setup-acc-title, .setup-group > summary { overflow-wrap: anywhere; }
      .futurecast-strip, .table-wrap, .code-block, pre {
        -webkit-overflow-scrolling: touch;
      }
}

    @supports (height: 100svh) {
      .app-shell { min-height: 100svh; }
}

    /* Phone layout floor: preserve the information architecture while allowing every
       primary block to reflow inside narrow viewports. These rules intentionally live at
       the end of the shared sheet so page-specific styles cannot leave a generic form row,
       title, or grid span stranded off-screen. */
    @media (max-width: 680px) {
      .content { padding-left: 14px; padding-right: 14px; }
      .content-header { min-width: 0; margin-bottom: 18px; }
      .content-header h1,
      .content-header h2,
      .section-title h2,
      .card h2 { overflow-wrap: anywhere; text-wrap: pretty; }
      .content-header h1 { font-size: 1.45rem; line-height: 1.18; }
      .content-header .muted { overflow-wrap: anywhere; line-height: 1.45; }
      .card { padding: 15px; }
      .grid > [class*="span"] { grid-column: 1 / -1; }
      .row, .section-title { min-width: 0; }
      .row > *, .section-title > *, .content-header > * { min-width: 0; max-width: 100%; }
      .row > input, .row > select, .row > textarea { flex-basis: 100%; width: 100%; }
      .command-pill { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
      .minw-160, .minw-200 { min-width: 0; }
      label:has(input[type="checkbox"]) { white-space: normal; }
      button, input, select, textarea { max-width: 100%; }
      .table-wrap, .code-block, pre { max-width: 100%; overflow-x: auto; }
}

    .health-connect-panel {
      display: grid;
      gap: 10px;
      padding: 14px;
      border: 1px solid rgba(92, 224, 138, .28);
      border-radius: var(--radius-sm);
      background: rgba(7, 34, 29, .42);
    }
    .health-connect-panel strong { color: var(--good); }
    .health-connect-panel p { margin: 0; }
    .health-token-row { display: flex; gap: 8px; align-items: center; }
    .health-token-row input { min-width: 0; flex: 1; font-family: "Cascadia Code", Consolas, monospace; letter-spacing: .02em; }
    .health-step-list { display: grid; gap: 7px; margin: 0; padding-left: 1.3rem; color: var(--muted); font-size: .8rem; }
    .health-step-list strong { color: var(--text); }
    .health-step-list code, .health-connect-panel code { color: var(--accent); }
    @media (max-width: 680px) {
      .health-token-row { align-items: stretch; flex-direction: column; }
      .health-token-row button { width: 100%; }
}
    .calendar-nav-button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--text); font-size: 1.25rem; cursor: pointer; }
    .calendar-nav-button:hover { border-color: var(--accent); color: var(--accent); }
    .calendar-brand-logo { flex: 0 0 auto; width: 15px; height: 15px; margin-right: 9px; vertical-align: middle; }

/* Budget & Shopping: a task-focused workspace, intentionally more ledger than dashboard. */
.workspace-tabs { display: flex; gap: 22px; margin: 24px 0 18px; border-bottom: 1px solid var(--line); }
.workspace-tabs a { color: var(--muted); padding: 0 0 11px; border-bottom: 2px solid transparent; font-size: .86rem; }
.workspace-tabs a:hover, .workspace-tabs a.active { color: var(--text); border-color: var(--accent); text-decoration: none; }
.budget-page { display: grid; gap: 16px; }
.budget-profile-picker { display: flex; align-items: end; gap: 8px; }
.budget-profile-picker label { display: grid; gap: 5px; color: var(--muted); font-size: .75rem; }
.budget-profile-picker button { min-height: 38px; padding: 7px 10px; }
.notice { border: 1px solid rgba(102, 231, 255, .34); background: rgba(14, 47, 61, .55); border-radius: 10px; color: var(--text); padding: 11px 14px; margin-bottom: 16px; line-height: 1.45; }
.budget-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.budget-summary > div { min-width: 0; display: grid; gap: 6px; padding: 17px 18px; border-right: 1px solid var(--line); }
.budget-summary > div:last-child { border-right: 0; }
.budget-summary span, .budget-summary small { color: var(--muted); font-size: .75rem; }
.budget-summary strong { color: var(--text); font-size: 1.35rem; letter-spacing: -.02em; }
.budget-summary .budget-available { background: rgba(23, 86, 91, .18); }
.budget-summary .budget-available strong, .budget-positive { color: #66e7a4; }
.budget-negative { color: #ff817b; }
.budget-workspace-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .8fr); gap: 16px; align-items: start; }
.budget-column { min-width: 0; }
.budget-table-card { padding-bottom: 6px; }
.table-wrap { overflow-x: auto; }
.budget-table-card table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.budget-table-card th, .budget-table-card td { text-align: left; padding: 11px 12px; border-top: 1px solid var(--line); white-space: nowrap; }
.budget-table-card th { color: var(--muted); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; }
.budget-form, .research-form, .browser-search-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 9px; margin-top: 13px; }
.budget-form label, .research-form label, .browser-search-form label { min-width: 0; display: grid; gap: 5px; color: var(--muted); font-size: .75rem; }
.budget-form label:first-child:nth-last-child(1), .budget-form label:first-child:nth-last-child(2), .research-form label:first-child { grid-column: 1 / -1; }
.budget-form button, .research-form button, .browser-search-form button { justify-self: start; }
.budget-list { display: grid; gap: 0; margin: 12px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.budget-list li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.budget-list li > div, .budget-list li span { display: grid; gap: 3px; }
.budget-list span { color: var(--muted); font-size: .76rem; }
.budget-list.compact li { align-items: center; }
.budget-goal { display: grid !important; gap: 8px; }
.budget-goal-form { display: flex; align-items: end; gap: 8px; }
.budget-goal-form label { display: grid; gap: 4px; color: var(--muted); font-size: .72rem; }
.budget-goal-form input { width: 95px; }
.budget-goal-form button { min-height: 34px; padding: 7px 10px; }
progress { width: 100%; height: 7px; accent-color: var(--accent); }
.budget-csv { border-style: dashed; }
.research-brief { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, .85fr); gap: 20px; align-items: center; }
.research-brief h2, .browser-hero h2, .browser-cart h2 { margin: 5px 0 7px; }
.research-brief p, .browser-hero p { max-width: 65ch; line-height: 1.5; }
.research-results { display: grid; gap: 12px; }
.research-result { border: 1px solid var(--line); border-radius: 10px; background: rgba(7, 20, 29, .64); padding: 15px; }
.research-result-head { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.research-result-head strong { flex: 1 1 300px; }
.research-price { color: #66e7a4; font-weight: 800; }
.research-result p { color: var(--muted); line-height: 1.45; margin: 10px 0; }
.research-result dl { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 12px; }
.research-result dl div { display: grid; gap: 2px; }
.research-result dt { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
.research-result dd { margin: 0; font-size: .82rem; }
.research-empty { display: grid; gap: 6px; padding: 46px 20px; text-align: center; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); }
.inline-form { display: inline-flex; margin: 0; }
.inline-form button { min-height: 34px; padding: 7px 10px; font-size: .78rem; }
.inline-form.setup-test-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }
.inline-form.setup-test-row button { flex: 0 0 auto; }
.inline-form.setup-test-row .muted { flex: 1 1 240px; min-width: 0; }
.browser-hero { display: flex; justify-content: space-between; gap: 20px; align-items: start; }
.browser-actions { display: grid; gap: 14px; }
.browser-launch { display: flex; flex-wrap: wrap; gap: 8px; }
.browser-search-form { grid-template-columns: minmax(0, 1fr) auto; margin-top: 0; }
.browser-search-form label { grid-column: auto; }
.browser-safety-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.browser-safety-grid ul { margin: 11px 0 0; padding-left: 18px; color: var(--muted); line-height: 1.65; }
.browser-cart { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; }
.browser-cart h2, .browser-cart p { width: 100%; }
.browser-cart p { margin: -2px 0 0; }
.browser-confirm { border-color: rgba(246, 196, 83, .68); }
.browser-snapshot { overflow: hidden; }
.browser-snapshot img { display: block; width: 100%; max-height: 560px; margin-top: 13px; border: 1px solid var(--line); border-radius: 8px; object-fit: contain; object-position: top; background: #000; }
.gap-sm { gap: 8px; }
.voice-confidence { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; margin-top: 6px; padding: 8px 10px; border: 1px solid rgba(102, 231, 255, .28); border-radius: 8px; background: rgba(4, 25, 36, .72); color: #cdeef8; font-size: .78rem; }
.voice-confidence button { margin-left: auto; min-height: 30px; padding: 5px 9px; }
.talk-shell .voice-confidence { justify-content: center; max-width: 560px; margin: 8px auto 0; }
.scene-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.scene-card { min-height: 250px; display: flex; flex-direction: column; gap: .75rem; }
.scene-card .row:last-child { margin-top: auto; }
.scene-actions { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.scene-actions li { display: flex; justify-content: space-between; gap: .75rem; color: var(--muted); }
.scene-actions small { color: var(--warn); text-transform: uppercase; letter-spacing: .06em; }
.scene-confirmation { border-color: rgba(246, 196, 83, .68); }
.scene-safety { margin-top: 1rem; }
.status-note {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(102, 231, 255, .09);
  color: var(--text);
}
@media (max-width: 900px) {
  .budget-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .budget-summary > div:nth-child(2) { border-right: 0; }
  .budget-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .budget-workspace-grid, .research-brief { grid-template-columns: 1fr; }
}
@media (max-width: 590px) {
  .workspace-tabs { gap: 15px; overflow-x: auto; }
  .budget-summary { grid-template-columns: 1fr; }
  .budget-summary > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .budget-summary > div:last-child { border-bottom: 0; }
  .budget-form, .research-form, .browser-search-form, .browser-safety-grid { grid-template-columns: 1fr; }
  .budget-form label, .research-form label, .browser-search-form label { grid-column: 1 / -1; }
  .browser-hero { display: grid; }
  .budget-profile-picker { align-self: stretch; }
}
/* Truck is a focused, at-a-glance driving view: hide the site nav rail so the map gets the
   full width. :has() lets the shell react to the mode marker on the (descendant) hud-root, so
   this is pure CSS with no flash. The Home/Truck tabs stay visible -- switch to Home for the
   rail back. Scoped to truck so Home mode keeps the rail. */
.app-shell:has(.hud-root[data-hud-mode="truck"]) { grid-template-columns: minmax(0, 1fr); }
.app-shell:has(.hud-root[data-hud-mode="truck"]) .corner-nav { display: none; }

/* The gear popover no longer stays open on its own pages, so the summary itself
   carries the "you are inside here" cue instead. */
.cn-gear.gear-active > summary { color: var(--text); border-color: var(--accent); }
/* The HUD entry is the first thing in the mobile rail and the one Tyler reaches
   for on the way out the door -- give it the accent so it reads as a button. */
@media (max-width: 900px) {
  .corner-nav .cn-link[href="/hud"] { border-color: var(--accent); color: var(--text); }
}
@keyframes hud-talk-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

/* Accessibility floor for compact telemetry. Technical labels stay dense without
   dropping below a comfortably glanceable size on a 15px root. */
:is(
  .brain-atlas-stat small,
  .brain-atlas-legend-row,
  .memory-tier-pill,
  .brain-filter-form label,
  .brain-view-mode label,
  .brain-graph-count span,
  .brain-graph-footer,
  .brain-confidence,
  .brain-fs-hint,
  .brain-activity,
  .map-reference-status,
  .map-reference-overlay,
  .map-ambient-button,
  .map-video-assistant-label,
  .map-video-assistant-status,
  .load-name,
  .load-val,
  .readout-line,
  .core-model-picker label,
  .core-model-picker select,
  .core-model-picker button,
  .mic-level-meter,
  .server-stat small,
  .server-footnote,
  .personal-calendar-hour span,
  .personal-calendar-event time,
  .personal-calendar-empty
) { font-size: .78rem; }


/* Photo-memory cards use the shared shell on every surface. */
.immich-memories {
  display: grid;
  grid-template-columns: repeat(4, minmax(72px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.immich-memories img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
}
@media (max-width: 680px) {
  .immich-memories { grid-template-columns: repeat(2, minmax(96px, 1fr)); }
}

.server-gate-panel { margin-bottom: 15px; }