/* Beam: the A+ Ledger design (approved 24 Oct 2026). Beam's own rules over
   kit's admin.css, whose tokens are remapped below so its buttons, inputs and
   tables wear Ledger's palette. Not in a layer: admin.css is unlayered, and a
   layered rule would lose to it. Semantic selectors only: elements, ids for
   morph roots, aria and data attributes, a few plain classes for layouts.
   Every colour is a token on :root[data-theme], so a palette is swapped in
   one place; dark is the default. */

@font-face { font-family: "Geist"; src: url("fonts/Geist-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap }
@font-face { font-family: "Geist"; src: url("fonts/Geist-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap }
@font-face { font-family: "Geist"; src: url("fonts/Geist-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap }

:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E0F11;
  --surf: #16171A;
  --surf2: #1F2024;
  --line: #2A2C31;
  --ink: #ECEAE4;
  --mute: #9C9B95;
  --acc: #C6F16A;
  --acc-ink: #0E0F11;
  --blocked: #FF7A59;
  --blocked-ink: #0E0F11;
  --built: #C6F16A;
  --built-ink: #0E0F11;
  --part: #F2B33D;
  --part-ink: #F2B33D;
  --deferred: #6B6D73;
  --slice-sc: #8FB4FF;
  --slice-sv: #C6F16A;
  --slice-au: #D2A8FF;
  --slice-tr: #F2B33D;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F7F7F4;
  --surf: #EEEEE9;
  --surf2: #E5E5DF;
  --line: #D9D9D2;
  --ink: #17181B;
  --mute: #5A5B57;
  --acc: #4D7C0F;
  --acc-ink: #FFFFFF;
  --blocked: #B83A1E;
  --blocked-ink: #FFFFFF;
  --built: #7FB02A;
  --built-ink: #111214;
  --part: #EBA737;
  --part-ink: #8A5A00;
  --deferred: #8A8B86;
  --slice-sc: #2F5FC4;
  --slice-sv: #4D7C0F;
  --slice-au: #7A3FC2;
  --slice-tr: #A0660A;
}

/* kit's tokens, read through Ledger's. */
:root,
:root[data-theme] {
  --font-sans: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --surface-0: var(--bg);
  --surface-1: var(--surf);
  --surface-2: var(--surf);
  --surface-3: var(--surf2);
  --surface-4: var(--line);
  --surface-raised: var(--surf2);
  --text-1: var(--ink);
  --text-2: var(--ink);
  --text-3: var(--mute);
  --text-ghost: var(--mute);
  --border: var(--line);
  --border-hover: var(--mute);
  --accent: var(--acc);
  --accent-hover: var(--acc);
  --accent-soft: color-mix(in oklab, var(--acc) 18%, transparent);
  --button-fill: var(--ink);
  --button-fill-hover: var(--ink);
  --on-accent: var(--bg);
  --link: var(--ink);
  --link-hover: var(--acc);
  --shadow-button: none;
  --shadow-button-hover: none;
  --radius-sm: 6px;
  --add-bg: color-mix(in oklab, var(--acc) 14%, transparent);
  --del-bg: color-mix(in oklab, var(--blocked) 14%, transparent);
}

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

/* The parts the browser draws, in Ledger's palette: selection, the caret,
   keyboard focus, scrollbars, and figures that line up in columns. */
::selection {
  background: color-mix(in oklab, var(--acc) 35%, transparent);
  color: var(--ink);
}

html {
  caret-color: var(--acc);
  accent-color: var(--acc);
  scrollbar-color: var(--line) transparent;
  font-variant-numeric: tabular-nums;
}

:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: 4px;
}

:is(input, select, textarea):focus-visible {
  outline-offset: 0;
  border-color: var(--acc);
}

a {
  text-underline-offset: 3px;
}

a.button {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--bg);
  font: 500 14px var(--font-sans);
  text-decoration: none;
}

/* A page Beam could not show. */
#error-page {
  max-inline-size: 560px;
  margin: 12vh auto 0;

  & h1 {
    font-size: 40px;
    letter-spacing: -0.03em;
    margin: 6px 0 12px;
  }

  & p {
    color: var(--mute);
    margin: 0 0 24px;
  }
}

/* Hidden means hidden, whatever display a rule gives the element. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
}

a {
  color: var(--ink);
  text-decoration: none;

  &:hover {
    color: var(--acc);
  }
}

code, kbd, samp, data {
  font-family: var(--font-mono);
}

h1, h2, h3 {
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
}

h1,
main#app-main h1 {
  font-size: 48px;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 0;
}

h2 {
  font-size: 20px;
}

h3 {
  font-size: 15px;
}

/* The small mono label above a title or a value. */
hgroup > p:first-child,
dt,
th,
.lbl {
  font: 500 11px var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mute);
}

hgroup {
  display: grid;
  gap: 8px;
  margin-block-end: 28px;

  & > p {
    margin: 0;
  }

  & > p:last-child:not(:first-child) {
    color: var(--mute);
    max-inline-size: 72ch;
  }
}

/* Buttons: plain is ink on the page (primary), the variants as CLAUDE.md
   names them. */
button {
  height: 40px;
  padding: 0 16px;
  border-radius: 6px;
  font: 500 14px var(--font-sans);

  &.secondary {
    background: transparent;
    border-color: var(--line);
    color: var(--ink);
  }

  &.ghost {
    background: transparent;
    border-color: transparent;
    color: var(--mute);
  }

  &.danger {
    background: var(--blocked);
    color: var(--blocked-ink);
  }

  &.small {
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
  }
}

input,
select,
textarea {
  font: inherit;
  background: var(--surf);
  color: var(--ink);
  border-color: var(--line);
  border-radius: 8px;
}

input[type="checkbox"],
input[type="radio"] {
  inline-size: auto;
  accent-color: var(--acc);
}

label {
  display: grid;
  gap: 6px;
  font-size: 13px;

  &:has(> input[type="checkbox"]),
  &:has(> input[type="radio"]) {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
}

/* Tables are ledgers: an ink rule on top, hairlines between rows. */
table {
  background: transparent;
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--ink);

  & th {
    background: transparent;
    padding: 12px 12px 12px 0;
    border-bottom: 1px solid var(--line);
    text-align: start;
  }

  & td {
    padding: 14px 12px 14px 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: 14px;
    vertical-align: top;
  }

  & tr:last-child td {
    border-bottom: 1px solid var(--line);
  }

  & tbody tr:hover {
    background: var(--surf);
  }

  & small {
    display: block;
    color: var(--mute);
  }
}

dl {
  margin: 0;

  & dd {
    margin: 2px 0 12px;
  }
}

pre {
  font: 400 12px var(--font-mono);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── The frame ── */

#app-header {
  border-bottom: 1px solid var(--line);

  & > div {
    max-inline-size: 1440px;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 12px 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 28px;
    min-block-size: 62px;
  }

  & nav.crumbs {
    gap: 6px;
    font-size: 13px;
    color: var(--mute);

    & a {
      color: var(--mute);
      padding: 0;
    }

    & [aria-current="page"] {
      color: var(--ink);
    }
  }

  & a[aria-label="Beam"] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.02em;
  }

  & nav {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;

    & a {
      color: var(--mute);
      padding: 8px 0;

      &[aria-current="page"] {
        color: var(--ink);
        font-weight: 500;
        box-shadow: inset 0 -2px 0 var(--ink);
      }

      & data {
        color: var(--acc);
        margin-inline-start: 4px;
        font-family: var(--font-mono);
      }
    }
  }

  & menu {
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }

  & search {
    margin: 0;

    &::before {
      display: none;
    }
  }

  & search input {
    inline-size: 260px;
    height: 36px;
    padding: 0 12px;
    border-radius: 6px;
    background-image: none;
  }

  & li.langs {
    display: flex;
    align-items: center;
    gap: 4px;
    font: 400 12px var(--font-mono);
    color: var(--mute);

    & button {
      height: auto;
      padding: 0;
      background: none;
      border: 0;
      color: var(--mute);
      font: 400 12px var(--font-mono);

      &[aria-pressed="true"] {
        color: var(--ink);
      }
    }
  }

  /* A scope label, not a warning: neutral, with a lock. */
  & mark[data-only] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 500 11px var(--font-mono);
    letter-spacing: 0.05em;
    color: var(--mute);
    background: none;
    border: 1px solid var(--line);
    padding: 4px 8px;
    border-radius: 4px;

    &::before {
      display: inline-block;
      content: "";
      inline-size: 9px;
      block-size: 10px;
      background: currentColor;
      clip-path: path("M2 4.5V3a2.5 2.5 0 0 1 5 0v1.5h1V10H1V4.5Zm1.2 0h2.6V3a1.3 1.3 0 0 0-2.6 0Z");
    }
  }

  & details.account {
    position: relative;

    & > summary {
      list-style: none;
      display: grid;
      place-items: center;
      inline-size: 36px;
      block-size: 36px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: var(--surf);
      font: 500 12px var(--font-sans);
      cursor: pointer;

      &::-webkit-details-marker {
        display: none;
      }
    }

    & > div {
      position: absolute;
      inset-inline-end: 0;
      inset-block-start: 44px;
      z-index: 10;
      display: grid;
      gap: 10px;
      min-inline-size: 200px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--surf);

      & p {
        margin: 0;
        font-size: 13px;
      }
    }
  }

  & [role="group"] {
    display: flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: 7px;

    & button {
      height: 32px;
      padding: 0 10px;
      gap: 6px;
      font: 500 12px var(--font-sans);
      background: transparent;
      color: var(--mute);
      border: 0;
      border-radius: 5px;

      &[aria-pressed="true"] {
        background: var(--ink);
        color: var(--bg);
      }
    }
  }

  & abbr[title] {
    display: inline-grid;
    place-items: center;
    inline-size: 36px;
    block-size: 36px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--surf);
    font: 500 12px var(--font-sans);
    text-decoration: none;
  }
}

/* Acting as a customer, or previewing as one: a bar in the accent across the
   top, so nobody forgets which role they act in. */
#acting {
  margin: 0;
  padding: 10px 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  background: var(--acc);
  color: var(--acc-ink);
  font-size: 13px;

  & button {
    background: var(--acc-ink);
    color: var(--acc);
  }

  &[data-acting="preview"] {
    background: var(--surf2);
    color: var(--ink);

    & button {
      background: var(--ink);
      color: var(--bg);
    }
  }
}

main#app-main {
  max-inline-size: 1440px;
  margin: 0 auto;
  padding: 44px 40px 64px;
  box-sizing: border-box;
}

@media (max-width: 720px) {
  #app-header > div,
  main#app-main {
    padding-inline: 16px;
  }

  #app-header search input {
    inline-size: 100%;
  }

  h1 {
    font-size: 36px;
  }
}

#notice:not([hidden]) {
  margin: 0 0 24px;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--surf);
  border: 1px solid var(--line);

  &[role="alert"] {
    border-color: var(--blocked);
  }
}

/* Two or more side panels sit side by side when there is room. */
.panels {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-block: 20px;

  & > section {
    flex: 1 1 300px;
    min-inline-size: 0;
    display: grid;
    gap: 12px;
    align-content: start;
    padding: 18px;
    margin: 0;
    border-radius: 12px;
    background: var(--surf);
  }
}

#content > section > section,
#content > section > div > section {
  margin-block-start: 40px;
}

article[data-empty] {
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: 12px;
}

/* ── Status: a shape and a word, then a colour ── */

/* data-mark draws a capability's status as a shape: built a solid square,
   partly built a half-filled square, planned a plain outline, blocked a
   round dot, deferred a dashed outline. */
[data-mark] {
  display: inline-block;
  inline-size: 12px;
  block-size: 12px;
  flex: none;
  border-radius: 2px;
  box-sizing: border-box;
}

[data-mark="built"] { background: var(--built) }
[data-mark="partly_built"] { background: linear-gradient(to top, var(--part) 0 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--part) }
[data-mark="planned"] { box-shadow: inset 0 0 0 1.5px var(--mute) }
[data-mark="blocked"] { background: var(--blocked); border-radius: 50% }
[data-mark="deferred"] { border: 1.5px dashed var(--deferred) }

/* A status chip: the shape, then the word. */
mark[data-status] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  padding: 0 10px;
  border-radius: 13px;
  font: 500 12px var(--font-sans);
  white-space: nowrap;
  color: var(--ink);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);

  &::before {
    content: "";
    inline-size: 8px;
    block-size: 8px;
    flex: none;
    box-sizing: border-box;
  }

  &[data-status="built"] {
    background: var(--built);
    color: var(--built-ink);
    box-shadow: none;

    &::before { background: var(--built-ink) }
  }

  &[data-status="partly_built"] {
    box-shadow: inset 0 0 0 1.5px var(--part);

    &::before { background: linear-gradient(to top, var(--part) 0 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--part) }
  }

  &[data-status="planned"]::before { box-shadow: inset 0 0 0 1.5px var(--mute) }

  &[data-status="blocked"] {
    background: var(--blocked);
    color: var(--blocked-ink);
    box-shadow: none;

    &::before { background: var(--blocked-ink); border-radius: 50% }
  }

  &[data-status="deferred"] {
    color: var(--mute);
    box-shadow: none;
    border: 1px dashed var(--deferred);

    &::before {
      box-shadow: inset 0 0 0 1.5px var(--deferred);
      background: linear-gradient(to top right, transparent calc(50% - 0.75px), var(--deferred) calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px));
    }
  }
}

/* Outcomes, severities and decisions: the same idea, a shape and a word. */
mark[data-outcome],
mark[data-severity],
mark[data-decision] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border-radius: 12px;
  font: 500 12px var(--font-sans);
  color: var(--ink);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);

  /* kit's admin.css draws a dot in every mark's ::before; the glyph replaces it. */
  &::before {
    content: var(--glyph, "");
    font-weight: 600;
    inline-size: auto;
    block-size: auto;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

[data-outcome="accepted"], [data-outcome="deemed_accepted"] { --glyph: "✓" }
mark[data-outcome="accepted"], mark[data-outcome="deemed_accepted"] { background: var(--built); color: var(--built-ink); box-shadow: none }
[data-outcome="accepted_minor"] { --glyph: "◐" }
mark[data-outcome="accepted_minor"] { box-shadow: inset 0 0 0 1.5px var(--part) }
[data-outcome="not_accepted"] { --glyph: "✕" }
mark[data-outcome="not_accepted"] { background: var(--blocked); color: var(--blocked-ink); box-shadow: none }

[data-severity="critical"] { --glyph: "‼" }
mark[data-severity="critical"] { background: var(--blocked); color: var(--blocked-ink); box-shadow: none }
[data-severity="major"] { --glyph: "!" }
mark[data-severity="major"] { box-shadow: inset 0 0 0 1.5px var(--blocked) }
[data-severity="minor"] { --glyph: "·" }
mark[data-severity="minor"] { box-shadow: inset 0 0 0 1.5px var(--part) }
[data-severity="cosmetic"] { --glyph: "~" }
mark[data-severity="cosmetic"] { color: var(--mute); border: 1px dashed var(--deferred); box-shadow: none }

[data-decision="approved"] { --glyph: "✓" }
mark[data-decision="approved"] { background: var(--built); color: var(--built-ink); box-shadow: none }
[data-decision="declined"] { --glyph: "✕" }
[data-decision="awaiting"] { --glyph: "◔" }
mark[data-decision="awaiting"] { box-shadow: inset 0 0 0 1.5px var(--part-ink) }

/* Where a request or a capability's outcome stands, when nothing is decided
   yet: still a shape and a word. */
mark[data-state] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border-radius: 12px;
  font: 500 12px var(--font-sans);
  color: var(--ink);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
  white-space: nowrap;

  &::before {
    content: var(--glyph, "");
    font-weight: 600;
    inline-size: auto;
    block-size: auto;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

[data-state="open"] { --glyph: "○" }
[data-state="fixed"] { --glyph: "◑" }
[data-state="closed"] { --glyph: "✓" }
[data-state="undecided"] { --glyph: "○" }
[data-state="waiting"] { --glyph: "◔" }
mark[data-state="waiting"] { box-shadow: inset 0 0 0 1.5px var(--part-ink) }
[data-state="not_signable"] { --glyph: "⊘" }
mark[data-state="not_signable"] { color: var(--mute) }
[data-state="evidence_missing"] { --glyph: "△" }
mark[data-state="evidence_missing"] { box-shadow: inset 0 0 0 1.5px var(--blocked) }

/* A capability named for people: its name, then its id, smaller. */
.cap > small {
  margin-inline-end: 4px;
  font: 400 12px var(--font-mono);
  color: var(--mute);
  white-space: nowrap;
}

/* ── The delivery stage ── */

/* The eight stages as a bar: done in ink, the current one in the accent. */
ol.stages {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: flex;
  gap: 6px;
  overflow-x: auto;

  & > li {
    flex: 1 1 0;
    min-inline-size: 96px;
    padding-top: 12px;
    border-top: 2px solid var(--line);
    font-size: 12px;
    color: var(--mute);

    &[data-done="true"] {
      border-color: var(--ink);
      color: var(--ink);
    }

    &[aria-current="step"] {
      border-color: var(--acc);
      color: var(--ink);

      & strong {
        display: block;
        font-weight: 600;
      }

      & data {
        font-family: var(--font-mono);
        color: var(--acc);
      }
    }
  }
}

/* Moving the stage on, folded away until Nullsoft opens it. */
details.advance {
  margin-top: 14px;
  max-inline-size: 560px;

  & > summary {
    display: inline-flex;
    align-items: center;
    min-block-size: 40px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
    cursor: pointer;
    list-style: none;
    color: var(--ink);
    font: 500 14px var(--font-sans);

    &::-webkit-details-marker {
      display: none;
    }

    &::after {
      content: " →";
      white-space: pre;
      color: var(--mute);
    }
  }

  &[open] {
    display: grid;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--surf);

    & > summary {
      color: var(--ink);
    }
  }

  & > button {
    justify-self: start;
  }
}

/* The small eight-tick strip in the clients table. */
ol.ticks {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  gap: 3px;

  & > li {
    inline-size: 16px;
    block-size: 6px;
    background: var(--line);

    &[data-done="true"] { background: var(--ink) }
    &[aria-current="step"] { background: var(--acc) }
  }
}

/* One mark per capability, grouped by area. */
.strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;

  & > span {
    display: inline-flex;
    gap: 2px;
  }

  & [data-mark] {
    inline-size: 7px;
    block-size: 14px;
  }

  & [data-mark="blocked"] {
    inline-size: 8px;
    block-size: 8px;
    align-self: center;
  }
}

/* A legend of the shapes. */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--mute);

  & > span {
    display: flex;
    align-items: center;
    gap: 6px;
  }
}

/* ── Clients ── */

/* A wide table scrolls in its own box on a narrow screen. */
.scroll {
  overflow-x: auto;

  & > table {
    min-inline-size: 960px;
  }
}

#home {
  & > header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;

    & hgroup {
      margin: 0;
    }
  }

  & table th:nth-child(1) { inline-size: 18% }
  & table th:nth-child(2) { inline-size: 16% }
  & table th:nth-child(3) { inline-size: 46% }

  & table td:first-child > a {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.01em;
  }

  & table td > data {
    font: 400 18px var(--font-mono);
  }

  & > header .actions {
    display: flex;
    gap: 10px;
    margin: 0;
  }

  & .legend [data-mark] {
    inline-size: 7px;
    block-size: 14px;
  }

  & .legend [data-mark="blocked"] {
    inline-size: 8px;
    block-size: 8px;
  }

  & .legend [data-mark="deferred"] {
    border: 0;
    box-shadow: inset 0 0 0 1px var(--deferred);
  }

  & table td {
    padding-block: 22px;
    vertical-align: middle;
  }

  & table td:first-child > small {
    font-size: 14px;
    margin-top: 2px;
  }

  & mark[data-internal]::before {
    display: none;
  }

  & mark[data-internal] {
    font: 500 11px var(--font-mono);
    color: var(--mute);
    background: none;
    border: 1px solid var(--line);
    padding: 2px 6px;
    border-radius: 4px;
    margin-inline-start: 6px;
    vertical-align: 2px;
  }

  & .stage {
    font-size: 14px;

    & data {
      font: 400 14px var(--font-mono);
      color: var(--mute);
    }
  }

  & .summary {
    margin: 0;
    font: 400 12px var(--font-mono);
    color: var(--mute);

    & [data-status="blocked"] {
      color: var(--blocked);
    }
  }

  & .strip [data-mark] {
    inline-size: 10px;
    block-size: 18px;
  }

  & .strip [data-mark="blocked"] {
    inline-size: 11px;
    block-size: 11px;
  }

  & .strip [data-mark="deferred"] {
    border: 0;
    box-shadow: inset 0 0 0 1.5px var(--deferred);
  }

  & .legend [data-mark] {
    inline-size: 10px;
    block-size: 18px;
  }

  & .legend [data-mark="blocked"] {
    inline-size: 11px;
    block-size: 11px;
  }

  & ol.ledger > li > a {
    color: var(--acc);
    font-weight: 500;
  }

  & ul.ledger {
    font-size: 13px;

    & > li {
      padding: 13px 0;
      flex-wrap: nowrap;
      gap: 12px;
    }

    & code.who {
      display: inline-block;
      max-inline-size: 240px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: bottom;
      font: 500 13px var(--font-sans);
      color: var(--ink);
    }
  }
}

.columns {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  margin-top: 32px;

  & > section {
    flex: 3 1 520px;
    min-inline-size: 0;
    margin: 0;

    & + section {
      flex: 2 1 360px;
    }
  }

  & h2 {
    margin-bottom: 16px;
  }
}

/* A ledger list: an ink rule on top, hairlines between. */
ol.ledger,
ul.ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ink);

  & > li {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    align-items: baseline;

    & > b:first-child {
      font: 500 12px var(--font-mono);
      color: var(--acc);
      inline-size: 76px;
      flex: none;
    }

    & > span {
      flex: 1;
    }

    & > time {
      color: var(--mute);
      font: 400 12px var(--font-mono);
    }
  }
}

/* An agent's byline, as the trail and threads label it. */
mark[data-actor="agent"] {
  font: 500 12px var(--font-mono);
  background: var(--surf2);
  color: var(--ink);
  padding: 1px 6px;
  border-radius: 3px;
}

/* ── An application ── */

/* The title, the facts beside it, and the application's tabs. */
#app-main .app-head {
  margin-bottom: 8px;

  & > div {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
  }

  & hgroup {
    margin: 0;
  }

  & h1 {
    font-size: 56px;
    letter-spacing: -0.04em;
  }

  & dl {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    font-size: 13px;

    & dd {
      margin: 2px 0 0;
      font-family: var(--font-sans);

      & data {
        font-family: var(--font-mono);
      }
    }
  }

  & > nav {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 26px 0 0;
    border-bottom: 1px solid var(--line);

    & a {
      padding: 10px 0;
      color: var(--mute);

      &[aria-current="page"] {
        color: var(--ink);
        font-weight: 500;
        box-shadow: inset 0 -2px 0 var(--ink);
      }

      & data {
        font-family: var(--font-mono);
        margin-inline-start: 4px;
      }
    }
  }
}

@media (max-width: 720px) {
  #app-main .app-head h1 {
    font-size: 40px;
  }
}

.app-body {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  margin-top: 36px;

  & > section {
    flex: 999 1 700px;
    min-inline-size: 0;
    margin: 0;
  }

  & > aside {
    flex: 1 1 320px;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: 34px;

    & h2 {
      font-size: 18px;
      margin-bottom: 12px;
    }

    & > section {
      margin: 0;
    }
  }
}

/* The proportion bar and its counts. */
figure.tally {
  margin: 0;
  display: grid;
  gap: 12px;

  & > .bar {
    display: flex;
    gap: 2px;
    block-size: 14px;

    & > span:first-child { border-radius: 3px 0 0 3px }
    & > span:last-child { border-radius: 0 3px 3px 0 }
    & > [data-status="built"] { background: var(--built) }
    & > [data-status="partly_built"] { background: linear-gradient(to top, var(--part) 0 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--part) }
    & > [data-status="planned"] { box-shadow: inset 0 0 0 1.5px var(--mute) }
    & > [data-status="blocked"] { background: var(--blocked) }
    & > [data-status="deferred"] { box-shadow: inset 0 0 0 1.5px var(--deferred); background: repeating-linear-gradient(-45deg, transparent 0 4px, var(--deferred) 4px 5.5px) }
  }

  & > figcaption {
    font: 400 13px var(--font-sans);
    color: var(--mute);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);

    & > ul {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 28px;
      padding: 0;
      margin: 0;
      list-style: none;

      & > li {
        display: flex;
        align-items: center;
        gap: 8px;

        & > b {
          font-size: 20px;
          font-weight: 500;
          color: var(--ink);
        }
      }
    }
  }
}

/* The search, the view switch and the filters above the capabilities. */
.map-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 18px 0 8px;

  & input[type="search"] {
    flex: 1 1 260px;
    max-inline-size: 340px;
    height: 36px;
    padding: 0 12px;
  }

  & [role="group"] {
    margin-inline-start: auto;
    display: flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: 7px;

    & button {
      height: 30px;
      padding: 0 10px;
      font-size: 12px;
      border: 0;
      background: transparent;
      color: var(--mute);

      &[aria-pressed="true"] {
        background: var(--ink);
        color: var(--bg);
      }
    }
  }
}

nav.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;

  & > a,
  & > button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 13px;
    border-radius: 17px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    font: 500 13px var(--font-sans);

    &[aria-current="page"],
    &[aria-pressed="true"] {
      background: var(--ink);
      color: var(--bg);
      border-color: var(--ink);
    }

    & data {
      font-family: var(--font-mono);
      opacity: 0.7;
    }
  }
}

/* The named list: ID | name | serves | evidence, grouped by area. */
.caplist {
  overflow-x: auto;

  & > div {
    min-inline-size: 720px;
  }

  & .row,
  & a {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 190px 150px;
    gap: 16px;
    align-items: center;
    padding: 10px 8px;
    border-bottom: 1px solid var(--line);
  }

  & .row {
    border-bottom-color: var(--ink);
    padding-block: 6px;
  }

  & a:hover {
    background: var(--surf);
    color: var(--ink);
  }

  & a > span:first-child {
    font: 400 13px var(--font-mono);
  }

  & a > span:nth-child(2) {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    min-inline-size: 0;

    & [data-mark] {
      margin-top: 4px;
    }

    & b {
      font-weight: 500;
    }

    & small {
      display: block;
      font-size: 12px;
      color: var(--mute);
    }
  }

  & a > span:nth-child(3),
  & a > span:nth-child(4) {
    font-size: 13px;
    color: var(--mute);
  }

  & a > span[data-evidence="missing"] {
    color: var(--mute);
  }

  & a > span:nth-child(2) small {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  & a > span[data-evidence="video"],
  & a > span[data-evidence="screenshots"] {
    color: var(--ink);
  }

  & header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 22px 8px 10px;
    border-bottom: 1px solid var(--line);

    & > b {
      font: 500 20px var(--font-mono);
    }

    & > h2 {
      font-size: 18px;
    }

    & > data {
      margin-inline-start: auto;
      font: 400 12px var(--font-mono);
      color: var(--mute);
    }
  }
}

/* The compact view: one cell per capability, its name on hover. */
.capgrid {
  border-top: 1px solid var(--line);

  & > div {
    display: grid;
    grid-template-columns: 26px 210px minmax(0, 1fr) 56px;
    gap: 16px;
    align-items: center;
    padding: 8px 6px;
    border-bottom: 1px solid var(--line);

    & > b {
      font: 500 15px var(--font-mono);
    }

    & > data {
      font: 400 12px var(--font-mono);
      color: var(--mute);
      text-align: right;
    }

    & > span {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }
  }

  & a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 46px;
    block-size: 34px;
    border-radius: 4px;
    box-sizing: border-box;
    font: 500 12px var(--font-mono);
    color: var(--ink);
    box-shadow: inset 0 0 0 1.5px var(--mute);

    &[data-status="built"] { background: var(--built); color: var(--built-ink); box-shadow: none }
    &[data-status="partly_built"] { background: linear-gradient(to top, var(--part) 0 9px, transparent 9px); box-shadow: inset 0 0 0 1.5px var(--part); padding-bottom: 8px }
    &[data-status="blocked"] { background: var(--blocked); color: var(--blocked-ink); border-radius: 17px; box-shadow: none }
    &[data-status="deferred"] { box-shadow: none; border: 1.5px dashed var(--deferred); color: var(--mute) }

    &[data-video="true"]::after {
      content: "";
      position: absolute;
      top: 3px;
      right: 3px;
      inline-size: 6px;
      block-size: 6px;
      border-radius: 50%;
      background: var(--bg);
      box-shadow: 0 0 0 1.5px var(--ink);
    }
  }
}

@media (max-width: 720px) {
  .capgrid a {
    inline-size: 52px;
    block-size: 44px;
  }

  nav.area-cells a {
    inline-size: 44px;
    block-size: 44px;
  }

  .capgrid > div {
    grid-template-columns: 26px minmax(0, 1fr);

    & > span {
      grid-column: 1 / -1;
    }

    & > data {
      display: none;
    }
  }
}

/* What is left: each capability not built, with its reason. */
ul.left {
  display: grid;
  padding: 0;
  margin: 0;
  list-style: none;
  border-top: 1px solid var(--ink);

  & > li {
    display: grid;
    gap: 4px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);

    & > a {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    & > p {
      margin: 0;
      color: var(--mute);
      font-size: 13px;
    }
  }
}

ul.counts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  padding: 0;
  margin: 0 0 12px;
  list-style: none;

  & b {
    font-size: 20px;
    font-weight: 500;
    margin-inline-end: 6px;
  }

  & > li[data-blocking="true"] b {
    color: var(--blocked);
  }
}

/* ── A capability ── */

