/* ==========================================================================
   NDF — procurement tracker (assets/procurement.js; the "procurement-tracker" widget on
   procurement.html). Colours come only from the site tokens in site.css, so every skin
   (Signal, Review v2, Classic, Editorial) and light / dark apply without per-theme rules.
   ========================================================================== */

/* one record open (procurement.html?d=): the page's other sections step aside */
#pageBlocks.proc-reading > :not([data-proc]){ display:none !important; }

/* ---------- filters ---------- */
.proc-tools{
  display:grid; grid-template-columns:minmax(0,1fr) repeat(3,minmax(150px,210px)); gap:var(--s2);
  align-items:end; margin-top:var(--s2);
}
.proc-q input, .proc-sel select{
  width:100%; min-width:0; font-family:var(--body); font-size:16px; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule); border-radius:0; padding:12px 14px; outline:none;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.proc-q input{ border-bottom:2px solid var(--ink); }
.proc-q input:focus, .proc-sel select:focus{ border-color:var(--stamp); box-shadow:0 0 0 3px color-mix(in srgb, var(--stamp) 18%, transparent); }
.proc-q input::placeholder{ color:var(--ink-3); }
.proc-sel{ display:grid; gap:6px; min-width:0; }
.proc-sel .eyebrow{ margin:0; }

.proc-stages{ display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--s3); }
.proc-chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  padding:8px 11px; border:1px solid var(--rule); background:var(--paper); color:var(--ink-2);
  cursor:pointer; line-height:1.2; transition:border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.proc-chip:hover:not(:disabled){ border-color:var(--ink); color:var(--ink); }
.proc-chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.proc-chip:disabled{ opacity:.45; cursor:default; }
.proc-chip-n{
  font-variant-numeric:tabular-nums; font-size:10px; padding:1px 6px; min-width:20px; text-align:center;
  background:var(--paper-2); color:var(--ink-3); border-radius:999px;
}
.proc-chip[aria-pressed="true"] .proc-chip-n{ background:var(--stamp); color:var(--stamp-ink); }
.proc-status{ margin-top:var(--s2); min-height:1.6em; color:var(--ink-3); }

/* ---------- table ---------- */
.proc-table-wrap{ overflow-x:auto; border:1px solid var(--rule-soft); background:var(--paper); -webkit-overflow-scrolling:touch; }
.proc-list[aria-busy="true"] .proc-table-wrap{ opacity:.6; transition:opacity .2s var(--ease); }
.proc-table{ width:100%; border-collapse:collapse; font-size:15px; }
.proc-table th{
  text-align:left; font-family:var(--mono); font-weight:500; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); padding:12px 14px; border-bottom:2px solid var(--ink); white-space:nowrap; background:var(--paper);
}
.proc-table td{ padding:14px; border-bottom:1px solid var(--rule-soft); vertical-align:top; color:var(--ink-2); }
.proc-table tbody tr{ cursor:pointer; transition:background .2s var(--ease); }
.proc-table tbody tr:hover{ background:var(--paper-2); }
.proc-table tbody tr:last-child td{ border-bottom:0; }
.proc-table td.is-empty{ color:var(--ink-3); }
.proc-num{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.proc-c-name{ min-width:240px; }
.proc-name{ font-family:var(--display); font-size:17px; line-height:1.3; color:var(--ink); text-decoration:none; overflow-wrap:break-word; }
.proc-name:hover, .proc-name:focus-visible, .proc-table tbody tr:hover .proc-name{ color:var(--stamp); text-decoration:underline; text-underline-offset:3px; }
.proc-sub{ display:block; margin-top:4px; font-size:13.5px; color:var(--ink-3); overflow-wrap:break-word; }

/* stage badge: label under a seven-step meter */
.proc-stage{
  display:inline-flex; flex-direction:column; gap:6px; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink); white-space:nowrap;
}
.proc-pips{ display:flex; gap:2px; }
.proc-pips i{ width:11px; height:4px; background:var(--rule); }
.proc-pips i.on{ background:var(--ink-3); }
.proc-stage.is-contract .proc-pips i.on, .proc-stage.is-delivery .proc-pips i.on{ background:var(--stamp); }
.proc-stage.is-delivered .proc-pips i.on{ background:var(--state-2); }
.proc-stage.is-delivered{ color:var(--state-2); }
.proc-stage.is-cancelled{ color:var(--ink-3); text-decoration:line-through; }

.proc-empty{
  padding:var(--s4); background:var(--paper); border:1px solid var(--rule-soft); border-top:3px solid var(--stamp); color:var(--ink-2);
}
.proc-empty h3, .proc-empty h1{ font-size:clamp(22px,2.6vw,30px); margin:0 0 8px; color:var(--ink); }
.proc-empty p{ margin:0 0 var(--s2); max-width:60ch; }
.proc-more-row{ display:flex; justify-content:center; margin-top:var(--s3); }
.proc-more-row:has(> [hidden]){ display:none; }

