/* Mesh support — brand design system.
   Palette taken from mesh.net.il: orange #FC832E, logo teal #005985, sky #6EC1E4.

   The one rule that governs everything here: BRAND ORANGE NEVER MEANS A FAULT.
   Orange carries identity and action (logo rule, primary buttons, active tab);
   status uses a separate triad — green / mustard / red — deliberately outside
   the brand hues, so a rep never has to ask whether orange means "Mesh" or
   "look at this". */

@import url("/static/fonts/fonts.css");

:root {
  /* brand */
  --brand: #FC832E; --brand-dp: #E86A16; --brand-soft: #fff3e8;
  --teal: #005985; --teal-dp: #01405f; --sky: #6EC1E4;
  /* surface */
  --bg: #eef2f6; --card: #fff; --line: #dde5ec; --line2: #eaf0f5;
  --ink: #1b2b36; --ink2: #5a6b78; --ink3: #8695a1;
  /* status — never a brand hue */
  --green: #0f9d58; --green-bg: #e6f6ed;
  --yellow: #c98a00; --yellow-bg: #fdf4e0;
  --red: #d0021b; --red-bg: #fdeaec;
  /* status text, dark enough to read on its own tinted background */
  --green-ink: #0a5c34; --yellow-ink: #6b4c05; --red-ink: #7c1420;
  --yellow-ink-b: #4a3403; --red-ink-b: #4f0c13;
  /* secondary surfaces: fields, insets, hover rows, chips */
  --field: #fbfdff; --inset: #f8fafc; --hover: #f1f5f9; --row-hover: #fafcfe;
  --chip: #eef3f7; --chip-teal: #e7f1f7; --chip-teal-line: #bcd9e8;
  --chip-teal-act: #d7e9f3; --chip-sky: #f7fcff;
  /* the threshold ribbon — saturated, never pastel */
  --zone-g: #1c9d57; --zone-y: #d99408; --zone-r: #d33b3b; --track: #e6ecf2;
  /* charts are drawn on the server; these are the only colours it emits */
  --chart-grid: #eaf0f5; --chart-label: #8695a1;
  --chart-1: #005985; --chart-2: #FC832E;
  /* the top bar: in dark it drops to the page ground so the logo has no seam */
  --topbar: #fff;
  /* text that sits ON brand orange */
  --on-brand: #fff;
  /* legacy aliases: older markup still asks for these names */
  --accent: #005985; --muted: #8695a1;
  --r: 10px;
  --sh: 0 1px 2px rgba(27,43,54,.05), 0 8px 24px -14px rgba(27,43,54,.35);
}

/* ─────────────────────────── dark ───────────────────────────
   Option A, approved 12/09/2026. The ground is #0B1B2B — not a colour anyone
   picked, but the one baked into logo-navy.png, so the logo sits on the page
   with no seam and no plate. Every other value is derived to sit on it.

   Two things do NOT simply invert:

   1. The status triad. #0f9d58 and #d0021b were mixed against a white card;
      on a dark ground they go muddy and lose the contrast that makes a red
      banner read as red. Dark gets its own, lighter, more saturated triad.
   2. BRAND ORANGE NEVER MEANS A FAULT — and orange shouts louder on a dark
      ground than on a white one. So the secondary chart series drops to sky
      blue here, and orange is left to carry identity and action only. The
      status red is lifted to #FF5A6A so it stays louder than the brand.

   The attribute is set by the inline script in base.html before first paint. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand: #FC832E; --brand-dp: #FF9447; --brand-soft: #2A1C10;
  --teal: #4AA3D0; --teal-dp: #6FBBE0; --sky: #6EC1E4;
  --bg: #0B1B2B; --card: #122A3D; --line: #1F3E56; --line2: #193448;
  --ink: #E8F0F6; --ink2: #A3B8C7; --ink3: #7A93A6;
  --green: #2FD48A; --green-bg: #0E3326;
  --yellow: #F0B429; --yellow-bg: #33280B;
  --red: #FF5A6A; --red-bg: #3B1720;
  --green-ink: #8FEBC2; --yellow-ink: #F7D98C; --red-ink: #FFB3BA;
  --yellow-ink-b: #FFEFC7; --red-ink-b: #FFD7DB;
  --field: #0E2334; --inset: #0F2637; --hover: #17364B; --row-hover: #143047;
  --chip: #17334A; --chip-teal: #14324A; --chip-teal-line: #2B5B7C;
  --chip-teal-act: #1B4767; --chip-sky: #143349;
  --zone-g: #2FD48A; --zone-y: #F0B429; --zone-r: #FF5A6A; --track: #1C3A50;
  --chart-grid: #1C3A50; --chart-label: #7A93A6;
  /* the secondary series stays brand orange (חנן, 12/09). The readouts above
     the chart name the series by colour, so a sky line under an orange number
     left the two disagreeing — and on a navy ground the orange is legible
     without being alarming. */
  --chart-1: #4AA3D0; --chart-2: #FC832E;
  --topbar: #0B1B2B;
  --on-brand: #2A1405;
  --accent: #4AA3D0; --muted: #7A93A6;
  --sh: 0 1px 2px rgba(0,0,0,.35), 0 10px 30px -16px rgba(0,0,0,.85);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Heebo", system-ui, "Segoe UI", Arial, sans-serif;
  font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
