/* The OSF product layer (docs/foundation/UI-CONTRACT.md).

   Tokens from the brand guide's product mapping, and the shared components of the pages
   built on the foundation. Everything below the tokens is scoped to `body.osf`, the body the
   foundation layout (server/views/ui.js) renders for every page. Served from 'self' like
   every stylesheet (CSP: no inline style, no remote font). */

/* Licensed fonts, served from 'self' (font-src 'self'): ABC Diatype Semi Mono (Dinamo) and
   Selecta (Maxitype), the files unmodified and under their own names, web licence confirmed
   by the owner on 2026-10-08 (public/fonts/NOTICE.txt). Selecta has no upright Regular here
   yet, so body text stays on the system font: with a 'Selecta' family that lacks 400, every
   paragraph would quietly be set in Medium. When Selecta-Regular.woff2 is added, give it a
   400 normal face below and put 'Selecta' first in --osf-font-body. */
@font-face { font-family: 'ABC Diatype Semi Mono'; src: url('/fonts/ABCDiatypeSemiMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'ABC Diatype Semi Mono'; src: url('/fonts/ABCDiatypeSemiMono-RegularItalic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'ABC Diatype Semi Mono'; src: url('/fonts/ABCDiatypeSemiMono-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'ABC Diatype Semi Mono'; src: url('/fonts/ABCDiatypeSemiMono-BoldItalic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Selecta'; src: url('/fonts/Selecta-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Selecta'; src: url('/fonts/Selecta-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Selecta'; src: url('/fonts/Selecta-MediumItalic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Selecta'; src: url('/fonts/Selecta-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Selecta'; src: url('/fonts/Selecta-BoldItalic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  --osf-text: #1d1d1d;
  --osf-text-muted: #646363;
  --osf-canvas: #ffffff;
  --osf-surface: #f8f8f4;
  --osf-surface-selected: #efeee7;
  --osf-border: #c0beb2;
  --osf-border-control: #6f6e66;
  --osf-link: #1c4e8f;
  --osf-focus: #1c4e8f;
  --osf-accent: #73adff;
  --osf-button: #323232;
  --osf-button-hover: #000000;
  /* State borders. Danger is the brand's red; warning and success are not brand colours
     (the pack adds none) and are used only for borders, never for text or fills: the
     meaning of a state is always also in its words and its border style. */
  --osf-danger: #a85450;
  --osf-warning: #7a5200;
  --osf-success: #1e5e33;

  /* Selecta for headings and the site name (Medium and Bold are served); body on the system
     font until Selecta Regular is (see the @font-face block above). Metadata, buttons, codes
     and digests in ABC Diatype Semi Mono, all four faces served. */
  --osf-font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --osf-font-display: 'Selecta', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --osf-font-mono: 'ABC Diatype Semi Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* The review pack's product tokens (reference/assets/product/product-tokens.css). The
     44px heading between the two breakpoints is ours: the pack names 52px and 36px only, and
     a long title must wrap at tablet width rather than overflow. */
  --osf-size-body: 16px;
  --osf-size-meta: 14px;
  --osf-size-heading: 52px;
  --osf-size-h2: 30px;
  --osf-size-h3: 21px;
  --osf-size-lead: 21px;

  --osf-gutter: 48px;
  --osf-control-height: 48px;
  --osf-radius-control: 6px;
  --osf-radius-panel: 12px;
  --osf-radius-major: 16px;
  --osf-measure: 46rem;
  --osf-wide: 1392px;
  --osf-context: 256px;
  --osf-review-gap: 60px;
}

@media (max-width: 1100px) { :root { --osf-gutter: 32px; --osf-size-heading: 44px; } }
@media (max-width: 760px) { :root { --osf-gutter: 20px; --osf-size-heading: 36px; --osf-size-lead: 18px; } }

/* ---- page */
body.osf { margin: 0; background: var(--osf-canvas); color: var(--osf-text); font-family: var(--osf-font-body);
  font-size: var(--osf-size-body); line-height: 1.5; }
body.osf main { max-width: var(--osf-wide); margin: 0 auto; padding: 2rem var(--osf-gutter) 4rem; box-sizing: border-box; }
body.osf .osf-measure { max-width: var(--osf-measure); }
body.osf a { color: var(--osf-link); text-underline-offset: 0.15em; }
body.osf a:hover { text-decoration-thickness: 2px; }
/* Long titles, URLs and identifiers wrap rather than widen the page. */
body.osf h1, body.osf h2, body.osf h3, body.osf p, body.osf li, body.osf dd, body.osf a { overflow-wrap: anywhere; }
/* Not in a table cell: there "anywhere" lets the table shrink a column until ordinary words
   break between letters (a budget at 320px). A cell breaks a word only when it cannot fit,
   and a table too wide for the screen scrolls inside its own wrapper. */
body.osf td { overflow-wrap: break-word; }
body.osf code, body.osf .osf-meta { font-family: var(--osf-font-mono); font-size: var(--osf-size-meta); }
body.osf :focus-visible { outline: 3px solid var(--osf-focus); outline-offset: 2px; box-shadow: 0 0 0 6px var(--osf-accent); }

body.osf .osf-skip { position: absolute; left: -10000px; top: 0; }
body.osf .osf-skip:focus { left: var(--osf-gutter); top: 0.5rem; z-index: 2; background: var(--osf-canvas); padding: 0.5rem 1rem;
  border: 2px solid var(--osf-focus); border-radius: var(--osf-radius-control); }

/* ---- header and footer */
body.osf .osf-header { border-bottom: 1px solid var(--osf-border); background: var(--osf-canvas); }
body.osf .osf-header-inner { max-width: var(--osf-wide); margin: 0 auto; padding: 0.75rem var(--osf-gutter); box-sizing: border-box;
  display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; align-items: center; justify-content: space-between; }
body.osf .osf-brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--osf-text); text-decoration: none; font-weight: 500; }
body.osf .osf-brand img { width: 29px; height: 35px; }
body.osf .osf-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
body.osf .osf-nav a { display: inline-block; padding: 0.5rem 0; color: var(--osf-text); text-decoration: none; }
body.osf .osf-nav a:hover, body.osf .osf-nav a[aria-current='page'] { text-decoration: underline; text-decoration-thickness: 2px; }
/* Sign out is a form (a POST with the CSRF token) that reads as one more menu item. */
body.osf .osf-nav-form { display: inline; margin: 0; }
body.osf .osf-nav-button { display: inline-block; padding: 0.5rem 0; font: inherit; color: var(--osf-text); background: none; border: 0; cursor: pointer; }
body.osf .osf-nav-button:hover { text-decoration: underline; text-decoration-thickness: 2px; }
body.osf .osf-footer { border-top: 1px solid var(--osf-border); color: var(--osf-text-muted); font-size: var(--osf-size-meta); }
body.osf .osf-footer-inner { max-width: var(--osf-wide); margin: 0 auto; padding: 1.5rem var(--osf-gutter); box-sizing: border-box; }

