/* ===========================================================================
   Console '74 — the SSN KeyMe Fleet Monitor theme.

   One stylesheet for every page. See DESIGN.md for the reasoning; this file is
   the implementation and the two are meant to be read together.

   Two rules that are easy to break by accident:

   1. This theme is COMMITTED DARK. There is no prefers-color-scheme block and
      there should not be one — the palette is a warm amber-phosphor console and
      the light inversion of it is a different design, not the same design in
      another mode. Every colour is a token here; do not introduce a literal.

   2. The four data-mark colours (--m-*) were chosen with a colourblindness
      validator against the --cell surface, not by eye. An earlier pass had
      "in stock" and "low" at deltaE 1.7 under protanopia — indistinguishable.
      If you change one, re-run the check in DESIGN.md before committing it.
   =========================================================================== */

:root {
  /* Shell */
  --bg:      #14100b;   /* the console body, warm near-black             */
  --cell:    #1c1710;   /* panels, cells, table ground                   */
  --shell:   #100c07;   /* header and footer bars, recessed              */
  --line:    #33291a;   /* hairline rules and cell dividers              */
  --line-2:  #55421f;   /* active borders                                */
  --ink:     #f2e3c4;   /* body text                                     */
  --dim:     #9c8763;   /* labels, captions, secondary text              */
  --faint:   #6b593c;   /* axis text, disabled                           */

  /* Signal */
  --amber:   #ffb000;   /* the phosphor: identifiers, focus, the one accent */
  --gold:    #e6a326;   /* warning text and chips                        */
  --avo:     #9cb33f;   /* good text and chips                           */
  --orange:  #e8552b;   /* critical text and chips                       */
  --plum:    #b579a3;   /* fault text                                    */

  /* Data marks. Text may be brighter than these; fills may not.
     Validated: worst adjacent pair deltaE 9.2 (deutan), 16.3 normal vision. */
  --m-ok:    #567b1c;
  --m-low:   #c9941f;
  --m-empty: #d94a22;
  --m-fault: #96567f;
  --m-none:  #7d6a4c;   /* not a hue: an absence. Always hatched.        */
  --m-void:  #4a3d2c;   /* unknown. Always hatched.                      */

  --mono: "Space Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --sans: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fat:  "Bowlby One", "Space Mono", ui-monospace, monospace;

  --row: 26px;          /* the sprocket pitch; table rows sit on it      */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 13px/1.45 var(--mono);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--amber); color: var(--shell); }

a { color: var(--amber); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* --- header ------------------------------------------------------------- */

/* The 70s stripe. Costs 5px and does more for the identity than anything
   else on the page, which is why it is the first thing in the document. */
body::before {
  content: "";
  display: block;
  height: 5px;
  background: linear-gradient(90deg,
    #c4531f 0 33.33%, #e6a326 33.33% 66.66%, #9cb33f 66.66% 100%);
}

header {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 12px 18px;
  background: var(--shell);
  border-bottom: 1px solid var(--line);
}

h1 {
  margin: 0;
  font: 400 15px/1 var(--fat);
  background: var(--amber);
  color: var(--shell);
  border-radius: 999px;
  padding: 7px 15px 5px;
  box-shadow: 3px 3px 0 #000;
  white-space: nowrap;
}
h1 span { display: none; }          /* the tab bar already says which page */

header .where {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim);
}
.spacer { flex: 1; }

/* --- tabs --------------------------------------------------------------- */

/* Folder tabs. The active one takes the panel colour so it reads as
   continuous with the content beneath it, and carries an amber bar so the
   state is not signalled by colour alone. */
nav.tabs {
  display: flex; align-items: flex-end; gap: 4px; flex-wrap: wrap;
  padding: 9px 18px 0;
  background: var(--shell);
  border-bottom: 1px solid var(--line);
}
nav.tabs > a {
  padding: 8px 15px 7px;
  border: 1px solid var(--line); border-bottom: 0;
  border-radius: 9px 9px 0 0;
  background: #1a1409;
  color: var(--dim);
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  text-decoration: none;
}
nav.tabs > a:hover { color: var(--ink); }
nav.tabs > a.on {
  background: var(--cell);
  color: var(--amber);
  font-weight: 700;
  border-color: var(--line-2);
  box-shadow: inset 0 2px 0 var(--amber);
}
nav.tabs > a.admin::after {
  content: "ADMIN";
  font-size: 7.5px; letter-spacing: .1em; color: var(--dim);
  border: 1px solid var(--line); border-radius: 2px;
  padding: 1px 3px; margin-left: 7px;
}
nav.tabs .who {
  margin-left: auto; display: flex; align-items: center; gap: 16px;
  padding-bottom: 9px;
  font-size: 10.5px; letter-spacing: .08em; color: var(--dim);
}
nav.tabs .who a { text-decoration: none; }
nav.tabs .who a:hover { text-decoration: underline; }

/* --- layout ------------------------------------------------------------- */

main { padding: 0 0 64px; max-width: 1800px; }
section { margin-bottom: 26px; }

h2 {
  margin: 0;
  padding: 14px 18px 8px;
  font: 400 9.5px/1 var(--mono);
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--dim);
}

