/* BPC design system v0.1 (phase 2 of the UX overhaul, 2 November 2026).
   Every rule that changes the look is scoped to html.ds2, which base.html sets on every page
   since the owner made the new look the default (2 November 2026).
   Proposal and contrast checks: docs/superpowers/audit/2026-11-02/summary-visual.md section 5. */

:root {
  /* Type: seven sizes in rem so browser text-size preferences apply; nothing below 12 px. */
  --text-xs: .75rem;     /* 12: meta, badges, table headers */
  --text-sm: .875rem;    /* 14: table cells, labels, small buttons */
  --text-base: .9375rem; /* 15: reading text, inputs, buttons */
  --text-md: 1.125rem;   /* 18: h3, card and step titles */
  --text-lg: 1.375rem;   /* 22: h2 */
  --text-xl: 1.75rem;    /* 28: h1 */
  --text-2xl: 2.25rem;   /* 36: library h1 only */

  /* Colour: every text pair passes WCAG AA (ratios in the audit summary). */
  --color-surface: #ffffff;
  --color-bg: #f5f7fa;
  --color-bg-subtle: #eef1f5;
  --color-border: #dde3eb;
  --color-border-control: #7a879a;
  --color-text: #172238;
  --color-text-secondary: #2b3648;
  --color-text-muted: #556275;
  --color-primary: #294294;
  --color-primary-hover: #1d3278;
  --color-primary-soft: #eef2fc;
  --color-primary-border: #d6e0f5;
  --color-success-bg: #e7f4ee; --color-success-fg: #12634c; --color-success-border: #7fbfa6;
  --color-warning-bg: #fff3d6; --color-warning-fg: #7a4f00; --color-warning-border: #d9a84a;
  --color-danger-bg: #fdecef;  --color-danger-fg: #a3002a;  --color-danger-border: #e795a7;
  --color-info-bg: #e9f1fd;    --color-info-fg: #1f4a99;
  --color-approved-bg: #f2edfa; --color-approved-fg: #5a3a8f;
  --color-focus: #294294;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
}

/* Base */
html.ds2 { font-size: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--color-text); }
html.ds2 body { font-size: var(--text-base); line-height: 1.55; }
html.ds2 h1 { font-size: var(--text-xl); line-height: 1.2; }
html.ds2 h2 { font-size: var(--text-lg); line-height: 1.3; }
html.ds2 h3 { font-size: var(--text-md); line-height: 1.35; }
html.ds2 h4 { font-size: var(--text-base); }
html.ds2 .library-hero h1 { font-size: var(--text-2xl); }
/* Readable line length for prose only: lists with a class are components (grid or flex rows)
   and set their own width; the old rule cut the alignment queue rows to 709 px. */
html.ds2 p, html.ds2 :is(ul, ol):not([class]) > li, html.ds2 dd { max-width: 75ch; }
html.ds2 .empty-state p { margin-inline: auto; }
html.ds2 .muted, html.ds2 small { color: var(--color-text-muted); }
html.ds2 small { font-size: max(var(--text-xs), .85em); }
html.ds2 .eyebrow { font-size: var(--text-xs); letter-spacing: .04em; color: var(--color-text-muted); }
html.ds2 :is(p, dd) a:not(.button) { text-decoration: underline; text-underline-offset: 2px; }

/* Forms: visible control borders (3:1) and a clear focus ring */
html.ds2 label { font-size: var(--text-sm); font-weight: 600; }
html.ds2 input:not([type=hidden]):not([type=checkbox]):not([type=radio]), html.ds2 select, html.ds2 textarea { font-size: var(--text-base); border-color: var(--color-border-control); border-radius: var(--radius-md); }
html.ds2 :is(input, select, textarea):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-focus); }
html.ds2 .help-text, html.ds2 .helptext { font-size: var(--text-sm); }

/* Buttons: one height and type size, never inherited from a small container */
html.ds2 button, html.ds2 .button { font-size: var(--text-sm); font-weight: 600; min-height: 40px; padding: 8px 16px; border-radius: var(--radius-md); }
html.ds2 .secondary { border-color: var(--color-border-control); }
html.ds2 .icon-button { min-width: 36px; min-height: 36px; }
@media (max-width: 640px) {
  html.ds2 button, html.ds2 .button { min-height: 44px; }
  html.ds2 .icon-button { min-width: 44px; min-height: 44px; }
}

/* Badges: 12 px, sentence case, colour by meaning */
html.ds2 .badge { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0; text-transform: none; padding: 2px 8px; border-radius: var(--radius-sm); background: var(--color-bg-subtle); color: var(--color-text-secondary); border: 0; }
html.ds2 .badge.published, html.ds2 .badge.tone-emerald { background: var(--color-success-bg); color: var(--color-success-fg); }
html.ds2 .badge.draft, html.ds2 .badge.tone-blue { background: var(--color-info-bg); color: var(--color-info-fg); }
html.ds2 .badge.tone-amber { background: var(--color-warning-bg); color: var(--color-warning-fg); }
html.ds2 .badge.tone-red { background: var(--color-danger-bg); color: var(--color-danger-fg); }
html.ds2 .badge.classification { background: var(--color-approved-bg); color: var(--color-approved-fg); }
/* Review findings (priority-<code>) and process priority in the queue (priority-<0..3>) */
html.ds2 .badge:is(.priority-critical, .priority-0) { background: var(--color-danger-bg); color: var(--color-danger-fg); }
html.ds2 .badge:is(.priority-major, .priority-1, .priority-2) { background: var(--color-warning-bg); color: var(--color-warning-fg); }
html.ds2 .badge:is(.priority-minor, .priority-suggestion, .priority-3) { background: var(--color-bg-subtle); color: var(--color-text-secondary); }

/* Tables: readable headers without shouting */
html.ds2 th { font-size: var(--text-xs); letter-spacing: .02em; }
html.ds2 td { font-size: var(--text-sm); }
html.ds2 .summary-stats dt { font-size: var(--text-xs); letter-spacing: .02em; color: var(--color-text-muted); }

