/*
 * apparatus.css — the one global stylesheet.
 *
 * Carries the Apparatus design-system tokens (ported verbatim from
 * design/recur-apparatus.html) plus the component classes shared across every
 * surface: masthead, route nav, shared buttons. Per-surface stylesheets
 * (library.css, read.css, …) are eager-imported in surfaces.ts and hold only
 * what is specific to that surface, scoped under `.ap-surface[data-surface=…]`.
 *
 * Plain CSS — no preprocessor, no modules, no scoping machinery (spec 07).
 * Square corners everywhere; hairlines from the rule tokens; one accent.
 */

:root {
  color-scheme: light;

  /* Colour (light, committed). */
  --paper: #fbfaf7;
  --plate: #fcfbf7;
  --ink: #1a1a17;
  --prose-ink: #242019; /* reading-body ink — a hair warmer than --ink, for the reader's own prose */
  --muted: #6f6b62;
  --faint: #8c877b;
  --rule: #e4dfd2;
  --rule-strong: #d3cdbe;
  --accent: #1f4c6b;
  --accent-ink: #153a52;
  --accent-wash: #ecf1f4;
  --on-accent: #f7fafb; /* ink on an accent-filled surface (button hover) */
  --good: #3c6b54;

  /* Type. */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Charter, Georgia, serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* Measures (design system §2). */
  --measure-reading: 638px; /* the reading column; read/import/review surfaces */
}

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

html,
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
}

body {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Masthead — hairline-bottom bar; mono wordmark + mono route nav. */
.ap-masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 30px;
  border-bottom: 1px solid var(--rule);
}

.ap-wordmark {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.34em;
  color: var(--ink);
}

.ap-nav {
  display: flex;
  gap: 22px;
}

.ap-nav-link {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--faint);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.ap-nav-link:hover {
  color: var(--muted);
}
.ap-nav-link[aria-current="page"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Surface body. */
.ap-surface {
  max-width: 772px;
  margin: 0 auto;
  padding: 44px 30px 80px;
}

/* Shared surface H1 — the design system's essay title (§2). */
.ap-surface-title {
  margin: 12px 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(29px, 4.4vw, 43px);
  line-height: 1.06;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

/* Shared accent outline button — the mono instrument control. */
.ap-btn-accent {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: none;
  border: 1px solid var(--accent);
  border-radius: 0;
  padding: 10px 18px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ap-btn-accent:hover:enabled {
  background: var(--accent);
  color: var(--on-accent);
}
.ap-btn-accent:disabled {
  color: var(--faint);
  border-color: var(--rule-strong);
  cursor: default;
}

.ap-eyebrow {
  margin: 0 0 20px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--faint);
}
.ap-eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}

/* Add-to-Home-Screen nag (#30) — a top strip above the masthead, in the mono
 * instrument voice. Flow content (not fixed), so it pushes the app down instead
 * of covering the reading dock. Shown only on in-Safari iOS (installNag.ts). */
.ap-install-nag {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 30px;
  background: var(--accent-wash);
  border-bottom: 1px solid var(--rule);
}
.ap-install-nag-text {
  margin: 0;
  flex: 1;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--accent-ink);
}
.ap-install-nag-text strong {
  font-weight: 600;
}
.ap-install-nag-kbd {
  font-weight: 600;
  white-space: nowrap;
}
.ap-install-nag-x {
  flex: none;
  font-size: 13px;
  line-height: 1;
  color: var(--accent);
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
}
.ap-install-nag-x:hover {
  color: var(--accent-ink);
}

/* The one shared entry animation — a margin stamp minting, a review card being
 * dealt. Stilled by the reduced-motion rule below. */
@keyframes ap-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
/* Per-surface stylesheet: Library (#/library) — the operational shelf plus the
 * export/import archive and storage-health corner (#29). Classes ported from
 * design/recur-library.html, re-dressed in the Apparatus tokens. The shared shell
 * + tokens live in apparatus.css; only the Library rhythm lives here, scoped
 * under the surface attribute so nothing leaks. */
.ap-surface[data-surface="library"] {
  max-width: 1010px; /* wide page shell (design system §2 measures) */
}

/* Header row: eyebrow on the left, the Import entry point on the right. */
.ap-surface[data-surface="library"] .lb-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.ap-surface[data-surface="library"] .lb-import-entry {
  text-decoration: none;
}
.ap-surface[data-surface="library"] .lb-title {
  margin: 6px 0 24px;
}
.ap-surface[data-surface="library"] .lb-standing {
  color: var(--muted);
  font-size: 18.5px;
}

