/* Revline HQ — the cockpit stylesheet.
   Purpose-built for a dashboard: scanned, not read. Shares the brand's two
   worlds (ink masthead, paper body, redline hairlines) and the four faces with
   revlinehq.com, but none of the marketing-page furniture. Plain CSS on
   purpose — a Worker serving one stylesheet does not need a build step. */

@font-face {
  font-family: "FiraVar";
  src: url("/fonts/fira-code-var.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader Display";
  src: url("/fonts/newsreader-display-roman.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader Text";
  src: url("/fonts/newsreader-text-roman.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-var.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --ink: #141110;
  --ink-lift: #1c1917;
  --ink-lift-2: #26211f;
  --paper: #f2ede3;
  --paper-deep: #eae3d5;
  --paper-sunk: #e0d8c8;
  --cream: #f5f1ed;
  --cream-dim: #a89f94;
  --graphite: #5e574f;
  --redline: #e8342a;
  --redline-deep: #cc2e25;

  /* Hairline density is one decision, not twenty. */
  --rule: rgb(20 17 16 / 0.14);
  --rule-mid: rgb(20 17 16 / 0.24);
  --rule-strong: rgb(20 17 16 / 0.4);
  --rule-dark: rgb(245 241 237 / 0.14);
  --rule-dark-mid: rgb(245 241 237 / 0.28);

  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  /* Two optical cuts: display is drawn at opsz 72, text at opsz 16. Picking the
     wrong one is the difference between a display serif and a spindly one. */
  --font-display: "Newsreader Display", Georgia, "Times New Roman", serif;
  --font-text-serif: "Newsreader Text", Georgia, "Times New Roman", serif;
  --font-mono: "FiraVar", ui-monospace, SFMono-Regular, monospace;

  /* 8pt scale. 4 and 12 exist only for inline, text-adjacent gaps. */
  --sp-4: 0.25rem;
  --sp-8: 0.5rem;
  --sp-12: 0.75rem;
  --sp-16: 1rem;
  --sp-24: 1.5rem;
  --sp-32: 2rem;
  --sp-48: 3rem;
  --sp-64: 4rem;
  --sp-96: 6rem;

  --shell: 78rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 160ms;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--redline-deep);
  color: var(--cream);
}

:focus-visible {
  outline: 2px solid var(--redline-deep);
  outline-offset: 3px;
}

[data-surface="dark"] :focus-visible {
  outline-color: var(--redline);
}

a {
  color: inherit;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule-strong);
  transition: text-decoration-color var(--dur) var(--ease);
}

a:hover {
  text-decoration-color: var(--redline-deep);
}

[data-surface="dark"] a {
  text-decoration-color: var(--rule-dark-mid);
}

[data-surface="dark"] a:hover {
  text-decoration-color: var(--redline);
}

/* ------------------------------------------------------------- type scale */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  color: var(--graphite);
  margin: 0;
}

[data-surface="dark"] .eyebrow {
  color: var(--cream-dim);
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.serif-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.06;
  text-wrap: balance;
  margin: 0;
  font-size: clamp(1.875rem, 1.35rem + 2.1vw, 2.75rem);
}

.serif-h2 {
  font-family: var(--font-text-serif);
  font-weight: 600;
  letter-spacing: -0.006em;
  line-height: 1.25;
  margin: 0;
  font-size: 1.3125rem;
}

.serif-h3 {
  font-family: var(--font-text-serif);
  font-weight: 600;
  letter-spacing: -0.004em;
  line-height: 1.3;
  margin: 0;
  font-size: 1.0625rem;
}

.copy {
  font-size: 0.9375rem;
  line-height: 1.65;
  margin: 0;
  max-width: 68ch;
}

.muted {
  color: var(--graphite);
}

[data-surface="dark"] .muted {
  color: var(--cream-dim);
}

/* ---------------------------------------------------------------- masthead */

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--sp-24);
}

@media (min-width: 48rem) {
  .shell {
    padding-inline: var(--sp-32);
  }
}

.masthead {
  background: var(--ink);
  color: var(--cream);
}

.masthead-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  padding-block: var(--sp-16);
  border-bottom: 1px solid var(--rule-dark);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-12);
  text-decoration: none;
  color: var(--cream);
  padding-block: var(--sp-4);
}