/* ---- page heading */
body.osf .osf-heading { margin: 0 0 2rem; }
body.osf .osf-eyebrow { margin: 0 0 20px; color: var(--osf-link); font-family: var(--osf-font-mono); font-size: var(--osf-size-meta);
  line-height: 1.4; letter-spacing: 0.025em; }
body.osf .osf-heading h1 { font-size: var(--osf-size-heading); line-height: 1.05; font-weight: 500; margin: 0; letter-spacing: -0.025em; }
body.osf h1, body.osf h2, body.osf h3, body.osf h4, body.osf .osf-brand { font-family: var(--osf-font-display); }
body.osf .osf-lede { font-size: var(--osf-size-lead); line-height: 1.4; margin: 1.5rem 0 0; max-width: var(--osf-measure); }
body.osf h2 { font-size: var(--osf-size-h2); line-height: 1.25; margin: 2.5rem 0 0.75rem; font-weight: 500; }
body.osf h3 { font-size: var(--osf-size-h3); margin: 1.5rem 0 0.5rem; font-weight: 500; }
body.osf h4 { font-weight: 500; }

/* ---- panels, summary lists */
body.osf .osf-panel { background: var(--osf-surface); border: 1px solid var(--osf-border); border-radius: var(--osf-radius-panel); padding: 1.25rem 1.5rem; margin: 1.5rem 0; }
body.osf .osf-panel > :first-child { margin-top: 0; }
body.osf .osf-panel > :last-child { margin-bottom: 0; }
body.osf .osf-summary { display: grid; grid-template-columns: minmax(10rem, max-content) 1fr; gap: 0.5rem 1.5rem; margin: 0; }
body.osf .osf-summary dt { color: var(--osf-text-muted); }
body.osf .osf-summary dd { margin: 0; }
@media (max-width: 760px) {
  body.osf .osf-summary { grid-template-columns: 1fr; gap: 0.15rem; }
  body.osf .osf-summary dd { margin-bottom: 0.6rem; }
}

