:root {
  --ink: #ece6d6;
  --muted: #a89f8c;
  --accent: #d89074;
  --accent-strong: #e19a7d;
  --alarm: #ef8a72;
  --caution: #d6aa68;
  --calm: #8fc49f;
  --surface: #0a0908;
  --surface-bright: #12100b;
  --hairline: rgba(236, 230, 214, 0.22);
  --frame: rgba(236, 230, 214, 0.12);
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }

html { background: var(--surface); }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--surface);
  background-image: radial-gradient(110% 34rem at 50% 0%, #17140e 0%, var(--surface) 70%);
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  font-size: clamp(16px, 14px + 0.2vw, 18px);
  line-height: 1.6;
  overflow-x: hidden;
}

.column {
  max-width: 108ch;
  margin: 0 auto;
  padding: 3rem 3ch 3.5rem;
}

@media (max-width: 30rem) { .column { padding: 1.6rem 2ch 2.4rem; } }

a { color: var(--accent-strong); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  position: static;
  display: inline-block;
  padding: 0.3rem 1ch;
  border: 1px solid var(--hairline);
  background: var(--surface-bright);
  color: var(--ink);
}

/* ---- masthead and view switcher ---- */

.wordmark {
  margin: 0;
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  color: var(--ink);
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.1rem 3ch;
  padding-bottom: 1.4rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--hairline);
}
.masthead .brand { flex: 1 1 28ch; }
.masthead .views { margin: 0; }
.masthead .selector { flex: 1 0 100%; margin-top: 0; }

.views { margin: 0.9rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; }
.views li { flex: 0 0 auto; }

.views li + li > a, .views li + li > span { border-left: none; }

.views > li > a, .views > li > span {
  display: block;
  border: 1px solid var(--hairline);
  padding: 0.34rem 1.6ch;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.views > li > a:hover { color: var(--ink); }

.selector { display: flex; flex-wrap: wrap; align-items: center; gap: 1ch; margin-top: 0.9rem; }

.views [aria-current="page"] {
  color: var(--accent-strong);
  background: var(--surface-bright);
}

.marker { margin-right: 1ch; }

/* ---- sections ---- */

/* One spacing scale. A section is separated from the previous section by the
   same distance everywhere, and a summary sits closer to the thing it
   summarizes than to the section above it — so proximity, not a rule, says
   what belongs together. */
.section { margin-top: 2.6rem; }
main > .section:first-child, main > :first-child { margin-top: 2rem; }
.section > .stats { margin-bottom: 1rem; }
.section > .scroll + .foot, .section > .foot { margin-top: 0.7rem; }
.section > details { margin-top: 1rem; }

.section-label, .label {
  color: var(--accent-strong);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 0.8rem;
}

h2 { font-size: 0.95rem; }

.body { color: var(--muted); }
.ink, .body strong { color: var(--ink); font-weight: 500; }

.foot,
.footnote {
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  line-height: 1.55;
}

/* ---- stat tiles ---- */

/* A one-pixel gap over a hairline background draws the rule between tiles no
   matter how they wrap, which a per-tile border cannot do. */
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  border: 1px solid var(--hairline);
  background: var(--frame);
  margin: 0;
}

.stat {
  flex: 1 1 14ch;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 0.25rem;
  padding: 0.9rem 1.5ch 0.8rem;
  background: var(--surface-bright);
}

