/* Shared look for every full-page widget. Spliced in at build time wherever a
 * stylesheet contains the line:   @include base;
 *
 * Severity is ORDERED, not categorical, so it is encoded as a single warm ramp
 * separated by lightness (OKLab L 0.84 -> 0.65 -> 0.44): worse is darker, which
 * survives greyscale, a photocopier and a red-green colour-blind tech. "OK" and
 * "Offline" are different jobs, so they get their own hues. Every state also
 * prints its word and a glyph, so colour never carries the meaning on its own.
 * Text always wears ink tokens; the colour lives in the bar beside it.
 */
.nd{--ink:#111827;--mute:#6b7280;--line:#e5e7eb;--bg:#f3f5f8;--card:#fff;
    --bar-ok:#047857;--bar-watch:#fdba74;--bar-soon:#ea580c;--bar-crit:#991b1b;--bar-off:#9ca3af;
    --tint-ok:#ecfdf5;--tint-watch:#fff7ed;--tint-soon:#ffedd5;--tint-crit:#fee2e2;--tint-off:#f3f4f6;
    --ink-ok:#065f46;--ink-watch:#7c2d12;--ink-soon:#7c2d12;--ink-crit:#7f1d1d;--ink-off:#374151;
    height:100%;overflow:auto;padding:0;box-sizing:border-box;
    font:14px/1.45 Roboto,system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg)}
.nd *{box-sizing:border-box}
.nd-pad{padding:10px 12px}
.nd-card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:12px 14px;min-width:0}
.nd-h{font-size:11px;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.nd-v{font-size:28px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.nd-s{color:var(--mute);font-size:12px}
.nd-kv{width:100%;border-collapse:collapse;font-size:13px}
.nd-kv th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--mute);padding:4px;border-bottom:1px solid var(--line)}
.nd-kv td{padding:6px 4px;border-bottom:1px solid var(--line);vertical-align:top}
.nd-kv td.k{color:var(--mute);width:42%}
.nd-kv tr:last-child td{border-bottom:0}
.nd-btn{border:1px solid var(--line);background:#fff;border-radius:6px;padding:7px 13px;font:inherit;font-size:13px;cursor:pointer;margin:0 6px 6px 0}
.nd-btn:hover{border-color:#0f766e;color:#0f766e}
.nd-btn:disabled{opacity:.5;cursor:default}

/* ---- status chrome: tint + ordered bar + glyph + word ---- */
.nd-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:10px;
         font-size:11px;font-weight:700;white-space:nowrap;
         background:var(--tint-ok);color:var(--ink-ok);box-shadow:inset 3px 0 0 var(--bar-ok)}
.nd-pill.watch{background:var(--tint-watch);color:var(--ink-watch);box-shadow:inset 3px 0 0 var(--bar-watch)}
.nd-pill.soon {background:var(--tint-soon); color:var(--ink-soon); box-shadow:inset 3px 0 0 var(--bar-soon)}
.nd-pill.crit {background:var(--tint-crit); color:var(--ink-crit); box-shadow:inset 3px 0 0 var(--bar-crit)}
.nd-pill.off  {background:var(--tint-off);  color:var(--ink-off);  box-shadow:inset 3px 0 0 var(--bar-off)}
.nd-glyph{font-weight:800;font-size:11px;letter-spacing:-.5px}
.nd-dot{display:inline-block;width:4px;height:12px;border-radius:2px;margin-right:7px;
        background:var(--bar-ok);vertical-align:-2px}
.nd-dot.watch{background:var(--bar-watch)}.nd-dot.soon{background:var(--bar-soon)}
.nd-dot.crit{background:var(--bar-crit)}.nd-dot.off{background:var(--bar-off)}
.nd-ok{color:var(--ink-ok)}.nd-crit{color:var(--ink-crit)}.nd-soon{color:var(--ink-soon)}
.nd-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;font-size:12px;color:var(--mute)}
.nd-legend i{display:inline-block;width:4px;height:12px;border-radius:2px;margin-right:6px;
             background:var(--bar-ok);vertical-align:-2px}
.nd-legend i.watch{background:var(--bar-watch)}.nd-legend i.soon{background:var(--bar-soon)}
.nd-legend i.crit{background:var(--bar-crit)}.nd-legend i.off{background:var(--bar-off)}

/* ---- equipment tile: the unit of the fleet board ---- */
.nd-tile{position:relative;text-align:left;border:1px solid var(--line);border-left:5px solid var(--bar-ok);
         border-radius:6px;padding:8px 10px;cursor:pointer;background:var(--tint-ok);
         color:var(--ink-ok);min-width:0;overflow:hidden}
.nd-tile.watch{border-left-color:var(--bar-watch);background:var(--tint-watch);color:var(--ink-watch)}
.nd-tile.soon {border-left-color:var(--bar-soon); background:var(--tint-soon); color:var(--ink-soon)}
.nd-tile.crit {border-left-color:var(--bar-crit); background:var(--tint-crit); color:var(--ink-crit)}
.nd-tile.off  {border-left-color:var(--bar-off);  background:var(--tint-off);  color:var(--ink-off)}
.nd-tile:hover{box-shadow:0 2px 6px #0000001f}
.nd-tile b{display:block;font-size:12.5px;font-weight:700;line-height:1.25;padding-right:22px;
           min-height:2.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nd-tile .t-read{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.15}
.nd-tile .t-sub{font-size:11px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nd-tile .t-state{position:absolute;top:7px;right:8px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}