/* ---------- one record ---------- */
.proc-back{ display:inline-flex; gap:8px; align-items:center; color:var(--ink-2); }
.proc-back:hover{ color:var(--stamp); }
.proc-d-head{ margin:var(--s2) 0 var(--s3); max-width:980px; }
.proc-d-title{ font-size:clamp(34px,5.4vw,66px); line-height:1.04; margin:var(--s1) 0 var(--s2); overflow-wrap:anywhere; }
.proc-d-sum{ margin:0; max-width:70ch; color:var(--ink-2); }
.proc-d-loading .sk{ display:block; height:16px; width:60%; margin-top:14px; background:var(--rule-soft); animation:procPulse 1.4s ease-in-out infinite; }
.proc-d-loading .sk-s{ width:24%; height:11px; }
.proc-d-loading .sk-m{ width:42%; height:40px; }
@keyframes procPulse{ 50%{ opacity:.55; } }

.proc-pipe-wrap{ margin:var(--s3) 0 0; }
.proc-pipe{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border:1px solid var(--rule-soft); background:var(--paper); }
.proc-pipe li{
  position:relative; display:grid; gap:6px; padding:12px 12px 14px; border-left:1px solid var(--rule-soft); color:var(--ink-3); min-width:0;
}
.proc-pipe li:first-child{ border-left:0; }
.proc-pipe li::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--rule); }
.proc-pipe li.is-done::before{ background:var(--ink-3); }
.proc-pipe li.is-now{ background:var(--paper-2); color:var(--ink); }
.proc-pipe li.is-now::before{ background:var(--stamp); }
.proc-pipe-n{ font-family:var(--mono); font-size:11px; font-variant-numeric:tabular-nums; }
.proc-pipe-l{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; line-height:1.35; overflow-wrap:anywhere; }
.proc-pipe li.is-now .proc-pipe-l{ font-weight:700; }
.proc-cancelled{ margin:0; padding:var(--s2) var(--s3); border:1px solid var(--rule-soft); border-left:3px solid var(--ink-3); background:var(--paper); color:var(--ink-2); }
.proc-cancelled b{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }

