/* Andronicus pages: the upload page (index.html) and the job status page (job.html).
   Plain CSS, no build step. The pages' CSP allows nothing but this origin, so there are no web
   fonts, no CDN and no url() in this file (an image URL would fall under img-src 'self'): every
   icon is inline SVG in the HTML. Dark first; the light scheme follows prefers-color-scheme.
   Contrast (WCAG 2.1, measured): every text colour is at least 4.5:1 on every background it sits
   on, and input borders and the focus ring at least 3:1 against what is next to them; the
   figures are in docs/handoffs/backend-engineer.md. */

:root {
  color-scheme: dark;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --radius: 8px;
  --radius-sm: 6px;
  --ease: 120ms ease;

  --bg: #0b0c0e;
  --glow: rgba(94, 106, 210, 0.14);
  --surface: #141518;
  --field: #0e0f11;
  --hover: rgba(255, 255, 255, 0.045);
  --zebra: rgba(255, 255, 255, 0.025);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.12);
  --field-line: #646973;
  --text: #ededef;
  --muted: #9a9ea6;
  --accent: #5e6ad2;
  --accent-hover: #5763cb;
  --accent-press: #4c58c2;
  --accent-text: #8f99ff;
  --accent-tint: rgba(94, 106, 210, 0.1);
  --on-accent: #ffffff;
  --focus: #8f99ff;
  --disabled-bg: #262a45;
  --disabled-text: #9da2c4;
  --ok: #5fd39b;
  --ok-bg: rgba(95, 211, 155, 0.12);
  --busy: #f2c45a;
  --busy-bg: rgba(242, 196, 90, 0.12);
  --bad: #ff8f8f;
  --bad-bg: rgba(255, 107, 107, 0.13);
  /* a withheld claim's row, card head and sidebar line; over the surface rgb(44, 30, 32), hovered
     rgb(53, 33, 36): --muted on them 5.95:1 and 5.60:1, the row's lowest text (the type tag)
     5.66:1 and 5.33:1 */
  --withheld-bg: rgba(255, 107, 107, 0.1);
  --withheld-hover: rgba(255, 107, 107, 0.14);
  --withheld-pill: rgba(255, 107, 107, 0.13); /* the "claim withheld" pill on them: 5.98:1 */
  --idle: #aeb2ba;
  --idle-bg: rgba(255, 255, 255, 0.07);
  --error: #ff9d9d;
  --error-bg: rgba(255, 107, 107, 0.1);
  --error-line: rgba(255, 107, 107, 0.35);
  --paper-surface: #2a2c31; /* the transcript view's surface; the pages on it are white */
  --paper-muted: #b3b7bf; /* the "Page n" labels on that surface: 6.95:1 */
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #ffffff;
    --glow: rgba(79, 91, 213, 0.06);
    --surface: #f7f8f8;
    --field: #ffffff;
    --hover: rgba(0, 0, 0, 0.045);
    --zebra: rgba(0, 0, 0, 0.022);
    --line: #e6e7e9;
    --line-strong: #dcdee2;
    --field-line: #868b94;
    --text: #17181b;
    --muted: #62666e;
    --accent: #4f5bd5;
    --accent-hover: #4350c6;
    --accent-press: #3a46b8;
    --accent-text: #4450c8;
    --accent-tint: rgba(79, 91, 213, 0.07);
    --focus: #4f5bd5;
    --disabled-bg: #d9dcf5;
    --disabled-text: #555a8c; /* 4.80:1: the inert Submit keeps focus while uploading */
    --ok: #13693c;
    --ok-bg: #e1f3e8;
    --busy: #7a4b00;
    --busy-bg: #fbefd3;
    --bad: #b1241c;
    --bad-bg: #fde7e5;
    --withheld-bg: #fcebea; /* --muted on it 5.00:1 */
    --withheld-hover: #fae3e1; /* --muted 4.70:1 */
    --withheld-pill: #f8d3cf; /* a fill that shows on the tint; --bad on it 4.85:1 */
    --idle: #50555d;
    --idle-bg: #eceef1;
    --error: #b1241c;
    --error-bg: #fdecea;
    --error-line: #f3b9b4;
    --paper-surface: #e6e7ea;
    --paper-muted: #50545c; /* 6.17:1 on the surface */
  }
}

/* -- base ---------------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(72rem 26rem at 50% -14rem, var(--glow), transparent 70%) no-repeat,
    var(--bg);
  color: var(--text);
  font: 400 0.875rem/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.012em;
}
p {
  margin: 0;
}
a {
  color: var(--accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-thickness: 2px;
}
code,
.mono {
  font-family: var(--mono);
  font-size: 0.8125rem;
}
:focus:not(:focus-visible) {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  top: -4rem;
  left: 0.75rem;
  z-index: 10;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus {
  top: 0.5rem;
}

/* -- chrome: the top bar, the page head, the footer ------------------------------------------ */

