/* SimpleTrustCenter shared design tokens and components.
   Non-brand tokens mirror SimpleTrustCenter.Core DesignTokens (a Web test keeps them in sync).
   Brand tokens (--stc-brand, --stc-brand-hover, --stc-brand-fg, --stc-brand-hover-fg, --stc-focus) are set on <html> by the layout from a validated color. */

:root {
  --stc-brand: #1e40af;
  --stc-brand-hover: #1e3a8a;
  --stc-brand-fg: #ffffff;
  --stc-brand-hover-fg: #ffffff;
  --stc-focus: #1e40af;

  --stc-bg: #f8f6f1;
  --stc-bg-sunk: #f1eee7;
  --stc-surface: #fffefb;
  --stc-ink: #15202b;
  --stc-muted: #636d78;
  --stc-rule: #e4dfd5;
  --stc-rule-strong: #d3ccbf;

  --stc-success: #0f6a3d;
  --stc-success-soft: #e4f2e8;
  --stc-success-line: #b5d9c1;
  --stc-warn: #8a5208;
  --stc-warn-soft: #fbf1dd;
  --stc-warn-line: #ecd3a3;
  --stc-danger: #9b2f27;
  --stc-danger-soft: #f8e7e3;
  --stc-danger-line: #e9c1ba;
  --stc-info: #285680;
  --stc-info-soft: #e7eef5;
  --stc-info-line: #c3d3e3;

  --stc-radius: 6px;
  --stc-radius-lg: 10px;
  --stc-control-height: 36px;
  --stc-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font: 15px/1.55 var(--stc-font); color: var(--stc-ink); background: var(--stc-bg); }
h1, h2, h3 { margin: 0; line-height: 1.25; font-weight: 600; }
h1 { font-size: 28px; letter-spacing: -.02em; }
h2 { font-size: 19px; }
p { margin: 0; }
a { color: var(--stc-ink); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--stc-focus); outline-offset: 2px; }

.stc-muted { color: var(--stc-muted); }
.stc-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--stc-muted); }
.stc-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.stc-container { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.stc-stack > * + * { margin-top: 20px; }
.stc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Shell */
.stc-skip { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 8px 12px; border-radius: var(--stc-radius); background: var(--stc-ink); color: #fff; }
.stc-skip:focus { top: 12px; }
.stc-topbar { background: var(--stc-surface); border-bottom: 1px solid var(--stc-rule); }
.stc-topbar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 56px; padding-top: 8px; padding-bottom: 8px; }
.stc-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; text-decoration: none; min-width: 0; max-width: 100%; }
.stc-brand-name { overflow-wrap: break-word; }
.stc-topbar nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-width: 0; }
.stc-topbar nav a { display: inline-flex; align-items: center; min-height: 32px; }
.stc-topbar nav form { margin: 0; }
/* Sign out is a POST form, so it is a button; it is styled exactly like the neighbouring links. */
.stc-topbar nav button { display: inline-flex; align-items: center; min-height: 32px; margin: 0; padding: 0; font: inherit; color: var(--stc-ink); background: none; border: 0; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.stc-brand-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: var(--stc-radius); background: var(--stc-brand); color: var(--stc-brand-fg); font-size: 14px; font-weight: 700; }
.stc-main { flex: 1 0 auto; padding-top: 32px; padding-bottom: 48px; }
.stc-footer { padding: 20px 0; border-top: 1px solid var(--stc-rule); color: var(--stc-muted); font-size: 13px; }

