/* ==========================================================================
   JFDA — سجل تقدّم الخدمات الإلكترونية
   Design direction: "المصادقة" — a reconciliation ledger, not a progress board.
   Ground is photocopy grey; sheets are white forms; Arabic prose is humanist,
   every machine identifier and numeral is monospaced. One accent: ballpoint blue.
   ========================================================================== */

/* ---------- 1. Faces ---------------------------------------------------- */
@font-face { font-family:"Plex Arabic"; src:url("public/assets/fonts/IBMPlexSansArabic-Regular.woff2") format("woff2");  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Plex Arabic"; src:url("public/assets/fonts/IBMPlexSansArabic-Medium.woff2") format("woff2");   font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Plex Arabic"; src:url("public/assets/fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Plex Arabic"; src:url("public/assets/fonts/IBMPlexSansArabic-Bold.woff2") format("woff2");     font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Plex Mono"; src:url("public/assets/fonts/IBMPlexMono-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Plex Mono"; src:url("public/assets/fonts/IBMPlexMono-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Plex Mono"; src:url("public/assets/fonts/IBMPlexMono-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Plex Mono"; src:url("public/assets/fonts/IBMPlexMono-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

/* ---------- 2. Tokens --------------------------------------------------- */
:root {
  color-scheme: light;

  --sans: "Plex Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --mono: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* surfaces */
  --ground:  #dfe4e9;
  --ground-2:#d2d9e0;
  --sheet:   #ffffff;
  --sheet-2: #f5f7f9;
  --sheet-3: #eaeef2;
  --navy:    #111c2e;
  --navy-2:  #1c2b42;

  /* ink */
  --ink:   #101820;
  --ink-2: #4d5761;
  --ink-3: #717b85;
  --rule:  #c6ced6;
  --rule-2:#e4e9ed;

  /* accent — ballpoint */
  --brand:    #16367e;
  --brand-ink:#132d68;
  --brand-wash:#e7ecf7;

  /* chart marks (validated: adjacent CVD ΔE 20.4, normal ΔE 24.7 on #fff) */
  --mark:      #2b3f8f;   /* single-hue magnitude */
  --mark-soft: #b9c1de;
  --track-v:   #4640bd;   /* التحقق  */
  --track-i:   #00908c;   /* التكامل */

  /* status — always paired with a text label, never colour alone */
  --ok:#0f7a4f;    --ok-ink:#0b5c3b;    --ok-wash:#dcefe4;
  --go:#2f6fd0;    --go-ink:#1f4fa8;    --go-wash:#e2eaf9;
  --wait:#b07a10;  --wait-ink:#7d5205;  --wait-wash:#f7ecd4;
  --stop:#b02133;  --stop-ink:#93142a;  --stop-wash:#f9dee2;
  --void:#8b959f;  --void-ink:#525c65;  --void-wash:#e9edf0;

  /* type scale */
  --t-micro:.6875rem; --t-sm:.75rem; --t-base:.8125rem; --t-md:.875rem;
  --t-lg:1rem; --t-h3:1.0625rem; --t-h2:1.25rem; --t-h1:1.6rem;
  --t-display:clamp(2.25rem, 5.5vw, 3.5rem);

  /* space */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s7:32px; --s8:40px; --s9:56px;

  --gutter: clamp(16px, 3vw, 40px);
  --maxw: 1560px;
  --edge: 1px solid var(--rule);
  --lift: 0 1px 2px rgba(16,24,32,.05), 0 6px 20px rgba(16,24,32,.05);
}

/* ---------- 3. Base ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.7;
  font-synthesis-weight: none;
}
h1,h2,h3,h4,p,dl,dd,figure { margin: 0; }
ul,ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button, select, summary { cursor: pointer; }
a { color: var(--brand-ink); text-decoration-color: color-mix(in srgb, var(--brand-ink) 35%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--brand-wash); }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path: inset(50%); white-space:nowrap; border:0;
}
.skip-link {
  position:fixed; inset-block-start:-5rem; inset-inline-start:var(--s4); z-index:200;
  background:var(--sheet); color:var(--brand-ink); padding:var(--s3) var(--s4);
  border:var(--edge); font-weight:600; transition:inset-block-start .15s;
}
.skip-link:focus { inset-block-start: var(--s4); }

/* Machine text: identifiers, numerals, dates. Always isolated from Arabic. */
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings:"zero" 1; }
bdi { unicode-bidi: isolate; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -.01em; }

/* ---------- 4. Masthead ------------------------------------------------- */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: var(--navy); color: #fff;
  box-shadow: 0 1px 0 var(--navy-2), 0 6px 18px rgba(17,28,46,.14);
}
.masthead-bar {
  max-width: var(--maxw); margin-inline: auto;
  padding: var(--s3) var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
}
.brand { display:flex; align-items:center; gap:var(--s3); color:#fff; text-decoration:none; min-width:0; }
.brand img { width:44px; height:44px; object-fit:contain; background:#fff; padding:3px; border-radius:3px; flex:0 0 auto; }
.brand-text { display:flex; flex-direction:column; line-height:1.35; min-width:0; }
.brand-text b { font-size:var(--t-lg); font-weight:600; letter-spacing:-.01em; }
.brand-text i { font-style:normal; font-size:var(--t-micro); color:#9fb0c6; }
.masthead-side { display:flex; align-items:center; gap:var(--s5); }
.sync { display:flex; align-items:baseline; gap:var(--s2); font-size:var(--t-micro); white-space:nowrap; }
.sync dt { color:#8fa1ba; }
.sync dd { margin:0; color:#dbe5f0; font-family:var(--mono); }

.tabs {
  max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; gap: var(--s1); overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  padding: var(--s2) var(--s4) var(--s3);
  color: #9fb0c6; text-decoration: none; font-size: var(--t-md); font-weight: 500;
  white-space: nowrap; border-bottom: 3px solid transparent;
}
.tabs a:hover { color: #fff; }
.tabs a[aria-current="page"] { color:#fff; font-weight:600; border-bottom-color: var(--track-i); }

/* ---------- 5. Page scaffolding ----------------------------------------- */
main { display: block; }
main:focus { outline: none; }
.boot { padding: var(--s9) var(--gutter); color: var(--ink-2); text-align: center; }

.page {
  max-width: var(--maxw); margin-inline: auto;
  padding: var(--s6) var(--gutter) var(--s9);
}
.page > * + * { margin-top: var(--s6); }

.head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--s3) var(--s5); }
.head h1 { font-size:var(--t-h1); font-weight:700; letter-spacing:-.02em; line-height:1.35; }
.head p { color:var(--ink-2); font-size:var(--t-md); max-width:62ch; margin-top:var(--s1); }

.eyebrow {
  font-size:var(--t-micro); font-weight:700; letter-spacing:.08em;
  color:var(--ink-3); text-transform:uppercase;
}

/* Section: a titled band of the ledger */
.band > h2 {
  font-size: var(--t-h3); font-weight: 700; letter-spacing: -.01em;
  padding-bottom: var(--s2); border-bottom: 2px solid var(--ink);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
}
.band > h2 small { font-weight:500; font-size:var(--t-sm); color:var(--ink-3); }
.band > h2 + * { margin-top: var(--s4); }
.band + .band { margin-top: var(--s8); }
.band-note { color:var(--ink-2); font-size:var(--t-sm); margin-top:var(--s2); max-width:78ch; }

/* Sheet: the white form the data sits on */
.sheet { background: var(--sheet); border: var(--edge); box-shadow: var(--lift); }
.sheet-pad { padding: var(--s5); }

.grid { display: grid; gap: var(--s4); }
.g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.g-side { grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); }

/* ---------- 6. The thesis block (overview hero) ------------------------- */
.thesis {
  background: var(--sheet); border: var(--edge); box-shadow: var(--lift);
  display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,.85fr);
}
.thesis-copy { padding: var(--s7) var(--s6); border-inline-end: var(--edge); }
.thesis-copy h1 {
  font-size: var(--t-h1); font-weight: 700; line-height: 1.45; letter-spacing: -.02em;
  margin-top: var(--s3); max-width: 30ch;
}
.thesis-copy p { color: var(--ink-2); margin-top: var(--s4); max-width: 52ch; font-size: var(--t-md); }
.thesis-figure {
  padding: var(--s7) var(--s6); display: flex; flex-direction: column; justify-content: center;
  background: var(--sheet-2);
}
.figure-value {
  font-family: var(--mono); font-size: var(--t-display); font-weight: 700;
  letter-spacing: -.05em; line-height: .9; color: var(--brand);
}
.figure-label { margin-top: var(--s3); font-size: var(--t-md); font-weight: 600; }
.figure-sub { margin-top: var(--s2); font-size: var(--t-sm); color: var(--ink-2); max-width: 40ch; }
/* The hero number gets its own audit trail — it is the claim most argued with. */
.figure-check { margin-top: var(--s4); border-top: 1px solid var(--rule); padding-top: var(--s3); }
.figure-check summary { font-size: var(--t-sm); font-weight: 600; color: var(--brand-ink); cursor: pointer; }
.figure-check ul { margin-top: var(--s3); display: grid; gap: var(--s2); }
.figure-check li { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.7; padding-inline-start: var(--s3); border-inline-start: 2px solid var(--rule); }
.figure-check b { font-family: var(--mono); color: var(--ink); }

/* ---------- 7. Stat tiles ----------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 1px; background: var(--rule); border: var(--edge); }
.stat { background: var(--sheet); padding: var(--s4) var(--s4) var(--s5); display: flex; flex-direction: column; gap: var(--s1); }
.stat-v { font-family: var(--mono); font-size: 1.75rem; font-weight: 700; letter-spacing: -.04em; line-height: 1.1; }
.stat-l { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.45; }
.stat-n { font-size: var(--t-micro); color: var(--ink-3); margin-top: auto; padding-top: var(--s2); }
.stat.is-alert .stat-v { color: var(--stop-ink); }
.stat.is-good  .stat-v { color: var(--ok-ink); }

/* ---------- 8. Charts (HTML marks — widths set via CSSOM custom props) --- */
.chart { display: flex; flex-direction: column; gap: var(--s4); }
.chart-head h3 { font-size: var(--t-md); font-weight: 600; }
.chart-head p { font-size: var(--t-sm); color: var(--ink-2); margin-top: 2px; }

/* horizontal bars */
.hbar { display: grid; grid-template-columns: minmax(80px, max-content) minmax(0,1fr) max-content; gap: var(--s2) var(--s3); align-items: center; }
.hbar-l { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.35; }
.hbar-t { height: 14px; background: var(--sheet-3); position: relative; border-radius: 0 2px 2px 0; }
.hbar-f { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--w, 0%); background: var(--mark); border-radius: 0 2px 2px 0; min-width: 2px; }
.hbar-v { font-family: var(--mono); font-size: var(--t-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.hbar-row { display: contents; }
.hbar-row:hover .hbar-f { filter: brightness(1.15); }
.hbar-f.is-ok   { background: var(--ok); }
.hbar-f.is-wait { background: var(--wait); }
.hbar-f.is-stop { background: var(--stop); }
.hbar-f.is-go   { background: var(--go); }
.hbar-f.is-void { background: var(--void); }

/* composition meter — one bar, labelled segments */
.meter { display: flex; height: 18px; background: var(--sheet-3); gap: 2px; }
.meter-seg { min-width: 3px; width: var(--w, 0%); }
.meter-seg.is-ok{background:var(--ok)} .meter-seg.is-go{background:var(--go)}
.meter-seg.is-wait{background:var(--wait)} .meter-seg.is-stop{background:var(--stop)}
.meter-seg.is-void{background:var(--void)} .meter-seg.is-mark{background:var(--mark)}
.meter-sm { height: 8px; }
.legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s3); font-size: var(--t-sm); }
.legend li { display: inline-flex; align-items: center; gap: var(--s2); color: var(--ink-2); }
.legend b { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.swatch { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 2px; background: var(--void); }
.swatch.is-ok{background:var(--ok)} .swatch.is-go{background:var(--go)}
.swatch.is-wait{background:var(--wait)} .swatch.is-stop{background:var(--stop)}
.swatch.is-void{background:var(--void)} .swatch.is-mark{background:var(--mark)}
.swatch.is-tv{background:var(--track-v)} .swatch.is-ti{background:var(--track-i)}

/* weekly columns */
.cols { display: flex; align-items: flex-end; gap: 3px; height: 148px; padding-top: var(--s4); border-bottom: 1px solid var(--rule); }
.col { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-width: 0; position: relative; }
.col-seg { height: var(--h, 0px); min-height: 0; }
.col-seg.is-tv { background: var(--track-v); }
.col-seg.is-ti { background: var(--track-i); }
.col:hover .col-seg { filter: brightness(1.12); }
.cols-x { display: flex; gap: 3px; margin-top: var(--s2); }
.cols-x span { flex: 1 1 0; font-family: var(--mono); font-size: 9px; color: var(--ink-3); text-align: center; min-width: 0; overflow: hidden; }

/* ---------- 9. Chips, dots, stamps -------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px; border-radius: 2px; font-size: var(--t-micro); font-weight: 600;
  background: var(--void-wash); color: var(--void-ink); white-space: nowrap;
}
.chip.is-ok{background:var(--ok-wash);color:var(--ok-ink)}
.chip.is-go{background:var(--go-wash);color:var(--go-ink)}
.chip.is-wait{background:var(--wait-wash);color:var(--wait-ink)}
.chip.is-stop{background:var(--stop-wash);color:var(--stop-ink)}
.chip.is-void{background:var(--void-wash);color:var(--void-ink)}
.chip.is-brand{background:var(--brand-wash);color:var(--brand-ink)}
.chip .mono { font-weight: 600; }

.dot { width:7px; height:7px; border-radius:50%; flex:0 0 auto; background:var(--void); }
.dot.is-ok{background:var(--ok)} .dot.is-go{background:var(--go)}
.dot.is-wait{background:var(--wait)} .dot.is-stop{background:var(--stop)}
.dot.is-void{background:var(--void)}

.tag {
  display:inline-block; padding:1px 6px; border:1px solid var(--rule);
  font-family:var(--mono); font-size:var(--t-micro); color:var(--ink-2); border-radius:2px;
}

/* ---------- 10. Tables -------------------------------------------------- */
.scroll-x { overflow-x: auto; overscroll-behavior-x: contain; }
/* Wide enough for the table to fit: drop the scroll container so the viewport
   becomes the sticky root and the header can pin under the masthead. */
@media (min-width: 1100px) {
  .scroll-x { overflow-x: visible; }
  /* Specificity has to beat the `top: 0` base rule that follows it in source. */
  .scroll-x table.data thead th { top: calc(var(--mast, 108px) + var(--filters-h, 0px)); }
}
table.data { width: 100%; border-collapse: collapse; background: var(--sheet); }
table.data th, table.data td { text-align: start; vertical-align: top; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule-2); }
/* `top` resolves against the nearest scrolling ancestor. Inside .scroll-x that
   is the wrapper, not the viewport, so any masthead offset would push the
   header down into the rows. Offset only where the viewport is the scroller. */
table.data thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--sheet-3); border-bottom: 2px solid var(--ink);
  font-size: var(--t-micro); font-weight: 700; color: var(--ink-2);
  letter-spacing: .03em; white-space: nowrap;
}
table.data tbody tr:hover { background: var(--sheet-2); }
table.data td.num-c { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data .rowlink { color: var(--ink); font-weight: 600; text-decoration: none; }
table.data .rowlink:hover { color: var(--brand-ink); text-decoration: underline; }
table.data tbody tr.is-flagged { box-shadow: inset 3px 0 0 var(--stop); }

/* ---------- 11. Filter bar ---------------------------------------------- */
.filters {
  position: sticky; top: var(--mast, 108px); z-index: 20;
  background: var(--sheet); border: var(--edge); box-shadow: var(--lift);
  padding: var(--s3); display: flex; flex-wrap: wrap; gap: var(--s2); align-items: stretch;
}
.field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.field > span { font-size: 10px; font-weight: 600; color: var(--ink-3); letter-spacing: .04em; }
.field select, .field input {
  border: 1px solid var(--rule); background: var(--sheet); border-radius: 2px;
  padding: 6px 8px; font-size: var(--t-base); min-height: 32px;
}
.field select:hover, .field input:hover { border-color: var(--ink-3); }
.search { flex: 1 1 260px; min-width: 200px; }
.search input { width: 100%; }
.filters .text-btn { align-self: flex-end; }
.text-btn {
  border: 1px solid var(--rule); background: var(--sheet); border-radius: 2px;
  padding: 6px 12px; min-height: 32px; font-size: var(--t-sm); color: var(--brand-ink); font-weight: 600;
}
.text-btn:hover { background: var(--brand-wash); border-color: var(--brand); }
.result-count { margin-inline-start: auto; align-self: flex-end; font-size: var(--t-sm); color: var(--ink-2); padding-bottom: 7px; }
.result-count b { font-family: var(--mono); color: var(--ink); }

/* ---------- 12. Service page -------------------------------------------- */
.crumb { font-size: var(--t-sm); color: var(--ink-2); }
.crumb a { font-weight: 500; }

.svc-hero { background: var(--navy); color: #fff; border: 1px solid var(--navy); }
.svc-hero-main { padding: var(--s6); display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); align-items: flex-start; justify-content: space-between; }
.svc-hero h1 { font-size: var(--t-h1); font-weight: 700; line-height: 1.4; letter-spacing: -.02em; max-width: 34ch; }
.svc-hero .eyebrow { color: #8fa1ba; }
.svc-facts { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); padding: var(--s3) var(--s6); background: var(--navy-2); font-size: var(--t-sm); }
.svc-facts div { color: #9fb0c6; }
.svc-facts b { color: #fff; font-weight: 600; }

.tracks { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s4); }
.track { background: var(--sheet); border: var(--edge); border-top: 3px solid var(--track-v); padding: var(--s5); box-shadow: var(--lift); }
.track.t-i { border-top-color: var(--track-i); }
.track-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.track-head h3 { font-size: var(--t-md); font-weight: 700; }
.track-status { margin-top: var(--s3); font-size: var(--t-h3); font-weight: 700; letter-spacing: -.01em; }
.track-sub { margin-top: var(--s2); color: var(--ink-2); font-size: var(--t-sm); }
.track .meter { margin-top: var(--s4); }

/* — Signature: the carbon-copy packet. Two halves of one form, and the
     perforation between them. A missing half stays a ruled blank with a stamp. */
.packet { background: var(--sheet); border: var(--edge); box-shadow: var(--lift); }
.packet + .packet { margin-top: var(--s5); }
.packet-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4);
  padding: var(--s3) var(--s4); background: var(--sheet-3); border-bottom: var(--edge);
}
.packet-head h3 { font-size: var(--t-md); font-weight: 700; margin-inline-end: auto; }
.packet-meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: var(--t-micro); color: var(--ink-2); }
.packet-meta b { font-family: var(--mono); color: var(--ink); }