/* Standing summary — the instrument readout: Sources · Cards · Due now. */
.ap-surface[data-surface="library"] .lb-sum {
  display: flex;
  border: 1px solid var(--rule);
  font-family: var(--mono);
}
.ap-surface[data-surface="library"] .lb-sum .cell {
  flex: 1;
  padding: 16px 14px 15px;
  border-right: 1px solid var(--rule);
}
.ap-surface[data-surface="library"] .lb-sum .cell:last-child {
  border-right: 0;
}
.ap-surface[data-surface="library"] .lb-sum .v {
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.ap-surface[data-surface="library"] .lb-sum .cell.due .v {
  color: var(--accent);
}
.ap-surface[data-surface="library"] .lb-sum .k {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 5px;
}

/* Source ledger: title + provenance, cards held, due now. NO retention column —
 * the two retention numbers live only at Review deck-clear (spec 06). */
.ap-surface[data-surface="library"] .lb-ledger {
  margin-top: 28px;
  border: 1px solid var(--rule);
}
.ap-surface[data-surface="library"] .lb-cols,
.ap-surface[data-surface="library"] .lb-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px 64px;
  column-gap: 18px;
  align-items: baseline;
}
.ap-surface[data-surface="library"] .lb-cols {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--rule-strong);
}
.ap-surface[data-surface="library"] .lb-cols .r,
.ap-surface[data-surface="library"] .lb-row .r {
  text-align: right;
}
.ap-surface[data-surface="library"] .lb-row {
  padding: 15px 18px 14px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}