/* Buttons. All use the single default size unless explicitly compact (table rows). */
.stc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--stc-control-height); padding: 0 14px; font: 500 14px/1 var(--stc-font); color: var(--stc-ink); background: var(--stc-surface); border: 1px solid var(--stc-rule-strong); border-radius: var(--stc-radius); cursor: pointer; text-decoration: none; white-space: nowrap; }
.stc-btn:hover { background: #fff; }
.stc-btn-primary { background: var(--stc-brand); border-color: var(--stc-brand); color: var(--stc-brand-fg); }
.stc-btn-primary:hover { background: var(--stc-brand-hover); border-color: var(--stc-brand-hover); color: var(--stc-brand-hover-fg); }
.stc-btn-ghost { background: transparent; border-color: transparent; }
.stc-btn-ghost:hover { background: var(--stc-bg-sunk); }
.stc-btn-danger { color: var(--stc-danger); border-color: var(--stc-danger-line); }
.stc-btn-danger:hover { background: var(--stc-danger-soft); }
.stc-btn:disabled, .stc-btn:disabled:hover { background: var(--stc-bg-sunk); border-color: var(--stc-rule-strong); color: var(--stc-muted); opacity: 1; cursor: not-allowed; }
.stc-btn-compact { height: 30px; padding: 0 10px; font-size: 13px; }

/* Badges: always carry a text label, never color alone */
.stc-badge { display: inline-flex; align-items: center; flex: none; white-space: nowrap; overflow-wrap: normal; height: 22px; padding: 0 8px; border: 1px solid var(--stc-rule-strong); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--stc-ink); background: var(--stc-bg-sunk); }
.stc-badge-brand { background: var(--stc-brand); border-color: var(--stc-brand); color: var(--stc-brand-fg); }
.stc-badge-success { background: var(--stc-success-soft); border-color: var(--stc-success-line); color: var(--stc-success); }
.stc-badge-warning { background: var(--stc-warn-soft); border-color: var(--stc-warn-line); color: var(--stc-warn); }
.stc-badge-danger { background: var(--stc-danger-soft); border-color: var(--stc-danger-line); color: var(--stc-danger); }
.stc-badge-info { background: var(--stc-info-soft); border-color: var(--stc-info-line); color: var(--stc-info); }

/* Banners */
.stc-banner { padding: 12px 16px; border: 1px solid var(--stc-info-line); border-left-width: 4px; border-radius: var(--stc-radius); background: var(--stc-info-soft); color: var(--stc-ink); }
.stc-banner-title { display: block; margin-bottom: 2px; }
.stc-banner ul { margin: 6px 0 0; padding-left: 20px; }
.stc-banner-neutral { background: var(--stc-bg-sunk); border-color: var(--stc-rule-strong); }
/* Pale brands vanish on near-white, so the border uses the neutral rule and the accent uses --stc-focus (the brand when it is visible, ink when it is not). */
.stc-banner-brand { border-color: var(--stc-rule-strong); border-left-color: var(--stc-focus); background: color-mix(in srgb, var(--stc-brand) 7%, var(--stc-surface)); }
.stc-banner-success { background: var(--stc-success-soft); border-color: var(--stc-success-line); border-left-color: var(--stc-success); }
.stc-banner-warning { background: var(--stc-warn-soft); border-color: var(--stc-warn-line); border-left-color: var(--stc-warn); }
.stc-banner-danger { background: var(--stc-danger-soft); border-color: var(--stc-danger-line); border-left-color: var(--stc-danger); }
.stc-banner-info { border-left-color: var(--stc-info); }