.proc-d-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,380px); gap:var(--s5); margin-top:var(--s4); align-items:start; }
.proc-d-main{ min-width:0; }
.proc-d-fig{ margin:0 0 var(--s3); background:var(--field-b); border:1px solid var(--rule-soft); }
.proc-d-fig img{ display:block; width:100%; max-height:560px; object-fit:contain; }
.proc-d-fig figcaption{
  display:flex; flex-wrap:wrap; gap:4px 16px; justify-content:space-between; align-items:baseline;
  padding:10px 14px 12px; background:var(--paper); border-top:1px solid var(--rule-soft);
}
.proc-d-cap{ font-size:15px; line-height:1.4; color:var(--ink); }
.proc-d-credit{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--ink-3); }
.proc-d-body{ margin-top:0; }
.proc-d-body h3{ font-size:clamp(19px,2vw,23px); margin-top:1.4em; }
.proc-d-body ul, .proc-d-body ol{ padding-left:1.3em; }
.proc-d-body li + li{ margin-top:.35em; }
.proc-d-body blockquote{ margin:1.4em 0; padding:0 0 0 var(--s3); border-left:3px solid var(--stamp); font-style:italic; color:var(--ink-2); }
.proc-d-body figure{ margin:1.6em 0; }
.proc-d-body figure img, .proc-d-body img{ display:block; max-width:100%; height:auto; }
.proc-d-body figcaption{ font-family:var(--mono); font-size:12px; color:var(--ink-3); margin-top:8px; }
.proc-d-body a{ color:var(--stamp); text-decoration:underline; text-underline-offset:3px; }
.proc-d-side{ display:grid; gap:var(--s3); position:sticky; top:100px; min-width:0; }
.proc-box{ background:var(--paper); border:1px solid var(--rule-soft); border-top:3px solid var(--ink); padding:var(--s3); min-width:0; }
.proc-box-h{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--stamp); margin:0 0 var(--s2); }
.proc-facts{ margin:0; display:grid; }
.proc-fact{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:10px; padding:9px 0; border-top:1px solid var(--rule-soft); }
.proc-fact:first-child{ border-top:0; padding-top:0; }
.proc-fact dt{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); padding-top:3px; }
.proc-fact dd{ margin:0; font-size:16px; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.proc-wpn{ display:grid; grid-template-columns:88px minmax(0,1fr); gap:12px; align-items:center; color:var(--ink); text-decoration:none; }
.proc-wpn img{ width:88px; height:60px; object-fit:cover; display:block; border:1px solid var(--rule-soft); background:var(--paper-2); }
.proc-wpn:not(:has(img)){ grid-template-columns:minmax(0,1fr); }
.proc-wpn-t{ display:grid; gap:3px; min-width:0; }
.proc-wpn-t b{ font-family:var(--display); font-size:17px; font-weight:700; overflow-wrap:anywhere; }
.proc-wpn-t small{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.proc-wpn-more{ font-size:13.5px; color:var(--stamp); }
.proc-wpn:hover b, .proc-wpn:focus-visible b{ color:var(--stamp); }
.proc-sources ol{ margin:0; padding-left:1.2em; display:grid; gap:8px; font-size:14px; line-height:1.45; }
.proc-sources li::marker{ color:var(--ink-3); font-family:var(--mono); font-size:11px; }
.proc-sources a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--rule); text-underline-offset:3px; overflow-wrap:anywhere; }
.proc-sources a:hover{ color:var(--stamp); text-decoration-color:currentColor; }
.proc-ext{ color:var(--ink-3); }
.proc-src-host{ display:block; font-family:var(--mono); font-size:11px; color:var(--ink-3); overflow-wrap:anywhere; }
.proc-tags{ margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid var(--rule); display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; }
.proc-tags ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.proc-tag{ font-family:var(--mono); font-size:12px; color:var(--ink-2); padding:4px 9px; background:var(--paper-2); border:1px solid transparent; text-decoration:none; }
.proc-tag:hover, .proc-tag:focus-visible{ border-color:var(--stamp); color:var(--stamp); }
.proc-d-updated{ margin-top:var(--s3); color:var(--ink-3); }
.proc-related{ margin-top:var(--s5); padding-top:var(--s3); border-top:2px solid var(--ink); }
.proc-related .section-head{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s2); flex-wrap:wrap; }
.proc-rel-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s2); }
.proc-rel-list li{ display:grid; gap:8px; align-content:start; padding:var(--s2) var(--s3); background:var(--paper); border:1px solid var(--rule-soft); min-width:0; }
.proc-rel{ font-family:var(--display); font-size:18px; line-height:1.3; color:var(--ink); text-decoration:none; overflow-wrap:anywhere; }
.proc-rel:hover, .proc-rel:focus-visible{ color:var(--stamp); text-decoration:underline; }

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .proc-tools{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .proc-q{ grid-column:1 / -1; }
  .proc-d-grid{ grid-template-columns:minmax(0,1fr); gap:var(--s4); }
  .proc-d-side{ position:static; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
  .proc-pipe{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .proc-pipe li:nth-child(5){ border-left:0; }
  .proc-pipe li:nth-child(n+5){ border-top:1px solid var(--rule-soft); }
}
@media (max-width:760px){
  /* the table becomes one card per record, each cell labelled */
  .proc-table-wrap{ border:0; background:transparent; overflow:visible; }
  .proc-table, .proc-table tbody, .proc-table tr, .proc-table td{ display:block; width:100%; }
  .proc-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .proc-table tr{ background:var(--paper); border:1px solid var(--rule-soft); border-left:3px solid var(--stamp); margin-bottom:var(--s2); padding:8px 0; }
  .proc-table tbody tr:hover{ background:var(--paper); }
  .proc-table td{ border:0; padding:6px var(--s2); display:grid; grid-template-columns:minmax(96px,36%) minmax(0,1fr); gap:var(--s2); }
  .proc-table td::before{
    content:attr(data-label); font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); padding-top:2px;
  }
  .proc-table td.is-empty{ display:none; }
  .proc-table td.proc-c-name{ grid-template-columns:minmax(0,1fr); min-width:0; padding-bottom:8px; }
  .proc-table td.proc-c-name::before{ content:none; }
  .proc-num{ white-space:normal; }
  .proc-rel-list{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:620px){
  .proc-tools{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .proc-sel:last-child{ grid-column:1 / -1; }
  .proc-stages{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; margin-inline:calc(-1 * var(--gut)); padding-inline:var(--gut); scrollbar-width:thin; }
  .proc-chip{ flex:none; }
  .proc-d-side{ grid-template-columns:minmax(0,1fr); }
  .proc-pipe{ grid-template-columns:minmax(0,1fr); }
  .proc-pipe li{ grid-template-columns:28px minmax(0,1fr); align-items:center; border-left:0; border-top:1px solid var(--rule-soft); padding:9px 12px; }
  .proc-pipe li:first-child{ border-top:0; }
  .proc-pipe li::before{ top:0; bottom:0; right:auto; width:3px; height:auto; }
  .proc-fact{ grid-template-columns:110px minmax(0,1fr); }
}