/* ==========================================================================
   STARK Web — interface (ported from STARK Desktop v1.0.0 styles.css)
   --------------------------------------------------------------------------
   Web changes are limited to: no Electron title-bar strip, no app-region
   rules, and the additions at the end of the file (file input, health page,
   footer). Tokens, themes and components are unchanged.
   --------------------------------------------------------------------------
   One token layer, two themes. Every colour in the app comes from a custom
   property defined in the two blocks at the top; nothing below them hard-codes
   a colour. That is what lets the theme switch instantly and lets the light
   and dark designs stay genuinely different rather than one being an inverted
   copy of the other.

   The visual direction is restrained on purpose: one accent colour, three
   status colours, a small type scale, shallow shadows, and translucency used
   only on surfaces that sit above other content. Where the platform cannot
   blur, every glass surface falls back to an opaque one and the layout is
   unchanged.
   ========================================================================== */

/* -------------------------------------------------------------- foundation */

:root {
  /* Native on both platforms, with real fallbacks. */
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text', 'Segoe UI',
    system-ui, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono',
    monospace;

  /* Type scale. Hierarchy comes from size and weight, not from colour. */
  --text-xs: 11.5px;
  --text-sm: 12.5px;
  --text-base: 13.5px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 21px;
  --text-2xl: 28px;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi: 600;

  /* Spacing. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;
  --sp-6: 30px;
  --sp-7: 40px;
  --sp-8: 56px;

  /* Radii — soft, not cartoonish. */
  --radius-sm: 7px;
  --radius-md: 11px;
  --radius-lg: 15px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --content-width: 980px;
  --setup-width: 680px;

  /* Motion. Short and linear-ish; nothing bounces. */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --fast: 120ms;
  --medium: 220ms;

  --blur: 24px;
}

/* ------------------------------------------------------------ light theme */

:root,
:root[data-theme='light'] {
  color-scheme: light;

  --canvas: #f4f4f6;
  --canvas-tint-a: rgba(0, 106, 214, 0.05);
  --canvas-tint-b: rgba(88, 86, 214, 0.045);

  --surface: rgba(255, 255, 255, 0.72);
  --surface-opaque: #ffffff;
  --surface-raised: rgba(255, 255, 255, 0.86);
  --surface-sunken: rgba(9, 12, 20, 0.035);
  --surface-hover: rgba(9, 12, 20, 0.045);

  --text: #16181d;
  --text-secondary: #5d6068;
  --text-tertiary: #6b6e77;

  --border: rgba(9, 12, 20, 0.1);
  --border-strong: rgba(9, 12, 20, 0.16);

  --accent: #0063cc;
  --accent-hover: #0057b4;
  --accent-text: #ffffff;
  --accent-soft: rgba(0, 99, 204, 0.1);

  --pass: #17663f;
  --pass-soft: rgba(23, 102, 63, 0.1);
  --review: #8a5300;
  --review-soft: rgba(138, 83, 0, 0.1);
  --fail: #b3281f;
  --fail-soft: rgba(179, 40, 31, 0.09);

  --shadow-sm: 0 1px 2px rgba(9, 12, 20, 0.05);
  --shadow-md: 0 1px 2px rgba(9, 12, 20, 0.04), 0 6px 16px rgba(9, 12, 20, 0.06);
  --shadow-lg: 0 1px 3px rgba(9, 12, 20, 0.05), 0 12px 32px rgba(9, 12, 20, 0.08);
  --ring: 0 0 0 3.5px rgba(0, 99, 204, 0.3);
}

/* ------------------------------------------------------------- dark theme */

:root[data-theme='dark'] {
  color-scheme: dark;

  --canvas: #0f1013;
  --canvas-tint-a: rgba(64, 140, 255, 0.07);
  --canvas-tint-b: rgba(128, 110, 255, 0.055);

  --surface: rgba(32, 35, 42, 0.72);
  --surface-opaque: #1b1d23;
  --surface-raised: rgba(40, 44, 52, 0.82);
  --surface-sunken: rgba(255, 255, 255, 0.045);
  --surface-hover: rgba(255, 255, 255, 0.065);

  --text: #f2f3f5;
  --text-secondary: #a2a5ad;
  --text-tertiary: #888b94;

  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.17);

  --accent: #3b8cff;
  --accent-hover: #5a9dff;
  --accent-text: #08121f;
  --accent-soft: rgba(59, 140, 255, 0.16);

  --pass: #46cf8b;
  --pass-soft: rgba(70, 207, 139, 0.15);
  --review: #f5bb42;
  --review-soft: rgba(245, 187, 66, 0.15);
  --fail: #ff7a6e;
  --fail-soft: rgba(255, 122, 110, 0.15);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 1px 3px rgba(0, 0, 0, 0.34), 0 14px 36px rgba(0, 0, 0, 0.42);
  --ring: 0 0 0 3.5px rgba(59, 140, 255, 0.4);
}