/* Page header and cards */
.stc-page-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; }
.stc-page-header-text { display: grid; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.stc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.stc-card { background: var(--stc-surface); border: 1px solid var(--stc-rule); border-radius: var(--stc-radius-lg); }
.stc-card-head { display: grid; gap: 4px; padding: 16px 20px 0; }
.stc-card-body { padding: 16px 20px 20px; }
.stc-card-body > :first-child { margin-top: 0; }
.stc-card-body > :last-child { margin-bottom: 0; }
.stc-card-body ul, .stc-card-body ol { margin: 8px 0 0; padding-left: 20px; }
.stc-card-body li + li { margin-top: 4px; }

/* Form fields */
.stc-field { display: grid; gap: 6px; }
.stc-field label { font-weight: 600; font-size: 14px; }
.stc-required { margin-left: 2px; color: var(--stc-danger); }
.stc-field input:not([type="checkbox"], [type="radio"]), .stc-field textarea, .stc-field select { width: 100%; padding: 8px 10px; min-height: var(--stc-control-height); font: inherit; color: var(--stc-ink); background: #fff; border: 1px solid var(--stc-rule-strong); border-radius: var(--stc-radius); }
.stc-field select { appearance: none; padding-right: 34px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23636d78' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center; }
.stc-field input:focus-visible, .stc-field textarea:focus-visible, .stc-field select:focus-visible { outline: 2px solid var(--stc-focus); outline-offset: 1px; border-color: var(--stc-focus); }
.stc-field input:disabled, .stc-field textarea:disabled, .stc-field select:disabled { background-color: var(--stc-bg-sunk); color: var(--stc-muted); cursor: not-allowed; }
.stc-field-invalid input, .stc-field-invalid textarea, .stc-field-invalid select { border-color: var(--stc-danger); }

/* Native fieldset of checkboxes/radios: same border, radius and label weight as fields. */
.stc-compact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; max-width: 100%; }
.stc-compact-box { position: relative; display: flex; min-width: 0; max-width: 100%; box-sizing: border-box; align-items: center; gap: 8px; min-height: var(--stc-control-height); padding: 0 0 0 10px; background: #fff; border: 1px solid var(--stc-rule-strong); border-radius: var(--stc-radius); }
.stc-compact-box::after { content: ""; position: absolute; right: 12px; top: 50%; width: 12px; height: 8px; margin-top: -4px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23636d78' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center; }
.stc-compact-box label { flex: none; font-size: 14px; font-weight: 600; color: var(--stc-muted); }
.stc-compact-box select { flex: 1; min-width: 0; align-self: stretch; padding: 0 34px 0 0; font: inherit; color: var(--stc-ink); background: transparent; border: 0; appearance: none; text-overflow: ellipsis; }
.stc-compact-box select:focus-visible { outline: none; }
.stc-compact-box:focus-within { outline: 2px solid var(--stc-focus); outline-offset: 1px; border-color: var(--stc-focus); }
.stc-compact-box:has(select:disabled) { background: var(--stc-bg-sunk); }
.stc-compact-box select:disabled { color: var(--stc-muted); cursor: not-allowed; }
.stc-compact-invalid .stc-compact-box { border-color: var(--stc-danger); }

.stc-fieldset { min-width: 0; margin: 0; padding: 12px 14px 14px; display: grid; gap: 8px; border: 1px solid var(--stc-rule-strong); border-radius: var(--stc-radius); background: var(--stc-surface); }
.stc-fieldset legend { padding: 0 6px; font-weight: 600; font-size: 14px; }
.stc-check { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 15px; }
.stc-check input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--stc-focus); }
.stc-check input:disabled + span { color: var(--stc-muted); }
.stc-hint { font-size: 13px; color: var(--stc-muted); }
.stc-error { font-size: 13px; color: var(--stc-danger); font-weight: 600; }

/* Empty state */
.stc-empty { display: grid; justify-items: center; gap: 8px; padding: 40px 20px; text-align: center; border: 1px dashed var(--stc-rule-strong); border-radius: var(--stc-radius-lg); background: var(--stc-surface); }
.stc-empty .stc-btn { margin-top: 8px; }

/* Tables */
/* Wide tables scroll inside the wrapper. Edge shadows (pure CSS, they appear only on the side that has more content) and a
   visible thin scrollbar are the scroll cue; headers never squeeze below their text, and long values wrap. */
.stc-table-wrap {
  overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--stc-rule-strong) transparent;
  border: 1px solid var(--stc-rule); border-radius: var(--stc-radius-lg);
  background:
    linear-gradient(to right, var(--stc-surface) 30%, transparent) left center / 24px 100% no-repeat local,
    linear-gradient(to left, var(--stc-surface) 30%, transparent) right center / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(21 32 43 / .22), transparent) left center / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(21 32 43 / .22), transparent) right center / 10px 100% no-repeat scroll,
    var(--stc-surface);
}
.stc-table-wrap:focus-visible { outline-offset: 0; }
.stc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
/* Cells wrap at spaces only and never break inside a word, so names, emails and role labels stay readable; a table that is too wide
   for its container scrolls inside .stc-table-wrap (every column, actions included, stays reachable). */
.stc-table td { min-width: 7rem; overflow-wrap: normal; }
.stc-table th, .stc-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--stc-rule); vertical-align: middle; }
/* The one value container of a cell (<stc-cell>): badges keep their own width, a link and its date stay together, and .stc-cell-break starts a new line. */
.stc-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
.stc-cell-break { flex: 0 0 100%; }
.stc-table th { white-space: nowrap; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--stc-muted); background: var(--stc-bg); }
.stc-table tbody tr:last-child td { border-bottom: 0; }
.stc-table-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; }