.stat-value {
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat-value.live { color: var(--accent-strong); }

.stat-note {
  display: block;
  margin-top: 0.25rem;
  text-transform: none;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.3;
}

.stat-caption {
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---- brand ---- */

.brand { display: flex; align-items: center; gap: 1.5ch; }
.mark { display: block; flex: 0 0 auto; }

/* ---- section head: a label and the action that belongs to it ---- */

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2ch;
  margin-bottom: 0.8rem;
}
.section-head .label, .section-head .section-label { margin: 0; }

.empty { border: 1px dashed var(--hairline); background: var(--surface-bright); padding: 1.1rem 1.5ch; }
.empty-title { margin: 0 0 0.25rem; color: var(--ink); font-weight: 600; font-size: 0.92rem; }
.empty p { margin: 0; font-size: 0.85rem; }

.tally {
  display: inline-block;
  margin-left: 0.8ch;
  border: 1px solid var(--alarm);
  padding: 0 0.7ch;
  color: var(--alarm);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

td .sub { display: block; color: var(--muted); font-size: 0.74rem; font-weight: 400; letter-spacing: 0.04em; }
td.name a { color: var(--ink); text-decoration: none; }
td.name a:hover { color: var(--accent-strong); text-decoration: underline; }

/* ---- the one line an executive reads ---- */

.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 2.5ch;
  border-left: 4px solid var(--accent-strong);
  padding: 0.5rem 0 0.5rem 2ch;
}
.hero-figure {
  margin: 0;
  color: var(--ink);
  font-size: 2.3rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.hero-line { margin: 0; flex: 1 1 28ch; color: var(--muted); font-size: 0.9rem; }
.hero-more { display: block; margin-top: 0.2rem; font-size: 0.76rem; }

/* ---- headline ---- */

.headline {
  display: flex;
  align-items: baseline;
  gap: 2.5ch;
  border: 1px solid var(--hairline);
  border-left-width: 4px;
  border-left-color: var(--muted);
  background: var(--surface-bright);
  padding: 1rem 2ch;
}
.headline.alarm { border-left-color: var(--alarm); }
.headline.calm { border-left-color: var(--calm); }

.headline-figure {
  margin: 0;
  flex: 0 0 auto;
  color: var(--ink);
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.headline.alarm .headline-figure { color: var(--alarm); }
.headline.calm .headline-figure { color: var(--calm); }

.headline-title { margin: 0; color: var(--ink); font-size: 0.95rem; font-weight: 500; }
.headline-detail { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.84rem; max-width: 70ch; }

@media (max-width: 34rem) { .headline { flex-direction: column; gap: 0.5rem; } }

/* ---- what the App has done ---- */

.proof-return {
  margin: 0.6rem 0 0.3rem;
  border-left: 3px solid var(--accent-strong);
  padding: 0.1rem 0 0.1rem 2ch;
  color: var(--muted);
  font-size: 0.92rem;
}
.proof-return .ink { font-size: 1.05rem; font-weight: 600; }

.proof {
  margin: 0;
  border-left: 3px solid var(--accent-strong);
  padding: 0.35rem 0 0.35rem 2ch;
  color: var(--ink);
  font-size: 0.92rem;
  max-width: 86ch;
}

/* ---- needs attention ---- */

.alerts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.alert {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 2ch;
  border: 1px solid var(--hairline);
  border-left-width: 4px;
  background: var(--surface-bright);
  padding: 0.45rem 1.5ch;
}
.alert.critical { border-left-color: var(--alarm); }
.alert.warning { border-left-color: var(--caution); }
.alert.notice { border-left-color: var(--muted); }

.alert-level {
  flex: 0 0 14ch;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.alert.critical .alert-level { color: var(--alarm); }
.alert.warning .alert-level { color: var(--caution); }
.alert.notice .alert-level { color: var(--muted); }
.alert-title { color: var(--ink); font-size: 0.86rem; font-weight: 500; }
.alert-detail { flex: 1 1 28ch; color: var(--muted); font-size: 0.8rem; }
/* Three lines, in the order a reader needs them: what was found, what to do
   about it, and where to do it. They were one dot-separated run of six
   fragments, which put the finding fourth and the instruction fifth. */
.alert-what, .alert-do, .alert-where { display: block; }
.alert-what { color: var(--ink); font-size: 0.86rem; }
.alert-do { margin-top: 0.2rem; font-size: 0.86rem; }
.alert-where { margin-top: 0.32rem; font-size: 0.8rem; }

/* A meter carries its value natively, so no inline width is needed — but its
   default palette is a browser green that belongs to no design. */
meter.bar {
  width: 8ch;
  height: 0.7em;
  margin-left: 1ch;
  vertical-align: middle;
  border: 1px solid var(--frame);
  background: var(--surface);
  -webkit-appearance: none;
  appearance: none;
}
meter.bar::-webkit-meter-bar { background: var(--surface); border: none; }
meter.bar::-webkit-meter-optimum-value,
meter.bar::-webkit-meter-suboptimum-value,
meter.bar::-webkit-meter-even-less-good-value { background: var(--accent-strong); }
meter.bar::-moz-meter-bar { background: var(--accent-strong); }
td.num.warn { color: var(--caution); font-weight: 600; }

/* ---- capability overlap matrix ---- */

/* Ported from the spec-dashboard reference: rows are the changes, columns
   are the capabilities two or more of them declare, and a filled marker is
   the collision. A comma-separated list of names in a cell was unreadable the
   moment a change touched more than about four capabilities; a matrix stays
   the same width no matter how entangled the work gets. */
.matrix { border-collapse: collapse; width: 100%; background: var(--surface-bright); }
.matrix th.axis {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: left;
  vertical-align: bottom;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.4ch;
  white-space: nowrap;
  border-bottom: 1px solid var(--hairline);
}
/* The corner is empty, as in the reference. The rotated capability names are
   the only headings the grid needs, and a "Change" label above a column of
   change names was a caption for something already obvious — it only made the
   header block taller. The name stays for screen readers. */
.matrix th.corner { border-bottom: 1px solid var(--hairline); }
.offscreen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.matrix td { border-bottom: 1px solid var(--frame); padding: 0.36rem 1ch; font-size: 0.85rem; }
.matrix tbody tr:last-child td { border-bottom: none; }
.matrix td.cell {
  text-align: center;
  color: var(--accent-strong);
  min-width: 3ch;
  border-left: 1px solid var(--frame);
}
/* The name column holds its own width and wraps inside it, so a long change
   name never pushes the marker grid off screen. The frame scrolls; the page
   does not. */
.matrix td.change {
  color: var(--ink);
  min-width: 28ch;
  max-width: 40ch;
  overflow-wrap: anywhere;
  position: sticky;
  left: 0;
  background: var(--surface-bright);
  z-index: 1;
}
.matrix td.change a { color: var(--ink); text-decoration: none; }
.matrix td.change a:hover { color: var(--accent-strong); text-decoration: underline; }
.matrix td.change .sub { display: block; color: var(--muted); font-size: 0.72rem; font-weight: 400; }
.matrix-frame { border: 1px solid var(--hairline); }
/* Every capability gets a column, so a busy repository is wider than the page.
   Scroll it here rather than dropping columns the header still counts. */
.matrix-frame.scroll { overflow-x: auto; }
.matrix th.corner:first-child {
  position: sticky;
  left: 0;
  background: var(--surface-bright);
  z-index: 2;
  text-align: left;
}
.matrix th.corner, .matrix td.change { background: var(--surface-bright); }

/* ---- drift trend ---- */

.trend { border: 1px solid var(--hairline); background: var(--surface-bright); padding: 0.9rem 1.5ch 0.6rem; }
.trend svg { display: block; width: 100%; height: 4.5rem; }
.trend .bar { fill: var(--muted); }
.trend .bar.drift { fill: var(--alarm); }
.trend .bar.clean { fill: var(--calm); }
.trend .bar.quiet { fill: var(--frame); }
.trend-legend {
  display: flex;
  align-items: center;
  gap: 0.6ch;
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
}
.trend-legend .swatch { display: inline-block; width: 0.8em; height: 0.8em; }
.trend-legend .swatch { margin-left: 1.5ch; }
.trend-legend .swatch:first-child { margin-left: 0; }
.trend-legend .swatch.drift { background: var(--alarm); }
.trend-legend .swatch.clean { background: var(--calm); }

.trend-axis {
  display: flex;
  justify-content: space-between;
  margin: 0.4rem 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.run-caveat { margin: 0.35rem 0 0; color: var(--caution); font-size: 0.82rem; }
.change-scope { margin-top: 0.8rem; padding-top: 0.7rem; border-top: 1px solid var(--hairline); }
.change-scope-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2ch; margin: 0 0 0.55rem; font-size: 0.84rem; }
.change-scope-head span:first-child { color: var(--ink); font-weight: 650; }
.change-scope-head span:last-child { color: var(--muted); }
.change-scope .disclosure p { margin: 0.35rem 0; overflow-wrap: anywhere; }

/* ---- run card ---- */

.run { border: 1px solid var(--hairline); margin-bottom: 1rem; background: var(--surface-bright); }

.run-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2ch;
  flex-wrap: wrap;
  padding: 0.42rem 1.5ch;
  border-bottom: 1px solid var(--hairline);
}

.run-title {
  color: var(--accent-strong);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.run-title a { text-decoration: none; }
.run-title a:hover { text-decoration: underline; }

.run-meta { color: var(--muted); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }

.run-body { padding: 0.7rem 1.5ch 0.8rem; }
.run-summary { margin: 0; color: var(--ink); font-size: 0.88rem; }
.run-scope { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.82rem; overflow-wrap: anywhere; }

.state-drift, .state-failed { color: var(--alarm); font-weight: 600; }
.state-incomplete, .state-budget-deferred, .state-superseded, .state-canceled { color: var(--caution); font-weight: 600; }
.state-in-flight { color: var(--accent-strong); font-weight: 600; }
.state-clean { color: var(--calm); font-weight: 600; }

.run-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5ch; margin-top: 0.7rem; }

details { margin-top: 0.7rem; }
summary { color: var(--muted); font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
summary:hover { color: var(--accent-strong); }
.disclosure { margin-top: 0.6rem; padding-top: 0.5rem; border-top: 1px dashed var(--frame); }

/* ---- buttons and forms ---- */

.button, button.button {
  display: inline-block;
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: 0.34rem 1.5ch;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms ease-out, box-shadow 160ms ease-out, color 160ms ease-out;
}

.button:hover:not(:disabled) {
  color: var(--accent-strong);
  transform: translate(-3px, -3px);
  box-shadow: 3px 3px 0 var(--accent-strong);
}

.button:disabled { color: var(--muted); cursor: default; }

.button.primary {
  background: var(--surface-bright);
  border-width: 2px;
  border-color: var(--accent-strong);
  color: var(--accent-strong);
  font-weight: 600;
  padding: 0.55rem 2ch;
  font-size: 0.86rem;
}

form.inline { display: inline; }

input[type="email"], select {
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--ink);
  background: var(--surface-bright);
  border: 1px solid var(--hairline);
  padding: 0.34rem 1ch;
  max-width: 100%;
}

label { color: var(--muted); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* ---- tables ---- */

.scroll { overflow-x: auto; }

table {
  width: 100%;
  border: 1px solid var(--hairline);
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  background: var(--surface-bright);
}

th {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  padding: 0.42rem 1ch;
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}

td { padding: 0.55rem 1ch; font-size: 0.88rem; color: var(--muted); border-bottom: 1px solid var(--frame); }
tbody tr:last-child td { border-bottom: none; }
/* A numeric column heads its own numbers. Left-aligned headers over
   right-aligned figures read as two columns that happen to overlap. */
td.num, th.num { text-align: right; }
td.num { white-space: nowrap; }
.scan-record { table-layout: fixed; }
.scan-record th { width: 45%; white-space: normal; }
.scan-record td { overflow-wrap: anywhere; }
/* Names stay whole; the table's own container is what scrolls. */
td.name { color: var(--ink); font-weight: 500; white-space: nowrap; }
/* Every row says what to do about it, in the reference's terse lowercase. */
td.next { color: var(--accent-strong); white-space: nowrap; }
td.next a { text-decoration: none; }
td.next a:hover { text-decoration: underline; }
.alert-detail a { white-space: nowrap; }

/* ---- filters ---- */

.filters { display: flex; flex-wrap: wrap; margin-bottom: 0.8rem; }
.filters a {
  border: 1px solid var(--hairline);
  padding: 0.26rem 1.2ch;
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.filters a + a { border-left: none; }
.filters a:hover { color: var(--ink); }
.filters a[aria-current="true"] { color: var(--accent-strong); background: var(--surface-bright); font-weight: 600; }
.filter-count { margin-left: 0.8ch; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.filters a[aria-current="true"] .filter-count { color: var(--accent-strong); }

/* ---- notices ---- */

.notice {
  border: 1px solid var(--hairline);
  border-left-width: 4px;
  border-left-color: var(--muted);
  background: var(--surface-bright);
  padding: 0.7rem 1.5ch;
  margin: 1rem 0 0;
}
.notice.alarm { border-left-color: var(--alarm); }
.notice.caution { border-left-color: var(--caution); }
.notice p { margin: 0; }
.notice p + p { margin-top: 0.4rem; }
.notice-title { color: var(--ink); font-weight: 600; }

/* ---- phase timeline ---- */

.timeline { list-style: none; margin: 0.5rem 0 0; padding-left: 3ch; border-left: 2px solid var(--hairline); }
.timeline li { position: relative; font-size: 0.8rem; padding: 0.12rem 0; }
.timeline li::before {
  content: '';
  position: absolute;
  left: calc(-3ch - 6px);
  top: 0.5em;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--muted);
  background: var(--surface);
}
.timeline li.done::before { background: var(--accent-strong); border-color: var(--accent-strong); }
.timeline li.failed::before { background: var(--alarm); border-color: var(--alarm); }

/* ---- signed-out landing ---- */

.hero { margin-top: 1.6rem; }
.hero h2 { color: var(--ink); font-size: 1.05rem; letter-spacing: 0.02em; margin: 0 0 0.5rem; text-transform: none; }
.hero p { margin: 0 0 0.8rem; }
/* One prose measure everywhere, so a paragraph never sets its own. */
.hero p, .body, .footnote, .notice p { max-width: 82ch; }

.proof { border: 1px solid var(--hairline); background: var(--surface-bright); padding: 0.9rem 1.5ch; margin-top: 1.4rem; }
.proof dl { display: grid; gap: 0.6rem; margin: 0; }
.proof dt { color: var(--muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.proof dd { margin: 0.1rem 0 0; color: var(--ink); overflow-wrap: anywhere; font-size: 0.9rem; }

.doors { display: flex; flex-wrap: wrap; gap: 1.5ch; align-items: center; margin-top: 1.4rem; }
.secondary-door { margin-top: 1.2rem; padding-top: 0.9rem; border-top: 1px solid var(--frame); }

/* ---- owner-only company dashboard ---- */

.internal-body {
  --internal-ink: #ece6d6;
  --internal-muted: #a89f8c;
  --internal-line: rgba(236, 230, 214, 0.18);
  --internal-panel: #15110f;
  --internal-tint: #1d1713;
  --internal-green: #8eb897;
  --internal-green-soft: rgba(142, 184, 151, 0.12);
  --internal-amber: #c6a65b;
  --internal-amber-soft: rgba(198, 166, 91, 0.12);
  --internal-red: #d89074;
  --internal-red-soft: rgba(210, 89, 41, 0.14);
  background: #0a0908;
  color: var(--internal-muted);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 15.5px;
  line-height: 1.6;
}

.internal-shell { width: min(100% - 3rem, 1280px); margin: 0 auto; padding-bottom: 3rem; }

.internal-header {
  min-height: 5.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  border-bottom: 1px solid var(--internal-line);
}
.internal-brand { display: flex; align-items: center; gap: 0.8rem; color: var(--internal-ink); text-decoration: none; }
.internal-brand img { display: block; }
.internal-brand span { display: flex; flex-direction: column; line-height: 1.2; }
.internal-brand small { color: var(--internal-muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.internal-brand strong { margin-top: 0.18rem; font-size: 0.96rem; font-weight: 680; }
.internal-header nav { display: flex; gap: 1.4rem; }
.internal-header nav a { color: var(--internal-muted); font-size: 0.78rem; font-weight: 650; text-decoration: none; }
.internal-header nav a:hover { color: #d89074; }

.internal-dashboard { padding: 3.5rem 0 0; }
.internal-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem; }
.internal-hero h1 {
  color: var(--internal-ink);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-transform: none;
}
.eyebrow { margin: 0 0 0.65rem; color: #d89074; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.internal-lede { max-width: 62ch; margin: 1rem 0 0; color: var(--internal-muted); font-size: 1.05rem; }
.freshness { flex: 0 0 auto; margin: 0; color: var(--internal-ink); font-size: 0.8rem; text-align: right; }
.freshness span { display: block; margin-bottom: 0.2rem; color: var(--internal-muted); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }

.jump-nav { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 2.2rem; }
.jump-nav a {
  border: 1px solid var(--internal-line);
  border-radius: 0;
  background: rgba(236, 230, 214, 0.03);
  padding: 0.42rem 0.85rem;
  color: var(--internal-muted);
  font-size: 0.74rem;
  font-weight: 650;
  text-decoration: none;
}
.jump-nav a:hover { border-color: #d25929; color: #d89074; background: var(--internal-panel); }

.internal-section { scroll-margin-top: 1rem; margin-top: 4rem; }
.internal-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 1.2rem; }
.internal-section-head h2, .evidence h2 { margin: 0; color: var(--internal-ink); font-size: 1.45rem; font-weight: 700; letter-spacing: -0.025em; }
.internal-section-head > p { max-width: 54ch; margin: 0; font-size: 0.82rem; text-align: right; }

.internal-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; }
.internal-stat {
  min-height: 8.2rem;
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  border: 1px solid var(--internal-line);
  border-radius: 0;
  background: var(--internal-panel);
  padding: 1.05rem 1.15rem;
  box-shadow: none;
}
.internal-stat span { color: var(--internal-muted); font-size: 0.74rem; font-weight: 650; }
.internal-stat strong { color: var(--internal-ink); font-size: 2rem; font-weight: 720; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.internal-stat.primary { border-color: rgba(210, 89, 41, 0.55); background: rgba(210, 89, 41, 0.06); }
.internal-stat.primary strong { color: #d89074; }
.internal-stat.positive strong { color: var(--internal-green); }
.internal-stat.positive { border-color: rgba(142, 184, 151, 0.4); }
.internal-stat.warning { border-color: rgba(198, 166, 91, 0.55); }
.internal-stat.warning strong { color: var(--internal-amber); }

.signal-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0.8rem;
  border: 1px solid var(--internal-line);
  border-radius: 0;
  background: rgba(236, 230, 214, 0.03);
  overflow: hidden;
}
.signal-strip > div { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.2rem 1rem; padding: 0.85rem 1.1rem; border-right: 1px solid var(--internal-line); }
.signal-strip > div:last-child { border-right: 0; }
.signal-strip span { color: var(--internal-muted); font-size: 0.7rem; font-weight: 650; }
.signal-strip strong { grid-row: span 2; color: var(--internal-ink); font-size: 1.2rem; font-weight: 720; font-variant-numeric: tabular-nums; }
.signal-strip small { color: var(--internal-muted); font-size: 0.64rem; }

.insight-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.8rem; }
.insight-card { border-top: 2px solid #d25929; background: var(--internal-tint); padding: 1rem 1.1rem 1.15rem; }
.insight-card span { color: var(--internal-muted); font-size: 0.69rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.insight-card strong { display: block; margin-top: 0.55rem; color: var(--internal-ink); font-size: 1.7rem; font-weight: 720; letter-spacing: -0.04em; }
.insight-card p { margin: 0.35rem 0 0; color: var(--internal-muted); font-size: 0.7rem; line-height: 1.4; }

.table-panel { margin-top: 1rem; border: 1px solid var(--internal-line); border-radius: 0; background: var(--internal-panel); overflow: hidden; box-shadow: none; }
.table-panel + .table-panel { margin-top: 1.1rem; }
.table-panel.emphasis { border-color: rgba(210, 89, 41, 0.55); box-shadow: none; }
.table-panel-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding: 1rem 1.15rem 0.85rem; border-bottom: 1px solid var(--internal-line); }
.table-panel-title h3 { margin: 0; color: var(--internal-ink); font-size: 0.9rem; font-weight: 700; }
.table-panel-title p { margin: 0; color: var(--internal-muted); font-size: 0.7rem; }

.internal-table { border: 0; background: transparent; }
.internal-table th { border-bottom-color: var(--internal-line); background: #100d0b; padding: 0.7rem 0.9rem; color: var(--internal-muted); font-family: inherit; font-size: 0.7rem; letter-spacing: 0.09em; }
.internal-table td { border-bottom-color: rgba(236, 230, 214, 0.1); padding: 0.82rem 0.9rem; color: var(--internal-muted); font-family: inherit; font-size: 0.84rem; vertical-align: middle; white-space: nowrap; }
.internal-table tbody tr:hover { background: rgba(236, 230, 214, 0.025); }
.internal-table td strong { color: var(--internal-ink); font-weight: 680; }
.account-name strong { display: block; }
.account-name span, .cell-note { display: block; margin-top: 0.2rem; color: var(--internal-muted); font-size: 0.74rem; font-weight: 450; }
.muted-value { color: var(--internal-muted); }
.warning { color: var(--internal-amber); }
/* A group of scans that are not failures. Collapsed by default: the failure
   table above is the call to action, and these are here to be asked for. */
.group-summary {
  list-style: none;
  cursor: pointer;
  padding: 0.85rem 0.9rem;
  color: var(--internal-ink);
  font-size: 0.84rem;
  font-weight: 680;
  display: flex;
  align-items: center;
  gap: 1ch;
  letter-spacing: 0;
  text-transform: none;
}
.group-summary::-webkit-details-marker { display: none; }
.group-summary::before { content: '+'; color: var(--internal-muted); font-weight: 700; }
details[open] > .group-summary::before { content: '\2212'; }
.group-summary:hover { color: var(--internal-green); }
.compact-details { margin: 0; }
.compact-details summary { color: var(--internal-ink); font-family: inherit; font-size: 0.74rem; font-weight: 650; letter-spacing: 0; text-transform: none; }
.compact-details div { margin-top: 0.4rem; color: var(--internal-muted); font-size: 0.68rem; line-height: 1.55; }

.status-badge { display: inline-flex; align-items: center; border: 1px solid currentColor; border-radius: 0; padding: 0.2rem 0.55rem; font-size: 0.64rem; font-weight: 700; line-height: 1.2; text-transform: uppercase; }
.status-customer { background: var(--internal-green-soft); color: var(--internal-green); }
.status-trial { background: var(--internal-amber-soft); color: var(--internal-amber); }
.status-blocked { background: var(--internal-red-soft); color: var(--internal-red); }
/* Inactive is a statement about engagement, so it must not wear an alarm
   colour beside the accounts that genuinely need attention. */
.status-inactive { background: rgba(236, 230, 214, 0.08); color: var(--internal-muted); }
.inactive-summary {
  list-style: none;
  cursor: pointer;
  padding: 0.85rem 0.9rem;
  color: var(--internal-ink);
  font-size: 0.84rem;
  font-weight: 680;
  display: flex;
  align-items: center;
  gap: 1ch;
}
.inactive-summary::-webkit-details-marker { display: none; }
.inactive-summary::before { content: '+'; color: var(--internal-muted); font-weight: 700; }
details[open] > .inactive-summary::before { content: '\2212'; }
.inactive-summary:hover { color: var(--internal-green); }
.access-control { display: flex; align-items: center; gap: 0.45rem; margin: 0; }
.internal-body select { border-color: var(--internal-line); border-radius: 0; background: #0a0908; color: var(--internal-ink); font-family: inherit; font-size: 0.72rem; padding: 0.38rem 0.55rem; }
.internal-body .button { border-color: var(--internal-line); border-radius: 0; background: transparent; color: var(--internal-ink); font-family: inherit; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.internal-body .button:hover:not(:disabled) { border-color: #d25929; color: #d89074; transform: none; box-shadow: none; }
.internal-body .button.primary { border-color: #d25929; background: #d25929; color: #0a0908; padding: 0.52rem 0.9rem; }
.internal-body .button.danger { border-color: var(--internal-red); color: var(--internal-red); }
.panel-note { margin: 0; border-top: 1px solid var(--internal-line); background: #100d0b; padding: 0.65rem 0.85rem; color: var(--internal-muted); font-size: 0.68rem; }

.evidence { display: flex; align-items: center; justify-content: space-between; gap: 3rem; border: 1px solid var(--internal-line); border-radius: 0; background: var(--internal-panel); padding: 1.4rem 1.5rem; }
.evidence p:not(.eyebrow) { max-width: 78ch; margin: 0.5rem 0 0; font-size: 0.76rem; }
.coverage-line { color: var(--internal-ink); font-weight: 600; }
.export-actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.internal-footer { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding: 1.2rem 0 0; border-top: 1px solid var(--internal-line); color: var(--internal-muted); font-size: 0.68rem; }

@media (max-width: 70rem) {
  .internal-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insight-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .signal-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .signal-strip > div:nth-child(2) { border-right: 0; }
  .signal-strip > div:nth-child(-n + 2) { border-bottom: 1px solid var(--internal-line); }
}

@media (max-width: 44rem) {
  .internal-shell { width: min(100% - 2rem, 1440px); }
  .internal-header { align-items: flex-start; flex-direction: column; gap: 0.8rem; padding: 1rem 0; }
  .internal-header nav { width: 100%; justify-content: space-between; }
  .internal-dashboard { padding-top: 2.4rem; }
  .internal-hero, .internal-section-head, .evidence { align-items: flex-start; flex-direction: column; }
  .internal-section-head > p, .freshness { text-align: left; }
  .internal-stat-grid, .insight-grid, .signal-strip { grid-template-columns: 1fr; }
  .internal-stat { min-height: 6.8rem; }
  .signal-strip > div { border-right: 0; border-bottom: 1px solid var(--internal-line); }
  .signal-strip > div:last-child { border-bottom: 0; }
  .table-panel-title { align-items: flex-start; flex-direction: column; gap: 0.25rem; }
  .export-actions { width: 100%; }
  .internal-footer { flex-direction: column; }
}

footer { margin-top: 2.4rem; padding-top: 0.9rem; border-top: 1px solid var(--frame); }