/* Before the window's script runs — and for anyone who clears the preference —
   follow the operating system rather than guessing. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --canvas: #0f1013;
    --canvas-tint-a: rgba(64, 140, 255, 0.07);
    --canvas-tint-b: rgba(128, 110, 255, 0.055);

    --surface: rgba(32, 35, 42, 0.72);
    --surface-opaque: #1b1d23;
    --surface-raised: rgba(40, 44, 52, 0.82);
    --surface-sunken: rgba(255, 255, 255, 0.045);
    --surface-hover: rgba(255, 255, 255, 0.065);

    --text: #f2f3f5;
    --text-secondary: #a2a5ad;
    --text-tertiary: #888b94;

    --border: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.17);

    --accent: #3b8cff;
    --accent-hover: #5a9dff;
    --accent-text: #08121f;
    --accent-soft: rgba(59, 140, 255, 0.16);

    --pass: #46cf8b;
    --pass-soft: rgba(70, 207, 139, 0.15);
    --review: #f5bb42;
    --review-soft: rgba(245, 187, 66, 0.15);
    --fail: #ff7a6e;
    --fail-soft: rgba(255, 122, 110, 0.15);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.32);
    --shadow-lg: 0 1px 3px rgba(0, 0, 0, 0.34), 0 14px 36px rgba(0, 0, 0, 0.42);
    --ring: 0 0 0 3.5px rgba(59, 140, 255, 0.4);
  }
}

/* ----------------------------------------------------------------- reset */

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

/* The browser's own stylesheet sets [hidden] with a lower specificity than any
   `display` rule written here, so without this a hidden section reappears the
   moment it is given a layout. Two real bugs came from exactly that. */
[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  /* A column so the footnote sits at the bottom of the window rather than
     tucked under a short card with dead space beneath it. */
  display: flex;
  flex-direction: column;
  min-height: 100%;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: 1.5;
  color: var(--text);
  background-color: var(--canvas);
  /* Two very faint washes, fixed to the window, so the background has a little
     depth without reading as a gradient. */
  background-image:
    radial-gradient(1100px 620px at 12% -12%, var(--canvas-tint-a), transparent 62%),
    radial-gradient(900px 560px at 108% 4%, var(--canvas-tint-b), transparent 58%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color var(--medium) var(--ease), color var(--medium) var(--ease);
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  font-weight: var(--weight-semi);
  letter-spacing: -0.012em;
  line-height: 1.3;
}

p {
  margin: 0;
}

button,
input {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

/* Buttons set a box-shadow of their own at the same specificity as the rule
   above, and later in the file, so they would silently win and leave keyboard
   users with no visible focus at all. These put the ring back, and are placed
   with the reset so nothing further down can override them in turn. */
.primary:focus-visible,
.secondary:focus-visible,
.theme-option:focus-visible,
.dropzone:focus-visible,
.diagnostics summary:focus-visible {
  box-shadow: var(--ring);
}

/* Nothing animates until the window has painted once. Without this the saved
   theme is applied a frame after load and the app visibly fades from one theme
   into the other every time it opens. */
:root:not([data-theme-ready]) *,
:root:not([data-theme-ready]) *::before,
:root:not([data-theme-ready]) *::after {
  transition: none !important;
  animation: none !important;
}

/* ------------------------------------------------------------ glass mixin */

/*  The look: a translucent surface with a hairline border and a shallow
    shadow. Where backdrop-filter is missing the surface simply becomes
    opaque — same geometry, same contrast, no blur. */
.glass {
  background: var(--surface-opaque);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: var(--surface);
    -webkit-backdrop-filter: saturate(180%) blur(var(--blur));
    backdrop-filter: saturate(180%) blur(var(--blur));
  }
}


/* --------------------------------------------------------------- masthead */

.masthead {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-6) var(--sp-3);
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  transition: background-color var(--medium) var(--ease), border-color var(--medium) var(--ease);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-sm);
}

.brand h1 {
  font-size: var(--text-md);
  letter-spacing: -0.015em;
}

.brand p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.masthead-right {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: none;
}

.badge {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  white-space: nowrap;
}

/* ---------------------------------------------------------- theme switch */

/* A two-option segmented control. The selected side is filled and the thumb
   slides between them, so the current theme is readable at a glance rather
   than being implied by an icon that means different things to different
   people. */
.theme-switch {
  position: relative;
  display: flex;
  flex: none;
  padding: 2px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
}

.theme-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(50% - 2px);
  height: calc(100% - 4px);
  border-radius: var(--radius-pill);
  background: var(--surface-opaque);
  box-shadow: var(--shadow-sm);
  transition: transform var(--medium) var(--ease);
  pointer-events: none;
}

:root[data-theme='dark'] .theme-thumb {
  transform: translateX(100%);
}

.theme-option {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: none;
  background: none;
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition: color var(--fast) var(--ease);
}

.theme-option:hover {
  color: var(--text);
}

.theme-option[aria-checked='true'] {
  color: var(--text);
}

.theme-option svg {
  width: 13px;
  height: 13px;
  flex: none;
}

/* ------------------------------------------------------------------ main */

main {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-5) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex: 1;
}

/* The single-card screens — the form, the progress list, a failure — are
   centred in whatever room the window has. The report is not: it is long, and
   it should start at the top. */