/* Documents: version navigation beside a readable column, text comparison, and preview frames. */
.stc-doc-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.stc-version-nav { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.stc-version-nav li { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--stc-rule); border-radius: var(--stc-radius); background: var(--stc-surface); }
.stc-version-nav li[aria-current="true"] { border-color: var(--stc-focus); box-shadow: inset 3px 0 0 var(--stc-focus); }
.stc-document { max-width: 72ch; line-height: 1.7; overflow-wrap: anywhere; }
.stc-document > * + * { margin-top: 12px; }
.stc-document h1, .stc-document h2, .stc-document h3, .stc-document h4 { margin-top: 24px; }
.stc-document table { border-collapse: collapse; }
.stc-document th, .stc-document td { padding: 6px 10px; border: 1px solid var(--stc-rule-strong); text-align: left; }
.stc-document pre, .stc-document code { font: 13px/1.5 ui-monospace, Menlo, Consolas, monospace; }
.stc-document pre { padding: 12px; overflow-x: auto; background: var(--stc-bg-sunk); border-radius: var(--stc-radius); }
.stc-document blockquote { margin-left: 0; padding-left: 14px; border-left: 3px solid var(--stc-rule-strong); color: var(--stc-muted); }
/* The comparison is a reading surface of its own: a bordered, padded container so changed words are not floating in the page. */
.stc-diff { padding: 14px 16px; line-height: 1.8; overflow-wrap: anywhere; background: var(--stc-surface); border: 1px solid var(--stc-rule-strong); border-radius: var(--stc-radius); }
.stc-diff ins, .stc-diff del { border-radius: 2px; }
.stc-diff > * + * { margin-left: .2em; }
.stc-diff ins { padding: 0 2px; background: var(--stc-success-soft); color: var(--stc-success); text-decoration: underline; }
.stc-diff del { padding: 0 2px; background: var(--stc-danger-soft); color: var(--stc-danger); text-decoration: line-through; }
.stc-frame { display: block; width: 100%; height: 560px; border: 1px solid var(--stc-rule-strong); border-radius: var(--stc-radius); background: #fff; }
.stc-field input[type="file"] { padding: 4px 6px; line-height: 26px; }
.stc-field input[type="file"]::file-selector-button { height: 26px; margin-right: 10px; padding: 0 12px; font: 500 14px/1 var(--stc-font); color: var(--stc-ink); background: var(--stc-surface); border: 1px solid var(--stc-rule-strong); border-radius: var(--stc-radius); cursor: pointer; }
.stc-field input[type="file"]::file-selector-button:hover { background: var(--stc-bg-sunk); }
/* A fieldset inside a stack keeps the stack rhythm: the fieldset reset below must not eat the gap after a field's helper text. */
.stc-stack > * + .stc-fieldset { margin-top: 20px; }

/* Document preview (shared by staff and public pages). The web frame starts at a fallback height and stc-preview.js fits it to the content,
   capped, with the rest scrolling inside. The PDF frame is cross-origin and keeps a bounded viewport. */
.stc-preview > * + * { margin-top: 12px; }
.stc-preview-actions { align-items: center; }
.stc-preview-tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--stc-bg-sunk); border: 1px solid var(--stc-rule); border-radius: var(--stc-radius); }
.stc-preview-tabs button { height: 30px; padding: 0 14px; font: 500 14px/1 var(--stc-font); color: var(--stc-muted); background: transparent; border: 0; border-radius: 4px; cursor: pointer; }
.stc-preview-tabs button[aria-selected="true"] { color: var(--stc-ink); background: var(--stc-surface); box-shadow: 0 0 0 1px var(--stc-rule-strong); }
.stc-preview-tabs[hidden] { display: none; }
.stc-preview-panel[hidden] { display: none; }
.stc-frame-web { height: 240px; max-height: 720px; }
.stc-frame-pdf { height: clamp(420px, 78vh, 820px); }
.stc-pdf-larger, .stc-pdf-hint-narrow { display: none; }
/* On a phone the native viewer is neither readable nor short, so no PDF frame is shown: the full-window PDF is the way to read it (stc-preview.js also
   hides the PDF tab and shows the web version at this width). Keep 560px in step with NARROW in stc-preview.js. */