.muted { color: var(--dim); font-size: 11.5px; }

code {
  font-family: var(--mono);
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 11.5px;
  color: var(--gold);
}

.nav { color: var(--amber); font-size: 11px; text-decoration: none; }

/* --- stat cells --------------------------------------------------------- */

/* No cards. Cells divided by hairlines, which is what buys the density: a
   card's border plus its gap costs 20px per tile that says nothing. */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--line);
  gap: 1px;
}
.tile {
  background: var(--cell);
  padding: 12px 15px 14px;
  display: flex; flex-direction: column;
}
.tile .n {
  font: 700 21px/1.1 var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  margin-top: 8px;
}
.tile .l {
  font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--dim);
  order: -1;
}
.tile.warn .n { color: var(--gold); }
.tile.bad  .n { color: var(--orange); }

/* --- badges and chips --------------------------------------------------- */

.badge {
  display: inline-flex; align-items: center; gap: 7px;
  border: 2px solid var(--line); border-radius: 999px;
  padding: 5px 14px;
  background: #16110a;
  font-size: 10.5px; letter-spacing: .09em;
  color: var(--dim);
}
.badge::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--dim);
}
.badge.ok::before   { background: var(--avo);    box-shadow: 0 0 9px rgba(156,179,63,.6); }
.badge.warn::before { background: var(--gold);   box-shadow: 0 0 9px rgba(230,163,38,.55); }
.badge.bad::before  { background: var(--orange); box-shadow: 0 0 9px rgba(232,85,43,.55); }
.badge.ok   { color: var(--avo); }
.badge.warn { color: var(--gold); }
.badge.bad  { color: var(--orange); }

.chip {
  display: inline-block;
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 8px; margin-right: 4px;
  border: 1.5px solid var(--line); border-radius: 999px;
  color: var(--dim);
}
.chip.warn { border-color: var(--gold);   color: var(--gold); }
.chip.bad  { border-color: var(--orange); color: var(--orange); }
/* Used on the users page: role, and a deactivated account. */
.chip.admin { border-color: var(--amber); color: var(--amber); }
.chip.off   { border-color: var(--line);  color: var(--faint); }

/* --- tables: greenbar on tractor-feed paper ----------------------------- */

/* The sprocket holes are punched through the paper to the shell behind it,
   on the same 26px pitch as the rows. Both are --row; change them together. */
.wrap {
  overflow-x: auto;
  background: var(--cell);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0 26px;
  background-image:
    radial-gradient(circle at 12px 13px, var(--shell) 3.5px, transparent 4px),
    radial-gradient(circle at calc(100% - 12px) 13px, var(--shell) 3.5px, transparent 4px);
  background-size: 100% var(--row);
  background-repeat: repeat-y;
}
table { border-collapse: collapse; width: 100%; }
th {
  text-align: left;
  padding: 9px 12px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--dim);
  border-bottom: 2px solid var(--line);
  white-space: nowrap;
}
td {
  padding: 7px 12px;
  font-size: 12px; line-height: 12px;
  white-space: nowrap;
}
/* Greenbar, inverted for a dark ground. It still does its real job, which is
   carrying the eye across a wide row without a rule under every line. */