/* ---- status tag: words first, a border that differs by state, colour last */
body.osf .osf-tag { display: inline-block; font-family: var(--osf-font-mono); font-size: var(--osf-size-meta); line-height: 1.3;
  padding: 5px 11px; border: 1px solid var(--osf-border-control); border-radius: var(--osf-radius-control); background: var(--osf-surface-selected);
  color: var(--osf-text); white-space: nowrap; }
body.osf .osf-tag[data-kind='done'], body.osf .osf-tag[data-kind='public'] { border-width: 2px; border-color: var(--osf-success); }
/* Work under way is not an error: the warning colour, not the danger one. */
body.osf .osf-tag[data-kind='attention'] { border-width: 2px; border-color: var(--osf-warning); }
body.osf .osf-tag[data-kind='todo'], body.osf .osf-tag[data-kind='private'] { border-style: dashed; }
body.osf .osf-tag[data-kind='unavailable'] { border-style: dotted; color: var(--osf-text-muted); }

/* ---- task list (the sections of an application) */
body.osf .osf-tasks { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--osf-border); }
body.osf .osf-task { display: grid; grid-template-columns: 2.5rem 1fr auto; gap: 0.25rem 1rem; align-items: start; padding: 1rem 0; border-bottom: 1px solid var(--osf-border); }
body.osf .osf-task-number { font-family: var(--osf-font-mono); color: var(--osf-text-muted); padding-top: 0.1rem; }
body.osf .osf-task-title { font-weight: 600; }
body.osf .osf-task-detail { grid-column: 2 / 4; margin: 0; color: var(--osf-text-muted); font-size: 0.95rem; }
@media (max-width: 760px) {
  body.osf .osf-task { grid-template-columns: 2rem 1fr; }
  body.osf .osf-task .osf-tag { grid-column: 2; justify-self: start; }
  body.osf .osf-task-detail { grid-column: 2; }
}

/* ---- notices */
body.osf .osf-notice { border: 1px solid var(--osf-border-control); border-left-width: 6px; border-radius: var(--osf-radius-control); padding: 0.9rem 1.1rem;
  margin: 1.25rem 0; background: var(--osf-canvas); }
body.osf .osf-notice > :first-child { margin-top: 0; }
body.osf .osf-notice > :last-child { margin-bottom: 0; }
body.osf .osf-notice-title { font-weight: 600; margin: 0 0 0.25rem; }
body.osf .osf-notice[data-kind='success'] { border-left-color: var(--osf-success); }
body.osf .osf-notice[data-kind='warning'] { border-left-color: var(--osf-warning); }
body.osf .osf-notice[data-kind='error'] { border-left-color: var(--osf-danger); border-width: 2px 2px 2px 6px; }
body.osf .osf-notice[data-kind='info'] { border-left-color: var(--osf-link); }