main:has(> #setup:not([hidden])),
main:has(> #progress:not([hidden])),
main:has(> #failure:not([hidden])) {
  justify-content: center;
}

.card {
  padding: var(--sp-5);
  border-radius: var(--radius-lg);
  background: var(--surface-opaque);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card {
    background: var(--surface);
    -webkit-backdrop-filter: saturate(180%) blur(var(--blur));
    backdrop-filter: saturate(180%) blur(var(--blur));
  }
}

/* --------------------------------------------------------------- the form */

.setup {
  width: 100%;
  max-width: var(--setup-width);
  margin: 0 auto;
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  box-shadow: var(--shadow-lg);
}

.setup-intro {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: var(--sp-1);
}

.setup-intro h2 {
  font-size: var(--text-2xl);
  letter-spacing: -0.028em;
}

.setup-intro p {
  color: var(--text-secondary);
  font-size: var(--text-md);
  max-width: 46ch;
  margin: 0 auto;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

.field-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--text-secondary);
  letter-spacing: 0.005em;
}

.field-hint {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* Drop zone */

.dropzone {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-5);
  text-align: left;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease),
    transform var(--fast) var(--ease);
}

.dropzone:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.dropzone:active {
  transform: scale(0.995);
}

.dropzone.dragging {
  border-style: solid;
  border-color: var(--accent);
  background: var(--accent-soft);
}

.dropzone.filled {
  border-style: solid;
  border-color: var(--border-strong);
}

.dropzone-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 10px;
  background: var(--surface-opaque);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.dropzone-icon svg {
  width: 18px;
  height: 18px;
}

.dropzone:hover .dropzone-icon,
.dropzone.dragging .dropzone-icon,
.dropzone.filled .dropzone-icon {
  color: var(--accent);
  border-color: var(--accent);
}

.dropzone-empty,
.dropzone-filled {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dropzone-empty strong,
.dropzone-filled strong {
  font-size: var(--text-base);
  font-weight: var(--weight-semi);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropzone-empty span,
.dropzone-filled span {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Text input */

input[type='url'] {
  width: 100%;
  padding: 11px var(--sp-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--surface-sunken);
  color: var(--text);
  font-size: var(--text-base);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease),
    background-color var(--fast) var(--ease);
}

input[type='url']::placeholder {
  color: var(--text-tertiary);
}

input[type='url']:hover {
  border-color: var(--text-tertiary);
}

input[type='url']:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

/* Buttons */

.actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-1);
}

.primary,
.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 8px var(--sp-4);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  border: 1px solid transparent;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease),
    transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
}

.primary {
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: var(--shadow-sm);
}

.primary:hover:not(:disabled) {
  background: var(--accent-hover);
}

.primary:active:not(:disabled) {
  transform: scale(0.985);
}

.primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.setup .primary {
  align-self: stretch;
  min-height: 40px;
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
}

.secondary {
  background: var(--surface-sunken);
  border-color: var(--border);
  color: var(--text);
}

.secondary:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.secondary:active {
  transform: scale(0.985);
}

.error {
  padding: 10px var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--fail-soft);
  color: var(--fail);
  font-size: var(--text-sm);
}

/* --------------------------------------------------------------- progress */

.progress {
  max-width: var(--setup-width);
  width: 100%;
  margin: 0 auto;
  padding: var(--sp-6);
}

.progress h2 {
  font-size: var(--text-lg);
  margin-bottom: var(--sp-4);
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.steps li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: 7px var(--sp-2);
  border-radius: var(--radius-sm);
  transition: opacity var(--medium) var(--ease);
}

.steps li.pending {
  opacity: 0.38;
}

.step-mark {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  font-size: 10px;
  font-weight: var(--weight-semi);
  line-height: 1;
}

.step-mark.running {
  border-color: var(--accent);
  border-right-color: transparent;
  animation: spin 700ms linear infinite;
}

.step-mark.done {
  background: var(--pass-soft);
  border-color: transparent;
  color: var(--pass);
}

.step-mark.warning {
  background: var(--review-soft);
  border-color: transparent;
  color: var(--review);
}

.step-mark.failed {
  background: var(--fail-soft);
  border-color: transparent;
  color: var(--fail);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.step-label {
  font-size: var(--text-base);
}

.step-detail {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ---------------------------------------------------------------- overall */

.overall {
  padding: var(--sp-6);
  box-shadow: var(--shadow-lg);
}

.overall-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.overall-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px var(--sp-4) 7px var(--sp-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  letter-spacing: 0.01em;
  background: var(--surface-sunken);
  color: var(--text-secondary);
}

.status-pill.PASS {
  background: var(--pass-soft);
  color: var(--pass);
}

.status-pill.REVIEW {
  background: var(--review-soft);
  color: var(--review);
}

.status-pill.FAIL {
  background: var(--fail-soft);
  color: var(--fail);
}

.overall-actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

#page-title {
  margin-top: var(--sp-5);
  font-size: var(--text-xl);
  letter-spacing: -0.022em;
}

.page-url {
  display: inline-block;
  margin-top: 3px;
  color: var(--accent);
  text-decoration: none;
  font-size: var(--text-sm);
  word-break: break-all;
}

.page-url:hover {
  text-decoration: underline;
}

.overall-plain {
  margin-top: var(--sp-3);
  color: var(--text-secondary);
  font-size: var(--text-md);
  line-height: 1.55;
  max-width: 72ch;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--sp-2);
  margin: var(--sp-5) 0 0;
  padding: 0;
}

