/* NetworkIQ. Its own colours and its own screens, inside the shared frames in
   styles.css. docs/SCREENS.md is the contract. Linked only from
   work/networkiq.html and NetworkIQ's card on the front page.

   Technical, for the mid-tech user: cool cabinet greys, near-black ink, and
   one accent, the blue of a patch lead. Port state is never colour alone.
   Each state has its own shape as well, the same on every screen:

     answering    a filled square
     no link      a dashed, hollow square
     do not pull  a filled square with a ring round it
     broken       a cross
     at risk      a triangle

   Every token set for the day has its night value below; scripts/check-screens.mjs
   refuses a token that has no night value. */

/* ---- Theme, day ---- */
[data-system="networkiq"] {
  --sys-bg: #F2F4F6;
  --sys-surface: #FFFFFF;
  --sys-ink: #111A22;
  --sys-muted: #4F5D6A;
  --sys-line: #D8DEE4;
  --sys-accent: #1B5BB5;
  --sys-on-accent: #FFFFFF;
  --sys-accent-soft: #E6EEF9;
  --sys-ok: #0F6E4B;
  --sys-on-ok: #FFFFFF;
  --sys-ok-soft: #E1F2E9;
  --sys-warn: #8A4F00;
  --sys-warn-soft: #FBF0DC;
  --sys-bad: #B0241C;
  --sys-on-bad: #FFFFFF;
  --sys-bad-soft: #FBE8E6;
}

/* ---- Theme, night. The same screen in the dark, nothing moved. ---- */
[data-theme="dark"] [data-system="networkiq"] {
  --sys-bg: #0E1318;
  --sys-surface: #161D24;
  --sys-ink: #E4EAF0;
  --sys-muted: #9AA8B5;
  --sys-line: #2A343E;
  --sys-accent: #82B1F2;
  --sys-on-accent: #0E1318;
  --sys-accent-soft: #18273D;
  --sys-ok: #5DC99A;
  --sys-on-ok: #0E1318;
  --sys-ok-soft: #12291F;
  --sys-warn: #EBB462;
  --sys-warn-soft: #2D2311;
  --sys-bad: #FF8E86;
  --sys-on-bad: #0E1318;
  --sys-bad-soft: #36191A;
}

/* The app's own base size, so nothing in a screen inherits the page's. */
[data-system="networkiq"] .frame__app { font-size: calc(13 * var(--u)); }