tbody tr:nth-child(odd) { background: rgba(156,179,63,.07); }
td.num, td.n { text-align: right; font-variant-numeric: tabular-nums; }
th.num, th.n { text-align: right; }
tbody tr.bad  td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
tbody tr.warn td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: rgba(255,176,0,.08); }
tbody tr.open, tbody tr.selected { background: rgba(255,176,0,.12); }
.caret { display: inline-block; width: 10px; color: var(--amber); }
td b { color: var(--amber); font-weight: 400; }

.empty {
  margin: 0 18px;
  padding: 30px;
  text-align: center;
  color: var(--dim);
  border: 2px dashed var(--line);
  border-radius: 10px;
}

/* --- status mix bar ----------------------------------------------------- */

/* 2px gaps, not a continuous band: adjacent fills of similar lightness read
   as one segment without them. */
.bar { display: flex; gap: 2px; height: 12px; margin: 0 18px; }
.bar i { display: block; height: 100%; border-radius: 2px; }
.legend { display: flex; flex-wrap: wrap; gap: 5px 18px; padding: 11px 18px 0; }
.legend span { font-size: 10.5px; color: var(--dim); }
.legend b {
  display: inline-block; width: 8px; height: 8px; border-radius: 2px;
  margin-right: 7px; vertical-align: baseline;
}
/* Absences are neutral plus a hatch, never a hue, and always carry a label. */
.hatch-a { background-image: repeating-linear-gradient(45deg,  rgba(242,227,196,.22) 0 2px,   transparent 2px 5px); }
.hatch-b { background-image: repeating-linear-gradient(135deg, rgba(242,227,196,.18) 0 1.5px, transparent 1.5px 5px); }

/* --- controls ----------------------------------------------------------- */

.controls {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  padding: 0 18px 12px;
}
.controls label {
  display: block;
  font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 5px;
}
input[type=search], input[type=text], input[type=email], input[type=password],
input[type=number], select {
  background: var(--shell);
  border: 2px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font: 400 12.5px/1 var(--mono);
  padding: 9px 11px;
}
input::placeholder { color: var(--faint); }
input[type=search] { min-width: 260px; }
input:focus-visible, select:focus-visible { border-color: var(--line-2); }

button, .btn {
  background: var(--amber);
  color: var(--shell);
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 9px 16px;
  font: 400 13px/1 var(--fat);
  box-shadow: 3px 3px 0 #000;
  cursor: pointer;
}
button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
button:disabled { opacity: .45; cursor: default; transform: none; box-shadow: 3px 3px 0 #000; }
button.ghost, .pager button {
  background: transparent;
  color: var(--dim);
  border: 2px solid var(--line);
  box-shadow: none;
  font: 400 10.5px/1 var(--mono);
  letter-spacing: .12em; text-transform: uppercase;
  padding: 8px 13px;
}
button.ghost:hover, .pager button:not(:disabled):hover {
  color: var(--ink); border-color: var(--line-2);
}
button.ghost:active, .pager button:active { transform: none; }

.check {
  display: flex; align-items: center; gap: 7px;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim);
  padding-bottom: 9px;
}
.check input { accent-color: var(--amber); }

.pager { display: flex; align-items: center; gap: 12px; padding: 12px 18px 0; }

/* --- kiosk drill-down --------------------------------------------------- */