.ap-surface[data-surface="library"] .lb-row:last-child {
  border-bottom: 0;
}
.ap-surface[data-surface="library"] .lb-row:hover {
  background: var(--panel);
}
.ap-surface[data-surface="library"] .lb-row .t {
  font-size: 17.5px;
  line-height: 1.3;
  text-wrap: balance;
  color: var(--ink);
}
.ap-surface[data-surface="library"] .lb-row .m {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 5px;
}
.ap-surface[data-surface="library"] .lb-row .num {
  font-family: var(--mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.ap-surface[data-surface="library"] .lb-row .due {
  font-family: var(--mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-weight: 600;
}
.ap-surface[data-surface="library"] .lb-row .due.none {
  color: var(--faint);
  font-weight: 400;
}
.ap-surface[data-surface="library"] .lb-empty {
  border: 1px solid var(--rule-strong);
  background: var(--plate);
  padding: 30px 28px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55;
}

/* Archive panel — export / import; the v1 sync, backup, rescue affordance. */
.ap-surface[data-surface="library"] .lb-panel {
  margin-top: 40px;
  border: 1px solid var(--rule-strong);
  background: var(--plate);
  padding: 24px 24px 22px;
}
.ap-surface[data-surface="library"] .lb-panel-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.ap-surface[data-surface="library"] .lb-panel-note {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.55;
  margin: 12px 0 18px;
  max-width: 64ch;
}
.ap-surface[data-surface="library"] .lb-panel-note code {
  font-family: var(--mono);
  font-size: 0.88em;
}
.ap-surface[data-surface="library"] .lb-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
/* The import control is a <label> wrapping a hidden file input, so it can wear
 * the shared accent-button skin; the input is the click target. */
.ap-surface[data-surface="library"] .lb-import {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.ap-surface[data-surface="library"] .lb-import input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.ap-surface[data-surface="library"] .lb-import[data-disabled] {
  opacity: 0.5;
  pointer-events: none;
}
.ap-surface[data-surface="library"] .lb-imported {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--good);
  margin-top: 16px;
}
.ap-surface[data-surface="library"] .lb-error {
  color: var(--accent-ink);
  font-size: 14.5px;
  margin-top: 16px;
}

/* Storage-health corner — persisted() / estimate() readout ([#3]). */
.ap-surface[data-surface="library"] .lb-storage {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
}
.ap-surface[data-surface="library"] .lb-storage-k {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.ap-surface[data-surface="library"] .lb-storage-v {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.ap-surface[data-surface="library"] .lb-storage-v .u {
  color: var(--faint);
}

/* —— Predict-station re-run panel (#34) ——————————————————————————————————————
 * Reuses the shared .lb-panel shell; only its own row rhythm here — a title +
 * status cell on the left, the accent Generate/Re-run button on the right. */
.ap-surface[data-surface="library"] .lb-predict {
  display: flex;
  flex-direction: column;
}
.ap-surface[data-surface="library"] .lb-predict-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
}
.ap-surface[data-surface="library"] .lb-predict-row:first-child {
  border-top: none;
}
.ap-surface[data-surface="library"] .lb-predict-row .t {
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink);
}
.ap-surface[data-surface="library"] .lb-predict-row .m {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 5px;
}

@media (max-width: 640px) {
  .ap-surface[data-surface="library"] .lb-cols {
    display: none;
  }
  .ap-surface[data-surface="library"] .lb-row {
    grid-template-columns: 1fr auto auto;
  }
}
/* Per-surface stylesheet: Reading (#/read/<id>) — the full Apparatus (#28),
 * classes ported from design/recur-apparatus.html + recur-margin-authoring.html.
 * Three cells per `.ap-row` grid: instrument rail · prose column · commentary
 * margin. ≥1120px lays them as three columns; <1120px folds the margin inline
 * behind a mono disclosure with full authoring parity; ≤640px is a single
 * best-effort column. Tokens/keyframes/shared classes stay in apparatus.css;
 * only the surface's own layout, margin, and forms live here.
 *
 * SOURCE-ORDER GOTCHA (design system §3, a real bug fixed once): the wide-tier
 * `@media (min-width:1120px)` block MUST come after the base `.ap-row` rules —
 * same specificity, later source order wins. Put it before and the grid stays
 * 2-column and the margin wraps under the rail. The media blocks are at the
 * foot of this file for exactly that reason. */

.ap-surface[data-surface="read"] {
  max-width: 772px; /* rail + prose column, two-tier; widened to 1010px ≥1120px */
  padding-bottom: 140px; /* room for the fixed bottom dock */
}
.ap-surface[data-surface="read"] ::selection {
  background: var(--accent-wash); /* the persistent selection highlight while the dock is up */
}

/* Title itself is the shared .ap-surface-title; only the column's rhythm here. */
.ap-surface[data-surface="read"] .ap-reading-title {
  margin-bottom: 4px;
}
.ap-surface[data-surface="read"] .ap-reading-standing {
  color: var(--muted);
  font-size: 18.5px;
}

/* —— The apparatus grid ——————————————————————————————————————————————————— */
.ap-surface[data-surface="read"] .ap-row {
  display: grid;
  grid-template-columns: 76px 1fr;
  column-gap: 30px;
  align-items: start;
}
.ap-surface[data-surface="read"] .ap-rail {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.65;
  letter-spacing: 0.04em;
  color: var(--faint);
  text-align: right;
  padding-top: 6px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ap-surface[data-surface="read"] .ap-rail b {
  display: block;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.1em;
}
.ap-surface[data-surface="read"] .ap-body {
  min-width: 0;
}

/* —— Prose column ————————————————————————————————————————————————————————— */
.ap-surface[data-surface="read"] .ap-block {
  margin: 18px 0;
  font-size: 19px;
  line-height: 1.72;
  color: var(--prose-ink);
  text-wrap: pretty;
}
.ap-surface[data-surface="read"] .ap-block-heading {
  margin: 30px 0 6px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.ap-surface[data-surface="read"] blockquote.ap-block {
  margin: 18px 0 18px 12px;
  padding-left: 14px;
  border-left: 2px solid var(--rule-strong);
  color: var(--muted);
}
/* Code block (Markdown, spec 03) — verbatim whitespace on the plate, the mono
 * instrument voice; overflows scroll rather than break the reading measure. */
.ap-surface[data-surface="read"] pre.ap-block-code {
  margin: 18px 0;
  padding: 14px 16px;
  background: var(--plate);
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
  white-space: pre;
  overflow-x: auto;
}
/* EPUB image (#32, spec 03) — constrained to the column measure, never wider;
 * a hairline plate frame so alt-text fallback (broken/evicted blob) reads as a
 * missing figure, not stray prose. */
.ap-surface[data-surface="read"] img.ap-block-image {
  display: block;
  max-width: 100%;
  height: auto;
  background: var(--plate);
  border: 1px solid var(--rule);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 13px;
}
.ap-surface[data-surface="read"] mark.ap-hl {
  background: var(--accent-wash);
  color: inherit;
}

/* —— Predict stations (#34, spec 04) ——————————————————————————————————————————
 * A machine-authored in-flow moment at the head of a section: plate-backed with
 * a rule-strong left flag (system voice, like provenance). The eyebrow + prompt +
 * notice are app voice (mono / prose ink); the reader's own prediction is serif
 * italic — the two-voice rule. The reveal is a tertiary affordance. */
/* One shared plate for the station (head) and the compare (end) — the swapped
 * margin below is the whole difference between the two containers. */
.ap-surface[data-surface="read"] .ap-predict,
.ap-surface[data-surface="read"] .ap-compare {
  padding: 14px 16px;
  background: var(--plate);
  border-left: 2px solid var(--rule-strong);
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: ap-rise 0.3s ease both;
}
.ap-surface[data-surface="read"] .ap-predict {
  margin: 0 0 26px;
}
.ap-surface[data-surface="read"] .ap-compare {
  /* Bottom margin too: without it a revealed compare sits flush against the
   * NEXT section's station plate (same plate, same flag) and the two fuse. */
  margin: 26px 0 26px;
}
.ap-surface[data-surface="read"] .ap-predict.skipped {
  gap: 0;
  border-left-color: var(--rule);
}
.ap-surface[data-surface="read"] .ap-predict-eye {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.ap-surface[data-surface="read"] .ap-predict-q {
  margin: 0;
  color: var(--prose-ink);
  font-size: 16px;
  line-height: 1.5;
}
.ap-surface[data-surface="read"] .ap-predict-input {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: 10px 12px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  resize: vertical;
  min-height: 68px;
}
.ap-surface[data-surface="read"] .ap-predict-input:focus {
  outline: none;
  border-color: var(--accent);
}
.ap-surface[data-surface="read"] .ap-predict-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.ap-surface[data-surface="read"] .ap-predict-submit,
.ap-surface[data-surface="read"] .ap-predict-skip,
.ap-surface[data-surface="read"] .ap-predict-del,
.ap-surface[data-surface="read"] .ap-predict-reveal {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  padding: 7px 12px;
  cursor: pointer;
}
.ap-surface[data-surface="read"] .ap-predict-submit {
  border-color: var(--accent);
  color: var(--accent);
}
.ap-surface[data-surface="read"] .ap-predict-submit:hover,
.ap-surface[data-surface="read"] .ap-predict-reveal:hover {
  border-color: var(--accent);
  color: var(--accent);
}
/* Skip / delete stay tertiary — no border, faint until hovered. */
.ap-surface[data-surface="read"] .ap-predict-skip,
.ap-surface[data-surface="read"] .ap-predict-del {
  border-color: transparent;
  color: var(--faint);
  padding-left: 6px;
  padding-right: 6px;
}
.ap-surface[data-surface="read"] .ap-predict-skip:hover,
.ap-surface[data-surface="read"] .ap-predict-del:hover {
  color: var(--muted);
}
/* Reader voice: the prediction in serif italic behind the accent flag. */
.ap-surface[data-surface="read"] .ap-predict-you {
  border-left: 2px solid var(--accent);
  padding-left: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ap-surface[data-surface="read"] .ap-predict-you b,
.ap-surface[data-surface="read"] .ap-predict-notice b {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 400;
}
.ap-surface[data-surface="read"] .ap-predict-you i {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink);
}
/* App voice: the machine's "what to notice", once revealed. */
.ap-surface[data-surface="read"] .ap-predict-notice {
  border-top: 1px solid var(--rule);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ap-surface[data-surface="read"] .ap-predict-notice span {
  color: var(--prose-ink);
  font-size: 15px;
  line-height: 1.5;
}
.ap-surface[data-surface="read"] .ap-predict-reveal {
  align-self: flex-start;
  color: var(--muted);
}
/* The compare block's container shares the station's plate (see the selector
 * list at .ap-predict above); its child classes (.ap-predict-eye/-you/-notice/
 * -reveal) are shared with the station by design. */

/* —— The commentary margin ———————————————————————————————————————————————— */
.ap-surface[data-surface="read"] .ap-margin {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--muted);
}
/* The folded-tier disclosure — hidden ≥1120px, shown as the fold's handle below. */
.ap-surface[data-surface="read"] .ap-margintoggle {
  display: none;
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  background: none;
  border: none;
  padding: 2px 0;
  cursor: pointer;
  transition: color 0.15s;
}
.ap-surface[data-surface="read"] .ap-margintoggle:hover {
  color: var(--accent);
}

/* App-voice provenance — mono, rule-strong flag (spec 04: the only app voice). */
.ap-surface[data-surface="read"] .ap-prov {
  margin-bottom: 20px;
  padding-left: 11px;
  border-left: 2px solid var(--rule-strong);
}
.ap-surface[data-surface="read"] .ap-prov b {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.ap-surface[data-surface="read"] .ap-prov-by {
  display: block;
  color: var(--faint);
  margin-top: 3px;
}

/* Reader-voice entries — a minted card stamp and a margin note share the accent
 * flag, mono label, and serif-italic body; only the card carries a mint line. */
.ap-surface[data-surface="read"] .ap-stamp,
.ap-surface[data-surface="read"] .ap-mnote {
  display: block;
  margin: 0 0 20px;
  padding-left: 11px;
  border-left: 2px solid var(--accent);
  animation: ap-rise 0.4s ease both;
}
.ap-surface[data-surface="read"] .ap-stamp b,
.ap-surface[data-surface="read"] .ap-mnote b {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.ap-surface[data-surface="read"] .ap-stamp i,
.ap-surface[data-surface="read"] .ap-mnote i {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  letter-spacing: 0;
}
.ap-surface[data-surface="read"] .ap-stamp .mint {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--good);
  margin-top: 3px;
}

/* The authoring affordances at the foot of a section's margin group. */
.ap-surface[data-surface="read"] .ap-affs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  padding-left: 13px;
}
.ap-surface[data-surface="read"] .ap-addcard,
.ap-surface[data-surface="read"] .ap-addnote {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  background: none;
  border: none;
  padding: 2px 0;
  cursor: pointer;
  transition: color 0.15s;
}
.ap-surface[data-surface="read"] .ap-addcard:hover,
.ap-surface[data-surface="read"] .ap-addnote:hover {
  color: var(--accent);
}

/* —— The shared card/note form — reader machinery: accent flag, serif inputs,
 * mono controls. The `.note` variant italicises the textarea (reader voice). — */
.ap-surface[data-surface="read"] .ap-form {
  margin: 0 0 20px;
  padding-left: 11px;
  border-left: 2px solid var(--accent);
}
.ap-surface[data-surface="read"] .ap-form > b {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.ap-surface[data-surface="read"] .ap-excerpt {
  font-family: var(--serif);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
  padding: 4px 0 4px 9px;
  border-left: 1px solid var(--rule-strong);
  max-height: 96px;
  overflow: auto;
}
/* The `Anchored · §n · ¶n` line — one class, used by the form and the stamp. */
.ap-surface[data-surface="read"] .ap-anchor {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 6px;
}
.ap-surface[data-surface="read"] .ap-form .flab {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 10px 0 3px;
}
.ap-surface[data-surface="read"] .ap-form textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: 7px 8px;
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
  resize: vertical;
  min-height: 46px;
}
.ap-surface[data-surface="read"] .ap-form.note textarea {
  font-style: italic;
}
.ap-surface[data-surface="read"] .ap-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.ap-surface[data-surface="read"] .ap-form .row {
  display: flex;
  gap: 14px;
  margin-top: 9px;
  align-items: center;
  flex-wrap: wrap;
}
.ap-surface[data-surface="read"] .ap-form .row button {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: none;
  background: none;
  padding: 2px 0;
  cursor: pointer;
}
.ap-surface[data-surface="read"] .ap-form .save {
  color: var(--accent);
}
.ap-surface[data-surface="read"] .ap-form .save:hover {
  color: var(--accent-ink);
}
.ap-surface[data-surface="read"] .ap-form .cancel {
  color: var(--faint);
}
.ap-surface[data-surface="read"] .ap-form .cancel:hover {
  color: var(--muted);
}
/* The tertiary Prompt-craft control — pushed to the row's end. */
.ap-surface[data-surface="read"] .ap-form .craft {
  color: var(--faint);
  margin-left: auto;
  letter-spacing: 0.1em;
}
.ap-surface[data-surface="read"] .ap-form .craft:hover {
  color: var(--accent);
}

/* —— The bottom dock — fixed hairline instrument bar along the screen's bottom
 * edge (spec 04): entry animation, excerpt gist, safe-area padding. —————————— */
.ap-surface[data-surface="read"] .ap-seldock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--paper);
  border-top: 1px solid var(--rule-strong);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  padding: 11px 20px;
  padding-bottom: calc(11px + env(safe-area-inset-bottom));
  animation: ap-rise 0.4s ease both;
}
.ap-surface[data-surface="read"] .ap-seldock .gist {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* Dock's ＋ Card is the shared .ap-btn-accent, tightened to the bar's scale. */
.ap-surface[data-surface="read"] .ap-seldock .ap-dock-add {
  flex: none;
  font-size: 11px;
  letter-spacing: 0.14em;
  padding: 9px 16px;
}
.ap-surface[data-surface="read"] .ap-seldock .first {
  width: 100%;
  text-align: center;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

/* —— The Prompt-craft reference screen — a static overlay, opened from the
 * card form's tertiary control (spec 04 §Prompt craft). —————————————————————— */
.ap-surface[data-surface="read"] .ap-craft {
  position: fixed;
  inset: 0;
  z-index: 70;
  overflow: auto;
  background: color-mix(in srgb, var(--paper) 97%, transparent);
  padding: 34px 20px 60px;
}
.ap-surface[data-surface="read"] .ap-craft-panel {
  max-width: 638px;
  margin: 0 auto;
  border: 1px solid var(--rule-strong);
  background: var(--plate);
  padding: 24px 28px 26px;
}
.ap-surface[data-surface="read"] .ap-craft-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.ap-surface[data-surface="read"] .ap-craft-eye {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.ap-surface[data-surface="read"] .ap-craft-close {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  background: none;
  border: none;
  padding: 2px 0;
  cursor: pointer;
}
.ap-surface[data-surface="read"] .ap-craft-close:hover {
  color: var(--muted);
}
.ap-surface[data-surface="read"] .ap-craft-intro {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
  font-style: italic;
  margin-bottom: 18px;
}
.ap-surface[data-surface="read"] .ap-craft-h {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 18px 0 2px;
}
.ap-surface[data-surface="read"] .ap-craft-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--rule);
  font-size: 14.5px;
  line-height: 1.55;
}
.ap-surface[data-surface="read"] .ap-craft-row .t {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 3px;
}
.ap-surface[data-surface="read"] .ap-craft-src {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.9;
  color: var(--faint);
  margin-top: 16px;
}

/* —— Wide tier ≥1120px: the full three-column apparatus. MUST follow the base
 * `.ap-row` rules (same specificity, later source order wins). ———————————————— */
@media (min-width: 1120px) {
  .ap-surface[data-surface="read"] {
    max-width: 1010px;
  }
  .ap-surface[data-surface="read"] .ap-row {
    grid-template-columns: 76px minmax(0, 638px) 196px;
  }
  .ap-surface[data-surface="read"] .ap-margin {
    padding-top: 8px;
  }
}

/* —— Folded tier <1120px: the margin folds inline under the column, each group
 * behind its `▸ Margin · N` disclosure — full authoring parity behind the fold. */
@media (max-width: 1119px) {
  .ap-surface[data-surface="read"] .ap-margin {
    grid-column: 2;
    margin-top: 6px;
    font-size: 11.5px;
  }
  .ap-surface[data-surface="read"] .ap-margin > * {
    display: none;
  }
  .ap-surface[data-surface="read"] .ap-margin > .ap-margintoggle {
    display: block;
  }
  .ap-surface[data-surface="read"] .ap-margin.open > * {
    display: block;
  }
  .ap-surface[data-surface="read"] .ap-margin.open > .ap-affs {
    display: flex;
  }
  .ap-surface[data-surface="read"] .ap-margin.open > .ap-margintoggle {
    margin-bottom: 14px;
  }
  .ap-surface[data-surface="read"] .ap-margin .ap-stamp i,
  .ap-surface[data-surface="read"] .ap-margin .ap-mnote i {
    font-size: 14px;
  }
  .ap-surface[data-surface="read"] .ap-form textarea {
    font-size: 16px; /* below 16px iOS zooms the page on focus */
  }
}

/* —— Phone ≤640px: single column; the rail flattens into an instrument eyebrow.
 * Best-effort only — phone defects are not tool-defects (spec 06). ——————————— */
@media (max-width: 640px) {
  .ap-surface[data-surface="read"] .ap-row {
    grid-template-columns: 1fr;
    row-gap: 8px;
  }
  .ap-surface[data-surface="read"] .ap-rail {
    text-align: left;
    padding-top: 0;
    color: var(--faint);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: normal;
    line-height: 1.9;
  }
  .ap-surface[data-surface="read"] .ap-rail b {
    display: inline;
    color: var(--muted);
    margin-right: 9px;
  }
  .ap-surface[data-surface="read"] .ap-rail br {
    display: none;
  }
  .ap-surface[data-surface="read"] .ap-margin {
    grid-column: auto; /* single-column grid here; col 2 would mint a phantom track */
  }
  .ap-surface[data-surface="read"] .ap-craft-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}
/* Per-surface stylesheet: Review (#/review) — the defend path (#26), built out
 * to the decided UX (#31: queue bar + deck-clear ledger). Due cards dealt one at
 * a time as card-stations at the reading measure; classes ported from
 * design/recur-review.html. The shared shell + tokens live in apparatus.css;
 * only the Review rhythm lives here. */
.ap-surface[data-surface="review"] {
  max-width: var(--measure-reading);
}

/* Standing line: `N due · N sources` — the est-min estimate is dropped (spec 06). */
.ap-surface[data-surface="review"] .rv-standing {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.ap-surface[data-surface="review"] .rv-standing .big {
  font-family: var(--mono);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}
.ap-surface[data-surface="review"] .rv-standing .big i {
  font-style: normal;
  color: var(--accent);
}
.ap-surface[data-surface="review"] .rv-standing .k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
/* Queue bar: one glyph per due card, pushed to the line's end. It saturates at
 * a fixed width past its glyph budget (schedule/deal.ts › queueBar), so 60 due
 * and 24 due draw the same bar — the due count beside it stays authoritative. */
.ap-surface[data-surface="review"] .rv-queue {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--accent);
  margin-left: auto;
}

/* The card, dealt as a station. */
.ap-surface[data-surface="review"] .ap-station {
  border: 1px solid var(--rule-strong);
  background: var(--plate);
  padding: 22px 24px 20px;
}
.ap-surface[data-surface="review"] .rv-src {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 13px;
  flex-wrap: wrap;
}
.ap-surface[data-surface="review"] .ap-dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  flex: none;
}
.ap-surface[data-surface="review"] .rv-src .lbl {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
}
.ap-surface[data-surface="review"] .rv-src .from {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.ap-surface[data-surface="review"] .ap-q {
  font-size: 20.5px;
  line-height: 1.42;
  text-wrap: pretty;
}

/* Front: reveal control + recall hint. */
.ap-surface[data-surface="review"] .ap-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 15px;
  flex-wrap: wrap;
}
.ap-surface[data-surface="review"] .ap-hint {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--faint);
  letter-spacing: 0.02em;
}

/* Back: answer + the two interval-previewed grade keys. */
.ap-surface[data-surface="review"] .ap-answer {
  font-size: 18.5px;
  line-height: 1.58;
  margin-top: 16px;
  color: var(--prose-ink);
}
.ap-surface[data-surface="review"] .ap-grade {
  margin-top: 18px;
}
.ap-surface[data-surface="review"] .ap-grade .cap {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 9px;
}
.ap-surface[data-surface="review"] .ap-grades {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  max-width: 360px;
}
.ap-surface[data-surface="review"] .ap-g {
  font-family: var(--mono);
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  border-radius: 0;
  padding: 11px 8px;
  text-align: center;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.14s, color 0.14s;
}
.ap-surface[data-surface="review"] .ap-g:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.ap-surface[data-surface="review"] .ap-g .g1 {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ap-surface[data-surface="review"] .ap-g .g2 {
  font-size: 10px;
  color: var(--faint);
  margin-top: 3px;
}
.ap-surface[data-surface="review"] .ap-g:hover .g2 {
  color: var(--accent);
}

/* Zero-due / opening standing note — the reading-measure line, no ledger. */
.ap-surface[data-surface="review"] .ap-review-title {
  margin-bottom: 14px;
}
.ap-surface[data-surface="review"] .ap-review-standing {
  color: var(--muted);
  font-size: 18.5px;
}

/* Entry animation, matched to the reading stamp; stilled under reduced-motion
 * by the global rule in apparatus.css. */
.ap-surface[data-surface="review"] .ap-fade {
  animation: ap-rise 0.4s ease both;
}

/* Deck-clear ledger: the one ceremonial state, fired when grading empties the
 * pile — the only home of the two retention numbers (#31). */
.ap-surface[data-surface="review"] .rv-done {
  border: 1px solid var(--rule-strong);
  background: var(--plate);
  padding: 26px 24px 24px;
}
.ap-surface[data-surface="review"] .rv-done .stamp {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--good);
  display: flex;
  align-items: center;
  gap: 9px;
}
.ap-surface[data-surface="review"] .rv-done .stamp::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--good);
  border-radius: 50%;
}
.ap-surface[data-surface="review"] .rv-done .line {
  font-size: 19px;
  margin-top: 12px;
  text-wrap: pretty;
}

/* The two-metric table. `.rv-lgroup` bands the recall block; each `.rv-lrow` is
 * a mono key/value pair with tabular figures so the numbers align. */
.ap-surface[data-surface="review"] .rv-ledger {
  margin-top: 18px;
  border: 1px solid var(--rule);
}
.ap-surface[data-surface="review"] .rv-lgroup {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 10px 18px;
  border-bottom: 1px solid var(--rule);
}
.ap-surface[data-surface="review"] .rv-lrow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 11px 18px;
  font-family: var(--mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.ap-surface[data-surface="review"] .rv-lrow + .rv-lrow {
  border-top: 1px solid var(--rule);
}
/* Demonstrated retention is the second metric — a firmer rule sets it apart. */
.ap-surface[data-surface="review"] .rv-lretention {
  border-top: 1px solid var(--rule-strong);
}
.ap-surface[data-surface="review"] .rv-lrow .k {
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
  align-self: center;
}
.ap-surface[data-surface="review"] .rv-lrow .v {
  color: var(--ink);
  letter-spacing: 0.02em;
  text-align: right;
}
.ap-surface[data-surface="review"] .rv-lrow .v .u {
  color: var(--faint);
}
.ap-surface[data-surface="review"] .rv-note {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--faint);
  margin-top: 14px;
  letter-spacing: 0.02em;
}
/* Per-surface stylesheet: Import (#/import) — paste-the-text (#25), the
 * web-article URL flow and fetch-helper settings (#27), the Markdown file/paste
 * pipeline (#33), and the EPUB file pipeline (#32). Shared tokens/classes stay
 * in apparatus.css; only the import forms' rhythm here. */
.ap-surface[data-surface="import"] {
  max-width: var(--measure-reading);
}

.ap-surface[data-surface="import"] .ap-import-note {
  margin: 0 0 26px;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.6;
}

.ap-surface[data-surface="import"] .ap-field-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 6px;
}