.packet-body { display: grid; grid-template-columns: minmax(0,.9fr) 26px minmax(0,1.35fr); }
.packet-seam {
  background-image: repeating-linear-gradient(to bottom, var(--rule) 0 5px, transparent 5px 11px);
  background-size: 1px 100%; background-position: center top; background-repeat: repeat-y;
}
.packet-side { padding: var(--s4); min-width: 0; }
.packet-side.paper { background: var(--sheet-2); }
.side-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--ink-3); margin-bottom: var(--s3); }

.scan { display: block; text-decoration: none; border: 1px solid var(--rule); background: var(--sheet-3); position: relative; }
/* Scans are A4 portrait. Showing one whole makes the packet 800px tall and the
   handwriting is unreadable at that scale either way — so crop to the head of
   the form, where the service name, date and signatures sit. */
.scan img { display: block; width: 100%; height: 320px; object-fit: cover; object-position: top center; background: var(--sheet-3); }
.scan:hover { border-color: var(--brand); }
.scan-open {
  position: absolute; inset-inline-start: var(--s2); inset-block-end: var(--s2);
  background: rgba(17,28,46,.92); color: #fff; padding: 4px 8px; border-radius: 2px;
  font-size: var(--t-micro); font-weight: 600;
}
.doc-list { display: grid; gap: var(--s2); margin-top: var(--s3); }
.doc {
  display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3);
  border: 1px solid var(--rule-2); background: var(--sheet); text-decoration: none; color: inherit;
}
.doc:hover { border-color: var(--brand); background: var(--brand-wash); }
.doc-mark { font-family: var(--mono); font-size: 9px; font-weight: 700; color: #fff; background: var(--stop); padding: 3px 4px; border-radius: 2px; flex: 0 0 auto; }
.doc-name { font-size: var(--t-sm); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.doc-sub { font-size: var(--t-micro); color: var(--ink-3); font-family: var(--mono); }

.blank {
  border: 1px dashed var(--rule); background:
    repeating-linear-gradient(to bottom, transparent 0 21px, var(--rule-2) 21px 22px);
  min-height: 220px; display: grid; place-items: center; padding: var(--s5);
}
.stamp {
  border: 2px double var(--wait); color: var(--wait-ink); background: color-mix(in srgb, var(--sheet) 82%, transparent);
  padding: var(--s2) var(--s4); border-radius: 3px; rotate: -3.5deg;
  font-size: var(--t-sm); font-weight: 700; text-align: center; line-height: 1.5; max-width: 26ch;
}
.stamp small { display: block; font-weight: 500; font-size: var(--t-micro); color: var(--ink-2); rotate: none; }

/* — Jira record inside a packet */
.rec + .rec { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--rule-2); }
.rec-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); }
.rec-top h4 { font-size: var(--t-md); font-weight: 600; line-height: 1.55; flex: 1 1 100%; order: 2; }
.rec-meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); font-size: var(--t-micro); color: var(--ink-2); order: 3; flex: 1 1 100%; }
.rec-meta a { font-family: var(--mono); font-weight: 600; }

