/*
 * SpaceForge document surface
 * Canonical specimen: docs/research/P346-navigation-sidebar-research.html
 * Owner-approved signature: registration brackets (P346 R03, option C)
 *
 * This stylesheet is intentionally dependency-free and print-safe. Keep documents
 * semantic; these classes provide visual roles, not replacement elements.
 */

@font-face {
  font-family: "B612";
  src: url("fonts/B612-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "B612";
  src: url("fonts/B612-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "B612 Mono";
  src: url("fonts/B612Mono-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Surfaces */
  --sf-doc-bg: #070c11;
  --sf-doc-panel: #0c141b;
  --sf-doc-panel-raised: #101c24;
  --sf-doc-figure-bg: #05090d;

  /* Text. Dim is deliberately above 4.5:1 at normal text sizes. */
  --sf-doc-ink: #dfe7ed;
  --sf-doc-soft: #98a9b3;
  --sf-doc-dim: #78909c;

  /* Semantic accents */
  --sf-doc-cyan: #52d9ff;
  --sf-doc-teal: #6edbd2;
  --sf-doc-orange: #ff8a2b;
  --sf-doc-good: #6edb9a;
  --sf-doc-bad: #ff7066;

  /* Decorative hairlines may be quiet; interactive boundaries use control-line. */
  --sf-doc-line: #29404a;
  --sf-doc-control-line: #4a6672;

  --sf-doc-font: "B612", Arial, sans-serif;
  --sf-doc-mono: "B612 Mono", ui-monospace, monospace;
  --sf-doc-wide: 1180px;
  --sf-doc-prose: 76ch;

  /* Four-pixel foundation, preserving P346's broad vertical cadence. */
  --sf-space-1: 4px;
  --sf-space-2: 8px;
  --sf-space-3: 12px;
  --sf-space-4: 16px;
  --sf-space-5: 24px;
  --sf-space-6: 32px;
  --sf-space-7: 48px;
  --sf-space-8: 64px;
  --sf-space-9: 96px;
}

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

html {
  scroll-behavior: smooth;
}

body.sf-document {
  margin: 0;
  background:
    radial-gradient(circle at 82% 4%, rgba(82, 217, 255, 0.06), transparent 30rem),
    var(--sf-doc-bg);
  color: var(--sf-doc-ink);
  font: 16px/1.65 var(--sf-doc-font);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

.sf-document ::selection {
  background: color-mix(in srgb, var(--sf-doc-cyan) 32%, var(--sf-doc-panel));
  color: var(--sf-doc-ink);
}

.sf-doc-skip-link {
  position: fixed;
  z-index: 100;
  inset: var(--sf-space-3) auto auto var(--sf-space-3);
  padding: var(--sf-space-2) var(--sf-space-3);
  border: 2px solid var(--sf-doc-cyan);
  background: var(--sf-doc-bg);
  color: var(--sf-doc-ink);
  transform: translateY(calc(-100% - var(--sf-space-5)));
}

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

.sf-doc-shell {
  width: min(var(--sf-doc-wide), calc(100% - 36px));
  margin-inline: auto;
  padding-block: 58px 100px;
}

/* Visual atlases and marketing evidence can opt into a larger canvas. Reading measure does not
 * grow with it: a wider monitor earns larger evidence, not longer lines of prose. */
.sf-doc-shell--wide {
  --sf-doc-wide: 1360px;
}

.sf-doc-prose {
  width: min(100%, var(--sf-doc-prose));
}

.sf-doc-breakout {
  width: min(var(--sf-doc-wide), calc(100vw - 36px));
  max-width: none;
  margin-inline: 0;
}

.sf-doc-signature {
  display: flex;
  min-height: 26px;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--sf-space-3);
  color: var(--sf-doc-cyan);
  font: 11px/1.35 var(--sf-doc-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sf-doc-registration-mark {
  position: relative;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border-top: 1px solid var(--sf-doc-cyan);
  border-left: 1px solid var(--sf-doc-cyan);
}

.sf-doc-registration-mark::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 12px;
  height: 12px;
  border-right: 1px solid var(--sf-doc-cyan);
  border-bottom: 1px solid var(--sf-doc-cyan);
}

.sf-doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--sf-doc-dim);
  font: 12px/1.35 var(--sf-doc-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.sf-doc-meta-item,
.sf-doc-status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid var(--sf-doc-line);
}

.sf-doc-status {
  gap: 7px;
  color: var(--sf-status-color, var(--sf-doc-dim));
  border-color: var(--sf-status-color, var(--sf-doc-control-line));
  font: 10px/1.2 var(--sf-doc-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sf-doc-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
}

.sf-doc-status[data-state="draft"] { --sf-status-color: var(--sf-doc-dim); }
.sf-doc-status[data-state="review"] { --sf-status-color: var(--sf-doc-orange); }
.sf-doc-status[data-state="accepted"] { --sf-status-color: var(--sf-doc-cyan); }
.sf-doc-status[data-state="implemented"] { --sf-status-color: var(--sf-doc-good); }
.sf-doc-status[data-state="superseded"] { --sf-status-color: var(--sf-doc-bad); }
.sf-doc-status[data-state="implemented"]::before { background: currentColor; }
.sf-doc-status[data-state="superseded"]::before { transform: rotate(45deg); }

.sf-document h1,
.sf-document h2,
.sf-document h3,
.sf-document h4 {
  color: var(--sf-doc-ink);
  overflow-wrap: anywhere;
}

.sf-document h1 {
  max-width: 920px;
  margin: 0 0 14px;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.sf-doc-lede {
  max-width: 890px;
  margin: var(--sf-space-2) 0 14px;
  color: var(--sf-doc-soft);
  font-size: clamp(17px, 1.5vw, 18px);
  text-wrap: pretty;
}

.sf-doc-section {
  margin-top: 62px;
}

.sf-doc-section > h2,
.sf-doc-section-title {
  position: relative;
  margin: 0 0 18px;
  padding: 0 0 10px 15px;
  border-bottom: 1px solid var(--sf-doc-line);
  font-size: clamp(21px, 2.2vw, 23px);
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.sf-doc-section > h2::before,
.sf-doc-section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 7px;
  height: 21px;
  border-block: 1px solid var(--sf-doc-cyan);
  border-left: 1px solid var(--sf-doc-cyan);
}

.sf-document h3 {
  margin: 28px 0 8px;
  color: var(--sf-doc-cyan);
  font-size: 16px;
  line-height: 1.4;
}

.sf-document h4 {
  margin: var(--sf-space-5) 0 var(--sf-space-2);
  font: 12px/1.4 var(--sf-doc-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sf-document p {
  margin: 8px 0 14px;
}

.sf-document ul,
.sf-document ol {
  padding-left: 1.4em;
}

.sf-document li {
  margin-block: 0.35em;
}

.sf-document a {
  color: var(--sf-doc-cyan);
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, currentColor 48%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-skip-ink: auto;
  overflow-wrap: anywhere;
}

.sf-document a:visited {
  color: var(--sf-doc-teal);
}

.sf-document a:hover {
  text-decoration-color: currentColor;
}

.sf-document :focus-visible {
  outline: 2px solid var(--sf-doc-cyan);
  outline-offset: 3px;
  scroll-margin-block: var(--sf-space-7);
}

.sf-document :target {
  scroll-margin-block-start: var(--sf-space-6);
}

.sf-document code,
.sf-document pre,
.sf-document kbd,
.sf-document samp {
  font-family: var(--sf-doc-mono);
}

.sf-document code {
  padding: 2px 5px;
  background: var(--sf-doc-panel-raised);
  color: var(--sf-doc-teal);
}

.sf-document pre {
  max-width: 100%;
  overflow: auto;
  margin: var(--sf-space-5) 0;
  padding: var(--sf-space-4);
  border: 1px solid var(--sf-doc-line);
  background: var(--sf-doc-figure-bg);
  color: var(--sf-doc-ink);
  font-size: 13px;
  line-height: 1.55;
  tab-size: 2;
}

.sf-document pre code {
  padding: 0;
  background: none;
  color: inherit;
}

.sf-document kbd {
  padding: 2px 6px;
  border: 1px solid var(--sf-doc-control-line);
  background: var(--sf-doc-panel-raised);
  color: var(--sf-doc-ink);
  font-size: 0.8em;
}

.sf-doc-toc {
  margin: 28px 0 0;
  padding: 14px 16px;
  border-block: 1px solid var(--sf-doc-line);
  background: rgba(12, 20, 27, 0.55);
}

.sf-doc-toc > strong {
  display: block;
  margin-bottom: 7px;
  color: var(--sf-doc-dim);
  font: 10px/1.4 var(--sf-doc-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sf-doc-toc ul {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sf-doc-callout {
  --sf-callout-color: var(--sf-doc-cyan);
  margin: 34px 0;
  padding: 18px 20px;
  border: 1px solid var(--sf-doc-line);
  border-left: 4px solid var(--sf-callout-color);
  background: linear-gradient(110deg, color-mix(in srgb, var(--sf-callout-color) 9%, transparent), rgba(110, 219, 210, 0.025));
  color: var(--sf-doc-soft);
}

.sf-doc-callout > strong:first-child {
  color: var(--sf-callout-color);
}

.sf-doc-callout[data-tone="caution"] { --sf-callout-color: var(--sf-doc-orange); }
.sf-doc-callout[data-tone="success"] { --sf-callout-color: var(--sf-doc-good); }
.sf-doc-callout[data-tone="danger"] { --sf-callout-color: var(--sf-doc-bad); }

.sf-doc-quote {
  margin: var(--sf-space-5) 0;
  padding: var(--sf-space-4) 18px;
  border-left: 3px solid var(--sf-doc-teal);
  background: var(--sf-doc-panel-raised);
  color: var(--sf-doc-soft);
}

.sf-doc-quote p:first-child { margin-top: 0; }
.sf-doc-quote p:last-child { margin-bottom: 0; }
.sf-doc-quote cite { display: block; margin-top: var(--sf-space-2); color: var(--sf-doc-dim); font: 11px/1.4 var(--sf-doc-mono); }

.sf-doc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-block: var(--sf-space-5);
}

.sf-doc-card {
  --sf-card-color: var(--sf-doc-line);
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--sf-doc-line);
  border-top: 2px solid var(--sf-card-color);
  background: var(--sf-doc-panel);
}

.sf-doc-card[data-tone="good"] { --sf-card-color: var(--sf-doc-good); }
.sf-doc-card[data-tone="bad"] { --sf-card-color: var(--sf-doc-bad); }
.sf-doc-card[data-tone="attention"] { --sf-card-color: var(--sf-doc-orange); }
.sf-doc-card h3 { margin-top: 0; }
.sf-doc-card p,
.sf-doc-card li { color: var(--sf-doc-soft); font-size: 13px; }

.sf-doc-rule-list {
  margin-block: var(--sf-space-5);
  border-top: 1px solid var(--sf-doc-line);
}

.sf-doc-rule {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  padding: var(--sf-space-4) 0;
  border-bottom: 1px solid var(--sf-doc-line);
}

.sf-doc-rule-number {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--sf-doc-cyan);
  color: var(--sf-doc-cyan);
  font: 700 12px/1 var(--sf-doc-font);
}

.sf-doc-rule b { display: block; margin-bottom: 4px; }
.sf-doc-rule p { margin: 0; color: var(--sf-doc-soft); font-size: 14px; }
.sf-doc-rule p + p { margin-top: var(--sf-space-2); }

.sf-doc-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  margin: 20px 0;
  border-block: 1px solid var(--sf-doc-line);
  scrollbar-color: var(--sf-doc-control-line) var(--sf-doc-panel);
}

.sf-doc-table-wrap:focus-visible {
  outline: 2px solid var(--sf-doc-cyan);
  outline-offset: 3px;
}

.sf-document table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 13px;
}

.sf-document th,
.sf-document td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--sf-doc-line);
  text-align: left;
  vertical-align: top;
}

.sf-document th {
  color: var(--sf-doc-cyan);
  font: 11px/1.4 var(--sf-doc-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sf-document td { color: var(--sf-doc-soft); }
.sf-document td strong { color: var(--sf-doc-ink); }

.sf-doc-figure {
  position: relative;
  margin: 26px 0 50px;
  border: 1px solid var(--sf-doc-line);
  background: var(--sf-doc-figure-bg);
}

.sf-doc-figure::before,
.sf-doc-figure::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 28px;
  height: 28px;
  pointer-events: none;
}

.sf-doc-figure::before {
  left: 9px;
  top: 9px;
  border-top: 1px solid var(--sf-doc-cyan);
  border-left: 1px solid var(--sf-doc-cyan);
}

.sf-doc-figure::after {
  right: 9px;
  bottom: 9px;
  border-right: 1px solid var(--sf-doc-cyan);
  border-bottom: 1px solid var(--sf-doc-cyan);
}

.sf-doc-figure img,
.sf-doc-figure svg,
.sf-doc-figure video {
  display: block;
  width: 100%;
  height: auto;
}

.sf-doc-figure figcaption {
  padding: 14px 42px 14px 16px;
  border-top: 1px solid var(--sf-doc-line);
  color: var(--sf-doc-soft);
  font-size: 13px;
}

.sf-doc-figure figcaption strong { color: var(--sf-doc-ink); }

.sf-doc-media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sf-space-4);
}

.sf-doc-media-tile {
  margin: 0;
  border: 1px solid var(--sf-doc-line);
  background: var(--sf-doc-panel);
}

.sf-doc-media-tile > a:first-child {
  display: block;
  height: 340px;
  overflow: hidden;
  border-bottom: 1px solid var(--sf-doc-line);
}

.sf-doc-media-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.sf-doc-media-tile figcaption {
  padding: var(--sf-space-3) var(--sf-space-4) var(--sf-space-4);
}

.sf-doc-media-tile--wide { grid-column: 1 / -1; }
.sf-doc-media-tile--wide > a:first-child { height: 520px; }

@media (max-width: 850px) {
  .sf-doc-media-grid { grid-template-columns: 1fr; }
  .sf-doc-media-tile--wide { grid-column: auto; }
  .sf-doc-media-tile > a:first-child,
  .sf-doc-media-tile--wide > a:first-child { height: 300px; }
}

.sf-doc-revisions {
  margin-top: var(--sf-space-5);
}

.sf-doc-revision {
  display: grid;
  grid-template-columns: 116px 118px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--sf-doc-line);
}

.sf-doc-revision time,
.sf-doc-revision .sf-doc-revision-state {
  color: var(--sf-doc-dim);
  font: 11px/1.5 var(--sf-doc-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sf-doc-revision p { margin: 0; color: var(--sf-doc-soft); font-size: 13px; }

.sf-doc-sources {
  color: var(--sf-doc-soft);
  font-size: 13px;
}

.sf-doc-sources li { margin: 9px 0; }

.sf-doc-footer {
  margin-top: var(--sf-space-8);
  padding-top: var(--sf-space-4);
  border-top: 1px solid var(--sf-doc-line);
  color: var(--sf-doc-dim);
  font: 11px/1.5 var(--sf-doc-mono);
}

/* Visible only in the template/component specimen; remove these notes in a real document. */
.sf-doc-template-note {
  margin: var(--sf-space-5) 0 var(--sf-space-2);
  padding: 7px 10px;
  border-left: 2px solid var(--sf-doc-cyan);
  color: var(--sf-doc-dim);
  font: 10px/1.5 var(--sf-doc-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* =========================================================================
 * Production knowledge and state components — P606
 * Semantic HTML equivalents of the native instrument contracts. They use
 * the accepted tokens and work without JavaScript.
 * ========================================================================= */

.sf-doc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sf-space-2);
  margin-block: var(--sf-space-4);
}

.sf-doc-btn {
  --sf-button-color: var(--sf-doc-control-line);
  display: inline-flex;
  min-width: 40px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: 1px solid var(--sf-button-color);
  background: color-mix(in srgb, var(--sf-button-color) 4%, var(--sf-doc-panel));
  color: var(--sf-doc-ink);
  font: 700 11px/1.2 var(--sf-doc-font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.sf-doc-btn:hover {
  background: color-mix(in srgb, var(--sf-button-color) 14%, var(--sf-doc-panel));
}

.sf-doc-btn:active {
  background: color-mix(in srgb, var(--sf-button-color) 22%, var(--sf-doc-panel));
}

.sf-doc-btn-primary {
  --sf-button-color: var(--sf-doc-cyan);
  background: color-mix(in srgb, var(--sf-doc-cyan) 18%, var(--sf-doc-panel));
}

.sf-doc-btn-destructive {
  --sf-button-color: var(--sf-doc-bad);
  background: color-mix(in srgb, var(--sf-doc-bad) 12%, var(--sf-doc-panel));
}

.sf-doc-btn-selected,
.sf-doc-btn[aria-pressed="true"] {
  --sf-button-color: var(--sf-doc-orange);
  background: color-mix(in srgb, var(--sf-doc-orange) 16%, var(--sf-doc-panel));
}

.sf-doc-btn:disabled,
.sf-doc-btn[aria-disabled="true"] {
  border-color: var(--sf-doc-line);
  background: var(--sf-doc-panel);
  color: var(--sf-doc-dim);
  cursor: not-allowed;
  opacity: 0.72;
}

.sf-doc-state {
  --sf-state-color: var(--sf-doc-dim);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sf-space-5);
  align-items: center;
  margin-block: var(--sf-space-5);
  padding: var(--sf-space-4);
  border: 1px solid var(--sf-doc-line);
  border-left: 4px solid var(--sf-state-color);
  background: color-mix(in srgb, var(--sf-state-color) 4%, var(--sf-doc-panel));
}

.sf-doc-state[data-state="loading"] { --sf-state-color: var(--sf-doc-cyan); }
.sf-doc-state[data-state="empty"] { --sf-state-color: var(--sf-doc-soft); }
.sf-doc-state[data-state="error"] { --sf-state-color: var(--sf-doc-bad); }
.sf-doc-state[data-state="stale"] { --sf-state-color: var(--sf-doc-orange); }
.sf-doc-state[data-state="unknown"] { --sf-state-color: var(--sf-doc-dim); }
.sf-doc-state[data-state="disabled"] { --sf-state-color: var(--sf-doc-control-line); }

.sf-doc-state-copy {
  min-width: 0;
}

.sf-doc-state-label {
  display: block;
  margin-bottom: var(--sf-space-1);
  color: var(--sf-state-color);
  font: 11px/1.35 var(--sf-doc-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sf-doc-state-title {
  display: block;
  color: var(--sf-doc-ink);
  font-weight: 700;
}

.sf-doc-state-detail {
  margin: var(--sf-space-1) 0 0;
  color: var(--sf-doc-soft);
  font-size: 14px;
}

.sf-doc-media-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--sf-doc-line);
  background: var(--sf-doc-panel);
}

.sf-doc-media-meta > div {
  min-width: 0;
  padding: 10px 12px;
  border-right: 1px solid var(--sf-doc-line);
}

.sf-doc-media-meta > div:last-child {
  border-right: 0;
}

.sf-doc-media-meta dt {
  margin: 0 0 3px;
  color: var(--sf-doc-dim);
  font: 10px/1.35 var(--sf-doc-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sf-doc-media-meta dd {
  margin: 0;
  color: var(--sf-doc-ink);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.sf-doc-procedure {
  margin-block: var(--sf-space-5);
  border-block: 1px solid var(--sf-doc-line);
}

.sf-doc-procedure-header {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sf-space-5);
  padding: var(--sf-space-4) 0;
  border-bottom: 1px solid var(--sf-doc-line);
}

.sf-doc-procedure-header dl {
  margin: 0;
}

.sf-doc-procedure-header dt,
.sf-doc-dossier dt {
  color: var(--sf-doc-dim);
  font: 10px/1.35 var(--sf-doc-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sf-doc-procedure-header dd,
.sf-doc-dossier dd {
  margin: 4px 0 0;
  color: var(--sf-doc-soft);
}

.sf-doc-procedure ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: sf-procedure-step;
}

.sf-doc-procedure ol > li {
  counter-increment: sf-procedure-step;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: var(--sf-space-3);
  margin: 0;
  padding: var(--sf-space-4) 0;
  border-bottom: 1px solid var(--sf-doc-line);
}

.sf-doc-procedure ol > li::before {
  content: counter(sf-procedure-step, decimal-leading-zero);
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--sf-doc-cyan);
  color: var(--sf-doc-cyan);
  font: 700 11px/1 var(--sf-doc-mono);
}

.sf-doc-procedure-result,
.sf-doc-procedure-recovery {
  padding: var(--sf-space-4);
  border-left: 3px solid var(--sf-doc-good);
  background: color-mix(in srgb, var(--sf-doc-good) 5%, var(--sf-doc-panel));
  color: var(--sf-doc-soft);
}

.sf-doc-procedure-recovery {
  border-left-color: var(--sf-doc-orange);
  background: color-mix(in srgb, var(--sf-doc-orange) 5%, var(--sf-doc-panel));
}

.sf-doc-dossier {
  margin-block: var(--sf-space-5);
  border: 1px solid var(--sf-doc-line);
  background: var(--sf-doc-panel);
}

.sf-doc-dossier-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sf-space-5);
  align-items: start;
  padding: var(--sf-space-5);
  border-bottom: 1px solid var(--sf-doc-line);
}

.sf-doc-dossier-header h3 {
  margin: 0 0 var(--sf-space-1);
}

.sf-doc-dossier-header p {
  margin: 0;
  color: var(--sf-doc-soft);
}

.sf-doc-dossier-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}

.sf-doc-dossier-facts > div {
  min-width: 0;
  padding: var(--sf-space-4);
  border-right: 1px solid var(--sf-doc-line);
  border-bottom: 1px solid var(--sf-doc-line);
}

.sf-doc-dossier-facts > div:nth-child(4n) {
  border-right: 0;
}

.sf-doc-dossier-relations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sf-doc-dossier-relations > section {
  min-width: 0;
  padding: var(--sf-space-4);
  border-right: 1px solid var(--sf-doc-line);
}

.sf-doc-dossier-relations > section:last-child {
  border-right: 0;
}

.sf-doc-dossier-relations h4 {
  margin-top: 0;
}

.sf-doc-dossier-relations ul {
  margin-bottom: 0;
  padding-left: 1.1em;
  color: var(--sf-doc-soft);
  font-size: 13px;
}

.sf-doc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 850px) {
  .sf-doc-shell {
    width: min(100% - 22px, var(--sf-doc-wide));
    padding-block: var(--sf-space-6) var(--sf-space-8);
  }

  .sf-doc-breakout {
    width: min(100vw - 22px, var(--sf-doc-wide));
  }

  .sf-doc-grid { grid-template-columns: 1fr; }
  .sf-document th,
  .sf-document td { padding: 10px 9px; }

  .sf-doc-revision {
    grid-template-columns: 1fr;
    gap: var(--sf-space-1);
  }

  .sf-doc-state,
  .sf-doc-procedure-header,
  .sf-doc-dossier-header {
    grid-template-columns: 1fr;
  }

  .sf-doc-state .sf-doc-actions {
    margin: 0;
  }

  .sf-doc-media-meta,
  .sf-doc-dossier-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sf-doc-media-meta > div:nth-child(2n),
  .sf-doc-dossier-facts > div:nth-child(2n) {
    border-right: 0;
  }

  .sf-doc-dossier-relations {
    grid-template-columns: 1fr;
  }

  .sf-doc-dossier-relations > section {
    border-right: 0;
    border-bottom: 1px solid var(--sf-doc-line);
  }

  .sf-doc-dossier-relations > section:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 520px) {
  .sf-doc-media-meta,
  .sf-doc-dossier-facts {
    grid-template-columns: 1fr;
  }

  .sf-doc-media-meta > div,
  .sf-doc-dossier-facts > div {
    border-right: 0;
  }

  .sf-doc-actions .sf-doc-btn {
    width: 100%;
  }
}

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

@media (prefers-contrast: more) {
  :root {
    --sf-doc-ink: #f4f8fb;
    --sf-doc-soft: #c1cdd4;
    --sf-doc-dim: #a5b5be;
    --sf-doc-line: #49636e;
    --sf-doc-control-line: #6d8792;
  }

  .sf-doc-callout,
  .sf-doc-card,
  .sf-doc-state,
  .sf-doc-dossier,
  .sf-doc-figure,
  .sf-form-fieldset {
    background-image: none;
  }
}

@media (forced-colors: active) {
  .sf-doc-registration-mark,
  .sf-doc-registration-mark::after,
  .sf-doc-section > h2::before,
  .sf-doc-section-title::before,
  .sf-doc-figure::before,
  .sf-doc-figure::after,
  .sf-doc-status,
  .sf-doc-meta-item,
  .sf-doc-card,
  .sf-doc-callout,
  .sf-doc-rule-number,
  .sf-doc-btn,
  .sf-doc-state,
  .sf-doc-dossier,
  .sf-doc-procedure,
  .sf-doc-procedure ol > li::before {
    border-color: CanvasText;
  }

  .sf-doc-btn-primary,
  .sf-doc-btn-selected,
  .sf-doc-btn[aria-pressed="true"] {
    background: Highlight;
    color: HighlightText;
  }
}

@media print {
  :root { color-scheme: light; }
  @page { margin: 18mm; }

  body.sf-document {
    background: #fff;
    color: #111;
    font-size: 10.5pt;
  }

  .sf-doc-shell {
    width: 100%;
    padding: 0;
  }

  .sf-doc-prose,
  .sf-doc-breakout {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  .sf-doc-skip-link,
  .sf-doc-no-print,
  .sf-doc-template-note {
    display: none !important;
  }

  .sf-document h1,
  .sf-document h2,
  .sf-document h3,
  .sf-document h4,
  .sf-document td strong,
  .sf-doc-figure figcaption strong {
    color: #111;
  }

  .sf-doc-lede,
  .sf-document td,
  .sf-doc-card p,
  .sf-doc-card li,
  .sf-doc-callout,
  .sf-doc-quote,
  .sf-doc-rule p,
  .sf-doc-figure figcaption,
  .sf-doc-revision p,
  .sf-doc-sources,
  .sf-doc-footer {
    color: #333;
  }

  .sf-doc-meta,
  .sf-doc-revision time,
  .sf-doc-revision .sf-doc-revision-state {
    color: #444;
  }

  .sf-doc-card,
  .sf-doc-callout,
  .sf-doc-quote,
  .sf-doc-figure,
  .sf-doc-state,
  .sf-doc-dossier,
  .sf-document pre,
  .sf-doc-toc {
    background: #fff;
    border-color: #666;
  }

  .sf-doc-grid,
  .sf-doc-card,
  .sf-doc-callout,
  .sf-doc-state,
  .sf-doc-dossier,
  .sf-doc-procedure,
  .sf-doc-rule,
  .sf-doc-figure,
  .sf-doc-revision,
  table,
  tr {
    break-inside: avoid;
  }

  .sf-doc-figure img { filter: grayscale(1); }
  .sf-document a { color: #111; text-decoration-color: #555; }
  .sf-doc-actions { display: none; }
}

/* =========================================================================
 * Form components — P391, 2026-07-24
 * Reusable .sf-form-* family for house-style data-entry surfaces (playtest
 * feedback, structured intake). Namespaced apart from the sf-doc-* prose
 * components above; reuses the same tokens only. No new colors, no radius —
 * square corners hold everywhere, including checkbox/radio controls.
 * ========================================================================= */

.sf-form {
  display: flex;
  flex-direction: column;
  gap: var(--sf-space-6);
  margin: var(--sf-space-5) 0;
}

.sf-form-fieldset {
  margin: 0;
  padding: var(--sf-space-5);
  border: 1px solid var(--sf-doc-line);
  background: var(--sf-doc-panel);
}

.sf-form-fieldset > legend {
  padding: 0 var(--sf-space-2);
  color: var(--sf-doc-cyan);
  font: 11px/1.4 var(--sf-doc-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sf-form-fieldset > .sf-form-field:last-child {
  margin-bottom: 0;
}

.sf-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--sf-space-1);
  margin-bottom: var(--sf-space-4);
}

.sf-form-label {
  color: var(--sf-doc-soft);
  font: 11px/1.4 var(--sf-doc-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sf-form-label .sf-form-optional {
  color: var(--sf-doc-dim);
  text-transform: none;
  letter-spacing: normal;
}

.sf-form-hint {
  margin: 0;
  color: var(--sf-doc-dim);
  font-size: 12px;
}

.sf-form-control {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--sf-doc-control-line);
  background: var(--sf-doc-panel-raised);
  color: var(--sf-doc-ink);
  font: 14px/1.45 var(--sf-doc-font);
}

.sf-form-control::placeholder {
  color: var(--sf-doc-dim);
}

textarea.sf-form-control {
  min-height: 100px;
  resize: vertical;
}

select.sf-form-control {
  cursor: pointer;
}

/* Checkbox / radio — square controls throughout; state reads by fill shape,
 * not hue alone. Checkbox draws a check mark, radio fills a solid square. */
.sf-form-check-group {
  display: flex;
  flex-direction: column;
  gap: var(--sf-space-2);
}

.sf-form-check-group[data-layout="inline"] {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--sf-space-2) var(--sf-space-5);
}

.sf-form-check {
  display: inline-flex;
  align-items: center;
  gap: var(--sf-space-2);
  color: var(--sf-doc-soft);
  font-size: 14px;
  cursor: pointer;
}

.sf-form-check input[type="checkbox"],
.sf-form-check input[type="radio"] {
  appearance: none;
  display: grid;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid var(--sf-doc-control-line);
  background: var(--sf-doc-panel-raised);
  cursor: pointer;
}

.sf-form-check input[type="checkbox"]::after {
  content: "";
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--sf-doc-cyan);
  border-bottom: 2px solid var(--sf-doc-cyan);
  transform: rotate(-45deg) scale(0);
  transition: transform 0.1s ease-out;
}

.sf-form-check input[type="checkbox"]:checked {
  border-color: var(--sf-doc-cyan);
}

.sf-form-check input[type="checkbox"]:checked::after {
  transform: rotate(-45deg) scale(1);
}

.sf-form-check input[type="radio"]::after {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--sf-doc-cyan);
  transform: scale(0);
  transition: transform 0.1s ease-out;
}

.sf-form-check input[type="radio"]:checked {
  border-color: var(--sf-doc-cyan);
}

.sf-form-check input[type="radio"]:checked::after {
  transform: scale(1);
}

/* Likert scale — dual-coded by policy: every option keeps its numeric label
 * regardless of state, and checked reads as an empty box turning into a
 * solid fill (shape + weight), never color alone. Verified against the
 * forced-colors block below. */
.sf-form-likert-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.sf-form-likert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sf-space-2);
  margin-top: var(--sf-space-1);
}