/* One look for every text input on the surface: the reader types prose (or a
 * URL, or a token) into the same plate-backed, hairline-ruled box. */
.ap-surface[data-surface="import"] .ap-paste textarea,
.ap-surface[data-surface="import"] .ap-md textarea,
.ap-surface[data-surface="import"] .ap-url input,
.ap-surface[data-surface="import"] .ap-helper input,
.ap-surface[data-surface="import"] .ap-predict-set input[type="text"],
.ap-surface[data-surface="import"] .ap-predict-set input[type="password"] {
  width: 100%;
  background: var(--plate);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: 12px 14px;
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink);
}
.ap-surface[data-surface="import"] .ap-paste textarea,
.ap-surface[data-surface="import"] .ap-md textarea {
  resize: vertical;
}
.ap-surface[data-surface="import"] .ap-paste textarea:focus,
.ap-surface[data-surface="import"] .ap-md textarea:focus,
.ap-surface[data-surface="import"] .ap-url input:focus,
.ap-surface[data-surface="import"] .ap-helper input:focus,
.ap-surface[data-surface="import"] .ap-predict-set input:focus {
  outline: none;
  border-color: var(--accent);
}

/* File imports (EPUB #32, Markdown #33): the file picker is a mono, device-voice
 * control matching the surface's other affordances — one look for both pickers. */