/* ---- The app bar: the mark, the site, the 3 stages, the switch it read ---- */
[data-system="networkiq"] .niq-top {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(24 * var(--u));
  height: calc(56 * var(--u));
  padding: 0 calc(24 * var(--u));
  border-bottom: var(--line) solid var(--sys-line);
  background: var(--sys-surface);
  font-size: calc(13 * var(--u));
}
[data-system="networkiq"] .niq-brand { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 700; }
[data-system="networkiq"] .niq-mark { display: block; width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
[data-system="networkiq"] .niq-mark rect { fill: var(--sys-accent); }
[data-system="networkiq"] .niq-mark .niq-mark__port { fill: var(--sys-on-accent); }
[data-system="networkiq"] .niq-site { color: var(--sys-muted); padding-left: calc(16 * var(--u)); border-left: var(--line) solid var(--sys-line); }
[data-system="networkiq"] .niq-site b { color: var(--sys-ink); font-weight: 600; }
[data-system="networkiq"] .niq-tabs {
  display: flex;
  gap: calc(2 * var(--u));
  margin: 0 auto;
  padding: calc(3 * var(--u));
  border-radius: calc(8 * var(--u));
  background: var(--sys-bg);
}
[data-system="networkiq"] .niq-tab { padding: calc(5 * var(--u)) calc(14 * var(--u)); border-radius: calc(6 * var(--u)); color: var(--sys-muted); font-weight: 500; }
[data-system="networkiq"] .niq-tab--on { background: var(--sys-surface); color: var(--sys-ink); font-weight: 600; outline: var(--line) solid var(--sys-line); }
[data-system="networkiq"] .niq-tab i { font-style: normal; color: var(--sys-ok); margin-right: calc(4 * var(--u)); }
[data-system="networkiq"] .niq-top__end { display: flex; align-items: center; gap: calc(12 * var(--u)); color: var(--sys-muted); }

/* ---- Layout ---- */
[data-system="networkiq"] .niq-main { flex: 1 1 auto; min-height: 0; padding: calc(20 * var(--u)) calc(24 * var(--u)); display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
[data-system="networkiq"] .niq-split { display: grid; grid-template-columns: calc(344 * var(--u)) minmax(0, 1fr); gap: calc(20 * var(--u)); align-items: start; }
[data-system="networkiq"] .niq-stack { display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
[data-system="networkiq"] .niq-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(16 * var(--u)); align-items: start; }
[data-system="networkiq"] .niq-card { background: var(--sys-surface); border: var(--line) solid var(--sys-line); border-radius: calc(10 * var(--u)); padding: calc(16 * var(--u)) calc(18 * var(--u)); }
[data-system="networkiq"] .niq-card--flush { padding: 0; overflow: hidden; }
[data-system="networkiq"] .niq-head { display: flex; align-items: baseline; justify-content: space-between; gap: calc(12 * var(--u)); }
[data-system="networkiq"] .niq-card--flush .niq-head { padding: calc(14 * var(--u)) calc(18 * var(--u)); }
[data-system="networkiq"] .niq-h { font-size: calc(17 * var(--u)); font-weight: 600; line-height: 1.25; }
[data-system="networkiq"] .niq-h--l { font-size: calc(22 * var(--u)); }
[data-system="networkiq"] .niq-sub { margin-top: calc(2 * var(--u)); font-size: calc(13 * var(--u)); color: var(--sys-muted); }
[data-system="networkiq"] .niq-space { height: calc(12 * var(--u)); }
[data-system="networkiq"] .niq-gap { margin-top: calc(12 * var(--u)); }
[data-system="networkiq"] .niq-meta { font-size: calc(13 * var(--u)); color: var(--sys-muted); white-space: nowrap; }

/* ---- State glyphs. Shape first, colour second. ---- */
[data-system="networkiq"] .niq-g { display: inline-block; flex: none; width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: calc(2 * var(--u)); vertical-align: calc(-1 * var(--u)); }
[data-system="networkiq"] .niq-g--up { background: var(--sys-ok); }
[data-system="networkiq"] .niq-g--off { border: calc(1.5 * var(--u)) dashed var(--sys-muted); }
[data-system="networkiq"] .niq-g--dnp { background: var(--sys-ok); outline: calc(2 * var(--u)) solid var(--sys-warn); outline-offset: calc(1.5 * var(--u)); }
[data-system="networkiq"] .niq-g--bad { border-radius: 0; background: var(--sys-bad); clip-path: polygon(20% 0, 50% 30%, 80% 0, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0 80%, 30% 50%, 0 20%); }
[data-system="networkiq"] .niq-g--risk { border-radius: 0; width: calc(12 * var(--u)); background: var(--sys-warn); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
[data-system="networkiq"] .niq-g--now { border-radius: 50%; background: var(--sys-accent); }

/* A state written out: the glyph, then the word. */
[data-system="networkiq"] .niq-state { display: inline-flex; align-items: center; gap: calc(7 * var(--u)); white-space: nowrap; }
[data-system="networkiq"] .niq-state--dnp { color: var(--sys-warn); font-weight: 600; }
[data-system="networkiq"] .niq-state--bad { color: var(--sys-bad); font-weight: 600; }
[data-system="networkiq"] .niq-state--risk { color: var(--sys-warn); font-weight: 600; }
[data-system="networkiq"] .niq-state--now { color: var(--sys-accent); font-weight: 600; }
[data-system="networkiq"] .niq-state--off { color: var(--sys-muted); }

/* ---- A port on a switch face or a panel ---- */
[data-system="networkiq"] .niq-face { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: calc(5 * var(--u)); padding: calc(10 * var(--u)); border-radius: calc(6 * var(--u)); background: var(--sys-bg); }
[data-system="networkiq"] .niq-port {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(22 * var(--u));
  border-radius: calc(3 * var(--u));
  font-size: calc(11 * var(--u));
  font-weight: 600;
}
[data-system="networkiq"] .niq-port--up { background: var(--sys-ok); color: var(--sys-on-ok); }
[data-system="networkiq"] .niq-port--off { border: calc(1.5 * var(--u)) dashed var(--sys-muted); color: var(--sys-muted); font-weight: 500; }
[data-system="networkiq"] .niq-port--dnp { background: var(--sys-ok); color: var(--sys-on-ok); outline: calc(2 * var(--u)) solid var(--sys-warn); outline-offset: calc(2 * var(--u)); }
[data-system="networkiq"] .niq-legend { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)) calc(18 * var(--u)); font-size: calc(13 * var(--u)); }
[data-system="networkiq"] .niq-legend b { font-weight: 600; margin-left: calc(2 * var(--u)); }

/* Key and value rows. */
[data-system="networkiq"] .niq-kv { display: grid; grid-template-columns: auto 1fr; gap: calc(8 * var(--u)) calc(16 * var(--u)); font-size: calc(13 * var(--u)); }
[data-system="networkiq"] .niq-kv dt { color: var(--sys-muted); }
[data-system="networkiq"] .niq-kv dd { text-align: right; font-weight: 500; }

/* ---- Tables ---- */
[data-system="networkiq"] .niq-table { width: 100%; border-collapse: collapse; font-size: calc(13 * var(--u)); }
[data-system="networkiq"] .niq-table th { padding: calc(8 * var(--u)) calc(12 * var(--u)); text-align: left; font-size: calc(12 * var(--u)); font-weight: 500; color: var(--sys-muted); background: var(--sys-bg); border-top: var(--line) solid var(--sys-line); border-bottom: var(--line) solid var(--sys-line); white-space: nowrap; }
[data-system="networkiq"] .niq-table td { height: calc(32 * var(--u)); padding: 0 calc(12 * var(--u)); border-bottom: var(--line) solid var(--sys-line); white-space: nowrap; }
[data-system="networkiq"] .niq-table tr:last-child td { border-bottom: 0; }
[data-system="networkiq"] .niq-table th:first-child,
[data-system="networkiq"] .niq-table td:first-child { padding-left: calc(18 * var(--u)); }
[data-system="networkiq"] .niq-table .niq-num { font-weight: 600; }
[data-system="networkiq"] .niq-table .niq-dim { color: var(--sys-muted); }
[data-system="networkiq"] .niq-table .niq-r { text-align: right; }

/* A filter, drawn: one segment chosen. */
[data-system="networkiq"] .niq-seg { display: flex; border: var(--line) solid var(--sys-line); border-radius: calc(7 * var(--u)); overflow: hidden; font-size: calc(12 * var(--u)); }
[data-system="networkiq"] .niq-seg span { padding: calc(4 * var(--u)) calc(10 * var(--u)); color: var(--sys-muted); border-left: var(--line) solid var(--sys-line); }
[data-system="networkiq"] .niq-seg span:first-child { border-left: 0; }
[data-system="networkiq"] .niq-seg .niq-seg--on { background: var(--sys-accent-soft); color: var(--sys-accent); font-weight: 600; }

/* Buttons, drawn as spans: nothing in a screen can take focus. */
[data-system="networkiq"] .niq-btn { display: inline-flex; align-items: center; padding: calc(6 * var(--u)) calc(12 * var(--u)); border: var(--line) solid var(--sys-line); border-radius: calc(7 * var(--u)); background: var(--sys-surface); color: var(--sys-ink); font-size: calc(13 * var(--u)); font-weight: 500; white-space: nowrap; }
[data-system="networkiq"] .niq-btn--main { background: var(--sys-accent); border-color: var(--sys-accent); color: var(--sys-on-accent); font-weight: 600; }
[data-system="networkiq"] .niq-actions { display: flex; gap: calc(8 * var(--u)); }

/* ---- The panels plate ---- */
[data-system="networkiq"] .niq-panel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: calc(6 * var(--u)); margin-top: calc(12 * var(--u)); }
[data-system="networkiq"] .niq-panel__cell { display: flex; flex-direction: column; align-items: center; gap: calc(5 * var(--u)); min-width: 0; }
[data-system="networkiq"] .niq-panel .niq-port { width: 100%; height: calc(36 * var(--u)); font-size: calc(13 * var(--u)); }
[data-system="networkiq"] .niq-panel__to { font-size: calc(11 * var(--u)); color: var(--sys-muted); white-space: nowrap; }
[data-system="networkiq"] .niq-note { display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--u)); font-size: calc(13 * var(--u)); color: var(--sys-muted); }

