/* Colour layer, loaded last. The owner asked for parts and states that differ at a glance, a calmer
   scheme without the template dashboard look, and each switch as clearly separate as Sippy is from
   PeerEdge. So: a charcoal sidebar with a plain marker on the current page, solid charcoal primary
   buttons, flat panels with square-ish corners and no soft shadows, test mode in steel grey with a
   striped strip, state shown as filled colour, and one colour per switch used on every screen
   (sw-0 and sw-1 for the Sippy addresses in the server's order, sw-pe for PeerEdge). */

/* DM Sans for all text and numbers (the owner's choice from four), self-hosted: the app loads
   only its own files. One variable file covers every weight from 400 to 700. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/dm-sans.woff2") format("woff2");
}

:root {
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ink: #1D232A;
  --slate: #4A5563;
  --mist: #E9ECEF;
  --rule: #CDD3DA;
  --rule-btn: #AEB6C0;
  --rule-strong: #6B7684;
  --hover: #EEF1F4;

  /* Orbit's brand blue, #7DC8FF, fills buttons, the current page and the logo, with near-black
     words on it. On white it is too pale for words or lines, so links and focus use the same
     blue made deeper (#0C5C97, 7 to 1 on white). */
  --brand: #7DC8FF;
  --accent: #0C5C97;
  --accent-hover: #0A4B7B;
  --accent-fill: #7DC8FF;
  --accent-fill-hover: #5AB4F6;
  --on-accent: #10171F;
  --accent-tint: #E7F4FE;
  /* The brand fills are a light gradient of the brand blue, lighter at the top left. */
  --brand-grad: linear-gradient(135deg, #C2E6FF 0%, #7DC8FF 58%, #66BEFB 100%);
  --brand-grad-hover: linear-gradient(135deg, #AEDDFF 0%, #66BDFB 58%, #52B2F7 100%);
  --side-on-fill: var(--brand-grad);

  --ok: #157A4B;
  --warn: #A75A06;
  --warn-text: #94500A;
  --bad: #C0262D;
  --bad-fill: #C0262D;
  --bad-fill-hover: #9E1D23;
  --test: #4F5E6E;
  --test-pale: #E4E8EC;

  --side-bg: #FFFFFF;
  --side-ink: #1D232A;
  --side-mute: #4A5563;
  --side-hover: #EEF1F4;
  --side-on: #7DC8FF;
  --head-bg: #EEF1F4;
  --ok-fill: #DDF1E6;
  --ok-line: #157A4B;
  --warn-fill: #FCEBD3;
  --warn-line: #C2700F;
  --bad-fill-pale: #FBE3E4;
  --bad-line: #C0262D;
  --test-fill: #E4E8EC;
  --test-line: #4F5E6E;
  --off-fill: #E9ECEF;
  /* The soft outline round a tinted card: its state's line colour, faded. No card has a bar down
     its left side: the tint, the outline and the status icon say its state. */
  --ok-edge: color-mix(in srgb, var(--ok-line) 40%, transparent);
  --warn-edge: color-mix(in srgb, var(--warn-line) 45%, transparent);
  --bad-edge: color-mix(in srgb, var(--bad-line) 40%, transparent);
  --test-edge: color-mix(in srgb, var(--test-line) 40%, transparent);
  --accent-edge: color-mix(in srgb, var(--accent) 35%, transparent);

  --sw-0: #2F3A45;
  --sw-0-tint: #E7EBEF;
  --sw-1: #0C5C97;
  --sw-1-tint: #E7F4FE;
  --sw-pe: #0E6B6B;
  --sw-pe-tint: #DFF0EF;
  --sw-3: #6B7684;
  --sw-3-tint: #EEF0F3;
}
:root[data-theme="dark"] {
  --ink: #E8EBEE;
  --slate: #A3ACB7;
  --mist: #0B0E12;
  --paper: #151A20;
  --rule: #2C343E;
  --rule-strong: #6B7684;
  --hover: #1D232A;
  --brand: #7DC8FF;
  --accent: #7DC8FF;
  --accent-hover: #9ED3FA;
  --accent-fill: #7DC8FF;
  --accent-fill-hover: #9ED3FA;
  --on-accent: #0B0E12;
  --accent-tint: #12283A;
  --test: #A9B6C4;
  --test-pale: #222A33;
  --side-bg: #11161C;
  --side-ink: #E8EBEE;
  --side-mute: #8B95A1;
  --side-hover: #1B2128;
  --side-on: #7DC8FF;
  --head-bg: #1B2128;
  --ok-fill: #10301F;
  --ok-line: #43C08F;
  --warn-fill: #33230F;
  --warn-line: #E99A4A;
  --bad-fill-pale: #3A1419;
  --bad-line: #F27382;
  --test-fill: #222A33;
  --test-line: #A9B6C4;
  --off-fill: #1B2128;
  --sw-0: #5D6B79;
  --sw-0-tint: #1C232B;
  --sw-1: #0E68AA;
  --sw-1-tint: #10243A;
  --sw-pe: #1F8A8A;
  --sw-pe-tint: #102A2A;
  --sw-3: #6B7684;
  --sw-3-tint: #1B2128;
}

/* Page and panels: a plain grey page behind flat white panels with a real edge. */
body { background: var(--mist); }
.panel { border: 1px solid var(--rule); border-radius: 6px; box-shadow: none; }
.btn { border-radius: 6px; border-color: var(--rule-strong); font-weight: 700; }
.btn.primary { color: var(--on-accent); }
.whatis, .whatis .glyph { color: var(--slate); }

/* The sidebar: light, with a thin edge, and the current page in solid brand blue. */
@media (min-width: 960px) {
  .sidebar { background: var(--side-bg); border-right: 1px solid var(--rule); }
  .sidebar, .sidebar .brand, .sidebar .brand * { color: var(--side-ink); }
  .side-label { color: inherit; }
  .side-device, .side-device-conn { color: var(--side-mute); }
  .side-device-name { color: var(--side-ink); }
  .side-link { color: var(--side-ink); border-radius: 4px; }
  .side-link .glyph { color: var(--side-mute); }
  .side-link:hover { background: var(--side-hover); color: var(--side-ink); }
  .side-link[aria-current="page"] { background: var(--side-on); color: var(--on-accent); box-shadow: none; }
  .side-link[aria-current="page"] .glyph { color: var(--on-accent); }
  .side-link[aria-current="page"]::before { display: none; }
  .sidebar hr, .side-in > * + * { border-color: var(--rule); }
}

/* The brand blue's fills: buttons, the current page, a switch that is on and a choice that is
   picked, each a light gradient with near-black words. */
.btn.primary, .skip, .activity-filter-btn .count, .alerts-switch input:checked + .alerts-switch-ui,
.alerts-dlg-type.is-on, .alerts-dlg-type:has(input:checked), .lockset-progress > li[aria-current="step"],
.numbers-pick-opt input:checked + span { background-image: var(--brand-grad); }
.btn.primary:hover { background-image: var(--brand-grad-hover); }
@media (min-width: 960px) {
  .side-link[aria-current="page"] { background: var(--side-on-fill); }
}

/* The emergency button is solid red everywhere. */
.btn.stop { border-color: var(--bad-fill); background: var(--bad-fill); color: #FFFFFF; font-weight: 700; }
.btn.stop:hover { border-color: var(--bad-fill-hover); background: var(--bad-fill-hover); color: #FFFFFF; }
.btn.stop .glyph { color: #FFFFFF; }

/* Test mode: steel grey, the strip striped like a rehearsal, not a warning. */
.bar-test { background: repeating-linear-gradient(135deg, var(--test-fill) 0 12px, var(--paper) 12px 24px); color: var(--ink); border-bottom: 1px solid var(--rule); }
.bar-test a { color: var(--ink); }
.mode-badge.test .mode-pill { background: var(--test-fill); color: var(--ink); box-shadow: inset 0 0 0 1px var(--test-line); }
.lamp.test { background: var(--test-line); }

/* Right now: each tile filled with its state colour, with a soft outline all round. */
.now-row { background: var(--off-fill); }
.now-row.ok { background: var(--ok-fill); box-shadow: inset 0 0 0 1px var(--ok-edge); }
.now-row.warn { background: var(--warn-fill); box-shadow: inset 0 0 0 1px var(--warn-edge); }
.now-row.bad { background: var(--bad-fill-pale); box-shadow: inset 0 0 0 1px var(--bad-edge); }
.now-row.test { background: var(--test-fill); box-shadow: inset 0 0 0 1px var(--test-edge); }
.now-row.test .now-label { color: var(--ink); }
.now-label { font-size: 14px; }
.now-text { color: var(--ink); font-weight: 600; }
@media (min-width: 1200px) {
  .now-list { gap: 10px; padding: 0 12px 12px; }
  .now-list > li + li .now-row { border-left: 0; }
  .now-row { border-radius: 6px; }
}

/* Needs attention: each card tinted by how serious it is, with a soft outline all round. */
.attn.row { border-radius: 6px; margin-bottom: 8px; padding-left: 14px; padding-right: 12px; }
.attn.row.bad { background: var(--bad-fill-pale); box-shadow: inset 0 0 0 1px var(--bad-edge); }
.attn.row.warn { background: var(--warn-fill); box-shadow: inset 0 0 0 1px var(--warn-edge); }
.attn.row.off { background: var(--off-fill); }
.attn-todo { color: var(--ink); }

/* State pills and badges: solid enough to read at a glance. */
.badge { font-weight: 700; border-radius: 4px; }
.badge.ok { background: var(--ok-fill); color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok-line); }
.badge.warn { background: var(--warn-fill); color: var(--warn-text); box-shadow: inset 0 0 0 1px var(--warn-line); }
.badge.bad { background: var(--bad-fill-pale); color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad-line); }
.badge.test { background: var(--test-fill); color: var(--ink); box-shadow: inset 0 0 0 1px var(--test-line); }

/* The connection strip stands apart from the page. */
.status-strip { background: var(--head-bg); }
.chip.warn { box-shadow: inset 0 0 0 1px var(--warn-line); }
.chip.bad { box-shadow: inset 0 0 0 1px var(--bad-line); }

/* Tables: a tinted header row and clear row lines. */
.table thead th { background: var(--head-bg); color: var(--ink); padding-top: 10px; padding-bottom: 10px; padding-left: 10px; }
.table td { border-bottom-color: var(--rule); }
.table td:first-child, .table th:first-child { padding-left: 10px; }

/* Section titles read as titles. */
.panel-head h2, .now-title { font-size: 20px; font-weight: 700; color: var(--ink); }

/* One colour per switch, on every screen. On Rotation each switch is its own panel whose heading
   is a solid band in the switch's colour; inside lists (Overview) the switch's band is tinted and
   its name is written in its colour. */
.switch-panel > .panel-head { margin: -16px -16px 16px; padding: 14px 16px; border-radius: 5px 5px 0 0; background: var(--sw-3); }
@media (min-width: 720px) { .switch-panel > .panel-head { margin: -20px -20px 18px; padding: 16px 20px; } }
.switch-panel.sw-0 > .panel-head { background: var(--sw-0); }
.switch-panel.sw-1 > .panel-head { background: var(--sw-1); }
.switch-panel.sw-pe > .panel-head { background: var(--sw-pe); }
.switch-panel > .panel-head h2, .switch-panel > .panel-head .panel-sub, .switch-panel > .panel-head a, .switch-panel > .panel-head .rotation-count,
.switch-panel > .panel-head .whatis, .switch-panel > .panel-head .whatis .glyph { color: #FFFFFF; }
.switch-panel > .panel-head .panel-sub { opacity: 0.92; }
.switch-panel > .panel-head .rotation-count { font-weight: 600; opacity: 0.9; }

.rotation-switch .rotation-band { background: var(--sw-3-tint); border-radius: 6px; }
.rotation-switch.sw-0 .rotation-band { background: var(--sw-0-tint); }
.rotation-switch.sw-1 .rotation-band { background: var(--sw-1-tint); }
.rotation-switch.sw-pe .rotation-band { background: var(--sw-pe-tint); }
.rotation-switch.sw-0 .rotation-band-name { color: var(--sw-0); }
.rotation-switch.sw-1 .rotation-band-name { color: var(--sw-1); }
.rotation-switch.sw-pe .rotation-band-name { color: var(--sw-pe); }
:root[data-theme="dark"] .rotation-switch .rotation-band-name { color: var(--ink); }

/* Numbers: each switch's heading band in the same colour. */
.numbers-group .numbers-group-title { background: var(--sw-3); color: #FFFFFF; border-radius: 4px; }
.numbers-group.sw-0 .numbers-group-title { background: var(--sw-0); }
.numbers-group.sw-1 .numbers-group-title { background: var(--sw-1); }
.numbers-group.sw-pe .numbers-group-title { background: var(--sw-pe); }

/* Big headings stay calm in DM Sans. */
.now-text { font-size: 18px; line-height: 1.3; }
@media (min-width: 720px) { .now-text { font-size: 19px; } }

/* DM Sans runs larger than the old condensed face, and the owner found the numbers too big:
   numbers and display text one step smaller everywhere. */
.lede-text { font-size: 19px; }
.panel-head h2, .now-title { font-size: 18px; }
.now-text { font-size: 16px; }
@media (min-width: 720px) { .now-text { font-size: 17px; } }
.tile-num, .numbers .number, .rotation-num-n, .numbers-n { font-size: 15px; font-weight: 500; }
.numbers-headline { font-size: 15px; }
.numbers-headline .figure { font-size: 24px; }
.numbers-key .figure { font-size: 15px; }
.cust-table td.num b, .customer-table td.num b { font-size: 15px; font-weight: 600; }
.customer-fig dd { font-size: 20px; }
.alerts-gauge-now b { font-size: 16px; }
.alerts-now-value b { font-size: 15px; }
.alerts-sentence { font-size: 16px; }
@media (min-width: 720px) { .alerts-sentence { font-size: 18px; } }
.rot-name { font-size: 15px; }

/* Numbers are plain digits, and one tap copies them. */
.tile-num, .rotation-cli { border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; letter-spacing: 0.01em; }
.tile-num:hover, .rotation-cli:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.tile-num:focus-visible, .rotation-cli:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.tile-num { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
/* The Rotation toolbar's end: the sound switch and Add. */
.rotation-toolbar-end { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.rotation-toolbar-end .btn[aria-pressed="false"] { color: var(--slate); }
.rotation-sound-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rotation-sound-row select { max-width: 14em; }

/* A caller ID in spaced groups that copies as digits only (cliGroups in ui.js): the space is a
   margin, not a character. */
.cli-g + .cli-g { margin-left: 0.32em; }