/* =========================================================================
   The administration console.

   THERE IS NO DESIGN HERE AND THAT IS DELIBERATE. The subscriber website has
   a reviewed alpha and a settled aesthetic; this has neither and is not to
   acquire one. It is a tool, used by one person who knows exactly what
   everything means: plain, fast, dense, legible.

   So: no typeface is chosen — `system-ui` is the browser's, which is the
   point — no animation, no transitions, no shadows, no rounded corners beyond
   what a form control brings with it, and no decorative anything. The brand's
   colours and the mark are here so the console does not look like a
   stranger's software, and the palette stops there.

   WHAT IS BORROWED FROM `web/` AND WHAT IS NOT. The colour values below are
   BRAND_IDENTITY.md's own, typed from the identity document rather than
   imported from `web/styles.css` — the two share a brand and nothing else,
   and a shared stylesheet would make a change to the website's appearance a
   change to this tool's. `assets/mark.svg` is a byte copy, because the
   identity document says in terms not to redraw the mark by eye.

   THE ONE PLACE COLOUR CARRIES MEANING is severity and state, and it is
   constrained: no red and no green anywhere, because the palette has none
   precisely so the temptation does not arise (BRAND_IDENTITY.md). High
   severity is weight and a rule, not a colour. Where a state must be
   distinguished at a glance it is distinguished by a word as well, because a
   console read by one person today is read by somebody colour-blind
   eventually.
   ========================================================================= */

:root {
  /* BRAND_IDENTITY.md, light backgrounds. */
  --paper: #FBFAF7;
  --ink: #16242F;
  --slate: #43616F;
  --mist: #93A7B1;
  --muted: #DCE2E5;
  --origin: #0E7C6B;

  --line: rgba(22, 36, 47, 0.16);
  --line-strong: rgba(22, 36, 47, 0.34);
  --panel: #FFFFFF;
  --hover: rgba(22, 36, 47, 0.05);
  --selected: rgba(14, 124, 107, 0.08);

  /* Dense by default. A support call is not the time to scroll. */
  --row: 4px 8px;
  --gap: 12px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  /* Not a choice. The reader's own interface font is the fastest thing to
     read on their own machine and costs nothing to load. */
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

/* -------------------------------------------------------------------------
   The frame: a fixed header, a narrow rail, and everything else is content.
   ------------------------------------------------------------------------- */
#frame {
  display: grid;
  grid-template-columns: 190px 1fr;
  grid-template-rows: auto 1fr;
  height: 100vh;
}

header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 6px 12px;
  border-bottom: 1px solid var(--line-strong);
  background: var(--panel);
}

header .mark { width: 22px; height: 22px; display: block; }
header .wordmark { font-weight: 600; letter-spacing: 0.01em; }
header .wordmark span { color: var(--slate); font-weight: 400; }
header .spacer { flex: 1; }

header .who {
  font-size: 12px;
  color: var(--slate);
}
header .who b { color: var(--ink); font-weight: 600; }

/* The identity banner. Loud on purpose: a development identity armed on
   anything but a developer's machine is the perimeter being down. */
#identity-warning {
  grid-column: 1 / -1;
  padding: 4px 12px;
  border-bottom: 1px solid var(--line-strong);
  background: var(--muted);
  font-size: 12px;
}

nav {
  border-right: 1px solid var(--line);
  padding: 6px 0;
  overflow-y: auto;
}
nav a {
  display: block;
  padding: 3px 12px;
  color: var(--ink);
  text-decoration: none;
}
nav a:hover { background: var(--hover); }
nav a.here { background: var(--selected); font-weight: 600; }
nav .group {
  padding: 10px 12px 2px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mist);
}
/* A screen this identity cannot reach is shown and disabled rather than
   hidden: an operator should be able to see that the audit log exists and
   that they cannot read it. Hiding it would make the refusal look like a
   fault when they found it another way. */
nav a.barred { color: var(--mist); cursor: not-allowed; }
nav a.barred::after { content: " — not this role"; font-size: 11px; }

main { padding: 10px 12px; overflow: auto; }

h1 { font-size: 16px; margin: 0 0 2px; }
h2 { font-size: 14px; margin: 14px 0 4px; }
h1 + .sub { color: var(--slate); margin: 0 0 10px; font-size: 12px; }