main { max-width: 1240px; margin: 20px auto 48px; padding: 0 20px; }
footer { text-align: center; color: var(--ink3); padding: 26px 0; font-size: 12.5px; }
a { color: var(--teal); }

code, .mono { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums; font-size: 12.5px;
  direction: ltr; unicode-bidi: isolate; }
code { background: var(--hover); border-radius: 4px; padding: 1px 6px; color: var(--ink); }

/* ─────────────────────────── top bar ─────────────────────────── */
.topbar { display: flex; align-items: center; gap: 18px; background: var(--topbar);
  color: var(--ink); padding: 0 20px; height: 66px;
  border-bottom: 3px solid var(--brand); box-shadow: 0 1px 0 var(--line);
  position: sticky; top: 0; z-index: 20; }
.topbar .brand { display: flex; align-items: center; gap: 12px; color: var(--teal);
  text-decoration: none; font-weight: 700; font-size: 15px; white-space: nowrap; }
.topbar .brand img { height: 38px; width: auto; display: block; }
.topbar .brand .lg-dark { display: none; }
:root[data-theme="dark"] .topbar .brand .lg-light { display: none; }
:root[data-theme="dark"] .topbar .brand .lg-dark { display: block; }

/* the light/dark switch — a control, not a status, so it never uses a status hue */
.themetgl { background: transparent; border: 1.5px solid var(--line); border-radius: 999px;
  width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer;
  color: var(--ink2); padding: 0; flex: none; }
.themetgl:hover { border-color: var(--brand); color: var(--brand-dp); }
/* only when it stands alone — signed out, with no user box to sit inside */
.topbar > .themetgl { margin-inline-start: auto; }
.themetgl svg { display: block; }
.themetgl .i-sun { display: none; }
:root[data-theme="dark"] .themetgl .i-sun { display: block; }
:root[data-theme="dark"] .themetgl .i-moon { display: none; }
.topbar .brand span { border-inline-start: 1px solid var(--line); padding-inline-start: 12px;
  line-height: 1.25; }
.topbar .brand small { display: block; font-weight: 500; font-size: 11.5px; color: var(--ink3); }

.topsearch { display: flex; align-items: stretch; margin-inline-start: 8px; }
.topsearch input { font: 500 14px "IBM Plex Mono", monospace; direction: ltr; width: 250px;
  padding: 8px 12px; border: 1.5px solid var(--line); border-inline-end: 0;
  border-radius: 0 var(--r) var(--r) 0; background: var(--field); color: var(--ink); }
.topsearch input:focus { outline: 0; border-color: var(--sky); background: var(--card); }
.topsearch button { font: 700 13.5px "Heebo", sans-serif; padding: 8px 20px; border: 0;
  border-radius: var(--r) 0 0 var(--r); background: var(--brand); color: var(--on-brand);
  cursor: pointer; box-shadow: 0 2px 8px -3px rgba(232,106,22,.7); }
.topsearch button:hover { background: var(--brand-dp); }

.userbox { margin-inline-start: auto; display: flex; align-items: center; gap: 14px;
  font-size: 13px; color: var(--ink2); }
.userbox a { color: var(--ink2); text-decoration: none; font-weight: 600; }
.userbox a:hover { color: var(--brand-dp); }
.logoutf { display: inline; margin: 0; }
.linkbtn { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit;
           color: var(--ink2); font-weight: 600; }
.linkbtn:hover { color: var(--brand-dp); }
.userbox small { color: var(--ink3); }

/* ─────────────────────────── cards ─────────────────────────── */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh); padding: 20px 22px; margin-bottom: 16px; }
.devgrid { display: grid; gap: 16px; }
.devgrid .card { margin-bottom: 0; }
.devcard { padding: 0; }
.devcard > h2, .devcard > h3 { margin: 0; padding: 15px 22px; border-bottom: 1px solid var(--line2); }
.devcard > .cols2, .devcard > .statrow, .devcard > p, .devcard > table,
.devcard > form, .devcard > .scrolly, .devcard > div[data-lazy] { margin: 0; }
.devcard > p, .devcard > form, .devcard > .statrow, .devcard > div[data-lazy] { padding: 16px 22px; }
.devcard > .cols2 { padding: 4px 22px 16px; }

h2 { font: 700 15px/1.3 "Heebo", sans-serif; color: var(--teal); margin: 0 0 12px; }
h3 { font: 700 12px/1 "Heebo", sans-serif; letter-spacing: .07em; color: var(--ink3);
  margin: 20px 22px 10px; }