.wordmark-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.012em;
}

/* The one place redline earns its keep in the chrome: a rule, on dark. */
.wordmark-rule {
  display: block;
  width: 2px;
  height: 0.875rem;
  background: var(--redline);
}

.wordmark-sub {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-dim);
  transition: color var(--dur) var(--ease);
}

.wordmark:hover .wordmark-sub {
  color: var(--cream);
}

.signout {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule-dark-mid);
  color: var(--cream-dim);
  padding: 0 0 3px;
  min-height: 44px;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.signout:hover {
  color: var(--cream);
  border-bottom-color: var(--redline);
}

.signout:active {
  color: var(--cream-dim);
}

.masthead-body {
  padding-block: var(--sp-24) var(--sp-24);
}

@media (min-width: 48rem) {
  .masthead-body {
    padding-block: var(--sp-48) var(--sp-48);
  }
}

.masthead-body .serif-h1 {
  margin-top: var(--sp-12);
  max-width: 20ch;
}

.masthead-sub {
  margin: var(--sp-12) 0 0;
  max-width: 60ch;
  color: var(--cream-dim);
  font-size: 0.9375rem;
}

.masthead-sub strong {
  color: var(--cream);
  font-weight: 500;
}

/* The site's signature: a 2px redline where the two worlds meet. */
.boundary {
  height: 2px;
  background: var(--redline);
}

/* ---------------------------------------------------------------- metarail */

.metarail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-24);
  margin: var(--sp-24) 0 0;
  padding-top: var(--sp-24);
  border-top: 1px solid var(--rule-dark);
}

@media (min-width: 40rem) {
  .metarail {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-16) var(--sp-48);
  }
}

.metarail > div {
  min-width: 0;
}

.metarail dt {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-bottom: var(--sp-4);
}

.metarail dd {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--cream);
}

.chiprow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin: var(--sp-24) 0 0;
  padding-top: var(--sp-24);
  border-top: 1px solid var(--rule-dark);
}

/* ------------------------------------------------------------------- chips */

/* State encoded in form, not only in words: a neutral chip is a hairline
   outline, an attention chip carries the redline, a settled chip fills. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-4) var(--sp-12);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid var(--rule-mid);
  color: var(--graphite);
  background: transparent;
}

.chip[data-state="done"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--cream);
}

.chip[data-state="live"] {
  border-color: var(--redline-deep);
  color: var(--redline-deep);
}

.chip[data-state="idle"] {
  border-color: var(--rule);
  color: var(--graphite);
}

[data-surface="dark"] .chip {
  border-color: var(--rule-dark-mid);
  color: var(--cream-dim);
}

[data-surface="dark"] .chip[data-state="done"] {
  border-color: var(--cream);
  background: var(--cream);
  color: var(--ink);
}

/* Red never carries text on ink: the redline becomes the rule instead. */
[data-surface="dark"] .chip[data-state="live"] {
  border-color: var(--redline);
  color: var(--cream);
}

[data-surface="dark"] .chip[data-state="idle"] {
  border-color: var(--rule-dark);
  color: var(--cream-dim);
}

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

.body-inner {
  padding-block: var(--sp-48) var(--sp-96);
}

.section + .section {
  margin-top: var(--sp-64);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-8) var(--sp-24);
  padding-bottom: var(--sp-16);
  border-bottom: 2px solid var(--ink);
  margin-bottom: var(--sp-24);
}

.section-head .serif-h2 {
  margin-right: auto;
}

.section-note {
  margin: 0;
  color: var(--graphite);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* Site keys are case-sensitive, so they are the one mono string on the page
   that must never be transformed. */
.keytag {
  margin: 0;
  color: var(--graphite);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------- table */

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--graphite);
  text-align: left;
  white-space: nowrap;
  padding: 0 var(--sp-24) var(--sp-12) 0;
  border-bottom: 1px solid var(--rule-mid);
}

tbody td {
  text-align: left;
  vertical-align: top;
  padding: var(--sp-16) var(--sp-24) var(--sp-16) 0;
  border-bottom: 1px solid var(--rule);
}