nav.area-cells {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 26px;

  & a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 38px;
    block-size: 28px;
    border-radius: 4px;
    box-sizing: border-box;
    font: 500 11px var(--font-mono);
    color: var(--ink);
    box-shadow: inset 0 0 0 1.5px var(--mute);

    &[data-status="built"] { background: var(--built); color: var(--built-ink); box-shadow: none }
    &[data-status="partly_built"] { background: linear-gradient(to top, var(--part) 0 7px, transparent 7px); box-shadow: inset 0 0 0 1.5px var(--part); padding-bottom: 6px }
    &[data-status="blocked"] { background: var(--blocked); color: var(--blocked-ink); border-radius: 14px; box-shadow: none }
    &[data-status="deferred"] { box-shadow: none; border: 1.5px dashed var(--deferred) }

    &[aria-current="page"] {
      font-weight: 700;
      outline: 2px solid var(--acc);
      outline-offset: 2px;
    }
  }

  & small {
    margin-inline-start: 10px;
    align-self: center;
    font: 400 12px var(--font-mono);
    color: var(--mute);
  }
}

#app-main #capability > header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 28px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--ink);

  & > b {
    font: 500 64px var(--font-mono);
    letter-spacing: -0.04em;
    line-height: 0.9;
  }

  & > div {
    flex: 1 1 400px;

    & h1 {
      font-size: 36px;
      letter-spacing: -0.03em;
      line-height: 1.1;
    }

    & p {
      margin: 6px 0 0;
      color: var(--mute);
    }
  }

  & > p {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;

    & mark[data-status] {
      height: 32px;
      padding: 0 12px;
      border-radius: 16px;
      font-size: 14px;
    }

    & > span {
      display: inline-flex;
      align-items: center;
      height: 32px;
      padding: 0 12px;
      border-radius: 16px;
      border: 1px solid var(--line);
      color: var(--mute);
    }
  }
}

.cap-body {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  margin-top: 30px;

  & > div {
    flex: 999 1 640px;
    min-inline-size: 0;
  }

  & > aside {
    flex: 1 1 380px;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;

    & > section {
      margin: 0;
    }

    & h2 {
      font-size: 18px;
    }
  }

  & .lbl {
    margin: 34px 0 10px;
  }
}

/* The recording, its build stamp, the screenshots, the criteria. */
#capability-evidence {
  & > .lbl:first-child {
    margin-top: 0;
  }

  & video {
    display: block;
    inline-size: 100%;
    aspect-ratio: 16 / 10;
    background: #101012;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px var(--line);
  }

  & figure {
    margin: 0;
  }

  & figure.video > figcaption {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    font: 400 12px var(--font-mono);
    color: var(--mute);
  }

  & .shots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 22px;

    & img {
      display: block;
      inline-size: 100%;
      aspect-ratio: 16 / 10;
      object-fit: cover;
      border: 1px solid var(--line);
      border-radius: 6px;
    }

    & figcaption {
      margin-top: 6px;
      font: 400 12px var(--font-mono);
      color: var(--mute);
    }
  }

  & ol.criteria {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--ink);

    & > li {
      display: grid;
      grid-template-columns: 28px 1fr auto auto;
      gap: 12px;
      padding: 14px 0;
      border-bottom: 1px solid var(--line);
      align-items: baseline;

      & > span:first-child {
        font-weight: 600;
        color: var(--mute);
      }

      &[data-ticked="true"] > span:first-child {
        color: var(--acc);
      }
    }
  }

  & ul.tests {
    list-style: none;
    margin: 0;
    padding: 0;
    font: 400 13px var(--font-mono);

    & li[data-test="passed"] b { color: var(--acc); font-weight: 400 }
    & li[data-test="failed"] b { color: var(--blocked); font-weight: 400 }
  }

  & dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 16px;
    align-items: baseline;
    margin-top: 20px;
    font-size: 13px;

    & dt,
    & dd {
      margin: 0;
      padding: 0;
      line-height: 1.5;
    }

    & dt {
      font: 500 11px/1.5 var(--font-mono);
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--mute);
    }
  }
}

@media (max-width: 720px) {
  #capability-evidence .shots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #app-main #capability > header > b {
    font-size: 44px;
  }
}

/* A box only Nullsoft sees. */
.nullsoft-only {
  background: var(--surf);
  padding: 14px 16px;
  border-radius: 8px;
  font: 400 13px var(--font-mono);

  & > p:first-child {
    margin: 0 0 8px;
  }

  & ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
}

/* The acceptance lead's sign-off. */
.sign-off {
  display: grid;
  gap: 12px;
  background: var(--surf);
  border-radius: 14px;
  padding: 22px;

  & fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  & fieldset label {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg);
    cursor: pointer;

    &:has(input:checked) {
      border-color: var(--acc);
      box-shadow: inset 0 0 0 1px var(--acc);
    }

    display: flex;
    gap: 12px;
    align-items: flex-start;
    min-block-size: 44px;

    & input {
      flex: none;
      inline-size: 20px;
      block-size: 20px;
      margin: 1px 0 0;
    }

    & b {
      display: block;
      font-size: 15px;
      font-weight: 600;
    }

    & small {
      display: block;
      color: var(--mute);
      font-size: 13px;
      font-weight: 400;
    }
  }

  & > label.tested {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    min-block-size: 44px;
    font-size: 14px;

    & input {
      flex: none;
      inline-size: 20px;
      block-size: 20px;
      margin: 1px 0 0;
    }
  }

  & > p.gate {
    color: var(--mute);
  }

  & > button:disabled {
    background: var(--surf2);
    color: var(--mute);
    cursor: not-allowed;
  }

  & > p {
    margin: 0;
    font-size: 13px;
    color: var(--mute);
  }

  & > p[data-signer] {
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--bg);
    color: var(--ink);
  }

  & > button {
    inline-size: 100%;
    height: 46px;
    border-radius: 8px;
    background: var(--acc);
    color: var(--acc-ink);
    font-size: 15px;
  }
}

/* Comment threads: answers under the comment they answer. */
ol.thread {
  display: grid;
  padding: 0;
  margin: 14px 0 0;
  list-style: none;
  border-top: 1px solid var(--ink);

  & li {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }

  & ol {
    list-style: none;
    padding-inline-start: 18px;
    margin: 8px 0 0;
    border-inline-start: 2px solid var(--line);

    & li:last-child {
      border-bottom: 0;
    }
  }

  & p {
    margin: 4px 0 0;
  }

  & li > p:first-child {
    font-size: 13px;
    margin: 0;

    & small {
      color: var(--mute);
    }
  }
}

/* A held agent comment: not posted until Nullsoft releases it (I5). */
ol.thread li[data-held] {
  color: var(--mute);

  & mark[data-held] {
    font: 500 11px var(--font-mono);
    letter-spacing: 0.05em;
    color: var(--blocked);
    background: none;
    border: 1px solid var(--blocked);
    padding: 1px 6px;
    border-radius: 4px;
  }
}

/* Which evidence a capability needs, chosen by Nullsoft (D9). */
p.evidence-kind {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 14px 0;

  & > .lbl {
    margin: 0 12px 0 0;
  }

  & button {
    min-block-size: 32px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: none;
    color: var(--mute);
  }

  & button:nth-of-type(1) { border-radius: 6px 0 0 6px }
  & button:nth-of-type(2) { border-radius: 0 6px 6px 0; border-inline-start: 0 }

  & button[aria-pressed="true"] {
    color: var(--ink);
    background: var(--surf2);
  }

  & button[aria-pressed="true"]::before {
    content: "✓ ";
  }
}

p[data-evidence="missing"] {
  border-inline-start: 3px solid var(--blocked);
  padding-inline-start: 10px;
}

[id^="thread-"] textarea {
  margin-top: 14px;
}

/* ── Acceptance ── */

table.acceptance td:last-child {
  & select,
  & input {
    inline-size: auto;
    height: 34px;
    padding: 0 10px;
    margin: 0 6px 6px 0;
  }
}

.sign-with-code {
  display: grid;
  gap: 12px;
  max-inline-size: 460px;
  padding: 18px;
  border-radius: 12px;
  background: var(--surf);

  & p {
    margin: 0;
    color: var(--mute);
  }
}

/* ── Agents, the review queue and the trail ── */

table.activity pre {
  margin: 6px 0 0;
  padding: 7px 10px;
  border-radius: 6px;
  background: var(--del-bg);

  & + pre {
    background: var(--add-bg);
  }
}

#new-key code {
  font-size: 14px;
  user-select: all;
}

#import textarea {
  font: 400 12px var(--font-mono);
}

form.upload {
  display: grid;
  gap: 12px;
  max-inline-size: 560px;
}

[data-video="true"] {
  font: 500 12px var(--font-mono);
  color: var(--acc);
  white-space: nowrap;
}

/* Read by screen readers, not shown. */
.sr {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* A link that does what a button does, styled as one. */
a[data-button] {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border-radius: 6px;
  font: 500 13px var(--font-sans);
  border: 1px solid var(--line);
  color: var(--ink);

  &[data-button="accent"] {
    border: 0;
    background: var(--acc);
    color: var(--acc-ink);
  }
}

#app-main .app-head {
  & > div > h1 {
    font-size: 56px;
    letter-spacing: -0.04em;
  }

  & dd {
    font-family: var(--font-sans);
  }

  & > nav a[data-tab="beam.tab.agents"] data {
    color: var(--acc);
  }

  & > nav a data {
    color: var(--mute);
  }
}

/* The decisions the owners hold: id, question, what waits on it. */
ul.decisions {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ink);
  font-size: 13px;

  & > li {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);

    & small {
      display: block;
      color: var(--mute);
      font-size: 13px;

      & a {
        color: var(--mute);
      }

      & small.id {
        display: inline;
        font: 400 11px var(--font-mono);
      }
    }
  }
}

/* Open requests and defects: ref, capability and state, then the title. */
ul.requests {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ink);
  font-size: 13px;

  & > li {
    padding: 11px 0;
    border-bottom: 1px solid var(--line);

    & > p {
      display: flex;
      gap: 8px;
      margin: 0 0 3px;
      font: 400 12px var(--font-mono);

      & small {
        color: var(--mute);
        font-size: 12px;
      }

      & small:last-child {
        margin-inline-start: auto;
      }
    }
  }
}

/* Nullsoft's panel for keeping the register current. */
section.keep {
  background: var(--surf);
  border-radius: 12px;
  padding: 18px;
  font-size: 13px;

  & h2 {
    font-size: 15px;
    margin: 0 0 6px;
  }

  & > p {
    margin: 0 0 12px;
    color: var(--mute);
  }

  & .actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    color: inherit;
  }

  & details {
    margin-top: 12px;

    & summary {
      cursor: pointer;
      color: var(--mute);
    }

    & > div {
      display: grid;
      gap: 8px;
      margin-top: 10px;
    }
  }
}

.lbl .file {
  text-transform: none;
}

/* The marks under a recording, one at each criterion's moment. */
.timeline {
  position: relative;
  block-size: 4px;
  margin-top: 12px;
  border-radius: 2px;
  background: var(--line);

  & > span {
    position: absolute;
    inset-block-start: -4px;
    inline-size: 2px;
    block-size: 12px;
    background: var(--acc);
  }
}

#capability-evidence ol.criteria data {
  font: 400 12px var(--font-mono);
  color: var(--acc);
}

[id^="thread-"] > header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;

  & data {
    font: 400 12px var(--font-mono);
    color: var(--mute);
  }
}

[id^="thread-"] .post {
  display: flex;
  justify-content: flex-end;
  margin: 8px 0 0;
}

mark[data-status]::before {
  border-radius: 0;
}

/* Nullsoft's review of an application's agents: the queue and the trail,
   then the tokens. */
#agents > .split {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;

  & > section {
    flex: 1 1 520px;
    min-inline-size: 0;
    margin: 0;
  }

  & > section > header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;

    & h1,
    & h2 {
      font-size: 36px;
      letter-spacing: -0.03em;
    }

    & small {
      font: 400 13px var(--font-mono);
      color: var(--mute);
      margin-inline-end: auto;
    }
  }

  & h2 {
    margin: 40px 0 12px;
  }

  & > section > header h2 {
    margin: 0;
  }

  & .empty {
    color: var(--mute);
  }

  & code.who {
    font: 400 12px var(--font-mono);
    background: var(--surf2);
    padding: 1px 6px;
    border-radius: 3px;
    max-inline-size: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: bottom;
  }
}

#agents .queue {
  display: grid;
  gap: 14px;
  margin-top: 22px;

  & > article {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px;

    &:not([data-held="held"]) {
      opacity: 0.55;
    }

    & > header {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: baseline;

      & time {
        margin-inline-start: auto;
        font: 400 12px var(--font-mono);
        color: var(--mute);
      }

      & > b {
        flex-basis: 100%;
        font-size: 15px;
      }

      & > small.call {
        flex-basis: 100%;
        font: 400 12px var(--font-mono);
        color: var(--mute);
        overflow-wrap: anywhere;
      }
    }

    & .diff {
      display: grid;
      gap: 4px;
      margin-top: 12px;
    }

    & pre {
      margin: 0;
      padding: 7px 10px;
      border-radius: 6px;
      white-space: pre-wrap;
      font: 400 12px var(--font-mono);

      & del,
      & ins {
        text-decoration: none;
      }

      &:has(del) {
        background: var(--del-bg);
        color: var(--blocked);
      }

      &:has(ins) {
        background: var(--add-bg);
        color: var(--acc);
      }
    }

    & footer {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
      align-items: center;

      & details.inline-edit[open] {
        flex-basis: 100%;
      }

      & small {
        font: 400 12px var(--font-mono);
        color: var(--mute);
      }
    }
  }
}

#agents ol.trail {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ink);
  font-size: 13px;

  & > li {
    display: grid;
    grid-template-columns: 46px 170px minmax(0, 1fr) 40px;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
    align-items: baseline;

    & time,
    & small {
      font: 400 12px var(--font-mono);
      color: var(--mute);
    }

    & small {
      text-align: end;
    }
  }
}

#agents ul.tokens {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  border-top: 1px solid var(--ink);

  & > li {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13px;

    & > code {
      font: 500 14px var(--font-mono);
    }

    & > span.token-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      margin-inline-start: auto;
    }

    & > small {
      flex-basis: 100%;
      color: var(--mute);
      font-size: 13px;
    }
  }
}

/* Requests across applications: the filters, then one row per request. */
#requests-across {
  & .filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 22px 0 14px;

    & label {
      display: grid;
      gap: 4px;
      font: 500 11px var(--font-mono);
      letter-spacing: 0.05em;
      color: var(--mute);
    }

    & select {
      inline-size: auto;
      min-inline-size: 160px;
    }
  }

  & table.across td small {
    display: block;
    color: var(--mute);
  }
}

#agents[data-across] h3 {
  margin: 22px 0 8px;
  font-size: 14px;

  & small {
    color: var(--mute);
    font-weight: 400;
    margin-inline-start: 6px;
  }
}

/* ── Slices and estimate (Nullsoft only) ── */

/* A slice type is a shape as well as a colour: a triangle for a state
   change, a framed box for a state view, a diamond for an automation, two
   arrows for a translation. */
svg[data-slice] {
  flex: none;
  fill: none;
  stroke-width: 1.6;

  &[data-slice="state_change"] path { fill: var(--slice-sc) }
  &[data-slice="state_view"] { stroke: var(--slice-sv) }
  &[data-slice="automation"] path { fill: var(--slice-au) }
  &[data-slice="translation"] { stroke: var(--slice-tr) }
}

/* A capability's two tabs, for Nullsoft. */
nav.cap-tabs {
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 7px;

  & a {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 10px;
    border-radius: 5px;
    color: var(--mute);
    font: 500 12px var(--font-sans);

    &[aria-current="page"] {
      background: var(--ink);
      color: var(--bg);
    }
  }
}

#capability[data-tab="slices"] {
  & .cap-body > section.slices {
    flex: 999 1 640px;
    min-inline-size: 0;
    margin: 0;

    & > header {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;

      & h2 {
        margin: 0;
        font-size: 20px;

        & data {
          font: 400 14px var(--font-mono);
          color: var(--mute);
        }
      }
    }

    & > p {
      margin: 6px 0 14px;
      color: var(--mute);
      font-size: 13px;
    }
  }
}

ul.slice-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--mute);

  & li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
}

table.slices {
  inline-size: 100%;
  table-layout: fixed;
  border-collapse: collapse;

  & th:nth-child(1) { inline-size: 150px }
  & th:nth-child(4) { inline-size: 120px }
  & th:nth-child(5) { inline-size: 80px }

  & thead th {
    padding: 8px 6px;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--line);
    font: 500 11px var(--font-mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mute);
    text-align: start;
  }

  & tbody td {
    padding: 12px 6px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    font-size: 13px;
  }

  & tbody tr:hover td {
    background: var(--surf);
  }

  & code {
    font: 400 12px var(--font-mono);
    color: var(--mute);
    background: none;
    padding: 0;
    overflow-wrap: anywhere;
  }

  & .slice-type,
  & .slice-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  & .slice-status [data-mark] {
    inline-size: 10px;
    block-size: 10px;
  }

  & tr.slice-edit td {
    background: var(--surf);
  }

  & tr.slice-edit input,
  & tr.slice-edit select {
    height: 32px;
    inline-size: 100%;
  }

  & tr.slice-edit td:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
}

.add-slice {
  margin-top: 18px;
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: 10px;

  & .lbl {
    margin: 0 0 10px;
  }

  & > div {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;

    & label {
      display: grid;
      gap: 4px;
      font-size: 12px;
      color: var(--mute);
    }

    & input,
    & select {
      height: 36px;
    }
  }

  & > p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 12px 0 0;

    & small {
      font-size: 12px;
      color: var(--mute);
    }
  }
}

section.estimate {
  background: var(--surf);
  border-radius: 14px;
  padding: 22px;

  & > header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;

    & h2 {
      margin: 0;
    }

    & small {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font: 400 11px var(--font-mono);
      color: var(--mute);
    }
  }

  & > p {
    margin: 4px 0 16px;
    color: var(--mute);
    font-size: 13px;
  }

  & table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 13px;

    & thead th {
      padding: 0 0 8px;
      font: 500 11px var(--font-mono);
      letter-spacing: 0.05em;
      color: var(--mute);
      text-align: end;

      &:first-child {
        text-align: start;
      }
    }

    & tbody td,
    & tbody th {
      padding: 9px 0;
      border-top: 1px solid var(--line);
      text-align: end;
      font-family: var(--font-mono);
      font-weight: 400;

      &:first-child {
        text-align: start;
        font-family: var(--font-sans);
      }
    }

    & td:nth-child(3) {
      color: var(--mute);
    }

    & tr.cost > * {
      border-top-color: var(--ink);
      font-weight: 500;
      padding: 10px 0;
    }

    & tr.price > * {
      border-top: 0;
      padding: 4px 0;
      font-weight: 500;

      &:last-child {
        font-size: 18px;
      }
    }
  }

  & dl.actual {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    margin: 16px 0 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--bg);
    font-size: 13px;

    & dt:nth-of-type(2) {
      color: var(--mute);
    }

    & dd {
      margin: 0;
      font-family: var(--font-mono);
      text-align: end;
    }

    & dd[data-variance="over"] {
      color: var(--blocked);
    }

    & dd[data-variance="under"] {
      color: var(--acc);
    }
  }

  & p.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 14px 0 0;

    & a {
      display: inline-flex;
      align-items: center;
      height: 36px;
      padding: 0 14px;
      border: 1px solid var(--line);
      border-radius: 6px;
      color: var(--ink);
      font: 500 13px var(--font-sans);
    }

    & label {
      display: grid;
      gap: 4px;
      font-size: 12px;
      color: var(--mute);

      & input {
        inline-size: 90px;
        height: 36px;
      }
    }
  }
}

ol.estimate-history {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ink);
  font-size: 13px;

  & li {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);

    & data {
      font-family: var(--font-mono);
      color: var(--mute);
    }

    & small {
      display: block;
      color: var(--mute);
      font-size: 13px;
    }

    & b {
      font: 400 13px var(--font-mono);
    }
  }
}

/* ── Pricing, calibration and costs (Nullsoft only) ── */

#app-header a.header-link {
  font-size: 13px;
  color: var(--acc);
}

:is(#pricing, #calibration) {
  & > .lbl {
    margin: 0 0 8px;
  }

  & > h1 {
    margin: 0 0 26px;
    font-size: 48px;
    letter-spacing: -0.035em;
    line-height: 1;
  }

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

#calibration > h1 {
  margin-bottom: 8px;
}

#calibration > p.lede {
  margin: 0 0 24px;
  color: var(--mute);
  max-inline-size: 720px;
}

dl.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin: 0 0 30px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);

  & > div {
    padding: 16px 16px 16px 0;
  }

  & dt {
    font: 500 11px var(--font-mono);
    letter-spacing: 0.05em;
    color: var(--mute);
  }

  & dd {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--mute);
  }

  & dt + dd {
    margin-top: 6px;
    font: 400 26px var(--font-mono);
    letter-spacing: -0.02em;
    color: var(--ink);
  }
}

[data-variance="over"] { color: var(--blocked) !important }
[data-variance="under"] { color: var(--acc) !important }

div.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;

  & button {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 13px;
    border-radius: 17px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    font: 500 13px var(--font-sans);

    &[aria-pressed="true"] {
      background: var(--ink);
      color: var(--bg);
      border-color: var(--ink);
    }
  }

  & small {
    align-self: center;
    margin-inline-start: 8px;
    font-size: 12px;
    color: var(--mute);
  }
}

table.pricing {
  inline-size: 100%;
  min-inline-size: 1040px;
  border-collapse: collapse;
  font-size: 14px;

  & th,
  & td {
    padding: 12px 6px;
    border-bottom: 1px solid var(--line);
    text-align: end;
    font-family: var(--font-mono);
    font-weight: 400;
  }

  & :is(thead th, tbody td):nth-child(-n+2),
  & tfoot :is(th, td):first-child {
    text-align: start;
  }

  & thead th {
    padding: 9px 6px;
    border-top: 1px solid var(--ink);
    font: 500 11px var(--font-mono);
    letter-spacing: 0.05em;
    color: var(--mute);
  }

  & tbody td:first-child {
    font-family: var(--font-sans);
    font-weight: 500;

    & a {
      color: var(--ink);
    }

    & small.id {
      margin-inline-end: 6px;
      font: 400 12px var(--font-mono);
      color: var(--mute);
    }
  }

  & a.estimate-link {
    font: 500 13px var(--font-sans);
    color: var(--acc);
  }

  & tbody tr:hover td {
    background: var(--surf);
  }

  & span.count {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-inline-end: 8px;
    font: 500 12px var(--font-mono);

    & svg {
      inline-size: 11px;
      block-size: 11px;
    }
  }

  & tr.shared td {
    color: var(--mute);

    &:nth-child(2) {
      font-family: var(--font-sans);
    }

    & small {
      font-size: 12px;
    }
  }

  & tr.total > * {
    border-top: 1px solid var(--ink);
    border-bottom: 0;
    font-weight: 500;
  }

  & tr.total th {
    font-family: var(--font-sans);
    text-align: start;
  }

  & + p small {
    font-size: 12px;
    color: var(--mute);
  }

  &.across td:first-child {
    font-family: var(--font-sans);

    & a {
      color: var(--ink);
      font-weight: 500;
    }

    & small {
      color: var(--mute);
      margin-inline-start: 6px;
    }
  }
}

#costs-across > hgroup {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 22px;

  & a {
    color: var(--acc);
    font-size: 13px;
  }
}

ul.calibration-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--mute);

  & li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  & [data-key="range"] { inline-size: 18px; block-size: 2px; background: var(--mute) }
  & [data-key="median"] { inline-size: 3px; block-size: 12px; background: var(--ink) }
  & [data-key="rate"] { inline-size: 2px; block-size: 14px; background: var(--blocked) }
  & [data-key="suggested"] { inline-size: 9px; block-size: 9px; transform: rotate(45deg); background: var(--acc) }
}

table.calibration {
  inline-size: 100%;
  min-inline-size: 980px;
  border-collapse: collapse;
  font-size: 14px;

  & th,
  & td {
    padding: 14px 6px;
    border-bottom: 1px solid var(--line);
    text-align: end;
    font-family: var(--font-mono);
    font-weight: 400;
  }

  & :is(th, td):nth-child(-n+2) {
    text-align: start;
  }

  & th:nth-child(1) { inline-size: 170px }
  & th:nth-child(3) { inline-size: 110px }
  & th:nth-child(4) { inline-size: 130px }
  & th:nth-child(5) { inline-size: 120px }
  & th:nth-child(6) { inline-size: 140px }

  & thead th {
    padding: 9px 6px;
    border-top: 1px solid var(--ink);
    font: 500 11px var(--font-mono);
    letter-spacing: 0.05em;
    color: var(--mute);
  }

  & td:first-child {
    font-family: var(--font-sans);
  }

  & td:nth-child(4) {
    color: var(--mute);
  }

  & .slice-type {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  & .track {
    position: relative;
    block-size: 18px;

    & span {
      position: absolute;
    }

    & [data-key="range"] { top: 8px; block-size: 2px; background: var(--mute) }
    & [data-key="median"] { top: 3px; inline-size: 3px; block-size: 12px; background: var(--ink); border-radius: 1px }
    & [data-key="rate"] { top: 0; inline-size: 0; block-size: 18px; border-inline-start: 2px dashed var(--ink) }
    & [data-key="suggested"] { top: 4px; inline-size: 10px; block-size: 10px; margin-inline-start: -5px; transform: rotate(45deg); background: var(--acc) }
    & [data-key="suggested"][data-provisional="true"] { background: var(--bg); box-shadow: inset 0 0 0 2px var(--acc) }
  }

  & + p small {
    font-size: 12px;
    color: var(--mute);
  }
}

nav.orgs {
  display: flex;
  gap: 14px;
  margin: 0 0 18px;
  font-size: 13px;

  & a {
    color: var(--mute);

    &[aria-current="page"] {
      color: var(--ink);
      box-shadow: inset 0 -2px 0 var(--ink);
    }
  }
}

section.pricing-settings {
  margin-top: 52px;
  padding-top: 26px;
  border-top: 1px solid var(--ink);

  & > header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;

    & h2 {
      margin: 0;
      font-size: 28px;
      letter-spacing: -0.03em;
    }

    & small {
      font-size: 12px;
      color: var(--mute);
    }
  }

  & .fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    margin-top: 22px;

    &.rates {
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
      margin-top: 0;
    }
  }

  & > .lbl {
    margin: 30px 0 10px;
  }

  & .field {
    & label {
      display: block;
      margin-bottom: 6px;
      font-size: 13px;
    }

    & input {
      inline-size: 100%;
      height: 36px;
      box-sizing: border-box;
      font: 500 14px var(--font-mono);
      text-align: end;
    }

    & p {
      margin: 6px 0 0;
      font-size: 12px;
      color: var(--mute);
    }

    & p data {
      font: 500 16px var(--font-mono);
      color: var(--ink);
    }
  }

  & p.actions {
    display: flex;
    gap: 10px;
    margin-top: 22px;
  }
}

/* An application's costs, on its agents page. */
section.costs {
  margin: 0 0 40px;

  & > header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;

    & h2 {
      margin: 0;
      font-size: 36px;
      letter-spacing: -0.03em;
    }

    & p {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0;
    }

    & a {
      display: inline-flex;
      align-items: center;
      height: 36px;
      padding: 0 14px;
      border: 1px solid var(--line);
      border-radius: 6px;
      color: var(--ink);
      font: 500 13px var(--font-sans);
    }
  }

  & .add-cost {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px 14px;
    align-items: end;
    margin-top: 16px;
    padding: 16px;
    border: 1px dashed var(--line);
    border-radius: 10px;

    & h3 {
      grid-column: 1 / -1;
      margin: 0;
      font-size: 14px;
    }

    & label {
      display: grid;
      gap: 4px;
      font-size: 12px;
      color: var(--mute);
    }
  }
}

dl.cost-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 22px 0 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);

  & > div {
    padding: 14px 0;
  }

  & dt {
    font: 500 11px var(--font-mono);
    letter-spacing: 0.05em;
    color: var(--mute);
  }

  & dd {
    margin: 0;
    font: 400 12px var(--font-mono);
    color: var(--mute);
  }

  & dt + dd {
    margin-top: 4px;
    font: 500 26px var(--font-sans);
    letter-spacing: -0.03em;
    color: var(--ink);
  }
}

figure.cost-chart {
  margin: 22px 0 0;

  & ul {
    display: flex;
    gap: 16px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    font-size: 12px;
    color: var(--mute);

    & li {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    & span {
      inline-size: 10px;
      block-size: 10px;
    }
  }

  & [data-key="ai"] { background: var(--acc) }
  & [data-key="hosting"] { background: var(--ink) }

  & .bars {
    display: grid;
    gap: 18px;
    align-items: end;
    block-size: 190px;
    border-bottom: 1px solid var(--ink);

    & > div {
      display: flex;
      flex-direction: column;
      gap: 2px;

      & > span:first-child {
        margin-bottom: 4px;
        font: 400 12px var(--font-mono);
        text-align: center;
      }

      & [data-key="ai"] {
        border-radius: 3px 3px 0 0;
      }
    }
  }

  & .labels {
    display: grid;
    gap: 18px;
    margin-top: 8px;

    & span {
      font: 400 12px var(--font-mono);
      text-align: center;
      color: var(--mute);
    }
  }
}

/* Read by screen readers, not shown. */
.visually-hidden {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

main#app-main :is(#pricing, #calibration) > h1 {
  margin: 0 0 26px;
}

main#app-main #calibration > h1 {
  margin-bottom: 8px;
}

section.estimate table tbody th,
section.estimate dl.actual dt {
  font: 500 13px var(--font-sans);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
}

section.estimate dl.actual dt {
  font-weight: 400;

  &:nth-of-type(2) {
    color: var(--mute);
  }
}

section.estimate table tr.price > *,
section.estimate table tr.price + * > * {
  border-bottom: 0;
}