.sf-form-likert-endcap {
  color: var(--sf-doc-dim);
  font: 10px/1.4 var(--sf-doc-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sf-form-likert-opt {
  display: inline-flex;
  cursor: pointer;
}

.sf-form-likert-opt input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sf-form-likert-num {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--sf-doc-control-line);
  background: var(--sf-doc-panel-raised);
  color: var(--sf-doc-ink);
  font: 600 13px/1 var(--sf-doc-mono);
  transition: background 0.1s ease-out, border-color 0.1s ease-out;
}

.sf-form-likert-opt:hover .sf-form-likert-num {
  border-color: var(--sf-doc-cyan);
}

.sf-form-likert-opt input:focus-visible ~ .sf-form-likert-num {
  outline: 2px solid var(--sf-doc-cyan);
  outline-offset: 3px;
}

.sf-form-likert-opt input:checked ~ .sf-form-likert-num {
  border-color: var(--sf-doc-cyan);
  background: var(--sf-doc-cyan);
  color: #04141a;
  font-weight: 800;
}

/* "Didn't test this section" coverage toggle — CSS-only mute via :has(), no
 * JS required. The toggle field itself stays interactive and full-opacity;
 * every sibling field in the same fieldset dims and stops accepting input.
 * The checkbox's own answer line already tells the export the section was
 * skipped, so the serializer needs no special-casing. */
.sf-form-fieldset:has(.sf-form-untested-input:checked) > .sf-form-field:not(.sf-form-untested-field) {
  opacity: 0.35;
  pointer-events: none;
}

.sf-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sf-space-3);
  margin-top: var(--sf-space-2);
}