.topbar {
  height: 3rem;
  border-bottom: 1px solid var(--line);
}
.topbar__inner,
.page,
.footer {
  width: 100%;
  max-width: 66rem;
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 100%;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}
a.brand:hover {
  color: var(--text);
}
.brand__mark {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--accent);
}
.page {
  padding-top: 2rem;
  padding-bottom: 2.5rem;
}
.page__head {
  margin-bottom: 1.5rem;
}
.page__title {
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.page__title code {
  font-size: 0.875em;
  font-weight: 600;
  letter-spacing: 0;
}
.page__lede {
  margin-top: 0.375rem;
  color: var(--muted);
  font-size: 0.9375rem;
}
.page__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.crumb {
  margin-bottom: 1rem;
  font-size: 0.875rem;
}
.crumb a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.crumb svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.footer {
  padding-bottom: 2.5rem;
  color: var(--muted);
  font-size: 0.8125rem;
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

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

.card {
  margin: 0 0 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.75rem;
  min-height: 2.875rem;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--line);
}
.card__title {
  font-size: 0.875rem;
  letter-spacing: -0.005em;
}
.card__meta {
  color: var(--muted);
  font-size: 0.8125rem;
}
.card__tools {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}
.toolgroups {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem 1.25rem;
}
.toolgroup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.toolgroup__label {
  color: var(--muted);
  font-size: 0.8125rem;
}
.card__title[tabindex="-1"] {
  border-radius: 2px;
}
.card__body {
  padding: 1rem;
}
.card.is-compact .card__head {
  border-bottom: 0;
}
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 0 1rem;
  align-items: start;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  padding: 0 0.875rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--ease), border-color var(--ease), color var(--ease);
}
a.btn {
  text-decoration: none;
}
.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
}
.btn--primary:hover {
  background: var(--accent-hover);
}
.btn--primary:active {
  background: var(--accent-press);
}
.btn--primary:disabled,
.btn--primary[aria-disabled="true"] {
  background: var(--disabled-bg);
  color: var(--disabled-text);
  cursor: not-allowed;
}
.btn--ghost {
  border-color: var(--line-strong);
}
.btn--ghost:hover {
  border-color: var(--field-line);
  background: var(--hover);
}
.btn--ghost:disabled {
  color: var(--muted);
  cursor: not-allowed;
}
.btn--sm {
  min-height: 1.875rem;
  padding: 0 0.625rem;
  font-size: 0.8125rem;
}
.btn--link {
  min-height: 0;
  padding: 0;
  border: 0;
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.btn--link:hover {
  text-decoration-thickness: 2px;
}
.btn__glyph {
  flex: none;
  width: 14px;
  height: 14px;
}
.btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.help + .btnrow {
  margin-top: 0.75rem;
}
/* the job page's Results buttons wrap inside the card rather than widen the page (1.4.12 text
   spacing at 320 px) */
.btnrow.results .btn {
  white-space: normal;
  text-align: left;
}

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

label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
}
.label__aside {
  margin-left: 0.25rem;
  color: var(--muted);
  font-weight: 400;
}
.input {
  width: 100%;
  min-height: 2.25rem;
  padding: 0.4375rem 0.625rem;
  border: 1px solid var(--field-line);
  border-radius: var(--radius-sm);
  background-color: var(--field);
  color: var(--text);
  font: inherit;
  transition: border-color var(--ease);
}
.input:hover {
  border-color: var(--muted);
}
.input:focus-visible {
  border-color: var(--focus);
  outline-offset: 1px;
}
select.input {
  appearance: none;
  padding-right: 2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.help {
  margin-top: 0.375rem;
  color: var(--muted);
  font-size: 0.8125rem;
}
.inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.inline .input {
  flex: 1 1 16rem;
  width: auto;
}
/* task 72: the remediated file's SHA-256 under Results */
.digest {
  margin-top: 1rem;
}
.digest .input {
  font-family: var(--mono);
  font-size: 0.8125rem;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.field {
  min-width: 0;
}
.optset {
  margin: 0;
  border: 0;
  min-width: 0;
}
.optset > legend {
  /* the summary above says the same; the legend stays for the group's name */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.625rem;
  align-items: start;
  margin-top: 0.75rem;
}
.check input {
  width: 1rem;
  height: 1rem;
  margin: 0.15rem 0 0;
  accent-color: var(--accent);
}
.check label {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 400;
}
.check__code {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.75rem;
}
/* a sentence under a checkbox's label (task 66), aligned with the label, not the box */
.check__help {
  grid-column: 2;
  margin: -0.375rem 0 0;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 1rem;
}
.actions__hint {
  color: var(--muted);
  font-size: 0.8125rem;
}

/* -- the drop zone ---------------------------------------------------------------------------- */

.drop {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.375rem;
  min-height: 13.5rem;
  padding: 1.5rem 1rem;
  border: 1px dashed var(--field-line);
  border-radius: var(--radius);
  background: var(--field);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--ease), background-color var(--ease);
}
.drop.is-over {
  border-style: solid;
  border-color: var(--accent);
  background: linear-gradient(var(--accent-tint), var(--accent-tint)), var(--field);
}
.drop__glyph {
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.375rem;
  padding: 0.6875rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
}
.drop.is-over .drop__glyph {
  border-color: var(--accent);
  color: var(--accent-text);
}
.drop__title {
  font-size: 0.9375rem;
  font-weight: 500;
}
.drop__or {
  color: var(--muted);
  font-size: 0.8125rem;
}
.drop__hint {
  max-width: 30rem;
  margin-top: 0.375rem;
  color: var(--muted);
  font-size: 0.8125rem;
}
.drop__msg {
  max-width: 34rem;
  color: var(--error);
  font-size: 0.8125rem;
  font-weight: 500;
}
.drop__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.drop__count {
  margin-right: auto;
  color: var(--muted);
  font-size: 0.8125rem;
}
/* one file: the row with "Add files" beside it, as the single-file zone looked */
.drop.has-file {
  grid-template-columns: minmax(0, 1fr) auto;
  justify-items: stretch;
  align-items: center;
  gap: 0.5rem 0.75rem;
  min-height: 0;
  padding: 0.75rem;
  border-style: solid;
  border-color: var(--line-strong);
  text-align: left;
  cursor: default;
}
.drop.has-file .drop__glyph,
.drop.has-file .drop__title,
.drop.has-file .drop__or,
.drop.has-file .drop__hint {
  display: none;
}
.drop.has-file .drop__msg {
  grid-column: 1 / -1;
}
/* several: the list, then a bar with the count, "Add files" and "Remove all" */
.drop.is-multi .files,
.drop.is-multi .drop__tools {
  grid-column: 1 / -1;
}
.drop.is-multi .drop__tools {
  justify-content: flex-end;
  padding-top: 0.625rem;
  border-top: 1px solid var(--line);
}
.files {
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.files__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
}
.drop.is-multi .files__row {
  padding: 0.5rem 0;
}
.drop.is-multi .files__row:first-child {
  padding-top: 0;
}
.files__row + .files__row {
  border-top: 1px solid var(--line);
}
.files__glyph {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.4375rem;
  border-radius: var(--radius-sm);
  background: var(--accent-tint);
  color: var(--accent-text);
}
.files__text {
  min-width: 0;
}
.files__name {
  font-weight: 500;
  overflow-wrap: anywhere;
}
.files__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.125rem;
  color: var(--muted);
  font-size: 0.8125rem;
}
.files__state {
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}
.files__state.is-ok {
  color: var(--ok);
}
.files__state.is-busy {
  color: var(--busy);
}
.files__state.is-bad {
  color: var(--error);
}
.files__state.is-warn {
  color: var(--busy);
}
/* a PDF's password (task 62): the field under the name, the sentence, the outcome line. The box
   follows the text in the row's markup (before Remove) and takes a grid line of its own under the
   name; on a narrow screen it spans the whole row. */