/* Notices */
html.ds2 .notice { border-radius: var(--radius-md); }
html.ds2 .notice.warning { background: var(--color-warning-bg); color: var(--color-warning-fg); border-color: var(--color-warning-border); }
html.ds2 .notice.success { background: var(--color-success-bg); color: var(--color-success-fg); border-color: var(--color-success-border); }

/* W1 · Pustaka: the first documents visible without scrolling (2 November 2026). */
html.ds2 .library-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-2) var(--space-6); margin-bottom: var(--space-4); }
html.ds2 .library-head h1 { margin: 0; font-size: var(--text-xl); }
html.ds2 .library-head p { margin: var(--space-1) 0 0; }
html.ds2 .library-facts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
html.ds2 .library-facts strong { color: var(--color-text); }
/* Filters fold behind the Filter button on every screen; closed means out of the tab order too. */
html.ds2 .filter-toggle { display: inline-flex; }
html.ds2 .library-main > .filter-form .filter-options { display: none; }
html.ds2 .library-main > .filter-form.filters-open .filter-options { display: grid; max-height: none; opacity: 1; padding-top: var(--space-3); }
html.ds2 .filter-form { padding: var(--space-3) var(--space-4); }
html.ds2 .filter-actions { margin-top: var(--space-2); font-size: var(--text-sm); }
/* Levels and document types as one row of chips */
html.ds2 .facet-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: var(--space-3) 0 var(--space-4); }
html.ds2 .facet-row .facet-scroll { overflow-x: auto; }
html.ds2 .facet-row > * { min-width: 0; max-width: 100%; }
html.ds2 .artifact-strip .facet-scroll { min-width: 0; }
html.ds2 .level-tabs, html.ds2 .artifact-tabs { display: flex; flex-wrap: nowrap; gap: 6px; min-width: 0; margin: 0; border: 0; background: none; box-shadow: none; border-radius: 0; overflow: visible; }
html.ds2 .level-tabs a, html.ds2 .level-tabs .is-empty, html.ds2 .artifact-tabs a { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; min-height: 0; padding: 5px 10px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-text-secondary); font-size: var(--text-sm); white-space: nowrap; box-shadow: none; }
html.ds2 .level-tabs strong, html.ds2 .artifact-tabs a span { display: inline; margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; }
html.ds2 .level-tabs small { display: inline; margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
html.ds2 .level-tabs .selected, html.ds2 .artifact-tabs a.selected { background: var(--color-primary); border-color: var(--color-primary); color: #fff; box-shadow: none; }
html.ds2 .level-tabs .selected :is(strong, small), html.ds2 .artifact-tabs a.selected span { color: #fff; }
html.ds2 .artifact-strip { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
html.ds2 .artifact-tabs .is-empty { display: none; }
html.ds2 .facet-label { font-size: var(--text-xs); color: var(--color-text-muted); }
/* Denser document rows: the decorative file icon goes, padding halves */
html.ds2 .document-list-table .document-icon { display: none; }
html.ds2 .document-list-table td { padding-top: 10px; padding-bottom: 10px; }
html.ds2 .document-list-table .document-title { font-size: var(--text-base); }
html.ds2 .table-heading { margin: var(--space-2) 0; }
html.ds2 .library-searchbar { grid-template-columns: minmax(0, 1fr) auto auto; }
@media (max-width: 640px) { html.ds2 .library-searchbar { grid-template-columns: minmax(0, 1fr) auto; } }
html.ds2 .level-tabs > *, html.ds2 .artifact-tabs > * { flex: 0 0 auto; }
/* One line for "v0.2 · Berlaku sejak 04 Sep 2026" */
@container (min-width: 761px) {
  html.ds2 .document-table-shell .document-list-table :is(td, th):first-child { width: 50%; }
  html.ds2 .document-table-shell .document-list-table :is(td, th):nth-child(2) { width: 24%; }
  html.ds2 .document-table-shell .document-list-table :is(td, th):nth-child(3) { width: 20%; }
  html.ds2 .document-table-shell .document-list-table :is(td, th):last-child { width: 6%; }
}
html.ds2 .document-list-table td:nth-child(3) > span { display: inline; }
html.ds2 .document-list-table td:nth-child(3) > .muted::before { content: " · "; }
html.ds2 .document-list-table td:nth-child(3) > .muted { font-size: var(--text-xs); }

/* W1 · Document detail: title, key facts and download in one header; details fold. */
html.ds2 .doc-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3) var(--space-6); margin: var(--space-2) 0 var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
html.ds2 .doc-header-main { flex: 1 1 520px; min-width: 0; }
html.ds2 .doc-header h1 { margin: var(--space-2) 0; font-size: var(--text-xl); }
html.ds2 .doc-facts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
html.ds2 .doc-facts strong { color: var(--color-text); font-weight: 600; }
html.ds2 .doc-header-actions { flex: 0 1 300px; display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
html.ds2 .doc-header-actions .button { justify-self: start; }
html.ds2 .doc-header-actions .controlled-copy-note { margin: 0; padding: 0; border: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
html.ds2 .document-control { padding: 0; margin: 0 0 var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: none; }
html.ds2 .document-control > details > summary, html.ds2 .fold-section > details > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); cursor: pointer; list-style: revert; }
html.ds2 .document-control summary h2, html.ds2 .fold-section summary h2 { display: inline; margin: 0; color: var(--color-text); font-size: var(--text-base); text-transform: none; letter-spacing: 0; }
html.ds2 .document-control summary .muted, html.ds2 .fold-section summary .muted { font-size: var(--text-sm); }
html.ds2 .document-control .control-metadata { padding: 0 var(--space-4) var(--space-4); }
html.ds2 .fold-section { padding: 0; }
html.ds2 .fold-section > details > :not(summary) { margin-left: var(--space-4); margin-right: var(--space-4); }
/* Document footer: related documents and document control fold below the content. */
/* Flex summaries lose the native disclosure triangle; draw one so every fold looks clickable. */
html.ds2 :is(.document-control, .fold-section) > details > summary { list-style: none; }
html.ds2 :is(.document-control, .fold-section) > details > summary::-webkit-details-marker { display: none; }
html.ds2 :is(.document-control, .fold-section) > details > summary::before { content: "›"; display: inline-block; width: 1ch; color: var(--color-primary); font-weight: 700; transition: transform .15s; }
html.ds2 :is(.document-control, .fold-section) > details[open] > summary::before { transform: rotate(90deg); }
html.ds2 .doc-parent { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
html.ds2 .doc-footer { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
html.ds2 .doc-footer .document-control { margin: 0; }
html.ds2 .doc-footer .fold-section { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
html.ds2 .doc-footer .fold-body { padding-bottom: var(--space-4); }
html.ds2 .doc-footer .fold-body h3 { margin: var(--space-3) 0 var(--space-1); font-size: var(--text-sm); }
html.ds2 .doc-footer .control-metadata { padding: 0; }
html.ds2 .doc-footer .link-list li, html.ds2 .doc-links .link-list li { padding: 6px 0; font-size: var(--text-sm); }
html.ds2 .doc-links { margin: var(--space-4) 0; }
html.ds2 .doc-links h2 .muted, html.ds2 .doc-links h3 .muted { font-weight: 400; font-size: var(--text-sm); }
html.ds2 .doc-links h3 { margin: var(--space-3) 0 var(--space-1); font-size: var(--text-sm); }
html.ds2 .sop-empty { margin: var(--space-1) 0 var(--space-3); color: var(--color-text-muted); }
@media (max-width: 640px) {
  html.ds2 .revision-history, html.ds2 .revision-history :is(tbody, tr, td) { display: block; width: auto; }
  html.ds2 .revision-history thead { display: none; }
  html.ds2 .revision-history tr { margin-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
  html.ds2 .revision-history td { border: 0; padding: 2px 0; }
  html.ds2 .revision-history td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: var(--color-text-muted); }
}
/* The document header already draws the rule above the first content section. */
html.ds2 :is(.doc-header, .document-paper > .breadcrumb-nav) + .process-section { border-top: 0; }
/* Library RACI: who does what, per step or per role; the full matrix is a third tab. */
html.ds2 .raci-reader { padding: var(--space-4) 0; }
html.ds2 .raci-reader .section-heading { align-items: center; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-2); }
html.ds2 .raci-reader h2 .muted { margin-left: var(--space-2); font-size: var(--text-sm); font-weight: 400; }
html.ds2 .raci-footnote { margin: var(--space-3) 0 0; max-width: none; font-size: var(--text-xs); color: var(--color-text-muted); }
/* Full matrix: role names run upwards so a column needs only a few lines of width, and the
   letters that matter most (R, A) are filled while C and I stay quiet. */
html.ds2 .raci-legend { gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-2); padding: 0; max-width: none; }
html.ds2 .raci-legend .raci-mark { min-width: 22px; height: 20px; }
html.ds2 .raci-legend .raci-scroll-hint { margin-left: auto; color: var(--color-text-muted); }
html.ds2 .raci-matrix-scroll { width: fit-content; max-width: 100%; max-height: 85vh; border-radius: var(--radius-md); }
html.ds2 .raci-matrix-compact .step-no { min-width: 1.6em; }
html.ds2 .raci-matrix-compact { width: auto; min-width: 0; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); }
html.ds2 .raci-matrix-compact thead th { width: auto; min-width: 0; max-width: none; padding: var(--space-2) 4px; background: var(--color-surface-muted, #f1f4f9); color: var(--color-text); font-size: var(--text-xs); font-weight: 600; vertical-align: bottom; border-bottom: 1px solid var(--color-border); }
html.ds2 .raci-matrix-compact thead th span { display: block; max-height: 190px; margin: 0 auto; writing-mode: vertical-rl; transform: rotate(180deg); line-height: 1.25; text-align: left; overflow: hidden; }
html.ds2 .raci-matrix-compact thead th:first-child { min-width: 300px; width: 300px; text-align: left; }
html.ds2 .raci-matrix-compact tbody th { min-width: 300px; width: 300px; max-width: 360px; padding: 6px var(--space-2); background: var(--color-surface); font-weight: 500; line-height: 1.4; text-align: left; border: 0; border-bottom: 1px solid var(--color-border); border-right: 1px solid var(--color-border); }
html.ds2 .raci-matrix-compact td { min-width: 34px; padding: 4px 3px; border: 0; border-bottom: 1px solid var(--color-border); border-right: 1px solid #eef1f6; }
html.ds2 .raci-matrix-compact tbody tr:hover :is(th, td) { background: #f6f8fc; }
html.ds2 .raci-matrix-compact .raci-mark { min-width: 26px; height: 22px; border-radius: 4px; }
html.ds2 .raci-reader .raci-mark.R { background: #294294; border-color: #294294; color: #fff; }
html.ds2 .raci-reader .raci-mark.A { background: #c6002d; border-color: #c6002d; color: #fff; }
html.ds2 .raci-reader .raci-mark.AR { background: #6b1f63; border-color: #6b1f63; color: #fff; }
html.ds2 .raci-reader .raci-mark.C { background: #fff; border-color: #c9a24a; color: #7a5410; }
html.ds2 .raci-reader .raci-mark.I { background: #fff; border-color: #c7cfdb; color: var(--color-text-muted); }
html.ds2 .raci-steps { margin: var(--space-2) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border); }
/* Desktop: one row per step, aligned like a table (step | executor | owner). */
html.ds2 .raci-steps > li { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-1) var(--space-4); max-width: none; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); line-height: 1.5; color: var(--color-text); }
html.ds2 .raci-steps p { max-width: none; font-size: var(--text-sm); line-height: 1.5; color: inherit; }
html.ds2 .raci-step-title { grid-column: 1; margin: 0; font-weight: 600; }
html.ds2 .raci-who { display: contents; }
html.ds2 .raci-who > div:first-child { grid-column: 2; grid-row: 1 / span 2; }
html.ds2 .raci-who > div:last-child { grid-column: 3; grid-row: 1 / span 2; }
html.ds2 .raci-who dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* One column header row on desktop instead of the same two labels on every step. */
html.ds2 .raci-steps-head { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-2); padding: var(--space-1) 0; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
html.ds2 .raci-steps-head + .raci-steps { margin-top: 0; }
html.ds2 .raci-who dd { margin: 0; max-width: none; }
html.ds2 .raci-more { grid-column: 1; margin: 0 0 0 2.15em; }
html.ds2 .raci-more summary { cursor: pointer; color: var(--color-primary); font-size: var(--text-xs); }
html.ds2 .raci-more p { margin: var(--space-1) 0 0; color: var(--color-text-muted); }
html.ds2 .step-no { display: inline-block; min-width: 1.8em; margin-right: var(--space-1); font-weight: 700; color: var(--color-primary); }
html.ds2 .raci-role-picker { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-2); margin: var(--space-3) 0; }
html.ds2 .raci-role-picker label { flex-basis: 100%; font-weight: 600; font-size: var(--text-sm); }
html.ds2 .raci-role-picker select { flex: 1 1 320px; max-width: 640px; }
html.ds2 .raci-role-duties h4 { margin: var(--space-4) 0 var(--space-1); font-size: var(--text-sm); }
html.ds2 .raci-role-duties h4 .muted { font-weight: 400; }
html.ds2 .raci-role-class { margin: var(--space-2) 0 var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); font-size: var(--text-sm); max-width: 72ch; }
html.ds2 .raci-role-class p { margin: 0 0 var(--space-1); }
html.ds2 .raci-role-class dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-3); margin: var(--space-2) 0 0; }
html.ds2 .raci-role-class dt { font-weight: 600; }
html.ds2 .raci-role-class dd { margin: 0; }
@media (max-width: 600px) { html.ds2 .raci-role-class dl { grid-template-columns: minmax(0, 1fr); } html.ds2 .raci-role-class dd { margin-bottom: var(--space-1); } }
html.ds2 .raci-role-class .raci-role-class-breach { margin: var(--space-2) 0 0; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--color-warning-bg); color: var(--color-warning-fg); font-weight: 600; }
html.ds2 .raci-duties { margin: 0; padding: 0; list-style: none; }
html.ds2 .raci-duties li { max-width: none; padding: 6px 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); line-height: 1.5; color: var(--color-text); }
html.ds2 .raci-reader > .section-heading p, html.ds2 .raci-reader + .process-section :is(p, li) { font-size: var(--text-sm); color: var(--color-text); }
html.ds2 .raci-duties .step-no { min-width: 6.5em; }
@media (max-width: 640px) {
  html.ds2 .raci-steps > li { grid-template-columns: minmax(0, 1fr); }
  html.ds2 .raci-who > div:is(:first-child, :last-child), html.ds2 .raci-more { grid-column: 1; grid-row: auto; }
  html.ds2 .raci-who > div { display: flex; flex-wrap: wrap; gap: 0 var(--space-1); }
  html.ds2 .raci-who dt::after { content: ":"; }
  html.ds2 .raci-who dt { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: var(--text-sm); color: var(--color-text-muted); }
  html.ds2 .raci-steps-head { display: none; }
  html.ds2 .raci-more { margin-left: 0; }
  html.ds2 .raci-reader .section-heading { flex-direction: column; align-items: flex-start; }
  html.ds2 .raci-matrix-compact :is(thead th:first-child, tbody th) { min-width: 150px; width: 150px; font-size: var(--text-xs); }
  html.ds2 .raci-legend .raci-scroll-hint { margin-left: 0; }
}
/* BPMN: one flow section (trigger and result, then the diagram or the activity list). */
html.ds2 .flow-section .section-heading { align-items: center; margin-bottom: var(--space-2); }
html.ds2 .flow-section h2 .muted { margin-left: var(--space-2); font-size: var(--text-sm); font-weight: 400; }
html.ds2 .flow-ends { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-3); font-size: var(--text-sm); }
html.ds2 .flow-ends > div { padding: var(--space-2) var(--space-3); border-left: 3px solid var(--color-accent, #6c93cc); background: var(--color-surface); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
html.ds2 .flow-ends > div:last-child { border-left-color: #3d9a78; }
html.ds2 .flow-ends dt { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
html.ds2 .flow-ends dd { margin: 0; max-width: none; color: var(--color-text); }
html.ds2 .flow-legend { margin: var(--space-2) 0 0; padding: 0; gap: var(--space-1) var(--space-3); max-width: none; }
html.ds2 .flow-section > .feedback-link { display: inline-block; margin-bottom: var(--space-2); }
/* Lane names stay in view while the diagram scrolls sideways (the rail covers the drawn column). */
html.ds2 .diagram-scroll.has-rail { display: flex; max-height: 80vh; }
html.ds2 .diagram-scroll .lane-rail { position: sticky; left: 0; z-index: 1; flex: none; box-shadow: 2px 0 4px rgba(15, 23, 42, .08); }
html.ds2 .diagram-scroll .lane-rail + svg { flex: none; max-width: none; margin-left: -170px; }
html.ds2 .step-tag { display: inline-block; margin-left: var(--space-1); padding: 0 6px; border: 1px solid var(--color-border); border-radius: 999px; font-size: var(--text-xs); font-weight: 500; color: var(--color-text-muted); vertical-align: 1px; }
@media (max-width: 640px) {
  html.ds2 .flow-ends { grid-template-columns: 1fr; }
  html.ds2 .flow-section .section-heading { flex-direction: column; align-items: flex-start; }
}
/* Library preview panel: the hierarchy as one trail line, as the document page's breadcrumb. */
html.ds2 .summary-trail { margin: var(--space-2) 0; font-size: var(--text-sm); color: var(--color-text-muted); }
/* Library list: one owner column, revision and date on one line, tighter rows (owner review,
   3 November 2026). Scoped to the library page; workspace tables share the base classes. */
html.ds2 .library-page .document-list-table td { padding-top: var(--space-2); padding-bottom: var(--space-2); vertical-align: middle; }
html.ds2 .library-page .document-list-table .document-codes { margin-bottom: 2px; }
html.ds2 .library-page .document-list-table .document-title { line-height: 1.4; }
html.ds2 .library-page .document-table-secondary { font-size: var(--text-sm); color: var(--color-text-muted); }
html.ds2 .library-page .document-revision { white-space: nowrap; }
html.ds2 .library-page .document-revision .version { font-weight: 600; }
html.ds2 .library-page .document-table-mobile-meta { justify-content: space-between; flex-wrap: nowrap; margin-top: var(--space-1); font-size: var(--text-xs); }
html.ds2 .library-page .document-table-mobile-meta .icon-button { flex: none; }
html.ds2 .library-page .active-filters { align-items: center; }
html.ds2 .library-page .library-searchbar { align-items: center; }
@container (min-width: 761px) {
  html.ds2 .library-page .document-table-shell .document-list-table :is(td, th):first-child { width: auto; }
  html.ds2 .library-page .document-table-shell .document-list-table :is(td, th):nth-child(2) { width: 21%; }
  html.ds2 .library-page .document-table-shell .document-list-table :is(td, th):nth-child(3) { width: 150px; }
  html.ds2 .library-page .document-table-shell .document-list-table :is(td, th):last-child { width: 96px; }
}
@container (max-width: 760px) {
  html.ds2 .library-page .document-table-main-cell { padding: var(--space-3); }
}
/* One form field pattern (includes/form_field.html): help above the field, errors below it. */
html.ds2 .form-field > label { display: block; font-weight: 600; font-size: var(--text-sm); }
html.ds2 .field-optional { font-weight: 400; color: var(--color-text-muted); }
html.ds2 .field-help { margin: 2px 0 var(--space-1); max-width: 75ch; font-size: var(--text-xs); color: var(--color-text-muted); }
html.ds2 .field-error { margin: var(--space-1) 0 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-danger, #c6002d); }
html.ds2 .form-field-check > label { display: flex; align-items: flex-start; gap: var(--space-2); font-weight: 500; }
html.ds2 .workspace-actions:has(> button[type="submit"]) { flex-wrap: wrap; align-items: center; }
html.ds2 .auth-page form > .form-field { margin: 0 0 var(--space-4); }
/* Long answers start at four lines and grow on demand, instead of leaving a hole in the grid. */
html.ds2 .workspace-fields textarea { height: 7.5em; min-height: 4.5em; max-height: 24em; resize: vertical; field-sizing: content; }
html.ds2 .form-field-choices { margin: 0; padding: 0; border: 0; min-width: 0; }
html.ds2 .form-field-choices > legend { font-weight: 600; font-size: var(--text-sm); padding: 0; }
/* Changed lines in the revision comparison are prose in a classed list: keep them readable. */
html.ds2 .line-changes li { max-width: 75ch; }
/* Error pages share one layout; the login footnote rule must not draw a line above the button. */
html.ds2 .error-page > p:last-child { margin-top: var(--space-4); padding-top: 0; border-top: 0; }
html.ds2 .error-page h1 { margin-top: 0; }
html.ds2 .error-page img { display: block; margin-bottom: var(--space-3); }
/* Responsibility matrix: filters in one row, defaults folded once, cards on a phone. */
html.ds2 .responsibility-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); }
html.ds2 .responsibility-filters label { flex: 1 1 200px; }
html.ds2 .responsibility-folds { display: grid; gap: var(--space-2); margin: var(--space-3) 0; }
html.ds2 .responsibility-folds .fold-section { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
html.ds2 .responsibility-table td small { display: block; margin-top: 2px; color: var(--color-text-muted); font-size: var(--text-xs); }
html.ds2 .responsibility-table td { vertical-align: top; font-size: var(--text-sm); }
@media (max-width: 640px) {
  html.ds2 .responsibility-table, html.ds2 .responsibility-table :is(tbody, tr, td) { display: block; width: auto; }
  html.ds2 .responsibility-table thead { display: none; }
  html.ds2 .responsibility-table tr { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
  html.ds2 .responsibility-table td { border: 0; padding: 2px 0; }
  html.ds2 .responsibility-table td[data-label]:not([data-label="Dokumen"])::before { content: attr(data-label) ": "; font-weight: 600; color: var(--color-text-muted); }
}
/* Tugas Saya: tasks grouped by the action asked, one compact row per document. */
html.ds2 .task-group { margin: var(--space-4) 0 0; }
html.ds2 .task-group h3 { margin: 0; font-size: var(--text-base); }
html.ds2 .task-group h3 .muted { font-weight: 400; font-size: var(--text-sm); }
html.ds2 .task-group-reason { margin: 2px 0 var(--space-2); font-size: var(--text-sm); }
html.ds2 .task-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border); }
html.ds2 .task-rows > .task-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
html.ds2 .task-row-main { min-width: 0; }
html.ds2 .task-row-main .document-title { display: block; font-size: var(--text-sm); }
html.ds2 .task-row-main .document-title code { margin-right: var(--space-1); }
html.ds2 .task-row-main > .muted { font-size: var(--text-xs); }
html.ds2 .task-row-main p { margin: var(--space-1) 0 0; font-size: var(--text-sm); }
html.ds2 .task-row .button { flex: none; }
html.ds2 .task-attention { color: var(--color-warning-fg, #8a5a00); font-weight: 600; }
@media (max-width: 640px) {
  html.ds2 .task-rows > .task-row { flex-direction: column; align-items: stretch; }
}
/* Access page: reference blocks (rollout register, audit copy) fold below the work. */
html.ds2 .access-reference { display: grid; gap: var(--space-2); margin-top: var(--space-6); }
html.ds2 .access-reference > .fold-section { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
/* Program SOP Inti: one funnel line, the work register first, reference material folded. */
html.ds2 .sop-funnel { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-3) 0; padding: 0; list-style: none; }
html.ds2 .sop-funnel li { display: flex; align-items: baseline; gap: var(--space-1); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); font-size: var(--text-sm); }
html.ds2 .sop-funnel li + li::before { content: "→"; margin-right: var(--space-1); color: var(--color-text-muted); }
html.ds2 .sop-funnel strong { font-size: var(--text-md); }
html.ds2 .filter-fold > summary { cursor: pointer; margin: var(--space-2) 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); }
html.ds2 .core-sop-reference { display: grid; gap: var(--space-2); margin-top: var(--space-6); }
html.ds2 .core-sop-reference > .fold-section { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
/* Values shared by every row of a table, written once above it. */
html.ds2 .shared-values { margin: var(--space-2) 0; padding: var(--space-2) var(--space-3); border-left: 3px solid var(--color-accent, #6c93cc); background: var(--color-surface); }
html.ds2 .shared-values dt { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
html.ds2 .shared-values dd { margin: 0; font-size: var(--text-sm); }
html.ds2 .shared-values dd p { margin: 2px 0; }
/* Confirmation register: decisions fold under one summary per item. */
html.ds2 .confirmation-howto { margin: var(--space-2) 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
html.ds2 .confirmation-act > summary { cursor: pointer; margin-top: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); }
html.ds2 .confirmation-links { margin: var(--space-1) 0 0; font-size: var(--text-sm); }
/* "Di halaman ini": anchors to every section of a long document */
html.ds2 .on-this-page { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); font-size: var(--text-sm); }
html.ds2 .on-this-page span { color: var(--color-text-muted); font-size: var(--text-xs); }
html.ds2 .on-this-page a { padding: 4px 10px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); }
html.ds2 :is(#diagram, #aktivitas, #pengecualian, #eksternal, #turunan, #rujukan, [id^="sop-"]) { scroll-margin-top: 96px; }

/* W1 · SOP: full width, table of contents beside the text on wide screens */
html.ds2 .sop-document { max-width: none; font-size: var(--text-sm); }
@media (min-width: 1100px) {
  html.ds2 .sop-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
  html.ds2 .sop-layout .sop-toc { position: sticky; top: 92px; margin: 0; max-height: calc(100vh - 120px); overflow: auto; }
  html.ds2 .sop-layout .sop-toc ol { flex-direction: column; gap: 6px; }
}
/* Phones: every labelled SOP table becomes cards with field names instead of squeezed columns */
@media (max-width: 640px) {
  html.ds2 .sop-iso table:not(.sop-control-table), html.ds2 .sop-iso table:not(.sop-control-table) :is(tbody, tr, td) { display: block; width: auto; }
  html.ds2 .sop-iso table:not(.sop-control-table) { table-layout: auto; overflow: visible; border: 0; }
  html.ds2 .sop-iso table:not(.sop-control-table) thead { display: none; }
  html.ds2 .sop-iso table:not(.sop-control-table) tr { margin-bottom: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
  html.ds2 .sop-iso table:not(.sop-control-table) td { border: 0; border-bottom: 1px solid var(--color-bg-subtle); padding: 6px 10px; }
  html.ds2 .sop-iso td[data-label]::before { content: attr(data-label); display: block; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
}
/* Every fold reads the same: chevron, then the label in body colour (SOP, BPMN and footer folds). */
html.ds2 .sop-fold > summary { display: flex; align-items: baseline; gap: var(--space-2); cursor: pointer; list-style: none; color: var(--color-text); font-size: var(--text-sm); font-weight: 600; margin: var(--space-2) 0; }
html.ds2 .sop-fold > summary::-webkit-details-marker { display: none; }
html.ds2 .sop-fold > summary::before { content: "›"; display: inline-block; width: 1ch; color: var(--color-primary); font-weight: 700; transition: transform .15s; }
html.ds2 .sop-fold[open] > summary::before { transform: rotate(90deg); }
/* G3 · The phone preview keeps its close button in view while the card scrolls. */
@media (max-width: 1150px) {
  html.ds2 .document-summary.is-open .summary-close { position: sticky; top: 0; float: right; z-index: 1; margin: -8px -8px 0 8px; box-shadow: 0 0 0 4px var(--color-surface, #fff); }
  html.ds2 .document-summary.is-open .document-summary-card > * { min-width: 0; overflow-wrap: anywhere; }
}
/* G3 · Panduan: one topic navigation (folded on phones), reading points first. */
html.ds2 .guide-topics > summary { cursor: pointer; font-size: var(--text-sm); font-weight: 600; padding: var(--space-2) 0; }
html.ds2 .guide-nav .guide-topics nav { max-height: none; overflow: visible; }
html.ds2 .guide-topics nav a small { font-weight: 400; color: var(--color-text-muted); }
html.ds2 .guide-reading { padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-3); border-left: 3px solid var(--color-primary); background: var(--color-surface); border-radius: var(--radius-md); }
html.ds2 .guide-reading h3 { margin: 0 0 var(--space-2); }
html.ds2 .guide-reading ul { margin: 0; padding-left: 1.2em; }
html.ds2 .guide-detail #guide-topic:focus { outline: none; }
@media (min-width: 851px) { html.ds2 .guide-topics > summary { display: none; } html.ds2 .guide-topics::details-content { content-visibility: visible; height: auto; } }
@media (max-width: 850px) { html.ds2 .guide-topics { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0 var(--space-3); } }
/* G4 · Workspace lists: filters fold behind the Filter button on every screen, as in the library. */
html.ds2 .workspace-filters .workspace-filter-options { display: none; }
html.ds2 .workspace-filters.filters-open .workspace-filter-options { display: grid; max-height: none; opacity: 1; padding-top: var(--space-3); }
html.ds2 .stats-unit { margin: calc(-1 * var(--space-2)) 0 var(--space-3); font-size: var(--text-xs); }
html.ds2 .workspace-table .status-line { display: block; }
html.ds2 .queue-action { display: inline-block; font-size: var(--text-xs); color: var(--color-text-muted); }
html.ds2 .queue-action.is-mine { color: var(--color-primary); font-weight: 600; }
/* G4 · Version page: source and duty under each role on their own lines; phone tabs wrap. */
html.ds2 .workspace-detail td small { display: block; color: var(--color-text-muted); }
html.ds2 .form-subject { margin: 0 0 var(--space-1); }
@media (max-width: 640px) { html.ds2 .zone-tabs { flex-wrap: wrap; overflow: visible; } html.ds2 .zone-tabs a { padding: 8px 10px; } }
/* G4 · Kesiapan SOP: each package becomes a card on phones; Penyelarasan empty register is a line. */
@media (max-width: 640px) {
  html.ds2 .readiness-table, html.ds2 .readiness-table :is(tbody, tr, td) { display: block; width: auto; }
  html.ds2 .readiness-table thead { display: none; }
  html.ds2 .readiness-table tr { margin-bottom: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
  html.ds2 .readiness-table td { border: 0; border-bottom: 1px solid var(--color-bg-subtle); }
  html.ds2 .readiness-table td[data-label]::before { content: attr(data-label); display: block; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
  html.ds2 .readiness-table .scope-list { display: none; }
}
html.ds2 .legacy-empty { margin: var(--space-3) 0; }
html.ds2 .alignment-documents { margin-top: var(--space-6); }
/* G4 · Feedback tiles filter the list; a zero tile is dimmed. */
html.ds2 .review-stats dt a { color: inherit; }
html.ds2 .review-stats dt a:hover, html.ds2 .review-stats dt a[aria-current] { color: var(--color-primary); }
html.ds2 .review-stats > div.is-zero dd { color: var(--color-text-muted); }
/* G4 · Akses: each user becomes a card on phones. */
@media (max-width: 640px) {
  html.ds2 .access-users, html.ds2 .access-users :is(tr, td) { display: block; width: auto; }
  html.ds2 table:has(> .access-users) thead { display: none; }
  html.ds2 .access-users tr { margin-bottom: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
  html.ds2 .access-users td { border: 0; padding: 6px 10px; }
  html.ds2 .access-users td[data-label]::before { content: attr(data-label); display: block; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
}
/* G3 · Library search says why a row matched. */
html.ds2 .match-snippet { margin: 2px 0 0; font-size: var(--text-xs); color: var(--color-text-muted); max-width: 75ch; }
html.ds2 .match-snippet mark { background: var(--color-warning-bg, #fff4cc); color: var(--color-text); padding: 0 2px; border-radius: 3px; }
/* G3 · A value every SOP row repeats is written once above its table (web only). */
html.ds2 .sop-shared-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px var(--space-3); margin: 4px 0 0; }
html.ds2 .sop-shared-list dt { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
html.ds2 .sop-shared-list dd { margin: 0; font-size: var(--text-sm); }
html.ds2 .sop-shared-note { font-size: var(--text-sm); color: var(--color-text-muted); }
@media (max-width: 640px) { html.ds2 .sop-shared-list { grid-template-columns: 1fr; } html.ds2 .sop-shared-list dd { margin-bottom: 4px; } }

/* W2 · Workspace: one-line sub-navigation, compact headings, actions before explanations. */
html.ds2 .workspace-nav { margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); }
html.ds2 .workspace-nav-desktop.workspace-nav-groups { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
@media (max-width: 760px) { html.ds2 .workspace-nav-desktop.workspace-nav-groups { display: none; } html.ds2 .workspace-nav { padding: 0; border: 0; background: none; } }
html.ds2 .workspace-nav-group { display: flex; align-items: center; gap: var(--space-2); padding: 0; border: 0; }
html.ds2 .workspace-nav-group + .workspace-nav-group { padding-left: var(--space-4); border-left: 1px solid var(--color-border); }
html.ds2 .workspace-nav-desktop .workspace-nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.ds2 .workspace-nav-links { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; }
html.ds2 .workspace-nav-links a { min-height: 0; padding: 4px 8px; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 500; }
html.ds2 .workspace-nav-links a.active { background: var(--color-primary-soft); color: var(--color-primary); font-weight: 600; box-shadow: none; }
html.ds2 .compact-heading { margin: 0 0 var(--space-4); }
html.ds2 .compact-heading h1 { margin: 0 0 var(--space-1); font-size: var(--text-xl); }
html.ds2 .compact-heading p { margin: 0; }
html.ds2 .task-priority.compact { display: block; padding: 0; margin: 0 0 var(--space-4); border: 0; background: none; box-shadow: none; }
html.ds2 .task-priority.compact .task-priority-actions { justify-content: flex-start; }
html.ds2 .workspace-stats { margin: 0 0 var(--space-3); }
html.ds2 .task-section .section-heading { margin-bottom: var(--space-3); }
html.ds2 .task-section .section-heading h2 { font-size: var(--text-lg); margin: 0; }
html.ds2 .task-card { padding: var(--space-3) var(--space-4); }
/* Version detail: no gap above, smaller zone banners */
html.ds2 .workspace-detail > .back-link { display: inline-flex; margin-bottom: var(--space-3); }
html.ds2 .zone-banner { padding: var(--space-2) var(--space-4); margin-bottom: var(--space-3); }
html.ds2 .zone-banner h2 { font-size: var(--text-base); margin: 0; }
html.ds2 .zone-banner p:last-child { font-size: var(--text-sm); }
html.ds2 .zone-banner .eyebrow { margin: 0; }
html.ds2 .workspace-detail .decision-bar { padding: var(--space-3) var(--space-4); gap: var(--space-2) var(--space-6); }
html.ds2 .decision-bar h1 { font-size: var(--text-lg); margin: var(--space-1) 0; }
/* The tagline is chrome; phones keep the header to the name and menu (K2, 5 November 2026). */
@media (max-width: 520px) { html.ds2 .brand small { display: none; } }
/* Long L0-L2 scopes open on three lines; the full text folds under "Baca selengkapnya" (A-T09). */
html.ds2 .scope-fold:has(details[open]) .scope-excerpt { display: none; }
html.ds2 .scope-fold summary { color: var(--color-primary, #294294); font-weight: 600; cursor: pointer; }
/* One row per process: title, then its SIPOC · BPMN · RACI (A-T08). */
html.ds2 .process-trio { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); align-items: baseline; }
html.ds2 .process-trio-title { flex: 1 1 280px; min-width: 0; }
html.ds2 .process-trio-links { white-space: nowrap; font-size: var(--text-sm); }
/* The scroll-loading message shows while the next page loads, not beside the link (A-T12). */
html.ds2 .workspace-load-message { display: none; }
html.ds2 .htmx-request .workspace-load-message, html.ds2 .htmx-request.workspace-load-message { display: inline; }
html.ds2 .htmx-request .workspace-load-message + a { display: none; }
/* G5d phones. Folds open on wide screens look like plain headings; app.js closes them on phones. */
html.ds2 [data-fold-narrow] > summary { list-style: none; }
html.ds2 [data-fold-narrow] > summary::-webkit-details-marker { display: none; }
html.ds2 .sipoc-column > summary h3 .muted { font-weight: 400; }
html.ds2 .sop-toc details > summary .muted { font-weight: 400; font-size: var(--text-xs); }
@media (min-width: 641px) {
  html.ds2 [data-fold-narrow] > summary { pointer-events: none; }
}
@media (max-width: 640px) {
  html.ds2 [data-fold-narrow] > summary { cursor: pointer; }
  html.ds2 [data-fold-narrow] > summary::after { content: "▾"; margin-left: auto; color: var(--color-text-muted); }
  html.ds2 [data-fold-narrow][open] > summary::after { content: "▴"; }
  html.ds2 .sipoc-column > summary h3 { margin: 0; }
  html.ds2 .sipoc-column > summary { display: flex; align-items: center; }
  html.ds2 .sop-toc details > summary { display: flex; gap: var(--space-2); align-items: baseline; }
  /* The download button sits beside the badges as an icon; its note is in the title and the control fold. */
  html.ds2 .doc-header { position: relative; }
  html.ds2 .doc-header-main .badge-row { padding-right: 52px; }
  html.ds2 .doc-header-actions { position: absolute; top: 0; right: 0; }
  html.ds2 .doc-header-actions .button { width: 44px; height: 44px; min-height: 44px; padding: 0; display: grid; place-items: center; }
  html.ds2 .doc-header-actions .button .icon { margin: 0; }
  html.ds2 .doc-header-actions .button-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html.ds2 .doc-header-actions .controlled-copy-note { display: none; }
}
/* G6a · A-T18: one fold component in documents: a card with chevron, title and a grey count. */
html.ds2 .process-section.fold-section, html.ds2 .sop-fold { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
html.ds2 .process-section.fold-section { margin: var(--space-2) 0; }
html.ds2 .sop-fold { margin: var(--space-2) 0 var(--space-3); }
html.ds2 .sop-fold > summary { margin: 0; padding: var(--space-3) var(--space-4); font-size: var(--text-base); flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
html.ds2 .sop-fold > summary .muted { font-size: var(--text-sm); font-weight: 400; }
html.ds2 .sop-fold > :not(summary) { margin-left: var(--space-4); margin-right: var(--space-4); }
html.ds2 .sop-fold[open] { padding-bottom: var(--space-3); }
/* G6a · B-F08: topic groups are labels, not headings; external links say they open a new tab. */
html.ds2 .guide-nav nav .guide-group { margin: var(--space-6) 0 var(--space-2); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--color-text-muted); }
html.ds2 .guide-detail > header h1 { margin: var(--space-1) 0 var(--space-2); font-size: var(--text-lg); }
html.ds2 .guide-page .page-heading .eyebrow { margin: 0; }
html.ds2 .guide-sources .link-note { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); }
/* G6a · B-F17: the account menu names the person, their role and email. */
html.ds2 .account-identity { margin: 0 0 var(--space-3); font-size: var(--text-sm); line-height: 1.45; overflow-wrap: anywhere; }
html.ds2 .account-identity small { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--color-text-muted); }
html.ds2 .account-dropdown { width: 270px; }
/* G6a · A-T21: procedure cells are the reading text of an SOP, so they read at 14 px on screen
   (print keeps its own sizes in print.css); headers and captions stay small. */
html.ds2 .sop-iso td { font-size: var(--text-sm); }
/* G6a · A-T20: the tree keeps a smaller indent on phones and dates never break across lines. */
@container (max-width: 760px) { html.ds2 .library-page .document-name { padding-left: calc(var(--indent, 0px) * .7); } }
html.ds2 .library-page .row-date { white-space: nowrap; }
/* G6b · B2-01: five member menus and the account name do not fit one row below 1240 px; the
   menu moves to its own row instead of pushing the account menu off screen. */
html.ds2 .account-name { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1240px) {
  html.ds2 .site-header.is-member .header-inner { flex-wrap: wrap; }
  html.ds2 .site-header.is-member .brand { margin-right: auto; }
  html.ds2 .site-header.is-member .primary-nav { order: 3; width: 100%; margin-left: 0; flex-wrap: wrap; }
}
/* G6b · B2-02: error pages are a centred card like the account pages, not full width. */
html.ds2 .error-page { max-width: 640px; margin-inline: auto; }
/* G6b · A2-02: a row without a branch button keeps the button's width, so SIPOC, BPMN and RACI
   line up with their sibling processes on every screen size. */
html.ds2 .library-page .document-name .tree-spacer { display: block; width: 36px; flex: 0 0 36px; }
/* G6b · A2-01: on phones the title starts below the download icon instead of under it. */
@media (max-width: 640px) {
  html.ds2 .library-page .document-name .tree-spacer { width: 44px; flex-basis: 44px; }
  html.ds2 .doc-header-main .badge-row { min-height: 44px; }
}