tbody tr {
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

tbody tr:hover,
tbody tr:focus-within {
  background: var(--paper-deep);
  box-shadow: inset 2px 0 0 var(--redline);
}

td:last-child,
th:last-child {
  padding-right: 0;
}

/* Capping the name column pulls the data columns back into one scannable
   block instead of stranding them against the right edge on a wide screen. */
@media (min-width: 48rem) {
  .table-stack th:first-child,
  .table-stack td:first-child {
    width: 38%;
  }
}

.cell-name {
  font-family: var(--font-text-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.004em;
  text-decoration-color: transparent;
}

tr:hover .cell-name {
  text-decoration-color: var(--redline-deep);
}

.cell-sub {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--graphite);
  margin: var(--sp-4) 0 0;
  overflow-wrap: anywhere;
}

td.num {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Below the fold of a phone a five-column table is unreadable, so each row
   becomes its own record card with the header carried down as a label. */
@media (max-width: 47.9375rem) {
  .table-stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .table-stack tbody tr {
    display: block;
    border-top: 1px solid var(--rule-mid);
    padding: var(--sp-16) 0 var(--sp-16) var(--sp-12);
    margin-left: -0.75rem;
  }

  .table-stack tbody tr:last-child {
    border-bottom: 1px solid var(--rule-mid);
  }

  .table-stack tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-16);
    padding: var(--sp-8) 0 0;
    border-bottom: 0;
  }

  .table-stack tbody td:first-child {
    display: block;
    padding-top: 0;
  }

  .table-stack tbody td::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--graphite);
    flex: 0 0 auto;
  }

  .table-stack tbody td:first-child::before {
    content: none;
  }
}

/* -------------------------------------------------------------- stat rails */

/* The funnel, read left to right. Figures are tabular so the columns line up
   optically as well as mathematically; rates sit beneath in mono so the eye
   separates "how many" from "what share". */
.rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.rail-cell {
  min-width: 0;
  padding-block: var(--sp-16);
  padding-left: var(--sp-16);
  border-left: 1px solid var(--rule);
}

.rail-cell:nth-child(2n + 1) {
  border-left: 0;
  padding-left: 0;
}

.rail-cell:nth-child(n + 3) {
  border-top: 1px solid var(--rule);
}

@media (min-width: 40rem) {
  .rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rail-cell:nth-child(2n + 1) {
    border-left: 1px solid var(--rule);
    padding-left: var(--sp-16);
  }

  .rail-cell:nth-child(3n + 1) {
    border-left: 0;
    padding-left: 0;
  }

  .rail-cell:nth-child(3) {
    border-top: 0;
  }
}

@media (min-width: 64rem) {
  .rail {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .rail-cell:nth-child(3n + 1) {
    border-left: 1px solid var(--rule);
    padding-left: var(--sp-16);
  }

  .rail-cell:first-child {
    border-left: 0;
    padding-left: 0;
  }

  .rail-cell:nth-child(n + 3) {
    border-top: 0;
  }
}

.rail-cell dd {
  margin: 0;
  min-width: 0;
}

.stat-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
  margin: 0;
}

.stat-figure {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: var(--sp-8) 0 0;
}

.stat-rate {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--graphite);
  margin: var(--sp-4) 0 0;
}

/* Revenue is the number the business is actually judged on, so it gets the
   size and the one full-saturation redline mark on the paper world. */
.rail-cell[data-kind="revenue"] .stat-figure {
  display: inline-block;
  font-size: 1.75rem;
  padding-bottom: var(--sp-8);
  border-bottom: 2px solid var(--redline);
}

/* ------------------------------------------------------------------- cards */

.card {
  background: var(--paper-deep);
  padding: var(--sp-24);
}

.card + .card {
  margin-top: var(--sp-16);
}

@media (min-width: 48rem) {
  .card {
    padding: var(--sp-32);
  }
}

.card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-8) var(--sp-24);
  margin-bottom: var(--sp-8);
}

.card .rail {
  margin-top: var(--sp-16);
}

.card .rail-cell {
  border-color: var(--rule-mid);
}

/* ------------------------------------------------------------- definitions */

.deflist {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--rule-mid);
}