.ap-surface[data-surface="import"] .ap-md,
.ap-surface[data-surface="import"] .ap-epub {
  margin-bottom: 34px;
}
.ap-surface[data-surface="import"] .ap-md input[type="file"],
.ap-surface[data-surface="import"] .ap-epub input[type="file"] {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}
.ap-surface[data-surface="import"] .ap-md input[type="file"]::file-selector-button,
.ap-surface[data-surface="import"] .ap-epub input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 8px 12px;
  background: var(--plate);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}

.ap-surface[data-surface="import"] .ap-import-error {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--accent-ink);
}

/* Submit is the shared .ap-btn-accent; only the forms' rhythm here. */
.ap-surface[data-surface="import"] .ap-url-submit,
.ap-surface[data-surface="import"] .ap-epub-submit,
.ap-surface[data-surface="import"] .ap-md-submit,
.ap-surface[data-surface="import"] .ap-paste-submit {
  margin-top: 14px;
}
.ap-surface[data-surface="import"] .ap-url {
  margin-bottom: 34px;
}

.ap-surface[data-surface="import"] .ap-helper {
  margin-top: 34px;
  border-top: 1px solid var(--rule);
  padding-top: 18px;
}
.ap-surface[data-surface="import"] .ap-helper summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.ap-surface[data-surface="import"] .ap-helper-note {
  margin: 12px 0 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.ap-surface[data-surface="import"] .ap-helper input {
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 13px;
}

/* Predict-station generation (#34) — the optional Anthropic step. Same device-
 * voice details block as the helper settings; only its own rhythm here. */
.ap-surface[data-surface="import"] .ap-predict-set {
  margin-top: 34px;
  border-top: 1px solid var(--rule);
  padding-top: 18px;
}
.ap-surface[data-surface="import"] .ap-predict-set summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.ap-surface[data-surface="import"] .ap-predict-note {
  margin: 12px 0 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.ap-surface[data-surface="import"] .ap-predict-set input[type="text"],
.ap-surface[data-surface="import"] .ap-predict-set input[type="password"] {
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 13px;
}