/* ---- error summary */
body.osf .osf-error-summary { border: 3px solid var(--osf-danger); border-radius: var(--osf-radius-panel); padding: 1rem 1.25rem; margin: 0 0 2rem; }
body.osf .osf-error-summary h2 { margin: 0 0 0.5rem; font-size: 1.25rem; }
body.osf .osf-error-summary ul { margin: 0; padding-left: 1.2rem; }

/* ---- fields */
body.osf .osf-field { margin: 0 0 1.5rem; border: 0; padding: 0; min-width: 0; }
body.osf .osf-field > label, body.osf .osf-field > legend { display: block; font-weight: 600; margin-bottom: 0.3rem; }
body.osf .osf-help { color: var(--osf-text-muted); margin: 0 0 0.4rem; }
body.osf .osf-error { color: var(--osf-danger); font-weight: 600; margin: 0 0 0.4rem; }
body.osf .osf-input, body.osf .osf-select, body.osf .osf-textarea { box-sizing: border-box; width: 100%; max-width: 36rem; min-height: var(--osf-control-height);
  font: inherit; color: var(--osf-text); background: var(--osf-canvas); border: 1px solid var(--osf-border-control); border-radius: var(--osf-radius-control); padding: 0.6rem 0.75rem; }
body.osf .osf-textarea { max-width: var(--osf-measure); }
body.osf .osf-field[data-invalid] .osf-input, body.osf .osf-field[data-invalid] .osf-select, body.osf .osf-field[data-invalid] .osf-textarea { border: 2px solid var(--osf-danger); }
body.osf .osf-check { display: flex; gap: 0.75rem; align-items: flex-start; }
body.osf .osf-check input { width: 1.5rem; height: 1.5rem; margin: 0.1rem 0 0; flex: none; }

/* ---- buttons */
body.osf .osf-button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--osf-control-height); box-sizing: border-box;
  padding: 12px 24px; font: 400 14px/1.4 var(--osf-font-mono); letter-spacing: 0.025em; border-radius: var(--osf-radius-control); border: 1px solid var(--osf-button);
  background: var(--osf-button); color: #ffffff; text-decoration: none; cursor: pointer; }
body.osf .osf-button:hover { background: var(--osf-button-hover); border-color: var(--osf-button-hover); }
body.osf .osf-button[data-variant='secondary'] { background: var(--osf-canvas); color: var(--osf-text); border-color: var(--osf-border-control); }
body.osf .osf-button[data-variant='secondary']:hover { background: var(--osf-surface-selected); }
body.osf .osf-button[data-variant='link'] { background: none; border-color: transparent; color: var(--osf-link); text-decoration: underline; padding-left: 0; padding-right: 0; }
body.osf .osf-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 1.5rem 0; }
body.osf .osf-inline-form { display: inline; margin: 0; }

/* ---- tabs: navigation between pages, each with its own URL */
body.osf .osf-tabs { border-bottom: 1px solid var(--osf-border); margin: 1.5rem 0 2rem; }
body.osf .osf-tabs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
body.osf .osf-tabs a { display: inline-block; padding: 0.75rem 0; color: var(--osf-text); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
body.osf .osf-tabs a[aria-current='page'] { border-bottom-color: var(--osf-text); font-weight: 600; }
body.osf .osf-tabs a:hover { border-bottom-color: var(--osf-border-control); }

/* ---- edition selector */
body.osf .osf-edition-selector { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: end; margin: 0 0 1.5rem; }
body.osf .osf-edition-selector label { flex-basis: 100%; font-weight: 600; }
body.osf .osf-edition-selector .osf-select { width: auto; max-width: 100%; }

/* ---- empty and unavailable states */
body.osf .osf-empty { border: 1px dashed var(--osf-border-control); border-radius: var(--osf-radius-major); padding: 2rem 1.5rem; margin: 1.5rem 0; background: var(--osf-surface); }
body.osf .osf-empty h2, body.osf .osf-empty h3 { margin-top: 0; }

/* ---- providers on the identities page */
body.osf .osf-providers { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
body.osf .osf-provider { border: 1px solid var(--osf-border); border-radius: var(--osf-radius-panel); padding: 1.1rem 1.25rem; background: var(--osf-canvas);
  display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; align-items: start; }
body.osf .osf-provider[data-state='unavailable'] { background: var(--osf-surface); }
body.osf .osf-provider h3 { margin: 0; font-size: 1.125rem; }
body.osf .osf-provider-body { grid-column: 1 / 3; }
body.osf .osf-provider-body > :first-child { margin-top: 0; }
body.osf .osf-provider-body > :last-child { margin-bottom: 0; }
@media (max-width: 760px) { body.osf .osf-provider { grid-template-columns: 1fr; } body.osf .osf-provider .osf-tag { justify-self: start; } body.osf .osf-provider-body { grid-column: 1; } }

/* ---- the public edition */
body.osf .osf-edition-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--osf-context); gap: var(--osf-review-gap); }
/* minmax(0, 1fr), not 1fr: a plain 1fr column grows to its widest content (a budget table),
   and the table's own scroll box would never be used. */