.muted { color: var(--ink3); }
.sidelabel { font-size: 12.5px; }

/* ─────────────────────────── landing ─────────────────────────── */
.hero { text-align: center; padding: 46px 26px 40px; }
.hero h1 { margin: 0 0 10px; font: 800 31px/1.2 "Heebo", sans-serif;
  color: var(--teal-dp); letter-spacing: -.02em; }
.hero p { margin: 0 0 26px; color: var(--ink2); font-size: 15.5px; }
.bigsearch { display: flex; align-items: stretch; max-width: 640px; margin: 0 auto;
  border-radius: 12px; overflow: hidden; box-shadow: var(--sh); }
.bigsearch input { flex: 1; font: 500 18px "IBM Plex Mono", monospace; direction: ltr;
  padding: 15px 18px; border: 1.5px solid var(--line); border-inline-end: 0; color: var(--ink); }
.bigsearch input:focus { outline: 0; border-color: var(--sky); }
.bigsearch button { font: 800 15px "Heebo", sans-serif; padding: 0 30px; border: 0;
  background: var(--brand); color: var(--on-brand); cursor: pointer; }
.bigsearch button:hover { background: var(--brand-dp); }
.hint { margin: 14px 0 0; font-size: 13px; color: var(--ink3); }

/* ─────────────────────────── diagnosis banner ─────────────────────────── */
.diagbanner { padding: 0; overflow: hidden; }
.diaghead { display: grid; grid-template-columns: auto 1fr; gap: 18px;
  align-items: center; padding: 22px 26px; }
.diaghead h2 { font: 800 25px/1.2 "Heebo", sans-serif; letter-spacing: -.02em;
  color: var(--teal-dp); margin: 0; }
.diaghead p { color: var(--ink2); font-size: 14.5px; }
.diagdot { width: 16px; height: 16px; border-radius: 50%; flex: none; background: var(--ink3); }
.diagbanner.green  .diagdot { background: var(--green); box-shadow: 0 0 0 5px var(--green-bg), 0 0 14px -2px var(--green); }
.diagbanner.yellow .diagdot { background: var(--yellow); box-shadow: 0 0 0 5px var(--yellow-bg), 0 0 14px -2px var(--yellow); }
.diagbanner.red    .diagdot { background: var(--red); box-shadow: 0 0 0 5px var(--red-bg), 0 0 16px -2px var(--red);
  animation: beat 2s ease-in-out infinite; }
.diagbanner.red    .diaghead h2 { color: var(--red); }
@keyframes beat { 50% { box-shadow: 0 0 0 8px var(--red-bg), 0 0 22px 0 var(--red); } }
@media (prefers-reduced-motion: reduce) { .diagbanner.red .diagdot { animation: none; } }
.diagnote { margin: 8px 0 0; font-size: 13.5px; color: var(--yellow-ink);
  background: var(--yellow-bg); border-radius: 7px; padding: 9px 13px;
  border: 1px solid color-mix(in srgb, var(--yellow) 32%, var(--card)); }
.diagbasis { border-top: 1px solid var(--line2); background: var(--inset); }
.diagbasis summary { cursor: pointer; padding: 11px 26px; font: 600 12.5px "Heebo", sans-serif;
  color: var(--ink2); list-style: none; }
.diagbasis summary::-webkit-details-marker { display: none; }
.diagbasis summary::before { content: "▾ "; color: var(--ink3); }
.diagbasis ul { margin: 0; padding: 0 44px 16px; color: var(--ink2); font-size: 13px; }
.diagbasis li { margin: 4px 0; }

/* ─────────────────────────── device layout ───────────────────────────
   Two columns, as approved: what the rep is diagnosing on the wide side,
   what they are looking up or changing on the narrow one. A single long
   column made them scroll past the graphs to reach the MAC address. */
.devcols { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.devmain, .devside { display: grid; gap: 16px; min-width: 0; }
.devside .card { padding: 0; }
.devside h2 { margin: 0; padding: 14px 20px; border-bottom: 1px solid var(--line2); font-size: 13px; }
.devside table.kv { padding: 0; }
.devside table.kv th { padding: 9px 0 9px 20px; width: 96px; }
.devside table.kv td { padding: 9px 20px 9px 0; }
.devside .kvwrap { padding: 2px 0; }
.devside .cols2 { grid-template-columns: 1fr; }
.devside .devacts p { color: var(--ink3); }
.devside table.list th { padding: 9px 20px; }
.devside table.list td { padding: 10px 20px; }
.devside form { padding: 6px 20px 18px; }
.devside form input { min-width: 0; width: 100%; }
.devside .alert { margin: 0 20px 14px; }
.devacts { display: grid; gap: 9px; padding: 16px 20px; }
.devacts > * { margin: 0; }

/* the device's own name, beside the verdict — the demo put it there and it
   belongs there: it answers "which box am I looking at" without a scroll */
.diagid { text-align: end; padding-inline-start: 22px; border-inline-start: 1px solid var(--line);
  white-space: nowrap; }
.diagid b { display: block; font: 700 17px/1.25 "Heebo", sans-serif; color: var(--ink); }
.diagid span { font-size: 12px; color: var(--ink3); }
.diaghead.withid { grid-template-columns: auto 1fr auto; }

/* ─────────────────────────── device head ─────────────────────────── */
.devhead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 22px; border-bottom: 1px solid var(--line2); }
.devhead h1 { margin: 0; font: 800 22px/1.2 "Heebo", sans-serif; color: var(--ink); }
.devhead h2 { margin: 0; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }

table.kv { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.kv th { text-align: start; font: 500 13px "Heebo", sans-serif; color: var(--ink3);
  padding: 9px 0; width: 118px; vertical-align: top; font-weight: 500; }
table.kv td { padding: 9px 0; border-bottom: 1px solid var(--line2); font-weight: 600; }
table.kv tr:last-child td { border-bottom: 0; }
table.kv code { background: none; padding: 0; font-size: 13px; }

/* ─────────────────────────── status chips ─────────────────────────── */
.status, .stat { display: inline-flex; align-items: center; gap: 6px;
  font: 700 12px/1 "Heebo", sans-serif; padding: 6px 11px; border-radius: 20px;
  background: var(--chip); color: var(--ink2); border: 1px solid var(--line); }
.status.green, .stat.green { background: var(--green-bg); color: var(--green-ink); border-color: color-mix(in srgb, var(--green) 34%, var(--card)); }
.status.yellow, .stat.yellow { background: var(--yellow-bg); color: var(--yellow-ink); border-color: color-mix(in srgb, var(--yellow) 40%, var(--card)); }
.status.red, .stat.red { background: var(--red-bg); color: var(--red-ink); border-color: color-mix(in srgb, var(--red) 32%, var(--card)); }
.statrow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
a.stat { text-decoration: none; }
a.stat:hover { border-color: var(--sky); }

.alert { border-radius: 8px; padding: 12px 15px; font-size: 13.5px; margin: 12px 0;
  border: 1px solid var(--line); background: var(--inset); color: var(--ink2); }
.alert.green { background: var(--green-bg); border-color: color-mix(in srgb, var(--green) 30%, var(--card)); color: var(--green-ink); }
.alert.yellow { background: var(--yellow-bg); border-color: color-mix(in srgb, var(--yellow) 32%, var(--card)); color: var(--yellow-ink); }
.alert.red { background: var(--red-bg); border-color: color-mix(in srgb, var(--red) 30%, var(--card)); color: var(--red-ink); }
.alert b { color: inherit; filter: brightness(.8); }

/* ─────────────────────────── tables ─────────────────────────── */
table.list { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.list th { font: 600 11px/1 "Heebo", sans-serif; letter-spacing: .06em; color: var(--ink3);
  text-align: start; padding: 11px 22px; background: var(--inset);
  border-block: 1px solid var(--line2); position: sticky; top: 0; }
table.list td { padding: 12px 22px; border-bottom: 1px solid var(--line2); }
table.list tr:last-child td { border-bottom: 0; }
table.list tbody tr:hover, table.list tr:hover { background: var(--row-hover); }
.scrolly { max-height: 340px; overflow: auto; }

/* ─────────────────────────── buttons + forms ─────────────────────────── */
button.primary { font: 700 13.5px "Heebo", sans-serif; padding: 11px 20px; border: 0;
  border-radius: 8px; background: var(--brand); color: var(--on-brand); cursor: pointer;
  box-shadow: 0 3px 10px -4px rgba(232,106,22,.75); }
button.primary:hover { background: var(--brand-dp); }
button.primary:disabled { background: var(--ink3); box-shadow: none; cursor: not-allowed; }
button.mini { font: 700 12px "Heebo", sans-serif; padding: 6px 12px; border-radius: 7px;
  border: 1.5px solid var(--line); background: var(--card); color: var(--teal); cursor: pointer; }
button.mini:hover { border-color: var(--sky); }
.card form label { display: block; margin: 12px 0 4px; font: 600 12.5px "Heebo", sans-serif;
  color: var(--ink2); }
/* inline forms inside a table are controls, not a form layout: no block labels,
   no stacked margins, and the field keeps whatever width the markup gave it */
table.list form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
table.list form label { display: inline; margin: 0; }
table.list form input, table.list form select { padding: 5px 9px; font-size: 13px; }
table.list form button { margin: 0; }
table.list td { vertical-align: middle; }
/* No min-width here. It used to be 220px, which silently overrode the
   width:110px the admin table sets on its inline fields — every row grew past
   the card and spilled onto the page. Width belongs to the form that owns the
   field, not to the base rule. */
.card form input, .card form select { font: 500 14px "IBM Plex Mono", monospace;
  padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 8px;
  background: var(--field); color: var(--ink); max-width: 100%; }
.card form input:focus, .card form select:focus { outline: 0; border-color: var(--sky); background: var(--card); }
.card form button { margin-top: 14px; }
.inline-form { display: inline; }
.inline-form button { margin: 0; }
.login-card { max-width: 380px; margin: 70px auto; }
.login-card label { display: block; margin: 14px 0 5px; font-weight: 600; font-size: 13px; }
.login-card input { width: 100%; }

.rangepick { margin-inline-start: auto; display: flex; gap: 2px; }
.rangepick a { font: 600 12.5px "Heebo", sans-serif; color: var(--ink2); text-decoration: none;
  padding: 6px 12px; border-radius: 7px; }
.rangepick a:hover { background: var(--hover); color: var(--ink); }
.rangepick a.active { background: var(--brand-soft); color: var(--brand-dp); font-weight: 700; }

/* ─────────────────────────── WiFi tabs ─────────────────────────── */
.tabs { display: flex; padding: 0 12px; border-bottom: 1px solid var(--line2);
  gap: 2px; flex-wrap: wrap; }
.tab { font: 700 13.5px "Heebo", sans-serif; color: var(--ink2); background: none;
  border: 0; cursor: pointer; padding: 13px 15px; border-bottom: 3px solid transparent;
  margin-bottom: -1px; display: inline-flex; align-items: center; gap: 7px; }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--brand-dp); border-bottom-color: var(--brand); }