table.pricing {
  & thead th:nth-child(2) { inline-size: 130px }
  & thead th:nth-child(3),
  & thead th:nth-child(4),
  & thead th:nth-child(6) { inline-size: 110px }
  & thead th:nth-child(5) { inline-size: 90px }
  & thead th:nth-child(7) { inline-size: 90px }

  & tr.shared td:first-child {
    white-space: nowrap;
  }
}

table.calibration td {
  vertical-align: middle;
}

:is(table.slices, table.calibration) .slice-type,
ul.slice-legend li {
  & span {
    font-family: var(--font-sans);
  }
}

#agents > .split > section > section.costs {
  margin: 0 0 40px;
}

#agents > .split section.costs > header h2 {
  margin: 0;
}

/* ── Acceptance: where it stands, the lead's two steps, every outcome ── */

p.lede {
  max-inline-size: 70ch;
  margin: 16px 0 24px;
  color: var(--mute);
  font-size: 15px;
  line-height: 1.5;
}

dl.facts-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin: 0 0 16px;

  & > div {
    display: grid;
    gap: 4px;
  }

  & dt {
    font: 500 11px var(--font-mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mute);
  }

  & dd {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font: 400 15px var(--font-mono);
  }
}

mark[data-window] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border-radius: 12px;
  font: 500 12px var(--font-sans);
  color: var(--ink);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);

  &::before {
    content: "○";
    inline-size: auto;
    block-size: auto;
    background: none;
    border-radius: 0;
  }

  &[data-window="open"] {
    box-shadow: inset 0 0 0 1.5px var(--acc);

    &::before { content: "●"; color: var(--acc) }
  }

  &[data-window="closed"]::before { content: "✓" }
}

p.tally {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 0 0 32px;
  padding: 14px 0;
  border-block: 1px solid var(--line);
  font-size: 14px;
  color: var(--mute);

  & > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
}

.step {
  display: inline-grid;
  place-items: center;
  inline-size: 26px;
  block-size: 26px;
  margin-inline-end: 8px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  font: 600 13px var(--font-mono);
  vertical-align: 3px;
}

section.decide {
  padding: 22px;
  border-radius: 14px;
  background: var(--surf);

  & > h2 {
    margin: 0;
  }
}

ol.decisions-list {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;

  & > li {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
    background: var(--bg);
    border: 1px solid var(--line);
  }

  & header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;

    & > a:first-child {
      font-weight: 500;
      font-size: 16px;
    }

    & a.watch {
      margin-inline-start: auto;
      color: var(--acc);
      font-size: 14px;
    }
  }

  & label.note {
    display: grid;
    gap: 6px;
    font-size: 13px;
    color: var(--mute);
  }
}

fieldset.verdicts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;

  & label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-block-size: 48px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;

    & input {
      inline-size: 20px;
      block-size: 20px;
      margin: 0;
    }

    &:has(input:checked) {
      border-color: var(--ink);
      box-shadow: inset 0 0 0 1px var(--ink);
    }

    &[data-outcome="accepted"]:has(input:checked) { border-color: var(--built); box-shadow: inset 0 0 0 1px var(--built) }
    &[data-outcome="not_accepted"]:has(input:checked) { border-color: var(--blocked); box-shadow: inset 0 0 0 1px var(--blocked) }
  }
}

section.decide .sign-off {
  padding: 0;
  background: none;

  & p.signer {
    margin: 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--bg);
    color: var(--ink);
    font-size: 14px;
  }

  & label.tested {
    display: flex;
    align-items: center;
    gap: 12px;
    min-block-size: 48px;
    font-size: 14px;
    color: var(--ink);
    cursor: pointer;

    & input {
      inline-size: 20px;
      block-size: 20px;
      margin: 0;
      flex: none;
    }
  }
}

ul.outcomes {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink);

  & > li {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) 150px minmax(0, 1.6fr);
    align-items: center;
    gap: 8px 20px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }

  & span.outcome {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;

    & small {
      color: var(--mute);
      font-size: 13px;
    }

    & a {
      color: var(--acc);
      font-size: 13px;
    }
  }
}

section.certificate p.downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

section.certificate > p:has(> mark) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 12px 0 0;
  color: var(--mute);
}

fieldset.verdicts label {
  font-weight: 500;
  font-size: 15px;
}

ol.decisions-list header a small.id,
small.id {
  white-space: nowrap;
}

a.button.secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}

@media (max-width: 720px) {
  fieldset.verdicts {
    grid-template-columns: 1fr;
  }

  ul.outcomes > li {
    grid-template-columns: 1fr auto;

    & span.outcome {
      grid-column: 1 / -1;
    }
  }

  section.decide {
    padding: 16px;
    margin-inline: -4px;
  }
}

/* ── The header on a phone: one row, the rest behind the account ── */

#app-header .narrow {
  display: none;
}

@media (max-width: 720px) {
  #app-header > div {
    flex-wrap: wrap;
    gap: 0 12px;
    padding-block: 6px;
    min-block-size: 56px;
  }

  #app-header a[aria-label="Beam"] {
    min-block-size: 44px;
  }

  #app-header nav.crumbs {
    flex: 1 1 0;
    min-inline-size: 0;
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;

    & > * {
      flex: none;
    }

    & > :last-child {
      flex: 1 1 auto;
      min-inline-size: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    & a {
      display: inline-flex;
      align-items: center;
      min-block-size: 44px;
    }
  }

  #app-header nav:not(.crumbs) {
    order: 3;
    flex: 1 0 100%;
    flex-wrap: wrap;
    gap: 0 20px;

    & a {
      display: inline-flex;
      align-items: center;
      min-block-size: 44px;
      padding: 0;
      white-space: nowrap;
    }
  }

  #app-header menu {
    flex-wrap: nowrap;
    gap: 8px;

    & > li.wide {
      display: none;
    }
  }

  #app-header mark[data-only] {
    padding: 4px 6px;
    font-size: 0;

    &::before {
      font-size: 11px;
    }
  }

  #app-header details.account {
    & > summary {
      inline-size: 44px;
      block-size: 44px;
    }

    & > div {
      position: fixed;
      inset-inline: 12px;
      inset-block-start: 62px;
      min-inline-size: 0;
      gap: 14px;
      padding: 16px;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    }
  }

  #app-header .narrow {
    display: grid;
    gap: 12px;

    & menu {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    & menu:empty {
      display: none;
    }

    & [role="group"] {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: 1fr;

      & button {
        min-block-size: 44px;
        justify-content: center;
      }
    }

    & input[type="search"] {
      min-block-size: 44px;
      inline-size: 100%;
    }

    & a.header-link {
      display: inline-flex;
      align-items: center;
      min-block-size: 44px;
    }
  }
}

/* Touch: every control a fingertip can hit. */
@media (pointer: coarse), (max-width: 720px) {
  button,
  a.button,
  select,
  input:not([type="checkbox"], [type="radio"]),
  summary {
    min-block-size: 44px;
  }

  button.small,
  button.ghost {
    min-block-size: 44px;
    min-inline-size: 44px;
  }

  input[type="checkbox"],
  input[type="radio"] {
    inline-size: 20px;
    block-size: 20px;
  }
}

@media (max-width: 720px) {
  /* The application's tabs: one row that scrolls, never two. */
  #app-main .app-head > nav {
    flex-wrap: wrap;
    gap: 0 20px;
    margin-top: 18px;

    & a {
      flex: none;
      display: inline-flex;
      align-items: center;
      min-block-size: 44px;
      padding: 0;
      white-space: nowrap;
    }
  }

  #app-main .app-head dl {
    gap: 8px 20px;
  }
}

ul.outcomes > li > mark,
ul.outcomes > li > :is(mark[data-status]) {
  justify-self: start;
}

#acceptance section > h2,
#acceptance section.certificate > h2 {
  margin-bottom: 14px;
}

@media (max-width: 720px) {
  /* On a phone the trail keeps where you are, not how you got there. */
  #app-header nav.crumbs {
    align-items: center;

    & > a:first-child,
    & > a:first-child + span {
      display: none;
    }
  }
}

/* ── The activity log: one sentence a change ── */

ol.activity-log {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);

  & > li {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);

    & > p {
      margin: 0;
      font-size: 14px;
      line-height: 1.45;
    }

    & b {
      font-weight: 500;
    }

    & .subject {
      color: var(--ink);
    }

    & mark[data-actor="agent"] {
      margin-inline-end: 6px;
      padding: 1px 6px;
      border-radius: 4px;
      background: var(--surf2);
      color: var(--ink);
      font: 500 11px var(--font-mono);
    }

    & small {
      color: var(--mute);
      font-size: 12px;
    }

    & small.count {
      margin-inline-start: 6px;
      font-family: var(--font-mono);
    }

    & details {
      margin-top: 6px;

      & summary {
        font-size: 12px;
        color: var(--mute);
        cursor: pointer;
      }
    }
  }
}

/* Shown only where the page is narrow. */
.narrow-only {
  display: none !important;
}

@media (max-width: 720px) {
  .narrow-only {
    display: inline-flex !important;
  }

  a.button.narrow-only {
    inline-size: 100%;
    justify-content: center;
  }

  a.button.narrow-only:not(.secondary) {
    background: var(--acc);
    color: var(--acc-ink);
  }

  span.narrow-only {
    display: inline !important;
  }
}

.sign-off p.caution {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--part);
  color: var(--ink);
  font-size: 13px;
}

.sign-off label.note {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--mute);
}

details.recent {
  margin-top: 34px;

  & > summary {
    cursor: pointer;
    min-block-size: 44px;
    display: flex;
    align-items: center;
    gap: 8px;

    & data {
      font-family: var(--font-mono);
    }
  }
}

ol.thread p.held-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;

  & input {
    flex: 1 1 180px;
    min-inline-size: 0;
  }
}

/* ── Tables on a phone: every row a stacked block, every value labelled ──
   No column is ever hidden or clipped: the first cell names the row across
   the top, the rest follow, each under its own label. */
@media (max-width: 720px) {
  #app-main .scroll {
    overflow: visible;
  }

  #app-main table:not([data-keep]) {
    display: block;
    inline-size: 100%;
    min-inline-size: 0;
    border-collapse: separate;

    & thead {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      overflow: hidden;
      clip-path: inset(50%);
    }

    & tbody,
    & tfoot {
      display: block;
    }

    & tr {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px 16px;
      padding: 14px 0;
      border-bottom: 1px solid var(--line);
    }

    & tr:first-child {
      border-top: 1px solid var(--ink);
    }

    & :is(td, th) {
      display: block;
      padding: 0;
      border: 0;
      white-space: normal;
      text-align: start !important;
      inline-size: auto !important;
      min-inline-size: 0;
      overflow-wrap: anywhere;
    }

    & tr > :first-child,
    & tr > :nth-child(2):is([colspan]) {
      grid-column: 1 / -1;
    }

    & td[data-label]::before {
      content: attr(data-label);
      display: block;
      margin-bottom: 2px;
      font: 500 10px var(--font-mono);
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--mute);
    }

    & td:empty {
      display: none;
    }
  }

  /* The first cell of a row is its name: no label, a little larger. */
  #app-main table:not([data-keep]) tr > td:first-child::before {
    display: none;
  }

  #app-main table:not([data-keep]) tr > td:first-child {
    font-size: 15px;
  }

  .caplist {
    overflow: visible;

    & > div {
      min-inline-size: 0;
    }

    & .row {
      display: none;
    }

    & a {
      grid-template-columns: 34px minmax(0, 1fr);
      gap: 4px 10px;
      padding: 12px 4px;

      & > span:nth-child(3),
      & > span:nth-child(4) {
        grid-column: 2;
        font-size: 13px;
      }

      & > span:nth-child(3):empty {
        display: none;
      }
    }
  }
}

/* What waits for you: each row one tap. */
ol.ledger.needs > li {
  padding: 0;
  display: block;

  & > a {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 20px;
    min-block-size: 48px;
    padding: 14px 4px;
    color: var(--ink);
    font-weight: 400;

    &:hover {
      background: var(--surf);
    }

    & > b {
      flex: none;
      inline-size: 96px;
      font: 500 12px var(--font-mono);
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: var(--acc);
    }

    & > span:not(.cta) {
      flex: 1 1 240px;
    }

    & > .cta {
      color: var(--acc);
      font-weight: 500;
      white-space: nowrap;
    }
  }
}

section.needs-first,
section.app-needs {
  margin: 8px 0 36px;

  & h2 {
    margin-bottom: 12px;
  }
}

@media (max-width: 720px) {
  ol.ledger.needs > li > a > b {
    inline-size: auto;
    flex-basis: 100%;
  }

  /* The stages as eight segments; where you are, in words above them. */
  p.stage-now {
    display: block !important;
    margin: 20px 0 8px;
    font-size: 15px;
  }

  ol.stages {
    margin-top: 0;
    gap: 4px;
    overflow: visible;

    & > li {
      min-inline-size: 0;
      padding-top: 0;
      font-size: 0;
      border-top-width: 4px;

      &[aria-current="step"] {
        font-size: 0;
      }
    }
  }
}

p.stage-now small {
  display: block;
  margin-top: 4px;
  color: var(--mute);
  font-size: 13px;
}

[data-margin="low"] { color: var(--part-ink) }
[data-margin="loss"] { color: var(--blocked) }

p.page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin: 16px 0 24px;

  & .lede {
    margin: 0;
    max-inline-size: 70ch;
    color: var(--mute);
    font-size: 15px;
  }
}

small.mute,
.mute {
  color: var(--mute);
}

@media (max-width: 720px) {
  #app-main table.pricing tr > :first-child {
    grid-column: 1 / -1;
  }

  #app-main table.pricing tbody td:first-child a.row-title {
    display: flex;
    align-items: center;
    min-block-size: 44px;
  }

  #app-main dl.kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Calibration: the current rate is a thin full-height line and the median a
   short thick bar, told apart by shape; red stays for problems. */
ul.calibration-legend [data-key="rate"] {
  inline-size: 0;
  background: none;
  border-inline-start: 2px dashed var(--ink);
}

ul.calibration-legend [data-key="suggested"] {
  background: var(--bg);
  box-shadow: inset 0 0 0 2px var(--acc);
}

table.calibration th .axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font: 400 10px var(--font-mono);
  color: var(--mute);
  text-transform: none;
}

a.row-link {
  color: var(--ink);
  font-weight: 500;

  & code {
    margin-inline-end: 6px;
    color: var(--mute);
    font-weight: 400;
  }

  &:hover {
    color: var(--acc);
  }
}

span.chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

[data-decision="estimate"] { --glyph: "○" }
mark[data-decision="estimate"] { box-shadow: inset 0 0 0 1px var(--line); color: var(--mute) }

/* A form folded behind its button until it is wanted. */
details.form-toggle {
  margin-top: 16px;

  & > summary {
    display: inline-flex;
    align-items: center;
    min-block-size: 40px;
    padding: 0 16px;
    border-radius: 6px;
    border: 1px solid var(--line);
    cursor: pointer;
    list-style: none;
    font: 500 14px var(--font-sans);

    &::-webkit-details-marker {
      display: none;
    }

    &::before {
      content: "+";
      margin-inline-end: 8px;
      font-family: var(--font-mono);
    }
  }

  &[open] > summary::before {
    content: "−";
  }

  & > section.form {
    display: grid;
    gap: 14px;
    max-inline-size: 640px;
    margin-top: 16px;
    padding: 20px;
    border-radius: 12px;
    background: var(--surf);

    & > button,
    & form > button {
      justify-self: start;
    }
  }

  & form {
    display: grid;
    gap: 14px;
  }
}

fieldset.checklist {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;

  & legend {
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--mute);
  }

  & label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-block-size: 40px;
    cursor: pointer;

    & small {
      font: 400 12px var(--font-mono);
      color: var(--mute);
    }
  }
}


#request hgroup {
  margin: 24px 0 16px;

  & h2 {
    font-size: 36px;
    letter-spacing: -0.03em;
    line-height: 1.1;
  }

  & p {
    font: 400 13px var(--font-mono);
    color: var(--mute);
  }
}

section.form-card {
  display: grid;
  gap: 14px;
  max-inline-size: 640px;
  margin-top: 32px;
  padding: 20px;
  border-radius: 12px;
  background: var(--surf);

  & h2 {
    margin: 0;
  }

  & p {
    margin: 0;
  }

  & p.commits {
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--bg);
    font-size: 14px;
  }
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

span.suffixed {
  position: relative;
  display: flex;

  & input {
    flex: 1;
    padding-inline-end: 28px;
  }

  & > span {
    position: absolute;
    inset-inline-end: 10px;
    inset-block: 0;
    display: flex;
    align-items: center;
    color: var(--mute);
    pointer-events: none;
  }
}

.field-row :is(input, select) {
  block-size: 40px;
  box-sizing: border-box;
}

p.decide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

button.danger-outline {
  color: var(--blocked);
  border-color: var(--blocked);
}

.inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

ul.people-list {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink);

  & > li {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px 24px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);

    &[data-removed="true"] {
      opacity: 0.6;
    }
  }

  & .who,
  & .role {
    display: grid;
    gap: 2px;

    & small {
      color: var(--mute);
      font-size: 13px;
    }
  }

  & .who small:not(:only-child),
  & .who > small {
    font-family: var(--font-mono);
    font-size: 12px;
  }

  & .who b small {
    margin-inline-start: 6px;
    font-family: var(--font-sans);
    font-weight: 400;
  }

  & .row-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
  }
}

details.inline-edit {
  & > summary {
    display: inline-flex;
    align-items: center;
    min-block-size: 36px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    cursor: pointer;
    list-style: none;
    font-size: 13px;

    &::-webkit-details-marker {
      display: none;
    }
  }

  &[open] > summary {
    border-color: var(--ink);
  }

  & > div {
    display: grid;
    gap: 8px;
    margin-top: 8px;
    max-inline-size: 320px;

    & p {
      margin: 0;
      font-size: 13px;
      color: var(--mute);
    }
  }
}

@media (max-width: 720px) {
  ul.people-list > li {
    grid-template-columns: 1fr;

    & .row-actions {
      justify-content: flex-start;
    }
  }
}

mark[data-role] {
  margin-inline-start: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: none;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--mute);
  font: 500 12px var(--font-sans);
  vertical-align: 4px;

  &::before {
    display: none;
  }
}

#organizations .panels > section > button,
#organizations .panels > section > label + button {
  justify-self: start;
}

@media (max-width: 720px) {
  dl.cost-kpis {
    grid-template-columns: minmax(0, 1fr);

    & > div + div {
      border-top: 1px solid var(--line);
    }
  }

  #agents ul.tokens > li > span.token-actions {
    margin-inline-start: 0;
    flex-basis: 100%;
  }
}

/* One place to drop an evidence folder; single files are the fallback. */
form.upload fieldset.dropzone {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 22px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--surf);

  & > legend {
    padding: 0 6px;
    font: 500 11px var(--font-mono);
    letter-spacing: 0.05em;
    color: var(--mute);
  }

  & > label {
    display: grid;
    gap: 6px;
  }

  & input[type="file"] {
    font-size: 13px;
    max-inline-size: 100%;
  }
}

#import-result {
  & ol {
    padding-inline-start: 22px;
    font-size: 14px;

    & > li {
      padding: 4px 0;
    }
  }

  & .subject {
    font-family: var(--font-mono);
    font-size: 13px;
  }

  & p small {
    display: block;
    margin-top: 8px;
    color: var(--mute);
  }
}

/* The sign-in pages are kit's; Beam gives them its mark and its surface. */
html body[data-page="login"] {
  &::before {
    display: none;
  }

  background: var(--bg);
  color: var(--ink);

  & main {
    min-block-size: 100dvh;
    display: grid;
    place-items: center;
    padding: 24px 16px;
  }

  & main > article {
    inline-size: min(100%, 400px);
    padding: 32px 28px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surf);
    box-shadow: none;
  }

  & p.login-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 28px;
    font: 600 17px var(--font-sans);

    & small {
      margin-inline-start: auto;
      font: 500 11px var(--font-mono);
      letter-spacing: 0.05em;
      color: var(--mute);
    }
  }

  & main > article h1 {
    margin: 0 0 6px;
    font: 600 22px/1.25 var(--font-sans);
    letter-spacing: -0.01em;
    color: var(--ink);
    text-align: start;
    background: none;
    -webkit-text-fill-color: currentColor;
  }

  & p.login-description {
    text-align: start;
    margin: 0 0 22px;
    color: var(--mute);
    font-size: 14px;
    line-height: 1.5;
  }

  & input {
    min-block-size: 44px;
  }

  & button {
    min-block-size: 44px;
    inline-size: 100%;
  }
}

.capgrid > p.legend {
  padding: 12px 6px 4px;
  margin: 0;

  & [data-mark] {
    inline-size: 12px;
    block-size: 12px;
  }

  & [data-mark="video"] {
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: var(--bg);
    box-shadow: 0 0 0 1.5px var(--ink);
  }
}

/* An application with nothing in it yet: one way forward. */
.empty-panel {
  padding: 32px 28px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--surf);

  & h3 {
    margin: 0 0 6px;
    font: 600 18px var(--font-sans);
  }

  & p {
    margin: 0;
    color: var(--mute);
  }

  & p + p {
    margin-top: 18px;
  }
}

/* Why a blocked capability is blocked, and what moves it. */
p.blocked-callout {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: baseline;
  margin: 18px 0 0;
  padding: 14px 16px;
  border-inline-start: 3px solid var(--blocked);
  border-radius: 0 8px 8px 0;
  background: var(--surf);
  font-size: 14px;
  line-height: 1.5;

  & a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

#agents[data-across] h3.queue-app {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 28px 0 0;
  font: 600 15px var(--font-sans);

  & small {
    font: 400 12px var(--font-mono);
    color: var(--mute);
  }
}

#agents[data-across] h3.queue-app + .queue {
  margin-top: 12px;
}

/* Phone touch targets, last so they win over each component's own sizes. */
@media (max-width: 720px) {
  nav.area-cells a {
    inline-size: 44px;
    block-size: 44px;
  }

  #app-main .app-head nav a {
    min-inline-size: 44px;
    justify-content: center;
  }

  nav.filters a {
    min-block-size: 44px;
  }

  details.inline-edit > summary,
  details.form-toggle > summary {
    min-block-size: 44px;
  }

  p.back a {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
  }

  fieldset.verdicts input[type="radio"] {
    inline-size: 22px;
    block-size: 22px;
  }
}

#app-main #capability > p.cap-detail {
  margin: 14px 0 0;
  max-inline-size: 70ch;
  color: var(--mute);
  font-size: 14px;
  line-height: 1.5;
}

p.blocked-callout > b {
  font-weight: 600;
}

details.recent > summary {
  list-style: none;

  &::-webkit-details-marker {
    display: none;
  }

  &::after {
    content: "▸";
    font-family: var(--font-mono);
    color: var(--mute);
  }
}

details.recent[open] > summary::after {
  content: "▾";
}

/* The browser's file button, in Beam's secondary button style. */
input[type="file"]::file-selector-button {
  margin-inline-end: 12px;
  min-block-size: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surf2);
  color: var(--ink);
  font: 500 13px var(--font-sans);
  cursor: pointer;
}

@media (max-width: 720px) {
  .scroll > table.calibration {
    min-inline-size: 0;
  }

  #app-main table.calibration td.track-cell {
    grid-column: 1 / -1;
  }

  #app-main table.calibration .track {
    margin-top: 6px;
  }
}

/* Pages without a theme of their own (sign-in) follow the device. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
  color-scheme: light;
  --bg: #F7F7F4;
  --surf: #EEEEE9;
  --surf2: #E5E5DF;
  --line: #D9D9D2;
  --ink: #17181B;
  --mute: #5A5B57;
  --acc: #4D7C0F;
  --acc-ink: #FFFFFF;
  --blocked: #E0573B;
  --blocked-ink: #17181B;
  --built: #7FB02A;
  --built-ink: #111214;
  --part-ink: #8A5A00;
  --part: #EBA737;
  --deferred: #8A8B86;
  --slice-sc: #2F5FC4;
  --slice-sv: #4D7C0F;
  --slice-au: #7A3FC2;
  --slice-tr: #A0660A;
}
}

html body[data-page="login"] {
  & main > article {
    display: flex;
    flex-direction: column;
  }

  & main > article > a.login-restart {
    display: none;
    order: 99;
    align-self: flex-start;
    margin-top: 18px;
    min-block-size: 44px;
    align-items: center;
    color: var(--ink);
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  & main[data-signals*="otpEmail"] > article > a.login-restart {
    display: inline-flex;
  }

  & main > article p.login-brand > span {
    color: var(--ink);
  }

  & main > article p strong {
    color: var(--ink);
    font-family: var(--font-mono);
    font-weight: 500;
  }

  & main > article > p {
    text-align: start;
    color: var(--mute);
  }

  & main[data-signals*="otpEmail"] p.login-description {
    display: none;
  }

  & main > article label {
    color: var(--mute);
  }

  & main > article input::placeholder {
    color: var(--mute);
    opacity: 0.7;
  }

  & main > article h1 {
    text-wrap: balance;
  }

  & > .locale-switcher button {
    min-block-size: 44px;
    padding: 0 12px;
    border-radius: 6px;
    background: none;
    color: var(--mute);
    font: 500 13px var(--font-mono);

    &[aria-current="true"] {
      color: var(--ink);
      box-shadow: inset 0 -2px 0 var(--acc);
    }
  }
}

#app-main #error-page h1 {
  margin: 6px 0 16px;
}

/* Deferred is an outline with a stroke through it, so it never reads as
   planned (a plain outline), at any size and in greyscale. */
#app-main [data-mark="deferred"][data-mark] {
  border: 0;
  box-shadow: inset 0 0 0 1.5px var(--deferred);
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--deferred) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
}

@media (max-width: 720px) {
  .wide-only {
    display: none !important;
  }
}

p.blocked-callout > a.button {
  margin-inline-start: auto;
  text-decoration: none;
}

/* A request: what it is on the left; what happens next, then the talk, on
   the right. On a phone the next step comes first. */
#request .request-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "facts side" "facts thread";
  grid-template-rows: auto 1fr;
  gap: 28px 48px;
  align-items: start;

  & > .request-facts { grid-area: facts }
  & > .request-side { grid-area: side }
  & > .request-thread { grid-area: thread; min-inline-size: 0 }
}

#request .request-facts,
#request dl.request-facts {
  margin: 0;
}

#request .request-facts dl,
#request dl.request-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 12px 20px;
  align-items: baseline;
  margin: 0;

  & dt {
    margin: 0;
    font: 500 11px var(--font-mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mute);
  }

  & dd {
    margin: 0;
  }

  & dd small {
    display: block;
    color: var(--mute);
  }
}

#request .request-side {
  display: grid;
  gap: 28px;
  min-inline-size: 0;

  & > section.form-card,
  & .panels {
    margin-top: 0;
  }

  & .panels {
    display: grid;
    gap: 16px;
  }

  & .panels > section {
    display: grid;
    gap: 12px;
    padding: 20px;
    border-radius: 12px;
    background: var(--surf);

    & h2 {
      margin: 0;
      font-size: 18px;
    }

    & > button,
    & label + button {
      justify-self: start;
    }
  }
}

p.decide-actions > button:not(.secondary) {
  background: var(--acc);
  color: var(--acc-ink);
  border-color: var(--acc);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 900px) {
  #request .request-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "side" "facts" "thread";
    grid-template-rows: auto;
  }

  #request .request-facts dl,
  #request dl.request-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;

    & dd {
      margin-bottom: 12px;
    }
  }
}

/* A request row: its reference and title are one link, its capability under it. */
td.request-cell {
  & > a.row-title {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    color: var(--ink);
    font-weight: 500;

    & > span[aria-hidden] {
      color: var(--mute);
      transition: transform 120ms ease-out;
    }

    &:hover > span[aria-hidden] {
      transform: translateX(3px);
      color: var(--ink);
    }
  }

  & > small {
    display: block;
    margin-top: 4px;
    color: var(--mute);
  }
}

#requests table th:first-child,
#request-across table th:first-child {
  inline-size: 50%;
}

@media (max-width: 720px) {
  td.request-cell > a.row-title {
    display: flex;
    min-block-size: 44px;
    align-items: center;
  }
}

section.estimate table tr.price th small {
  display: block;
  font: 400 12px var(--font-mono);
  color: var(--mute);
}

@media (max-width: 720px) {
  .add-slice > div {
    grid-template-columns: minmax(0, 1fr);
  }

  section.estimate table :is(th, td):nth-child(3) {
    display: none;
  }

  section.estimate table :is(th, td):nth-child(2) {
    padding-inline: 8px;
    white-space: nowrap;
  }

  section.estimate dl.actual {
    grid-template-columns: minmax(0, 1fr);

    & dd {
      text-align: start;
    }
  }

  table.slices td.events:has(> span.mute) {
    display: none;
  }
}

@media (max-width: 720px) {
  ul.outcomes span.outcome a,
  ol.decisions-list a.watch {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
  }
}

/* What still needs evidence, and the file name that would match it. */
section.evidence-needed {
  margin-bottom: 36px;

  & h2 data {
    font: 400 15px var(--font-mono);
    color: var(--mute);
  }
}

ul.need-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink);

  & > li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 180px;
    align-items: center;
    gap: 6px 16px;
    min-block-size: 44px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
  }

  & code {
    font: 400 12px var(--font-mono);
    color: var(--mute);
    text-align: end;
  }
}

details.covered {
  margin-top: 12px;

  & > summary {
    min-block-size: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--mute);
  }
}

form.upload > p:has(> button) {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

form.upload > p > small {
  font-size: 14px;
  color: var(--mute);
}

@media (max-width: 720px) {
  ul.need-list > li {
    grid-template-columns: minmax(0, 1fr) auto;

    & code {
      grid-column: 1 / -1;
      text-align: start;
    }
  }
}

#import {
  & > label,
  & > p {
    max-inline-size: 900px;
  }

  & p.import-now {
    font: 400 13px var(--font-mono);
    color: var(--mute);
  }

  & #import-result {
    max-inline-size: 900px;
    margin-top: 24px;
  }

  & p.empty-result {
    padding: 20px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    color: var(--mute);
  }
}

