/* ─────────────────────────────────────────────────────────────
     ARKELIA. Palette taken from the mark: a very dark green ink and
     a single saturated green accent. The brand document rules out
     corporate blue, so the neutrals are biased toward the accent's
     green rather than the usual grey.

     The accent doubles as the "healthy" semantic colour. That is
     deliberate: in a console whose entire subject is protection,
     green meaning "protected" and green meaning "ARKELIA" are the
     same claim. Amber and red stay reserved for state and are never
     used decoratively.
     ───────────────────────────────────────────────────────────── */
  :root {
    --ink:        #1B241E;
    --ink-2:      #4A5850;
    --ink-3:      #7C8A82;
    --paper:      #F3F6F3;
    --surface:    #FFFFFF;
    --surface-2:  #FAFBFA;
    --line:       #E0E7E1;
    --line-soft:  #ECF1ED;

    --rail:       #1B241E;
    --rail-2:     #28352B;
    --rail-ink:   #95A69B;
    --rail-hot:   #FFFFFF;

    /* --accent is the readable green for text, borders and icons.
       --accent-vivid is the mark's green, reserved for fills where
       contrast is carried by an adjacent dark ink instead. */
    --accent:     #2F9E3F;
    --accent-vivid:#3DBE3E;
    --accent-ink: #10200F;
    --accent-bg:  #E8F5E9;
    --accent-line:#BEE3C0;

    --ok:         #2F9E3F;
    --ok-bg:      #E8F5E9;
    --warn:       #A9620B;
    --warn-bg:    #FBF0E2;
    --crit:       #B42318;
    --crit-bg:    #FCEBE9;

    --shadow: 0 1px 2px rgba(27, 36, 30, .07), 0 1px 3px rgba(27, 36, 30, .05);

    --sans: "Segoe UI Variable Text", ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
    --display: "Segoe UI Variable Display", "Segoe UI Semibold", ui-sans-serif, -apple-system, system-ui, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;

    --rail-w: 236px;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --ink:        #E7EDE8;
      --ink-2:      #9DAEA3;
      --ink-3:      #6E7F74;
      --paper:      #0D1310;
      --surface:    #141C17;
      --surface-2:  #111813;
      --line:       #232E27;
      --line-soft:  #1B241E;

      --rail:       #0A0F0C;
      --rail-2:     #1A231D;
      --rail-ink:   #8A9C90;

      --accent:     #45C24F;
      --accent-vivid:#3DBE3E;
      --accent-ink: #08130A;
      --accent-bg:  #102A14;
      --accent-line:#204E26;

      --ok:         #45C24F;
      --ok-bg:      #102A14;
      --warn:       #D08A2C;
      --warn-bg:    #2A1E0C;
      --crit:       #E5675A;
      --crit-bg:    #2E1512;

      --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .32);
    }
  }

  :root[data-theme="light"] {
    --ink: #1B241E;  --ink-2: #4A5850;  --ink-3: #7C8A82;
    --paper: #F3F6F3; --surface: #FFFFFF; --surface-2: #FAFBFA;
    --line: #E0E7E1; --line-soft: #ECF1ED;
    --rail: #1B241E; --rail-2: #28352B; --rail-ink: #95A69B;
    --accent: #2F9E3F; --accent-vivid: #3DBE3E; --accent-ink: #10200F;
    --accent-bg: #E8F5E9; --accent-line: #BEE3C0;
    --ok: #2F9E3F; --ok-bg: #E8F5E9;
    --warn: #A9620B; --warn-bg: #FBF0E2;
    --crit: #B42318; --crit-bg: #FCEBE9;
    --shadow: 0 1px 2px rgba(27, 36, 30, .07), 0 1px 3px rgba(27, 36, 30, .05);
  }

  :root[data-theme="dark"] {
    --ink: #E7EDE8;  --ink-2: #9DAEA3;  --ink-3: #6E7F74;
    --paper: #0D1310; --surface: #141C17; --surface-2: #111813;
    --line: #232E27; --line-soft: #1B241E;
    --rail: #0A0F0C; --rail-2: #1A231D; --rail-ink: #8A9C90;
    --accent: #45C24F; --accent-vivid: #3DBE3E; --accent-ink: #08130A;
    --accent-bg: #102A14; --accent-line: #204E26;
    --ok: #45C24F; --ok-bg: #102A14;
    --warn: #D08A2C; --warn-bg: #2A1E0C;
    --crit: #E5675A; --crit-bg: #2E1512;
    --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .32);
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    font-family: var(--sans);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; text-wrap: balance; }

  button { font: inherit; color: inherit; }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
  }

  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
  }

  /* ── Shell ─────────────────────────────────────────────────── */
  .app { display: grid; grid-template-columns: var(--rail-w) 1fr; min-height: 100vh; }

  .rail {
    background: var(--rail);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
  }

  .brand {
    display: flex; align-items: center; gap: 11px;
    padding: 18px 18px 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  /* The mark sits directly on the rail rather than in a tinted chip:
     it is already a solid geometric form and a container only weakens it. */
  .brand-mark { width: 26px; height: 23px; flex: none; display: block; }

  /* Uppercase with real tracking — the brand document asks for caps
     because "ARKELIA en versalitas es donde el nombre gana solidez". */
  .brand-name {
    font-family: var(--display);
    font-size: 14px; font-weight: 700;
    letter-spacing: .13em; text-transform: uppercase;
    color: var(--rail-hot); line-height: 1.15;
  }
  .brand-name .ia { color: var(--accent-vivid); }
  .brand-sub {
    font-size: 10px; color: var(--rail-ink);
    letter-spacing: .09em; text-transform: uppercase; margin-top: 2px;
  }

  .nav { padding: 10px 10px; display: flex; flex-direction: column; gap: 1px; }
  .nav-label {
    font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    color: #5C6D82; padding: 14px 8px 6px;
  }
  .nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 9px; border-radius: 6px;
    background: none; border: 0; width: 100%;
    text-align: left; cursor: pointer;
    color: var(--rail-ink); font-size: 13px;
    transition: background .12s, color .12s;
  }
  .nav-item:hover { background: var(--rail-2); color: var(--rail-hot); }
  .nav-item[aria-current="page"] { background: var(--rail-2); color: var(--rail-hot); font-weight: 600; }
  .nav-item svg { flex: none; opacity: .85; }
  .nav-count {
    margin-left: auto; font-family: var(--mono); font-size: 11px;
    padding: 1px 6px; border-radius: 20px;
    background: rgba(255,255,255,.08);
  }
  .nav-count.hot { background: var(--crit); color: #fff; }

  .rail-foot {
    margin-top: auto; padding: 14px 18px;
    border-top: 1px solid rgba(255,255,255,.07);
    font-size: 11.5px; color: #5C6D82;
    display: flex; flex-direction: column; gap: 3px;
  }
  .rail-foot strong { color: var(--rail-ink); font-weight: 500; }

  /* ── Top bar ───────────────────────────────────────────────── */
  .main { min-width: 0; display: flex; flex-direction: column; }

  .topbar {
    display: flex; align-items: center; gap: 14px;
    padding: 0 22px; height: 54px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 20;
  }
  .crumb { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-3); }
  .crumb b { color: var(--ink); font-weight: 600; }
  .crumb-link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--accent); }
  .crumb-link:hover { text-decoration: underline; }

  .search {
    margin-left: auto; position: relative;
  }
  .search input {
    font: inherit; font-size: 12.5px;
    width: 210px; padding: 6px 10px 6px 30px;
    border: 1px solid var(--line); border-radius: 6px;
    background: var(--surface-2); color: var(--ink);
  }
  .search input::placeholder { color: var(--ink-3); }
  .search svg { position: absolute; left: 9px; top: 7px; color: var(--ink-3); }

  .org {
    display: flex; align-items: center; gap: 8px;
    padding-left: 14px; border-left: 1px solid var(--line);
    font-size: 12.5px;
  }
  .avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--accent-bg); color: var(--accent);
    display: grid; place-items: center;
    font-size: 11px; font-weight: 700;
    border: 1px solid var(--accent-line);
  }

  .page { padding: 22px; display: flex; flex-direction: column; gap: 18px; }

  /* ── Common bits ───────────────────────────────────────────── */
  .card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 9px;
    box-shadow: var(--shadow);
  }
  .card-head {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--line-soft);
  }
  .card-head h2 { font-size: 13.5px; letter-spacing: -.005em; }
  .card-head .hint { font-size: 11.5px; color: var(--ink-3); }
  .card-head .spacer { margin-left: auto; }

  .eyebrow {
    font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
    color: var(--ink-3); font-weight: 600;
  }

  .num { font-variant-numeric: tabular-nums; }
  .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

  .btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px; border-radius: 6px;
    border: 1px solid var(--line); background: var(--surface);
    font-size: 12.5px; cursor: pointer;
    transition: background .12s, border-color .12s;
  }
  .btn:hover { background: var(--surface-2); border-color: var(--ink-3); }
  /* The mark's green is too light to carry white text, so the primary
     action pairs it with the brand's dark ink instead of desaturating it. */
  .btn-primary {
    background: var(--accent-vivid); border-color: var(--accent-vivid);
    color: var(--accent-ink); font-weight: 600;
  }
  .btn-primary:hover { filter: brightness(1.06); }
  .btn-sm { padding: 3px 8px; font-size: 11.5px; }

  /* Status is encoded in shape and colour, not colour alone. */
  .pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px 2px 6px; border-radius: 20px;
    font-size: 11.5px; font-weight: 500; white-space: nowrap;
    border: 1px solid transparent;
  }
  .pill::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; flex: none;
  }
  .pill.ok   { color: var(--ok);   background: var(--ok-bg);   border-color: color-mix(in oklab, var(--ok) 22%, transparent); }
  .pill.warn { color: var(--warn); background: var(--warn-bg); border-color: color-mix(in oklab, var(--warn) 22%, transparent); }
  .pill.crit { color: var(--crit); background: var(--crit-bg); border-color: color-mix(in oklab, var(--crit) 25%, transparent); }
  .pill.mute { color: var(--ink-2); background: var(--line-soft); border-color: var(--line); }
  .pill.lock { color: var(--accent); background: var(--accent-bg); border-color: var(--accent-line); }
  .pill.lock::before { display: none; }

  /* ── KPI strip ─────────────────────────────────────────────── */
  /* Explicit counts rather than auto-fit: with six tiles, auto-fit lands on a
     ragged 4 + 2 at common widths. Balanced rows read as deliberate. */
  .kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  @media (min-width: 720px)  { .kpis { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 1500px) { .kpis { grid-template-columns: repeat(6, 1fr); } }
  .kpi { padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; }
  .kpi .label { font-size: 11.5px; color: var(--ink-2); }
  .kpi .value {
    font-family: var(--display); font-size: 26px; font-weight: 600;
    letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15;
  }
  .kpi .foot { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
  .kpi.is-crit { border-left: 3px solid var(--crit); }
  .kpi.is-crit .value { color: var(--crit); }
  .kpi.is-lock { border-left: 3px solid var(--accent); }

  /* ── Incident banner ───────────────────────────────────────── */
  .incident {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 14px 16px;
    background: var(--crit-bg);
    border: 1px solid color-mix(in oklab, var(--crit) 30%, transparent);
    border-left: 3px solid var(--crit);
    border-radius: 9px;
  }
  .incident .ico { color: var(--crit); flex: none; margin-top: 1px; }
  .incident h3 { font-size: 13.5px; color: var(--crit); margin-bottom: 3px; }
  .incident p { margin: 0; font-size: 12.5px; color: var(--ink-2); max-width: 74ch; }
  .incident .acts { margin-left: auto; display: flex; gap: 8px; flex: none; }

  /* ── Tables ────────────────────────────────────────────────── */
  .tablewrap { overflow-x: auto; }
  table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
  thead th {
    text-align: left; font-weight: 600; font-size: 10.5px;
    letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3);
    padding: 9px 14px; border-bottom: 1px solid var(--line);
    background: var(--surface-2); white-space: nowrap;
    /* Anchored to the scroll container, which is .tablewrap because its
       overflow-x makes it one. Offsetting against the viewport top bar here
       would push the header down over the first row instead of pinning it. */
    position: sticky; top: 0; z-index: 5;
  }
  tbody td { padding: 10px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
  tbody tr:last-child td { border-bottom: 0; }
  tbody tr.row { cursor: pointer; transition: background .1s; }
  tbody tr.row:hover { background: var(--surface-2); }
  tbody tr.row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  td.right, th.right { text-align: right; }

  /* Severity stripe: state readable before any text is parsed. */
  td.stripe { border-left: 3px solid transparent; padding-left: 11px; }
  tr.sev-crit td.stripe { border-left-color: var(--crit); }
  tr.sev-warn td.stripe { border-left-color: var(--warn); }
  tr.sev-ok   td.stripe { border-left-color: transparent; }

  .devname { font-weight: 600; display: flex; align-items: center; gap: 7px; }
  .devsub { font-size: 11.5px; color: var(--ink-3); }

  /* Three-axis health: backed up ≠ verified ≠ proven restorable. */
  .axes { display: flex; gap: 4px; }
  .axis {
    width: 22px; height: 18px; border-radius: 4px;
    display: grid; place-items: center;
    font-size: 9px; font-weight: 700; letter-spacing: .02em;
    border: 1px solid transparent;
  }
  .axis.ok   { background: var(--ok-bg);   color: var(--ok);   border-color: color-mix(in oklab, var(--ok) 20%, transparent); }
  .axis.warn { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in oklab, var(--warn) 20%, transparent); }
  .axis.crit { background: var(--crit-bg); color: var(--crit); border-color: color-mix(in oklab, var(--crit) 22%, transparent); }
  .axis.none { background: var(--line-soft); color: var(--ink-3); border-color: var(--line); }

  /* ── Immutability bar: the product's whole thesis, made visible ── */
  .lockbar { display: flex; flex-direction: column; gap: 4px; min-width: 132px; }
  .lockbar .track {
    height: 6px; border-radius: 3px; overflow: hidden;
    background: var(--line-soft); border: 1px solid var(--line);
    display: flex;
  }
  .lockbar .fill { background: var(--accent); }
  .lockbar .fill.partial { background: repeating-linear-gradient(
      135deg, var(--accent) 0 4px, color-mix(in oklab, var(--accent) 55%, transparent) 4px 8px); }
  .lockbar .cap { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

  /* ── Sparkline ─────────────────────────────────────────────── */
  .spark { display: block; }
  .spark .area { fill: var(--accent); opacity: .13; }
  .spark .line { fill: none; stroke: var(--accent); stroke-width: 1.4; }
  .spark .dot  { fill: var(--accent); }
  .spark.alarm .area { fill: var(--crit); opacity: .16; }
  .spark.alarm .line { stroke: var(--crit); }
  .spark.alarm .dot  { fill: var(--crit); }

  /* ── Filters ───────────────────────────────────────────────── */
  .filters { display: flex; gap: 6px; flex-wrap: wrap; }
  .chip {
    padding: 4px 11px; border-radius: 20px; font-size: 12px;
    border: 1px solid var(--line); background: var(--surface);
    cursor: pointer; color: var(--ink-2);
    transition: background .12s, color .12s, border-color .12s;
  }
  .chip:hover { border-color: var(--ink-3); }
  .chip[aria-pressed="true"] {
    background: var(--ink); color: var(--surface); border-color: var(--ink);
    font-weight: 500;
  }

  /* ── Two-column ────────────────────────────────────────────── */
  .split { display: grid; grid-template-columns: 1.55fr 1fr; gap: 18px; align-items: start; }
  @media (max-width: 1120px) { .split { grid-template-columns: 1fr; } }

  /* ── Activity feed ─────────────────────────────────────────── */
  .feed { display: flex; flex-direction: column; }
  .ev {
    display: flex; gap: 11px; padding: 11px 16px;
    border-bottom: 1px solid var(--line-soft); font-size: 12.5px;
  }
  .ev:last-child { border-bottom: 0; }
  .ev .dot {
    width: 7px; height: 7px; border-radius: 50%; flex: none; margin-top: 6px;
    background: var(--ink-3);
  }
  .ev.ok .dot { background: var(--ok); }
  .ev.warn .dot { background: var(--warn); }
  .ev.crit .dot { background: var(--crit); }
  .ev .body { min-width: 0; }
  .ev .when { margin-left: auto; flex: none; color: var(--ink-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
  .ev .who { color: var(--ink-3); font-size: 11.5px; }

  /* ── Fleet bar chart ───────────────────────────────────────── */
  /* Every day totals the same twelve machines, so a fully saturated stack
     would just be a wall of green. The healthy share is deliberately quiet
     and only the failures carry colour — the chart should be boring on a
     good week and impossible to miss on a bad one. */
  .bars { display: flex; align-items: flex-end; gap: 7px; height: 118px; padding: 16px 16px 0; }
  .bars .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; height: 100%; }
  .bars .seg { border-radius: 2px; }
  .bars .seg.ok { background: var(--accent); opacity: .2; }
  .bars .seg.warn { background: var(--warn); }
  .bars .seg.crit { background: var(--crit); }
  .barcount {
    font-size: 10.5px; font-variant-numeric: tabular-nums; text-align: center;
    color: var(--crit); font-weight: 600; height: 14px;
  }
  .barcount.clean { color: var(--ink-3); font-weight: 400; }
  .barlabels { display: flex; gap: 7px; padding: 6px 16px 14px; }
  .barlabels span { flex: 1; text-align: center; font-size: 10.5px; color: var(--ink-3); }
  .legend { display: flex; gap: 14px; padding: 0 16px 14px; font-size: 11.5px; color: var(--ink-2); }
  .legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 5px; }

  /* ── Device detail ─────────────────────────────────────────── */
  .dhead { display: flex; gap: 18px; align-items: flex-start; padding: 18px; flex-wrap: wrap; }
  .dhead .id { display: flex; flex-direction: column; gap: 5px; }
  .dhead h1 { font-size: 20px; letter-spacing: -.02em; }
  .dhead .meta { font-size: 12.5px; color: var(--ink-3); display: flex; gap: 14px; flex-wrap: wrap; }
  .dhead .acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

  .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
           border-top: 1px solid var(--line-soft); }
  .fact { padding: 13px 18px; border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 3px; }
  .fact:last-child { border-right: 0; }
  .fact .k { font-size: 11px; color: var(--ink-3); }
  .fact .v { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

  .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); padding: 0 6px; background: var(--surface); }
  .tab {
    background: none; border: 0; padding: 10px 13px; cursor: pointer;
    font-size: 12.5px; color: var(--ink-2); border-bottom: 2px solid transparent;
    margin-bottom: -1px;
  }
  .tab:hover { color: var(--ink); }
  .tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }

  /* ── Signal readout (anomaly detector) ─────────────────────── */
  .signals { display: flex; flex-direction: column; }
  .sig { display: grid; grid-template-columns: 1fr 78px 96px; gap: 12px; align-items: center;
         padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
  .sig:last-child { border-bottom: 0; }
  .sig .name { font-size: 12.5px; }
  .sig .why { font-size: 11.5px; color: var(--ink-3); }
  .sig .meter { height: 5px; border-radius: 3px; background: var(--line-soft); position: relative; overflow: hidden; }
  .sig .meter i { position: absolute; inset: 0 auto 0 0; background: var(--ink-3); border-radius: 3px; }
  .sig.hit .meter i { background: var(--crit); }
  .sig .val { text-align: right; font-family: var(--mono); font-size: 12px; }
  .sig.hit .val { color: var(--crit); font-weight: 600; }

  .srcline { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line-soft); }
  .srcline:last-child { border-bottom: 0; }
  .srcline .path { font-family: var(--mono); font-size: 12px; }
  .srcline .sz { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink-2); }

  .empty { padding: 34px 16px; text-align: center; color: var(--ink-3); font-size: 12.5px; }

  .note {
    font-size: 11.5px; color: var(--ink-3); padding: 11px 16px;
    background: var(--surface-2); border-top: 1px solid var(--line-soft);
  }

  /* ── Storage view ──────────────────────────────────────────── */
  .tiers { display: flex; height: 26px; border-radius: 5px; overflow: hidden; border: 1px solid var(--line); }
  .tiers div { display: grid; place-items: center; font-size: 11px; color: #fff; font-weight: 500; }
  .tierlegend { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 12px; font-size: 12px; color: var(--ink-2); }
  .tierlegend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 6px; }

  .checks { display: flex; flex-direction: column; }
  .chk { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; }
  .chk:last-child { border-bottom: 0; }
  .chk .mark { flex: none; }
  .chk .mark.ok { color: var(--ok); }
  .chk .mark.crit { color: var(--crit); }
  .chk code { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }
  .chk .tail { margin-left: auto; font-size: 11.5px; color: var(--ink-3); }

  @media (max-width: 860px) {
    .app { grid-template-columns: 1fr; }
    .rail { position: static; height: auto; }
    .nav { flex-direction: row; overflow-x: auto; }
    .nav-label, .rail-foot { display: none; }
  }


/* ── Server-rendered overrides ─────────────────────────────────
   Navigation is anchors rather than buttons here, so the link
   defaults have to be reset explicitly. */
a.nav-item { text-decoration: none; }
a.nav-item:hover { text-decoration: none; }
.bars .col.nodata {
  border: 1px dashed var(--line);
  border-radius: 3px;
  background: repeating-linear-gradient(135deg, var(--line-soft) 0 5px, transparent 5px 10px);
}