.tabcount { font: 600 11px "IBM Plex Mono", monospace; background: var(--chip); color: var(--ink2);
  border-radius: 20px; padding: 2px 8px; }
.tab.active .tabcount { background: var(--brand-soft); color: var(--brand-dp); }
.tab.meshtab { color: var(--teal); }
.tab.meshtab .tabcount { background: var(--chip-teal); color: var(--teal); }
.tab.meshtab:hover { color: var(--teal-dp); }
.tab.meshtab.active { color: var(--teal-dp); border-bottom-color: var(--teal); }
.tab.meshtab.active .tabcount { background: var(--chip-teal-act); }
.tab.lantab { color: var(--ink2); }
.tab.lantab .tabcount { background: var(--chip); }
.tab.lantab:hover { color: var(--ink); }
.tab.lantab.active { color: var(--ink); border-bottom-color: var(--ink3); }
.tabpane { display: none; }
.tabpane.active { display: block; }
.tabpane > p.muted { padding: 16px 22px; margin: 0; font-size: 13px; }

/* mesh marking */
.meshtag { display: inline-block; font: 700 10.5px/1 "Heebo", sans-serif; padding: 4px 9px;
  border-radius: 20px; margin-inline-start: 6px; white-space: nowrap;
  background: var(--chip-teal); color: var(--teal); border: 1px solid var(--chip-teal-line); }
.meshtag.warn { background: var(--yellow-bg); color: var(--yellow-ink);
  border-color: color-mix(in srgb, var(--yellow) 42%, var(--card)); }
.meshtag.calm { background: var(--hover); color: var(--ink2); border-color: var(--line); font-weight: 600; }
.meshbadge { display: inline-block; font: 700 11px "Heebo", sans-serif; padding: 4px 10px;
  border-radius: 20px; margin-inline-start: 8px; vertical-align: middle;
  background: var(--chip-teal); color: var(--teal); border: 1px solid var(--chip-teal-line); }
.meshunit { padding: 12px 22px; border-bottom: 1px solid var(--line2); }
.meshunit a.stat { margin-inline-start: 8px; }

/* ─────────────────────────── threshold scale ─────────────────────────── */
/* Tinting status colours with white turns them into pink, tan and pale green —
   mud, on the one component whose whole job is to be unambiguous. Neutral
   track, saturated ribbon, dark needle over both. */
/* auto-fit rather than a fixed four: a device with five readings used to
   leave a single orphan on a second row */
.scales { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  border-top: 1px solid var(--line2); }
.sc { padding: 16px 20px 18px; border-inline-start: 1px solid var(--line2);
  display: grid; gap: 10px; align-content: start; }
/* a value with no configured threshold gets no meter — a full bar would
   read as "pinned", which is a measurement we never made */
.sc.noscale .gauge { display: none; }
.sc:first-child { border-inline-start: 0; }
.sc .lab { display: flex; align-items: baseline; gap: 8px; }
.sc .lab small { font: 600 11.5px/1 "Heebo", sans-serif; color: var(--ink3); letter-spacing: .03em; }
.sc .val { margin-inline-start: auto; font: 600 25px/1 "IBM Plex Mono", monospace;
  direction: ltr; unicode-bidi: isolate; color: var(--ink); }
.sc .val .u { font-size: 12px; color: var(--ink3); }
.sc .val.green { color: var(--green); } .sc .val.yellow { color: var(--yellow); }
.sc .val.red { color: var(--red); } .sc .val.unknown { color: var(--ink3); }
/* The axis is a number line, so it runs low-to-high left-to-right like every
   other number on this page. Without this the page inherits RTL and the
   bands mirror against their own labels: the tick said 20 C on the left
   while the band under it was red. Measured in the DOM, not guessed. */