/* — CR notes */
.notes { display: grid; gap: var(--s2); margin-top: var(--s4); }
/* No state colour on a note: Jira records none, and the old tint came from
   a keyword guess over the comment text. */
.note { border: 1px solid var(--rule-2); background: var(--sheet); border-inline-start: 3px solid var(--rule); }
.note > summary {
  list-style: none; padding: var(--s3); display: grid;
  grid-template-columns: max-content minmax(0,1fr) max-content; gap: var(--s3); align-items: baseline;
}
.note > summary::-webkit-details-marker { display: none; }
.note > summary:hover { background: var(--sheet-2); }
.note-no { font-family: var(--mono); font-size: var(--t-sm); font-weight: 700; color: var(--brand); }
/* Titles wrap — they are the payload, never truncate them to one line. */
.note-t { font-size: var(--t-sm); line-height: 1.6; unicode-bidi: isolate; }
.note-body { padding: 0 var(--s3) var(--s4) calc(var(--s3) + 34px); border-top: 1px solid var(--rule-2); padding-top: var(--s3); }
.note-body p { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.85; unicode-bidi: isolate; }
.note-body p + p { margin-top: var(--s2); }
.note-body .tags { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s3); }

/* — timeline */
.tl { position: relative; padding-inline-start: var(--s5); }
.tl::before { content: ""; position: absolute; inset-block: 6px 6px; inset-inline-start: 4px; width: 2px; background: var(--rule); }
.tl-item { position: relative; padding-block: var(--s2); }
.tl-item::before {
  content: ""; position: absolute; inset-inline-start: calc(-1 * var(--s5) + 1px); top: 14px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--track-v); box-shadow: 0 0 0 3px var(--sheet);
}
.tl-item.k-i::before { background: var(--track-i); }
.tl-item.k-d::before { background: var(--ink-3); }
.tl-when { font-family: var(--mono); font-size: var(--t-micro); color: var(--ink-3); }
.tl-what { font-size: var(--t-sm); line-height: 1.6; }
.tl-what b { font-weight: 600; }

