/* What belongs to one page or one family of pages. */
@layer pages {
  /* ─── Login page (MD3) ───────────────────────────────────────────────────── */

  .login-page {
    background: var(--md-sys-color-background);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }

  .login-container {
    width: 400px;
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-extra-large);
    padding: var(--md-sys-spacing-10) var(--md-sys-spacing-8);
  }

  .login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--md-sys-spacing-2);
    margin-bottom: var(--md-sys-spacing-8);
  }

  .login-brand-icon {
    font-size: 3rem;
    color: var(--md-sys-color-primary);
  }

  .login-title {
    text-align: center;
    margin: 0;
    font-size: var(--md-sys-typescale-headline-medium-size);
    font-weight: 400;
    color: var(--md-sys-color-on-surface);
    letter-spacing: -0.02em;
  }

  .login-form {
    display: flex;
    flex-direction: column;
    gap: var(--md-sys-spacing-4);
  }

  /* .btn is inline-flex and nowrap: here the button fills the card, centred, and
     may wrap rather than run past the card's edge. */
  .login-entra {
    display: flex;
    width: 100%;
    justify-content: center;
    height: auto;
    min-height: 44px;
    padding: var(--md-sys-spacing-2) var(--md-sys-spacing-5);
    white-space: normal;
    text-align: center;
  }

  .login-hint {
    margin: var(--md-sys-spacing-3) 0 0;
    text-align: center;
    font-size: var(--md-sys-typescale-body-small-size);
    line-height: 1.4;
    color: var(--md-sys-color-on-surface-variant);
  }

  .login-flash { border-radius: var(--md-sys-shape-small); margin-bottom: var(--md-sys-spacing-4); }

  /* ─── Document view ──────────────────────────────────────────────────────── */

  .doc-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--md-sys-spacing-3);
    gap: var(--md-sys-spacing-4);
  }

  .doc-actions { display: flex; gap: var(--md-sys-spacing-2); flex-shrink: 0; }

  .doc-meta {
    display: flex;
    gap: var(--md-sys-spacing-4);
    font-size: var(--md-sys-typescale-body-small-size);
    color: var(--md-sys-color-on-surface-variant);
    margin-bottom: var(--md-sys-spacing-5);
  }


  /* ─── Editor ─────────────────────────────────────────────────────────────── */

  .editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--md-sys-spacing-3);
  }

  /* The editor pane fills whatever is left after the header and footer, using
     flex rather than a calc() against the viewport. The old
     `calc(100vh - nav - 160px)` was wrong whenever the header wrapped or the
     footer grew, which is what made the editor look cramped. */
  .editor-form {
    display: flex;
    flex-direction: column;
    /* #main has its own padding; subtract it so the form does not overflow. */
    min-height: calc(100vh - var(--nav-height) - 3rem);
  }

  .editor-container,
  .editor-textarea {
    flex: 1;
    min-height: 24rem;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-medium);
    background: var(--md-sys-color-surface-container);
  }

  .editor-container { overflow: hidden; }

  /* The plain-text fallback has to be a real editor, not a one-line input. */
  .editor-textarea {
    display: block;
    width: 100%;
    padding: var(--md-sys-spacing-3) var(--md-sys-spacing-4);
    font-family: var(--md-ref-typeface-mono);
    font-size: var(--md-sys-typescale-body-medium-size);
    line-height: 1.6;
    resize: vertical;
    tab-size: 2;
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
  }

  .editor-footer {
    display: flex;
    align-items: center;
    gap: var(--md-sys-spacing-3);
    margin-top: var(--md-sys-spacing-3);
  }

  .commit-msg-input { flex: 1; }
  .editor-actions { display: flex; gap: var(--md-sys-spacing-2); flex-shrink: 0; }

  /* ─── Audit dashboard ────────────────────────────────────────────────────── */

  .filter-form { margin-bottom: var(--md-sys-spacing-3); }
  .audit-filters { display: flex; gap: var(--md-sys-spacing-2); align-items: flex-end; flex-wrap: wrap; }
  .audit-filters input, .audit-filters select { width: auto; flex: 1; min-width: 100px; }

  /* ─── Welcome panel ──────────────────────────────────────────────────────── */

  .welcome { color: var(--md-sys-color-on-surface-variant); padding: var(--md-sys-spacing-8) 0; }
  .welcome h2 { color: var(--md-sys-color-on-surface); margin-bottom: var(--md-sys-spacing-2); }

  /* Narrow screens: the editor gives the stacked sidebar its room. */
  @media (max-width: 800px) {
    .editor-container {
      height: calc(100vh - var(--nav-height) - 220px);
    }
  }


  /* --- project picker (/projects) ------------------------------------------ */

  .project-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--md-sys-spacing-4);
  }

  .project-card {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-medium);
    background: var(--md-sys-color-surface-container-low);
    transition: border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  }

  .project-card:hover {
    border-color: var(--md-sys-color-primary);
    box-shadow: var(--md-sys-elevation-level3);
  }

  .project-card-link {
    display: block;
    padding: var(--md-sys-spacing-5);
    color: inherit;
  }

  .project-card-title {
    margin: 0 0 var(--md-sys-spacing-1);
    font-size: var(--md-sys-typescale-body-large-size);
    color: var(--md-sys-color-primary);
  }

  .project-card-desc {
    margin: 0 0 var(--md-sys-spacing-4);
    font-size: var(--md-sys-typescale-body-medium-size);
    color: var(--md-sys-color-on-surface);
    line-height: 1.5;
  }

  .project-card-perms {
    margin: 0;
    display: flex;
    gap: var(--md-sys-spacing-2);
    flex-wrap: wrap;
  }

  /* ─── Wider reading pane ─────────────────────────────────────────────────── */
  /*
   * The document view was constrained by #main's default padding on a narrow
   * column. Documents are the primary content here, so the pane gets the room.
   */
  .doc-content { padding-top: var(--md-sys-spacing-2); }

  /* ─── Index: facets and relation graph ───────────────────────────────────── */

  .row-selected td { background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }

  .graph-filters { display: flex; gap: var(--md-sys-spacing-3); align-items: end; flex-wrap: wrap; margin-bottom: var(--md-sys-spacing-4); }
  .graph-relations { display: flex; gap: var(--md-sys-spacing-2); flex-wrap: wrap; align-items: center; border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-medium); padding: var(--md-sys-spacing-2) var(--md-sys-spacing-3); margin: 0; }
  .graph-swatch { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--rel); vertical-align: -0.1em; }
  .graph-swatch.derived { background: none; border: 2px dashed var(--rel); box-sizing: border-box; }
  /* Relations take the categorical slots in kb_core's RELATIONS order: the eight written by an author
     1–8, the derived ones 1–3 again. static/graph.js reads the same --rel. Edges cross anywhere, so the
     eight slots clear every pair in both themes (tokens.css), and a derived relation that shares a slot
     with a written one is told apart by its dashes and missing arrow (graph.js, and .derived above). */
  .rel-superseded_by { --rel: var(--viz-cat-1); }
  .rel-depends_on { --rel: var(--viz-cat-2); }
  .rel-references { --rel: var(--viz-cat-3); }
  .rel-see_also { --rel: var(--viz-cat-4); }
  .rel-related { --rel: var(--viz-cat-5); }
  .rel-frontmatter { --rel: var(--viz-cat-6); }
  .rel-link { --rel: var(--viz-cat-7); }
  .rel-wikilink { --rel: var(--viz-cat-8); }
  .rel-shared_tag { --rel: var(--viz-cat-1); }
  .rel-similar { --rel: var(--viz-cat-2); }
  .rel-same_folder { --rel: var(--viz-cat-3); }

  .graph-toolbar { display: flex; gap: var(--md-sys-spacing-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--md-sys-spacing-2); }
  .graph-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: var(--md-sys-spacing-3); }
  /* static/graph.js draws the nodes in these, read from the canvas like the --rel of each relation. */
  .graph-canvas { height: 70vh; min-height: 420px; background: var(--md-sys-color-background);
    border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-medium);
    --graph-node: var(--md-sys-color-primary); --graph-node-ring: var(--md-sys-color-background);
    --graph-label: var(--md-sys-color-on-surface-variant); --graph-focus: var(--md-extended-color-warning);
    --graph-highlight: var(--md-sys-color-on-surface); }
  .graph-info { border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-medium); padding: var(--md-sys-spacing-3);
    font-size: var(--md-sys-typescale-body-medium-size); overflow-wrap: anywhere; }
  .graph-info-title { font-weight: 500; margin: var(--md-sys-spacing-1) 0; }
  .graph-info-actions { display: flex; flex-direction: column; gap: var(--md-sys-spacing-1); margin-top: var(--md-sys-spacing-3); }
  @media (max-width: 900px) { .graph-wrap { grid-template-columns: 1fr; } }

  /* ─── CAFE(S) canvas ─────────────────────────────────────────────────────── */

  .sev-error   { --sev: var(--md-sys-color-error); }
  .sev-warning { --sev: var(--md-extended-color-warning); }
  .sev-info    { --sev: var(--md-extended-color-info); }
  .sev-clear   { --sev: var(--md-extended-color-success); }

  /* The page names how many dimensions the framework has; the rest of the track list is fixed. */
  .heatmap { display: grid; gap: var(--md-sys-spacing-1); margin: var(--md-sys-spacing-4) 0 var(--md-sys-spacing-2);
    grid-template-columns: minmax(8rem, 1.3fr) repeat(var(--heatmap-columns), minmax(5.5rem, 1fr)) minmax(5rem, .6fr); }
  .heatmap-head { font-size: var(--md-sys-typescale-label-medium-size); text-transform: uppercase; letter-spacing: .06em;
    color: var(--md-sys-color-on-surface-variant); padding: var(--md-sys-spacing-1) var(--md-sys-spacing-2); align-self: end; text-align: center; white-space: nowrap; }
  /* Narrow columns: a centred word in its own case still fits where capitals would run into the next. */
  @media (max-width: 1200px) { .heatmap-head { text-transform: none; letter-spacing: 0; padding-inline: 0; } }
  .heatmap-base { display: flex; flex-direction: column; justify-content: center; padding: var(--md-sys-spacing-2) var(--md-sys-spacing-3);
    border-radius: var(--md-sys-shape-medium); background: var(--md-sys-color-surface-container); }
  .heatmap-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
    min-height: 4.5rem; border-radius: var(--md-sys-shape-medium); text-decoration: none; color: var(--md-sys-color-on-surface);
    background: color-mix(in srgb, var(--sev) 22%, var(--md-sys-color-surface-container-low)); border: 1px solid color-mix(in srgb, var(--sev) 55%, transparent);
    transition: transform .12s ease, background .12s ease; }
  .heatmap-cell:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--sev) 34%, var(--md-sys-color-surface-container-low)); text-decoration: none; }
  .heatmap-total { font-size: var(--md-sys-typescale-title-large-size); font-weight: 600; line-height: 1; }
  .heatmap-split { font-size: var(--md-sys-typescale-body-small-size); color: var(--md-sys-color-on-surface-variant); }
  .heatmap-status { display: inline-flex; align-items: center; gap: var(--md-sys-spacing-1); font-size: var(--md-sys-typescale-label-medium-size); font-weight: 500; }
  .heatmap-status .material-symbols-outlined { font-size: 1rem; }
  .heatmap-legend { display: flex; flex-wrap: wrap; gap: var(--md-sys-spacing-2); align-items: center; margin-bottom: var(--md-sys-spacing-4); }

  .legend-chip, .count-chip { display: inline-block; border-radius: 999px; font-size: var(--md-sys-typescale-body-small-size); padding: .1rem var(--md-sys-spacing-2);
    background: color-mix(in srgb, var(--sev, var(--md-sys-color-outline-variant)) 25%, transparent);
    border: 1px solid color-mix(in srgb, var(--sev, var(--md-sys-color-outline-variant)) 60%, transparent); white-space: nowrap; }
  .count-chip { font-variant-numeric: tabular-nums; min-width: 2.2rem; text-align: center; }
  .legend-chip .material-symbols-outlined { font-size: 1.05em; line-height: 1; vertical-align: -.2em; margin-right: .25em; }

  .delta { font-size: var(--md-sys-typescale-body-small-size); font-variant-numeric: tabular-nums; }
  .delta-up { color: var(--md-sys-color-error); }
  .delta-down { color: var(--md-extended-color-success); }
  .delta-flat { color: var(--md-sys-color-on-surface-variant); }

  .delta-good { color: var(--md-extended-color-success); }
  .delta-bad { color: var(--md-sys-color-error); }

  .canvas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--md-sys-spacing-4); margin-bottom: var(--md-sys-spacing-5); }
  .canvas-card { background: var(--md-sys-color-surface-container); border: 1px solid var(--md-sys-color-outline-variant);
    border-top: 4px solid var(--sev, var(--md-sys-color-outline-variant)); border-radius: var(--md-sys-shape-medium); padding: var(--md-sys-spacing-4) var(--md-sys-spacing-4);
    display: flex; flex-direction: column; gap: var(--md-sys-spacing-2); scroll-margin-top: 5rem; }
  .sev-edge-error { --sev: var(--md-sys-color-error); } .sev-edge-warning { --sev: var(--md-extended-color-warning); }
  .sev-edge-info { --sev: var(--md-extended-color-info); } .sev-edge-clear { --sev: var(--md-extended-color-success); }
  .canvas-card-focus { box-shadow: 0 0 0 2px var(--md-sys-color-primary); }
  .canvas-card-head { display: flex; justify-content: space-between; gap: var(--md-sys-spacing-2); align-items: flex-start; }
  .canvas-title { margin: 0; font-size: var(--md-sys-typescale-body-large-size); }
  .canvas-numbers { display: flex; gap: var(--md-sys-spacing-1); align-items: center; flex-wrap: wrap; }
  .canvas-trend { margin-left: auto; display: inline-flex; gap: var(--md-sys-spacing-1); align-items: center; }
  .canvas-sub { margin: var(--md-sys-spacing-1) 0 0; font-size: var(--md-sys-typescale-label-medium-size); text-transform: uppercase; letter-spacing: .06em;
    color: var(--md-sys-color-on-surface-variant); }
  .canvas-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--md-sys-spacing-2); font-size: var(--md-sys-typescale-body-medium-size); }
  .canvas-ok { color: var(--md-extended-color-success); font-size: var(--md-sys-typescale-body-medium-size); margin: 0; }
  .canvas-holds summary { cursor: pointer; }
  .canvas-good { list-style: none; display: flex; flex-wrap: wrap; gap: var(--md-sys-spacing-1); padding: var(--md-sys-spacing-2) 0 0; margin: 0; font-size: var(--md-sys-typescale-body-small-size); }
  .canvas-good li { background: color-mix(in srgb, var(--md-extended-color-success) 14%, transparent); border-radius: 999px; padding: .05rem var(--md-sys-spacing-2); }
  /* What a dimension's silent checks wait for: each its chip, its name and what it asks for. */
  .canvas-waiting { list-style: none; margin: 0; padding: var(--md-sys-spacing-2) 0 0; display: flex; flex-direction: column; gap: var(--md-sys-spacing-2);
    font-size: var(--md-sys-typescale-body-small-size); }
  .canvas-waiting li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--md-sys-spacing-1) var(--md-sys-spacing-2); }
  .canvas-waiting .meta { flex-basis: 100%; }
  .canvas-signals { list-style: none; margin: 0; padding: 0; font-size: var(--md-sys-typescale-body-medium-size); }
  .canvas-signals li { display: flex; justify-content: space-between; gap: var(--md-sys-spacing-2); padding: .15rem 0;
    border-bottom: 1px dashed color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent); }
  .canvas-blind { margin: auto 0 0; font-size: var(--md-sys-typescale-body-small-size); color: var(--md-sys-color-on-surface-variant); display: flex; gap: var(--md-sys-spacing-1); }
  .canvas-blind .material-symbols-outlined { font-size: 1rem; }

  /* ─── CAFE(S) scorecard ──────────────────────────────────────────────────── */

  /* A status reuses the severity styling through --sev: red, amber, green. */
  .status-critical, .status-edge-critical   { --sev: var(--md-sys-color-error); }
  .status-attention, .status-edge-attention { --sev: var(--md-extended-color-warning); }
  .status-stable, .status-edge-stable       { --sev: var(--md-extended-color-success); }
  .heatmap-base[class*="status-edge-"] { border-left: 4px solid var(--sev); gap: var(--md-sys-spacing-1); }

  .verdict-banner { border: 1px solid color-mix(in srgb, var(--sev) 45%, var(--md-sys-color-outline-variant)); border-left: 6px solid var(--sev);
    border-radius: var(--md-sys-shape-medium); background: color-mix(in srgb, var(--sev) 9%, var(--md-sys-color-surface-container-low)); padding: var(--md-sys-spacing-3) var(--md-sys-spacing-4); margin: var(--md-sys-spacing-4) 0; }
  .verdict-head { display: flex; flex-wrap: wrap; gap: var(--md-sys-spacing-3); align-items: baseline; justify-content: space-between; }
  .verdict-title { font-size: var(--md-sys-typescale-title-large-size); font-weight: 600; }
  .verdict-counts { display: inline-flex; gap: var(--md-sys-spacing-1); align-items: center; flex-wrap: wrap; }
  .verdict-explanation { margin: var(--md-sys-spacing-1) 0 var(--md-sys-spacing-2); color: var(--md-sys-color-on-surface-variant); font-size: var(--md-sys-typescale-body-medium-size); }
  .verdict-reasons, .canvas-reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--md-sys-spacing-2); font-size: var(--md-sys-typescale-body-medium-size); }

  .proportion { display: flex; align-items: center; gap: var(--md-sys-spacing-2); }
  .proportion-track { flex: 1; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--sev) 18%, transparent); overflow: hidden; }
  .proportion-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--sev); }
  .proportion-value { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 2.6rem; text-align: right; }
  .canvas-proportion { display: flex; flex-direction: column; gap: .15rem; }
  .canvas-proportion .delta { align-self: flex-end; }



  .bar-list { list-style: none; margin: var(--md-sys-spacing-2) 0; padding: 0; display: flex; flex-direction: column; gap: var(--md-sys-spacing-2); }
  .bar-row { display: grid; grid-template-columns: minmax(12rem, 1.4fr) minmax(6rem, 1fr) 3rem; gap: var(--md-sys-spacing-2); align-items: center; font-size: var(--md-sys-typescale-body-medium-size); }
  .bar-track { height: 10px; }
  .bar-fill { display: block; height: 100%; min-width: 2px; border-radius: 0 4px 4px 0; background: var(--sev); }
  .bar-value { font-variant-numeric: tabular-nums; text-align: right; color: var(--md-sys-color-on-surface); }
  .viz .bar-row { grid-template-columns: minmax(0, 2fr) minmax(4rem, 1fr) 2rem; }
  .bar-label .hint, .bar-label .meta { white-space: nowrap; }
  .bar-fill.sev-error { --sev: var(--viz-sev-error); }
  .bar-fill.sev-warning { --sev: var(--viz-sev-warning); }
  .bar-fill.sev-info { --sev: var(--viz-sev-info); }

  .horizon-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--md-sys-spacing-4); }
  .horizon-col { background: var(--md-sys-color-surface-container); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-medium);
    padding: var(--md-sys-spacing-3) var(--md-sys-spacing-4); display: flex; flex-direction: column; gap: var(--md-sys-spacing-2); }
  .horizon-head { display: flex; gap: var(--md-sys-spacing-2); align-items: baseline; flex-wrap: wrap; }
  .horizon-id { display: inline-block; font-family: var(--md-ref-typeface-mono); font-size: var(--md-sys-typescale-body-small-size); padding: .05rem var(--md-sys-spacing-2); border-radius: 4px;
    border: 1px solid var(--md-sys-color-outline-variant); background: var(--md-sys-color-surface-container); }
  .horizon-h0 { border-top: 4px solid var(--md-sys-color-primary); }
  .horizon-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--md-sys-spacing-2); font-size: var(--md-sys-typescale-body-medium-size); }
  .effort-chip { display: inline-block; font-size: var(--md-sys-typescale-label-small-size); font-weight: 600; padding: 0 var(--md-sys-spacing-2); border-radius: 4px;
    border: 1px solid var(--md-sys-color-outline-variant); color: var(--md-sys-color-on-surface-variant); margin-left: var(--md-sys-spacing-1); }

  .decision-list { list-style: none; margin: var(--md-sys-spacing-1) 0; padding: 0; display: flex; flex-direction: column; gap: var(--md-sys-spacing-2); font-size: var(--md-sys-typescale-body-medium-size); }
  .decision { border-left: 3px solid var(--md-extended-color-warning); padding: var(--md-sys-spacing-1) var(--md-sys-spacing-3); background: var(--md-sys-color-surface-container); border-radius: 0 var(--md-sys-shape-medium) var(--md-sys-shape-medium) 0; }
  .decision-pin_diverged, .decision-sync_failed, .decision-assessment_failed { border-left-color: var(--md-sys-color-error); }
  .decision-detail { margin: .1rem 0; word-break: break-word; }

  /* ─── CAFE(S) guide ──────────────────────────────────────────────────────── */

  .how-to-read { border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-medium); padding: var(--md-sys-spacing-2) var(--md-sys-spacing-4); margin: var(--md-sys-spacing-4) 0;
    background: var(--md-sys-color-surface-container); }
  .how-to-read summary { cursor: pointer; display: flex; gap: var(--md-sys-spacing-2); align-items: center; font-weight: 500; }
  .how-to-read summary .material-symbols-outlined { font-size: 1.1rem; }
  .how-to-read-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--md-sys-spacing-2) var(--md-sys-spacing-5); margin: var(--md-sys-spacing-3) 0 var(--md-sys-spacing-2); }
  .how-to-read-list dt { font-weight: 600; font-size: var(--md-sys-typescale-label-large-size); }
  .how-to-read-list dd { margin: .1rem 0 0; font-size: var(--md-sys-typescale-body-medium-size); color: var(--md-sys-color-on-surface-variant); }
  .check-code { margin-left: var(--md-sys-spacing-1); font-size: var(--md-sys-typescale-body-small-size); text-decoration: none; opacity: .85; white-space: nowrap; }
  .check-code:hover { opacity: 1; text-decoration: underline; }
  .canvas-why { font-size: var(--md-sys-typescale-body-small-size); margin-top: .15rem; }
  .guide-keys { display: flex; flex-direction: column; gap: var(--md-sys-spacing-2); margin-bottom: var(--md-sys-spacing-2); font-size: var(--md-sys-typescale-body-medium-size); }
  .guide-filter { width: 100%; max-width: 32rem; margin: var(--md-sys-spacing-1) 0 var(--md-sys-spacing-4); }
  .guide-dimension { margin-bottom: var(--md-sys-spacing-6); }
  .guide-dimension-title { margin: var(--md-sys-spacing-2) 0 var(--md-sys-spacing-2); }
  .guide-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--md-sys-spacing-3); }
  .guide-check { background: var(--md-sys-color-surface-container); border: 1px solid var(--md-sys-color-outline-variant);
    border-left: 4px solid var(--sev, var(--md-sys-color-outline-variant)); border-radius: var(--md-sys-shape-medium); padding: var(--md-sys-spacing-3) var(--md-sys-spacing-4); scroll-margin-top: 5rem; }
  .guide-check header { display: flex; justify-content: space-between; gap: var(--md-sys-spacing-2); align-items: center; }
  .guide-check h4 { margin: var(--md-sys-spacing-2) 0 var(--md-sys-spacing-1); font-size: var(--md-sys-typescale-body-large-size); }
  .guide-check dl { margin: 0; font-size: var(--md-sys-typescale-body-medium-size); }
  .guide-check dt { font-weight: 600; margin-top: var(--md-sys-spacing-1); font-size: var(--md-sys-typescale-label-medium-size); text-transform: uppercase; letter-spacing: .04em;
    color: var(--md-sys-color-on-surface-variant); }
  .guide-check dd { margin: .1rem 0 0; }
  .guide-code { font-size: var(--md-sys-typescale-body-medium-size); }
  .guide-check-target { box-shadow: 0 0 0 2px var(--md-sys-color-primary); }

  /* --- delivery cycles ------------------------------------------------------ */
  .cycle-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--md-sys-spacing-4); }
  .cycle-card {
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-medium);
    padding: var(--md-sys-spacing-4) var(--md-sys-spacing-5);
  }
  .cycle-card-head { display: flex; align-items: baseline; gap: var(--md-sys-spacing-2); flex-wrap: wrap; }
  .cycle-card-head h2 { margin: 0; font-size: var(--md-sys-typescale-body-large-size); }

  /* A gate class keeps one hue wherever it is drawn. Every pair, not only neighbours, stays apart for a colour-blind
     reader (validate_palette.js --pairs all): a cycle without one class lets the two beside it touch. */
  .gate-approval, .seg-approval   { --gate-color: var(--viz-cat-1); --seg: var(--viz-cat-1); }
  .gate-readiness, .seg-readiness { --gate-color: var(--viz-cat-4); --seg: var(--viz-cat-4); }
  .gate-forum, .seg-forum         { --gate-color: var(--viz-cat-5); --seg: var(--viz-cat-5); }
  .gate-other, .seg-other         { --gate-color: var(--viz-cat-6); --seg: var(--viz-cat-6); }
  .gate-none { --gate-color: var(--md-sys-color-outline); }
  .cycle-gate-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--md-sys-spacing-1);
    font-size: var(--md-sys-typescale-body-small-size);
    padding: 0.05rem var(--md-sys-spacing-2);
    border-radius: var(--md-sys-shape-extra-small);
    border: 1px solid var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface);
    white-space: nowrap;
  }
  .cycle-gate-badge::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 2px; background: var(--gate-color); flex: none; }

  .cycle-flow { display: flex; gap: var(--md-sys-spacing-3); overflow-x: auto; padding-bottom: var(--md-sys-spacing-3); align-items: flex-start; }
  .cycle-phase {
    flex: 0 0 15rem;
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-medium);
    padding: var(--md-sys-spacing-2);
  }
  .cycle-phase-head { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: var(--md-sys-spacing-2); text-transform: capitalize; }
  .cycle-stage {
    display: flex;
    flex-direction: column;
    gap: var(--md-sys-spacing-1);
    background: var(--md-sys-color-surface-container-high);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-left: 4px solid var(--gate-color);
    border-radius: var(--md-sys-shape-small);
    padding: var(--md-sys-spacing-2) var(--md-sys-spacing-2);
    margin-bottom: var(--md-sys-spacing-2);
    color: inherit;
  }
  .cycle-stage:hover { background: var(--md-sys-color-surface-container-highest); }
  .cycle-stage.conditional { border-top-style: dashed; border-right-style: dashed; border-bottom-style: dashed; }
  .cycle-stage.selected { outline: 2px solid var(--md-sys-color-primary); }
  .cycle-stage-title { font-weight: 600; font-size: var(--md-sys-typescale-label-large-size); }
  .cycle-stage .cycle-gate-badge { align-self: flex-start; }
  .cycle-stage-meta { font-size: var(--md-sys-typescale-body-small-size); display: flex; align-items: center; gap: var(--md-sys-spacing-1); }
  .cycle-stage-meta .material-symbols-outlined { font-size: 0.9rem; }
  .cycle-missing { color: var(--md-extended-color-warning); }
  .cycle-legend { display: flex; gap: var(--md-sys-spacing-2); flex-wrap: wrap; align-items: center; font-size: var(--md-sys-typescale-body-small-size); }
  .cycle-legend-conditional { border: 1px dashed var(--md-sys-color-outline); padding: 0.05rem var(--md-sys-spacing-2); border-radius: var(--md-sys-shape-extra-small); }
  .cycle-chip {
    display: inline-block;
    font-size: var(--md-sys-typescale-body-small-size);
    font-family: var(--md-ref-typeface-mono);
    padding: 0.05rem var(--md-sys-spacing-2);
    margin: 0.1rem 0;
    border-radius: var(--md-sys-shape-extra-small);
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
  }
  .cycle-chip.cycle-optional { background: transparent; border: 1px dashed var(--md-sys-color-outline); color: var(--md-sys-color-on-surface-variant); }
  .cycle-overview summary { cursor: pointer; }
  .cycle-stage-document {
    margin-top: var(--md-sys-spacing-3);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-medium);
    padding: var(--md-sys-spacing-4) var(--md-sys-spacing-5);
  }

  .cycle-tracker { display: flex; gap: var(--md-sys-spacing-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--md-sys-spacing-3); }

  /* ─── A base's canvas, quality and behaviour ─────────────────────────────── */
  .page-meta { margin: var(--md-sys-spacing-1) 0 0; font-size: var(--md-sys-typescale-body-small-size); color: var(--md-sys-color-on-surface-variant); }
  .page-meta code { font-size: var(--md-sys-typescale-body-small-size); }
  .viz-anchor { min-width: 0; scroll-margin-top: 5rem; }
  .viz-note { margin: var(--md-sys-spacing-2) 0 0; font-size: var(--md-sys-typescale-body-medium-size); color: var(--md-sys-color-on-surface-variant); display: flex; flex-wrap: wrap; gap: var(--md-sys-spacing-1); align-items: center; }
  .viz-stack { display: flex; flex-direction: column; gap: var(--md-sys-spacing-4); min-width: 0; }
  .viz-stack > .viz, .viz-grid > .viz, .viz-stack > .viz-anchor > .viz, .viz-grid > .viz-anchor > .viz { margin-bottom: 0; }
  .viz-grid + .admin-section, .viz-grid + .canvas-grid { margin-top: var(--md-sys-spacing-6); }
  .stat-meter { display: grid; grid-template-columns: minmax(4.5rem, auto) minmax(0, 1fr); align-items: center; gap: var(--md-sys-spacing-2); font-size: var(--md-sys-typescale-body-small-size); color: var(--md-sys-color-on-surface-variant); }
  .stat-meter .meter { min-width: 0; }
  .canvas-fix > summary { cursor: pointer; width: fit-content; font-size: var(--md-sys-typescale-body-small-size); color: var(--md-sys-color-on-surface-variant); }
  .canvas-fix[open] > summary { margin-bottom: var(--md-sys-spacing-1); }

  .spread-list { list-style: none; margin: var(--md-sys-spacing-1) 0; padding: 0; display: flex; flex-direction: column; gap: var(--md-sys-spacing-2); font-size: var(--md-sys-typescale-body-medium-size); }
  .spread-row { display: grid; grid-template-columns: minmax(7rem, 1fr) minmax(6rem, 2fr) minmax(7rem, auto); gap: var(--md-sys-spacing-3); align-items: center; }
  .spread-row.active > a { font-weight: 600; }
  .spread-track { display: block; height: 10px; }
  .spread-bar { display: block; height: 100%; min-width: 4px; }
  .spread-bar .stack-row { min-width: 0; width: 100%; height: 100%; }
  .spread-counts { display: inline-flex; gap: var(--md-sys-spacing-1); justify-content: flex-end; flex-wrap: wrap; }
  .finding-filter { display: flex; gap: var(--md-sys-spacing-2); align-items: end; flex-wrap: wrap; margin-bottom: var(--md-sys-spacing-3); }
  .reference { border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-medium); padding: var(--md-sys-spacing-2) var(--md-sys-spacing-4); margin: 0 0 var(--md-sys-spacing-3); overflow-x: auto;
    background: var(--md-sys-color-surface-container); }
  .reference > summary { cursor: pointer; font-weight: 500; }
  .reference[open] > summary { margin-bottom: var(--md-sys-spacing-2); }
  .reference h3 { font-size: var(--md-sys-typescale-body-medium-size); margin: var(--md-sys-spacing-4) 0 var(--md-sys-spacing-2); }

  .kpi-hero .stat-value .reading-chip { font-size: var(--md-sys-typescale-body-large-size); padding: var(--md-sys-spacing-1) var(--md-sys-spacing-3); }
  .kpi-hero .stat-meter { font-size: var(--md-sys-typescale-body-medium-size); margin-top: var(--md-sys-spacing-1); }
  .bar-list-plain .bar-fill { background: var(--viz-cat-1); }
  /* One grid for the whole list, so every track starts and ends where its neighbours do. */
  .bar-list-plain { display: grid; grid-template-columns: minmax(0, 2fr) minmax(4rem, 1fr) max-content; column-gap: var(--md-sys-spacing-2); }
  .bar-list-plain .bar-row { grid-column: 1 / -1; grid-template-columns: subgrid; }
  .bar-list-plain .bar-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bar-whole { display: block; height: 100%; min-width: 2px; overflow: hidden; border-radius: 0 4px 4px 0;
    background: color-mix(in srgb, var(--viz-cat-1) 22%, transparent); }
  .bar-whole .bar-fill { min-width: 0; }
  .fact-chips { display: flex; flex-wrap: wrap; gap: var(--md-sys-spacing-2); align-items: center; margin: var(--md-sys-spacing-1) 0 var(--md-sys-spacing-3); }
  .fact-chip { display: inline-flex; align-items: baseline; gap: var(--md-sys-spacing-1); padding: .15rem var(--md-sys-spacing-3); border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 999px; font-size: var(--md-sys-typescale-body-small-size); color: var(--md-sys-color-on-surface-variant); }
  .fact-chip strong { color: var(--md-sys-color-on-surface); font-weight: 600; }
  .admin-subsection-title { font-size: var(--md-sys-typescale-label-large-size); font-weight: 600; margin: var(--md-sys-spacing-4) 0 var(--md-sys-spacing-2); }

  /* A tab read as questions (admin/_blocks.html): each block opens with the one it answers. */
  .insight-block { margin: var(--md-sys-spacing-8) 0; scroll-margin-top: 5rem; }
  .insight-block-head { margin-bottom: var(--md-sys-spacing-3); padding-bottom: var(--md-sys-spacing-2); border-bottom: 1px solid var(--md-sys-color-outline-variant); }
  .insight-block-title { margin: 0; color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-title-large); letter-spacing: var(--md-sys-typescale-title-large-tracking); }
  .insight-block-head .hint { margin: var(--md-sys-spacing-1) 0 0; }
  .insight-block .viz-grid, .insight-block > .viz { margin-bottom: var(--md-sys-spacing-4); }
  .funnel-steps { margin: var(--md-sys-spacing-2) 0; }
  /* The evidence per check (admin/quality/_evidence.html): each rule named, its reasons under it. */
  .evidence-rules { margin: 0 0 var(--md-sys-spacing-3); }
  .evidence-table td { vertical-align: baseline; }
  /* The table shares its width by each cell's longest line: a code beside the name outweighed the reasons and
     squeezed them to a word a line. The numeric heads may wrap so the reasons' floor fits a 1280px window. */
  .evidence-table th.num { white-space: normal; }
  .evidence-code { margin-top: .15rem; }
  .evidence-fired { min-width: 14rem; }
  .evidence-table .badge { white-space: nowrap; }
  .evidence-rule + .evidence-rule { margin-top: var(--md-sys-spacing-2); }
  .evidence-reasons { margin: var(--md-sys-spacing-1) 0 0; padding-left: var(--md-sys-spacing-4); font-size: var(--md-sys-typescale-body-small-size);
    color: var(--md-sys-color-on-surface-variant); }
  .viz .kpi-row .stat-tile { background: var(--md-sys-color-surface-container-low); }

  /* ─── Agents, observability, audit and the rest ──────────────────────────── */
  .panel > .viz-stack { margin-bottom: var(--md-sys-spacing-4); }
  .sync-cell { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--md-sys-spacing-2) var(--md-sys-spacing-2); }
  .sync-cell .meter { min-width: 7rem; }
  .icon-chips { display: inline-flex; flex-wrap: wrap; gap: var(--md-sys-spacing-1); }
  .icon-chip { display: inline-flex; align-items: center; gap: var(--md-sys-spacing-1); padding: .05rem var(--md-sys-spacing-2); border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 999px; font-size: var(--md-sys-typescale-body-small-size); color: var(--md-sys-color-on-surface-variant); white-space: nowrap; }
  .icon-chip .material-symbols-outlined { font-size: .95rem; }
  .icon-chip.pin-pending, .icon-chip.pin-diverged { color: var(--md-extended-color-warning); border-color: color-mix(in srgb, var(--md-extended-color-warning) 45%, transparent); }
  .cell-name { font-size: var(--md-sys-typescale-body-small-size); color: var(--md-sys-color-on-surface-variant); }
  .bar-row-selected .bar-label { font-weight: 600; }
  .badge-icon { display: inline-flex; align-items: center; gap: var(--md-sys-spacing-1); }
  .badge-icon .material-symbols-outlined { font-size: .85rem; }
  .kv-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--md-sys-spacing-2) var(--md-sys-spacing-5); margin: var(--md-sys-spacing-3) 0; font-size: var(--md-sys-typescale-body-medium-size); }
  .kv-list > div { display: contents; }
  .kv-list dt { color: var(--md-sys-color-on-surface-variant); }
  .kv-list dt[title] { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
  .kv-list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
  .served-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--md-sys-spacing-2) var(--md-sys-spacing-2); }
  .served-line .meter { min-width: 14rem; }
  .viz-outline .bar-list-plain { grid-template-columns: minmax(0, 1fr) minmax(6rem, 2fr) max-content; }
  .data-table .look-findings .stack-row { flex: 0 1 6rem; min-width: 3rem; }
  .data-table .look-findings > span:last-child { white-space: nowrap; }

  /* ─── The bases as cards, what needs attention, where the sources stand ───── */
  .base-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--md-sys-spacing-4);
    margin: var(--md-sys-spacing-3) 0 var(--md-sys-spacing-4); padding: 0; list-style: none; }
  .base-card { display: flex; flex-direction: column; gap: var(--md-sys-spacing-3); min-width: 0; padding: var(--md-sys-spacing-4);
    border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-medium); background: var(--md-sys-color-surface-container-low); }
  .base-card-retired { background: var(--md-sys-color-surface); border-style: dashed; }
  .base-card-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--md-sys-spacing-2); align-items: baseline; }
  .base-card-title { font: var(--md-sys-typescale-title-medium); overflow-wrap: anywhere; }
  .base-card-head .cell-name { grid-column: 1 / -1; }
  .base-card-badges { display: inline-flex; gap: var(--md-sys-spacing-1); }
  .base-card-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--md-sys-spacing-2) var(--md-sys-spacing-4); margin: 0;
    font-size: var(--md-sys-typescale-body-medium-size); }
  .base-card-facts > div { display: contents; }
  .base-card-facts dt { color: var(--md-sys-color-on-surface-variant); }
  .base-card-facts dt[title], .base-card-sub[title] { cursor: help; }
  .base-card-facts dd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--md-sys-spacing-1) var(--md-sys-spacing-2); margin: 0; min-width: 0; }
  .base-card-facts .sync-cell .meter { min-width: 5rem; }
  .base-card-facts .look-findings .stack-row { flex: 0 1 4rem; min-width: 2.5rem; }
  .base-card-facts .look-findings > span:last-child { white-space: nowrap; }
  .base-card-sub { color: var(--md-sys-color-on-surface-variant); font-size: var(--md-sys-typescale-body-small-size); }
  .base-card-ok { display: flex; align-items: center; gap: var(--md-sys-spacing-1); margin: auto 0 0; color: var(--md-sys-color-on-surface-variant);
    font-size: var(--md-sys-typescale-body-small-size); }
  .base-card .alert-list { margin-top: auto; }
  /* An alert's level is its icon and a word for a screen reader, the colour only beside them. */
  .alert-list { display: flex; flex-direction: column; gap: var(--md-sys-spacing-1); margin: 0 0 var(--md-sys-spacing-4); padding: 0; list-style: none; }
  .alert-item { display: flex; align-items: flex-start; gap: var(--md-sys-spacing-2); padding: var(--md-sys-spacing-1) var(--md-sys-spacing-2);
    border-left: 3px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-extra-small); background: var(--md-sys-color-surface-container);
    font-size: var(--md-sys-typescale-body-medium-size); }
  .alert-list-compact .alert-item { font-size: var(--md-sys-typescale-body-small-size); }
  .alert-item .material-symbols-outlined { font-size: 1.1rem; }
  .alert-item a { color: var(--md-sys-color-on-surface); }
  .alert-error { border-left-color: var(--md-sys-color-error); }
  .alert-error .material-symbols-outlined { color: var(--md-sys-color-error); }
  .alert-warning { border-left-color: var(--md-extended-color-warning); }
  .alert-warning .material-symbols-outlined { color: var(--md-extended-color-warning); }
  .alert-info .material-symbols-outlined { color: var(--md-sys-color-on-surface-variant); }
  .alert-more { border-left-color: transparent; background: none; }
  .attention { margin: var(--md-sys-spacing-4) 0; }
  .active-not-healthy { display: flex; align-items: flex-start; gap: var(--md-sys-spacing-2); }

  /* ─── Delivery cycles, drawn (cycles.html, project_cycle.html, _cycle.html) ─── */
  /* A cycle's hue follows it across the page, in the catalogue's order; past eight it is the de-emphasis grey. */
  .cycle-slot-0 { --cycle: var(--viz-deemph); }
  .cycle-slot-1 { --cycle: var(--viz-cat-1); } .cycle-slot-2 { --cycle: var(--viz-cat-2); }
  .cycle-slot-3 { --cycle: var(--viz-cat-3); } .cycle-slot-4 { --cycle: var(--viz-cat-4); }
  .cycle-slot-5 { --cycle: var(--viz-cat-5); } .cycle-slot-6 { --cycle: var(--viz-cat-6); }
  .cycle-slot-7 { --cycle: var(--viz-cat-7); } .cycle-slot-8 { --cycle: var(--viz-cat-8); }
  .cycle-swatch { display: inline-block; flex: none; width: .7rem; height: .7rem; margin-right: var(--md-sys-spacing-2); border-radius: 3px;
    background: var(--cycle); vertical-align: -.05em; }
  .cycle-card-head .cycle-swatch { align-self: center; margin-right: 0; }
  .cycle-card .page-meta { margin: .15rem 0 var(--md-sys-spacing-2); }
  .cycle-card .fact-chips { margin: var(--md-sys-spacing-2) 0; }
  .cycle-card-rows { display: grid; gap: var(--md-sys-spacing-2); margin: var(--md-sys-spacing-2) 0 var(--md-sys-spacing-2); }
  .cycle-card-rows > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; gap: var(--md-sys-spacing-2); }
  .cycle-card-rows dt { font-size: var(--md-sys-typescale-label-small-size); text-transform: uppercase; letter-spacing: .05em; color: var(--md-sys-color-on-surface-variant); }
  .cycle-card-rows dd { margin: 0; min-width: 0; }
  .cycle-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--md-sys-spacing-2); margin: var(--md-sys-spacing-2) 0 0; }

  .compare-scroll { overflow-x: auto; }
  .compare-table th.num .cycle-swatch { margin-right: var(--md-sys-spacing-1); }
  .compare-table th .meta { white-space: normal; text-transform: none; letter-spacing: 0; font-weight: 400; }
  .compare-cell { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--md-sys-spacing-2); }
  .compare-table td:first-child { min-width: 10rem; }
  .compare-track { width: 3.5rem; height: 8px; overflow: hidden; border-radius: 4px;
    background: color-mix(in srgb, var(--cycle) 22%, transparent); }
  .compare-fill { display: block; height: 100%; min-width: 2px; border-radius: 0 4px 4px 0; background: var(--cycle); }
  .compare-value { min-width: 3.5rem; text-align: right; font-variant-numeric: tabular-nums; }

  /* Projects by state: at work in the accent, stalled in the warning a person acts on, completed set back in grey. */
  .seg-active { --seg: var(--viz-cat-1); }
  .seg-stalled { --seg: var(--viz-sev-warning); }
  .seg-completed { --seg: var(--viz-deemph); }
  .seg-approved { --seg: var(--viz-div-pos); }
  .seg-approved_with_reservations { --seg: var(--viz-ord-1); }
  .seg-rejected { --seg: var(--viz-div-neg); }
  .seg-waived { --seg: var(--viz-deemph); }
  .parts-line { display: flex; flex-direction: column; gap: var(--md-sys-spacing-1); margin: var(--md-sys-spacing-1) 0; min-width: 0; }
  .parts-line .stack-row { width: 100%; }
  .key-row { display: flex; flex-wrap: wrap; gap: var(--md-sys-spacing-1) var(--md-sys-spacing-3); font-size: var(--md-sys-typescale-body-small-size); color: var(--md-sys-color-on-surface-variant); }
  .key { display: inline-flex; align-items: center; gap: var(--md-sys-spacing-1); white-space: nowrap; }
  .key strong { color: var(--md-sys-color-on-surface); font-weight: 600; }
  .key-swatch { display: inline-block; width: .6rem; height: .6rem; border-radius: 2px; background: var(--seg, var(--viz-deemph)); }
  .state-chip { display: inline-flex; align-items: center; gap: var(--md-sys-spacing-1); white-space: nowrap; }
  .cycle-states, .cycle-severities, .gate-line { max-width: 36rem; }
  .part-short { display: inline-flex; align-items: center; gap: .15rem; color: var(--md-sys-color-on-surface-variant); }
  .part-short .material-symbols-outlined { font-size: .9rem; }
  .section-meta { margin-left: var(--md-sys-spacing-2); font-size: var(--md-sys-typescale-body-small-size); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--md-sys-color-on-surface-variant); }
  .cycle-severities { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--md-sys-spacing-2); }
  .cycle-severities .stack-row { flex: 1 1 12rem; width: auto; }
  .cycle-projects .meter { min-width: 5rem; }
  .fact-chip-warn { border-color: color-mix(in srgb, var(--viz-sev-warning) 60%, var(--md-sys-color-outline-variant)); }
  .stat-value-sm { font-size: var(--md-sys-typescale-body-large-size); }
  .stamp { white-space: nowrap; }

  .cycle-title .admin-section-title { margin-bottom: var(--md-sys-spacing-1); }
  .cycle-title .page-meta { margin: 0; }
  .filter-scope { font-size: var(--md-sys-typescale-body-medium-size); color: var(--md-sys-color-on-surface-variant); }

  .indicator-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: var(--md-sys-spacing-3);
    align-items: start; margin-bottom: var(--md-sys-spacing-3); }
  .indicator-card { min-width: 0; padding: var(--md-sys-spacing-3) var(--md-sys-spacing-4); border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-medium); background: var(--md-sys-color-surface-container); scroll-margin-top: 5rem; }
  .indicator-name { margin: 0 0 var(--md-sys-spacing-1); font-size: var(--md-sys-typescale-label-medium-size); font-weight: 600; color: var(--md-sys-color-on-surface-variant); }
  .indicator-value { margin: 0; font-size: var(--md-sys-typescale-title-large-size); font-weight: 700; line-height: 1.2; }
  .indicator-value .meta { font-size: var(--md-sys-typescale-body-small-size); font-weight: 400; }
  .indicator-short { margin: .1rem 0; display: flex; flex-wrap: wrap; gap: var(--md-sys-spacing-1); align-items: center; font-size: var(--md-sys-typescale-body-small-size); }
  .indicator-parts { margin: var(--md-sys-spacing-2) 0 0; display: flex; flex-wrap: wrap; gap: var(--md-sys-spacing-1); }
  .indicator-card > .hint, .indicator-card > .meta { margin: var(--md-sys-spacing-1) 0 0; }
  .indicator-list { list-style: none; margin: var(--md-sys-spacing-2) 0 0; padding: 0; display: grid; gap: var(--md-sys-spacing-1); font-size: var(--md-sys-typescale-body-small-size);
    color: var(--md-sys-color-on-surface-variant); }
  .indicator-list code { margin-right: var(--md-sys-spacing-1); color: var(--md-sys-color-on-surface); }
  .indicator-more > summary { cursor: pointer; width: fit-content; margin-top: var(--md-sys-spacing-1); font-size: var(--md-sys-typescale-body-small-size); color: var(--md-sys-color-on-surface-variant); }
  .unmeasured-list { margin: var(--md-sys-spacing-1) 0 0; padding-left: var(--md-sys-spacing-4); display: grid; gap: var(--md-sys-spacing-1); font-size: var(--md-sys-typescale-body-medium-size); }
  .unmeasured-list li { scroll-margin-top: 5rem; }

  /* ─── What the templates said in style attributes ────────────────────────
     Last in the last layer, so a utility wins over the rule it adjusts. */
  .field-row { display: flex; gap: var(--md-sys-spacing-2); align-items: end; }
  .field-row-wrap { flex-wrap: wrap; }
  .field-row-loose { column-gap: var(--md-sys-spacing-6); }
  .field-grow { flex: 1; }
  .field-grow-2 { flex: 2; }
  .field-min-10 { min-width: 10rem; }
  .field-min-14 { min-width: 14rem; }
  .inline-check { display: flex; gap: var(--md-sys-spacing-1); align-items: center; }
  .button-row { display: flex; gap: var(--md-sys-spacing-2); margin-top: var(--md-sys-spacing-3); }
  .scroll-box { max-height: 40vh; overflow: auto; }
  .parts-cell { min-width: 7rem; }
  .inline { display: inline; }
  .inline-block { display: inline-block; }
  .icon-small { font-size: 1rem; }
  .icon-medium { font-size: 1.1rem; }
  .mt-1 { margin-top: var(--md-sys-spacing-1); }
  .mt-2 { margin-top: var(--md-sys-spacing-2); }
  .mt-3 { margin-top: var(--md-sys-spacing-3); }
  .mt-12 { margin-top: var(--md-sys-spacing-12); }
  .mb-4 { margin-bottom: var(--md-sys-spacing-4); }
  .my-4 { margin-top: var(--md-sys-spacing-4); margin-bottom: var(--md-sys-spacing-4); }

  /* The full reindex card: who holds the lock, and a failed fetch's words, which can be long. */
  .reindex-holder { display: flex; flex-wrap: wrap; align-items: center; gap: var(--md-sys-spacing-2); }
  .reindex-error { font-size: var(--md-sys-typescale-body-small-size); color: var(--md-sys-color-error); overflow-wrap: anywhere; }
  /* The run's log: one line per step or record, the time and level first, a traceback folded under its line. */
  .reindex-log { margin-top: var(--md-sys-spacing-3); }
  .reindex-log > summary { cursor: pointer; font-weight: 500; }
  .reindex-events { list-style: none; margin: var(--md-sys-spacing-2) 0 0; padding: 0; }
  .reindex-event { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--md-sys-spacing-2);
                   padding: var(--md-sys-spacing-1) 0; border-bottom: 1px solid var(--md-sys-color-outline-variant);
                   font-size: var(--md-sys-typescale-body-small-size); }
  .reindex-event time, .reindex-source { font-family: var(--md-ref-typeface-mono); color: var(--md-sys-color-on-surface-variant); }
  .reindex-message { flex: 1 1 20rem; overflow-wrap: anywhere; }
  .reindex-event-error .reindex-message { color: var(--md-sys-color-error); }
  .reindex-trace { flex-basis: 100%; }
  .reindex-trace pre { margin: var(--md-sys-spacing-1) 0 0; max-height: 16rem; overflow: auto; white-space: pre-wrap;
                       font-size: var(--md-sys-typescale-body-small-size); }
}