/* Agents: sections under the application's own heading, not beside it. */
#app-main #agents .split h2 {
  font-size: 22px;
  letter-spacing: -0.02em;
}

#app-main #agents[data-across] > .split > section > header h1 {
  font-size: 32px;
}

#agents .queue > article > header details.call {
  flex-basis: 100%;

  & > summary {
    display: inline-flex;
    align-items: center;
    min-block-size: 28px;
    cursor: pointer;
    font: 400 12px var(--font-mono);
    color: var(--mute);
  }

  & code {
    display: block;
    margin-top: 4px;
    font: 400 12px var(--font-mono);
    color: var(--mute);
    overflow-wrap: anywhere;
  }
}

#agents .queue footer :is(button, details.inline-edit > summary) {
  block-size: 36px;
  min-block-size: 36px;
}

#agents :is(.queue footer, ul.tokens) details.inline-edit > summary {
  color: var(--blocked);
  border-color: var(--blocked);
}

p.more a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  color: var(--acc);
  font-weight: 500;
}

p.more a::after {
  content: " →";
  white-space: pre;
}

@media (max-width: 720px) {
  #agents .queue footer :is(button, details.inline-edit > summary) {
    block-size: 44px;
    min-block-size: 44px;
  }
}

/* Costs across applications: the name gets the room, every number lines up. */
table.pricing.across {
  min-inline-size: 900px;

  & thead th:first-child { inline-size: auto; min-inline-size: 240px }
  & thead th:not(:first-child) { inline-size: 120px }

  & :is(th, td):not(:first-child) {
    text-align: end;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
  }

  & tbody td:first-child {
    font-family: var(--font-sans);

    & a.row-title {
      color: var(--ink);
      font-weight: 500;
    }

    & small {
      display: block;
      color: var(--mute);
      font-weight: 400;
    }
  }
}

#costs-across > hgroup p .button {
  margin-top: 8px;
}

table.requests-across {
  & thead th:nth-child(1) { inline-size: 52% }
  & thead th:nth-child(2) { inline-size: 22% }

  & td:first-child {
    & > a.row-title {
      display: inline-flex;
      flex-wrap: wrap;
      gap: 2px 8px;
      align-items: baseline;
      color: var(--ink);
      font-weight: 500;
    }

    & > small {
      display: block;
      margin-top: 4px;
      color: var(--mute);
    }
  }
}

#requests-across .filters label {
  font: 500 11px var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mute);

  & select {
    font: 400 15px var(--font-sans);
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
  }
}

@media (max-width: 720px) {
  #requests-across .filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  table.requests-across td:first-child > a.row-title {
    display: flex;
    min-block-size: 44px;
    align-items: center;
  }
}

ol.activity-log > li.day {
  padding: 18px 0 6px;
  border-bottom: 1px solid var(--line);

  & h3 {
    margin: 0;
    font: 500 11px var(--font-mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mute);
  }
}

#activity > .chips {
  margin: 8px 0 12px;
}

/* What needs you: the label and the action in the accent, the sentence in ink. */
ol.ledger.needs > li > a > span:not(.cta) {
  color: var(--ink);
  font-weight: 400;
}

#home .summary {
  white-space: normal;
}

@media (max-width: 720px) {
  #home table td:first-child > a {
    display: flex;
    align-items: center;
    min-block-size: 44px;
  }
}

@media (max-width: 720px) {

  .capgrid > div {
    grid-template-columns: 26px minmax(0, 1fr) auto;

    & > data {
      display: block;
    }
  }

  .map-tools {
    flex-wrap: nowrap;

    & [role="group"] button {
      min-inline-size: 64px;
    }
  }
}

#organizations .inline-form label {
  flex: 0 1 480px;
}

ul.people-list > li {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 230px;
}

ul.people-list > li.head {
  padding: 8px 0;
  font: 500 11px var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mute);
}

details.inline-edit.danger > summary {
  color: var(--blocked);
  border-color: color-mix(in srgb, var(--blocked) 50%, var(--line));
}

@media (max-width: 720px) {
  ul.people-list > li {
    grid-template-columns: minmax(0, 1fr);
  }

  ul.people-list > li.head {
    display: none;
  }

  .field-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

section.form-card p.commits small {
  display: block;
  margin-top: 4px;
  color: var(--mute);
}

/* Access: who of the customer sees a project, and inviting several at once. */
#access {
  & details.invite > summary.primary {
    background: var(--acc);
    color: var(--acc-ink);
    border-color: var(--acc);
  }

  & details.invite > section.form {
    max-inline-size: 960px;
  }

  & ul.levels {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--mute);

    & b {
      color: var(--ink);
      font-weight: 600;
    }
  }

  & label.default-level {
    max-inline-size: 320px;
  }

  & ol.invite-rows {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;

    & > li {
      display: grid;
      grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) 44px;
      gap: 6px 10px;
      align-items: end;
    }

    & input[aria-invalid="true"] {
      border-color: var(--blocked);
      box-shadow: inset 0 0 0 1px var(--blocked);
    }

    & button.remove-row {
      inline-size: 44px;
      block-size: 40px;
      padding: 0;
      font-size: 18px;
      color: var(--mute);
    }

    & p.row-error {
      grid-column: 1 / -1;
      margin: 0;
      font-size: 13px;
      color: var(--blocked);
    }

    & p.row-error::before {
      content: "! ";
      font-weight: 700;
    }
  }

  & p.invite-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  & ul.invite-results {
    display: grid;
    gap: 6px;
    margin: 4px 0 0;
    padding: 12px 14px;
    list-style: none;
    border-radius: 10px;
    background: var(--bg);

    & > li {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 4px 10px;
      font-size: 14px;
    }

    & small {
      color: var(--mute);
    }

    & small.reason {
      flex-basis: 100%;
      padding-inline-start: 2px;
    }
  }

  & section.access-list {
    margin-top: 36px;

    & h2 data {
      font: 400 15px var(--font-mono);
      color: var(--mute);
    }
  }

  & .who small {
    display: block;
    margin-top: 2px;
  }

  & .row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
  }
}

mark[data-role="customer_reader"] {
  color: var(--mute);
  box-shadow: inset 0 0 0 1px var(--line);
  background: none;
}

@media (max-width: 720px) {
  #access ol.invite-rows > li {
    grid-template-columns: minmax(0, 1fr) 44px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;

    & > label {
      grid-column: 1 / 2;
    }

    & > button.remove-row {
      grid-column: 2;
      grid-row: 1;
      align-self: start;
    }
  }

  #access ol.invite-rows :is(input, select) {
    min-block-size: 44px;
  }
}

#access .people-list .role mark {
  justify-self: start;
  inline-size: fit-content;
}

#access .people-list .row-actions :is(button, a.button, details > summary) {
  min-block-size: 36px;
  block-size: 36px;
  padding: 0 12px;
  font: 500 13px var(--font-sans);
}

#access ol.invite-rows > li > button.remove-row {
  align-self: end;
  block-size: 40px;
}

/* Read-only links, on the Access tab. */
#access section.share-links {
  margin-top: 40px;

  & h2 data {
    font: 400 15px var(--font-mono);
    color: var(--mute);
  }

  & fieldset.expiry {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0;
    padding: 0;
    border: 0;

    & legend {
      margin-bottom: 6px;
    }

    & label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-block-size: 40px;
    }
  }

  & label.check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-block-size: 44px;

    & input {
      inline-size: 20px;
      block-size: 20px;
    }
  }

  & .share-created {
    display: grid;
    gap: 8px;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid var(--acc);
    background: var(--bg);

    & p {
      margin: 0;
    }
  }

  & .copy-row {
    display: flex;
    gap: 8px;

    & input {
      flex: 1;
      min-inline-size: 0;
      font: 400 13px var(--font-mono);
    }
  }

  & ul.link-list {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ink);

    & > li {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) auto;
      gap: 6px 20px;
      align-items: start;
      padding: 14px 0;
      border-bottom: 1px solid var(--line);
    }

    & small {
      display: block;
      margin-top: 4px;
      color: var(--mute);
    }
  }
}

/* A shared page: no account, no navigation; the bar says what it is. */
body.shared {
  background: var(--bg);
  color: var(--ink);

  & p.shared-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 24px;
    border-bottom: 1px solid var(--line);
    font: 500 12px var(--font-mono);
    color: var(--mute);
  }

  & main {
    max-inline-size: 1040px;
    margin: 0 auto;
    padding: 32px 24px 64px;
  }

  & main > header h1 {
    margin: 0 0 6px;
    font-size: 44px;
    letter-spacing: -0.03em;
  }

  & main > section {
    margin-top: 32px;

    & h2 {
      font-size: 20px;

      & .id {
        font-family: var(--font-mono);
        color: var(--mute);
        margin-inline-end: 6px;
      }
    }
  }

  & ul.shared-caps {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ink);

    & > li {
      border-bottom: 1px solid var(--line);
    }

    & summary {
      display: flex;
      align-items: center;
      gap: 12px;
      min-block-size: 52px;
      cursor: pointer;
      list-style: none;

      &::-webkit-details-marker {
        display: none;
      }

      & > span {
        flex: 1;
        font-weight: 500;
      }

      & .id {
        inline-size: 30px;
        font: 400 12px var(--font-mono);
        color: var(--mute);
      }
    }

    & details[open] > summary {
      border-bottom: 1px solid var(--line);
    }

    & details > :not(summary) {
      margin-inline: 42px 0;
    }

    & details > :last-child {
      margin-bottom: 18px;
    }

    & figure.video video {
      inline-size: 100%;
      max-inline-size: 720px;
      border-radius: 10px;
    }
  }

  & #shared-closed {
    max-inline-size: 520px;
    margin-top: 14vh;
  }
}

@media (max-width: 720px) {
  #access section.share-links ul.link-list > li {
    grid-template-columns: minmax(0, 1fr);
  }

  body.shared main > header h1 {
    font-size: 34px;
  }

  body.shared ul.shared-caps details > :not(summary) {
    margin-inline: 0;
  }
}

body.shared ul.shared-caps {
  & ol.criteria {
    margin: 4px 0 14px;
    padding-inline-start: 20px;
    font-size: 14px;
    line-height: 1.5;

    & > li {
      padding: 2px 0;
    }
  }

  & .shots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    max-inline-size: 720px;

    & figure {
      margin: 0;
    }

    & img {
      display: block;
      inline-size: 100%;
      block-size: auto;
      border-radius: 8px;
      border: 1px solid var(--line);
    }

    & figcaption {
      margin-top: 4px;
      font: 400 12px var(--font-mono);
      color: var(--mute);
    }
  }

  & figure.video {
    margin: 0 0 12px;
  }
}

/* Where you are, under the one header every page shares. */
nav.crumbs-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 10px 40px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--mute);

  & a {
    display: inline-flex;
    align-items: center;
    min-block-size: 28px;
    color: var(--mute);
  }

  & a:hover {
    color: var(--ink);
  }

  & [aria-current="page"] {
    color: var(--ink);
  }
}

@media (max-width: 720px) {
  nav.crumbs-bar {
    padding: 6px 16px;

    & a {
      min-block-size: 44px;
    }
  }
}

/* On a tab of a project the tab is the subject: the project's name steps
   back to a heading the size of a section's. */
#app-main .app-head[data-sub] h1 {
  font-size: 30px !important;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

@media (max-width: 720px) {
  #app-main .app-head h1 {
    font-size: 34px !important;
  }

  #app-main .app-head[data-sub] h1 {
    font-size: 24px !important;
  }
}

/* Sign-in: a hint for each step, placed after the form; a wrong code shows
   as an error at the field, with a glyph and the way on. */
html body[data-page="login"] {
  & main > article > p.login-hint,
  & main > article > p.login-wrong {
    display: none;
    order: 98;
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--mute);
    text-align: start;
  }

  & main:not([data-signals*="otpEmail"]) > article > p.login-hint.email-step,
  & main[data-signals*="otpEmail"] > article > p.login-hint.code-step {
    display: block;
  }

  & main:has([role="alert"]) > article > p.login-wrong {
    display: block;
    order: 0;
    margin: -6px 0 14px;
  }

  & main > article > p.login-brand { order: -3 }
  & main > article > h1,
  & main > article > p.login-description,
  & main > article > p:not([class]):not([role]) { order: -2 }

  & main > article p[role="alert"] {
    order: -1;
    margin: 0 0 10px;
    padding: 0;
    text-align: start;
    color: var(--blocked);
    font-weight: 500;
    background: none;
    border: 0;

    &::before {
      content: "! ";
      font-weight: 700;
    }
  }

  & main:has([role="alert"]) input {
    border-color: var(--blocked) !important;
    box-shadow: inset 0 0 0 1px var(--blocked) !important;
  }

  & main > article p strong {
    display: inline-block;
    white-space: nowrap;
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
  }

  & main[data-signals*="otpEmail"] input:not([type="email"]) {
    font: 500 20px var(--font-mono);
    letter-spacing: 0.3em;
  }
}

/* Each cell carries its status as a glyph too, not as colour alone. */
nav.area-cells a {
  inline-size: auto;
  min-inline-size: 44px;
  padding: 0 8px;
  gap: 4px;

  &::after {
    font-size: 10px;
    line-height: 1;
  }

  &[data-status="built"]::after { content: "✓" }
  &[data-status="partly_built"]::after { content: "◐" }
  &[data-status="planned"]::after { content: "○" }
  &[data-status="blocked"]::after { content: "●" }
  &[data-status="deferred"]::after { content: "‖" }
}

.capgrid a {
  gap: 3px;

  &::before {
    font-size: 9px;
    line-height: 1;
    order: 2;
  }

  &[data-status="built"]::before { content: "✓" }
  &[data-status="partly_built"]::before { content: "◐" }
  &[data-status="planned"]::before { content: "○" }
  &[data-status="blocked"]::before { content: "●" }
  &[data-status="deferred"]::before { content: "‖" }
}

/* A compact tile: its id and status glyph on the first line, its name under. */
.capgrid a {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  inline-size: 150px;
  block-size: 48px;
  padding: 0 10px;
  gap: 1px;

  & > b {
    font: 600 12px var(--font-mono);
  }

  & > span {
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 400 11px var(--font-sans);
    opacity: 0.85;
  }

  &::before {
    position: absolute;
    top: 7px;
    right: 14px;
  }

  &[data-status="partly_built"] {
    padding-bottom: 0;
    background: linear-gradient(to right, var(--part) 0 4px, transparent 4px);
  }
}

.capgrid > div {
  grid-template-columns: 26px 180px minmax(0, 1fr) 56px;
}

@media (max-width: 720px) {
  .capgrid > div > span:has(> a) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .capgrid a {
    inline-size: auto;
    block-size: 52px;
  }

  .capgrid > div {
    grid-template-columns: 26px minmax(0, 1fr) auto;
  }
}

.capgrid a[data-video="true"]::after {
  content: "▶";
  top: auto;
  bottom: 7px;
  right: 12px;
  inline-size: auto;
  block-size: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 8px;
  line-height: 1;
}

ol.ledger.needs {
  max-inline-size: 880px;
}

#home .summary > span,
.id,
small.id {
  white-space: nowrap;
}

@media (max-width: 720px) {
  #home ul.ledger > li > span > a {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
  }

  ol.ledger.needs > li > a > span.cta {
    flex-basis: 100%;
  }
}

/* Signing off is the one task with a deadline: it stands out. */
ol.ledger.needs > li[data-kind="signoff"],
ol.ledger.needs > li[data-kind="lead"] {
  box-shadow: inset 3px 0 0 var(--acc);
  padding-inline-start: 12px;
}

/* An agent's words held for Nullsoft: first in the side rail, one clear
   action, and turning down behind its own step. */
section.held-review {
  display: grid;
  gap: 12px;
  margin-bottom: 28px;
  padding: 18px;
  border-radius: 12px;
  border: 1px solid var(--part-ink);
  background: var(--surf);

  & h2 {
    margin: 0;
    font-size: 17px;

    & data {
      font: 400 13px var(--font-mono);
      color: var(--mute);
    }
  }

  & article {
    display: grid;
    gap: 8px;
  }

  & p.meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;

    & small {
      flex-basis: 100%;
      color: var(--mute);
    }
  }

  & blockquote {
    margin: 0;
    padding: 10px 12px;
    border-inline-start: 3px solid var(--line);
    background: var(--bg);
    font-size: 14px;
  }

  & .held-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;

    & details[open] {
      flex-basis: 100%;
    }

    & details > div {
      display: grid;
      gap: 8px;
      margin-top: 8px;
    }
  }
}

@media (max-width: 720px) {
  section.held-review .held-actions > button {
    flex-basis: 100%;
    min-block-size: 44px;
  }
}

table.slices[data-noevents] :is(th, td):nth-child(3) {
  display: none;
}

section.estimate dl.actual {
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;

  & dd {
    text-align: start;
  }

  & dd:first-of-type {
    font-size: 20px;
  }
}

@media (max-width: 720px) {
  #app-main td mark {
    white-space: normal;
    block-size: auto;
    min-block-size: 26px;
    padding-block: 4px;
    border-radius: 12px;
  }
}

/* Triage, in the order a defect moves through it. */
#request section.triage ol.triage-steps {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;

  & > li {
    display: grid;
    gap: 8px;
    padding: 14px 0 14px 34px;
    border-top: 1px solid var(--line);
    position: relative;
    counter-increment: step;

    &::before {
      content: counter(step);
      position: absolute;
      left: 0;
      top: 14px;
      display: grid;
      place-items: center;
      inline-size: 22px;
      block-size: 22px;
      border-radius: 50%;
      box-shadow: inset 0 0 0 1.5px var(--line);
      font: 500 12px var(--font-mono);
    }

    &[data-done="true"]::before {
      content: "✓";
      background: var(--built);
      color: var(--built-ink);
      box-shadow: none;
    }

    & > p {
      margin: 0;
      font-size: 14px;
    }
  }

  & p.row-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  & .resolve {
    display: grid;
    gap: 10px;
    margin-top: 10px;

    & > button {
      justify-self: start;
    }
  }
}

#request .inline-form {
  align-items: flex-end;

  & :is(select, input, button) {
    block-size: 40px;
  }
}

@media (max-width: 900px) {
  #request .request-body[data-kind="defect"] {
    grid-template-areas: "facts" "side" "thread";
  }
}

/* The log: a glyph for the kind of change, the sentence, then when and in
   which role, on one line on a wide screen. */
ol.activity-log > li:not(.day) {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: baseline;

  &::before {
    grid-column: 1;
    font: 500 13px var(--font-mono);
    color: var(--mute);
    text-align: center;
  }

  &[data-kind="signoff"]::before { content: "✓"; color: var(--acc) }
  &[data-kind="requests"]::before { content: "⇄" }
  &[data-kind="evidence"]::before { content: "▶" }
  &[data-kind="register"]::before { content: "◆" }

  &[data-kind="signoff"] > p {
    font-weight: 600;
  }

  & > p {
    grid-column: 2;
    margin: 0;
  }

  & > small {
    grid-column: 3;
    text-align: end;
    white-space: nowrap;
  }

  & > details {
    grid-column: 2 / -1;
  }

  & small.count {
    white-space: nowrap;
  }
}

@media (max-width: 720px) {
  ol.activity-log > li:not(.day) {
    grid-template-columns: 22px minmax(0, 1fr);

    & > small {
      grid-column: 2;
      text-align: start;
    }
  }

  #activity > .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;

    & > button {
      flex: none;
    }
  }
}

ul.outcomes > li.head {
  padding: 8px 0;
  font: 500 11px var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mute);
}

@media (max-width: 720px) {
  ul.outcomes > li.head {
    display: none;
  }

  /* A lead opening this from an email decides first; the facts follow. */
  #acceptance:has(> section.decide) {
    display: flex;
    flex-direction: column;

    & > * { order: 3 }
    & > header.app-head { order: 0 }
    & > section.decide { order: 1 }
    & > dl.facts-row,
    & > p.tally,
    & > p.lede { order: 2 }
  }
}

input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--acc);
}

section.decide .sign-off > p.gate {
  margin: 0;
  font-size: 13px;
  color: var(--mute);
}

section.decide .sign-off > button:disabled,
.sign-off > button:disabled {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
  opacity: 0.6;
}

fieldset.verdicts label > span {
  line-height: 1.3;
}

ul.need-list > li.head {
  min-block-size: 0;
  padding: 8px 0;
  font: 500 11px var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mute);

  & > span:last-child {
    text-align: end;
  }
}

ul.need-list > li {
  grid-template-columns: minmax(0, 1fr) 140px 200px;
}

form.upload fieldset.dropzone label small {
  font-size: 13px;
  color: var(--mute);
}

details.covered > summary::before {
  content: "▸ ";
}

details.covered[open] > summary::before {
  content: "▾ ";
}

#import p.import-now {
  margin: 0 0 18px;
}

button:disabled:not(.ghost) {
  background: transparent;
  color: var(--mute);
  box-shadow: inset 0 0 0 1px var(--line);
  border-color: var(--line);
  opacity: 1;
}

@media (max-width: 720px) {
  ul.need-list > li.head {
    display: none;
  }
}

@media (max-width: 720px) {
  ul.need-list > li {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

#agents .queue details.call > summary::before {
  content: "▸ ";
}

#agents .queue details.call[open] > summary::before {
  content: "▾ ";
}

#agents .queue p.new-label {
  margin: 0;
  font: 500 11px var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mute);
}

#agents > .split > section > header,
#agents > .split > section > section > header {
  margin-top: 24px;
}

#agents .split > section > p > small,
#agents p.never {
  font-size: 13px;
  color: var(--mute);
}

@media (max-width: 720px) {
  #agents .queue details.call > summary {
    min-block-size: 44px;
  }
}

@media (max-width: 720px) {
  #requests-across .filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    & > label:first-child {
      grid-column: 1 / -1;
    }
  }
}

/* Calibration: gridlines under the ranges so a marker can be read. */
table.calibration .track {
  background: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 25%);
  background-size: calc(100% - 1px) 100%;
  background-repeat: no-repeat;
  box-shadow: inset -1px 0 0 var(--line);
}

table.calibration th .axis {
  & > span:last-child {
    text-align: end;
  }
}

table.calibration td:nth-child(4) {
  font: 400 13px var(--font-sans);
}

:is(#pricing, #costs-across) .chips svg {
  inline-size: 11px;
  block-size: 11px;
  margin-inline-end: 4px;
}

#costs-across > hgroup p .button {
  color: var(--ink);
}

@media (max-width: 720px) {
  #app-main table.pricing a.estimate-link {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
  }
}

/* Destructive actions stay quiet until reached for. */
ul.people-list details.inline-edit.danger > summary,
#organizations details.inline-edit > summary {
  color: var(--mute);
  border-color: var(--line);
}

ul.people-list details.inline-edit.danger > summary:is(:hover, :focus-visible),
ul.people-list details.inline-edit.danger[open] > summary {
  color: var(--blocked);
  border-color: var(--blocked);
}

#organizations .inline-form {
  align-items: flex-end;

  & :is(input, button) {
    block-size: 40px;
  }
}

#error-page {
  margin: 12vh 0 0;
}

.app-body p > small,
.app-body li > small {
  font-size: 13px;
}

section.project-pricing .settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px 20px;
  margin: 16px 0;

  & .field {
    display: grid;
    gap: 6px;
    align-content: start;

    & p {
      margin: 0;
      font-size: 13px;
      color: var(--mute);
    }
  }

  & input,
  & select {
    min-block-size: 40px;
  }
}

/* Shared pages, round 4: the bar in the content's column and readable, a
   poster instead of an empty player, criteria tied to the evidence. */
body.shared {
  & .shared-bar {
    max-inline-size: 1040px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 20px;
    border-bottom: 1px solid var(--line);

    & p {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      font-size: 15px;
    }

    & p.state {
      font-size: 14px;
      color: var(--mute);
    }
  }

  & main > header .lbl {
    margin: 22px 0 6px;
  }

  & main > header p.stage-now {
    margin: 4px 0 0;
  }

  & ul.shared-caps summary {
    & small.has-evidence {
      font: 500 12px var(--font-mono);
      color: var(--acc);
      white-space: nowrap;
    }

    &::after {
      content: "▸";
      color: var(--mute);
      font-size: 12px;
    }
  }

  & ul.shared-caps details[open] > summary::after {
    content: "▾";
  }

  & ul.shared-caps details > :not(summary) {
    margin: 0;
  }

  & .shared-body {
    display: grid;
    gap: 12px;
    padding: 14px 0 20px 42px;
  }

  & ol.shared-criteria {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: 1.5;

    & > li {
      display: grid;
      grid-template-columns: 20px minmax(0, 1fr) auto;
      gap: 10px;
      align-items: baseline;
    }

    & .mark {
      font-weight: 700;
      color: var(--mute);
    }

    & li[data-seen="true"] .mark {
      color: var(--acc);
    }

    & small {
      font: 400 12px var(--font-mono);
      color: var(--mute);
      white-space: nowrap;
    }
  }

  & video {
    display: block;
    inline-size: 100%;
    max-inline-size: 720px;
    aspect-ratio: 16 / 10;
    background: #0E0F11;
    border-radius: 10px;
  }

  & .shared-footer {
    max-inline-size: 1040px;
    margin: 0 auto;
    padding: 24px 24px 48px;
    border-top: 1px solid var(--line);

    & p {
      max-inline-size: 70ch;
      margin: 0;
      font-size: 13px;
      color: var(--mute);
    }
  }

  & #shared-closed {
    max-inline-size: 1040px;
    margin: 12vh auto 0;
    padding: 0 24px 48px;

    & h1 {
      margin: 0 0 16px;
      font-size: 40px;
      letter-spacing: -0.02em;
    }

    & p {
      max-inline-size: 60ch;
      margin: 0 0 14px;
      font-size: 16px;
    }
  }
}

/* Evidence players are never an empty white box. */
video {
  background: #0E0F11;
}

@media (max-width: 720px) {
  body.shared .shared-body {
    padding-inline-start: 0;
  }

  body.shared .shared-bar {
    padding: 12px 16px;
  }

  body.shared main,
  body.shared .shared-footer,
  body.shared #shared-closed {
    padding-inline: 16px;
  }
}

nav.crumbs-bar mark.only-badge {
  order: 99;
  margin-inline-start: auto;
}

#app-header .narrow nav.narrow-nav {
  display: grid;
  gap: 0;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);

  & a {
    display: flex;
    align-items: center;
    min-block-size: 44px;
    color: var(--ink);

    &[aria-current="page"] {
      font-weight: 600;
      box-shadow: inset 3px 0 0 var(--acc);
      padding-inline-start: 10px;
    }
  }
}

details.tab-menu {
  margin-top: 14px;

  & > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-block-size: 48px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    list-style: none;

    &::-webkit-details-marker {
      display: none;
    }

    &::after {
      content: "▾";
      margin-inline-start: auto;
      color: var(--mute);
    }
  }

  & > div {
    display: grid;
    margin-top: 6px;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;

    & a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-block-size: 46px;
      padding: 0 14px;
      color: var(--ink);
      border-bottom: 1px solid var(--line);

      &:last-child {
        border-bottom: 0;
      }

      &[aria-current="page"] {
        font-weight: 600;
        background: var(--surf);
      }
    }
  }
}

@media (max-width: 720px) {
  #app-header nav:not(.crumbs) {
    display: none !important;
  }

  #app-main .app-head > nav.tab-row {
    display: none;
  }

  details.tab-menu.narrow-only {
    display: block !important;
  }
}

/* ── Round 4 ── */

/* One heading scale: a top-level page's title, a project's tab, a project. */
#app-main :is(#home, #requests-across, #costs-across, #calibration, #people, #organizations) h1,
#app-main #agents[data-across] h1 {
  font-size: 40px !important;
  letter-spacing: -0.025em;
}

/* Taps: rows and their links are 44px tall on a phone. */
@media (max-width: 720px) {
  .caplist a,
  ul.outcomes > li > a,
  ul.need-list > li > a,
  #app-main table td > a,
  td.request-cell > a.row-title,
  .row-actions :is(button, a.button, details > summary),
  details.inline-edit > summary,
  #app-main button.small,
  p.evidence-kind button,
  nav.cap-tabs a,
  .chips > button {
    min-block-size: 44px;
  }

  /* The feed's links keep the line's height; their padding widens the tap. */
  #home ul.ledger > li > span > a {
    display: inline;
    min-block-size: 0;
    padding-block: 12px;
  }
}

/* Area cells and tiles carry the same shapes as the status chips. */
nav.area-cells a {
  &[data-status="built"]::after { content: "■" }
  &[data-status="partly_built"]::after { content: "◧" }
  &[data-status="planned"]::after { content: "□" }
  &[data-status="blocked"]::after { content: "●" }
  &[data-status="deferred"]::after { content: "⊘" }

  &::after {
    font-size: 12px;
  }
}

.capgrid a {
  &[data-status="built"]::before { content: "■" }
  &[data-status="partly_built"]::before { content: "◧" }
  &[data-status="planned"]::before { content: "□" }
  &[data-status="blocked"]::before { content: "●" }
  &[data-status="deferred"]::before { content: "⊘" }

  &::before {
    font-size: 12px;
    top: 6px;
  }

  &[data-video="true"]::after {
    top: 8px;
    right: 30px;
    bottom: auto;
    font-size: 10px;
  }
}

details.advance > summary.quiet {
  min-block-size: 32px;
  padding: 0;
  border: 0;
  color: var(--mute);
  font: 400 13px var(--font-sans);
  text-decoration: underline;
  text-underline-offset: 3px;

  &::after {
    content: "";
  }
}

p.next-step {
  margin: 14px 0 0;
}

/* Destructive actions read as destructive everywhere. */
ul.people-list details.inline-edit.danger > summary,
#organizations details.inline-edit > summary {
  color: var(--blocked);
  border-color: color-mix(in srgb, var(--blocked) 60%, var(--line));
}