@media (max-width: 560px) {
  .stc-frame-pdf { display: none; }
  /* In the tabbed preview the script hides the whole PDF panel itself: hiding the frame here first would drop a focused PDF's focus before the script can rescue it. */
  .stc-preview-tabs ~ .stc-preview-panel .stc-frame-pdf { display: block; }
  .stc-preview-tabs ~ .stc-preview-panel .stc-pdf-larger { display: flex; }
  .stc-pdf-hint-wide { display: none; }
  .stc-pdf-hint-narrow { display: block; }
}
/* Generated HTML as the web frame shows it: a page of its own, not a full-height app shell, so the frame can shrink to its content. */
body.stc-served { min-height: 0; display: block; background: var(--stc-surface); }
.stc-served-main { max-width: 1040px; margin: 0 auto; padding: 16px 20px 20px; }

.stc-compare-labels { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.stc-compare-labels li { display: inline-flex; align-items: center; gap: 8px; }

/* Field schema editing: one card per field, labelled groups, type-specific constraints (hidden ones are not rendered offscreen, they are not applicable). */
.stc-schema { display: grid; gap: 16px; }
.stc-schema-card { display: grid; gap: 14px; padding: 14px 16px 16px; border: 1px solid var(--stc-rule); border-radius: var(--stc-radius-lg); background: var(--stc-surface); }
.stc-schema-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.stc-schema-name { font-weight: 600; overflow-wrap: anywhere; }
.stc-schema-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-items: start; }
.stc-schema-grid .stc-wide { grid-column: 1 / -1; }
/* A compact select has its label inside the box, so it lines up with the input under its neighbour's caption, not with the caption. */
.stc-schema-grid > .stc-compact { align-self: end; }
@media (max-width: 560px) { .stc-schema-grid { grid-template-columns: minmax(0, 1fr); } .stc-schema-grid > .stc-compact { align-self: stretch; } }
.stc-schema-group { display: grid; gap: 8px; padding-top: 12px; border-top: 1px dashed var(--stc-rule-strong); }
.stc-schema-group > legend, .stc-schema-group > .stc-schema-group-title { font-size: 13px; font-weight: 600; color: var(--stc-muted); }
.stc-schema-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
fieldset.stc-schema-card { min-width: 0; margin: 0; }
/* Reject sits under Approve behind a divider, with its reason and button grouped in their own fieldset. */
.stc-review-reject { margin-top: 24px; padding-top: 20px; border-top: 1px dashed var(--stc-rule-strong); }
/* Constraint groups follow the selected type. Where :has() is unsupported every group stays visible and the server drops the ones that do not fit. */
@supports selector(:has(*)) {
  .stc-schema-card [data-group] { display: none; }
  .stc-schema-card:has(select option:is([value="Text"], [value="MultilineText"], [value="Email"]):checked) [data-group="length"] { display: grid; }
  .stc-schema-card:has(select option:is([value="Number"], [value="Integer"]):checked) [data-group="range"] { display: grid; }
  .stc-schema-card:has(select option:is([value="Text"], [value="Email"]):checked) [data-group="pattern"] { display: grid; }
  .stc-schema-card:has(select option[value="Choice"]:checked) [data-group="options"] { display: grid; }
}