/* ---- The dead run plate. The route is drawn at 20 points to the metre. ---- */
[data-system="networkiq"] .niq-figure { display: flex; align-items: baseline; gap: calc(10 * var(--u)); }
[data-system="networkiq"] .niq-figure__n { font-size: calc(34 * var(--u)); font-weight: 600; letter-spacing: -0.01em; color: var(--sys-bad); }
[data-system="networkiq"] .niq-figure__t { font-size: calc(15 * var(--u)); color: var(--sys-muted); }
[data-system="networkiq"] .niq-run { position: relative; width: calc(640 * var(--u)); height: calc(64 * var(--u)); margin-top: calc(14 * var(--u)); }
[data-system="networkiq"] .niq-run__wire { position: absolute; left: 0; top: calc(14 * var(--u)); width: calc(368 * var(--u)); height: calc(3 * var(--u)); border-radius: calc(2 * var(--u)); background: var(--sys-accent); }
[data-system="networkiq"] .niq-run__gone { position: absolute; left: calc(380 * var(--u)); top: calc(15 * var(--u)); width: calc(244 * var(--u)); border-top: calc(1.5 * var(--u)) dashed var(--sys-muted); }
[data-system="networkiq"] .niq-run__end { position: absolute; top: calc(8 * var(--u)); width: calc(4 * var(--u)); height: calc(15 * var(--u)); border-radius: calc(1 * var(--u)); background: var(--sys-ink); }
[data-system="networkiq"] .niq-run__end--far { left: calc(622 * var(--u)); background: var(--sys-muted); }
[data-system="networkiq"] .niq-run__cut { position: absolute; left: calc(362 * var(--u)); top: calc(9 * var(--u)); width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
[data-system="networkiq"] .niq-run__tick { position: absolute; top: calc(30 * var(--u)); font-size: calc(11 * var(--u)); color: var(--sys-muted); }
[data-system="networkiq"] .niq-run__tick::before { content: ""; position: absolute; left: 0; top: calc(-6 * var(--u)); height: calc(4 * var(--u)); border-left: var(--line) solid var(--sys-muted); }
[data-system="networkiq"] .niq-run__tick--10 { left: calc(200 * var(--u)); }
[data-system="networkiq"] .niq-run__tick--20 { left: calc(400 * var(--u)); }
[data-system="networkiq"] .niq-run__tick--30 { left: calc(600 * var(--u)); }
[data-system="networkiq"] .niq-run__lab { position: absolute; top: calc(46 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 500; white-space: nowrap; }
[data-system="networkiq"] .niq-run__lab--near { left: 0; }
[data-system="networkiq"] .niq-run__lab--cut { left: calc(312 * var(--u)); color: var(--sys-bad); font-weight: 600; }
[data-system="networkiq"] .niq-run__lab--far { right: 0; color: var(--sys-muted); }

/* ---- The report plate ---- */
[data-system="networkiq"] .niq-col__head { display: flex; align-items: center; gap: calc(8 * var(--u)); padding-bottom: calc(10 * var(--u)); border-bottom: calc(2 * var(--u)) solid var(--sys-line); font-size: calc(15 * var(--u)); font-weight: 600; }
[data-system="networkiq"] .niq-col__head--bad { border-bottom-color: var(--sys-bad); }
[data-system="networkiq"] .niq-col__head--risk { border-bottom-color: var(--sys-warn); }
[data-system="networkiq"] .niq-col__n { margin-left: auto; font-size: calc(22 * var(--u)); font-weight: 600; }
[data-system="networkiq"] .niq-item { display: grid; grid-template-columns: calc(44 * var(--u)) minmax(0, 1fr); column-gap: calc(10 * var(--u)); padding: calc(9 * var(--u)) 0; border-bottom: var(--line) solid var(--sys-line); }
[data-system="networkiq"] .niq-item__port { font-size: calc(13 * var(--u)); font-weight: 700; }
[data-system="networkiq"] .niq-item__what { font-size: calc(13 * var(--u)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-system="networkiq"] .niq-item__why { grid-column: 2; font-size: calc(12 * var(--u)); color: var(--sys-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- The phone at the cabinet ---- */
[data-system="networkiq"] .niq-phone { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0 calc(16 * var(--u)) calc(34 * var(--u)); }
[data-system="networkiq"] .niq-phone__nav { display: flex; justify-content: space-between; height: calc(36 * var(--u)); align-items: center; font-size: calc(17 * var(--u)); color: var(--sys-accent); }
[data-system="networkiq"] .niq-phone__title { font-size: calc(28 * var(--u)); font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
[data-system="networkiq"] .niq-phone__sub { margin-top: calc(2 * var(--u)); font-size: calc(15 * var(--u)); color: var(--sys-muted); }
[data-system="networkiq"] .niq-bar { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: calc(3 * var(--u)); margin-top: calc(12 * var(--u)); }
[data-system="networkiq"] .niq-bar i { height: calc(6 * var(--u)); border-radius: calc(2 * var(--u)); background: var(--sys-line); }
[data-system="networkiq"] .niq-bar .niq-bar--done { background: var(--sys-ok); }
[data-system="networkiq"] .niq-bar .niq-bar--dnp { background: var(--sys-warn); }
[data-system="networkiq"] .niq-bar .niq-bar--now { background: var(--sys-accent); }
[data-system="networkiq"] .niq-now { margin-top: calc(16 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--sys-accent-soft); }
[data-system="networkiq"] .niq-now__step { font-size: calc(13 * var(--u)); font-weight: 600; color: var(--sys-accent); }
[data-system="networkiq"] .niq-now__do { margin-top: calc(2 * var(--u)); font-size: calc(22 * var(--u)); font-weight: 700; }
[data-system="networkiq"] .niq-now__how { margin-top: calc(2 * var(--u)); font-size: calc(15 * var(--u)); color: var(--sys-muted); }
[data-system="networkiq"] .niq-rows { margin-top: calc(14 * var(--u)); border-top: var(--line) solid var(--sys-line); }
[data-system="networkiq"] .niq-row { display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(38 * var(--u)); border-bottom: var(--line) solid var(--sys-line); font-size: calc(15 * var(--u)); }
[data-system="networkiq"] .niq-row__id { width: calc(40 * var(--u)); flex: none; font-weight: 600; }
[data-system="networkiq"] .niq-row__what { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-system="networkiq"] .niq-row__what--wait { color: var(--sys-muted); }
[data-system="networkiq"] .niq-row__end { flex: none; font-size: calc(13 * var(--u)); color: var(--sys-muted); }
[data-system="networkiq"] .niq-row--now { margin: 0 calc(-16 * var(--u)); padding: 0 calc(16 * var(--u)); background: var(--sys-accent-soft); }

/* ---- The front-page card: the switch read, cut down to a 4:3 plate ---- */
[data-system="networkiq"] .niq-card-plate .niq-face { gap: calc(8 * var(--u)); padding: calc(14 * var(--u)); }
[data-system="networkiq"] .niq-card-plate .niq-port { height: calc(40 * var(--u)); font-size: calc(15 * var(--u)); }
[data-system="networkiq"] .niq-card-plate .niq-legend { font-size: calc(15 * var(--u)); }
[data-system="networkiq"] .niq-card-plate .niq-g { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
[data-system="networkiq"] .niq-card-plate .niq-table { font-size: calc(15 * var(--u)); }
[data-system="networkiq"] .niq-card-plate .niq-table td { height: calc(38 * var(--u)); }