/* Requests across: the kind and capability on one line. */
table.requests-across td:first-child > small {
  & .cap,
  & .cap > small {
    display: inline;
  }
}

/* A defect, for the customer: who acts next. */
section.next-steps {
  padding: 18px;
  border-radius: 12px;
  background: var(--surf);

  & h2 {
    margin: 0 0 10px;
    font-size: 17px;
  }

  & ol {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-inline-start: 22px;
    font-size: 14px;
    color: var(--mute);
  }

  & li[data-done="true"] {
    text-decoration: line-through;
  }

  & li[data-now="true"] {
    color: var(--ink);
    font-weight: 600;
  }
}

/* Radios: an empty ring until chosen. */
fieldset.verdicts input[type="radio"],
.sign-off fieldset input[type="radio"] {
  appearance: none;
  inline-size: 20px;
  block-size: 20px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--mute);
  background: transparent;
  flex: none;

  &:checked {
    box-shadow: inset 0 0 0 2px var(--acc), inset 0 0 0 6px var(--bg);
    background: var(--acc);
  }
}

fieldset.verdicts label:has(input:checked) {
  background: color-mix(in srgb, var(--acc) 10%, transparent);
}

/* History: glyphs big enough to mean something. */
ol.activity-log > li:not(.day)::before {
  font-size: 15px;
}

/* Pricing on a phone: an unestimated capability is one line and its action. */
@media (max-width: 720px) {
  #app-main table.pricing tr[data-estimated="false"] td:not(:first-child):not(:has(a.estimate-link)) {
    display: none;
  }

  #app-main table.pricing:not(.across) tbody td:nth-child(2) {
    display: none;
  }
}

section.time-cost {
  margin-top: 32px;

  & table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 14px;
  }

  & :is(th, td) {
    padding: 10px 6px;
    border-bottom: 1px solid var(--line);
    text-align: end;
    font-family: var(--font-mono);
  }

  & :is(th, td):first-child {
    text-align: start;
    font-family: var(--font-sans);
  }

  & thead th {
    font: 500 11px var(--font-mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mute);
    border-top: 1px solid var(--ink);
  }
}

/* ---- Round 5 ---- */

/* Status shapes big enough to read without colour. */
mark[data-status]::before {
  inline-size: 10px;
  block-size: 10px;
}

mark[data-state]::before,
mark[data-outcome]::before,
mark[data-severity]::before,
mark[data-decision]::before {
  font-size: 14px;
  line-height: 1;
}

/* Radios are circles and checkboxes squares, whatever row they sit in. */
:root input:is([type="checkbox"], [type="radio"]) {
  inline-size: 20px !important;
  block-size: 20px !important;
  min-inline-size: 20px !important;
  max-inline-size: 20px !important;
  min-block-size: 20px !important;
  aspect-ratio: 1;
  padding: 0 !important;
  margin: 0;
  flex: none;
}

:root label:has(> input:is([type="checkbox"], [type="radio"])) {
  min-block-size: 44px;
  align-items: center;
  cursor: pointer;
}

/* The language switch: two chips, the current one filled. */
#app-header li.langs {
  display: flex;
  gap: 4px;

  & > span[aria-hidden] {
    display: none;
  }

  & button {
    min-inline-size: 32px;
    min-block-size: 32px;
    padding: 0 6px;
    border-radius: 6px;
    background: transparent;
    color: var(--mute);
    box-shadow: inset 0 0 0 1px var(--line);
    font: 500 12px var(--font-mono);

    &[aria-pressed="true"] {
      background: var(--ink);
      color: var(--bg);
      box-shadow: none;
    }
  }
}

/* A shared page never runs wider than the phone. */
body.shared {
  overflow-x: clip;

  & main,
  & ul.shared-caps,
  & ul.shared-caps > li,
  & ul.shared-caps details {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  & .shared-body {
    grid-template-columns: minmax(0, 1fr);

    & > * {
      min-inline-size: 0;
    }
  }

  & figure.video {
    margin: 0;
  }

  & video,
  & .shots img {
    max-inline-size: 100%;
    block-size: auto;
  }

  & ol.shared-criteria > li {
    grid-template-columns: 20px minmax(0, 1fr);

    & small {
      grid-column: 2;
    }
  }

  & ul.shared-caps summary {
    min-block-size: 56px;

    & small.has-evidence {
      color: var(--mute);
      font-weight: 400;
    }

    &::after {
      content: "";
      inline-size: 8px;
      block-size: 8px;
      margin-inline: 4px 2px;
      border-right: 2px solid var(--ink);
      border-bottom: 2px solid var(--ink);
      transform: rotate(-45deg);
      transition: transform 0.15s;
      flex: none;
    }
  }

  & ul.shared-caps details[open] > summary::after {
    content: "";
    transform: rotate(45deg);
  }

  & .shared-bar p.state b {
    color: var(--ink);
    font-weight: 500;
  }
}


body.shared #shared-closed {
  max-inline-size: 600px;
  margin-top: 18vh;
}

details.form-toggle.plain > summary::before {
  content: none;
}

/* Helper text sits under its heading, at reading width. */
section.pricing-settings > header,
#costs-across > hgroup {
  display: grid;
  justify-content: start;
  gap: 6px;

  & > p {
    max-inline-size: 70ch;
    margin: 0;
    text-align: start;
  }
}

section.pricing-settings .field {
  & p.hint {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--mute);
    max-inline-size: 32ch;
  }

  & p.locked-currency {
    margin: 0;
    font: 500 22px var(--font-mono);
  }

  &.check-field {
    grid-column: 1 / -1;

    & label.check {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0;
      font-size: 14px;
    }
  }

  & input::placeholder {
    color: var(--mute);
    font-family: var(--font-sans);
  }
}

table.pricing small.id {
  display: inline;
  margin-inline-end: 6px;
}

table.pricing tr.shared td:first-child {
  font-family: var(--font-sans);
  white-space: normal;

  & small {
    display: block;
    color: var(--mute);
  }
}

@media (max-width: 720px) {
  section.pricing-settings .settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  #app-main section.pricing-settings .field input {
    min-block-size: 44px;
  }

  #app-main table.pricing tbody tr {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  :is(#pricing, #costs-across) .chips > button {
    min-inline-size: 44px;
  }
}

table.pricing.across {
  & td small.sub {
    display: block;
    margin-top: 2px;
  }

  & td.no-costs {
    text-align: start;
    font-family: var(--font-sans);
    color: var(--mute);
  }
}

@media (max-width: 720px) {
  #app-main table.pricing.across td.no-costs {
    grid-column: 1 / -1;
  }

  #app-main table.pricing.across td.no-costs::before {
    content: none;
  }
}

/* A request's meta line is one line of text that wraps like a sentence. */
table.requests-across td small.meta {
  display: block;
  margin-top: 4px;

  & span.cap,
  & small.id {
    display: inline;
  }
}

table.requests-across td small.sub {
  display: block;
}

table.requests-across thead th {
  font: 500 11px var(--font-mono);
  color: var(--mute);
}

table.requests-across td time {
  font: 400 13px var(--font-mono);
  color: var(--mute);
  white-space: nowrap;
}

/* History: filters wrap on a phone; a grouped line opens to its changes. */
@media (max-width: 720px) {
  #activity > .chips {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  ol.activity-log > li > small {
    font-size: 12.5px;
  }
}

ol.activity-log {
  & span.to {
    margin-inline-start: 6px;
    font-weight: 500;
  }

  & details.group {
    grid-column: 2 / -1;
    margin-top: 4px;

    & > summary {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-block-size: 32px;
      cursor: pointer;
      font: 500 12px var(--font-mono);
      color: var(--ink);
      list-style: none;

      &::-webkit-details-marker {
        display: none;
      }

      &::after {
        content: "▸";
        color: var(--mute);
      }
    }

    &[open] > summary::after {
      content: "▾";
    }

    & ul {
      margin: 4px 0 0;
      padding: 0;
      list-style: none;
      font-size: 13px;

      & li {
        padding: 4px 0;
        border-top: 1px solid var(--line);
      }

      & time {
        font: 400 12px var(--font-mono);
        color: var(--mute);
        margin-inline-end: 8px;
      }
    }
  }
}

#activity details.older {
  margin-top: 16px;

  & > summary {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 6px;
    cursor: pointer;
    list-style: none;
    font-size: 14px;
  }
}

@media (pointer: coarse), (max-width: 720px) {
  ol.activity-log details.group > summary {
    min-block-size: 44px;
  }
}

/* Stages: labels readable, and where you are said once, under the strip. */
ol.stages > li {
  font-size: 13px;
  color: color-mix(in srgb, var(--ink) 62%, transparent);

  &[aria-current="step"] > span {
    display: none;
  }
}

p.stage-now {
  margin: 12px 0 0;
  font-size: 15px;
}

/* The account button says Menu on a phone, where it holds the navigation. */
#app-header details.account > summary .menu-word,
#app-header details.account > summary .menu-count {
  display: none;
}

@media (max-width: 720px) {
  ol.stages + p.stage-now {
    margin-top: 12px;
  }

  #app-header details.account > summary {
    inline-size: auto;
    min-inline-size: 44px;
    padding: 0 6px 0 14px;
    border-radius: 22px;
    display: inline-flex;
    gap: 8px;
    align-items: center;

    & .menu-word {
      display: inline;
      font: 500 14px var(--font-sans);
    }

    & .menu-count {
      display: inline;
      font: 500 12px var(--font-mono);
      color: var(--acc);
    }

    & .initials {
      display: inline-grid;
      place-items: center;
      inline-size: 32px;
      block-size: 32px;
      border-radius: 50%;
      background: var(--bg);
      font-size: 12px;
    }
  }

  /* The application's tabs scroll in one row, counts and all. */
  #app-main .app-head > nav.tab-row {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 0 18px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: -16px;
    padding-inline: 16px;
    mask-image: linear-gradient(to right, #000 85%, transparent);

    & > a {
      flex: none;
      display: inline-flex;
      align-items: center;
      min-block-size: 44px;
    }
  }

  details.tab-menu.narrow-only {
    display: none !important;
  }

  /* A capability row on a phone: who it serves is said on the page itself. */
  #application .caplist a > span:nth-child(3) {
    display: none;
  }
}

/* Access: the toggle is quiet once open; the form's Invite is the one primary. */
#access details.invite {
  & > summary {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);

    & .when-open {
      display: none;
    }
  }

  &[open] > summary {
    background: transparent;
    color: var(--ink);
    border-color: var(--line);

    &::before {
      content: none;
    }

    & .when-open {
      display: inline;
    }

    & .when-closed {
      display: none;
    }
  }
}

#access ol.invite-rows button.remove-row {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 20px;
  line-height: 1;
}

#access .people-list a.quiet-link {
  display: inline-flex;
  align-items: center;
  min-block-size: 36px;
  font-size: 13px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Remove and Revoke stay quiet until they are meant. */
:is(#access, #people) details.inline-edit.danger > summary {
  color: var(--mute);
  border-color: var(--line);

  &:hover,
  &:focus-visible {
    color: var(--blocked);
    border-color: var(--blocked);
  }
}

@media (max-width: 720px) {
  #access ol.invite-rows > li {
    padding: 14px 0;
    border: 0;
    border-radius: 0;
    border-top: 1px solid var(--line);
  }

  #access ol.invite-rows button.remove-row {
    inline-size: 44px;
    block-size: 44px;
  }

  #access .people-list .row-actions :is(button, a.button, details > summary),
  #access .people-list a.quiet-link {
    min-block-size: 44px;
    block-size: auto;
  }

  #access .people-list .role mark {
    margin-inline-start: 0;
  }
}

/* Which evidence counts: a two-way switch, the chosen side filled. */
p.evidence-kind button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);

  &::before {
    content: none;
  }
}

/* Criterion actions are buttons you can see. */
ol.criteria button.ghost.small {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 10px;
  color: var(--ink);

  &:hover,
  &:focus-visible {
    border-color: var(--ink);
  }
}

/* A sign-off that is not ready yet still looks like the page's main action. */
section.decide .sign-off > button:disabled,
.sign-off > button:disabled {
  background: var(--ink);
  color: var(--bg);
  box-shadow: none;
  opacity: 0.45;
}

.sign-off p.caution a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* The sign-off options: the whole card is the target, the radio centred. */
.sign-off fieldset label,
fieldset.verdicts label {
  align-items: center;
  min-block-size: 52px;
  padding-block: 10px;
}

/* Slices: an overrun is the first thing the tab says. */
p.variance-headline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 18px 0 0;
  padding: 12px 16px;
  border-inline-start: 3px solid var(--line);
  background: var(--surf);
  border-radius: 0 8px 8px 0;
  font-size: 15px;

  & b {
    font: 500 18px var(--font-mono);
  }

  &[data-variance="over"] {
    border-inline-start-color: var(--blocked);

    & span {
      color: var(--blocked);
    }
  }
}

#capability[data-tab="slices"] > header p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

@media (max-width: 720px) {
  table.slices[data-noevents] td.events {
    display: none;
  }
}

/* One status, under the request's title, worded as in the list. */
#request hgroup.request-title p.status {
  margin: 10px 0 0;
}

#request p.decline-means {
  margin: 8px 0 0;
  font-size: 13px;
}

#request section.triage ol.triage-steps > li {
  & > p.mute {
    color: var(--ink);
  }

  &[data-now="true"]::before {
    box-shadow: inset 0 0 0 2px var(--ink);
  }
}

/* What happens next: each step a shape and a word, nothing struck out. */
section.next-steps {
  & ol {
    list-style: none;
    padding: 0;
  }

  & li {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: baseline;

    &::before {
      content: "○";
      color: var(--mute);
    }
  }

  & li[data-done="true"] {
    text-decoration: none;
    color: var(--ink);

    &::before {
      content: "✓";
      color: var(--ink);
      font-weight: 700;
    }
  }

  & li[data-now="true"] {
    &::before {
      content: "●";
      color: var(--acc);
    }

    &::after {
      content: attr(data-now-label);
      font: 500 11px var(--font-mono);
      text-transform: uppercase;
      color: var(--ink);
      padding: 2px 6px;
      border-radius: 4px;
      box-shadow: inset 0 0 0 1px var(--ink);
    }
  }
}

/* A change request on a phone: read it first, then decide. */
@media (max-width: 900px) {
  #request .request-body:not([data-kind="defect"]) {
    grid-template-areas: "facts" "side" "thread";
  }
}

/* Home: Needs you runs the page's width, its action at the right edge. */
#home ol.ledger.needs,
#application ol.ledger.needs {
  max-inline-size: none;
}

#home > .columns {
  margin-top: 48px;
}

#home p.summary {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;

  & > span {
    white-space: nowrap;
  }
}

/* People and Organizations: one form pattern, fields at reading width and the
   button at its own width on the left. */
:is(#people, #organizations) {
  & section.form-card,
  & .panels > section {
    max-inline-size: 640px;
  }

  & .panels > section p small,
  & .panels > section p {
    font-size: 14px;
  }

  & :is(section.form-card, .panels > section) button {
    inline-size: auto;
    justify-self: start;
    align-self: start;
  }
}

#people .who mark[data-state="waiting"] {
  margin-top: 2px;
}

#organizations {
  & h2 small.org-role {
    margin-inline-start: 10px;
    font: 400 14px var(--font-sans);
    color: var(--mute);
    letter-spacing: 0;
  }

  & a.org-app {
    display: grid;
    gap: 2px;
    min-block-size: 44px;
    align-content: center;
    color: var(--ink);
    text-decoration: none;

    & b {
      font-weight: 500;
    }

    & small {
      color: var(--mute);
    }

    &:hover b {
      text-decoration: underline;
    }
  }

  & span.member {
    display: grid;
    gap: 2px;

    & b {
      font-weight: 500;
    }

    & small {
      font: 400 12px var(--font-mono);
      color: var(--mute);
    }
  }

  & .panels:has(> section.add-member) {
    display: block;
    margin-top: 16px;
  }

  & section.add-member {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 160px) auto;
    gap: 10px;
    align-items: end;
    padding: 0;
    border: 0;
    background: none;
    max-inline-size: none;

    & h3 {
      grid-column: 1 / -1;
      margin: 0;
      font-size: 14px;
    }
  }

  & .inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;

    & label {
      flex: 1 1 260px;
    }
  }
}

@media (max-width: 720px) {
  #organizations section.add-member {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The evidence drop zone: the native pickers hide behind labelled targets. */
form.upload fieldset.dropzone {
  justify-items: center;
  text-align: center;
  padding: 28px 22px;

  & label.pick {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 10px 18px;
    cursor: pointer;
    font-size: 15px;

    & b {
      font-weight: 500;
      text-decoration: underline;
      text-underline-offset: 3px;
    }
  }

  & label.pick-files {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    cursor: pointer;
    font-size: 13px;
    color: var(--mute);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  & label:focus-within {
    outline: 2px solid var(--acc);
    outline-offset: 2px;
    border-radius: 6px;
  }

  & input[type="file"] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    overflow: hidden;
  }

  & p.chosen {
    margin: 0;
    font-size: 13px;
  }
}

ul.need-list mark[data-state] {
  justify-self: start;
  inline-size: auto;
}

@media (max-width: 720px) {
  ul.need-list > li:not(.head) {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;

    & > a {
      grid-column: 1;
    }

    & > mark {
      grid-column: 2;
      grid-row: 1;
    }

    & > code {
      grid-column: 1 / -1;
    }
  }
}

/* Acceptance: how long is left, said beside the window. */
small.days-left {
  margin-inline-start: 8px;
  font: 400 13px var(--font-mono);
  color: var(--mute);

  &[data-soon="true"] {
    color: var(--part-ink);

    &::before {
      content: "△ ";
    }
  }
}

#acceptance ol.decisions-list {
  max-inline-size: 760px;
}

/* The declaration is the weightiest sentence on the page: a full-row target. */
#acceptance .sign-off label.tested,
#capability .sign-off label.tested {
  display: flex;
  align-items: center;
  gap: 12px;
  min-block-size: 48px;
  font: 400 15px var(--font-sans);
  max-inline-size: 760px;

  & input[type="checkbox"] {
    inline-size: 22px !important;
    block-size: 22px !important;
    min-inline-size: 22px !important;
    max-inline-size: 22px !important;
  }
}

ul.outcomes > li:not(.head) > a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  color: var(--ink);

  &::after {
    content: "→";
    margin-inline-start: 6px;
    color: var(--mute);
  }
}

@media (max-width: 720px) {
  ul.outcomes > li:not(.head) {
    align-items: start;

    & > mark[data-status] {
      align-self: start;
      margin-top: 9px;
    }
  }

  ul.need-list > li:not(.head) > mark {
    margin-top: 2px;
  }
}

/* The cost chart is context, not the page's action: a quieter tint. */
figure.cost-chart {
  & .bars [data-key="ai"],
  & ul [data-key="ai"] {
    background: color-mix(in srgb, var(--acc) 45%, transparent);
    box-shadow: inset 0 0 0 1px var(--acc);
  }

  & .bars [data-key="hosting"] {
    min-block-size: 4px;
    background: repeating-linear-gradient(45deg, var(--ink) 0 2px, transparent 2px 4px);
  }

  & ul [data-key="hosting"] {
    background: repeating-linear-gradient(45deg, var(--ink) 0 2px, transparent 2px 4px);
  }
}

h3.queue-app a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  color: var(--ink);
}

@media (pointer: coarse), (max-width: 720px) {
  details.call > summary,
  #activity details > summary,
  details.covered > summary {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
  }
}

/* The calibration scale: five labels, each centred on its own gridline. */
table.calibration th .axis.ticks5 {
  position: relative;
  display: block;
  block-size: 16px;
  margin-top: 4px;

  & > span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    white-space: nowrap;
    font: 400 11px var(--font-mono);
    color: var(--mute);
  }

  & > span:nth-child(1) { left: 0; transform: none }
  & > span:nth-child(2) { left: 25% }
  & > span:nth-child(3) { left: 50% }
  & > span:nth-child(4) { left: 75% }
  & > span:nth-child(5) { left: 100%; transform: translateX(-100%) }
}

/* The current rate is a tall dashed line with a ▼ above; the median a short bar. */
ul.calibration-legend [data-key="rate"]::before {
  content: "▼";
  position: relative;
  top: -12px;
  left: -5px;
  font-size: 9px;
}

table.calibration .track [data-key="rate"]::before {
  content: "▼";
  position: absolute;
  top: -12px;
  left: -6px;
  font-size: 9px;
  color: var(--ink);
}

#import details.format {
  margin: 16px 0;

  & > summary {
    display: inline-flex;
    align-items: center;
    min-block-size: 40px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  & pre {
    overflow-x: auto;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font: 400 12.5px/1.55 var(--font-mono);
  }
}

#import textarea::placeholder {
  color: color-mix(in srgb, var(--ink) 45%, transparent);
}

#error-page {
  max-inline-size: 600px;

  & h1 {
    font-size: 44px;
  }

  & > p:not(.lbl) {
    font-size: 16px;
  }

  & p.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
}

/* Compact tiles: a legend of the shapes above them, names on two lines,
   and tiles that fill the row. */
.capgrid > p.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 12px;
  color: var(--mute);

  & [data-legend]::before {
    margin-inline-end: 5px;
    font-size: 13px;
    color: var(--ink);
  }

  & [data-legend="built"]::before { content: "■" }
  & [data-legend="partly_built"]::before { content: "◧" }
  & [data-legend="planned"]::before { content: "□" }
  & [data-legend="blocked"]::before { content: "●" }
  & [data-legend="deferred"]::before { content: "⊘" }
}

.capgrid > div > span:has(> a) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 6px;
}

.capgrid a {
  inline-size: auto;
  block-size: auto;
  min-block-size: 58px;
  padding: 8px 30px 8px 10px;
  justify-content: flex-start;
  border-radius: 4px;

  &[data-status="blocked"] {
    border-radius: 4px;
  }

  & > span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    font: 500 12px/1.3 var(--font-sans);
    opacity: 1;
  }

  &::before {
    font-size: 14px;
    top: 7px;
    right: 9px;
  }

  &[data-video="true"]::after {
    top: auto;
    bottom: 8px;
    right: 10px;
  }
}

@media (max-width: 720px) {
  .capgrid > div {
    grid-template-columns: 26px minmax(0, 1fr) auto;
    row-gap: 10px;

    & > b { grid-row: 1; grid-column: 1 }
    & > span:not(:has(> a)) { grid-row: 1; grid-column: 2 }
    & > data { display: block; grid-row: 1; grid-column: 3 }
    & > span:has(> a) {
      grid-row: 2;
      grid-column: 1 / -1;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}

section.time-cost small.id {
  display: inline;
  margin-inline-end: 6px;
}

body.shared .shared-bar p.state {
  display: block;
}

/* Which evidence counts: a two-way switch that looks like one. */
#app-main p.evidence-kind {
  & button {
    min-block-size: 36px;
    padding: 0 14px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--mute);
    font: 500 13px var(--font-sans);
  }

  & button:nth-of-type(1) { border-radius: 6px 0 0 6px }
  & button:nth-of-type(2) { border-radius: 0 6px 6px 0; border-inline-start: 0 }

  & button[aria-pressed="true"] {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);

    &::before {
      content: "✓ ";
    }
  }
}

/* Held review: both answers the same height, told apart by fill. */
section.held-review footer button,
article[data-held] footer :is(button, details > summary) {
  min-block-size: 44px;
}

/* A sign-off not ready yet: outlined, its label readable. */
section.decide .sign-off > button:disabled,
.sign-off > button:disabled {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
  opacity: 1;

  &::before {
    content: "– ";
    color: var(--mute);
  }
}

/* Capability cells: Blocked is a cross, not a corner radius away from Built. */
nav.area-cells a[data-status="blocked"]::after,
.capgrid a[data-status="blocked"]::before {
  content: "✕" !important;
}

nav.area-cells a::after {
  font-size: 10px !important;
}

section.time-cost {
  overflow-x: auto;
}

/* ---- Round 6 ---- */

/* Stages: done ones carry a tick; on a phone only the bars show, and the
   current stage is said in words under them. */
ol.stages > li[data-done="true"]::before {
  content: "✓ ";
}

@media (max-width: 720px) {
  ol.stages > li,
  ol.stages > li[aria-current="step"] {
    font-size: 0;
  }

  ol.stages > li[data-done="true"]::before {
    content: none;
  }
}

/* The shared page's content sits in the same column as its bar and footer. */
body.shared main {
  max-inline-size: 1040px;
}

body.shared .shots {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  & figure {
    margin: 0;
    inline-size: 160px;
  }

  & img {
    inline-size: 160px;
    block-size: auto;
    border-radius: 6px;
  }

  & figcaption {
    font: 400 11px var(--font-mono);
    color: var(--mute);
  }
}

/* A request's meta line reads as one sentence. */
#requests-across table td small.meta {
  display: block !important;

  & span.cap,
  & small.id {
    display: inline !important;
  }
}

/* Planned is a hollow square everywhere; Built a filled one. */
mark[data-status="planned"]::before {
  background: transparent !important;
  box-shadow: inset 0 0 0 1.5px currentColor !important;
}

/* Every disclosure is a full-height row with a visible marker. */
@media (pointer: coarse), (max-width: 720px) {
  #app-main details > summary {
    min-block-size: 44px;
  }
}

/* Destructive actions: one style everywhere, coral outline. */
details.inline-edit.danger > summary,
:is(#access, #people) details.inline-edit.danger > summary {
  color: var(--blocked);
  border-color: color-mix(in srgb, var(--blocked) 60%, transparent);
}

/* One application header on every tab. */
#app-main .app-head h1,
#app-main .app-head[data-sub] h1 {
  font-size: 40px !important;
  letter-spacing: -0.025em;
}

#app-main :is(#home, #requests-across, #costs-across, #calibration, #people, #organizations) h1,
#app-main #agents[data-across] h1 {
  font-size: 40px !important;
}

/* Home: rows say they open something; the summary counts are separated. */
#home table td:first-child > a::after {
  content: " →";
  color: var(--mute);
}

#home p.summary > span::before {
  content: "·";
  margin-inline-end: 6px;
  color: var(--mute);
}

#home > .columns {
  margin-top: 32px;
}

ul.need-list > li > a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}

#agents .cost-kpis a {
  color: var(--acc);
  text-decoration: underline;
  text-underline-offset: 3px;
}

#access section.share-links > p {
  max-inline-size: 70ch;
}

#organizations .panels:has(> section.add-member) section.add-member button {
  align-self: end;
}

#organizations > .panels {
  margin-top: 32px;
}

#access ol.invite-rows label span.row-error {
  font-size: 13px;
  color: var(--blocked);

  &::before {
    content: "! ";
    font-weight: 700;
  }
}

/* The history's filter chips are its legend: each carries its rows' glyph. */
#activity > .chips button {
  &[data-kind="signoff"]::before { content: "✓"; margin-inline-end: 6px }
  &[data-kind="requests"]::before { content: "⇄"; margin-inline-end: 6px }
  &[data-kind="evidence"]::before { content: "▶"; margin-inline-end: 6px }
  &[data-kind="register"]::before { content: "◆"; margin-inline-end: 6px }
}

/* ---- Round 7 ---- */

/* Blocked is a cross wherever a status has a shape. */
mark[data-status="blocked"]::before {
  content: "✕" !important;
  inline-size: auto !important;
  block-size: auto !important;
  background: none !important;
  border-radius: 0 !important;
  font: 700 11px/1 var(--font-sans);
  color: var(--blocked-ink);
}

[data-mark="blocked"] {
  background: none !important;
  border-radius: 0 !important;
  position: relative;

  &::before {
    content: "✕";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font: 700 10px/1 var(--font-sans);
    color: var(--blocked);
  }
}

/* The capability cells: glyphs that can be read, the current one underlined. */
nav.area-cells a {
  &[data-status="partly_built"] {
    background: none;
    padding-bottom: 0;
  }

  &::after {
    font-size: 12px !important;
    margin-inline-start: 4px;
  }

  &[aria-current="page"] {
    outline: none;
    box-shadow: inset 0 -3px 0 var(--ink), inset 0 0 0 1.5px var(--ink);
  }
}

/* A sign-off not ready: a muted fill, no stray dash. */
section.decide .sign-off > button:disabled,
.sign-off > button:disabled {
  background: var(--surf2, var(--surf));
  color: var(--mute);
  box-shadow: inset 0 0 0 1px var(--line);

  &::before {
    content: none;
  }
}

/* Which evidence counts, on a phone: the label above a full-width switch. */
@media (max-width: 720px) {
  #app-main p.evidence-kind {
    display: grid;
    grid-template-columns: 1fr 1fr;

    & > .lbl {
      grid-column: 1 / -1;
      margin: 0 0 6px;
    }

    & button {
      min-block-size: 44px;
    }
  }
}

/* The defect's capability reads as a name, not a shout. */
#request hgroup.request-title > p:first-child a {
  text-transform: none;
  letter-spacing: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Capabilities under a request look like the links they are. */
#request dl.request-facts dd > a,
table.requests td small.cap-ref a {
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}

/* Time and cost on a phone: a card per row, labels beside values. */
@media (max-width: 720px) {
  section.time-cost table,
  section.time-cost tbody,
  section.time-cost tr,
  section.time-cost td {
    display: block;
  }

  section.time-cost thead {
    display: none;
  }

  section.time-cost tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }

  section.time-cost td {
    border: 0 !important;
    padding: 0 !important;
    text-align: start !important;

    &:first-child {
      grid-column: 1 / -1;
      font-weight: 500;
    }

    &[data-label]::before {
      content: attr(data-label);
      display: block;
      font: 500 10px var(--font-mono);
      text-transform: uppercase;
      color: var(--mute);
    }
  }
}

span.ai {
  font: 600 0.85em var(--font-mono);
  letter-spacing: 0.04em;
}