.gauge { position: relative; height: 20px; direction: ltr; }
.gauge::before { content: ""; position: absolute; inset-block: 4px; inset-inline: 0;
  border-radius: 4px; background: var(--track); box-shadow: inset 0 1px 2px rgba(27,43,54,.14); }
.gauge .z { position: absolute; inset-block: 8px; height: 6px; }
.gauge .zg { background: var(--zone-g); } .gauge .zy { background: var(--zone-y); } .gauge .zr { background: var(--zone-r); }
.gauge .mk { position: absolute; top: 0; width: 4px; height: 20px; border-radius: 2px;
  background: var(--teal-dp); box-shadow: 0 0 0 2.5px var(--card), 0 1px 4px rgba(0,0,0,.34); }
.sc .rng { direction: ltr; unicode-bidi: isolate;
  font: 500 10.5px "IBM Plex Mono", monospace; color: var(--ink3); }
/* each label sits at its own value, so the axis agrees with the bands under it */
.sc:not(.noscale) .rng { position: relative; height: 13px; }
.sc:not(.noscale) .rng span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.sc:not(.noscale) .rng span:first-child { transform: none; }
.sc:not(.noscale) .rng span:last-child { transform: translateX(-100%); }
.sc.noscale .rng { display: flex; justify-content: space-between; }

/* ─────────────────────────── responsive ─────────────────────────── */
@media (max-width: 1100px) {
  .devcols { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .cols2 { grid-template-columns: 1fr; }
  .scales { grid-template-columns: repeat(2, 1fr); }
  .sc:nth-child(3) { border-inline-start: 0; }
  .sc:nth-child(n+3) { border-top: 1px solid var(--line2); }
}
@media (max-width: 680px) {
  .topbar { height: auto; padding: 12px 14px; flex-wrap: wrap; gap: 12px; }
  .topsearch { width: 100%; }
  .topsearch input { width: 100%; }
  .userbox { width: 100%; margin-inline-start: 0; justify-content: space-between; }
  .scales { grid-template-columns: 1fr; }
  .sc { border-inline-start: 0 !important; border-top: 1px solid var(--line2); }
  main { padding: 0 12px; }
  .hero h1 { font-size: 25px; }
  .diaghead h2 { font-size: 21px; }
  .diaghead.withid { grid-template-columns: auto 1fr; }
  .diagid { grid-column: 1 / -1; text-align: start; border-inline-start: 0;
    padding: 12px 0 0; border-top: 1px solid var(--line2); white-space: normal; }
  table.list th, table.list td { padding: 10px 14px; }
}

/* ═══════════════════ components ported from the approved comp
   (d-brand.html). The earlier pass applied the palette but kept the old
   markup; these are the pieces the comp actually specified. ═══════════ */

/* card header strip */
.ch { display: flex; align-items: center; gap: 10px; padding: 13px 20px;
  border-bottom: 1px solid var(--line2); }
.ch h2 { margin: 0; font: 700 13px/1 "Heebo", sans-serif; color: var(--teal); letter-spacing: .02em; }
.ch .r { margin-inline-start: auto; font-size: 12px; color: var(--ink3); }
.ch .r.mono { font-size: 11.5px; }
.ch .link { margin-inline-start: auto; }
.link { color: var(--teal); text-decoration: none; font-weight: 600; font-size: 12.5px; }
.link:hover { color: var(--brand-dp); text-decoration: underline; text-underline-offset: 3px; }

/* device hero — lamp, verdict, identity block */
.dhero { display: grid; grid-template-columns: auto 1fr auto; gap: 24px;
  align-items: center; padding: 24px 26px; }
.dhero .lamp { width: 16px; height: 16px; border-radius: 50%; flex: none; background: var(--ink3); }
.dhero h1 { margin: 0 0 5px; font: 800 27px/1.2 "Heebo", sans-serif;
  letter-spacing: -.02em; color: var(--teal-dp); }
.dhero p { margin: 0; color: var(--ink2); font-size: 14.5px; }
.dhero .idb { text-align: end; padding-inline-start: 22px; border-inline-start: 1px solid var(--line); }
.dhero .idb b { display: block; font: 700 18px/1.25 "Heebo", sans-serif; color: var(--ink); }
.dhero .idb span { display: block; font: 500 12px "IBM Plex Mono", monospace; direction: ltr;
  unicode-bidi: isolate; color: var(--ink3); }
.dhero .idb .site { font-family: "Heebo", sans-serif; direction: rtl; }
.green .dhero .lamp { background: var(--green); box-shadow: 0 0 0 5px var(--green-bg), 0 0 14px -2px var(--green); }
.yellow .dhero .lamp { background: var(--yellow); box-shadow: 0 0 0 5px var(--yellow-bg), 0 0 14px -2px var(--yellow); }
.red .dhero .lamp { background: var(--red); box-shadow: 0 0 0 5px var(--red-bg), 0 0 16px -2px var(--red);
  animation: beat 2s ease-in-out infinite; }
.red .dhero h1 { color: var(--red); }

/* flagged remark strip at the foot of the hero card */
.flag { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  padding: 15px 22px; background: var(--yellow-bg);
  border-top: 1px solid color-mix(in srgb, var(--yellow) 32%, var(--card)); }
.flag:last-child { border-radius: 0 0 var(--r) var(--r); }
.flag .ic { color: var(--yellow); display: flex; }
.flag p { margin: 0; font-size: 13.5px; color: var(--yellow-ink); }
.flag b { color: var(--yellow-ink-b); }
.flag.red { background: var(--red-bg); border-top-color: color-mix(in srgb, var(--red) 30%, var(--card)); }
.flag.red .ic { color: var(--red); }
.flag.red p { color: var(--red-ink); }
.flag.red b { color: var(--red-ink-b); }

/* key/value list — flex rows, not a table */
.kv { padding: 0; }
.kv > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 20px;
  border-bottom: 1px solid var(--line2); font-size: 13.5px; }