/* secondary Arabic line inside a table cell or card */
.sub { font-size: var(--t-micro); color: var(--ink-3); line-height: 1.5; }

/* service-card fact grid */
.card-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3) var(--s5); }
.card-facts > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-bottom: var(--s2); border-bottom: 1px solid var(--rule-2); }
.card-facts dt { font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--ink-3); }
.card-facts dd { margin: 0; font-size: var(--t-sm); font-weight: 600; }

/* verdict cards on the plan page */
.verdict-title { display:flex; align-items:flex-start; gap:var(--s2); font-size:var(--t-md); line-height:1.5; }
.verdict-title .dot { margin-top:7px; width:9px; height:9px; }
.verdict-title b { font-weight:600; }
.note-body ul li { padding-block:3px; border-bottom:1px solid var(--rule-2); display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; }
.note-body ul li:last-child { border-bottom:0; }

/* ---------- 12b. Plan: ladder, day board, handover ---------------------- */

/* In-page jump nav on long pages */
.jump { display: flex; flex-wrap: wrap; gap: var(--s1); }
.jump a {
  padding: 5px 10px; border: 1px solid var(--rule); background: var(--sheet);
  font-size: var(--t-sm); font-weight: 600; text-decoration: none; border-radius: 2px;
}
.jump a:hover { border-color: var(--brand); background: var(--brand-wash); }
/* Jump targets sit under a sticky masthead; keep the focus ring clear of it. */
.band[tabindex="-1"], main[tabindex="-1"] { outline: none; }
.band[tabindex="-1"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 6px; }