.files__row > .files__pw {
  grid-column: 2 / -1;
  grid-row: 2;
  max-width: 28rem;
}
.files__row > .files__remove {
  grid-column: 3;
  grid-row: 1;
}
@media (max-width: 30rem) {
  .files__row > .files__pw {
    grid-column: 1 / -1;
  }
}
.files__pw label {
  margin-bottom: 0.25rem;
}
.files__pwinput {
  max-width: 20rem;
  min-height: 2rem;
}
.files__pwinput:read-only {
  border-color: var(--line-strong);
  color: var(--muted);
}
.files__pwhelp {
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.8125rem;
}
.files__pwstate {
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.files__pwstate.is-ok {
  color: var(--ok);
}
.files__pwstate.is-bad {
  color: var(--error);
}
/* the glyphs are decoration: the words carry the outcome, and the alt text keeps them silent */
.files__pwstate.is-ok::before {
  content: "\2713\00a0";
  content: "\2713\00a0" / "";
}
.files__pwstate.is-bad::before {
  content: "\2717\00a0";
  content: "\2717\00a0" / "";
}
.progress {
  display: flex;
  flex-wrap: wrap; /* a narrow row puts the text under the bar, never a 0 px bar */
  align-items: center;
  gap: 0.25rem 0.625rem;
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.8125rem;
}
.progress progress {
  flex: 1 1 6rem;
  height: 0.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--line-strong);
  color: var(--accent-text);
  -webkit-appearance: none;
  appearance: none;
  overflow: hidden;
}
.progress progress::-webkit-progress-bar {
  border-radius: 999px;
  background: var(--line-strong);
}
.progress progress::-webkit-progress-value {
  border-radius: 999px;
  background: var(--accent-text);
}
.progress progress::-moz-progress-bar {
  border-radius: 999px;
  background: var(--accent-text);
}

/* -- tags, pills, dots ------------------------------------------------------------------------ */

.tag {
  display: inline-flex;
  align-items: center;
  height: 1.375rem;
  padding: 0 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--idle-bg);
  color: var(--idle);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.tag--type {
  border-color: transparent;
  background: var(--accent-tint);
  color: var(--accent-text);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 1.375rem;
  padding: 0 0.5rem 0 0.4375rem;
  border-radius: 999px;
  background: var(--idle-bg);
  color: var(--idle);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.pill::before,
.dot {
  content: "";
  display: inline-block;
  flex: none;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: currentColor;
}
.pill--ok {
  background: var(--ok-bg);
  color: var(--ok);
}
.pill--busy {
  background: var(--busy-bg);
  color: var(--busy);
}
.pill--bad {
  background: var(--bad-bg);
  color: var(--bad);
}
.dot--ok {
  color: var(--ok);
}
/* Stop (task 50): "stopping" and "cancelled" are neutral, never the failure red (the withheld
   rows own red); beside the word, a square dot for stopping and a ring for cancelled, whose pill
   is outlined and not filled. The ring and the outline are borders, which forced colours keep. */
.pill--stopping::before {
  border-radius: 1px;
}
.pill--cancelled {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--muted);
}
.pill--cancelled::before {
  border: 1.5px solid currentColor;
  background: transparent;
}

/* -- the API key line, the status line, disclosures ------------------------------------------- */

.keyline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.625rem;
  margin-left: auto;
}
.keyline__state {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.8125rem;
}
.keyline__sep {
  color: var(--muted);
}
.notice {
  margin: 0 0 1rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.875rem;
}
.notice:empty {
  margin: 0;
  padding: 0;
  border: 0;
}
.notice--error {
  border-color: var(--error-line);
  background: var(--error-bg);
  color: var(--error);
}
.disclosure {
  border-top: 1px solid var(--line);
}
/* a card that is nothing but disclosures (the upload page's "What happens to my file" and "About
   claims", task 83): the card's own border is the first one's top edge */