.deflist > div {
  display: grid;
  gap: var(--sp-4) var(--sp-24);
  padding-block: var(--sp-16);
  border-bottom: 1px solid var(--rule);
  min-width: 0;
}

@media (min-width: 40rem) {
  .deflist > div {
    grid-template-columns: 12rem minmax(0, 1fr);
    align-items: baseline;
  }
}

.deflist dt {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
}

.deflist dd {
  margin: 0;
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------- code */

.code {
  margin: var(--sp-16) 0 0;
  border: 1px solid var(--rule-mid);
  background: var(--paper);
}

.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  padding: var(--sp-8) var(--sp-8) var(--sp-8) var(--sp-16);
  border-bottom: 1px solid var(--rule);
}

.code pre {
  margin: 0;
  padding: var(--sp-16);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: var(--ink);
  tab-size: 2;
}

.code code {
  font: inherit;
  white-space: pre;
}

/* On a phone a horizontally-scrolling snippet just looks truncated, and this
   is the one string on the page you are here to read in full. */
@media (max-width: 47.9375rem) {
  .code pre {
    overflow-x: visible;
  }

  .code code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
}

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: var(--sp-12) var(--sp-32);
  background: var(--redline-deep);
  color: var(--cream);
  border: 1px solid var(--redline-deep);
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.btn:hover {
  background: #b52820;
  border-color: #b52820;
}

.btn:active {
  transform: translateY(1px);
}

.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.btn-quiet {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule-mid);
  min-height: 2.75rem;
  padding: var(--sp-8) var(--sp-16);
}

.btn-quiet:hover {
  background: transparent;
  border-color: var(--ink);
}

.btn-quiet[data-copied="true"] {
  border-color: var(--redline-deep);
  color: var(--redline-deep);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-16);
  margin-top: var(--sp-24);
}

/* ------------------------------------------------------------------- forms */

form {
  margin: 0;
}

.field {
  display: block;
}

.field > .label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: var(--sp-8);
}

.field .hint {
  display: block;
  font-size: 0.8125rem;
  color: var(--graphite);
  margin-top: var(--sp-8);
}

/* 1rem is the iOS auto-zoom floor. Drop to 15px and Safari zooms the viewport
   on focus, and the founder spends the rest of the form pinching back out. */
input[type="text"],
input[type="password"],
input:not([type]) {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--rule-mid);
  border-radius: 0;
  padding: var(--sp-12) var(--sp-16);
  min-height: 3rem;
  appearance: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

input:hover:not(:disabled) {
  border-color: var(--rule-strong);
}

input:focus {
  border-color: var(--redline-deep);
}

/* Flush against the border rather than offset, so the focus ring reads as one
   thicker rule instead of two concentric red boxes (which look like an error). */
input:focus-visible {
  outline-offset: 0;
}

input::placeholder {
  color: var(--graphite);
  opacity: 0.7;
}

/* ------------------------------------------------------------------ states */

.note {
  padding: var(--sp-24);
  background: var(--paper-deep);
  border-left: 2px solid var(--rule-strong);
  color: var(--graphite);
  font-size: 0.9375rem;
}

.note strong {
  color: var(--ink);
  font-weight: 500;
}

/* ------------------------------------------------------------------- login */

/* Not a page so much as a door. Ink card on paper, redline across the top,
   nothing else on screen to look at. */
.login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--sp-32) var(--sp-24);
}

.login-card {
  width: 100%;
  max-width: 24rem;
  background: var(--ink);
  color: var(--cream);
  padding: var(--sp-32) var(--sp-24) var(--sp-32);
  border-top: 2px solid var(--redline);
  box-shadow: 0 1px 2px rgb(20 17 16 / 0.06), 0 12px 32px rgb(20 17 16 / 0.12);
}

@media (min-width: 30rem) {
  .login-card {
    padding: var(--sp-48) var(--sp-32);
  }
}

.login-card .serif-h1 {
  margin: var(--sp-16) 0 0;
  font-size: 1.875rem;
}

.login-card .login-note {
  margin: var(--sp-12) 0 var(--sp-32);
  color: var(--cream-dim);
  font-size: 0.9375rem;
}

.login-card .label {
  color: var(--cream-dim);
}

