/* MOBILE PROXY — a sibling of Alias Hub (phone-hub/public/style.css, the "Soft Light" final style).
   Same tokens, same type, same recipes for labels, inputs, buttons, cards, sheets, tables, pills,
   switches and toasts — trimmed to what this dashboard draws, so an operator who knows one knows the
   other. Light theme only (DESIGN.md §9).

   Everything an operator reads as DATA (ids, addresses, IPs, durations) is IBM Plex Mono; words are
   Sora. Both are self-hosted under /fonts: the CSP is default-src 'self', so no font CDN. */

@font-face { font-family: "Sora"; font-weight: 100 900; font-style: normal;
  font-display: swap; src: url("/fonts/sora--latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD; }
@font-face { font-family: "Sora"; font-weight: 100 900; font-style: normal;
  font-display: swap; src: url("/fonts/sora--latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal;
  font-display: swap; src: url("/fonts/ibm-plex-mono--400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal;
  font-display: swap; src: url("/fonts/ibm-plex-mono--500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-style: normal;
  font-display: swap; src: url("/fonts/ibm-plex-mono--600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 700; font-style: normal;
  font-display: swap; src: url("/fonts/ibm-plex-mono--700.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --bg: #f6f5f1;            /* the paper ground */
  --panel: #fff;            /* cards and panels */
  --panel-2: #faf9f6;       /* input wells, code blocks */
  --rail: #fbfaf7;
  --line: #e4e2db;
  --line-strong: #d9d6cc;
  --divider: #f0eee8;       /* the rule between table rows */
  --text: #26252b;
  --head: #26252b;
  --muted: #3f3d48;         /* secondary text */
  --dim: #67656f;           /* timestamps, counts, section labels */
  --faint: #908e98;         /* em-dashes, placeholder facts */
  --accent: #5d4fd6;        /* the primary fill, and accent ink (addresses, links) */
  --accent-hover: #4c3fc4;
  --accent-tint: #eae7fb;
  --accent-line: #beb5ec;
  --fill: #f0eee8;          /* neutral button / chip fill */
  --ok: #1d9d63;
  --ok-tint: #e5f4ec;
  --warn: #d9930d;
  --warn-ink: #8a5a00;      /* amber as TEXT: --warn itself is too light to read on white */
  --warn-tint: #fbefd6;
  --bad: #c2412f;
  --bad-tint: #fbeae7;      /* red-ghost fill: pills, Delete */
  --bad-row: #fdf3f1;       /* a whole row gone wrong */
  --bad-line: #f0c9c2;
  --sans: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
}

* { box-sizing: border-box; }

/* HIDDEN MEANS HIDDEN, said once (phone-hub learnt this a dozen times): the browser's own
   [hidden] { display: none } loses to any rule here that gives an element a display — buttons are
   inline-flex, rows are flex — and a script's `.hidden = true` then silently does nothing. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 500 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--accent-line); color: var(--text); }
* { scrollbar-width: thin; scrollbar-color: #d5d2c9 transparent; }

h1 { font-size: 20px; font-weight: 700; margin: 0 0 16px; }
/* Panel titles: 700 15px caps — the landmarks the eye navigates by. */
h2 { font-size: 15px; margin: 0 0 14px; color: var(--head); font-weight: 700;
     text-transform: uppercase; letter-spacing: .08em; }
h3 { font: 700 12px var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .1em;
     margin: 18px 0 8px; }
a { color: var(--accent); }
code, .mono { font-family: var(--mono); font-size: 13px; }
p { margin: 0; }

/* --- inks: one word per meaning, used by every view ------------------------------------------ */
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.faint { color: var(--faint); }
.ok { color: var(--ok); }
.warn { color: var(--warn-ink); }
.bad { color: var(--bad); }
.accent { color: var(--accent); }
.error { color: var(--bad); font-size: 13px; margin: 10px 0 0; }

/* --- the login card ---------------------------------------------------------------------------- */
body.centered { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px;
  width: 100%; max-width: 340px;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 1px 3px rgba(38, 37, 43, .04);
}
.card h1 { font-size: 17px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; }
.card .lead { font-size: 13px; color: var(--dim); margin: -6px 0 6px; }
.card .error { margin-top: 10px; }

/* --- controls ---------------------------------------------------------------------------------- */
/* Form labels wear the section-label voice — 700 12px mono caps — so "what goes in this box" is
   findable before the box is. */
label, .flabel {
  font: 700 12px var(--mono); color: var(--dim);
  text-transform: uppercase; letter-spacing: .1em; margin-top: 8px;
}
input, select, textarea, button {
  font: inherit;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  max-width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
textarea { min-height: 76px; resize: vertical; font: 500 13px/1.7 var(--mono); width: 100%; }
input[type="checkbox"], input[type="radio"] {
  width: 16px; height: 16px; padding: 0; margin: 0; accent-color: var(--accent); flex: none;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(93, 79, 214, .16);
}
input.mono, textarea.mono { font: 500 13px var(--mono); }

/* Three ranks of button: the indigo fill acts, the warm grey acts nearby, red-tinged destroys. */
button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--accent);
  border-color: transparent;
  color: #fff;
  font-weight: 600; font-size: 14px;
  cursor: pointer;
  margin-top: 12px;
  padding: 8px 16px;
  border-radius: 7px;
  white-space: nowrap;
  transition: background .14s ease;
}
button:hover:not(:disabled) { background: var(--accent-hover); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.secondary { background: var(--fill); color: var(--text); margin-top: 0; }
button.secondary:hover:not(:disabled) { background: #e6e3d9; color: var(--text); }
button.small { padding: 7px 14px; font-size: 13px; margin-top: 0; }
button.danger { color: var(--bad); background: var(--bad-tint); }
button.danger:hover:not(:disabled) { background: #f7dcd5; color: #a83421; }
button.danger:focus-visible { outline-color: var(--bad); }
/* A text action: accent ink, no box. .quiet is the grey one that only leaves. */
button.linklike {
  background: none; border: 0; padding: 0; margin: 0; border-radius: 4px;
  color: var(--accent); font-weight: 600; font-size: 13px;
}
button.linklike:hover:not(:disabled) { background: none; color: var(--accent-hover); }
button.linklike.quiet { color: var(--dim); }
button.linklike.quiet:hover:not(:disabled) { color: var(--text); }

/* A switch rather than a checkbox for ON/OFF: a state, not a selection. On is solid green. */
.sw {
  position: relative; width: 34px; height: 19px; padding: 0; margin: 0; flex: none;
  border-radius: 999px; background: #d5d2c9; border: 0; cursor: pointer;
}
.sw::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 15px; height: 15px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(38, 37, 43, .25);
  transition: left .12s;
}
.sw:hover:not(:disabled) { background: #c9c5bb; }
.sw[aria-checked="true"] { background-color: var(--ok); }
.sw[aria-checked="true"]:hover:not(:disabled) { background-color: #178a56; }
.sw[aria-checked="true"]::after { left: 17px; }
.sw:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* A checkbox or radio with its words, inline — not the caps label voice. */
label.check {
  display: inline-flex; align-items: center; gap: 7px; margin: 0; cursor: pointer;
  font: 500 13px var(--sans); text-transform: none; letter-spacing: 0; color: var(--text);
}
label.check .muted { color: var(--dim); }

/* --- shell: rail + one content column ---------------------------------------------------------- */
.shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100vh; }

.rail {
  background: var(--rail);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 0 14px;
  position: sticky; top: 0; height: 100vh;
}
.brand { padding: 0 20px 18px; display: flex; flex-direction: column; gap: 3px; }
.brand-mark { font-size: 16px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.brand-sub { font: 500 12px/1.4 var(--mono); color: var(--dim); letter-spacing: .04em; }

.nav { padding: 8px 12px 2px; display: flex; flex-direction: column; }
.nav-item {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%;
  padding: 11px 12px; margin: 0 0 2px;
  background: none; border: 1px solid transparent; border-radius: 8px;
  color: var(--muted); font: 500 14.5px/1 var(--sans);
  text-align: left;
}
.nav-item:hover:not(:disabled) { background: var(--fill); color: var(--text); }
/* The current view is SOLID indigo: the rail's one filled shape. */
.nav-item[aria-current="true"] { background: var(--accent); color: #fff; font-weight: 600; }
.nav-item[aria-current="true"]:hover:not(:disabled) { background: var(--accent-hover); color: #fff; }
.nav-item[aria-current="true"] .nav-icon { color: #fff; }
.nav-item[aria-current="true"] .nav-count { color: #fff; background: #7d71e0; }
.nav-icon { width: 18px; height: 18px; flex: none; color: var(--dim); }
.nav-count {
  margin-left: auto; font: 600 11px/1.5 var(--mono); color: var(--muted);
  font-variant-numeric: tabular-nums; background: var(--fill); border-radius: 9px; padding: 2px 8px;
}
.nav-count:empty { display: none; }
.nav-count.warn { color: var(--warn-ink); background: var(--warn-tint); }

.rail-foot {
  margin-top: auto; padding: 14px 20px 0; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.who { font: 500 13px/1.3 var(--mono); color: var(--dim); overflow-wrap: anywhere; }
.who b { color: var(--text); font-weight: 700; }

.content { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 16px 28px; border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky; top: 0; z-index: 5;
}
.topbar h1 {
  margin: 0; font-size: 22px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; line-height: 1.2;
}
.topbar .sub { font: 500 13px/1.3 var(--mono); color: var(--dim); }
.topbar .grow { flex: 1; }
/* The live marker: a dot and a mono word, quiet — connection state is ambient chrome, and a failed
   poll must never shout (DESIGN §9: "a quiet reconnecting… line, never an alert dialog"). */
.live {
  font: 600 13px/1 var(--mono); color: var(--dim);
  display: inline-flex; align-items: center; gap: 7px; align-self: center; white-space: nowrap;
}
.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.live.on { color: var(--ok); }
.live.off { color: var(--warn); }

.view { display: none; padding: 18px 28px 48px; min-width: 0; }
.view.on { display: block; }

.grow { flex: 1; }
.row { display: flex; gap: 8px; align-items: center; }
.row.wrap { flex-wrap: wrap; }

/* --- panels and tables ------------------------------------------------------------------------- */
section.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: 0 1px 3px rgba(38, 37, 43, .04);
  min-width: 0;
}
/* The table well: header row white, rows on page depth, rounded border. */
section.panel.flush { padding: 0; background: transparent; border-radius: 9px; overflow: hidden; box-shadow: none; }
.panel.flush thead th { background: var(--panel); }
.panel.flush th { padding: 11px 12px; }
.panel.flush td { padding: 13px 12px; }
.panel.flush th:first-child, .panel.flush td:first-child { padding-left: 18px; }
.panel.flush th:last-child, .panel.flush td:last-child { padding-right: 18px; }
.panel .empty { padding: 14px 18px; }

.scroll { overflow-x: auto; max-width: 100%; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px; border-top: 1px solid var(--divider); vertical-align: top; }
thead th { border-top: 0; }
th {
  color: var(--dim); font: 700 12px var(--mono); white-space: nowrap;
  text-transform: uppercase; letter-spacing: .1em;
  border-bottom: 1px solid var(--line);
}
tbody tr:hover { background: rgba(93, 79, 214, .04); }
/* Row tints (§9): down/suspect bad with a hard left edge, rotating accent, off faded. The edge lives
   on the first cell: a border on a collapsed tr is unreliable. */
tbody tr.bad { background: var(--bad-row); }
tbody tr.bad > td:first-child { box-shadow: inset 4px 0 0 var(--bad); }
tbody tr.rotating { background: var(--accent-tint); }
tbody tr.off > td { opacity: .55; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Cell lines: a cell is a short stack of facts, the first one the loudest. */
td .l1 { font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
td .l2, td .l3 { font-size: 13px; overflow-wrap: anywhere; }
td .mono { overflow-wrap: anywhere; }
td .addr { font: 500 13px var(--mono); color: var(--accent); overflow-wrap: anywhere; }
td .pid { font: 600 12px var(--mono); color: var(--dim); margin-left: 6px; }
td .ip { font: 600 13.5px var(--mono); color: var(--text); }
td.c-proxy { min-width: 200px; }
td.c-slot { min-width: 150px; }
td.c-rot { min-width: 150px; }
td.c-act { white-space: nowrap; text-align: right; width: 1%; }
td.c-act .acts { display: inline-flex; gap: 6px; align-items: center; }
td.when { color: var(--dim); font: 500 13px var(--mono); white-space: nowrap; }
.badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.badge {
  display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 9px;
  font: 600 11px/1.6 var(--mono); background: var(--fill); color: var(--muted); white-space: nowrap;
}
.badge.warn { background: var(--warn-tint); color: var(--warn-ink); }
.badge.accent { background: var(--accent-tint); color: var(--accent); }
.badge.bad { background: var(--bad-tint); color: var(--bad); }
button.more { padding: 4px 10px; font-size: 15px; line-height: 1; letter-spacing: .05em; }

/* Status pills: mono ink on a soft fill, no border. */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 12px;
  font: 600 12px var(--mono); background: var(--fill); color: var(--muted); white-space: nowrap;
}
.pill.ok { color: var(--ok); background: rgba(29, 157, 99, .09); }
.pill.warn { color: var(--warn-ink); background: var(--warn-tint); }
.pill.bad { color: var(--bad); background: var(--bad-tint); }

/* --- Proxies: tiles, last hour, toolbar, chips -------------------------------------------------- */
.strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px; margin-bottom: 14px;
}
.stat {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 14px 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
  box-shadow: 0 1px 3px rgba(38, 37, 43, .04);
}
.stat-k { font: 700 11.5px var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .1em; }
.stat-v { font-size: 28px; line-height: 1.1; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.stat-v.ok { color: var(--ok); }
.stat-v.warn { color: var(--warn); }
.stat-v.bad { color: var(--bad); }
.stat-v.accent { color: var(--accent); }
/* The card that IS the alarm: label included, the whole card shifts into the red world. */
.stat.alarm { background: var(--bad-tint); border-color: var(--bad-line); }
.stat.alarm .stat-k { color: var(--bad); }

.hour {
  display: flex; flex-direction: column; gap: 2px; margin: 0 0 16px;
  font: 500 13px/1.5 var(--mono); color: var(--muted); overflow-wrap: anywhere;
}
.hour .k { font: 700 11.5px var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .1em; }

.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; }
.toolbar button { margin-top: 0; }
.search {
  flex: 1 1 220px; min-width: 0; max-width: 380px;
  background: var(--panel); font-size: 13.5px; padding: 8px 12px;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  margin: 0; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 500;
  background: var(--panel); border: 1px solid var(--line); color: var(--dim);
}
.chip:hover:not(:disabled) { background: var(--panel-2); color: var(--text); }
.chip[aria-pressed="true"] { background: var(--accent-tint); color: var(--text); border-color: var(--accent-line); }
.chip .n { font: 600 11px var(--mono); color: var(--faint); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .n { color: var(--accent); }

/* --- the ⋯ menu: one floating list for every row, so a repaint under it does not close it ------- */
.menu-list {
  position: absolute; z-index: 40;
  display: flex; flex-direction: column; gap: 2px; min-width: 200px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(38, 37, 43, .14);
}
.menu-list .mitem {
  margin: 0; padding: 8px 10px; border-radius: 7px;
  justify-content: flex-start; background: none; color: var(--text);
  font-weight: 500; font-size: 14px; text-align: left; white-space: nowrap;
}
.menu-list .mitem:hover:not(:disabled) { background: var(--fill); color: var(--text); }
.menu-list .mitem.danger { color: var(--bad); }
.menu-list .mitem.danger:hover:not(:disabled) { background: var(--bad-tint); color: var(--bad); }
.menu-list .sep { height: 1px; margin: 4px 2px; background: var(--divider); }
/* Check · Rotate · Edit sit in the row on a wide screen and only in the menu on a narrow one; a row
   whose every action is in its own buttons shows its ⋯ only on a narrow one. */
@media (min-width: 721px) {
  .menu-list .narrow-only { display: none; }
  .narrow-inline { display: none !important; }
}

/* --- sheets: exactly phone-hub's Edit info sheet ---------------------------------------------- */
.sheet-wrap {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(38, 37, 43, .38);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 32px 16px; overflow-y: auto;
}
.sheet {
  width: 100%; max-width: 560px; margin-top: 16px;
  background: var(--panel); border: 1px solid var(--accent-line); border-radius: 14px;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(38, 37, 43, .22);
}
.sheet.wide { max-width: 860px; }
.sheet-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
}
.sheet-head h2 { margin: 0 0 2px; overflow-wrap: anywhere; }
.sheet-head .muted { display: block; font-size: 13.5px; overflow-wrap: anywhere; }
.sheet-head > div { min-width: 0; }
.sheet-body { padding: 18px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sheet-body p { overflow-wrap: anywhere; }
.sheet-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 14px 18px; border-top: 1px solid var(--line);
}
.sheet-foot .muted { font-size: 13px; min-width: 0; }
.field-block { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-block > label, .field-block > .flabel { margin: 0; font-size: 12px; color: var(--head); }
.field-block input, .field-block select, .field-block textarea { width: 100%; }
.field-row { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.field-row > .flabel { margin: 0; color: var(--head); }
.fmt { font-size: 13px; color: var(--dim); margin: 0; overflow-wrap: anywhere; }
.fmt b { color: var(--muted); font-family: var(--mono); font-weight: 600; }
.fmt.ok { color: var(--ok); }
.fmt.bad { color: var(--bad); }
.fmt.warn { color: var(--warn-ink); }
.sheet-body .confirm-text { font-size: 14px; line-height: 1.6; color: var(--text); }

/* A consequence stated where the decision is made: amber, a rule to follow, not an error. */
.note {
  display: block; margin: 0 0 16px; padding: 10px 12px;
  background: #faf3df; border: 1px solid #ecd9a8; border-radius: 10px;
  font-size: 13px; color: #7c5c14; overflow-wrap: anywhere;
}
.note b { color: #99700a; }

.codeblock {
  display: block; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px; font: 500 13px/1.6 var(--mono); color: var(--text);
  word-break: break-all; white-space: pre-wrap; user-select: all; margin: 0;
}
.keyrow { display: flex; gap: 8px; align-items: flex-start; }
.keyrow .codeblock { flex: 1; min-width: 0; }
ol.steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }
ol.steps li { overflow-wrap: anywhere; }
ol.steps .codeblock { margin-top: 6px; }
.examples {
  margin: 0; padding: 8px 10px; background: var(--panel-2); border: 1px dashed var(--line-strong);
  border-radius: 8px; font: 500 12px/1.7 var(--mono); color: var(--dim);
  white-space: pre-wrap; word-break: break-all;
}

table.mini { font-size: 13px; }
table.mini th { font-size: 11px; padding: 6px 8px; }
table.mini td { padding: 6px 8px; font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
table.mini td.res { white-space: normal; min-width: 160px; }

/* --- Phones ------------------------------------------------------------------------------------ */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.tab {
  margin: 0; padding: 6px 14px; border-radius: 9px; white-space: nowrap;
  background: transparent; border: 1px solid transparent; color: var(--dim); font-weight: 500;
}
.tab:hover:not(:disabled) { color: var(--text); background: var(--fill); }
.tab[aria-selected="true"] { background: var(--accent-tint); border-color: var(--accent-line); color: var(--text); font-weight: 600; }
.tab .n { font: 600 11px var(--mono); color: var(--dim); background: var(--fill); border-radius: 9px; padding: 1px 7px; margin-left: 4px; }
.tab[aria-selected="true"] .n { color: var(--accent); background: var(--accent-line); }
.headline { font: 600 13.5px/1.5 var(--mono); color: var(--muted); margin: 0 0 14px; overflow-wrap: anywhere; }
td.name { font-weight: 700; font-size: 14.5px; overflow-wrap: anywhere; min-width: 140px; }
td.name .sub { display: block; font: 500 12px var(--mono); color: var(--faint); }
td.devid { font: 500 12px var(--mono); color: var(--dim); overflow-wrap: anywhere; }
td.status { min-width: 220px; overflow-wrap: anywhere; }
td.status.ok { color: var(--ok); }
td.status.warn { color: var(--warn-ink); }
td.status.bad { color: var(--bad); }
td.status.faint { color: var(--faint); }
td.status.dim { color: var(--dim); }

/* --- Activity ------------------------------------------------------------------------------------ */
.filters { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 12px; }
.filters label.inline {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  font: 500 13px var(--sans); text-transform: none; letter-spacing: 0; color: var(--dim);
}
.filters input, .filters select { padding: 6px 9px; font-size: 13px; background: var(--panel); }
.filters input { width: 9em; }
.feed {
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel);
  padding: 6px 0; font: 500 13px/1.8 var(--mono); color: var(--muted); min-height: 120px;
}
.ev {
  display: flex; gap: 10px; padding: 1px 14px; border-left: 3px solid transparent;
  overflow-wrap: anywhere; align-items: baseline;
}
.ev .t { color: var(--faint); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.ev .k { color: var(--dim); flex: 0 0 auto; font-size: 11.5px; }
.ev .msg { flex: 1 1 auto; min-width: 0; color: var(--text); }
.ev .by { color: var(--accent); flex: 0 0 auto; font-size: 12px; }
.ev.good { border-left-color: var(--ok); }
.ev.warn { border-left-color: var(--warn); }
.ev.bad { border-left-color: var(--bad); background: var(--bad-row); }
.ev.bad .msg { color: var(--bad); }
.feed-foot { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; }

/* --- Settings ------------------------------------------------------------------------------------ */
.keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 14px; }
.keycard { border: 1px solid var(--line); border-radius: 9px; padding: 14px 16px; background: var(--panel-2); min-width: 0; }
.keycard h3 { margin: 0 0 8px; color: var(--text); }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0 0 12px; font-size: 13px; }
.facts dt { font: 700 11px/1.9 var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .08em; }
.facts dd { margin: 0; font: 500 13px/1.6 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.rules { display: grid; grid-template-columns: minmax(150px, max-content) repeat(2, minmax(70px, 110px)) minmax(0, 1fr); gap: 8px 14px; align-items: center; }
.rules .colh { font: 700 11px var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .1em; }
.rules label { margin: 0; color: var(--head); }
.rules .hint { font-size: 12.5px; color: var(--dim); }
.rules input, .rules select { width: 100%; padding: 7px 10px; font: 500 13px var(--mono); }
.rules .span2 { grid-column: span 2; }
details.adv { margin-top: 16px; border-top: 1px solid var(--divider); padding-top: 10px; }
details.adv summary { cursor: pointer; font: 700 12px var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .1em; }
details.adv[open] summary { margin-bottom: 12px; }
.formfoot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.formfoot button { margin-top: 0; }
.addrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.addrow input { flex: 1 1 160px; min-width: 0; }
.addrow button { margin-top: 0; }

/* --- toasts ------------------------------------------------------------------------------------ */
.toasts {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 70;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  width: max-content; max-width: calc(100vw - 32px);
}
.toast {
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 10px;
  padding: 10px 16px; max-width: 100%; overflow-wrap: anywhere;
  box-shadow: 0 8px 30px rgba(38, 37, 43, .18);
}
.toast.bad { border-color: var(--bad); color: var(--bad); }
.toast.good { border-color: rgba(29, 157, 99, .55); }

/* --- narrow screens ---------------------------------------------------------------------------- */
/* The rail becomes a bar across the top; nothing sticks, nothing scrolls sideways. */
@media (max-width: 820px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail {
    position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 6px 10px; padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--line);
  }
  .brand { padding: 0; flex: 1 1 auto; }
  .nav { order: 3; flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; padding: 0; gap: 4px; }
  .nav-item { width: auto; padding: 8px 10px; margin: 0; font-size: 13.5px; }
  .rail-foot { margin: 0; padding: 0; border: 0; flex-direction: row; align-items: center; gap: 10px; }
  .topbar { padding: 12px 16px; position: static; }
  .view { padding: 14px 16px 40px; }
}
/* Under 720 px every table becomes one card per row (§9), every action in the ⋯ menu. */
@media (max-width: 720px) {
  table.cards, table.cards tbody, table.cards tr, table.cards td { display: block; width: 100%; }
  table.cards thead { display: none; }
  section.panel.flush { border: 0; background: transparent; overflow: visible; }
  table.cards tr {
    position: relative; margin: 0 0 10px; padding: 10px 14px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  }
  table.cards tr.bad { background: var(--bad-row); border-color: var(--bad-line); }
  table.cards tr.rotating { background: var(--accent-tint); border-color: var(--accent-line); }
  table.cards td, .panel.flush table.cards td { border: 0; padding: 4px 0; min-width: 0; white-space: normal; text-align: left; }
  table.cards td:first-child, .panel.flush table.cards td:first-child { padding-left: 0; padding-right: 76px; }
  .panel.flush table.cards td:last-child { padding-right: 0; }
  table.cards tr.bad > td:first-child { box-shadow: none; }
  table.cards td[data-label]::before {
    content: attr(data-label); display: block;
    font: 700 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
  }
  table.cards td.c-act { position: absolute; top: 8px; right: 10px; width: auto; padding: 0; }
  table.cards td.c-act::before { display: none; }
  table.cards .wide-only { display: none !important; }
  .rules { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rules .colh.first, .rules .hint { grid-column: 1 / -1; }
  .rules .lbl { grid-column: 1 / -1; }
  .search { max-width: none; }
  .sheet-wrap { padding: 12px 8px; }
  .keyrow { flex-direction: column; align-items: stretch; }
}