/* Row spine — a long register stays scannable by its colour edge alone. */
.spine { box-shadow: inset 3px 0 0 var(--void); }
.spine.s-ok   { box-shadow: inset 3px 0 0 var(--ok); }
.spine.s-go   { box-shadow: inset 3px 0 0 var(--go); }
.spine.s-wait { box-shadow: inset 3px 0 0 var(--wait); }
.spine.s-stop { box-shadow: inset 3px 0 0 var(--stop); }

.verdict { border-top: 3px solid var(--void); }
.verdict.v-ok { border-top-color: var(--ok); }
.verdict.v-wait { border-top-color: var(--wait); }
.verdict.v-stop { border-top-color: var(--stop); }

/* The ladder: three routes to one milestone */
.ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s4); }
.rung-group { background: var(--sheet); border: var(--edge); box-shadow: var(--lift); padding: var(--s5); }
.rung-count { font-family: var(--mono); font-size: 2rem; font-weight: 700; letter-spacing: -.04em; line-height: 1.1; }
.rung-count small { font-family: var(--sans); font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.rungs { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; margin-top: var(--s4); }
.rungs li {
  display: flex; flex-direction: column; gap: 1px; padding: var(--s2) var(--s3);
  border: 1px solid var(--rule-2); border-inline-start: 0; background: var(--sheet-2); flex: 1 1 auto; min-width: 0;
}
.rungs li:first-child { border-inline-start: 1px solid var(--rule-2); }
.rungs li b { font-family: var(--mono); font-size: var(--t-sm); font-weight: 600; }
.rungs li span { font-size: 10px; color: var(--ink-3); }
.rungs .rung-goal { background: var(--ok-wash); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.rungs .rung-goal b { font-family: var(--sans); color: var(--ok-ink); }

/* Day board */
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--s4); align-items: start; }
.day { background: var(--sheet); border: var(--edge); box-shadow: var(--lift); }
.day-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) var(--s4); background: var(--navy); color: #fff;
}
.day-head b { font-size: var(--t-md); font-weight: 600; }
.day-head .mono { color: #b9c8da; font-size: var(--t-sm); margin-inline-start: var(--s2); }
.day-head .sub { color: #8fa1ba; }

.slots { display: flex; flex-direction: column; }
.slot { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule-2); }
.slot:last-child { border-bottom: 0; }
.slot.k-sr   { box-shadow: inset 3px 0 0 var(--brand); }
.slot.k-uat  { box-shadow: inset 3px 0 0 var(--go); }
.slot.k-goal { box-shadow: inset 3px 0 0 var(--ok); background: var(--ok-wash); }
.slot-time { display: flex; flex-direction: column; font-size: var(--t-sm); font-weight: 600; line-height: 1.45; }
.slot-time i { font-style: normal; color: var(--ink-3); font-weight: 400; }
.slot-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.slot-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.slot-title b { font-size: var(--t-md); font-weight: 600; }
.slot-services { display: flex; flex-wrap: wrap; gap: 3px var(--s2); margin-top: var(--s2); }
.slot-services li { font-size: var(--t-micro); color: var(--ink-2); }
.slot-services li::after { content: "·"; margin-inline-start: var(--s2); color: var(--ink-3); }
.slot-services li:last-child::after { content: ""; }
.slot-services a { text-decoration: none; }
.slot-services a:hover { text-decoration: underline; }
.slot-service { font-size: var(--t-md); font-weight: 600; text-decoration: none; }
.slot-service:hover { text-decoration: underline; }
.risk { color: var(--stop-ink); font-weight: 600; }
.day-dir { padding: var(--s2) var(--s4); background: var(--sheet-3); border-bottom: 1px solid var(--rule-2); font-size: var(--t-micro); color: var(--ink-2); }
td .track-line { margin-top: 0; }
td .track-line li { padding: 3px var(--s2); }

/* Handover batches */
.handover { border-top: 3px solid var(--ok); }
.handover-list { margin-top: var(--s3); display: flex; flex-direction: column; }
.handover-list li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: 5px 0; border-bottom: 1px solid var(--rule-2); font-size: var(--t-sm);
}
.handover-list li:last-child { border-bottom: 0; }