.kv > div:last-child { border-bottom: 0; }
.kv span { color: var(--ink3); flex: none; }
.kv b { font-weight: 600; text-align: end; min-width: 0; }
.kv b small { display: block; font-weight: 500; color: var(--ink3); }

/* Friendly settings — read the value, open the form in place */
.setrow { border-bottom: 1px solid var(--line2); }
.setrow:last-child { border-bottom: 0; }
.setrow > summary { display: grid; grid-template-columns: 86px 1fr auto; gap: 10px;
  align-items: center; padding: 10px 20px; font-size: 13.5px; cursor: pointer; list-style: none; }
.setrow > summary::-webkit-details-marker { display: none; }
.setrow > summary > span:first-child { color: var(--ink3); font-size: 12.5px; }
.setrow > summary b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setrow > summary b em { font-style: normal; font-weight: 500; color: var(--ink3);
  font-size: 12px; margin-inline-start: 6px; }
.setrow > summary .edit { font: 700 12px "Heebo", sans-serif; color: var(--teal); }
.setrow[open] > summary .edit { color: var(--brand-dp); }
.setrow > summary:hover .edit { text-decoration: underline; text-underline-offset: 3px; }
.setrow form { padding: 4px 20px 16px; background: var(--field); border-top: 1px solid var(--line2); }
.norow { display: grid; grid-template-columns: 86px 1fr; gap: 10px;
  padding: 10px 20px; font-size: 13.5px; border-bottom: 1px solid var(--line2); }
.norow:last-child { border-bottom: 0; }
.norow > span:first-child { color: var(--ink3); font-size: 12.5px; }
.reg { display: inline-flex; align-items: center; gap: 5px; font: 700 11px "Heebo", sans-serif; color: var(--green); }
.reg i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.reg.off { color: var(--red); }
.reg.off i { background: var(--red); }

/* proactive monitoring */
.mon-h { display: flex; align-items: center; gap: 10px; padding: 13px 20px;
  border-bottom: 1px solid var(--line2); flex-wrap: wrap; }
.mon-h h2 { margin: 0; font: 700 13px/1 "Heebo", sans-serif; color: var(--teal); }
.live { display: inline-flex; align-items: center; gap: 6px; font: 700 11px "Heebo", sans-serif;
  color: var(--green); background: var(--green-bg); border-radius: 20px; padding: 4px 10px; }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  animation: bp 1.8s ease-in-out infinite; }
@keyframes bp { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .live i { animation: none; } }
.mon-h .r { margin-inline-start: auto; font-size: 12px; color: var(--ink3); }
.mon-h form { margin: 0; }
.mon-h .stop { font: 700 12px "Heebo", sans-serif; color: var(--red); background: none;
  border: 1px solid var(--line); border-radius: 7px; padding: 6px 12px; cursor: pointer; }
.mon-h .stop:hover { border-color: var(--red); background: var(--red-bg); }
.mon-grid { display: grid; grid-template-columns: repeat(3, 1fr) 2.4fr; align-items: center; }
.mn { padding: 14px 20px; border-inline-start: 1px solid var(--line2); display: grid; gap: 3px; }
.mn:first-child { border-inline-start: 0; }
.mn small { font: 600 11px/1 "Heebo", sans-serif; color: var(--ink3); }
.mn b { font: 600 21px/1 "IBM Plex Mono", monospace; direction: ltr; unicode-bidi: isolate; }
.mn b .u { font-size: 11.5px; color: var(--ink3); }
.mn b.green { color: var(--green); }
.mn b.yellow { color: var(--yellow); }
.mn b.red { color: var(--red); }
/* one bar per sample — eight hours of checks read at a glance */
.ticks { padding: 14px 20px; border-inline-start: 1px solid var(--line2); }
.ticks .lbl { font: 600 11px/1 "Heebo", sans-serif; color: var(--ink3); margin-bottom: 8px;
  display: flex; justify-content: space-between; }