tr.detail > td { background: var(--bg); padding: 16px; white-space: normal; }
tr.detail .inner {
  border-left: 3px solid var(--amber);
  padding-left: 14px;
  overflow-x: auto;
  box-sizing: border-box;
}
tr.detail h3 {
  margin: 0 0 10px;
  font: 400 10px/1 var(--mono);
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--dim);
}
tr.detail table { font-size: 11.5px; }
tr.detail th, tr.detail td { padding: 6px 10px; }
tr.detail .wrap { margin-top: 12px; }
tr.detail .tiles { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
td.changed { background: rgba(255,176,0,.16); color: var(--amber); font-weight: 700; }

/* --- messages and notes ------------------------------------------------- */

.msg { display: none; margin-top: 14px; font-size: 12px; color: var(--dim); }
.msg.show { display: block; }
.msg.bad { color: var(--orange); }
.msg.ok  { color: var(--avo); }

.note {
  margin: 0 18px;
  padding: 13px 15px;
  border: 2px dashed var(--line);
  border-radius: 10px;
  font-size: 11.5px; line-height: 1.6;
  color: var(--dim);
}
.note b { color: var(--ink); font-weight: 700; }

/* --- sign-in and password cards ----------------------------------------- */

body.centred {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px;
}
/* The stripe is a block at the top of the document, which on these pages makes
   it a flex item and collapses it to nothing. Pin it instead of losing it. */
body.centred::before { position: fixed; top: 0; left: 0; right: 0; }
.card {
  width: 100%; max-width: 400px;
  background: var(--cell);
  border: 2px solid var(--ink);
  border-radius: 16px;
  padding: 26px 24px 24px;
  box-shadow: 5px 5px 0 #000;
}
.card h1 { display: inline-block; margin-bottom: 16px; }
.card .sub { font-size: 11.5px; color: var(--dim); margin-bottom: 20px; }
.card label {
  display: block; margin: 14px 0 6px;
  font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--dim);
}
.card input { width: 100%; }
.card button[type=submit], .card button.primary { width: 100%; margin-top: 20px; }
.card .link {
  width: 100%; margin-top: 10px;
  background: transparent; color: var(--dim); border: 0; box-shadow: none;
  font: 400 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  padding: 8px;
}
.card .link:hover { color: var(--amber); }
.card .warn {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 11px; line-height: 1.6; color: var(--dim);
}

.field { position: relative; }
.field input { padding-right: 44px; }
.peek {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; box-shadow: none;
  color: var(--dim); padding: 6px; cursor: pointer;
}
.peek:hover { color: var(--amber); }
.peek:active { transform: translateY(-50%); }

.rules { list-style: none; margin: 18px 0 0; padding: 0; }
.rules li {
  font-size: 11px; color: var(--dim); padding: 3px 0 3px 20px; position: relative;
}
.rules li::before { content: "\‚2"; position: absolute; left: 4px; color: var(--faint); }
.rules li.met { color: var(--avo); }
.rules li.met::before { content: "\¹3"; color: var(--avo); }

/* --- users page --------------------------------------------------------- */

.rolepick { background: var(--shell); font-size: 11px; padding: 5px 8px; }
tr.off td { opacity: .5; }
tr.off td b, tr.off td .chip { opacity: 1; }
.admin { color: var(--amber); }

/* --- guide -------------------------------------------------------------- */

.guide { max-width: 74ch; padding: 22px 18px 80px; font-family: var(--sans); font-size: 14px; line-height: 1.65; }
.guide h2 {
  padding: 0; margin: 38px 0 12px;
  font: 400 20px/1.2 var(--fat);
  color: var(--ink);
  letter-spacing: 0; text-transform: none;
}
.guide h3 {
  margin: 28px 0 8px;
  font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--gold); font-family: var(--mono); font-weight: 400;
}
.guide .lead { font-size: 16px; color: var(--ink); }
.guide p, .guide li { color: #d8c9ac; }
.guide b { color: var(--ink); }
.guide .toc {
  border: 2px solid var(--line); border-radius: 12px;
  padding: 14px 18px; margin: 22px 0;
  background: var(--cell);
}
.guide .toc ol { margin: 0; padding-left: 20px; }
.guide .toc a { text-decoration: none; }
.guide .toc a:hover { text-decoration: underline; }
.guide pre {
  background: var(--shell);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: 6px;
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 11.5px;
  line-height: 1.6;
}
.guide pre code { background: none; border: 0; padding: 0; color: var(--ink); }
.guide blockquote {
  margin: 20px 0; padding: 2px 0 2px 16px;
  border-left: 3px solid var(--gold);
  color: var(--dim); font-size: 13.5px;
}
.guide .wrap { margin: 18px 0; border: 1px solid var(--line); border-radius: 6px; font-family: var(--mono); }
.guide td, .guide th { white-space: normal; }
.guide .ok   { color: var(--avo); }
.guide .warn { color: var(--gold); }
.guide .bad  { color: var(--orange); }

/* --- narrow screens ----------------------------------------------------- */

@media (max-width: 760px) {
  header { gap: 10px; }
  nav.tabs { padding: 9px 10px 0; }
  nav.tabs .who { margin-left: 0; flex-basis: 100%; }
  .wrap { padding: 0 8px; background-image: none; }   /* sprockets need margin */
  main { padding-bottom: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}