#request section.waiting-card {
  margin-bottom: 16px;

  & h2 {
    margin: 0 0 6px;
    font-size: 17px;
  }

  & p {
    margin: 0;
    font-size: 14px;
    color: var(--mute);
  }
}

#request hgroup.request-title p.status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#request p.row-buttons > span.mute {
  align-self: center;
  margin-inline-end: 4px;
}

/* The overview's columns start together, right under the stage block. */
#application .app-body {
  margin-top: 28px;

  & > section > section.app-needs {
    margin-top: 0;

    & > h2 {
      margin-top: 0;
    }
  }

  & > aside > section:first-child > h2 {
    margin-top: 0;
  }
}

details.advance > summary.quiet {
  min-block-size: 44px;
}

/* Waiting for someone is a neutral outline; amber means Partly built only. */
mark[data-state="waiting"],
mark[data-decision="awaiting"] {
  box-shadow: inset 0 0 0 1.5px var(--ink) !important;
  color: var(--ink);
}

/* On Requests across, the rows waiting on Nullsoft stand out. */
#requests-across mark[data-state="open"] {
  box-shadow: inset 0 0 0 2px var(--ink);
  font-weight: 600;
}

@media (max-width: 720px) {
  #requests-across span.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* Compact tiles say their status in a word too. */
.capgrid a > small.word {
  font: 500 10px var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* The tab strip on a phone fades at both edges, so it reads as scrollable. */
@media (max-width: 720px) {
  #app-main .app-head > nav.tab-row {
    mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
    scroll-padding-inline: 24px;
  }
}

/* Disclosures: a chevron, a gap, a full-height row. */
details.call > summary,
#app-main details.call > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 44px !important;
  font: 500 13px var(--font-sans);
}

/* Acceptance step 1: cards, declaration and button share one measure. */
#acceptance section.decide {
  & > *,
  & .sign-off {
    max-inline-size: 760px;
  }
}

#agents .cost-kpis a {
  font-family: var(--font-sans);
  color: var(--ink);

  &::before {
    content: "△ ";
    color: var(--part-ink);
  }
}

ul.tokens .token-actions {
  gap: 20px;
}

/* Calibration: no gridlines inside the plot, so the current rate stands alone. */
table.calibration .track {
  background: none !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--line);
}

/* Pricing on a phone: one card per capability, price and margin on desktop. */
@media (max-width: 720px) {
  #app-main table.pricing:not(.across) tbody td:nth-child(6),
  #app-main table.pricing:not(.across) tbody td:nth-child(7) {
    display: none;
  }

  #app-main table.pricing:not(.across) tr[data-estimated="false"] td:has(a.estimate-link)::before {
    content: none;
  }

  body.shared ul.shared-caps summary small.has-evidence {
    font-size: 0;

    &::before {
      content: "▶";
      font-size: 12px;
    }
  }
}

/* Destructive row actions: red words, no box, a confirm behind them. */
details.inline-edit.danger > summary,
:is(#access, #people, #organizations) details.inline-edit.danger > summary {
  border-color: transparent !important;
  background: transparent;
  color: var(--blocked);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Invite rows: fields on one line, the error under the email, × level with
   the fields. */
#access ol.invite-rows > li {
  align-items: start;

  & > button.remove-row {
    align-self: start;
    margin-top: 22px;
  }
}

#organizations section.add-member button {
  margin: 0;
  align-self: end;
}

table.pricing.across td small.target {
  display: block;
  font: 400 11px var(--font-sans);
  color: var(--mute);
}

span.open-defects {
  margin-inline-start: 6px;
  font-weight: 600;
  color: var(--ink);
}

.capgrid > p.legend [data-legend="blocked"]::before {
  content: "✕";
}

@media (min-width: 721px) {
  .capgrid > div {
    grid-template-columns: 26px 120px minmax(0, 1fr) 48px;
  }
}

#application .app-body > section > section.app-needs,
#application .app-body > section > section.app-needs > h2 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#app-main .app-body > section,
#app-main .app-body > aside {
  margin-top: 0 !important;
}

#app-main section.app-needs {
  margin-top: 0 !important;
}

#request .waiting-card {
  margin-bottom: 16px;

  & > h2 {
    margin: 0 0 6px;
    font-size: 17px;
  }

  & > p {
    margin: 0;
    font-size: 14px;
    color: var(--mute);
  }

  & > details.form-toggle {
    margin-top: 14px;
  }
}

p.outcome-now {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;

  & small {
    color: var(--mute);
  }
}

@media (max-width: 720px) {
  #capability .cap-body > div {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  #capability .cap-body {
    row-gap: 24px;
  }

  .sign-off p.caution a {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
  }

  #activity > .chips {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, #000 85%, transparent);

    & > button {
      flex: none;
    }
  }

  table.slices td.events:has(> span.mute) {
    display: none;
  }
}

/* A history row's capability is a link to it. */
ol.activity-log a.subject {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}

/* ---- Round 8 ---- */

/* One shape per status, the same in the bar, the legend, the tiles and the
   cells: Built ■ filled, Partly built ⬓ bottom half, Planned □ outline,
   Blocked ✕, Deferred ⧄ slashed. The bar's segments carry patterns too. */
figure.tally .bar {
  & > span[data-status="partly_built"] {
    background: linear-gradient(to top, var(--part) 0 50%, transparent 50%) !important;
    box-shadow: inset 0 0 0 1.5px var(--part);
  }

  & > span[data-status="blocked"] {
    background:
      repeating-linear-gradient(45deg, transparent 0 5px, var(--blocked-ink) 5px 6px),
      repeating-linear-gradient(-45deg, transparent 0 5px, var(--blocked-ink) 5px 6px),
      var(--blocked) !important;
  }
}

.capgrid a,
nav.area-cells a {
  &[data-status="partly_built"]::before,
  &[data-status="partly_built"]::after {
    content: "⬓" !important;
  }

  &[data-status="deferred"]::before,
  &[data-status="deferred"]::after {
    content: "⧄" !important;
  }
}

nav.area-cells a::before {
  content: none !important;
}

.capgrid a::after {
  content: none;
}

.capgrid a[data-video="true"]::after {
  content: "▶" !important;
}

.capgrid > p.legend {
  & [data-legend="partly_built"]::before { content: "⬓" }
  & [data-legend="deferred"]::before { content: "⧄" }
}

.capgrid a > small.word {
  font-size: 11px;
}

.capgrid a > span {
  font-size: 13px;
}

/* Pills never break inside themselves. */
mark[data-state],
mark[data-decision],
mark[data-severity] {
  white-space: nowrap;
}

/* Pricing on a phone: what it cost, what it sells for, and the margin. */
@media (max-width: 720px) {
  #app-main table.pricing:not(.across) tbody td:nth-child(6),
  #app-main table.pricing:not(.across) tbody td:nth-child(7) {
    display: block;
  }

  #app-main table.pricing:not(.across) tbody td:nth-child(3),
  #app-main table.pricing:not(.across) tbody td:nth-child(5) {
    display: none;
  }

  #app-main table.pricing:not(.across) tr[data-estimated="false"] td:nth-child(3) {
    display: block;
  }
}

/* Inline actions are words in ink; lime stays for status. */
ul.outcomes span.outcome > a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-inline-start: 8px;
}

button:disabled,
button.secondary:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed;
}

/* The invite form: the level's description sits under its select. */
#access ul.levels {
  margin-top: 4px !important;
}

#access label.default-level {
  margin-bottom: 0;
}

/* A capability row on a phone: evidence under the name, nothing for a dash. */
@media (max-width: 720px) {
  #application .caplist a > span:last-child {
    padding-inline-start: 22px;
  }

  #application .caplist a > span.mute:last-child {
    display: none;
  }
}

#application .caplist small mark[data-state="waiting"],
#application .caplist small span.open-defects {
  margin-inline-start: 6px;
}

blockquote.held-comment {
  margin: 0;
  padding: 10px 14px;
  border-inline-start: 3px solid var(--line);
  font-size: 14px;
  white-space: pre-wrap;
}

/* The sign-off row's mark sits in the gutter, so every row starts together. */
ol.ledger.needs > li[data-kind="signoff"],
ol.ledger.needs > li[data-kind="lead"] {
  padding-inline-start: 0;
  box-shadow: -10px 0 0 -7px var(--acc);
}

/* People: the actions column keeps its slots, so Rename always lines up. */
ul.people-list > li > .row-actions {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: end;
  gap: 8px;

  & > :only-child {
    grid-column: 1;
  }
}

/* One control height for inputs, selects and buttons in a form row. */
:is(#people, #organizations, #access) :is(input:not([type="checkbox"], [type="radio"]), select, button) {
  min-block-size: 44px;
}

/* A role is plain words; pills are for states. */
#access .people-list .role mark[data-role] {
  background: none !important;
  box-shadow: none !important;
  padding: 0;
  font: 500 14px var(--font-sans);
  color: var(--ink);
}

.capgrid a[data-status]:not([data-video="true"])::after {
  content: none !important;
}

nav.area-cells a[data-status="partly_built"]::before,
nav.area-cells a[data-status="deferred"]::before {
  content: none !important;
}

/* ---- Round 9 ---- */

/* A capability on a phone: what you must act on (sign-off, review,
   outcome) comes before the evidence; the comments after it. */
@media (max-width: 720px) {
  #capability .cap-body {
    display: flex;
    flex-direction: column;

    & > div { order: 1 }

    & > aside {
      display: contents;

      & > section.sign-off,
      & > section.held-review {
        order: 0;
      }

      & > section:not(.sign-off):not(.held-review) {
        order: 2;
      }
    }
  }

  #capability > header a.button.narrow-only[href="#held-review"],
  #capability > header a.button.narrow-only[href="#signoff-heading"] {
    display: none;
  }
}

/* A sign-off that is not ready can still be seen. */
.sign-off > button:disabled,
section.decide .sign-off > button:disabled {
  opacity: 1 !important;
  color: color-mix(in srgb, var(--ink) 60%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 35%, transparent);
  background: transparent;
}

/* The defect's capability: one link, in sans, a full target on a phone. */
#request hgroup.request-title > p:first-child a {
  font-family: var(--font-sans);
  text-decoration: none;
  border-bottom: 1px solid var(--line);

  & span.cap,
  & small.id {
    text-decoration: none;
  }
}

@media (max-width: 720px) {
  #request hgroup.request-title > p:first-child a {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
  }

  #activity > .chips {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    mask-image: none !important;
  }
}

/* Overruns in the light theme are dark enough to read. */
:root[data-theme="light"] [data-variance="over"],
:root[data-theme="light"] p.variance-headline[data-variance="over"] span {
  color: color-mix(in srgb, var(--blocked) 70%, #000);
}

a.button.disagree {
  margin-top: 6px;
}

/* Outcome cards: the radio and its words on one axis. */
fieldset.verdicts label,
.sign-off fieldset label {
  display: flex !important;
  align-items: center !important;

  & > span,
  & > span > b {
    line-height: 20px;
  }
}

/* Pricing on a phone: estimate, actual and variance, then price and margin. */
@media (max-width: 720px) {
  #app-main table.pricing:not(.across) tbody td:nth-child(3),
  #app-main table.pricing:not(.across) tbody td:nth-child(5),
  #app-main table.pricing:not(.across) tbody td:nth-child(6),
  #app-main table.pricing:not(.across) tbody td:nth-child(7) {
    display: block;
  }

  #app-main table.calibration td.track-cell::before {
    display: block;
    margin-bottom: 16px;
  }
}

@media (max-width: 720px) {
  #app-main table.pricing:not(.across) tr[data-estimated="false"] td:nth-child(n+4) {
    display: none;
  }
}

/* ---- Round 9, continued ---- */

/* Deferred is drawn, not typed: a square with a rising slash, the same shape
   in the summary, the compact legend, the tiles and the cells. */
.capgrid a[data-status="deferred"]::before,
.capgrid > p.legend [data-legend="deferred"]::before,
nav.area-cells a[data-status="deferred"]::after {
  content: "" !important;
  display: inline-block;
  inline-size: 11px;
  block-size: 11px;
  box-sizing: border-box;
  border: 1.5px solid currentColor;
  background: linear-gradient(to top right, transparent calc(50% - 0.75px), currentColor calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px));
  vertical-align: -1px;
}

/* Question ids in mono can't be read as numbers. */
:root {
  font-variant-numeric: slashed-zero;
}

/* Home: the current stage is the tall tick. */
ol.ticks > li[aria-current="step"] {
  block-size: 7px !important;
  align-self: end;
}

#home table td > a.count {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

#home table td > span.count-none {
  color: var(--mute);
}

/* The overview's side lists: each request a full-width row link. */
#application aside ul.requests > li > a,
#application aside ul.decisions small > a {
  display: block;
  min-block-size: 44px;
  padding-block: 10px;
}

@media (max-width: 720px) {
  #application aside .keep .actions a {
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
  }
}

#organizations a.org-app b::after {
  content: " →";
  color: var(--mute);
}

#access details.invite[open] > summary {
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

@media (max-width: 720px) {
  #capability > header a.button.narrow-only[href="#held-review"],
  #capability > header a.button.narrow-only[href="#signoff-heading"] {
    display: none !important;
  }
}

/* ---- Round 10 ---- */

@media (max-width: 720px) {
  #capability .cap-body > div,
  #capability .cap-body > aside > * {
    flex: none !important;
  }

  /* The lead watches the evidence first, then signs off; Nullsoft's review
     still comes first. */
  #capability .cap-body > aside > section.sign-off {
    order: 1 !important;
  }

  #capability .cap-body > div {
    order: 0 !important;
  }

  #capability .cap-body > aside > section.held-review {
    order: -1 !important;
  }

  #capability > header a.button.narrow-only[href="#signoff-heading"] {
    display: inline-flex !important;
  }
}

small.step-state {
  margin-inline-start: 10px;
  font: 500 11px var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mute);

  &[data-step="yours"] {
    color: var(--ink);
    padding: 2px 6px;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px var(--ink);
  }
}

p.variance-headline > a {
  flex-basis: 100%;
  font-size: 13px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

#application .caplist span.open-defects {
  white-space: nowrap;
}

/* Compact view: the grid's legend is the one legend. */
#application:has(.capgrid:not([hidden])) figure.tally figcaption {
  display: none;
}

#people p.invite-jump {
  margin: 0 0 16px;
}

ul.people-list details.inline-edit > summary {
  min-block-size: 44px;
}

#acceptance section.decide p.deadline {
  margin: 4px 0 12px;
  font: 500 14px var(--font-sans);
}

@media (min-width: 721px) {
  ul.people-list > li {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 330px;
  }

  ul.people-list > li > .row-actions {
    grid-template-columns: repeat(3, auto);
    align-items: center;
  }
}

@media (max-width: 720px) {
  ul.people-list > li {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  ul.people-list > li > .row-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    gap: 8px;
  }
}

/* ---- Round 11 ---- */

/* The status sits under the title on both of a capability's tabs. */
#capability > header p.cap-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
}

/* The current capability cell is filled in ink. */
nav.area-cells a[aria-current="page"] {
  background: var(--ink) !important;
  color: var(--bg) !important;
  box-shadow: none !important;
}

/* Outcome first for Nullsoft on a phone; the lead's sign-off after the
   evidence. */
@media (max-width: 720px) {
  #capability .cap-body > aside > section.sign-off:has(#signed-heading) {
    order: -2 !important;
  }
}

/* Turning a held change down is a button of the same height. */
details.turn-down > summary {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding: 0 16px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--blocked) 70%, transparent);
  color: var(--blocked);
  cursor: pointer;
  list-style: none;
  font: 500 14px var(--font-sans);
}

/* Criterion actions look like buttons. */
#app-main ol.criteria button.ghost.small {
  border: 1px solid var(--line) !important;
  border-radius: 6px;
  padding: 0 10px !important;
  min-block-size: 36px;
}

ol.criteria small.unseen {
  font: 400 12px var(--font-sans);
  color: var(--mute);
  white-space: nowrap;
}

/* Checkboxes: an outlined square until ticked, never a grey slab. */
:root input[type="checkbox"] {
  appearance: none;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1.5px var(--ink);
  background: transparent;
  display: inline-grid;
  place-items: center;

  &:checked {
    background: var(--acc);
    box-shadow: none;

    &::after {
      content: "✓";
      font: 700 14px/1 var(--font-sans);
      color: var(--acc-ink, #000);
    }
  }

  &:focus-visible {
    outline: 2px solid var(--acc);
    outline-offset: 2px;
  }
}

fieldset.verdicts input[type="radio"],
.sign-off fieldset input[type="radio"] {
  inline-size: 24px !important;
  block-size: 24px !important;
  min-inline-size: 24px !important;
  max-inline-size: 24px !important;
}

/* A thread's count sits beside its heading; replies line up with the text. */
section[id^="thread-"] > header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  justify-content: start;

  & > data {
    margin: 0;
  }
}

ol.thread button[data-reply] {
  padding-inline: 0 !important;
  margin-inline-start: 0;
}

/* The disabled sign-off's reason sits under it. */
.sign-off {
  display: flex;
  flex-direction: column;

  & > p.gate {
    order: 1;
  }
}

/* The slice legend on a phone: a two-by-two grid. */
@media (max-width: 720px) {
  ul.slice-legend {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
  }

  #request p.row-buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;

    & > button {
      inline-size: 100%;
      min-block-size: 44px;
    }
  }

  ol.activity-log + *,
  #activity > .chips {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    mask-image: linear-gradient(to right, #000 85%, transparent) !important;
  }
}

ol.activity-log > li:not(.day)::before {
  font-size: 14px !important;
  color: var(--mute);
}

/* "What happens next": the NOW tag follows its step's words. */
section.next-steps li {
  grid-template-columns: 22px auto 1fr;

  &::after {
    justify-self: start;
  }
}

#request dd small {
  font-size: 13px;
}

/* ---- Round 11, agreed issues ---- */

mark[data-severity][data-proposed] {
  border-style: dashed;
  box-shadow: none !important;
  border: 1.5px dashed var(--blocked);
}

/* Home: counts are words with arrows, rows are whole targets. */
#home table td > a.count {
  white-space: nowrap;
}

@media (max-width: 720px) {
  #home ul.ledger > li > span > a {
    display: inline-flex;
    min-block-size: 44px;
    align-items: center;
  }

  #home figure.legend ul,
  #home .legend ul,
  #application figure.tally figcaption ul {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
  }

  #app-main .app-head dl {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
  }

  /* The stage strip sits apart from the tabs, with its words above it. */
  #application ol.stages {
    margin-top: 20px !important;
  }
}

/* The overview's next steps: the sign-off deadline beside its button, the
   skip-ahead an honest secondary button. */
p.next-step {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;

  & small.deadline {
    font: 500 13px var(--font-sans);
  }
}

details.advance > summary.quiet {
  padding: 0 14px !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px;
  text-decoration: none !important;
  color: var(--ink) !important;
}

mark.open-defects {
  margin-inline-start: 6px;
  white-space: nowrap;
}

#application aside ul.decisions small {
  display: block;
}

/* Compact: the counts row stays; video is a readable mark. */
#application:has(.capgrid:not([hidden])) figure.tally figcaption {
  display: block;
}

.capgrid a[data-video="true"]::after {
  font-size: 12px !important;
}

.capgrid > p.legend [data-legend]::before {
  color: var(--ink);
}

.capgrid > p.legend {
  & [data-legend="built"]::before { color: var(--built) }
  & [data-legend="partly_built"]::before { color: var(--part) }
  & [data-legend="blocked"]::before { color: var(--blocked) }
}

:root[data-theme="light"] .capgrid a[data-status="partly_built"] {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--part) 70%, #000);
}

/* People and Organizations: forms fold in place, buttons line up. */
details.invite-person,
details.new-org {
  margin: 0 0 20px;
}

#organizations section.add-member {
  align-items: end !important;

  & > label {
    margin: 0;
  }
}

#organizations .inline-form {
  align-items: flex-end !important;
}

/* Access: levels and Revoke start on the content edge. */
#access .people-list .role,
#access .people-list .role mark,
#access section.share-links .row-actions {
  margin-inline-start: 0 !important;
  padding-inline-start: 0 !important;
}

#access ol.invite-rows button.row-level-open {
  align-self: end;
  min-block-size: 40px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#access p.add-row {
  margin: 8px 0 0;
}

#access ul.levels > li {
  margin: 0;
}

/* Acceptance: the lead's submit keeps its primary look while it waits;
   option words at body size. */
#acceptance section.decide .sign-off > button:disabled {
  background: var(--ink) !important;
  color: var(--bg) !important;
  opacity: 0.5 !important;
}

fieldset.verdicts label > span,
.sign-off fieldset label > span > b {
  font: 500 15px var(--font-sans) !important;
}

@media (max-width: 720px) {
  #acceptance > dl.facts-row,
  #acceptance > p.tally {
    order: -1;
  }

  ul.outcomes > li:not(.head) > a::after {
    display: inline;
  }
}

/* Evidence: disabled buttons are visible; the file name is labelled. */
form.upload button:disabled {
  opacity: 0.55 !important;
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

ul.need-list {
  max-inline-size: 900px;
}

details.covered > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 44px;
  cursor: pointer;
}

/* Agents: hosting is drawn to a readable height; tokens' buttons outlined. */
figure.cost-chart .bars [data-key="hosting"] {
  min-block-size: 8px !important;
}

ul.tokens .token-actions button:not(.danger-outline) {
  background: transparent !important;
  color: var(--ink) !important;
  box-shadow: inset 0 0 0 1px var(--line) !important;
}

@media (max-width: 720px) {
  #agents .split {
    gap: 40px !important;
  }

  #agents .cost-kpis a {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
  }
}

/* Pricing: time and cost folds on a phone; slices show on every card. */
details.time-cost-fold > summary {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  margin-top: 28px;
  font: 500 20px var(--font-sans);
  cursor: pointer;
}

@media (max-width: 720px) {
  #app-main table.pricing:not(.across) tbody td:nth-child(2) {
    display: block !important;
    grid-column: 1 / -1;
  }
}

section.pricing-settings .field.check-field {
  grid-column: auto;
}

/* Calibration: the current rate is a solid line with a cap. */
table.calibration .track [data-key="rate"] {
  border-inline-start: 2px solid var(--ink) !important;
  block-size: 24px !important;
  top: -3px !important;
}

ul.calibration-legend [data-key="rate"] {
  border-inline-start-style: solid !important;
}

table.calibration td:nth-child(4) {
  white-space: nowrap;
}

/* Costs: the empty row starts where the figures do. */
table.pricing.across td.no-costs {
  text-align: start !important;
}

/* Agents across: two columns, two matching headings. */
#agents[data-across] .split > section > header {
  align-items: baseline;
}

h3.queue-app {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Shared: the video mark keeps its word on a phone; captions are words. */
@media (max-width: 720px) {
  body.shared ul.shared-caps summary small.has-evidence {
    font-size: 12px !important;

    &::before {
      content: none !important;
    }
  }
}

body.shared .shots figcaption {
  font: 400 12px var(--font-sans) !important;
}

body.shared .shots figcaption::first-letter {
  text-transform: uppercase;
}

@media (max-width: 720px) {
  #access ol.invite-rows > li > button.row-level-open {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 0;
  }

  #access ol.invite-rows > li > label {
    grid-column: 1 / -1;
  }

  #access ol.invite-rows > li > label:first-child {
    grid-column: 1;
  }
}

/* ---- Round 12 ---- */

/* One arrow after an application's name. */
#home table td:first-child > a::after {
  content: none !important;
}

ol.ledger.needs small.due {
  display: block;
  margin-top: 4px;
  font: 500 12px var(--font-mono);
  color: var(--ink);
}

@media (max-width: 720px) {
  #home ul.ledger > li > span {
    line-height: 1.45;
  }

  #home ul.ledger > li > span > a {
    display: flex !important;
    min-block-size: 32px;
    color: var(--mute);
  }

  #application .caplist small {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    align-items: center;
  }
}

/* The override is a quiet text link beside the primary step. */
details.advance > summary.quiet {
  border: 0 !important;
  padding: 0 !important;
  min-block-size: 44px;
  text-decoration: underline !important;
  color: var(--mute) !important;
}

#application aside ul.decisions small > a {
  display: inline !important;
  min-block-size: 0 !important;
  padding: 0 !important;
}

#application aside ul.decisions small {
  display: block;
  line-height: 1.6;
}

p.stage-note small {
  font-size: 13px;
  color: var(--mute);
}

p.next-step small.deadline {
  font: 500 14px var(--font-sans) !important;
}

/* Compact: one legend, the counts row's; tiles flag open defects. */
#application .capgrid > p.legend {
  display: none;
}

.capgrid a > small.tile-defects {
  position: absolute;
  bottom: 7px;
  right: 9px;
  font: 700 11px var(--font-mono);
  padding: 1px 4px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px currentColor;
}

.capgrid a[data-status="partly_built"] {
  background: linear-gradient(to top, color-mix(in srgb, var(--part) 35%, transparent) 0 50%, transparent 50%) !important;
}

/* People: Change role, Rename and Remove keep their own slots. */
@media (min-width: 721px) {
  ul.people-list > li > .row-actions {
    grid-template-columns: 120px 100px 90px !important;

    & > .act-role { grid-column: 1 }
    & > .act-rename { grid-column: 2 }
    & > .act-remove { grid-column: 3 }
  }
}

/* Access: Revoke on the content edge; the invite toggle hides while open. */
#access section.share-links .row-actions,
#access section.share-links .row-actions details > summary {
  justify-content: start;
  margin-inline-start: 0 !important;
  padding-inline-start: 0 !important;
  min-block-size: 44px;
}

#access details.invite[open] > summary {
  display: none;
}

#access p.add-row button {
  padding-inline: 0;
}

#access ol.invite-rows button.row-level-open {
  min-block-size: 44px;
}

/* Capability cells: the current one keeps its fill and gets an underline. */
nav.area-cells a[aria-current="page"] {
  background: revert-layer !important;
  color: revert-layer !important;
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

nav.area-cells a[aria-current="page"][data-status="built"] {
  background: var(--built) !important;
  color: var(--built-ink) !important;
}

@media (max-width: 720px) {
  section.held-review .held-actions {
    display: grid;
    gap: 8px;

    & > button,
    & > details > summary {
      inline-size: 100%;
      justify-content: center;
    }
  }
}

details.recent > summary {
  display: flex;
  align-items: center;
  min-block-size: 44px;
  font: 500 15px var(--font-sans) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer;
}

/* The sign-off's checklist sits under its button, readable in light too. */
:root[data-theme="light"] .sign-off > button:disabled {
  color: #333 !important;
  box-shadow: inset 0 0 0 1.5px #555 !important;
}

.sign-off label.tested {
  font: 400 14px var(--font-sans) !important;
}

/* Slices: the add form folds; on a phone the estimate comes before the
   slice list and the legend steps aside. */
details.add-slice-fold {
  margin-top: 24px;
}

@media (max-width: 720px) {
  #capability[data-tab="slices"] .cap-body {
    display: flex !important;
    flex-direction: column;

    & > section.estimate,
    & > aside {
      order: -1;
    }
  }

  ul.slice-legend {
    display: none !important;
  }

  table.slices button {
    min-block-size: 44px;
  }
}

small.step-state {
  font-size: 12px !important;
}

/* History: glyphs at text size, chips on two lines, a start marker. */
ol.activity-log > li:not(.day)::before {
  font-size: 14px !important;
  color: var(--ink) !important;
}

@media (max-width: 720px) {
  #activity > .chips {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    mask-image: none !important;
  }
}

p.history-start {
  margin: 18px 0 0;
  font: 500 12px var(--font-mono);
  color: var(--mute);
  text-transform: uppercase;
}

/* ---- Round 12, group 3 ---- */

/* The application's tabs wrap on a phone: nothing is ever cut off. */
@media (max-width: 720px) {
  #app-main .app-head > nav.tab-row {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    mask-image: none !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    gap: 0 18px !important;
  }
}

/* Phones cannot pick a folder; single files are the way in there. */
@media (pointer: coarse) {
  form.upload fieldset.dropzone label.pick {
    display: none;
  }

  form.upload fieldset.dropzone label.pick-files {
    font-size: 15px;
    color: var(--ink);
    font-weight: 500;
  }
}

form.upload fieldset.dropzone {
  padding: 18px 22px;
}

ul.need-list span.name-it {
  font-size: 13px;
  color: var(--mute);

  & code {
    color: var(--ink);
  }
}

#acceptance section.decide p.against {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--mute);
}

/* Import: the format is a disclosure you can see. */
#import details.format > summary {
  min-block-size: 44px;
  text-decoration: none !important;
  gap: 6px;

  &::before {
    content: "▸";
  }
}

#import details.format[open] > summary::before {
  content: "▾";
}

#import textarea::placeholder {
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}

/* Calibration's footnote reads as sentences. */
#calibration table.calibration + p,
#calibration .scroll + p {
  max-inline-size: 720px;
  font-size: 13px;
}

/* Shared: Planned is dotted, Deferred hatched, the video mark a play icon. */
figure.tally .bar > span[data-status="planned"] {
  background: radial-gradient(circle, var(--mute) 1px, transparent 1.5px) 0 0 / 5px 5px !important;
  box-shadow: inset 0 0 0 1.5px var(--mute) !important;
}

body.shared ul.shared-caps summary small.has-evidence {
  color: var(--mute) !important;
}

body.shared .shared-body {
  border-inline-start: 2px solid var(--line);
  padding-inline-start: 16px !important;
}

/* Agents: token rows read name, details, then actions. */
@media (max-width: 720px) {
  ul.tokens > li {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;

    & .token-actions {
      order: 9;
    }
  }

  h3.queue-app a {
    min-block-size: 44px;
  }
}

#application aside ul.decisions small * {
  display: inline !important;
}

@media (min-width: 721px) {
  #access ol.invite-rows > li > button.row-level-open {
    align-self: start;
    margin-top: 24px;
    justify-self: start;
  }
}

/* ---- Round 13 ---- */