.card > .disclosure:first-child {
  border-top: 0;
}
.disclosure > summary {
  display: block;
  padding: 0.75rem 1rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.disclosure > summary::-webkit-details-marker {
  display: none;
}
.disclosure > summary::before {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin: 0 0.75rem 0.15rem 0.125rem;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform var(--ease);
}
.disclosure[open] > summary::before {
  transform: rotate(45deg);
}
.disclosure > summary:hover {
  background: var(--hover);
}
.disclosure > summary .tag {
  margin-left: 0.5rem;
}
.disclosure__body {
  padding: 0 1rem 1rem 2.25rem;
}
.disclosure--boxed {
  margin-top: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.disclosure--boxed > summary {
  border-radius: var(--radius-sm);
}
.prose {
  max-width: 46rem;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.prose p + p {
  margin-top: 0.625rem;
}

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

.table-wrap {
  /* positioned, so the visually hidden text in its buttons is clipped with the table */
  position: relative;
  overflow-x: auto;
  border-radius: 0 0 var(--radius) var(--radius);
}
.table-wrap:focus-visible {
  outline-offset: -2px;
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.table th {
  height: 2rem;
  padding: 0 0.75rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}
.table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--line);
  line-height: 1.25rem;
  vertical-align: top;
}
.table tbody tr:nth-child(even) {
  background: var(--zebra);
}
.table tbody tr:hover {
  background: var(--hover);
}
.table tbody tr:last-child td {
  border-bottom: 0;
}
.table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.table__empty {
  color: var(--muted);
}
.table .nowrap {
  white-space: nowrap;
}
.table .file {
  min-width: 13rem;
  max-width: 20rem;
  overflow-wrap: anywhere;
}
.table .state {
  min-width: 10rem;
  max-width: 16rem;
}
.table .file .tag {
  margin-left: 0.375rem;
  vertical-align: 1px;
}
.table .results {
  min-width: 16rem;
}
.acts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.125rem 0.875rem;
}
.acts + .acts {
  margin-top: 0.25rem;
}
.acts__label {
  color: var(--muted);
  font-size: 0.75rem;
}
/* the Stop button and its question ("Stop this job?", Stop, Keep running), in the jobs table's
   Results cell under "waiting" and beside the job page's status pill (task 50) */
.stopbox {
  margin-top: 0.375rem;
}
.stopbox:empty {
  display: none;
}
.stopbox--head {
  margin-top: 0;
}
.stop-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.5rem;
}
.stop-ask__q {
  color: var(--text);
  font-weight: 500;
}
.stop-ask__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.table .results .btn--link,
.table .results .act {
  font-size: inherit;
  white-space: nowrap;
}
.jobid {
  font-family: var(--mono);
  font-size: 0.75rem;
  text-decoration: none;
}
.jobid:hover {
  text-decoration: underline;
}
.sub {
  display: block;
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
/* A done job whose claim is withheld (may_claim false; app.js markWithheld): the whole row tinted
   in the failure hue, a bar on its left edge, the "claim withheld" pill under the status pill and
   the claim line in the text colour. The bar is a border on a positioned box, so it takes no room
   in the table and forced colours keep it where they drop the tint; the pill says it in words.
   Contrast in the row: docs/handoffs/backend-engineer.md. */
.table tbody tr.is-withheld {
  background: var(--withheld-bg);
}
.table tbody tr.is-withheld:hover {
  background: var(--withheld-hover);
}
.table tbody tr.is-withheld > td:first-child {
  position: relative;
}
.table tbody tr.is-withheld > td:first-child::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-left: 3px solid var(--bad);
}
.table tr.is-withheld .row-claim {
  color: var(--text);
}
/* the second pill: its own line under the first, at every width */
.pill--withheld {
  display: flex;
  width: max-content;
  max-width: 100%;
  margin-top: 0.25rem;
}
.is-withheld .pill--bad,
.card--withheld .pill--bad {
  background: var(--withheld-pill);
}

/* -- the job page ----------------------------------------------------------------------------- */

/* The Steps table's running step (task 47): its name in bold, its elapsed time after the pill
   (the pill's word says running; never colour alone). */
.table tr.is-current td:first-child {
  font-weight: 600;
}
.step-since {
  margin-left: 0.375rem;
  color: var(--muted);
  font-size: 0.8125rem;
  white-space: nowrap;
}
/* The Steps table's "Models and cost" cell (task 55): the models on the first line, the calls,
   cache hits and cost under them, then the tokens; it wraps inside the table's own sideways
   scroll, like the other columns, so the page never scrolls sideways. */
.table td.use {
  min-width: 13.5rem;
}
.use__models {
  display: block;
  overflow-wrap: anywhere;
}
.use__line {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.5rem 1.5rem;
  margin: 0;
}
.facts dt {
  color: var(--muted);
}
.facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.list {
  margin: 0;
  padding-left: 1.25rem;
}
.list li + li {
  margin-top: 0.25rem;
}
.claim-text + .claim-text,
.claim-text + .list,
.list + .claim-text {
  margin-top: 0.5rem;
}
/* The claim in plain language (task 56): the lead sentence, the plain details with their labels
   in the text's weight 600, and the "Technical detail" disclosure (the gate names, rule ids and
   paths) closed under them; a failed job's lines follow the sentence in view. */