.login-card input {
  background: transparent;
  color: var(--cream);
  border-color: var(--rule-dark-mid);
}

.login-card input:hover:not(:disabled) {
  border-color: var(--cream-dim);
}

.login-card input:focus {
  border-color: var(--redline);
}

.login-card .btn {
  width: 100%;
  margin-top: var(--sp-24);
}

.login-error {
  margin: 0 0 var(--sp-24);
  padding: var(--sp-12) var(--sp-16);
  border-left: 2px solid var(--redline);
  background: var(--ink-lift);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

.login-foot {
  margin: var(--sp-32) 0 0;
  padding-top: var(--sp-24);
  border-top: 1px solid var(--rule-dark);
  color: var(--cream-dim);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------------- misc */

.skip-link {
  position: absolute;
  left: var(--sp-16);
  top: var(--sp-16);
  padding: var(--sp-8) var(--sp-16);
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-200%);
  z-index: 10;
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* ============================================================================
   PORTAL ADDITIONS
   ----------------------------------------------------------------------------
   Everything above is the HQ cockpit, unchanged. Everything below is what the
   onboarding admin needs on top of it — the surfaces that used to live on a
   second stylesheet with a second set of opinions.

   The rule for this block: no new tokens, no new type sizes, no new spacing
   values. Every addition is composed from what the cockpit already declares, so
   there is one system to keep honest rather than two that agree by luck.
   ========================================================================= */

/* --------------------------------------------------------------- masthead nav */

/* Two areas now share one masthead. The current one is marked with the redline
   rather than a fill, so the nav reads as a position rather than a button bar. */
.navrail {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-16);
  margin-left: auto;
  margin-right: var(--sp-24);
}

.navrail a {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cream-dim);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid transparent;
}

.navrail a:hover {
  color: var(--cream);
  border-bottom-color: var(--rule-dark-mid);
}

.navrail a[aria-current="page"] {
  color: var(--cream);
  border-bottom-color: var(--redline);
}

@media (max-width: 39.9375rem) {
  .navrail {
    order: 3;
    width: 100%;
    margin: var(--sp-16) 0 0;
  }
}

/* --------------------------------------------------------------------- forms */

/* The cockpit styled `input:not([type])` and text/password, because its only
   form was a password box. The admin has email, url, tel and number fields, and
   an unstyled one next to a styled one is the single loudest way to make a form
   look unfinished. */
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="date"],
textarea,
select {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--rule-mid);
  border-radius: 0;
  padding: var(--sp-12) var(--sp-16);
  min-height: 3rem;
  appearance: none;
  transition: border-color var(--dur) var(--ease);
}

textarea {
  min-height: 6rem;
  resize: vertical;
  line-height: 1.6;
}

/* The chevron is drawn rather than fetched: an inline data URI keeps the strict
   CSP intact (img-src 'self' data:) and costs no request. */
select {
  padding-right: var(--sp-48);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235e574f' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-16) center;
  background-size: 10px 6px;
}

textarea:hover:not(:disabled),
select:hover:not(:disabled) {
  border-color: var(--rule-strong);
}

textarea:focus,
select:focus {
  border-color: var(--redline-deep);
}

input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: var(--redline-deep);
  border-left-width: 2px;
}

textarea[readonly] {
  background: var(--paper-deep);
  color: var(--ink);
}

/* Money and ids are read as digits, not as words. */
.mono-input {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* One field was enough for a login card. A form of twelve needs rhythm. */
.field + .field,
.field + .actions,
form > .field:not(:first-child) {
  margin-top: var(--sp-24);
}

fieldset {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--sp-32) 0 0;
  padding: var(--sp-24) 0 0;
  min-width: 0;
}

fieldset:first-of-type {
  margin-top: var(--sp-24);
}

legend {
  padding: 0 var(--sp-12) 0 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.grid-2 {
  display: grid;
  gap: var(--sp-24);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 48rem) {
  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Inside a grid the fields are already separated by the gap, so the stacking
   margin would double it. */
.grid-2 > .field + .field,
.grid-2 > .field {
  margin-top: 0;
}

.field-error {
  display: block;
  margin-top: var(--sp-8);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--redline-deep);
}

/* A checkbox is the one control on the client's page that carries legal weight,
   so it is drawn at a size a thumb cannot miss rather than at the browser's. */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-12);
  cursor: pointer;
}