/* Sign-in: the error and its way on sit directly under the field. */
html body[data-page="login"] {
  & main > article > label { order: 1 }
  & main > article p[role="alert"] { order: 2 !important; margin: 8px 0 0 !important; }
  & main:has([role="alert"]) > article > p.login-wrong { order: 3 !important; margin: 4px 0 12px !important; }
  & main > article > button { order: 4 }
  & main > article > a { order: 5 }

  & p.login-wrong a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* Rule 8: a disabled button looks disabled, and its reason sits beside it. */
#app-main button:disabled,
#app-main button.secondary:disabled,
#app-main .sign-off > button:disabled,
#acceptance section.decide .sign-off > button:disabled,
form.upload button:disabled {
  opacity: 1 !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--ink) 55%, transparent) !important;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 35%, transparent) !important;
  border-style: dashed;
  cursor: not-allowed;

  &::before {
    content: none !important;
  }
}

.why-disabled,
p.why-disabled {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--mute);
}

span.why-disabled {
  margin-inline-start: 10px;
}

/* Rule 7: Remove, Revoke and Turn down are quiet red text with a confirm. */
details.inline-edit.danger > summary,
details.turn-down > summary,
:is(#access, #people, #organizations) details.inline-edit.danger > summary {
  display: inline-flex !important;
  align-items: center;
  min-block-size: 44px;
  padding: 0 4px !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--blocked) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  font: 500 14px var(--font-sans);
}

/* Home: an activity row's application sits on its own quiet line. */
#home ul.ledger > li > span > a.feed-app {
  display: block !important;
  margin-top: 2px;
  font-size: 13px;
  color: var(--mute);
}

/* Overview: a question's blocking capability is one line, a full target. */
#application aside ul.decisions > li {
  min-block-size: 44px;
}

/* Compact: Partly built is a bar along the bottom, not a fill under words. */
.capgrid a[data-status="partly_built"] {
  background: linear-gradient(to top, var(--part) 0 5px, transparent 5px) !important;
}

.capgrid a > small.tile-defects {
  position: static;
  align-self: flex-start;
  margin-top: 4px;
  font-size: 10px;
}

/* Agents: pills keep their own width; the chart opens on request. */
ul.tokens mark,
ul.tokens .token-actions > * {
  inline-size: fit-content !important;
  justify-self: start;
}

details.chart-fold > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 44px;
  margin-top: 12px;
  cursor: pointer;
  font: 500 14px var(--font-sans);

  &::before {
    content: "▸";
  }
}

details.chart-fold[open] > summary::before {
  content: "▾";
}

/* A capability's recording keeps to a readable size. */
#capability figure.video {
  max-inline-size: 760px;
}

/* Pricing on a phone: the five figures sit in one compact row. */
@media (max-width: 720px) {
  #app-main table.pricing:not(.across) tbody tr {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 2px 6px !important;
    padding-block: 10px !important;
  }

  #app-main table.pricing:not(.across) tbody td {
    font-size: 12.5px;
  }

  #app-main table.pricing:not(.across) tbody td[data-label]::before {
    font-size: 9px !important;
  }

  #app-main table.pricing:not(.across) tbody td:nth-child(1),
  #app-main table.pricing:not(.across) tbody td:nth-child(2) {
    grid-column: 1 / -1 !important;
  }

  #app-main table.pricing:not(.across) tr[data-estimated="false"] td:nth-child(3) {
    grid-column: 1 / -1 !important;
  }
}

section.project-pricing details.form-toggle.plain > summary {
  min-block-size: 32px;
  padding: 0;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 13px;
}

/* Calibration (rule 20): the legend shows a settled and a provisional rate. */
ul.calibration-legend [data-key="suggested"] {
  background: var(--acc) !important;
}

ul.calibration-legend [data-key="suggested"][data-provisional="true"] {
  background: var(--bg) !important;
  box-shadow: inset 0 0 0 2px var(--acc);
}

@media (max-width: 720px) {
  section.time-cost tr {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 2px 8px !important;
    padding-block: 10px !important;
  }

  section.time-cost td {
    font-size: 12.5px;
  }

  section.time-cost td[data-label]::before {
    font-size: 9px !important;
  }

  #pricing dl.kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px 10px !important;

    & dd:first-of-type {
      font-size: 20px !important;
    }

    & dd + dd {
      font-size: 11px;
    }
  }
}

/* ---- Round 14 ---- */

/* Rule 12: amber means Partly built and nothing else. */
section.held-review {
  border-color: var(--line) !important;
  box-shadow: inset 3px 0 0 var(--ink);
}

section.held-review > h2::before {
  content: "◔ ";
}

.sign-off p.caution,
p.caution {
  border-color: var(--line) !important;
  background: transparent !important;
  color: var(--ink) !important;
}

[data-margin="low"],
small.days-left[data-soon="true"],
#agents .cost-kpis a::before {
  color: var(--ink) !important;
}

svg[data-slice="translation"] {
  color: var(--mute) !important;
  stroke: currentColor;
}

/* Waiting states are ◔ in a neutral outline, a defect waiting for triage too. */
[data-state="open"] { --glyph: "◔" }

/* Status marks in strips are squares, as everywhere else. */
.strip [data-mark],
#application .caplist .strip [data-mark],
#home .strip [data-mark] {
  inline-size: 10px !important;
  block-size: 10px !important;
}

[data-mark="deferred"] {
  border: 0 !important;
  box-shadow: inset 0 0 0 1.5px var(--deferred);
  background: linear-gradient(to top right, transparent calc(50% - 0.75px), var(--deferred) calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px)) !important;
}

/* The current capability cell keeps its status colour, with an ink outline. */
nav.area-cells a[aria-current="page"] {
  outline: 2px solid var(--ink) !important;
  outline-offset: 2px;
  border-radius: 4px !important;
}

nav.area-cells a[aria-current="page"][data-status="blocked"] {
  background: var(--blocked) !important;
  color: var(--blocked-ink) !important;
}

nav.area-cells a[aria-current="page"][data-status="planned"],
nav.area-cells a[aria-current="page"][data-status="partly_built"],
nav.area-cells a[aria-current="page"][data-status="deferred"] {
  background: transparent !important;
  color: var(--ink) !important;
}

/* Sign-in: while the error shows, its own link is the way on; the footer
   link steps aside. */
html body[data-page="login"] main:has([role="alert"]) > article > a {
  display: none;
}

html body[data-page="login"] p.login-wrong a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
}

/* Side panel headings all carry their hairline. */
#application aside > section > h2 {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink);
}

/* Evidence on a phone: nothing is cut off at the bottom. */
#evidence {
  padding-bottom: 64px;
}

/* Phone targets of 44px for the links reviewers measured. */
@media (max-width: 720px) {
  #home table td:first-child > a,
  #request dl.request-facts dd > a,
  #request hgroup.request-title > p:first-child a,
  table.slices a,
  table.slices button,
  #app-main table.pricing tbody td:first-child a.row-title,
  #capability-evidence dd a,
  #app-main ol.criteria button.ghost.small {
    display: inline-flex !important;
    align-items: center;
    min-block-size: 44px !important;
  }

  #application aside ul.decisions > li {
    padding-block: 10px;
  }
}

/* Shared: the legend's Deferred matches its pill. */
body.shared figure.tally figcaption [data-mark="deferred"] {
  border: 0 !important;
}

a.hours-uncosted {
  display: block;
  margin-top: 2px;
  font: 400 11px var(--font-sans);
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

details.add-slice-fold > summary {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font: 500 14px var(--font-sans) !important;
}

/* History glyphs that mean one thing on this page only, at text size. */
ol.activity-log > li[data-kind="requests"]::before { content: "✎" !important }
ol.activity-log > li[data-kind="evidence"]::before { content: "▣" !important }
ol.activity-log > li[data-kind="register"]::before { content: "≡" !important }

#activity > .chips button {
  &[data-kind="requests"]::before { content: "✎" }
  &[data-kind="evidence"]::before { content: "▣" }
  &[data-kind="register"]::before { content: "≡" }
}

#requests-across > hgroup {
  margin-bottom: 20px;

  & > p {
    margin: 6px 0 0;
  }
}

#request p.commits small {
  font-size: 14px;
  color: var(--ink);
}

.capgrid a[data-status="deferred"] > span {
  color: var(--ink);
}

/* ---- Round 15 ---- */

/* Acceptance keeps one order at every width: facts, then step 1, then step 2. */
#acceptance > * {
  order: 0 !important;
}

/* Sign-in: the error's link stays in its sentence; the footer link steps
   aside while the error shows. */
html body[data-page="login"] main:has([role="alert"]) a.login-restart {
  display: none !important;
}

html body[data-page="login"] p.login-wrong a {
  display: inline !important;
  min-block-size: 0 !important;
  padding-block: 12px;
}

/* One disabled style: a single muted outline, the label readable. */
#app-main button:disabled,
#app-main button.secondary:disabled,
#app-main .sign-off > button:disabled,
#acceptance section.decide .sign-off > button:disabled,
form.upload button:disabled {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: inset 0 0 0 1px var(--mute) !important;
  color: var(--mute) !important;
}

/* One rule under a side-panel heading, not two. */
#application aside > section > h2 + :is(ul, ol, p, div) {
  border-top: 0 !important;
}

/* "Needs your triage" is Nullsoft's turn: a filled mark and a heavier ring. */
#requests-across mark[data-state="open"],
#application aside mark[data-state="open"] {
  --glyph: "●";
  box-shadow: inset 0 0 0 2px var(--ink) !important;
  font-weight: 600;
}

/* Legends draw the same square marks as the strips. */
.legend [data-mark],
figure.tally figcaption [data-mark],
#home .legend [data-mark] {
  inline-size: 12px !important;
  block-size: 12px !important;
}

/* Home on a phone: one count per line, no leading dot; legend in a grid. */
@media (max-width: 720px) {
  #home p.summary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    & > span::before {
      content: none !important;
    }
  }

  #home .legend ul,
  #home figure.legend ul {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #home ul.ledger > li > span > a.feed-app {
    min-block-size: 44px !important;
    display: flex !important;
    align-items: center;
  }
}

#home > .columns {
  margin-top: 28px !important;
}

/* Overview: "with video" is a fact, not a sixth status. */
figure.tally figcaption li:not([data-status]) {
  padding-inline-start: 12px;
  border-inline-start: 1px solid var(--line);
}

[data-evidence="missing"] {
  font-size: 13px;
  white-space: nowrap;
}

@media (max-width: 720px) {
  #application .map-tools {
    flex-wrap: wrap !important;

    & input[type="search"] {
      flex: 1 1 100%;
    }

    & [role="group"] {
      flex: 1 1 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
  }
}

/* Compact tiles: the area count sits with its name; marks are readable. */
.capgrid a > small.tile-defects {
  font-size: 11px !important;
}

.capgrid a[data-status="deferred"] > b {
  color: var(--ink);
}

/* People and Organizations: actions close to their row; even columns. */
@media (min-width: 721px) {
  ul.people-list > li {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto !important;
  }

  #organizations .org > .columns > section {
    flex: 1 1 0 !important;
  }
}

/* Access: links that do not expire soon carry no glyph; checkbox rows 44px. */
#access section.share-links mark[data-state="fixed"]::before {
  content: none;
}

#access label:has(> input[type="checkbox"]) {
  min-block-size: 44px;
}

#access p.add-row button {
  min-block-size: 44px;
}

#access ol.invite-rows {
  row-gap: 12px;
}

#access ol.invite-rows p.row-error,
#access ol.invite-rows span.row-error {
  margin-bottom: 0;
}

/* Capability page: the view switch sits under the title; spacing settles. */
#capability > header nav.cap-tabs,
#capability > header .cap-tabs {
  order: 9;
  flex-basis: 100%;
}

#capability-evidence dl + section,
section.nullsoft-only {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

details.recent > summary {
  font: 500 15px var(--font-sans) !important;
}

ol.thread button[data-reply] {
  min-block-size: 44px;
}

/* Slices: the card's figures are plain; time and cost reads label beside
   value on a phone. */
section.estimate dl.actual dd[data-variance] {
  color: var(--ink) !important;
}

@media (max-width: 720px) {
  section.time-cost tr {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  section.time-cost td[data-label]::before {
    font-size: 10px !important;
  }

  p.variance-headline > a,
  section.estimate dt a,
  #capability[data-tab="slices"] a.button {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
  }
}

/* Requests list: a defect's warranty proposal reads like its severity. */
#requests-across mark[data-state],
#requests mark[data-decision] {
  white-space: nowrap;
}

/* Acceptance: a long title keeps its arrow. */
ul.outcomes > li:not(.head) > a {
  display: inline !important;
}

/* Evidence: one width for every section. */
#evidence > section {
  max-inline-size: 940px;
}

ul.need-list > li.head > span {
  text-align: start !important;
}

details.covered > summary::before {
  content: "▸";
  margin-inline-end: 6px;
}

details.covered[open] > summary::before {
  content: "▾";
}

/* Agents: New token is outlined; the audit row's glyph steps aside. */
#agents header > button.secondary {
  background: transparent !important;
}

#agents ol.activity-log > li:not(.day)::before {
  content: none !important;
}

@media (max-width: 720px) {
  #agents section.costs header a,
  #agents section.costs header button {
    min-block-size: 44px;
  }
}

/* Pricing: money never splits from its unit; phone cards in three columns. */
#pricing dl.kpis dd:first-of-type {
  white-space: nowrap;
}

@media (max-width: 720px) {
  #app-main table.pricing:not(.across) tbody tr {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #app-main table.pricing:not(.across) tbody td[data-label]::before {
    font-size: 11px !important;
  }

  #app-main table.pricing:not(.across) tbody td:nth-child(2) svg {
    inline-size: 12px;
    block-size: 12px;
  }
}

/* Costs: the uncosted hours note sits under the table, on one line. */
a.hours-uncosted {
  display: none;
}

/* Agents across: the group link is a full row. */
h3.queue-app a {
  min-block-size: 44px !important;
}

/* Shared: thumbnails big enough to read. */
body.shared .shots figure,
body.shared .shots img {
  inline-size: 280px;
}

p.uncosted-note a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  font-size: 14px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

#request dl.estimate-ledger {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px 16px;
  margin: 8px 0 10px;

  & dt {
    font: 500 11px var(--font-mono);
    text-transform: uppercase;
    color: var(--mute);
  }

  & dd {
    margin: 2px 0 0;
    font: 500 16px var(--font-mono);
    color: var(--ink);
  }
}

a.tally-link {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Evidence: choosing the folder is the primary action. */
form.upload fieldset.dropzone label.pick {
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--bg);

  & b {
    text-decoration: none !important;
  }

  & svg {
    display: none;
  }
}

@media (max-width: 720px) {
  form.upload fieldset.dropzone label.pick {
    display: none;
  }

  form.upload fieldset.dropzone label.pick-files {
    padding: 10px 18px;
    border-radius: 8px;
    background: var(--ink);
    color: var(--bg) !important;
    text-decoration: none !important;
    font-size: 15px !important;
  }
}

.sign-off label.tested > span,
#acceptance .sign-off label.tested > span {
  font: 400 15px/1.4 var(--font-sans) !important;
}

/* ---- Round 16 ---- */

/* Evidence on a phone: the file picker is a labelled primary button. */
@media (max-width: 720px) {
  form.upload fieldset.dropzone label.pick-files,
  form.upload fieldset.dropzone label.pick-files * {
    color: var(--bg) !important;
  }

  form.upload fieldset.dropzone label.pick-files {
    display: inline-flex !important;
    min-block-size: 44px;
    font-weight: 600 !important;
  }
}

form.upload fieldset.dropzone input[type="file"] {
  inline-size: 1px !important;
  block-size: 1px !important;
  clip-path: inset(50%);
  pointer-events: none;
}

/* Request pills may wrap rather than be cut off. */
#requests mark[data-decision],
#requests mark[data-state],
#requests-across mark[data-state],
#requests-across mark[data-decision] {
  white-space: normal !important;
  text-align: start;
  block-size: auto;
  min-block-size: 24px;
}

[data-evidence="missing"] {
  white-space: normal !important;
}

/* Needs your triage: ◔ in bold, not a new mark. */
#requests-across mark[data-state="open"],
#application aside mark[data-state="open"] {
  --glyph: "◔";
}

/* Home on a phone: the capabilities cell takes the card's width. */
@media (max-width: 720px) {
  #home table td[data-label]:has(> .strip),
  #home table td[data-label]:has(> p.summary) {
    grid-column: 1 / -1 !important;
  }

  #home p.summary {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #home ul.ledger > li > span > a.feed-app {
    margin-top: 0 !important;
  }
}

/* People and Access: header and rows share one grid. */
@media (min-width: 721px) {
  ul.people-list > li {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 330px !important;
  }
}

/* One primary look: approving is the same ink button as every primary. */
p.decide-actions > button:not(.secondary) {
  background: var(--ink) !important;
  color: var(--bg) !important;
  border-color: var(--ink) !important;
}

/* Sign-in: the other route stays, quieter, while the error shows. */
html body[data-page="login"] main:has([role="alert"]) a.login-restart {
  display: inline-flex !important;
  opacity: 0.7;
}

/* Overview and history: links that are whole rows. */
#application aside ul.decisions small > a {
  display: inline-flex !important;
  align-items: center;
  min-block-size: 44px !important;
}

@media (max-width: 720px) {
  ol.activity-log a.subject {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
  }

  a.tally-link {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
  }

  #capability[data-tab="slices"] a {
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Capability tabs switch: no empty box around it. */
#capability > header .cap-tabs {
  flex-basis: auto !important;
  inline-size: fit-content;
}

/* Agents: Let it through is a standard button. */
article[data-held] footer > button {
  min-block-size: 44px;
  font-size: 14px;
  padding: 0 16px;
}

/* Pricing on a phone: two columns of figures, readable. */
@media (max-width: 720px) {
  #pricing dl.kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Calibration: the current rate is a dashed full-height line; the median a
   taller solid bar. */
table.calibration .track [data-key="rate"] {
  border-inline-start: 2px dashed var(--ink) !important;
  block-size: 26px !important;
  top: -4px !important;
}

table.calibration .track [data-key="median"] {
  inline-size: 4px !important;
  block-size: 16px !important;
  top: 1px !important;
}

/* Acceptance: one name for not being signed off. */
#acceptance mark[data-state="not_signable"] {
  color: var(--mute);
}

ol.activity-log > li[data-kind="evidence"]::before { content: "▷" !important }
#activity > .chips button[data-kind="evidence"]::before { content: "▷" !important }

@media (max-width: 720px) {
  section.time-cost td:first-child a,
  #agents[data-across] section h3 > a,
  ol.decisions-list > li > header > a,
  #capability > header p a,
  nav.crumbs-bar a {
    display: inline-flex !important;
    align-items: center;
    min-block-size: 44px !important;
    min-inline-size: 44px;
  }

  :is(#acceptance, #capability, #request) fieldset label,
  label.tested,
  #access label:has(> input),
  #requests label:has(> input) {
    min-block-size: 44px !important;
  }
}

@media (max-width: 720px) {
  #app-main select {
    min-block-size: 44px !important;
  }
}

/* ---- Round 17 ---- */

/* Sign-in: the error sits under the field, and the one way on is the
   footer link, at full strength while the error shows. */
html body[data-page="login"] :is([role="alert"], .login-wrong) {
  margin-top: 8px !important;
}

html body[data-page="login"] main:has([role="alert"]) a.login-restart {
  opacity: 1 !important;
  color: var(--ink) !important;
}

/* One disabled look everywhere: no fill, a muted outline and label. */
button:disabled,
button.secondary:disabled,
a.button[aria-disabled="true"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mute) 70%, transparent) !important;
  color: var(--mute) !important;
  cursor: not-allowed;
}

/* Evidence: a phone picks files; the folder needs a desktop. */
.coarse-pointer {
  display: none;
}

@media (pointer: coarse), (max-width: 720px) {
  .fine-pointer {
    display: none !important;
  }

  .coarse-pointer {
    display: inline !important;
  }
}

/* Application header on a phone: the name, the tabs, then the facts. */
@media (max-width: 720px) {
  #app-main .app-head {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
  }

  #app-main .app-head > div {
    display: contents;
  }

  #app-main .app-head h1 { order: 0 }
  #app-main .app-head > :is(nav, details) { order: 1 }
  #app-main .app-head dl { order: 2; margin-top: 14px !important }
}

/* A decision's blocked capabilities: id and name as one link. */
#application aside ul.decisions small a {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-block-size: 44px;
}

/* People: the actions follow the role, not the page edge. */
@media (min-width: 721px) {
  ul.people-list > li {
    grid-template-columns: minmax(0, 1.2fr) minmax(180px, 0.8fr) minmax(0, 1fr) !important;

    & .row-actions {
      justify-content: flex-start !important;
    }
  }
}

#people .panels select,
#people details.mark-internal select {
  max-inline-size: 360px;
}

/* Access invite: fields in a row, the level choice after the name, Remove
   as quiet red text, labels once. */
#access ol.invite-rows {
  row-gap: 8px !important;
}

#access ol.invite-rows button.remove-row {
  inline-size: auto !important;
  block-size: auto !important;
  min-block-size: 44px;
  padding: 0 4px !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font-size: 14px !important;
  color: var(--blocked) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#access ol.invite-rows button.row-level-open {
  min-block-size: 44px;
}

@media (min-width: 721px) {
  #access ol.invite-rows > li {
    grid-template-columns: minmax(200px, 320px) minmax(160px, 220px) auto auto auto !important;
    justify-content: start;
    align-items: start !important;

    & > button.row-level-open,
    & > button.remove-row {
      align-self: start !important;
      margin-top: 0 !important;
    }

    & > .row-error,
    & > p.row-error {
      grid-column: 1 / -1;
    }
  }

  #access ol.invite-rows > li:first-child > button {
    margin-top: 24px !important;
  }

  #access ol.invite-rows > li + li .label-text {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

#access p.add-row {
  margin-top: 4px !important;
}

#access section.form :is(input, select),
#people section.form-card :is(input, select) {
  background: var(--bg) !important;
  border-color: color-mix(in srgb, var(--mute) 65%, var(--bg)) !important;
}

/* Pricing on a phone: labels and figures big enough to read. */
@media (max-width: 720px) {
  #app-main table.pricing:not(.across) tbody td[data-label]::before,
  section.time-cost td[data-label]::before {
    font-size: 12px !important;
  }

  #app-main table.pricing:not(.across) tbody td,
  section.time-cost td {
    font-size: 15px !important;
  }
}

/* Home: each count carries its shape; the total stands on its own. */
#home p.summary > span::before {
  content: none !important;
}

#home p.summary i[data-mark] {
  display: inline-block;
  inline-size: 10px !important;
  block-size: 10px !important;
  margin-inline-end: 6px;
  vertical-align: -1px;
}

#home p.summary > b.total {
  font-weight: 500;
}

@media (max-width: 720px) {
  #home p.summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    & > b.total {
      grid-column: 1 / -1;
    }
  }
}

/* History on a phone: the object stays inline in its sentence; padding
   gives it a tall target without breaking the line. */
@media (max-width: 720px) {
  ol.activity-log a.subject {
    display: inline !important;
    min-block-size: 0 !important;
    padding-block: 12px;
  }
}

/* Acceptance: the tally's marks keep a space before their words. */
p.tally > :is(span, a) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#acceptance section.decide {
  max-inline-size: none;
}

@media (max-width: 720px) {
  #acceptance dl small {
    margin-inline-start: 0 !important;
    padding-inline-start: 0 !important;
  }
}

/* Calibration: the legend draws the rate as the chart does, dashed. */
ul.calibration-legend [data-key="rate"] {
  border-inline-start-style: dashed !important;
}

ul.calibration-legend [data-key="rate"]::before,
table.calibration .track [data-key="rate"]::before {
  font-size: 12px !important;
}

/* Import: a readable placeholder; the result is a plain hairline box. */
#import textarea::placeholder {
  color: var(--mute);
  opacity: 1;
}

#import-result > * {
  border-style: solid !important;
}

/* Margins warn in the same way on Costs as on Pricing. */
table.pricing.across [data-margin="low"],
table.pricing.across [data-margin="loss"] {
  font-weight: 600;
}

/* Requests across: the state pill stays on one line. */
#requests-across td mark {
  white-space: nowrap;
}

/* Agents across: Tokens is a section heading like Held changes. */
#agents[data-across] h2#tokens-heading {
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

/* Capability: the view switch on its own row under the title. */
#app-main #capability > header::after {
  content: "";
  flex-basis: 100%;
  order: 8;
}

#app-main #capability > header > nav.cap-tabs {
  order: 9 !important;
  flex: none !important;
  margin-top: -4px;
}

/* Capability: the evidence video fills its column. */
#app-main #capability figure.video {
  max-inline-size: none !important;
  inline-size: 100% !important;
}

#capability figure.video video {
  inline-size: 100% !important;
  max-inline-size: none !important;
}

/* Unmark is a quiet text action. */
#app-main #capability ol.criteria button.ghost.small {
  min-block-size: 44px;
  padding: 0 4px !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--mute) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Comments: Post spans the box it sends. */
p.post > button {
  inline-size: 100%;
  min-block-size: 44px;
}

/* Compact: Partly built fills the tile's bottom half, as its shape does. */
.capgrid a[data-status="partly_built"] {
  background: linear-gradient(to top, color-mix(in srgb, var(--part) 30%, transparent) 0 50%, transparent 50%) !important;
}

/* Compact: the open-defect note is the same pill as in the list. */
.capgrid a > small.tile-defects {
  padding: 1px 8px !important;
  border: 1px solid currentColor !important;
  border-radius: 999px !important;
  font: 500 12px var(--font-sans) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Home on a phone: the legend in three even columns. */
@media (max-width: 720px) {
  #home p.legend {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 12px;
  }
}

/* ---- Round 18 ---- */

/* Evidence video: a still with a play button and the length; the player
   appears on press. */
.player {
  position: relative;
  inline-size: 100%;

  & > button.facade {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 100%;
    aspect-ratio: 16 / 10;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line) !important;
    border-radius: 10px;
    background: var(--surf2) !important;
    color: var(--ink) !important;
    cursor: pointer;

    & > img {
      position: absolute;
      inset: 0;
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }

    & > .play {
      position: relative;
      display: grid;
      place-items: center;
      inline-size: 64px;
      block-size: 64px;
      border-radius: 50%;
      background: color-mix(in srgb, var(--bg) 82%, transparent);
      box-shadow: 0 0 0 1px var(--line);

      &::before {
        content: "";
        margin-inline-start: 5px;
        border-block: 11px solid transparent;
        border-inline-start: 18px solid var(--ink);
      }
    }

    & > .length {
      position: absolute;
      inset-inline-end: 12px;
      inset-block-end: 12px;
      padding: 2px 8px;
      border-radius: 6px;
      background: color-mix(in srgb, var(--bg) 82%, transparent);
      font: 500 13px var(--font-mono);
      color: var(--ink);
    }

    &:hover > .play,
    &:focus-visible > .play {
      box-shadow: 0 0 0 2px var(--acc);
    }
  }

  & > video {
    inline-size: 100%;
    border-radius: 10px;
  }
}

/* Actions: a button whose request is in flight says so. */
button[aria-busy="true"] {
  cursor: progress;
  opacity: 0.75;

  &::after {
    content: " …";
  }
}

/* A request that could not reach Beam is said where the eye is: pinned to
   the bottom of the screen until dismissed or retried. */
p.action-failed {
  position: fixed;
  inset-inline: 16px;
  inset-block-end: 16px;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  max-inline-size: 640px;
  margin-inline: auto;
  padding: 12px 16px;
  border: 1px solid var(--blocked);
  border-radius: 10px;
  background: var(--surf);
  color: var(--ink);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);

  & > span::before {
    content: "! ";
    color: var(--blocked);
    font-weight: 600;
  }

  & > span {
    flex: 1 1 260px;
  }

  & > button {
    min-block-size: 44px;
  }
}

/* A refused command's notice stays in view while the page scrolls. */
#notice:not([hidden]) {
  position: sticky;
  inset-block-start: 8px;
  z-index: 40;
}

/* Empty states: what this is, then the one way to start. */
article[data-empty] > p:last-child:has(> :is(button, a.button)) {
  margin-top: 16px;
}

p.only-you {
  margin-block: 0 16px;
  color: var(--mute);
}

/* Disabled reads as unavailable at a glance: a dashed muted outline. */
button:disabled,
button.secondary:disabled {
  box-shadow: none !important;
  outline: 1px dashed color-mix(in srgb, var(--mute) 80%, transparent) !important;
  outline-offset: -1px;
}

/* Import: the result placeholder is a plain muted line, no box. */
#import-result > * {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--mute);
}

/* Acceptance: names and pills share a centre line. */
#acceptance li[data-signable] {
  align-items: center !important;
}

#acceptance mark {
  white-space: nowrap;
}

/* Agents: Add entry is an outlined secondary like the others. */
#agents section.costs header button.secondary {
  background: transparent !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}

/* Shared on a phone: the video note sits under the name. */
@media (max-width: 720px) {
  body.shared ul.shared-caps summary small.has-evidence {
    grid-column: 2 !important;
    grid-row: 2;
    font: 400 13px var(--font-sans) !important;
    color: var(--mute) !important;
  }
}

body.shared ul.shared-caps summary small.has-evidence {
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
}

/* Home: an application with no capabilities says how to start. */
#home td a.next,
#home td small.next {
  display: block;
  margin-top: 4px;
}

#home td a.next {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
}

/* People: Invite is the page's primary action. */
#people details.invite-person > summary {
  background: var(--ink) !important;
  color: var(--bg) !important;
  border-color: var(--ink) !important;
}

/* Requests: a proposed warranty is a dashed pill like a proposed severity. */
mark.flag[data-proposed] {
  display: inline-flex;
  padding: 2px 10px;
  border: 1px dashed var(--mute);
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font-weight: 500;
  font-size: 14px;
  white-space: normal;
  max-inline-size: 100%;
}