.claim-lead {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
}
.claim-lead + .claim-details,
.claim-lead + .claim-text,
.claim-details + .claim-text {
  margin-top: 0.625rem;
}
.claim-label {
  font-weight: 600;
}
.claim-details li {
  overflow-wrap: anywhere;
}
.claim-tech {
  margin-top: 0.875rem;
}
.claim-tech > summary {
  padding: 0.5rem 0.75rem;
}
.claim-tech > .disclosure__body {
  padding: 0.25rem 0.75rem 0.75rem 1.875rem;
  overflow-wrap: anywhere;
}
/* The Conformance claim card of a done job whose claim is withheld: the head tinted, a bar on the
   card's left edge (a border: forced colours keep it), "claim withheld" beside the title; the
   padding gives back the bar's extra 2 px so the text stays where it was. */
.card--withheld {
  border-color: var(--error-line);
  border-left: 3px solid var(--bad);
}
.card--withheld > .card__head {
  border-radius: calc(var(--radius) - 3px) calc(var(--radius) - 1px) 0 0 / calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  background: var(--withheld-bg);
}
.card--withheld > .card__head,
.card--withheld > .card__body {
  padding-left: calc(1rem - 2px);
}
.frame-slot {
  margin-top: 0.75rem;
}
.doc-frame {
  display: block;
  width: 100%;
  height: min(36rem, 70vh);
  min-height: 20rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--field);
}
.doc-frame:focus,
.doc-frame.has-focus {
  /* focus in a frame: the ring is drawn on the frame (an iframe never matches :focus-visible,
     and Chromium not even :focus while its document holds focus: job.js sets has-focus) */
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.frame-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  min-height: 7rem;
  padding: 1rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--field);
  color: var(--muted);
  text-align: center;
}
.frame-state--error {
  border-style: solid;
  border-color: var(--error-line);
  color: var(--error);
}

/* -- the transcript panel (both pages) -------------------------------------------------------- */

.transcript {
  max-height: 70vh;
  margin-top: 0.75rem;
  padding: 0.875rem 1rem;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--field);
}
.transcript:focus-visible {
  outline-offset: 1px;
}
.transcript__text {
  max-width: 48rem;
  margin: 0;
  color: var(--text);
  font: 400 0.875rem/1.6 var(--font);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 4;
}

/* -- the reader (job page): the main area and the sidebar (task 46, Morgan's DocAccess ask) ---- */

/* A done job: the main area (the PDF in the browser's viewer, the transcript as pages, or the
   report) and the sidebar of document tools: on the right at 64em (1024 px) and wider, where the
   reader is the screen's height and both columns scroll on their own; above the main area on
   narrower screens, collapsed behind the "Document tools" disclosure. Before the job is done the
   main area alone shows the report's place. */
