:root {
  --bg: #eff2f1;
  --surface: #ffffff;
  --surface-2: #f6f8f7;
  --ink: #101d1c;
  --ink-2: #48605d;
  --ink-3: #6f8582;
  --line: #d7e0de;
  --line-strong: #b9c8c5;
  --accent: #0c5b53;
  --accent-ink: #ffffff;
  --accent-soft: #e2efec;
  --ok: #17703f;
  --ok-soft: #e3f2e8;
  --warn: #9a5a06;
  --warn-soft: #fbeedb;
  --crit: #a92318;
  --crit-soft: #fbe6e3;
  --shadow: 0 1px 2px rgba(16,29,28,.06), 0 8px 24px -16px rgba(16,29,28,.28);
  --font-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-display: "IBM Plex Serif", Georgia, serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c1413;
    --surface: #141f1e;
    --surface-2: #1a2726;
    --ink: #e4ecea;
    --ink-2: #a3b8b5;
    --ink-3: #7e9491;
    --line: #273735;
    --line-strong: #3a4e4b;
    --accent: #46c4b1;
    --accent-ink: #06201d;
    --accent-soft: #14312d;
    --ok: #63c98c;
    --ok-soft: #123324;
    --warn: #e0a95c;
    --warn-soft: #34260f;
    --crit: #ef8b80;
    --crit-soft: #3a1c19;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.8);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

.wrap {
  max-width: 940px;
  margin: 0 auto;
  padding-inline: 20px;
  padding-block: 28px 56px;
}

.wrap.narrow { max-width: 680px; }

/* masthead */
.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 14px;
}

.masthead h1 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0;
  text-wrap: balance;
}

.masthead h1 a { color: inherit; text-decoration: none; }

.masthead p {
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: 13.5px;
  max-width: 58ch;
}

.stamp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--warn);
  color: var(--warn);
  background: var(--warn-soft);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
}

.stamp::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--warn);
  flex: none;
}

/* landing hero */
.hero {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 52px 28px 44px;
  text-align: center;
  border-top: 3px solid var(--accent);
}

.hero .eyebrow {
  margin: 0 0 14px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}

.hero .hero-sub {
  color: var(--accent);
  font-size: 30px;
}

.hero .hero-lede {
  margin: 18px auto 28px;
  max-width: 46ch;
  font-size: 15.5px;
  color: var(--ink-2);
}

.btn-hero {
  font-size: 15.5px;
  padding: 14px 32px;
  border-radius: 8px;
}

.hero .hero-note {
  margin: 20px 0 0;
  font-size: 12.5px;
  color: var(--ink-3);
}

.notes-hero { border-top: none; }

.devfoot {
  margin-top: 22px;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-3);
}

@media (max-width: 460px) {
  .hero { padding: 38px 20px 32px; }
  .hero h1 { font-size: 30px; }
  .hero .hero-sub { font-size: 23px; }
}

/* panel */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-top: 22px;
}

.panel-head {
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.panel-head h2 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.panel-body { padding: 22px 20px 24px; }

/* steps */
.steps { display: flex; list-style: none; margin: 0; padding: 0; }

.steps li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 500;
}

.steps li + li::before {
  content: "";
  width: 18px; height: 1px;
  background: var(--line-strong);
  margin: 0 9px;
}

.steps .dot {
  width: 19px; height: 19px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  flex: none;
}

.steps li.active { color: var(--ink); }
.steps li.active .dot { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.steps li.done { color: var(--ink-2); }
.steps li.done .dot { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* content */
h3.stage-title {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-wrap: balance;
}

p.lede {
  margin: 0 0 18px;
  color: var(--ink-2);
  font-size: 14px;
  max-width: 62ch;
}

/* forms */
.field { display: grid; gap: 5px; margin-bottom: 14px; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.hint { font-size: 12px; color: var(--ink-3); }

input[type="text"], input[type="tel"] {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  padding: 10px 12px;
  width: 100%;
}

input::placeholder { color: var(--ink-3); opacity: .75; }
input:focus-visible, button:focus-visible, .choice:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.row2 { display: grid; grid-template-columns: 1fr 140px; gap: 14px; }
@media (max-width: 460px) { .row2 { grid-template-columns: 1fr; } }

button, .btn {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  border-radius: 7px;
  border: 1px solid transparent;
  padding: 10px 18px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: filter .15s ease, background .15s ease;
}

@media (prefers-reduced-motion: reduce) { button, .btn { transition: none; } }

.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.08); }

.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }

.btn-mini { font-size: 11.5px; padding: 5px 10px; letter-spacing: .04em; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }

/* choices */
.choices { display: grid; gap: 10px; margin: 4px 0 18px; }

.choice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 13px 14px;
  cursor: pointer;
  background: var(--surface);
}

.choice:hover { background: var(--surface-2); }
.choice input { margin: 3px 0 0; accent-color: var(--accent); flex: none; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice .ch-name { font-weight: 600; font-size: 14px; display: block; }
.choice .ch-detail { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2); display: block; margin-top: 2px; }
.choice .ch-note { font-size: 12px; color: var(--ink-3); display: block; margin-top: 4px; }

/* notices */
.notice {
  border-radius: 8px;
  padding: 11px 13px;
  font-size: 13.5px;
  margin-bottom: 16px;
  border: 1px solid;
  display: flex;
  gap: 9px;
  align-items: flex-start;
}

.notice::before { font-family: var(--font-mono); font-weight: 600; flex: none; }
.notice-info { background: var(--accent-soft); border-color: var(--accent); }
.notice-info::before { content: "i"; color: var(--accent); }
.notice-ok { background: var(--ok-soft); border-color: var(--ok); }
.notice-ok::before { content: "\2713"; color: var(--ok); }
.notice-warn { background: var(--warn-soft); border-color: var(--warn); }
.notice-warn::before { content: "!"; color: var(--warn); }
.notice-crit { background: var(--crit-soft); border-color: var(--crit); }
.notice-crit::before { content: "\00d7"; color: var(--crit); }

/* release */
.release { display: grid; gap: 14px; }

.release-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px 14px;
  background: var(--surface-2);
}

.ri-label {
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: 6px;
}

.linkish { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2); word-break: break-all; }
.strong { font-weight: 600; }

/* test bar */
.testbar {
  margin-top: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 26px;
  align-items: flex-start;
}

.testbar h2 {
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 2px 0 0;
  font-weight: 600;
  flex: none;
}

.testrec { font-size: 13px; line-height: 1.45; }
.testrec b { display: block; font-weight: 600; font-size: 12.5px; color: var(--ink-2); margin-bottom: 2px; }
.testrec code, code.inline {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
}

/* outbox */
.msg { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 11px; }

.msg-head {
  padding: 8px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.5px;
  color: var(--ink-3);
  font-family: var(--font-mono);
}

.msg.sms .msg-head { background: var(--accent-soft); }
.msg-subject { padding: 10px 12px 3px; font-weight: 600; font-size: 13.5px; }
.msg-body { padding: 0 12px 11px; font-size: 13px; color: var(--ink-2); white-space: pre-wrap; line-height: 1.5; }

.empty {
  color: var(--ink-3);
  font-size: 13px;
  padding: 22px 6px;
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
}

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

table.audit { width: 100%; border-collapse: collapse; font-size: 12.5px; font-family: var(--font-mono); }

table.audit th {
  text-align: left;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  padding: 9px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

table.audit td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

table.audit td.ev { color: var(--ink); font-weight: 500; white-space: nowrap; }
table.audit td.state { white-space: nowrap; }

.sev { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.sev-ok { background: var(--ok); }
.sev-warn { background: var(--warn); }
.sev-crit { background: var(--crit); }
.sev-info { background: var(--line-strong); }

/* notes */
.notes {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px 32px;
  border-top: 1px solid var(--line-strong);
  padding-top: 20px;
}

.notes h3 {
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 8px;
  font-weight: 600;
}

.notes ul { margin: 0; padding-left: 17px; }
.notes li { font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.notes li b { color: var(--ink); font-weight: 600; }

/* approval queue */
.review-grid {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

@media (max-width: 760px) {
  .review-grid { grid-template-columns: minmax(0, 1fr); }
}

.preview {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-2);
  overflow: hidden;
  min-height: 160px;
}

.preview img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
  background: var(--surface);
}

/* Shown only when the image fails to load, because the img then paints nothing */
.preview-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  padding: 18px;
  font-size: 12.5px;
  color: var(--ink-3);
  text-align: center;
}

.review-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
  min-width: 0;
}