.stats > div {
  padding: var(--sp-3);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.stats dt {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-weight: var(--weight-medium);
}

.stats dd {
  margin: 5px 0 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semi);
  letter-spacing: -0.015em;
}

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

.checks {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.check {
  border-radius: var(--radius-lg);
  background: var(--surface-opaque);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .check {
    background: var(--surface);
    -webkit-backdrop-filter: saturate(180%) blur(var(--blur));
    backdrop-filter: saturate(180%) blur(var(--blur));
  }
}

.check:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.check-head {
  display: flex;
  /* Top-aligned, not centred: on a card with a three-line summary a centred
     glyph drifts away from the title it belongs to. */
  align-items: flex-start;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  background: none;
  border: none;
  text-align: left;
  transition: background-color var(--fast) var(--ease);
}

.check-head:hover {
  background: var(--surface-hover);
}

.check-head:focus-visible {
  box-shadow: inset var(--ring);
  border-radius: 0;
}

/* The status glyph — ✓ / ! / × — is the first thing read on each row. */
.check-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: -1px;
  flex: none;
  border-radius: 50%;
  font-size: 13px;
  font-weight: var(--weight-semi);
  line-height: 1;
}

.check-icon.PASS {
  background: var(--pass-soft);
  color: var(--pass);
}

.check-icon.REVIEW {
  background: var(--review-soft);
  color: var(--review);
}

.check-icon.FAIL {
  background: var(--fail-soft);
  color: var(--fail);
}

.check-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.check-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.check-number {
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  color: var(--text-tertiary);
  letter-spacing: 0.035em;
  font-variant-numeric: tabular-nums;
}

.check-title h3 {
  font-size: var(--text-md);
  letter-spacing: -0.015em;
}

.mini-pill {
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: 0.035em;
  background: var(--surface-sunken);
  color: var(--text-secondary);
}

.mini-pill.PASS {
  background: var(--pass-soft);
  color: var(--pass);
}

.mini-pill.REVIEW {
  background: var(--review-soft);
  color: var(--review);
}

.mini-pill.FAIL {
  background: var(--fail-soft);
  color: var(--fail);
}

.check-summary {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.5;
}

.counters {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: var(--sp-2);
}

.counters span {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.chevron {
  flex: none;
  margin-top: 1px;
  color: var(--text-tertiary);
  font-size: var(--text-lg);
  line-height: 1;
  transition: transform var(--medium) var(--ease), color var(--fast) var(--ease);
}

.check.open .chevron {
  transform: rotate(90deg);
}

.check-head:hover .chevron {
  color: var(--text-secondary);
}

.check-detail {
  padding: var(--sp-1) var(--sp-5) var(--sp-5);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  animation: reveal var(--medium) var(--ease);
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
}

.nothing {
  padding-top: var(--sp-3);
  color: var(--text-secondary);
  font-size: var(--text-base);
}

/* ---------------------------------------------------------------- findings */

/*  The three kinds of item are told apart by the colour of a left rule, a
    label, and where they sit — not by the background of the whole block, which
    would make a long report look like a warning sign. */
.finding {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  border-left: 2.5px solid var(--border-strong);
}

.finding:has(.tag.CONFIRMED) {
  border-left-color: var(--fail);
}

.finding:has(.tag.NEEDS_REVIEW) {
  border-left-color: var(--review);
}

.finding-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

.finding-head h4 {
  font-size: var(--text-base);
  font-weight: var(--weight-semi);
  min-width: 0;
  overflow-wrap: anywhere;
}

.tag {
  flex: none;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.tag.CONFIRMED {
  background: var(--fail-soft);
  color: var(--fail);
}

.tag.NEEDS_REVIEW {
  background: var(--review-soft);
  color: var(--review);
}

.finding-detail {
  margin-top: 5px;
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.5;
}

.rows {
  display: grid;
  grid-template-columns: minmax(110px, auto) 1fr;
  gap: 3px var(--sp-4);
  margin: var(--sp-3) 0 0;
  font-size: var(--text-sm);
}

.rows dt {
  color: var(--text-tertiary);
}

.rows dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.quote {
  display: inline;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--surface-hover);
  font-family: var(--font-mono);
  font-size: 0.94em;
}

.review-note {
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.review-note strong {
  color: var(--review);
  font-weight: var(--weight-semi);
}

/* Unresolved items, and notes */

.unverified,
.notes-block {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.unverified {
  border-left: 2.5px solid var(--review);
}

/* Notes are deliberately the quietest block on the card: they changed nothing. */
.notes-block {
  border-left: 2.5px solid var(--border-strong);
}

.unverified h5,
.notes-block h5 {
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.045em;
  color: var(--text-tertiary);
  margin-bottom: var(--sp-2);
}

.unverified h5 {
  color: var(--review);
}

.unverified ul,
.notes-block ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.unverified strong,
.notes-block strong {
  display: block;
  color: var(--text);
  font-weight: var(--weight-medium);
}

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

.list-card h3 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-md);
  margin-bottom: var(--sp-3);
}

.count {
  padding: 1px 9px;
  border-radius: var(--radius-pill);
  background: var(--fail-soft);
  color: var(--fail);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  font-variant-numeric: tabular-nums;
}

.count.review {
  background: var(--review-soft);
  color: var(--review);
}

.count.neutral,
.count.zero {
  background: var(--surface-sunken);
  color: var(--text-tertiary);
}

.notes-caption {
  margin-bottom: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  max-width: 76ch;
  line-height: 1.5;
}

.list-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.list-card li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--border);
  font-size: var(--text-base);
  line-height: 1.5;
}