/* -------------------------------------------------------------------------
   Tables. The console is mostly tables and they are the thing to get right.
   ------------------------------------------------------------------------- */
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td {
  padding: var(--row);
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
th {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--slate);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
tbody tr:hover { background: var(--hover); }
td.n { text-align: right; font-variant-numeric: tabular-nums; }
td.w { width: 100%; }

/* Dates and identifiers line up when they are monospaced, and a misread
   identifier on a support call is a wasted five minutes. */
.mono, td.mono, .id {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12px;
}

/* -------------------------------------------------------------------------
   Absence. The single most important rule in this stylesheet.

   An absent value is NEVER an empty cell. Contract 3.3: "cannot determine"
   and "measured zero" are different things and must never be conflated, and
   the console is where somebody decides what to do about a number. So every
   absence prints its reason, in words, and `could_not_determine` is set apart
   from the rest because it is the one that means the attempt happened and
   failed.
   ------------------------------------------------------------------------- */
.absent {
  color: var(--slate);
  font-style: italic;
  font-size: 12px;
}
.absent.could-not-determine {
  color: var(--ink);
  font-style: normal;
  border-bottom: 1px dotted var(--line-strong);
}
.absent.could-not-run {
  color: var(--ink);
  font-weight: 600;
  border-bottom: 2px solid var(--ink);
}

/* A whole view that could not be read. Never zeroes. */
.could-not-read {
  border: 1px solid var(--ink);
  border-left: 4px solid var(--ink);
  padding: 8px 10px;
  margin: 6px 0;
  background: var(--panel);
}
.could-not-read strong { display: block; }

/* An empty result, which is a different statement and looks different. */
.empty {
  color: var(--slate);
  padding: 8px 10px;
  border: 1px dashed var(--line-strong);
  margin: 6px 0;
}

/* -------------------------------------------------------------------------
   Severity and state. No red, no green — the palette has neither.
   ------------------------------------------------------------------------- */
.sev { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.sev-high { font-weight: 700; border-bottom: 2px solid var(--ink); }
.sev-medium { font-weight: 600; color: var(--slate); }
.sev-low { color: var(--mist); }
/* Never rendered as `low`. It is the absence of a judgement, not the lowest
   band, and every check carried over from version one is in this state. */
.sev-unassigned { color: var(--slate); font-style: italic; }

.state { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
/* The most dangerous state in the register, and the one most likely to be
   mistaken for quiet success. It is marked. */
.state-could_not_evaluate { font-weight: 700; border-bottom: 2px solid var(--ink); }
.state-open { font-weight: 600; }
.state-acknowledged { color: var(--slate); }
.state-resolved { color: var(--mist); }

/* A check that has never once passed. ENGINE-035 names this as the
   distinction that matters most and the one an electronic mail cannot make. */
.never-passed {
  font-weight: 600;
  border: 1px solid var(--ink);
  padding: 0 3px;
  font-size: 11px;
}

/* -------------------------------------------------------------------------
   Forms and actions.
   ------------------------------------------------------------------------- */
form.action {
  border: 1px solid var(--line-strong);
  padding: 8px 10px;
  margin: 8px 0;
  background: var(--panel);
  max-width: 760px;
}
form.action h3 { margin: 0 0 6px; font-size: 13px; }
label { display: block; margin: 6px 0 2px; font-size: 12px; color: var(--slate); }
input[type="text"], input[type="date"], input[type="datetime-local"],
select, textarea {
  width: 100%;
  padding: 3px 5px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}
textarea { min-height: 70px; resize: vertical; }
button {
  font: inherit;
  font-size: 13px;
  padding: 3px 10px;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}
button:hover { background: var(--hover); }
button.primary { border-color: var(--ink); font-weight: 600; }
button:disabled { color: var(--mist); cursor: not-allowed; }

/* The evidence block, which every account-changing form carries. It is set
   apart because it is the thing an operator is most likely to skip past, and
   the endpoint refuses without it (3.5.1). */
fieldset.evidence {
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--origin);
  margin: 8px 0 4px;
  padding: 6px 10px 10px;
}
fieldset.evidence legend { font-size: 12px; font-weight: 600; padding: 0 4px; }
fieldset.evidence .why { font-size: 12px; color: var(--slate); margin: 2px 0 4px; }

.refusal {
  border: 1px solid var(--ink);
  border-left: 4px solid var(--ink);
  padding: 8px 10px;
  margin: 8px 0;
  background: var(--panel);
}
.refusal .code { font-size: 11px; text-transform: uppercase; color: var(--slate); }
.refusal ul { margin: 4px 0 0 18px; padding: 0; }

/* A refusal that is the design rather than a fault — the audit log under an
   operator role, an Apple refund. Marked differently so a reader does not go
   looking for a bug. */
.by-design {
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--origin);
  padding: 8px 10px;
  margin: 8px 0;
  background: var(--panel);
}
.by-design h3 { margin: 0 0 4px; font-size: 13px; }

.ok { border-left: 4px solid var(--origin); padding: 6px 10px; margin: 8px 0;
      border: 1px solid var(--line-strong); background: var(--panel); }

/* -------------------------------------------------------------------------
   The landing view's blocks.
   ------------------------------------------------------------------------- */
.blocks { display: flex; flex-wrap: wrap; gap: var(--gap); }
.block {
  border: 1px solid var(--line);
  padding: 6px 10px 8px;
  min-width: 210px;
  background: var(--panel);
}
.block h3 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase;
            letter-spacing: 0.04em; color: var(--slate); }
.block dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; }
.block dt { color: var(--slate); font-size: 12px; }
.block dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.block dd.big { font-size: 18px; font-weight: 600; }
/* A block that could not be read is rendered differently from a block of
   zeroes. This is the version one failure in its most consequential
   position — the first screen an operator sees each morning. */
.block.unread { border-color: var(--ink); border-left-width: 4px; }

.filters { margin: 6px 0; font-size: 12px; color: var(--slate); }
.filters b { color: var(--ink); }
.paging { margin: 8px 0; font-size: 12px; }

.rule { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.note { font-size: 12px; color: var(--slate); margin: 4px 0; }
.wrap { white-space: pre-wrap; }

/* The conversation, which reads as one. */
.msg { border: 1px solid var(--line); padding: 6px 10px; margin: 6px 0; }
.msg.operator { border-left: 3px solid var(--slate); background: var(--panel); }
.msg.subscriber { border-left: 3px solid var(--origin); }
.msg .meta { font-size: 11px; color: var(--slate); margin-bottom: 4px; }