/* Per-patch rung line */
.track-line { display: flex; flex-wrap: wrap; gap: 0; margin-top: var(--s3); }
.track-line li {
  display: flex; flex-direction: column; gap: 1px; padding: var(--s2) var(--s3); min-width: 0;
  border: 1px solid var(--rule-2); border-inline-start: 0; background: var(--sheet-2); flex: 1 1 auto;
}
.track-line li:first-child { border-inline-start: 1px solid var(--rule-2); }
.track-line li b { font-family: var(--mono); font-size: var(--t-sm); font-weight: 600; }
.track-line li .mono { font-size: 10px; color: var(--ink-3); }
.track-line .is-goal { background: var(--ok-wash); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.track-line .is-goal b { font-family: var(--sans); color: var(--ok-ink); }

/* Owner split under the need-decision table */
.owner-split { display: flex; flex-wrap: wrap; gap: var(--s6); margin-top: var(--s4); padding: var(--s4); background: var(--sheet); border: var(--edge); }
.owner { display: flex; flex-direction: column; }
.owner-v { font-family: var(--mono); font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; color: var(--stop-ink); }

.limits { display: grid; gap: var(--s3); background: var(--sheet); border: var(--edge); padding: var(--s5); }
.limits li { font-size: var(--t-sm); line-height: 1.8; color: var(--ink-2); padding-inline-start: var(--s4); border-inline-start: 3px solid var(--wait); }
.limits b { color: var(--ink); }

/* ---------- 13. Empty / error ------------------------------------------- */
.empty {
  border: 1px dashed var(--rule); background: var(--sheet-2);
  padding: var(--s7) var(--s5); text-align: center; color: var(--ink-2); font-size: var(--t-sm);
}
.empty strong { display: block; color: var(--ink); font-size: var(--t-md); margin-bottom: var(--s2); }
.error { border-color: var(--stop); background: var(--stop-wash); color: var(--stop-ink); }

/* ---------- 14. Tooltip ------------------------------------------------- */
.tip {
  position: fixed; z-index: 300; pointer-events: none;
  background: var(--navy); color: #fff; padding: var(--s2) var(--s3);
  border-radius: 3px; font-size: var(--t-micro); line-height: 1.5; max-width: 260px;
  box-shadow: 0 8px 24px rgba(16,24,32,.24);
  transform: translate(var(--x, 0), var(--y, 0));
  inset-block-start: 0; inset-inline-start: 0;
}
.tip b { font-family: var(--mono); }
.tip[hidden] { display: none; }

/* ---------- 15. Colophon ------------------------------------------------ */
.colophon {
  max-width: var(--maxw); margin-inline: auto;
  padding: var(--s6) var(--gutter) var(--s8);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4);
  border-top: 1px solid var(--rule); color: var(--ink-3); font-size: var(--t-micro);
}
.colophon p { max-width: 72ch; line-height: 1.75; }
.colophon-marks { display: flex; gap: var(--s4); align-items: center; }
.colophon-marks img { max-height: 26px; width: auto; filter: grayscale(1); opacity: .6; }