small.flag-pending {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--mute);
}

/* Requests across: the pills stay whole; the request column has a limit. */
#requests-across td mark {
  white-space: nowrap !important;
}

#requests-across td:first-child {
  max-inline-size: 540px;
}

/* Pricing on a phone: a jump to the project's settings. */
#pricing p.page-actions a.jump {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
}

/* Access invite on a phone: each person is an inset card with Remove at
   its top right. */
@media (max-width: 720px) {
  #access ol.invite-rows > li {
    position: relative;
    padding: 12px !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    margin-bottom: 8px;
  }

  #access ol.invite-rows > li > button.remove-row {
    position: absolute;
    inset-block-start: 4px;
    inset-inline-end: 8px;
  }
}

/* Calibration and costs: footnotes at a readable size. */
:is(#calibration, #costs-across, #pricing) :is(small, figcaption, .note) {
  font-size: max(13px, 1em * 0.8125);
}

/* The facade keeps the recording's shape on every screen. */
#app-main .player > button.facade,
body.shared .player > button.facade,
.player > button.facade {
  block-size: auto !important;
  min-block-size: 200px !important;
  aspect-ratio: 16 / 10 !important;
  inline-size: 100% !important;
  max-inline-size: none !important;
}

@media (max-width: 720px) {
  #access ol.invite-rows > li {
    grid-template-columns: minmax(0, 1fr) !important;
    padding-top: 4px !important;
  }

  #access ol.invite-rows > li > button.remove-row {
    position: static !important;
    order: -1;
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: end;
    margin: 0 -4px -8px 0 !important;
  }

  #access ol.invite-rows > li > :is(label, button.row-level-open) {
    grid-column: 1 !important;
    margin-inline: 0 !important;
    padding-inline-start: 0 !important;
  }
}

/* People: with the invite form open, its submit is the one primary. */
#people details.invite-person[open] > summary {
  background: transparent !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

/* Costs: the empty row's next step is a full-height link. */
td.no-costs a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
}

/* ---- Round 19 ---- */

/* Disabled wins over every earlier button rule, inside the app too. */
#app-main button:disabled,
#app-main button.secondary:disabled,
#app-main .sign-off > button:disabled,
#acceptance section.decide .sign-off > button:disabled,
#app-main form.upload button:disabled,
html body button:disabled {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 1px dashed color-mix(in srgb, var(--mute) 80%, transparent) !important;
  outline-offset: -1px;
  color: var(--mute) !important;
  cursor: not-allowed;
}

/* Video: the play control is a solid pill in the corner, so the still stays
   readable; with no still the tile says what it is. */
.player > button.facade {
  & > .play-pill {
    position: absolute;
    inset-inline-start: 12px;
    inset-block-end: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-block-size: 44px;
    padding: 0 14px 0 10px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--bg);
    font: 500 14px var(--font-sans);

    & > .play {
      inline-size: auto;
      block-size: auto;
      background: none;
      box-shadow: none;

      &::before {
        margin: 0;
        border-block-width: 7px;
        border-inline-start: 11px solid var(--bg);
      }
    }

    & > .length {
      position: static;
      padding: 0;
      background: none;
      color: var(--bg);
      opacity: 0.8;
      font: 500 13px var(--font-mono);
    }
  }

  & > .no-poster {
    font: 500 15px var(--font-mono);
    color: var(--mute);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  &:hover > .play-pill,
  &:focus-visible > .play-pill {
    box-shadow: 0 0 0 2px var(--acc);
  }
}

/* A request in flight: a turning ring before the label. */
@keyframes beam-spin {
  to { transform: rotate(360deg) }
}

button[aria-busy="true"] {
  &::after {
    content: none !important;
  }

  &::before {
    content: "";
    display: inline-block;
    inline-size: 12px;
    block-size: 12px;
    margin-inline-end: 8px;
    vertical-align: -1px;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: beam-spin 0.8s linear infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  button[aria-busy="true"]::before {
    animation: none;
  }
}

/* A request that failed marks its own button too. */
button[data-failed] {
  outline: 2px solid var(--blocked) !important;
  outline-offset: 2px;
}

/* The failure line sits at the top of the page, in the flow, and stays in
   view while scrolling, so it never covers the form it is about. */
p.action-failed {
  position: sticky !important;
  inset-block: 8px auto !important;
  inset-inline: auto !important;
  margin: 0 0 20px !important;
  max-inline-size: none !important;
  box-shadow: none !important;
}

/* Home when empty: a card at reading width. */
#home article[data-empty] {
  max-inline-size: 640px;
}

#home td small.next,
#home td > small {
  font-size: 13px !important;
}

/* People: the form's buttons in one row. */
p.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Capability: the outcome's caution line. */
.sign-off p.caution {
  font-size: 13px;
  color: var(--ink);

  & a {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
  }
}

/* Slices: a row's Edit is quiet, so Add a slice stays the action. */
#app-main button[data-edit] {
  background: transparent !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}

/* Agents: Pricing is a link beside Add entry, not a second button. */
#agents section.costs header p > a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding: 0 8px;
  border: 0 !important;
  background: none !important;
  color: var(--ink) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Pricing: the uncosted-hours note sits under the figures. */
#pricing p.uncosted-note {
  margin: 4px 0 20px;
  font-size: 14px;

  & a {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
  }
}

.player > button.facade > .play-pill > .play::before {
  content: "▶" !important;
  border: 0 !important;
  margin: 0 !important;
  font-size: 12px;
  line-height: 1;
  color: var(--bg);
}

/* ---- Round 20 ---- */

/* Disabled: a solid muted outline and a faded label; dashes belong to drop
   zones only. */
#app-main button:disabled,
#app-main button.secondary:disabled,
#app-main .sign-off > button:disabled,
#acceptance section.decide .sign-off > button:disabled,
#app-main form.upload button:disabled,
html body button:disabled {
  outline: 0 !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mute) 60%, transparent) !important;
  opacity: 0.6;
}

/* A form that is open hides the button that opened it; Cancel closes it. */
:is(#people, #organizations) details.form-toggle[open] > summary {
  display: none !important;
}

p.toggle-lede {
  max-inline-size: 640px;
  margin: 24px 0 8px;
  font-size: 14px;
  color: var(--mute);
}

/* A request in flight: the button says what it is doing, and the rest of
   its form waits. */
button[aria-busy="true"][data-busy-label] {
  font-size: 0 !important;

  &::after {
    content: attr(data-busy-label) !important;
    font-size: 14px;
  }

  &::before {
    inline-size: 12px;
    block-size: 12px;
  }
}

details[open]:has(button[aria-busy="true"]) :is(input, select, textarea, button:not([aria-busy="true"])) {
  pointer-events: none;
  opacity: 0.6;
}

/* A request that failed says so right under its button; the banner at the
   top is for anything else. */
button[data-failed] {
  outline: 0 !important;
}

:is(p, div):has(> button[data-failed])::after {
  content: "△ " var(--failed-text);
  flex-basis: 100%;
  display: block;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--blocked);
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink);
}

main:has(button[data-failed]) > p.action-failed {
  display: none !important;
}

p.action-failed > span::before {
  content: "△ " !important;
  font-size: 16px;
}

p.action-failed > button {
  background: transparent !important;
  border: 0 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Links inside a sentence keep the sentence's line height; the target
   grows with padding, not with the line box. */
.sign-off p :is(a, button.link),
p.caution a,
#capability .note a {
  display: inline !important;
  min-block-size: 0 !important;
  padding-block: 14px;
  line-height: inherit;
}

.sign-off p.caution {
  line-height: 1.5;
}

/* Capability sign-off: the verdicts are one group; who signs is a line. */
#capability fieldset label + label,
.sign-off fieldset label + label {
  margin-top: 8px !important;
}

.sign-off p[data-signer] {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-size: 13px;
  color: var(--mute);
}

/* Access invite on a phone: Remove closes each person's card. */
@media (max-width: 720px) {
  #access ol.invite-rows > li > button.remove-row {
    order: 99 !important;
    justify-self: start !important;
    margin: 0 !important;
  }
}

/* Home on a phone: the no-capabilities note takes the card's width. */
@media (max-width: 720px) {
  #home table td[data-label]:has(> small.next),
  #home table td[data-label]:has(> a.next) {
    grid-column: 1 / -1 !important;
  }

  #home td > small {
    color: var(--ink);
  }
}

/* ---- Round 21 ---- */

/* Translation slices get their own hue; amber means Partly built only. */
:root,
:root[data-theme="dark"] {
  --slice-tr: #5ED3C6;
}

:root[data-theme="light"] {
  --slice-tr: #0F766E;
}

/* A recording without a still: its name and what it is, deliberately. */
.player > button.facade > .no-poster {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 24px;
  text-align: center;
  text-transform: none;
  letter-spacing: 0;

  & > small {
    font: 500 12px var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mute);
  }

  & > b {
    font: 500 20px var(--font-sans);
    color: var(--ink);
  }
}

/* The player fits beside the criteria rather than pushing them away. */
#capability .player > button.facade {
  max-block-size: 420px;
}

#capability .player > video {
  max-block-size: 480px;
}

p.caution-who {
  font-size: 13px;
  color: var(--mute);
}

/* Compact: Partly built fills only behind the status line. */
.capgrid a[data-status="partly_built"] {
  background: linear-gradient(to top, color-mix(in srgb, var(--part) 22%, transparent) 0 30%, transparent 30%) !important;
}

.capgrid > div > data {
  white-space: nowrap;
}

/* Slices on a phone: an empty events cell is left out. */
@media (max-width: 720px) {
  #app-main td.events:has(> span.mute) {
    display: none !important;
  }
}

/* People: Rename is a quiet text action, so each row has one box. */
ul.people-list details.act-rename > summary {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  padding-inline: 4px !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Organizations: the name is a section heading; labels are labels. */
#organizations section.org > h2 {
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 24px;
}

#organizations section.org p.lbl {
  text-decoration: none;
  color: var(--mute);
}

/* Access invite: Own level is a quiet button at body size. */
#access ol.invite-rows button.row-level-open {
  font-size: 14px !important;
  text-decoration: none !important;
  color: var(--ink) !important;
}

@media (max-width: 720px) {
  #access ol.invite-rows > li {
    border: 0 !important;
    border-top: 1px solid var(--line) !important;
    border-radius: 0 !important;
    padding-inline: 0 !important;
  }
}

/* Evidence: the reason sits on the buttons' line. */
form.upload {
  & > p:has(> button[name="mode"]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
  }
}

/* History: "Show N changes" is a quiet button, not a caption. */
ol.activity-log details > summary {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  font: 500 14px var(--font-sans) !important;
  color: var(--ink) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sign-off fieldset {
  display: grid !important;
  gap: 8px !important;

  & > legend {
    margin-bottom: 8px;
  }

  & > label {
    margin: 0 !important;
  }
}

.player > button.facade > .no-poster {
  white-space: normal;
  max-inline-size: 100%;
  box-sizing: border-box;

  & > b {
    overflow-wrap: anywhere;
  }
}

ol.activity-log details > summary {
  min-inline-size: 44px;
  justify-content: center;
}

/* ---- Round 22 ---- */

/* Disabled cannot be mistaken for live: no outline, a faint hatch, a muted
   label. The reason beside it says what is missing. */
#app-main button:disabled,
#app-main button.secondary:disabled,
#app-main .sign-off > button:disabled,
#acceptance section.decide .sign-off > button:disabled,
#app-main form.upload button:disabled,
html body button:disabled {
  opacity: 1 !important;
  box-shadow: none !important;
  outline: 0 !important;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--mute) 14%, transparent) 0 2px, transparent 2px 7px) !important;
  color: color-mix(in srgb, var(--mute) 85%, var(--bg)) !important;
}

/* Video: a player at a reading size; the play pill dark with a light ring
   in both themes, so it reads over any frame. */
.player {
  max-inline-size: 640px;
}

.player > button.facade > .play-pill {
  background: #0E0F11 !important;
  color: #ECEAE4 !important;
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.85) !important;

  & > .play::before,
  & > .length {
    color: #ECEAE4 !important;
  }
}

/* Organizations: New organization is the page's primary action. */
#organizations details.new-org > summary {
  background: var(--ink) !important;
  color: var(--bg) !important;
  border-color: var(--ink) !important;
}

/* History: the time sits near its sentence. */
ol.activity-log {
  max-inline-size: 860px;
}

/* Compact: Partly built is a half-fill behind its word only, matching ⬓. */
.capgrid a[data-status="partly_built"] {
  background: none !important;

  & > small.word {
    padding-inline: 3px;
    background: linear-gradient(to top, color-mix(in srgb, var(--part) 45%, transparent) 0 50%, transparent 50%);
  }
}

/* Access: row links sit at the right edge, like Revoke. */
#access .people-list a.quiet-link {
  justify-self: end;
  margin-inline-start: auto;
}

@media (max-width: 720px) {
  #access ol.invite-rows > li > button.remove-row,
  ul.people-list .row-actions > :first-child {
    margin-inline-start: 0 !important;
    padding-inline-start: 0 !important;
  }
}

/* Access invite: Own level looks like the control it is. */
#access ol.invite-rows button.row-level-open {
  padding: 0 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  background: transparent !important;
}

/* People: a lone Rename lines up with the others. */
ul.people-list .row-actions {
  align-items: center;
}

/* Shared: rows expand in place, so the marker points down. */
body.shared ul.shared-caps summary::after {
  transform: rotate(45deg) !important;
}

body.shared ul.shared-caps details[open] > summary::after {
  transform: rotate(-135deg) !important;
}

/* Evidence: the drop zone is as tall as what it holds. */
form.upload fieldset.dropzone {
  min-block-size: 0 !important;
  padding-block: 20px !important;
  gap: 10px !important;
}

/* ---- Round 23 ---- */

/* Disabled keeps the hatch and gains the muted outline rule 8 asks for. */
#app-main button:disabled,
#app-main button.secondary:disabled,
#app-main .sign-off > button:disabled,
#acceptance section.decide .sign-off > button:disabled,
#app-main form.upload button:disabled,
html body button:disabled {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mute) 70%, transparent) !important;
}

/* Access invite: the level button has its padding on a phone too, and is
   muted while the row inherits the form's level. */
#access ol.invite-rows > li > button.row-level-open {
  padding-inline: 12px !important;
  color: var(--mute) !important;
}

@media (max-width: 720px) {
  #access ol.invite-rows > li {
    grid-template-columns: minmax(0, 1fr) auto !important;
    row-gap: 10px !important;

    & > label {
      grid-column: 1 / -1 !important;
    }

    & > button.row-level-open {
      grid-column: 1 !important;
      justify-self: start !important;
      padding-inline: 12px !important;
    }

    & > button.remove-row {
      grid-column: 2 !important;
      grid-row: auto !important;
      align-self: center;
    }
  }
}

/* People: the row's actions are one style of quiet text, Remove in red. */
ul.people-list details.act-role > summary,
ul.people-list details.act-rename > summary {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  padding-inline: 6px !important;
  color: var(--ink) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 721px) {
  ul.people-list > li > .row-actions {
    justify-self: end;
    justify-content: flex-end !important;
  }
}

span.no-name {
  font-weight: 400;
  color: var(--mute);
}

/* Capability: the review warning is one box with its next step inside. */
.sign-off div.caution {
  margin-block: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;

  & > p {
    margin: 0;
  }

  & > p + p {
    margin-top: 6px;
    color: var(--mute);
  }
}

/* Capability on a wide screen: the screenshots sit beside the player. */
@media (min-width: 1100px) {
  #capability-evidence:has(> figure.video) {
    display: grid;
    grid-template-columns: minmax(0, 640px) minmax(0, 1fr);
    column-gap: 24px;
    align-items: start;

    & > * {
      grid-column: 1 / -1;
    }

    & > figure.video {
      grid-column: 1;
    }

    & > figure.video + :is(fieldset, .kind, section, div) {
      grid-column: 1 / -1;
    }
  }
}

/* History: the type marks are big enough to read. */
ol.activity-log > li::before {
  font-size: 14px !important;
  color: var(--ink) !important;
}

/* ---- Round 24: the pages not touched since they were last rated ---- */

/* Acceptance: names, pills and links share one centre line per row. */
#acceptance :is(table tbody tr > *, ul > li > *) {
  vertical-align: middle;
}

#acceptance table tbody td:first-child a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
}

/* Requests across: pills stay whole on a phone. */
#requests-across mark {
  white-space: nowrap !important;
}

/* Costs: the client line sits flush under the application. */
table.pricing.across td small.sub {
  display: block;
  margin: 2px 0 0 !important;
  padding: 0 !important;
}

/* Calibration: the strip has quarter ticks, so a mark can be read against
   the scale on a phone too; the range line reaches 3:1. */
table.calibration .track {
  background-image: linear-gradient(to right, color-mix(in srgb, var(--mute) 55%, transparent) 1px, transparent 1px) !important;
  background-size: 25% 6px !important;
  background-repeat: repeat-x !important;
  background-position: 0 100% !important;
}

table.calibration .track [data-key="range"] {
  background: var(--ink) !important;
  opacity: 0.7;
}

#calibration p.empty {
  margin-top: 12px;
}

/* Agents across: Revoke lines up on every phone row. */
@media (max-width: 720px) {
  ul.tokens > li {
    align-items: start;
  }

  ul.tokens .token-actions {
    justify-self: start !important;
    margin-inline-start: 0 !important;
  }
}

/* Defect as the viewer sees it: the side panel starts level with the facts. */
@media (min-width: 1100px) {
  #request .request-side {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* Applications overview on a phone: the facts row is two even columns
   with its labels at the secondary size. */
@media (max-width: 720px) {
  #app-main .app-head dl dt {
    font-size: 11px;
    color: var(--mute);
  }
}

/* People on a phone: the role carries its label, like every card. */
@media (max-width: 720px) {
  ul.people-list .role::before {
    content: attr(data-label);
    display: block;
    font: 500 11px var(--font-mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mute);
  }

  ul.people-list .row-actions > :first-child > summary {
    padding-inline-start: 0 !important;
  }
}

/* Access invite: the row level looks like the selects beside it. */
#access ol.invite-rows > li > button.row-level-open {
  min-block-size: 44px !important;
  border: 1px solid color-mix(in srgb, var(--mute) 65%, var(--bg)) !important;
  color: var(--ink) !important;
  font-size: 14px !important;
}

/* Evidence: single files is a quiet button at body size. */
form.upload fieldset.dropzone label.pick-files > span {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  font-size: 14px !important;
}

@media (max-width: 720px) {
  form.upload span.why-disabled,
  form.upload p.why-disabled {
    margin-inline-start: 0 !important;
    padding-inline-start: 0 !important;
  }
}

/* Import: the box starts at a reading height on a phone. */
@media (max-width: 720px) {
  #import textarea {
    min-block-size: 0 !important;
    block-size: 220px;
  }
}

/* Capability on a phone: a screenshot takes the card's width. */
@media (max-width: 720px) {
  #capability-evidence figure:not(.video) {
    inline-size: 100% !important;
    max-inline-size: none !important;

    & img {
      inline-size: 100% !important;
      block-size: auto !important;
    }
  }
}

#requests-across mark[data-state],
#requests-across mark[data-decision],
#requests mark[data-state],
#requests mark[data-decision] {
  white-space: nowrap !important;
}

@media (max-width: 720px) {
  #requests-across td:has(> mark),
  #requests td:has(> mark) {
    grid-column: 1 / -1 !important;
  }
}

#acceptance li[data-signable] > a {
  align-self: center !important;
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  margin: 0 !important;
}

#acceptance li[data-signable] > * {
  align-self: center !important;
}

/* ---- Features: remind the lead, send the invitation, history filters ---- */

#acceptance p.nudge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 12px 0 0;

  & > small {
    font-size: 13px;
    color: var(--mute);
  }
}

ul.people-list button.send-invite {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--ink) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 14px;
}

#access p.bad-stays {
  margin-top: 8px;
  font-size: 14px;
}

#activity .filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px 24px;
  margin-bottom: 16px;

  & .chips {
    margin: 0;
  }

  & label.who-filter {
    display: grid;
    gap: 4px;
    font-size: 13px;
    color: var(--mute);

    & select {
      min-block-size: 44px;
      min-inline-size: 200px;
      color: var(--ink);
    }
  }
}

#activity p.filter-empty {
  display: none;
  color: var(--mute);
}

#activity:not(:has(ol.activity-log > li[data-kind]:not([style*="none"]))) p.filter-empty {
  display: block;
}

#activity:not(:has(ol.activity-log > li[data-kind]:not([style*="none"]))) ol.activity-log > li.day {
  display: none;
}

/* ---- Pattern pass ---- */

/* Two-column detail pages: the comments sit under the main column; the side
   column holds what to do next. */
@media (min-width: 721px) {
  #request .request-body {
    grid-template-areas: "facts side" "thread side" !important;
    grid-template-rows: auto 1fr !important;
  }
}

#capability .cap-comments {
  margin-top: 32px;
}

@media (max-width: 720px) {
  #capability .cap-body > div {
    display: contents !important;
  }

  #capability .cap-body > div > * {
    order: 0;
  }

  #capability .cap-body > div > .cap-comments {
    order: 2 !important;
  }

  #capability .cap-body > div > :is(section.nullsoft-only, details.recent) {
    order: 3 !important;
  }
}

/* One shape per fact: △ is the viewer's turn, ◔ someone else's, and red is
   Blocked and errors only. Needing evidence is Nullsoft's turn. */
mark[data-state="evidence_missing"],
[data-evidence="missing"] {
  box-shadow: inset 0 0 0 1.5px var(--ink) !important;
  color: var(--ink) !important;
}

[data-evidence="missing"] {
  box-shadow: none !important;
}

/* Rows and cards: one layout. Actions sit top-aligned in a group at the
   row's end; pills keep their words on one line; phone cards share one gap. */
:is(ul.people-list, #access .people-list, ul.tokens, ol.links, #acceptance ol, #acceptance ul) > li {
  align-items: start;
}

:is(.row-actions, .token-actions) {
  align-self: start !important;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

mark {
  white-space: nowrap;
}

@media (max-width: 720px) {
  :is(ul.people-list, #access .people-list, ul.tokens, #acceptance ol, #acceptance ul, table.across tbody tr) > :is(li, td) {
    row-gap: 10px;
  }

  mark {
    white-space: normal;
  }
}

/* Requests across: severity sits with the title, the state alone below. */
#requests-across td span.severity {
  display: block;
  margin-top: 6px;
}

/* Pricing: the jump to the project's settings shows on every screen. */
#pricing p.page-actions a.jump.narrow-only {
  display: inline-flex !important;
}

/* The outcome card says who reviewed the evidence. */
.sign-off p.reviewed {
  font-size: 13px;
  color: var(--mute);
}

/* One content width per desktop page: sections end on the same edge. */
@media (min-width: 1100px) {
  #app-main :is(#evidence, #import, #access, #agents, #activity) > :is(section, div, p, ol, table, form, details) {
    max-inline-size: 980px;
  }
}

/* Calibration: the buttons wrap, and a disabled one's reason takes its own
   line under them. */
#calibration p.actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 12px;

  & > span.why-disabled {
    flex-basis: 100%;
  }
}

/* ---- Round 26: the round-25 panel's ranked fixes ---- */

/* Red is Blocked, errors and destructive actions only. Severity reads by its
   word and mark; Critical alone keeps the fill. */
mark[data-severity="major"],
mark[data-severity="minor"] {
  box-shadow: inset 0 0 0 1.5px var(--ink) !important;
  color: var(--ink) !important;
  background: none !important;
}

mark[data-severity][data-proposed]:not([data-severity="critical"]) {
  box-shadow: none !important;
  outline: 1px dashed var(--ink) !important;
  outline-offset: -1px;
}

p.variance-headline[data-variance="over"],
p.variance-headline[data-variance="over"] span,
[data-variance="over"],
[data-margin="loss"],
[data-margin="low"] {
  color: var(--ink) !important;
  font-weight: 600;
}

#access ol.invite-rows button.remove-row {
  color: var(--ink) !important;
}

/* Turn marks: △ is yours, ◔ someone else's. */
[data-state="your_turn"] {
  --glyph: "△";
  box-shadow: inset 0 0 0 1.5px var(--ink) !important;
  color: var(--ink) !important;
  font-weight: 600;
}

#requests-across mark[data-state="open"],
#application aside mark[data-state="open"] {
  --glyph: "△" !important;
}

section.next-steps li[data-now="true"]::before {
  content: "◔" !important;
  color: var(--ink) !important;
}

li[data-kind] > a > b:first-child::before {
  content: "△ ";
}

/* People: an invited row's send action sits with the others. */
ul.people-list .row-actions button.send-invite {
  order: -1;
}

/* Rows: content top-aligned on the first line (rule 21). */
:is(ul.people-list, #access .people-list, ol.links, #acceptance ol, #acceptance ul) > li > * {
  align-self: start !important;
}

/* Desktop pages share one content width (rule 23). */
@media (min-width: 1100px) {
  #app-main :is(#access, #evidence, #agents) > * {
    max-inline-size: 1040px;
  }
}

/* Section rhythm: one gap between sections. */
:is(#agents, #agents[data-across], #home) > :is(section, div) + :is(section, div) {
  margin-top: 40px !important;
}

#agents[data-across] h2 {
  font-size: 20px !important;
}

/* ---- Capability description ---- */

.cap-description {
  max-inline-size: 72ch;
  margin-top: 14px;

  & .prose {
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);

    & p {
      margin: 0 0 10px;
    }

    & ul {
      margin: 0 0 10px;
      padding-inline-start: 20px;
    }

    & a {
      text-decoration: underline;
      text-underline-offset: 3px;
    }
  }

  & > div > p.mute {
    margin: 0 0 6px;
    font-size: 14px;
  }

  & button.ghost {
    min-block-size: 44px;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    color: var(--ink) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: 14px;
  }

  & .description-edit {
    display: grid;
    gap: 8px;

    & label {
      display: grid;
      gap: 6px;
      font-size: 13px;
      color: var(--mute);
    }

    & textarea {
      inline-size: 100%;
      min-block-size: 120px;
      font-size: 15px;
      color: var(--ink);
    }

    & p.mute {
      margin: 0;
      font-size: 13px;
    }
  }
}

body.shared .shared-body .prose {
  margin-bottom: 14px;
  max-inline-size: 72ch;
  line-height: 1.55;

  & p {
    margin: 0 0 8px;
  }
}

/* The map's one-line excerpt never wraps, so rows keep their height on a
   phone. */
small.excerpt {
  display: block;
  overflow: hidden;
  max-inline-size: 100%;
  margin-top: 2px;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  color: var(--mute);
}

:is(div, span, td, li):has(> small.excerpt) {
  min-inline-size: 0;
}

/* Criteria carry their numbers, as the register and the sign-off cite them. */
ol.criteria {
  counter-reset: criterion;

  & > li {
    counter-increment: criterion;
  }

  & > li > span:nth-of-type(2)::before {
    content: counter(criterion) ". ";
    font: 500 13px var(--font-mono);
    color: var(--mute);
  }
}

p.filter-none {
  margin: 16px 0;
  font-size: 15px;
}

details.signature-record {
  margin-top: 8px;
  font-size: 13px;

  & > summary {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  & dl {
    display: grid;
    gap: 2px 12px;
    margin: 4px 0 0;
  }

  & dt {
    color: var(--mute);
  }

  & dd {
    margin: 0 0 6px;
    overflow-wrap: anywhere;
  }
}

#application aside details.decided {
  margin-top: 12px;

  & > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-block-size: 44px;
    cursor: pointer;
    font-weight: 500;
  }

  & small.answer {
    display: block;
    margin-top: 2px;
    color: var(--ink);
  }
}

/* ---- Calculate all (H8) ---- */

/* The last run, one ruled section under the figures. */
#pricing section.last-run {
  margin: 8px 0 24px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 14px;

  & h2 {
    font: 500 11px var(--font-mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mute);
    margin: 0 0 8px;
  }

  & p {
    margin: 4px 0;
  }

  & small {
    color: var(--mute);
    margin-inline-start: 8px;
  }

  & data {
    font-family: var(--font-mono);
  }
}

/* Locked prices the calculation would change: a table like the others, the
   choice and the reason under it. */
#pricing section.price-changes {
  margin: 0 0 32px;
  padding-top: 12px;
  border-top: 1px solid var(--ink);

  & h2 {
    font-size: 18px;
    margin: 0 0 6px;
  }

  & table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin: 12px 0;
  }

  & :is(th, td) {
    padding: 10px 6px;
    border-bottom: 1px solid var(--line);
    text-align: end;
    font-family: var(--font-mono);
  }

  & :is(th, td):is(:first-child, :nth-child(2)) {
    text-align: start;
    font-family: var(--font-sans);
  }

  & thead th {
    font: 500 11px var(--font-mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mute);
  }

  & input[type="checkbox"] {
    inline-size: 20px;
    block-size: 20px;
  }

  & .form {
    display: grid;
    gap: 10px;
    max-inline-size: 560px;
  }

  & label.check {
    display: flex;
    align-items: center;
    gap: 8px;
    min-block-size: 44px;
  }
}

/* A price set by hand, locked, or changed after the lock: a shape and a word. */
table.pricing small.price-mark {
  display: block;
  margin-top: 2px;
  font: 400 12px var(--font-sans);
  color: var(--mute);
  white-space: normal;
}

table.pricing details.set-price {
  margin-top: 4px;
  text-align: start;
  font-family: var(--font-sans);

  & > summary {
    cursor: pointer;
    font-size: 12px;
    color: var(--mute);
    text-decoration: underline;
    text-underline-offset: 3px;
    min-block-size: 24px;
  }

  &[open] {
    display: grid;
    gap: 8px;
    min-inline-size: 220px;
    padding: 8px 0;
  }

  & label {
    display: grid;
    gap: 4px;
    font-size: 12px;
  }

  & label.check {
    display: flex;
    align-items: center;
    gap: 6px;
  }
}