.list-card li:first-child {
  border-top: none;
  padding-top: 0;
}

.qa-tag {
  flex: none;
  min-width: 38px;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  text-align: center;
  letter-spacing: 0.02em;
}

.note-detail {
  display: block;
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

/* ------------------------------------------------------------ diagnostics */

.diagnostics summary {
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.diagnostics summary::-webkit-details-marker {
  display: none;
}

.diagnostics summary::before {
  content: '›';
  font-size: var(--text-md);
  color: var(--text-tertiary);
  transition: transform var(--medium) var(--ease);
}

.diagnostics[open] summary::before {
  transform: rotate(90deg);
}

.diagnostics dl {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: 0 var(--sp-4);
  margin: var(--sp-4) 0 0;
  font-size: var(--text-sm);
}

.diagnostics dl > div {
  display: contents;
}

.diagnostics dt {
  padding: 5px 0;
  color: var(--text-tertiary);
}

.diagnostics dd {
  margin: 0;
  padding: 5px 0;
  overflow-wrap: anywhere;
}

.warnings {
  grid-column: 1 / -1;
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--review-soft);
  color: var(--review);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* ---------------------------------------------------------------- failure */

.failure {
  max-width: var(--setup-width);
  width: 100%;
  margin: 0 auto;
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: flex-start;
}

.failure h2 {
  font-size: var(--text-lg);
}

.failure p {
  color: var(--text-secondary);
  line-height: 1.55;
}

.failure-hint {
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  font-size: var(--text-sm);
  align-self: stretch;
}

.failure .primary {
  margin-top: var(--sp-2);
}

/* --------------------------------------------------------------- footnote */

.footnote {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--sp-5) var(--sp-7);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* ------------------------------------------------------------ narrow window */

@media (max-width: 760px) {
  .masthead {
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }

  .brand p,
  .badge {
    display: none;
  }

  main {
    padding: var(--sp-5) var(--sp-4) var(--sp-5);
  }

  .setup,
  .progress,
  .overall,
  .failure {
    padding: var(--sp-5);
  }

  .check-head {
    padding: var(--sp-4);
  }

  .check-detail {
    padding: var(--sp-1) var(--sp-4) var(--sp-4);
  }

  .overall-actions {
    width: 100%;
  }

  .overall-actions button {
    flex: 1;
  }

  /* Stacking beats a two-column grid that would leave a 40px value column. */
  .rows,
  .diagnostics dl {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .rows dt,
  .diagnostics dt {
    padding-top: var(--sp-2);
  }

  .rows dd {
    padding-bottom: var(--sp-1);
  }
}

@media (max-width: 460px) {
  .theme-option span {
    display: none;
  }

  .theme-option {
    padding: 5px 10px;
  }
}

/* ----------------------------------------------------------- reduced motion */

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


/* ==========================================================================
   Web additions
   ========================================================================== */

/* The real file input sits behind the drop zone, visually hidden but
   reachable, so the zone keeps the desktop look and keyboard behaviour. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.footnote a {
  color: inherit;
}

.page-url {
  word-break: break-all;
}

/* Health page */
.health {
  width: min(100% - 2 * var(--sp-4), var(--content-width));
  margin: var(--sp-6) auto;
}

.health table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--sp-3);
  font-size: var(--text-sm);
}

.health th,
.health td {
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.health td.ok {
  color: var(--pass);
  font-weight: var(--weight-semi);
}

.health td.warn {
  color: var(--review);
  font-weight: var(--weight-semi);
}

.health td.bad {
  color: var(--fail);
  font-weight: var(--weight-semi);
}

/* ==========================================================================
   Phase 3: History
   Uses the existing tokens only, so both themes work without new colours.
   ========================================================================== */

/* Section links in the masthead: same segmented look as the theme switch. */
.nav {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
}

.nav-link {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}

.nav-link:hover {
  color: var(--text);
}

.nav-link[aria-current='page'] {
  color: var(--text);
  background: var(--surface-opaque);
  box-shadow: var(--shadow-sm);
}

/* Links styled as the existing buttons. */
.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
}

.button-link.disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* "Saved to History" / "Not saved" line on a finished run. */
.history-status {
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.history-status.saved {
  background: var(--pass-soft);
  color: var(--pass);
}

.history-status.not-saved {
  background: var(--review-soft);
  color: var(--review);
}

.history-status a {
  color: inherit;
  font-weight: var(--weight-semi);
}

/* History list */
.history-main {
  max-width: 1180px;
}

.history-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.history-intro h2 {
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
}

.history-intro p {
  margin-top: var(--sp-1);
  color: var(--text-secondary);
  font-size: var(--text-base);
}

.history-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}

.history-filters input[type='search'],
.history-filters select {
  height: 34px;
  padding: 0 var(--sp-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-opaque);
  color: var(--text);
  font: inherit;
  font-size: var(--text-base);
}

.history-filters input[type='search'] {
  flex: 1 1 280px;
  min-width: 0;
}

.history-filters input[type='search']:focus,
.history-filters select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.history-scope a,
.history-empty a {
  color: var(--accent);
}

.history-empty h3 {
  font-size: var(--text-md);
  margin-bottom: var(--sp-1);
}

.history-empty p {
  color: var(--text-secondary);
}

.history-count {
  margin-bottom: var(--sp-3);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.table-wrap {
  overflow-x: auto;
}

.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.history-table th,
.history-table td {
  padding: var(--sp-3) var(--sp-2);
  border-top: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.history-table thead th {
  border-top: none;
  padding-top: 0;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.history-table .num {
  text-align: center;
}

.sort-link {
  color: inherit;
  text-decoration: none;
}

.sort-link:hover,
.sort-link.active {
  color: var(--text);
}

.cell-date time {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cell-date time span {
  color: var(--text-tertiary);
}

.cell-page {
  min-width: 240px;
  max-width: 420px;
}

.history-title {
  display: block;
  color: var(--text);
  font-weight: var(--weight-medium);
  font-size: var(--text-base);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.history-title:hover {
  color: var(--accent);
}

.history-url {
  display: block;
  margin-top: 2px;
  color: var(--text-tertiary);
  overflow-wrap: anywhere;
}

.cell-file {
  max-width: 220px;
  overflow-wrap: anywhere;
  color: var(--text-secondary);
}

.cell-open {
  text-align: right;
}

.history-table .count {
  display: inline-block;
  min-width: 30px;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

.pager-where {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

/* A saved report */
.saved-banner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.saved-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.saved-when {
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
}

.saved-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.saved-details summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.saved-details dl {
  display: grid;
  grid-template-columns: minmax(150px, auto) 1fr;
  gap: 0 var(--sp-4);
  margin: var(--sp-3) 0;
  font-size: var(--text-sm);
}

.saved-details dl > div {
  display: contents;
}

.saved-details dt {
  padding: 4px 0;
  color: var(--text-tertiary);
}

.saved-details dd {
  margin: 0;
  padding: 4px 0;
  overflow-wrap: anywhere;
}

.saved-details code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.history-error {
  margin: 0;
  max-width: none;
}

/* Narrow windows: each saved run becomes a small card instead of a wide row. */
@media (max-width: 760px) {
  .nav-link {
    padding: 5px 9px;
  }

  .history-table thead {
    display: none;
  }

  .history-table,
  .history-table tbody,
  .history-table tr,
  .history-table td {
    display: block;
    width: 100%;
    max-width: none;
  }

  .history-table tr {
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--border);
  }

  .history-table td {
    border: none;
    padding: 2px 0;
    text-align: left;
  }

  .history-table td.num {
    display: inline-block;
    width: auto;
    margin-right: var(--sp-3);
  }

  .history-table td.num::before {
    content: attr(data-label) ': ';
    color: var(--text-tertiary);
  }

  .cell-date time {
    flex-direction: row;
    gap: var(--sp-2);
  }

  .cell-open {
    text-align: left;
    padding-top: var(--sp-2) !important;
  }

  .saved-details dl {
    grid-template-columns: 1fr;
  }
}

/* Very narrow windows: the section links move under the brand instead of
   squeezing the app name onto three lines. */
@media (max-width: 560px) {
  .masthead {
    flex-wrap: wrap;
    row-gap: var(--sp-2);
  }

  .brand h1 {
    white-space: nowrap;
  }

  .masthead-right {
    width: 100%;
    justify-content: space-between;
  }
}

/* ==========================================================================
   Phase 4: Run again
   Existing tokens only, so Light and Dark (and the system setting) work
   without new colours.
   ========================================================================== */

/* The "new QA run" banner at the top of the prefilled form. */
.rerun-banner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  border: 1px solid var(--border);
}

.rerun-kicker {
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rerun-text {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text);
}

.rerun-text .mini-pill {
  vertical-align: 1px;
}

.rerun-link,
.rerun-original a {
  align-self: flex-start;
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

/* Original file name, for reference, under the drop zone. */
.rerun-original {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.rerun-original strong {
  color: var(--text);
  font-weight: var(--weight-semi);
}

.rerun-original-size {
  color: var(--text-tertiary);
}

/* Result of comparing the chosen file with the original (never blocking). */
.source-compare {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: 1.5;
  background: var(--surface-sunken);
  color: var(--text-secondary);
}

.source-compare:empty {
  display: none;
}

.source-compare.same {
  background: var(--pass-soft);
  color: var(--pass);
}

.source-compare.differs {
  background: var(--review-soft);
  color: var(--review);
}

.field-error {
  font-size: var(--text-sm);
  color: var(--fail);
}

#url-input[aria-invalid='true'] {
  border-color: var(--fail);
}

/* After a Run again: "New QA run" line under "Saved to History". */
.rerun-status.info {
  background: var(--accent-soft);
  color: var(--text);
}

.rerun-status.info a {
  color: var(--accent);
}

.rerun-status.differs {
  background: var(--review-soft);
  color: var(--review);
}

.rerun-compare {
  display: block;
  margin-top: 2px;
}

/* A saved report: earlier / later runs of the same page. */
.page-runs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}

.page-runs-where {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.page-runs-when {
  color: var(--text-tertiary);
  font-weight: var(--weight-regular, 400);
}

/* History rows: a quiet "Run again" link next to Open. */
.cell-open {
  white-space: nowrap;
}

.rerun-row-link {
  display: inline-block;
  margin-left: var(--sp-2);
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.rerun-row-link:hover {
  text-decoration: underline;
}

@media (max-width: 760px) {
  .cell-open {
    white-space: normal;
  }

  .page-runs-when {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Phase 5: Download PDF. Theme tokens only, so Light and Dark both work.
   -------------------------------------------------------------------------- */

.pdf-button[aria-busy='true'] {
  cursor: progress;
  opacity: 0.75;
}

.pdf-status {
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: 1.5;
  background: var(--fail-soft);
  color: var(--fail);
}

.pdf-status.info {
  background: var(--accent-soft);
  color: var(--text);
}

/* Phase 6: QA #6 image file sizes */

.filesize-block {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  border-left: 2.5px solid var(--border-strong);
}

.filesize-block h5 {
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.045em;
  color: var(--text-tertiary);
  margin-bottom: var(--sp-2);
}

.filesize-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.filesize-list li {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
}

.filesize-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.filesize-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  font-size: var(--text-sm);
}

.filesize-file {
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.filesize-url,
.filesize-meta,
.filesize-method,
.filesize-empty {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  overflow-wrap: anywhere;
}

.filesize-method {
  margin-top: var(--sp-2);
}

.mini-pill.NA {
  background: var(--surface-sunken);
  color: var(--text-secondary);
}

/* ==========================================================================
   Phase 7: Workflow SOP (Irene's nine-step Reusable Content Workflow)
   Existing tokens only, so Light, Dark and the system setting all work
   without new colours. Status colours (pass / review / fail) mean QA results
   everywhere else in STARK, so the steps do not use them. The one exception
   is the data rule, which keeps the red warning treatment of Irene's
   prototype: it is a mandatory rule about patient information.
   ========================================================================== */

.workflow-main {
  max-width: 1180px;
}

.workflow-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.workflow-kicker {
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.workflow-head h2 {
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
}

.workflow-intro {
  color: var(--text-secondary);
  font-size: var(--text-base);
}

.workflow-source {
  margin-top: var(--sp-1);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* The data rule: always visible, above the steps. */
.workflow-rule {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  border-left: 4px solid var(--fail);
  background: var(--fail-soft);
  color: var(--text);
  font-size: var(--text-base);
  line-height: 1.55;
}

.workflow-rule strong {
  color: var(--fail);
  font-weight: var(--weight-semi);
}

.workflow-rule-icon {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 1px;
  color: var(--fail);
}

/* Two columns: the numbered steps, then the chosen step. */
.workflow-layout {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}

.workflow-nav {
  position: sticky;
  top: 76px;
}

.workflow-steps {
  position: relative;
  margin: 0;
  padding: var(--sp-2);
  list-style: none;
  border-radius: var(--radius-lg);
  background: var(--surface-opaque);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

/* The timeline: a hairline that joins the step numbers. */
.workflow-steps::before {
  content: '';
  position: absolute;
  top: 30px;
  bottom: 30px;
  left: calc(var(--sp-2) + 24px);
  width: 1px;
  background: var(--border-strong);
}

.workflow-steps-item + .workflow-steps-item {
  margin-top: 2px;
}

.workflow-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 9px var(--sp-3) 9px 9px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  color: var(--text);
  text-decoration: none;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.workflow-step:hover {
  background: var(--surface-hover);
}

.workflow-step:focus-visible {
  box-shadow: var(--ring);
  border-radius: var(--radius-md);
}

.workflow-step[aria-current='step'],
.workflow-step[aria-selected='true'] {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.workflow-step-number {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--surface-opaque);
  border: 1.5px solid var(--border-strong);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  font-variant-numeric: tabular-nums;
}

.workflow-step[aria-current='step'] .workflow-step-number,
.workflow-step[aria-selected='true'] .workflow-step-number {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

.workflow-step-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.workflow-step-title {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 1.35;
}

.workflow-step[aria-current='step'] .workflow-step-title,
.workflow-step[aria-selected='true'] .workflow-step-title {
  font-weight: var(--weight-semi);
}

.workflow-step-level {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: 1.4;
}

/* The chosen step. */
.workflow-panels {
  min-width: 0;
}

.workflow-panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  scroll-margin-top: 80px;
}

.workflow-panel:focus-visible {
  box-shadow: var(--ring), var(--shadow-md);
  border-radius: var(--radius-lg);
}

.workflow-panel-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}

.workflow-panel-head h3 {
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
  scroll-margin-top: 90px;
}

.workflow-panel-head h3:focus {
  outline: none;
}

.workflow-panel-head h3:focus-visible {
  box-shadow: var(--ring);
}

.workflow-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.workflow-chip,
.level-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: 0.02em;
  line-height: 1.7;
}

.workflow-chip {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Levels 1-2 (AI does much of the work) use the accent; levels 3-4 (a person
   leads or decides) use the strong text colour. The label is always written
   out, so colour is never the only signal. */
.level-chip {
  border: 1px solid transparent;
}

.level-chip.level-1,
.level-chip.level-2 {
  background: var(--accent-soft);
  color: var(--accent);
}

.level-chip.level-3,
.level-chip.level-4 {
  background: var(--surface-sunken);
  border-color: var(--border-strong);
  color: var(--text);
}

.workflow-field h4 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.workflow-field p {
  font-size: var(--text-md);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* The standard prompt: the one block meant to be copied. */
.workflow-prompt {
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
}

.workflow-prompt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}

.workflow-prompt-head h4 {
  margin-bottom: 0;
}

.workflow-prompt-text {
  margin: 0;
  padding-left: var(--sp-3);
  border-left: 3px solid var(--accent);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
}

.workflow-copy {
  flex: none;
  min-height: 36px;
  padding: 5px var(--sp-3);
  font-size: var(--text-sm);
}

.workflow-copy svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.workflow-copy.is-copied {
  color: var(--accent);
  border-color: var(--accent);
}

.workflow-copy-status {
  margin-top: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.workflow-copy-status:empty {
  display: none;
}

/* The human review point: what a person must do at this step. */
.workflow-human {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--surface-opaque);
}

.workflow-human h4 {
  color: var(--text);
}

.workflow-human h4 svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.workflow-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}

/* STARK's own notes, kept apart from Irene's text. */
.workflow-stark-note {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-strong);
  background: var(--accent-soft);
  font-size: var(--text-base);
}

.workflow-note-kicker {
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.workflow-stark-note ul {
  margin: var(--sp-1) 0 0;
  padding-left: 18px;
}

.workflow-stark-note li + li {
  margin-top: var(--sp-1);
}

.workflow-open-qa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-3);
}

.workflow-open-qa span {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.workflow-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}

.workflow-pager-where {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.workflow-accountability h3 {
  font-size: var(--text-md);
}

.workflow-draft-notice {
  margin-top: var(--sp-2);
  font-weight: var(--weight-semi);
}

.workflow-accountability ul {
  margin: var(--sp-2) 0 0;
  padding-left: 18px;
  color: var(--text-secondary);
}

.workflow-accountability li + li {
  margin-top: var(--sp-1);
}

/* Used only while copying on browsers without the clipboard API. */
.workflow-copy-buffer {
  position: fixed;
  top: 0;
  left: -9999px;
  opacity: 0;
}

/* Tablet: a narrower step list (the level label wraps if it must). */
@media (max-width: 1020px) {
  .workflow-layout {
    grid-template-columns: 250px minmax(0, 1fr);
  }
}

/* Phone: the steps become a compact numbered grid above the chosen step. */
@media (max-width: 760px) {
  .workflow-layout {
    grid-template-columns: 1fr;
  }

  .workflow-nav {
    position: static;
  }

  .workflow-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 6px;
  }

  .workflow-steps::before {
    display: none;
  }

  .workflow-steps-item + .workflow-steps-item {
    margin-top: 0;
  }

  .workflow-step {
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    height: 100%;
    padding: 8px 4px;
    text-align: center;
  }

  .workflow-step-number {
    width: 26px;
    height: 26px;
    font-size: var(--text-xs);
  }

  .workflow-step-title {
    font-size: var(--text-sm);
    line-height: 1.25;
  }

  /* "Level 2" stays visible on the small tiles; the rest of the label
     ("– AI + Human Collaboration") is still read out and is shown in full
     on the open step. */
  .workflow-level-name {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .workflow-panel {
    padding: var(--sp-4);
  }

  .workflow-panel-head h3 {
    font-size: var(--text-lg);
  }

  .workflow-pair {
    grid-template-columns: 1fr;
  }

  .workflow-prompt-head {
    flex-wrap: wrap;
  }
}

/* Phase 7 added a third section link, so the masthead needs room sooner:
   below 1080px the "Runs on the STARK server" badge is left out (as it already
   was below 760px), and below 880px the theme switch shows its icons only (as
   it already did below 460px; each option keeps its title and accessible name). */
@media (max-width: 1080px) {
  #mode-badge {
    display: none;
  }
}

@media (max-width: 880px) {
  .theme-option span {
    display: none;
  }

  .theme-option {
    padding: 5px 10px;
  }
}

/* Very narrow windows (Phase 7 added a third section link): the theme switch
   moves up next to the brand and the three section links get the whole row
   below it, so nothing is cut off or scrolls sideways. */
@media (max-width: 400px) {
  .masthead-right {
    display: contents;
  }

  .brand {
    flex: 1 1 0;
    min-width: 0;
  }

  .brand > div {
    min-width: 0;
  }

  .brand h1 {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .theme-switch {
    order: 1;
    margin-left: auto;
  }

  .nav {
    order: 2;
    width: 100%;
  }

  .nav-link {
    flex: 1 1 auto;
    padding: 5px 6px;
    text-align: center;
  }
}

@media (max-width: 360px) {
  .masthead {
    column-gap: var(--sp-2);
  }

  .brand {
    gap: var(--sp-2);
  }
}