/* ---------- 16. Responsive ---------------------------------------------- */
@media (max-width: 1180px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .g-side { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 960px) {
  .thesis { grid-template-columns: minmax(0,1fr); }
  .thesis-copy { border-inline-end: 0; border-bottom: var(--edge); }
  .g-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .packet-body { grid-template-columns: minmax(0,1fr); }
  .packet-seam {
    background-image: repeating-linear-gradient(to right, var(--rule) 0 5px, transparent 5px 11px);
    background-size: 100% 1px; background-position: right center; background-repeat: repeat-x;
    height: 26px;
  }
}
@media (max-width: 720px) {
  .g-2, .g-3, .g-4 { grid-template-columns: minmax(0,1fr); }
  .tracks { grid-template-columns: minmax(0,1fr); }
  .masthead-side .sync dt { display: none; }
  .brand-text i { display: none; }
  .filters { position: static; }
  .result-count { margin-inline-start: 0; }
  .note > summary { grid-template-columns: max-content minmax(0,1fr); }
  .note > summary .chip { grid-column: 2; justify-self: start; }
  .note-body { padding-inline-start: var(--s3); }
  table.data th, table.data td { padding: var(--s2) var(--s3); }
}

/* ---------- 17. Motion -------------------------------------------------- */
.fade { animation: fade .14s ease-out; }
@keyframes fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- 18. Print --------------------------------------------------- */
@media print {
  :root { --ground:#fff; --lift:none; }
  body { background:#fff; font-size:10pt; }
  .masthead { position:static; background:#fff; color:#000; box-shadow:none; border-bottom:2px solid #000; }
  .brand, .brand-text b { color:#000; }
  .brand-text i, .sync dt, .sync dd { color:#333; }
  .tabs, .filters, .skip-link, .tip, .scan-open { display:none !important; }
  .sheet, .packet, .track, table.data { box-shadow:none; border-color:#999; break-inside:avoid; }
  .svc-hero { background:#fff; color:#000; border-color:#000; }
  .svc-hero .eyebrow, .svc-facts div { color:#333; }
  .svc-facts { background:#f2f2f2; }
  .svc-facts b { color:#000; }
  .note[open] .note-body, .note .note-body { display:block !important; }
  .note { break-inside: avoid; }
  a[href^="http"]::after { content:" (" attr(href) ")"; font-size:8pt; color:#555; }
  .colophon { border-top:1px solid #000; color:#000; }
}