.check input[type="checkbox"] {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.125rem 0 0;
  accent-color: var(--redline-deep);
}

/* ------------------------------------------------------------------ surfaces */

/* The panel is a card that is making a point rather than holding a table: the
   redline down its left edge is the same mark the section rules use, turned. */
.panel {
  background: var(--paper-deep);
  padding: var(--sp-24);
  border-left: 2px solid var(--rule-strong);
}

.panel.rule-left {
  border-left-color: var(--redline);
}

.panel > :first-child {
  margin-top: 0;
}

.panel > :last-child {
  margin-bottom: 0;
}

.panel-dark {
  background: var(--ink);
  color: var(--cream);
  padding: var(--sp-32) var(--sp-24);
  border-top: 2px solid var(--redline);
}

.banner {
  margin-bottom: var(--sp-24);
  padding: var(--sp-16);
  border-left: 2px solid var(--redline);
  background: var(--paper-deep);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--redline-deep);
}

.section-gap {
  margin-top: var(--sp-64);
}

.stack > * + * {
  margin-top: var(--sp-16);
}

/* ---------------------------------------------------------------- lifecycle */

/* The onboarding lifecycle is five ordered stages plus one interrupt. It maps
   onto the cockpit's three chip forms rather than inventing five colours:
   outline = not there yet, redline = ours to move, filled = settled. */
.chip[data-state="attention"] {
  border-color: var(--redline-deep);
  background: var(--redline-deep);
  color: var(--cream);
}

[data-surface="dark"] .chip[data-state="attention"] {
  border-color: var(--redline);
  background: var(--redline);
  color: var(--cream);
}

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

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.timeline li {
  display: grid;
  gap: var(--sp-4) var(--sp-24);
  grid-template-columns: minmax(0, 1fr);
  padding: var(--sp-16) 0;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 48rem) {
  .timeline li {
    grid-template-columns: 12rem minmax(0, 1fr);
  }
}

.timeline time {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--graphite);
  font-variant-numeric: tabular-nums;
}

.timeline .event-type {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.timeline pre,
.action-card pre {
  margin: var(--sp-8) 0 0;
  padding: var(--sp-12) var(--sp-16);
  background: var(--paper-deep);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--graphite);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

/* --------------------------------------------------------------- action cards */

/* An open action is work a human still owes a paying client, so it carries the
   redline. A resolved one steps back to a hairline and keeps its receipt. */
.action-card {
  padding: var(--sp-24);
  background: var(--paper-deep);
  border-left: 2px solid var(--redline);
}

.action-card + .action-card {
  margin-top: var(--sp-16);
}

.action-card[data-resolved="1"] {
  border-left-color: var(--rule);
  opacity: 0.7;
}

.action-card .action-head {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--graphite);
}

.action-card .actions {
  margin-top: var(--sp-16);
}

/* ------------------------------------------------------------------ summary */

/* A definition list that reads as a record rather than as a table. Shares the
   cockpit's .deflist rules; this only widens the term column where the admin's
   terms are longer than HQ's. */
.deflist.wide > div {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 40rem) {
  .deflist.wide > div {
    grid-template-columns: 12rem minmax(0, 1fr);
  }
}

.readout {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.7;
}

/* A record id, a token, a site key: monospace, quiet, selectable. */
.mono-data {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--graphite);
  margin: var(--sp-4) 0 0;
  word-break: break-all;
}

.mono-figure {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Space BETWEEN, not around: `.copy` carries no margin of its own because HQ
   only ever set it inside a card, where the padding did the work. In the admin
   a paragraph explains the form directly beneath it, and with no rule here the
   explanation and the first field label touch. */
.copy + form,
.copy + .field,
.copy + .grid-2,
.copy + .deflist,
.copy + .table-wrap,
.copy + .banner,
.copy + .card,
.copy + .panel {
  margin-top: var(--sp-24);
}

/* Inside a fieldset the paragraph is the legend's elaboration, so it needs air
   under it before the controls start. */
fieldset > .copy {
  margin-bottom: var(--sp-24);
}