@media (max-width: 1100px) { body.osf .osf-edition-layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }
body.osf .osf-edition-text { max-width: var(--osf-measure); }
body.osf .osf-claim { scroll-margin-top: 1rem; }
/* pre-wrap, not pre-line: an author's indentation (a legacy workplan's sub-points) is part of
   the published text and its digest, so the page shows it. */
body.osf .osf-claim p, body.osf .osf-legacy-text { white-space: pre-wrap; overflow-wrap: anywhere; }
body.osf .osf-attribution { margin: 1rem 0 1.5rem; }
/* In a narrow column a key beside its value leaves the value no room: stack them. */
body.osf aside .osf-summary { grid-template-columns: 1fr; gap: 0.1rem; }
body.osf aside .osf-summary dd { margin-bottom: 0.6rem; }
body.osf table.osf-table caption { text-align: left; padding-bottom: 0.4rem; }
body.osf .osf-milestones { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
body.osf .osf-milestone { border: 1px solid var(--osf-border); border-radius: var(--osf-radius-panel); padding: 1rem 1.25rem; }
body.osf .osf-milestone h3 { margin: 0 0 0.5rem; font-size: 1.1rem; }
body.osf .osf-table-wrap { overflow-x: auto; }
body.osf table.osf-table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
body.osf table.osf-table th, body.osf table.osf-table td { text-align: left; vertical-align: top; padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid var(--osf-border); }
body.osf table.osf-table td.osf-amount, body.osf table.osf-table th.osf-amount { text-align: right; font-family: var(--osf-font-mono); white-space: nowrap; }
body.osf .osf-mount { min-height: 1rem; }

/* ---- component reference */
body.osf .osf-specimen { border: 1px dashed var(--osf-border); border-radius: var(--osf-radius-panel); padding: 1.25rem; margin: 0.75rem 0 2rem; }

/* ---- pages written before this layout (layout() in server/views/pages.js)
   They keep their markup and their class names, which their scripts and tests rely on, and
   take the OSF tokens here: the same type, controls, buttons, panels and state colours as the
   rest of the portal. Moved from app.css on 2026-10-14. */
body.osf .osf-legacy h1 { font-size: var(--osf-size-heading); line-height: 1.05; font-weight: 500; margin: 0 0 1.5rem; letter-spacing: -0.025em; }
body.osf .osf-legacy code { word-break: break-all; }
/* A call id in a heading reads as part of it, and breaks only where it must. */
body.osf .osf-legacy h1 code { font-size: 0.6em; word-break: normal; overflow-wrap: anywhere; }

body.osf .osf-legacy button, body.osf .osf-legacy .button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--osf-control-height);
  box-sizing: border-box; padding: 12px 24px; font: 400 14px/1.4 var(--osf-font-mono); letter-spacing: 0.025em; border-radius: var(--osf-radius-control);
  border: 1px solid var(--osf-button); background: var(--osf-button); color: #ffffff; text-decoration: none; cursor: pointer; }
