/* Base styles and first components. Uses only tokens.css variables. No frameworks. */
*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--font-sans); font-size: 100%; -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body { margin: 0; background: var(--bg); color: var(--text); font-size: var(--text-base); line-height: 1.5; }
h1 { font-size: var(--text-2xl); line-height: 1.2; margin: 0 0 var(--space-4); }
h2 { font-size: var(--text-xl); line-height: 1.25; margin: var(--space-8) 0 var(--space-3); }
h3 { font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-2); }
p { margin: 0 0 var(--space-3); max-width: 70ch; }
a { color: var(--accent); text-underline-offset: 0.18em; }
code, .mono { font-family: var(--font-mono); font-size: 0.9em; }
.muted { color: var(--text-muted); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* focus: never removed, always visible (WCAG 2.4.7, 2.4.11, 2.4.13) */
:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 2px; border-radius: 2px; }

/* skip link */
.skip-link { position: absolute; left: var(--space-2); top: -4rem; background: var(--accent); color: var(--on-accent); padding: var(--space-2) var(--space-4); border-radius: var(--radius); z-index: 100; }
.skip-link:focus { top: var(--space-2); }

/* layout */
.shell-header { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; }
.shell-header__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); padding: var(--space-3) var(--space-4); max-width: 80rem; margin: 0 auto; }
.brand { font-weight: 700; font-size: var(--text-lg); margin-right: auto; }
.brand { display: flex; align-items: center; gap: var(--space-2); }
.logo { width: 2rem; height: 2rem; flex: none; }
.logo--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo--light { display: none; }
  :root:not([data-theme="light"]) .logo--dark { display: inline; }
}
:root[data-theme="dark"] .logo--light { display: none; }
:root[data-theme="dark"] .logo--dark { display: inline; }
.brand small { font-weight: 400; color: var(--text-muted); font-size: var(--text-sm); margin-left: var(--space-2); }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.main-nav a { display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0 var(--space-3); border-radius: var(--radius); text-decoration: none; color: var(--text); }
.main-nav a:hover { background: var(--neutral-bg); }
.main-nav a[aria-current="page"] { background: var(--accent); color: var(--on-accent); font-weight: 600; }
main { max-width: 80rem; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-8); }
.shell-footer { max-width: 80rem; margin: 0 auto; padding: var(--space-4); color: var(--text-muted); font-size: var(--text-sm); border-top: 1px solid var(--border); }

/* breadcrumb */
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0 0 var(--space-4); padding: 0; font-size: var(--text-sm); }
.breadcrumb li + li::before { content: "/"; margin-right: var(--space-1); color: var(--text-muted); }

/* scope chip */
.scope-chip { display: inline-block; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-1) var(--space-3); background: var(--bg); font-size: var(--text-sm); }

/* banners */
.banner { border: 1px solid var(--border); border-left-width: 6px; border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); }
.banner--info { background: var(--info-bg); color: var(--info); border-color: var(--info); }
.banner--warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }
.banner--danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.banner--neutral { background: var(--neutral-bg); color: var(--neutral); border-color: var(--neutral); }
.banner p:last-child { margin-bottom: 0; }
.banner strong:first-child { margin-right: var(--space-2); }

/* badges: always text + symbol, never colour alone */
.badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); min-height: 1.5rem; border-radius: 999px; font-size: var(--text-sm); font-weight: 600; border: 1px solid currentColor; white-space: normal; max-width: 100%; }
.badge::before { content: attr(data-symbol); font-weight: 700; }
.badge--ok { background: var(--ok-bg); color: var(--ok); }
.badge--warn { background: var(--warn-bg); color: var(--warn); }
.badge--danger { background: var(--danger-bg); color: var(--danger); }
.badge--info { background: var(--info-bg); color: var(--info); }
.badge--neutral { background: var(--neutral-bg); color: var(--neutral); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--target-min); padding: 0 var(--space-4); border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--neutral-bg); }
.btn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn--primary:hover { background: var(--accent); filter: brightness(1.08); }
.btn--danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }

/* tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.table-wrap:focus-visible { outline-offset: 0; }
table { border-collapse: collapse; width: 100%; font-size: var(--text-base); }
caption { text-align: left; padding: var(--space-3) var(--space-4); font-weight: 700; background: var(--surface); }
th, td { text-align: left; padding: var(--space-2) var(--space-4); border-top: 1px solid var(--border); vertical-align: top; }
thead th { background: var(--surface); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* cards and grids */
.grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); }
.card h3 { margin-top: 0; }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: 0 0 var(--space-3); }
.dl dt { color: var(--text-muted); }
.dl dd { margin: 0; }

/* measure tiles */
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); }
.tile h3 { margin: 0 0 var(--space-2); font-size: var(--text-base); }
.tile__value { font-size: var(--text-2xl); font-weight: 700; line-height: 1.1; }
.tile__base { color: var(--text-muted); font-size: var(--text-sm); margin: var(--space-1) 0; }
.tile__target { font-size: var(--text-sm); margin-top: var(--space-2); }

/* department group */
.dept-group { margin-bottom: var(--space-6); }
.dept-group > h2 { margin-top: var(--space-6); }