/* Read-only rows that stay complete on a phone: every cell becomes a labelled line of a card, title and Open included. Opt-in (class "stc-rows"). */
@media (max-width: 700px) {
  .stc-rows { overflow: visible; border: 0; background: none; }
  .stc-rows .stc-table, .stc-rows .stc-table tbody, .stc-rows .stc-table tr, .stc-rows .stc-table td { display: block; }
  .stc-rows .stc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stc-rows .stc-table tr { margin-bottom: 12px; padding: 4px 0; border: 1px solid var(--stc-rule); border-radius: var(--stc-radius-lg); background: var(--stc-surface); }
  .stc-rows .stc-table td { display: grid; grid-template-columns: minmax(6rem, 34%) minmax(0, 1fr); gap: 4px 12px; min-width: 0; padding: 6px 14px; border-bottom: 0; overflow-wrap: anywhere; }
  .stc-rows .stc-table td::before { content: attr(data-label); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--stc-muted); }
  .stc-rows .stc-table td:not([data-label])::before, .stc-rows .stc-table td[data-label=""]::before { content: none; }
  .stc-rows .stc-table td:not([data-label]), .stc-rows .stc-table td[data-label=""] { grid-template-columns: minmax(0, 1fr); }
  /* The native viewer scales an A4 page to the frame's width, so the frame is the page's own proportions (plus the viewer toolbar) instead of a
     viewport fraction: no dark band under the page. It is a small file preview; the button under it opens the PDF full window for a larger view. */
  .stc-frame-pdf { height: auto; aspect-ratio: 10 / 14.5; min-height: 340px; max-height: 80vh; }
  .stc-pdf-larger { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
}
/* On a phone no frame is shown, so "Open PDF" above is the one action; the larger-view row (which the 700px block re-shows) would repeat it. */
@media (max-width: 560px) { .stc-pdf-larger { display: none; } }

/* Development catalog only */
.stc-dev-note { padding: 8px 12px; border: 1px dashed var(--stc-rule-strong); border-radius: var(--stc-radius); font-size: 13px; color: var(--stc-muted); }
.stc-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: 0 0 12px; }
.stc-dl dt { font-weight: 600; }
.stc-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* Fallback height when dev-email-frame.js cannot measure the content; the script sets the exact height inline. */
.stc-dev-frame { display: block; width: 100%; height: 960px; border: 1px solid var(--stc-rule-strong); border-radius: var(--stc-radius); background: var(--stc-bg-sunk); }
.stc-dev-text { padding: 12px; overflow-x: auto; border: 1px solid var(--stc-rule); border-radius: var(--stc-radius); background: var(--stc-surface); font: 13px/1.5 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 600px) {
  h1 { font-size: 24px; }
  .stc-main { padding-top: 20px; }
  /* Page header actions sit on their own row under the title on every page, not beside it. */
  .stc-page-header > .stc-actions { flex: 1 1 100%; }
  /* The brand gets its own full-width row; navigation sits on the next one. */
  .stc-topbar-inner > .stc-brand { flex: 1 1 100%; }
  .stc-topbar-inner > nav { flex: 1 1 100%; }
  .stc-doc-layout { grid-template-columns: minmax(0, 1fr); }
  .stc-dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .stc-dl dd { margin-bottom: 8px; }
}

/* U4B repairs (each answers a reviewed screenshot finding; additive, nothing above is changed). */
/* .stc-dl is declared after the stack rule and sets its own margin, so it cancelled the stack gap above it: a notice sat flush against the first row. */
.stc-stack > * + .stc-dl { margin-top: 20px; }
/* The generic input rule's :not() outranks .stc-field-invalid input, so only textareas turned red; this restores one invalid border for every control. */
.stc-field.stc-field-invalid input:not([type="checkbox"], [type="radio"]) { border-color: var(--stc-danger); }
/* A list inside a card is followed by its note or its button row with the same gap as other card content. */
.stc-card-body > :is(ul, ol) + * { margin-top: 12px; }
/* Long hashes and identifiers break inside their own block instead of pushing a row wider than the screen. */
.stc-hash { display: inline-block; max-width: 100%; font: 13px/1.5 ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; word-break: break-all; }
.stc-pre { white-space: pre-line; }
/* Wording the person is asked to agree to: a block of its own, not loose text. */
.stc-quote { margin: 0; padding: 12px 16px; border-left: 4px solid var(--stc-rule-strong); border-radius: 0 var(--stc-radius) var(--stc-radius) 0; background: var(--stc-bg-sunk); }
/* Technical detail that is evidence rather than part of a decision stays one click away. */
.stc-details > summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.stc-details[open] > summary { margin-bottom: 12px; }
/* Previous / Next under a list that is paged in the database. */
.stc-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 16px; }
/* Keep short table values together on desktop; mobile rows retain their normal wrapping. */
@media (min-width: 701px) {
  .stc-table-keep { white-space: nowrap; width: 1%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}