body.osf .osf-legacy button:hover, body.osf .osf-legacy .button:hover { background: var(--osf-button-hover); border-color: var(--osf-button-hover); }
body.osf .osf-legacy button.secondary { background: var(--osf-canvas); color: var(--osf-text); border-color: var(--osf-border-control); }
body.osf .osf-legacy button.secondary:hover { background: var(--osf-surface-selected); }
body.osf .osf-legacy button[disabled] { opacity: 0.6; cursor: progress; }
body.osf .osf-legacy button.link { display: inline; min-height: 0; background: none; border: none; color: var(--osf-link); padding: 0; text-decoration: underline;
  font: inherit; letter-spacing: normal; }

body.osf .osf-legacy .sign-in label, body.osf .osf-legacy .field label, body.osf .osf-legacy .field legend { display: block; font-weight: 600; margin-bottom: 0.3rem; }
body.osf .osf-legacy input[type='email'], body.osf .osf-legacy input[type='text'], body.osf .osf-legacy input[type='url'], body.osf .osf-legacy input[type='number'],
body.osf .osf-legacy select, body.osf .osf-legacy textarea { box-sizing: border-box; width: 100%; max-width: 36rem; min-height: var(--osf-control-height);
  font: inherit; font-weight: normal; color: var(--osf-text); background: var(--osf-canvas); border: 1px solid var(--osf-border-control);
  border-radius: var(--osf-radius-control); padding: 0.6rem 0.75rem; margin-top: 0.3rem; }
body.osf .osf-legacy textarea { max-width: var(--osf-measure); resize: vertical; }
body.osf .osf-legacy .field { margin: 0 0 1.5rem; border: 0; padding: 0; min-width: 0; }
body.osf .osf-legacy .field .choice { display: flex; gap: 0.75rem; align-items: flex-start; font-weight: normal; margin: 0.3rem 0; }
body.osf .osf-legacy .field .choice input, body.osf .osf-legacy .criterion .choice input { width: 1.25rem; height: 1.25rem; min-height: 0; margin: 0.15rem 0 0; flex: none; }
body.osf .osf-legacy .field.invalid input, body.osf .osf-legacy .field.invalid textarea { border: 2px solid var(--osf-danger); }

body.osf .osf-legacy .hint, body.osf .osf-legacy .help, body.osf .osf-legacy .counter, body.osf .osf-legacy .account,
body.osf .osf-legacy .packet-code, body.osf .osf-legacy .ror-chosen, body.osf .osf-legacy .ror-suggestions .also, body.osf .osf-legacy .save-state { color: var(--osf-text-muted); }
body.osf .osf-legacy .counter, body.osf .osf-legacy .save-state { font-size: var(--osf-size-meta); margin: 0.2rem 0 0; }
body.osf .osf-legacy .save-state { text-align: right; margin: 0 0 0.5rem; }
body.osf .osf-legacy .counter.over, body.osf .osf-legacy .problems, body.osf .osf-legacy .conflict, body.osf .osf-legacy .failure, body.osf .osf-legacy .failed,
body.osf .osf-legacy .step-problems, body.osf .osf-legacy .save-state[data-state='error'], body.osf .osf-legacy .save-state[data-state='conflict'],
body.osf .osf-legacy .state[data-state='check_failed'] strong, body.osf .osf-legacy table.rules tr.failed td { color: var(--osf-danger); }
body.osf .osf-legacy .problems { margin: 0.3rem 0 0; padding-left: 1.2rem; font-size: 0.95rem; }
/* Empty but present, never display:none: a live region that appears from nothing is often
   not announced, and the live rule hints are written into these lists. */
body.osf .osf-legacy .problems:empty { margin: 0; padding: 0; }
body.osf .osf-legacy .step-problems { margin: 0.5rem 0; }
body.osf .osf-legacy .step-problems:empty { display: none; }
/* Success and warning are border colours only (the tokens above): a passed check, a notice and
   a flagged rule keep the text colour and say what they are in words. */