/* states */
.state { border: 1px dashed var(--border); border-radius: var(--radius); padding: var(--space-6); text-align: left; background: var(--bg); }
.state h3 { margin-top: 0; }
.skeleton { background: var(--skeleton); border-radius: var(--radius); height: 1.25rem; margin: var(--space-2) 0; animation: pulse 1.4s ease-in-out infinite; }
.skeleton--block { height: 6rem; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.locked-cell { color: var(--text-muted); font-style: italic; }

/* document viewer placeholder (drawn with CSS, synthetic) */
.doc { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 2fr) minmax(14rem, 1fr); }
.doc__page { position: relative; background: #ffffff; color: #1a1d21; border: 1px solid var(--border); aspect-ratio: 210 / 297; max-height: 32rem; width: 100%; }
.doc__page p { margin: 0; padding: 1rem; font-size: var(--text-sm); }
.doc__line { position: absolute; left: 8%; right: 8%; height: 0.55rem; background: #cfd5df; border-radius: 2px; }
.doc__region { position: absolute; border: 3px solid var(--region); background: transparent; }
.doc__region span { position: absolute; top: -1.6rem; left: -3px; background: var(--region); color: #ffffff; font-size: var(--text-sm); padding: 0 var(--space-2); font-weight: 700; }
.doc__page--unreadable .doc__line { background: #9aa3b2; filter: blur(2px); }
.doc__toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); align-items: center; }
.region-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }

/* dialog */
dialog { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); max-width: min(36rem, calc(100vw - 2rem)); padding: var(--space-6); }
dialog::backdrop { background: rgb(0 0 0 / 0.55); }
dialog h2 { margin-top: 0; }
label { display: block; font-weight: 600; margin-bottom: var(--space-1); }
input[type="text"], input[type="password"], textarea { width: 100%; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-2) var(--space-3); min-height: var(--target-min); }
.field { margin-bottom: var(--space-4); }

/* responsive: tables become stacked lists on narrow screens would need per-table markup; the wrapper scrolls and is keyboard focusable */
@media (max-width: 40rem) {
  .shell-header { position: static; }
  .doc { grid-template-columns: 1fr; }
  .dl { grid-template-columns: 1fr; }
  h1 { font-size: var(--text-xl); }
  .table-wrap table { min-width: 34rem; }
}

/* reduced motion: no animation, instant state changes */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* forced colors (Windows High Contrast): keep boundaries and states visible */
@media (forced-colors: active) {
  .badge, .banner, .btn, .tile, .card, .state, .doc__region { border: 2px solid CanvasText; }
  .badge::before { forced-color-adjust: none; }
  .skeleton { background: GrayText; }
  .doc__region span { background: Highlight; color: HighlightText; forced-color-adjust: none; }
  .main-nav a[aria-current="page"] { outline: 2px solid Highlight; }
}

/* placeholders for elements that wait on an open decision (Ali / CPO) */
.placeholder { border: 2px dashed var(--border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin: var(--space-3) 0; background: var(--surface); }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: flex-end; margin-bottom: var(--space-3); }
.filters .field { margin-bottom: 0; }
select { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); min-height: var(--target-min); padding: 0 var(--space-3); }

.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.timeline h2 { margin-top: 0; font-size: var(--text-lg); }

select { max-width: 100%; }
.field { min-width: 0; max-width: 100%; }

/* former style attributes (G-CSP1: the page policy has style-src 'self' and no 'unsafe-inline'); keep these last so they win over the component rules as the attributes did */
.u-m0 { margin: 0; }
.u-mt0 { margin-top: 0; }
.u-mt1 { margin-top: 1rem; }
.u-narrow { max-width: 36rem; }
.u-tile-narrow { max-width: 20rem; }
.doc__line--18 { top: 18%; }
.doc__line--24 { top: 24%; }
.doc__line--30 { top: 30%; }
.doc__line--36 { top: 36%; }
.doc__line--42 { top: 42%; }
.doc__region--cited { left: 52%; top: 72%; width: 38%; height: 7%; }

/* Narrow screens (QA WS-04): long words, codes and identifiers wrap instead of widening the page; a table scrolls inside its own frame. */
main { min-width: 0; }
main h1, main h2, main h3, main p, main li, main dt, main dd, main summary, main label, main code, main .banner, main .state { overflow-wrap: anywhere; }
/* T23: a table cell wraps at words (its minimum width is its longest word); "anywhere" shrank columns to one or two letters at 375 px. The table scrolls inside .table-wrap instead. */
main td, main th { overflow-wrap: break-word; }
main pre { white-space: pre-wrap; overflow-x: auto; max-width: 100%; }

td.differs { font-weight: 600; }
td.differs::before { content: "\2260\00a0"; }

/* print: the synthetic banner stays visible and readable on paper (Coder2, invoice slice) */
@media print { #synthetic-banner, #preview-line { display: block; color: #000; background: #fff; border: 2px solid #000; } }
/* TR / EN switch of the top bar (i18n.js shows it only on a screen that is fully extracted) */
.lang-switch { display: inline-flex; gap: var(--space-1); }
.lang-switch .btn[aria-pressed="true"] { background: var(--text); color: var(--bg); }
[hidden] { display: none !important; }
.reason-text { white-space: pre-line; overflow-wrap: anywhere; }