.sf-form-btn {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0 var(--sf-space-4);
  border: 1px solid var(--sf-doc-control-line);
  background: transparent;
  color: var(--sf-doc-ink);
  font: 700 11px/1 var(--sf-doc-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.sf-form-btn:hover {
  border-color: var(--sf-doc-cyan);
}

.sf-form-btn-primary {
  border-color: var(--sf-doc-cyan);
  background: color-mix(in srgb, var(--sf-doc-cyan) 14%, var(--sf-doc-panel));
}

.sf-form-btn-primary:hover {
  background: color-mix(in srgb, var(--sf-doc-cyan) 24%, var(--sf-doc-panel));
}

.sf-form-btn-secondary {
  border-color: var(--sf-doc-control-line);
  color: var(--sf-doc-soft);
}

/* Inline confirmation, e.g. "Copied" after a clipboard action. Text carries
 * the meaning; the checkmark is decorative reinforcement, not the signal. */
.sf-form-confirm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sf-doc-good);
  font: 11px/1 var(--sf-doc-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}

.sf-form-confirm[data-visible="true"] {
  opacity: 1;
  transform: translateY(0);
}

.sf-form-confirm::before {
  content: "\2713";
}

@media (max-width: 850px) {
  .sf-form-fieldset { padding: var(--sf-space-4); }
  .sf-form-likert { gap: var(--sf-space-1); }
  .sf-form-likert-num { width: 30px; height: 30px; font-size: 12px; }
}

@media (forced-colors: active) {
  .sf-form-fieldset,
  .sf-form-control,
  .sf-form-check input,
  .sf-form-likert-num,
  .sf-form-btn {
    border-color: CanvasText;
  }

  .sf-form-check input[type="checkbox"]::after { border-color: CanvasText; }
  .sf-form-check input[type="radio"]::after { background: CanvasText; }

  .sf-form-likert-opt input:checked ~ .sf-form-likert-num {
    background: Highlight;
    color: HighlightText;
    border-color: Highlight;
  }
}

@media print {
  .sf-form-actions,
  .sf-form-confirm,
  .sf-form-autosave-note {
    display: none !important;
  }

  .sf-form-fieldset { background: #fff; border-color: #666; }
  .sf-form-control { background: #fff; color: #111; border-color: #666; }
  .sf-form-label { color: #444; }
  .sf-form-hint { color: #555; }

  .sf-form-check input[type="checkbox"]::after,
  .sf-form-check input[type="radio"]::after {
    border-color: #111;
    background: #111;
  }

  .sf-form-likert-num { border-color: #666; color: #111; }
  .sf-form-likert-opt input:checked ~ .sf-form-likert-num {
    background: #111;
    color: #fff;
    border-color: #111;
  }

  .sf-form-fieldset:has(.sf-form-untested-input:checked) > .sf-form-field:not(.sf-form-untested-field) {
    opacity: 0.4;
  }
}

/* --- P389 addition: opt-in left index rail ------------------------------------------------------
   Pattern from p207 (two-column layout with a sticky Contents column), rebuilt on house tokens:
   square geometry, steel hairlines, mono label — no radius, no blur. Opt-in via
   `.sf-doc-shell--indexed` on the shell + `.sf-doc-toc--rail` on the nav (a direct child of the
   shell, between header and prose). Narrow viewports and print get the standard in-flow
   "On this page" block; nothing changes for documents that don't opt in. */
@media (min-width: 1360px) {
  .sf-doc-shell--indexed {
    display: grid;
    grid-template-columns: 212px minmax(0, 1fr);
    column-gap: 52px;
    width: min(calc(var(--sf-doc-wide) + 264px), calc(100% - 36px));
  }
  .sf-doc-shell--indexed > * {
    grid-column: 2;
  }
  .sf-doc-shell--indexed > .sf-doc-toc--rail {
    grid-column: 1;
    grid-row: 1 / 99;
    position: sticky;
    top: 22px;
    align-self: start;
    max-height: calc(100vh - 44px);
    overflow-y: auto;
    margin: 36px 0 0;
    border: 1px solid var(--sf-doc-line);
  }
  .sf-doc-toc--rail ul {
    display: block;
  }
  .sf-doc-toc--rail li {
    margin: 6px 0;
  }

  /* .sf-doc-breakout normally escapes the narrow prose column by measuring against
     100vw (there is no second column to clash with). Inside the indexed grid the
     prose column is already inset by the rail + gap, so the same 100vw math would
     size a breakout figure wider than its own column and push it past the shell's
     right edge. Constrain it to the grid column's own track instead. */
  .sf-doc-shell--indexed .sf-doc-breakout {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }
}