/* Panels: the call, the receipt, the review packet, declarations and disclosures. */
body.osf .osf-legacy .call, body.osf .osf-legacy .receipt, body.osf .osf-legacy .packet, body.osf .osf-legacy .declaration, body.osf .osf-legacy .identity,
body.osf .osf-legacy .criterion, body.osf .osf-legacy .new-call, body.osf .osf-legacy pre.recipe { background: var(--osf-surface); border: 1px solid var(--osf-border);
  border-radius: var(--osf-radius-panel); padding: 1rem 1.25rem; margin: 1.25rem 0; }
body.osf .osf-legacy .disclosure, body.osf .osf-legacy .unsubmitted, body.osf .osf-legacy .identity.missing { border: 1px solid var(--osf-border-control);
  border-left: 6px solid var(--osf-warning); border-radius: var(--osf-radius-control); padding: 0.9rem 1.1rem; margin: 1.25rem 0; background: var(--osf-canvas); }
body.osf .osf-legacy .new-call { border-left: 6px solid var(--osf-link); }
body.osf .osf-legacy .receipt dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; }
body.osf .osf-legacy .receipt dt { color: var(--osf-text-muted); }
body.osf .osf-legacy .receipt dd { margin: 0; }
body.osf .osf-legacy .packet h3 { font-family: var(--osf-font-mono); font-size: var(--osf-size-meta); letter-spacing: 0.025em; color: var(--osf-text-muted); margin: 1rem 0 0.3rem; }
body.osf .osf-legacy .packet-text { white-space: pre-line; }
body.osf .osf-legacy .criterion .choice { display: inline-flex; gap: 0.5rem; margin-right: 1rem; }
body.osf .osf-legacy pre.recipe { white-space: pre-wrap; font-family: var(--osf-font-mono); font-size: var(--osf-size-meta); }

/* The application form's steps and its own navigation. */
body.osf .osf-legacy .steps { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
body.osf .osf-legacy .steps button { min-height: 0; background: var(--osf-canvas); color: var(--osf-text); border: 1px solid var(--osf-border-control); padding: 0.35rem 0.7rem; }
body.osf .osf-legacy .steps .current button { border-width: 2px; font-weight: 700; }
body.osf .osf-legacy .step-count { color: var(--osf-link); font-family: var(--osf-font-mono); font-size: var(--osf-size-meta); letter-spacing: 0.025em; margin: 0; }
body.osf .osf-legacy .step-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
body.osf .osf-legacy .nav { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
body.osf .osf-legacy .conflict button { margin: 0.3rem 0.5rem 0.3rem 0; }
body.osf .osf-legacy nav.calls ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.8rem; }
body.osf .osf-legacy .ror-suggestions ul { list-style: none; margin: 0.25rem 0 0; padding: 0; }
body.osf .osf-legacy .ror-suggestions li { margin: 0.25rem 0; }

/* Tables of rules and results. A rule id breaks at its hyphens, not mid-word. */
body.osf .osf-legacy table.rules { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
body.osf .osf-legacy table.rules th, body.osf .osf-legacy table.rules td { text-align: left; vertical-align: top; padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid var(--osf-border); }
body.osf .osf-legacy table.rule-list td:first-child code { word-break: normal; }

/* Off screen rather than display:none. The honeypot is filled by what fills hidden fields and
   ignored by people and their assistive technology; the default action must stay the button
   Enter presses. */
body.osf .osf-legacy .hp, body.osf .osf-legacy .default-action { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Optional Theoria entry points in the application form and comparison flow. */
body.osf .osf-legacy .theoria-entry { margin: 1.5rem 0; padding: 0.8rem 1rem; border: 1px solid var(--osf-border); border-radius: var(--osf-radius-panel); background: var(--osf-canvas); }
body.osf .osf-legacy .theoria-flow { padding-left: 1.5rem; }
body.osf .osf-legacy .theoria-flow li { margin: 0.4rem 0; }