.ticks .row { display: flex; gap: 2px; align-items: flex-end; height: 34px; }
.ticks i { flex: 1; border-radius: 1.5px; background: var(--zone-g); min-height: 3px; }
.ticks i.y { background: var(--zone-y); }
.ticks i.r { background: var(--zone-r); }
.ticks i.pend { background: var(--track); }
/* no ICMP reply, but the router's own download test succeeded — the line works
   and the probe simply does not get through. Neither a fault nor a measurement,
   so it takes no status colour: a hollow bar that reads as "no answer". */
.ticks i.noicmp { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink3); }

/* traffic + optics figures */
.rates { display: flex; gap: 24px; padding: 16px 20px 8px; flex-wrap: wrap; }
.rates > div { display: grid; gap: 2px; }
.rates small { font: 600 11px/1 "Heebo", sans-serif; letter-spacing: .05em; color: var(--ink3); }
/* the legend the chart does not carry: a dot on a readout means "this number is
   a line in the chart below, in this colour". Readouts without one — peak,
   temperature — are not plotted, and their absence says so. */
.rates .sw { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-inline-end: 6px; vertical-align: 1px; }
.rates b { font: 600 21px/1 "IBM Plex Mono", monospace; direction: ltr; unicode-bidi: isolate; }
.chartwrap { padding: 4px 14px 16px; }
.chartwrap svg { display: block; width: 100%; height: auto; }

/* action buttons */
.acts { display: grid; gap: 9px; padding: 16px 20px; }
.acts button, .acts .btn { font: 700 13.5px "Heebo", sans-serif; padding: 12px; border-radius: 8px;
  cursor: pointer; border: 1.5px solid var(--line); background: var(--card); color: var(--teal);
  text-align: center; text-decoration: none; display: block; width: 100%; }
.acts button:hover, .acts .btn:hover { border-color: var(--sky); background: var(--chip-sky); }
.acts button.pri { background: var(--brand); border-color: var(--brand); color: var(--on-brand);
  box-shadow: 0 3px 10px -4px rgba(232,106,22,.75); }
.acts button.pri:hover { background: var(--brand-dp); border-color: var(--brand-dp); }
.acts button:disabled { background: var(--ink3); border-color: var(--ink3); color: var(--card);
  box-shadow: none; cursor: not-allowed; }
.acts .note { font-size: 12px; color: var(--ink3); margin: 0; }

.emptyline { padding: 16px 20px; margin: 0; color: var(--ink3); font-size: 13px; }


@media (max-width: 900px) {
  .mon-grid { grid-template-columns: repeat(3, 1fr); }
  .ticks { grid-column: 1 / -1; border-inline-start: 0; border-top: 1px solid var(--line2); }
  .dhero { grid-template-columns: auto 1fr; }
  .dhero .idb { grid-column: 1 / -1; text-align: start; border-inline-start: 0;
    padding: 14px 0 0; border-top: 1px solid var(--line2); }
  .flag { grid-template-columns: auto 1fr; }
}
.rates b .u { font-size: 11.5px; color: var(--ink3); font-weight: 500; }

/* ─── density pass: the cards were taller than the data in them ─── */

/* charts are a glance, not a study */
.chartwrap { padding: 2px 14px 10px; }
.rates { padding: 13px 20px 4px; }
.rates b { font-size: 19px; }

/* monitoring: tighter metrics, shorter bar row */
.mn { padding: 11px 18px; }
.mn b { font-size: 19px; }
.ticks { padding: 11px 18px; }
.ticks .row { height: 26px; }
.ticks .lbl { margin-bottom: 6px; }

/* an on-demand drawer for the exact numbers behind a summarised view */
.drawer { border-top: 1px solid var(--line2); }
.drawer > summary { cursor: pointer; padding: 10px 20px; list-style: none;
  font: 600 12.5px "Heebo", sans-serif; color: var(--ink2); }
.drawer > summary::-webkit-details-marker { display: none; }
.drawer > summary::before { content: "▾ "; color: var(--ink3); }
.drawer[open] > summary { border-bottom: 1px solid var(--line2); }
.drawer > summary:hover { color: var(--brand-dp); }

/* event list — a table of three columns does not fit a 340px column */
.evlist { list-style: none; margin: 0; padding: 0; }
.evlist li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 8px 20px; border-bottom: 1px solid var(--line2); font-size: 13px; }
.evlist li:last-child { border-bottom: 0; }
.evlist time { font: 500 12px "IBM Plex Mono", monospace; color: var(--ink3);
  direction: ltr; unicode-bidi: isolate; }
.evlist b { font-weight: 600; }
.evlist b.down { color: var(--red); }
.evlist b.up { color: var(--green); }