.review-cols > div { min-width: 0; }

table.kv { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; }

table.kv th {
  text-align: left;
  font-weight: 500;
  color: var(--ink-3);
  padding: 6px 12px 6px 0;
  vertical-align: top;
  width: 44%;
  overflow-wrap: anywhere;
}

table.kv td {
  padding: 6px 0;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12.5px;
  vertical-align: top;
  overflow-wrap: anywhere;
}

table.kv td.wrap { word-break: break-all; }

.decide { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 18px; }

.btn-danger {
  background: transparent;
  color: var(--crit);
  border-color: var(--crit);
}

.btn-danger:hover { background: var(--crit-soft); }

/* catalog queue */
table.audit tr td.subrow {
  background: var(--surface-2);
  padding: 10px 12px 14px;
  border-bottom: 2px solid var(--line-strong);
}

.rowform {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.rowform select {
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 6px 8px;
  max-width: 260px;
}

/* ------------------------------------------------------------------ */
/* the front door: the mark, the name, and one button                  */
/* ------------------------------------------------------------------ */

.frontdoor {
  text-align: center;
  padding: clamp(48px, 12vh, 120px) 16px clamp(40px, 8vh, 80px);
}

.mark { margin: 0 auto 26px; }

.mark svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.mark .posts    { stroke: var(--accent); }
.mark .endline  { stroke: var(--line-strong); }
.mark .mark-the {
  fill: var(--ink-3);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .34em;
}

.mark-word {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(38px, 9vw, 60px);
  letter-spacing: .12em;
  line-height: 1;
  color: var(--ink);
  margin-top: 6px;
}

.mark-img { display: block; margin: 0 auto 26px; max-width: 320px; height: auto; }

.frontdoor-title {
  font-family: "IBM Plex Serif", Georgia, serif;
  font-weight: 600;
  font-size: clamp(22px, 4.6vw, 30px);
  color: var(--ink-2);
  margin: 18px 0 38px;
  letter-spacing: .01em;
}

.frontdoor .btn-hero { font-size: 17px; padding: 15px 34px; }

.frontdoor-note {
  margin: 26px auto 0;
  max-width: 34em;
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1.6;
}

.frontdoor-help { margin-top: 10px; color: var(--ink-3); font-size: 13px; }

/* the bot check, sitting in the form above the submit button */
.botcheck { margin: 20px 0 4px; min-height: 66px; }

/* ------------------------------------------------------------------ */
/* the audit trail                                                     */
/* ------------------------------------------------------------------ */

.chain {
  border-radius: 8px;
  padding: 13px 15px;
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 20px;
  border: 1px solid var(--line);
}
.chain-ok  { background: var(--accent-soft); border-color: var(--accent); }
.chain-bad { background: #fdecec; border-color: #c0392b; color: #7d2119; }
@media (prefers-color-scheme: dark) {
  .chain-bad { background: #3a1a17; border-color: #c0392b; color: #f3c8c3; }
}

.auditfilters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.auditfilters .field { flex: 1 1 150px; margin: 0; display: flex; flex-direction: column; }
.auditfilters .field label { min-height: 18px; }
.auditfilters .narrowfield { flex: 0 0 118px; }
.auditfilters .submitfield { flex: 0 0 auto; }
.auditfilters input, .auditfilters select { width: 100%; }
.auditfilters .submitfield button { white-space: nowrap; }

.audit-count {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0 10px;
  font-size: 13px;
  color: var(--ink-3);
}
.audit-nav { display: flex; gap: 8px; }

.tablewrap { overflow-x: auto; }

.audittable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.audittable th {
  text-align: left;
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line-strong);
  padding: 8px 10px;
  white-space: nowrap;
}
.audittable td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.5;
}
.audittable tbody tr:hover { background: var(--accent-soft); }
.audittable .mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }
.audittable .small { font-size: 11px; color: var(--ink-3); }
.audittable .nowrap { white-space: nowrap; }
.audittable .typed,
.audittable .meta {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 3px;
  word-break: break-word;
}
.audittable .empty-cell {
  text-align: center;
  padding: 30px 12px;
  color: var(--ink-3);
}
.audittable tr.sev-row-crit td:first-child { box-shadow: inset 3px 0 0 #c0392b; }
.audittable tr.sev-row-warn td:first-child { box-shadow: inset 3px 0 0 #b8860b; }

.exportbar {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 16px 12px 0 0;
  flex-wrap: wrap;
}
.exportbar .hint { font-size: 12px; color: var(--ink-3); max-width: 46em; }

.masthead-sub {
  font-weight: 400;
  color: var(--ink-3);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* the consent acknowledgment                                          */
/* ------------------------------------------------------------------ */

.consent {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 16px 18px;
  margin: 22px 0 4px;
  background: var(--accent-soft);
}
.consent-head {
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing: .02em;
  color: var(--ink);
}
.consent-list {
  margin: 0 0 14px;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
}
.consent-list li { margin-bottom: 8px; }
.consent-tick {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
  cursor: pointer;
}
.consent-tick input { margin-top: 3px; flex: 0 0 auto; }

.consent-seen { font-size: 13px; }
.consent-when {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.consent-miss {
  border: 1px solid #c0392b;
  background: #fdecec;
  color: #7d2119;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.55;
}
@media (prefers-color-scheme: dark) {
  .consent-miss { background: #3a1a17; color: #f3c8c3; }
}

/* ------------------------------------------------------------------ */
/* the authorization register                                          */
/* ------------------------------------------------------------------ */

.newauth {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 22px;
}
.newauth summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--accent);
  font-size: 14px;
}
.newauth .hint {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.6;
  margin: 12px 0 16px;
}

.authlist { display: flex; flex-direction: column; gap: 14px; }

.authcard {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
}
.authhead {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
  margin-bottom: 12px;
}
.authstate {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.authgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px 22px;
  font-size: 13px;
  line-height: 1.5;
}
.authgrid span {
  display: block;
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 2px;
}
.inlineform {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin: 14px 14px 0 0;
  flex-wrap: wrap;
}
.reasonbox { min-width: 230px; }

/* Two equal columns in the authorization form. The default row splits by
   content, which lets a wide select crowd its neighbour. */
.newauth .row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
}
@media (max-width: 640px) {
  .newauth .row2 { grid-template-columns: 1fr; }
}
.newauth .field input,
.newauth .field select { width: 100%; }

.sendto {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--ink-3);
}

/* The filing queue's columns. Fixed shares, because the reason in the last
   column is the most useful cell in the row and it was being truncated to
   seventy characters. Only the two columns that hold long unbroken strings,
   the file name and the reason, are allowed to break mid-word; letting every
   column do it split "in_review" across two lines. */
.table-scroll .audit { width: 100%; table-layout: fixed; }
.table-scroll .audit td { vertical-align: top; }
.table-scroll .audit th, .table-scroll .audit td { padding-right: 14px; }
.table-scroll .audit th:nth-child(1), .table-scroll .audit td:nth-child(1) {
  width: 23%; overflow-wrap: anywhere; }
.table-scroll .audit th:nth-child(2), .table-scroll .audit td:nth-child(2) { width: 12%; }
.table-scroll .audit th:nth-child(3), .table-scroll .audit td:nth-child(3) { width: 12%; }
.table-scroll .audit th:nth-child(4), .table-scroll .audit td:nth-child(4) { width: 14%; }
.table-scroll .audit th:nth-child(5), .table-scroll .audit td:nth-child(5) { width: 11%; }
.table-scroll .audit th:nth-child(6), .table-scroll .audit td:nth-child(6) {
  width: 28%; overflow-wrap: anywhere; }

/* Headers wrap. "SUGGESTED CLIENT" is wider than its column and was running
   over the next heading. */
.table-scroll .audit th { white-space: normal; }

/* Live links, on the approval queue. The revoke control sits in the row so a
   staff member on the phone with a client can kill a link without navigating
   anywhere, which is the only moment it is ever wanted. */
.livelinks td:last-child { width: 300px; }
.livelinks .inlineform { display: flex; gap: 6px; align-items: center; }
.livelinks .inlineform input[type=text] {
  flex: 1 1 auto; min-width: 0; padding: 5px 8px; font-size: 13px;
  border: 1px solid var(--rule); border-radius: 5px; background: var(--paper);
  color: var(--ink);
}
.btn-small { padding: 5px 10px; font-size: 13px; white-space: nowrap; }