.reader {
  padding: 1rem;
}
.reader__toolshead {
  margin: 0 0 0.75rem;
  font-size: inherit;
  letter-spacing: 0;
}
.reader__disclose {
  width: 100%;
  justify-content: flex-start;
}
.reader__chev,
.side__chev {
  transition: transform var(--ease);
}
[aria-expanded="true"] > .reader__chev,
[aria-expanded="true"] > .side__chev {
  transform: rotate(90deg);
}
.reader__side {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.reader__main {
  min-width: 0;
}
.reader.is-ready .reader__main {
  display: flex;
  flex-direction: column;
  height: 70vh;
  min-height: 20rem;
}
.reader.is-ready .pane {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}
.reader.is-ready .frame-slot {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  margin-top: 0;
}
.reader.is-ready .frame-slot > .frame-state {
  flex: 1 1 auto;
}
.reader.is-ready .doc-frame {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}
.pane:focus-visible {
  outline-offset: 2px;
}
.pane__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.pane__note {
  flex-basis: 100%;
}
.pane .help {
  margin-top: 0;
}
.btn--toggle .btn__check {
  display: none;
  width: 14px;
  height: 14px;
}
.btn--toggle[aria-pressed="true"] {
  /* pressed: the check mark, the accent border and tint (state never by colour alone) */
  border-color: var(--accent-text);
  background: var(--accent-tint);
  color: var(--accent-text);
}
.btn--toggle[aria-pressed="true"] .btn__check {
  display: block;
}
@media (max-width: 63.99em) {
  .reader.is-ready:not(.tools-open) .reader__side {
    display: none;
  }
}
@media (min-width: 64em) {
  .reader.is-ready {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18.75rem;
    grid-template-areas: "main side";
    gap: 0 1.25rem;
    height: calc(100vh - 4.5rem);
    min-height: 30rem;
  }
  .reader.is-ready .reader__toolshead {
    display: none;
  }
  .reader.is-ready .reader__side {
    grid-area: side;
    min-height: 0;
    margin: -0.25rem 0 0;
    /* room for the focus rings inside the sidebar's own scroll */
    padding: 0.25rem 0.375rem 0.5rem 1.25rem;
    overflow-y: auto;
    border-bottom: 0;
    border-left: 1px solid var(--line);
  }
  .reader.is-ready .reader__main {
    grid-area: main;
    height: auto;
    min-height: 0;
  }
}

/* -- the sidebar's parts -------------------------------------------------------------------- */

.side__block + .side__block {
  margin-top: 0.875rem;
}
.side__find,
.side__outline,
.side__actions {
  padding-top: 0.875rem;
  border-top: 1px solid var(--line);
}
.side__note {
  margin-top: 0.5rem;
}
.side__title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.side__meta {
  margin-top: 0.125rem;
  color: var(--muted);
  font-size: 0.8125rem;
}
.side__claim {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}
.side__claim.is-withheld {
  padding: 0.375rem 0.5rem 0.4375rem 0.625rem;
  border-left: 3px solid var(--bad);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--withheld-bg);
}
.side__claim .pill--withheld {
  margin: 0 0 0.25rem;
}
.side__pages {
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.side__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.side__actions .btn {
  width: 100%;
  white-space: normal;
  text-align: center;
}
.side__more {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
/* The view switch (accessibility review B1): a fieldset of two radios, each label the view's
   name; the label of the shown view is bold and the thumb sits on its side (state never by colour
   alone). The radios are transparent, each over its own label; the ring is drawn on the focused
   radio's label; the track is decoration driven by :has(). */
.vswitch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--muted);
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.25;
  transition: border-color var(--ease);
}
.vswitch:hover {
  border-color: var(--field-line);
}
.vswitch__radio {
  /* each radio shares its label's grid cell and lies over it, transparent: a pointer, a
     magnifier following focus and a speech tool clicking where the control is all meet the
     right view (1 px radios out of the flow sat one on top of the other at the box's start; a
     fieldset's grid is an inner box, so they cannot be placed in its areas) */
  position: relative;
  z-index: 1;
  grid-row: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
#view-document,
.vswitch__opt--off {
  grid-column: 1;
}
#view-transcript,
.vswitch__opt--on {
  grid-column: 3;
}
.vswitch__radio:disabled {
  cursor: not-allowed;
}
.vswitch__opt {
  /* the label fills the row's height, so each view is a target of 24 px or more */
  grid-row: 1;
  display: flex;
  align-items: center;
  align-self: stretch;
  margin: 0;
  font: inherit;
  cursor: pointer;
}
.vswitch__opt--off {
  justify-content: flex-end;
  text-align: right;
}
.vswitch__opt--on {
  justify-content: flex-start;
  text-align: left;
}
.vswitch__radio:checked + .vswitch__opt {
  color: var(--text);
  font-weight: 600;
}
.vswitch__radio:focus-visible + .vswitch__opt {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}
.vswitch__radio:disabled + .vswitch__opt {
  cursor: not-allowed;
}
.vswitch__track {
  position: relative;
  grid-area: 1 / 2;
  display: block;
  width: 2.25rem;
  height: 1.25rem;
  border: 1px solid var(--field-line);
  border-radius: 999px;
  background: var(--field);
  cursor: pointer;
  transition: background-color var(--ease), border-color var(--ease);
}
.vswitch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.25rem - 6px);
  height: calc(1.25rem - 6px);
  border-radius: 50%;
  background: var(--text);
  transition: transform var(--ease);
}
.vswitch:has(#view-transcript:checked) .vswitch__track {
  border-color: var(--accent);
  background: var(--accent);
}
.vswitch:has(#view-transcript:checked) .vswitch__thumb {
  background: #ffffff;
  transform: translateX(1rem);
}
.vswitch:has(.vswitch__radio:disabled) {
  /* fixed (an Office job, or no transcript): a dashed edge and the note below say so */
  border-style: dashed;
}
.vswitch:has(.vswitch__radio:disabled):hover {
  border-color: var(--line-strong);
}
.vswitch:has(.vswitch__radio:disabled) .vswitch__track {
  cursor: not-allowed;
}
@media (forced-colors: active) {
  /* the thumb and the on track are fills, which forced colours drop: system colours keep them */
  .vswitch__thumb {
    background: CanvasText;
    forced-color-adjust: none;
  }
  .vswitch:has(#view-transcript:checked) .vswitch__track {
    background: Highlight;
    forced-color-adjust: none;
  }
  .vswitch:has(#view-transcript:checked) .vswitch__thumb {
    background: HighlightText;
  }
}
.find__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.find__count {
  margin-right: auto;
  color: var(--muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.side__h {
  margin: 0;
  font-size: inherit;
  letter-spacing: 0;
}
.side__disclose {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  width: 100%;
  min-height: 2rem;
  padding: 0.25rem 0.375rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.side__disclose:hover {
  background: var(--hover);
}
.outline {
  /* long outlines scroll here, so the actions below stay near */
  max-height: min(16rem, 30vh);
  margin-top: 0.375rem;
  overflow-y: auto;
}
.outline ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.outline ul ul {
  padding-left: 0.875rem;
}
.outline__link {
  display: block;
  padding: 0.3125rem 0.5rem;
  border-left: 2px solid var(--line-strong);
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.35;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.outline__link:hover {
  color: var(--text);
  background: var(--hover);
  text-decoration: underline;
}
.outline__link[aria-current="location"] {
  /* the section in view: the accent bar, the text colour and the weight */
  border-left-color: var(--accent-text);
  background: var(--accent-tint);
  color: var(--text);
  font-weight: 600;
}
.outline__link:focus-visible {
  outline-offset: -2px;
}

/* -- the transcript view: white pages on a grey surface ---------------------------------------- */

/* The surface is grey in both schemes; each page is a white sheet with dark text in both (paper):
   the sheet re-scopes the colour tokens, so the structured transcript's own rules apply on it. */
.tx-surface {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 1.25rem;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-surface);
  color: var(--text);
}
.tx-surface > .frame-state {
  background: var(--field);
}
.tx-page,
.tx-plainsheet {
  color-scheme: light;
  --text: #17181b;
  --muted: #575b63;
  --line: #e3e5e8;
  --line-strong: #cfd2d7;
  --zebra: rgba(0, 0, 0, 0.035);
  --surface: #f5f6f7;
  --field: #ffffff;
  --idle: #4b5058;
  --idle-bg: #eceef1;
  --error-line: #e3a49e;
  --focus: #4f5bd5;
  --accent-text: #4450c8;
  max-width: 48rem;
  margin: 0 auto;
  padding: 2rem 2.25rem;
  border-radius: 2px;
  background: #ffffff;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.12);
}
.tx-plainsheet .transcript__text {
  max-width: none;
}
.tx-meta {
  margin-bottom: 0.75rem;
  color: var(--muted);
  font-size: 0.8125rem;
}
.tx-sheet {
  max-width: 48rem;
  margin: 0 auto;
}
.tx-sheet + .tx-sheet {
  margin-top: 1.5rem;
}
.tx-sheet__label {
  margin: 0 0 0.375rem;
  color: var(--paper-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tx-empty-page {
  color: var(--muted);
  font-style: italic;
}
.tx-tail {
  max-width: 48rem;
  margin: 1.25rem auto 0;
  text-align: center;
}
.tx-tail .tx-marker {
  color: var(--paper-muted);
}
mark.find-hit {
  border-radius: 2px;
  background: #fde68a;
  color: #17181b;
}
mark.find-hit.is-current {
  /* the current match: a stronger fill and a dark outline (not by colour alone) */
  background: #fbbf24;
  outline: 2px solid #17181b;
  outline-offset: 1px;
}
@media (max-width: 40rem) {
  .tx-surface {
    padding: 0.75rem;
  }
  .tx-page,
  .tx-plainsheet {
    padding: 1rem;
  }
}

/* -- the transcript as structure (job page): the writer's markers as elements --------------- */

.tx {
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.tx-head {
  max-width: 48rem;
  margin: 0 auto 1.25rem;
}
.tx .tx-title {
  margin: 0 0 0.375rem;
  font-size: 1.375rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.tx-head .tx-lead,
.tx-head .tx-fact {
  color: var(--paper-muted);
}
.tx-lead,
.tx-fact,
.tx-marker {
  color: var(--muted);
  font-size: 0.8125rem;
}
.tx-fact + .tx-fact {
  margin-top: 0.125rem;
}
.tx-page > * + * {
  margin-top: 0.625rem;
}
.tx h1,
.tx h2,
.tx h3,
.tx h4,
.tx h5,
.tx h6 {
  /* the page's type scale: the document's own heading levels, read as such */
  margin-top: 1.25rem;
  line-height: 1.3;
}
.tx-page > :first-child {
  margin-top: 0;
}
.tx h1 {
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}
.tx h2 {
  font-size: 1.25rem;
}
.tx h3 {
  font-size: 1.125rem;
}
.tx h4 {
  font-size: 1rem;
}
.tx h5 {
  font-size: 0.9375rem;
}
.tx h6 {
  font-size: 0.875rem;
  letter-spacing: 0.03em;
  font-variant-caps: all-small-caps;  /* document text: never uppercased for AT */
}
.tx-break {
  /* a page or slide break: a muted labelled separator */
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0 1rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tx-break::before,
.tx-break::after {
  content: "";
  flex: 1 1 auto;
  border-top: 1px solid var(--line-strong);
}
.tx-list {
  margin: 0.375rem 0;
  padding-left: 1.5rem;
}
.tx-list li + li {
  margin-top: 0.25rem;
}
.tx-li--labelled {
  /* the item carries its own label (1., a), a bullet of its own) */
  list-style: none;
}
.tx-list p {
  margin: 0;
}
.tx-list li > * + * {
  margin-top: 0.25rem;
}
.tx-table-wrap {
  margin: 0.75rem 0;
  overflow-x: auto;
}
.tx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.tx-table caption {
  padding: 0 0 0.375rem;
  color: var(--muted);
  font-size: 0.8125rem;
  text-align: left;
  caption-side: top;
}
.tx-table th,
.tx-table td {
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--line-strong);
  text-align: left;
  vertical-align: top;
}
.tx-table th {
  background: var(--zebra);
  font-weight: 600;
}
.tx-table td p {
  margin: 0;
}
.tx-figure {
  margin: 0.75rem 0;
  padding: 0.625rem 0.75rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.tx-figure figcaption {
  font-style: italic;
}
.tx-figlabel {
  /* "Figure:" before the alt text: where the image sits, described (decorative ones omitted) */
  font-style: normal;
  font-weight: 600;
}
.tx-figure--noalt {
  border-color: var(--error-line);
}
.tx-figure p {
  margin-top: 0.375rem;
}
.tx-tag {
  /* the marker's name, kept as text (a screen reader hears "Figure", "Link", "Note") */
  display: inline-block;
  padding: 0 0.375rem;
  border-radius: 999px;
  background: var(--idle-bg);
  color: var(--idle);
  font-family: var(--font);
  font-size: 0.6875rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.125rem;
  letter-spacing: 0.03em;
  font-variant-caps: all-small-caps;  /* looks like capitals; the exposed text keeps its case */
  vertical-align: 1px;
}
.tx-link {
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.tx-caption {
  color: var(--muted);
  font-style: italic;
}
.tx-note {
  padding-left: 0.75rem;
  border-left: 2px solid var(--line-strong);
}
.tx-toc {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.tx-toc .tx-marker {
  margin-bottom: 0.25rem;
  font-weight: 500;
}
.tx-end {
  margin-top: 1.5rem;
  text-align: center;
}

/* -- Changes to the file (task 64) ------------------------------------------------------------- */

/* The lead line in the text's weight 600 with its detail, then the sections: an h3 holding a
   full-width toggle with a chevron (currentColor, so forced colours keep it), the name in the
   text colour and the count muted, a hairline above each; the figures as rows with the page, the
   confidence and an outlined "needs review" tag (a border, which forced colours keep) above the
   alt text. Long words wrap anywhere (320 px, 1.4.10). */
.chg-lead {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
}
.chg-lead + .help {
  margin-top: 0.25rem;
}
.chg-adds {
  margin-top: 0.625rem;
}
.chg-adds li,
.chg-list li,
.chg-items li {
  overflow-wrap: anywhere;
}
.chg__h {
  margin: 1rem -0.375rem 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
  font-size: inherit;
  letter-spacing: 0;
}
.chg__h + .chg__body + .chg__h,
.chg__h + .chg__body[hidden] + .chg__h {
  margin-top: 0.5rem;
}
.chg__toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.25rem;
  padding: 0.375rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.chg__toggle:hover {
  background: var(--hover);
}
.chg__chev {
  flex: none;
  width: 14px;
  height: 14px;
  transition: transform var(--ease);
}
.chg__toggle[aria-expanded="true"] > .chg__chev {
  transform: rotate(90deg);
}
.chg__words {
  min-width: 0;
  overflow-wrap: anywhere;
}
.chg__count {
  color: var(--muted);
  font-weight: 500;
}
.chg__body {
  padding: 0.25rem 0 0.25rem 1.75rem;
}
.chg-label {
  font-weight: 600;
}
.chg-value {
  overflow-wrap: anywhere;
}
.chg-sub {
  margin: 0.875rem 0 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
}
.chg-figs {
  margin: 0;
  padding: 0;
  list-style: none;
}
.chg-figs + .chg-list {
  margin-top: 0.75rem;
}
.chg-fig {
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--line);
}
.chg-fig:first-child {
  padding-top: 0.25rem;
}
.chg-fig__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.375rem;
  color: var(--muted);
  font-size: 0.8125rem;
}
.chg-fig__where {
  color: var(--text);
  font-weight: 600;
}
.chg-fig__head .tag {
  margin-left: 0.25rem;
}
.chg-fig__alt {
  margin-top: 0.25rem;
  overflow-wrap: anywhere;
}
.chg-fig__why {
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}
.tag--review {
  border-color: var(--busy);
  background: var(--busy-bg);
  color: var(--busy);
}
.chg-where {
  font-weight: 600;
}
.chg-items .tag {
  vertical-align: 0.0625rem;
}
.chg-foot {
  margin-top: 0.875rem;
}
.chg-actions {
  margin-top: 0.5rem;
}
.chg-actions .btn {
  white-space: normal;
  text-align: left;
}
.chg-error {
  color: var(--error);
}
.chg-error + .btn {
  margin-top: 0.5rem;
}
@media (max-width: 40rem) {
  .chg__body {
    padding-left: 0.375rem;
  }
}

/* -- small screens and reduced motion --------------------------------------------------------- */

@media (max-width: 40rem) {
  .page {
    padding-top: 1.5rem;
  }
  .page__title {
    font-size: 1.25rem;
  }
  .drop {
    min-height: 12rem;
  }
  .drop.has-file .files,
  .drop.has-file .drop__tools {
    grid-column: 1 / -1;
  }
  .drop.has-file .drop__tools {
    justify-content: flex-start;
  }
  .drop.is-multi .drop__count {
    flex-basis: 100%;
  }
  .toolgroups {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
  .facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.125rem;
  }
  .facts dd + dt {
    margin-top: 0.5rem;
  }
}

/* -- print: with the transcript view shown, only the transcript's pages ----------------------- */

@media print {
  html.print-transcript body {
    min-height: 0;
    background: #ffffff;
    color: #17181b;
  }
  html.print-transcript .skip,
  html.print-transcript .topbar,
  html.print-transcript .footer,
  html.print-transcript .page > :not(#viewer),
  html.print-transcript #viewer > .card__head,
  html.print-transcript .reader__toolshead,
  html.print-transcript .reader__side,
  html.print-transcript #panel-document,
  html.print-transcript #panel-report,
  html.print-transcript #transcript-state,
  html.print-transcript .tx-head,
  html.print-transcript .tx-tail,
  html.print-transcript .tx-meta {
    display: none !important;
  }
  html.print-transcript .page {
    max-width: none;
    padding: 0;
  }
  html.print-transcript #viewer,
  html.print-transcript .reader,
  html.print-transcript .reader__main,
  html.print-transcript #panel-transcript,
  html.print-transcript .tx-surface {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: none !important;
  }
  html.print-transcript .tx-sheet {
    max-width: none;
    break-after: page;
  }
  html.print-transcript .tx-sheet:last-child {
    break-after: auto;
  }
  html.print-transcript .tx-sheet__label {
    color: #50545c;
  }
  html.print-transcript .tx-page,
  html.print-transcript .tx-plainsheet {
    max-width: none;
    padding: 0;
    box-shadow: none;
  }
  html.print-transcript mark.find-hit {
    background: none;
    outline: 0;
  }
}

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