/* =============================================================================
   HF-1002-CL-101 - Workflow Demo
   "Clinical instrument" design system. Refined navy/red, IBM Plex, precision grid.
   Authored for a serious clinical presentation: restraint, hairlines, exact rhythm.
   Tokens grounded in Tailwind (type/shadow/tracking) + Open Props (spacing/easing).
   ============================================================================= */

/* ---- Fonts (self-hosted, latin subset, graceful system fallback) ---------- */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/IBMPlexSans-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/IBMPlexSans-500.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/IBMPlexSans-600.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/IBMPlexSans-700.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/IBMPlexMono-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/IBMPlexMono-500.woff2') format('woff2');}

/* ---- Design tokens -------------------------------------------------------- */
:root{
  /* Navy - institutional, slightly desaturated, deep */
  --navy-950:#07152E; --navy-900:#0A1F40; --navy-800:#0E2A55; --navy-700:#143A73;
  --navy-600:#1B4A91; --navy-500:#2A63B8; --navy-400:#5E86C9;
  --navy-100:#DCE6F5; --navy-075:#E8EEF8; --navy-050:#F1F5FB;
  --navy:#0E2A55;            /* brand */
  --navy-link:#1A4C92;       /* AA on white */

  /* Red - refined clinical signal; reserved for critical / QC / accent */
  --red:#CE1A30; --red-bright:#E23B49; --red-on-dark:#FF8089;
  --red-text:#A4152A;        /* AA on white */
  --red-050:#FBEAEC; --red-100:#F6D3D8;

  /* Semantic */
  --pass:#157A45; --pass-text:#0E6238; --pass-050:#E6F4EC;
  --warn-text:#8A5A12; --warn-050:#FBF1DD;

  /* Neutrals - cool, faintly navy-tinted */
  --ink:#0E1B30;             /* headings */
  --body:#313D4F;            /* body text */
  --muted:#566479;           /* secondary text (AA on white) */
  --faint:#8493A6;           /* large/decorative only */
  --line:#E3E9F1; --line-2:#CFD9E6; --line-3:#BBC8DA;
  --surface:#FFFFFF; --soft:#F5F8FC; --soft-2:#EDF2F8;
  --page-1:#EAEEF4; --page-2:#DFE5EE;

  /* On dark surfaces */
  --on-navy:#EBF1FB; --on-navy-2:#AFC0DD; --on-navy-faint:#7C92B8;

  /* Type */
  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono','SF Mono',SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  --fs-display:clamp(2rem, 1.34rem + 2.7vw, 2.9rem);
  --fs-lead:clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
  --fs-h3:1.0625rem; --fs-body:.9375rem; --fs-sm:.8125rem; --fs-xs:.75rem;
  --fs-label:.6875rem; --fs-micro:.625rem;
  --lh-tight:1.14; --lh-snug:1.34; --lh-body:1.6;
  --tr-tight:-.021em; --tr-label:.15em; --tr-wide:.04em;

  /* Spacing (4px base) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:88px;

  /* Radii */
  --r-sm:5px; --r-md:9px; --r-lg:13px; --r-pill:999px;

  /* Shadows (navy-tinted) */
  --sh-xs:0 1px 2px rgba(13,32,64,.06);
  --sh-sm:0 1px 3px rgba(13,32,64,.08),0 1px 2px -1px rgba(13,32,64,.06);
  --sh-md:0 6px 16px -6px rgba(13,32,64,.14),0 2px 5px -3px rgba(13,32,64,.08);
  --sh-lg:0 28px 60px -22px rgba(8,24,56,.30),0 10px 22px -14px rgba(8,24,56,.16);

  /* Motion */
  --ease:cubic-bezier(.2,.6,.25,1); --ease-out:cubic-bezier(0,0,.2,1);
  --dur:.45s; --dur-fast:.18s;

  --maxw:1120px;
}

/* ---- Reset / base --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--sans); font-size:var(--fs-body); line-height:var(--lh-body);
  color:var(--body); font-weight:400;
  background:var(--page-2);
  background-image:linear-gradient(180deg,var(--page-1) 0%,var(--page-2) 60%,var(--page-2) 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:'kern' 1,'liga' 1,'calt' 1;
  padding:clamp(0px,3vw,48px) clamp(0px,3vw,40px);
}
a{color:var(--navy-link); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:2px}
code,.mono{font-family:var(--mono)}
h1,h2,h3,p,ul{margin:0}
::selection{background:var(--navy-100); color:var(--ink)}

/* Focus - visible, branded, consistent */
:focus-visible{outline:2.5px solid var(--navy-500); outline-offset:2px; border-radius:3px}
.masthead :focus-visible{outline-color:var(--on-navy)}

/* ---- Surface (the "document") -------------------------------------------- */
.wrap{
  position:relative; max-width:var(--maxw); margin:0 auto; background:var(--surface);
  border:1px solid var(--line-2); border-radius:var(--r-lg);
  box-shadow:var(--sh-lg); overflow:clip;   /* clip (not hidden) keeps .tabbar sticky */
}
/* filing-tab accent at the top edge */
.wrap::before{
  content:''; position:absolute; inset:0 0 auto 0; height:3px; z-index:3;
  background:linear-gradient(90deg,var(--red) 0,var(--red) 84px,var(--navy) 84px,var(--navy) 100%);
}

/* ---- Masthead ------------------------------------------------------------- */
.masthead{
  position:relative; isolation:isolate; overflow:hidden;
  background:radial-gradient(120% 140% at 88% -10%,#15356A 0%,var(--navy-900) 46%,var(--navy-950) 100%);
  color:var(--on-navy);
  padding:clamp(26px,3.4vw,42px) clamp(22px,3.6vw,52px) clamp(24px,3vw,38px);
}
/* fine grain for premium print-like depth */
.masthead::after{
  content:''; position:absolute; inset:0; z-index:-1; opacity:.05; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.mast-grid{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap}
.mast-brand{display:flex; align-items:center; gap:12px}
.mast-mark{flex:none; color:var(--on-navy-2)}
.mast-brand-text{display:flex; flex-direction:column; font-weight:600; font-size:13.5px; letter-spacing:.01em; color:#fff; line-height:1.2}
.mast-brand-text small{font-family:var(--mono); font-weight:400; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--on-navy-2); margin-top:3px}
.mast-status{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--mono);
  font-size:var(--fs-micro); letter-spacing:.1em; text-transform:uppercase; color:var(--on-navy);
  border:1px solid rgba(175,192,221,.32); border-radius:var(--r-pill); padding:6px 12px;
  background:rgba(8,22,52,.35); backdrop-filter:blur(2px); white-space:nowrap;
}
.mast-status .dot{width:7px; height:7px; border-radius:50%; background:var(--pass); box-shadow:0 0 0 3px rgba(21,122,69,.22)}
.doclabel{font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--tr-label); color:var(--red-on-dark); text-transform:uppercase; margin:26px 0 12px}
.masthead h1{
  font-size:var(--fs-display); font-weight:600; line-height:var(--lh-tight); letter-spacing:var(--tr-tight);
  color:#fff; max-width:36ch; text-wrap:balance;
}
.masthead h1 em{color:var(--red-on-dark); font-style:normal}
.sub{margin-top:14px; max-width:60ch; font-size:var(--fs-lead); line-height:1.5; color:var(--on-navy-2)}
.mast-meta{
  list-style:none; padding:0; margin:26px 0 0; display:flex; flex-wrap:wrap;
  gap:10px 22px; border-top:1px solid rgba(175,192,221,.22); padding-top:16px;
}
.mast-meta li{
  position:relative; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.08em;
  text-transform:uppercase; color:var(--on-navy-2); padding-left:16px;
}
.mast-meta li::before{content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:5px; height:5px; background:var(--navy-500); border-radius:1px}
.mast-meta li.warnish{color:var(--red-on-dark)}
.mast-meta li.warnish::before{background:var(--red)}

/* ---- Tab bar -------------------------------------------------------------- */
.tabbar{position:sticky; top:0; z-index:20; background:rgba(237,242,248,.92); backdrop-filter:saturate(150%) blur(10px); border-top:1px solid rgba(255,255,255,.55); border-bottom:1px solid var(--line-2); box-shadow:0 6px 16px -10px rgba(10,28,60,.30)}
.tabbar-inner{display:flex; flex-wrap:wrap; gap:5px; padding:9px clamp(12px,2.4vw,28px); max-width:var(--maxw); margin:0 auto; align-items:center}
.tabbar-inner::before{content:'Sections'; flex:none; align-self:center; font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.18em; text-transform:uppercase; color:var(--red-text); white-space:nowrap; padding-right:12px; border-right:1px solid var(--line-2); margin-right:4px}
.tab{
  position:relative; display:inline-flex; align-items:center; gap:8px; font-family:var(--sans);
  font-size:var(--fs-sm); font-weight:500; color:var(--muted); background:transparent; border:1px solid transparent;
  padding:9px 15px; cursor:pointer; border-radius:var(--r-sm);
  transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.tab .tab-idx{font-family:var(--mono); font-size:var(--fs-micro); font-weight:500; letter-spacing:.06em; color:var(--muted); transition:color var(--dur-fast) var(--ease)}
.tab:hover{color:var(--navy); background:rgba(255,255,255,.8); border-color:var(--line-2)}
.tab:hover .tab-idx{color:var(--navy-500)}
.tab.on{color:#fff; font-weight:600; background:var(--navy); border-color:var(--navy); box-shadow:var(--sh-sm)}
.tab.on .tab-idx{color:var(--red-on-dark)}
.tab.on:hover{color:#fff; background:var(--navy-800)}

/* ---- Sections / headings -------------------------------------------------- */
section{display:none; padding:clamp(28px,3.4vw,46px) clamp(22px,3.6vw,52px)}
section.on{display:block}
.kicker,h2{
  display:flex; align-items:center; gap:14px; margin:0 0 18px;
  font-family:var(--mono); font-size:var(--fs-label); font-weight:500; letter-spacing:var(--tr-label);
  text-transform:uppercase; color:var(--navy);
}
h2::after{content:''; flex:1; height:1px; background:linear-gradient(90deg,var(--line-2),transparent)}
h2::before{content:''; width:9px; height:9px; flex:none; border:1.5px solid var(--red); border-radius:1px; transform:rotate(45deg)}
h3{font-size:var(--fs-h3); font-weight:600; color:var(--ink); letter-spacing:-.005em; margin:26px 0 8px}
section > p{max-width:74ch; color:var(--body)}
.lead{font-size:var(--fs-lead); line-height:1.55; color:var(--ink); font-weight:400; max-width:70ch}
.lead em{font-style:normal; color:var(--red-text); font-weight:600}
.note{font-size:var(--fs-sm); color:var(--muted); margin-top:8px; max-width:74ch}

/* ---- Stat band ------------------------------------------------------------ */
.stats{display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line-2); border-radius:var(--r-md); overflow:hidden; margin:24px 0; background:var(--surface)}
.stat{position:relative; padding:20px 20px 18px; background:linear-gradient(180deg,var(--soft) 0,var(--surface) 100%); border-right:1px solid var(--line)}
.stat::before{content:''; position:absolute; top:0; left:0; width:28px; height:2px; background:var(--navy)}
.stat:nth-child(3)::before{background:var(--pass)}
.stat:last-child{border-right:0}
.stat:last-child::before{background:var(--red)}
.sv{font-size:clamp(1.9rem, 1.4rem + 1.4vw, 2.4rem); font-weight:600; color:var(--navy); letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums lining-nums}
.sl{font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-top:10px; line-height:1.45}

/* ---- Process flow --------------------------------------------------------- */
.flow{list-style:none; margin:16px 0 6px; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:11px}
.stage{position:relative; display:flex; flex-direction:column; gap:7px; justify-content:flex-start; background:linear-gradient(180deg,var(--soft),var(--surface)); border:1px solid var(--line-2); border-radius:var(--r-md); padding:14px 15px 13px; min-height:66px; transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.stage:hover{border-color:var(--navy-400); box-shadow:var(--sh-sm); transform:translateY(-2px)}
.stage .sn{font-family:var(--mono); font-size:var(--fs-micro); font-weight:500; color:var(--red); letter-spacing:.12em}
.stage .st{font-size:var(--fs-body); font-weight:600; color:var(--ink); line-height:1.28; letter-spacing:-.005em}
.stage.qc{background:linear-gradient(180deg,var(--navy-800),var(--navy-900)); border-color:var(--navy-900); box-shadow:var(--sh-sm)}
.stage.qc .sn{color:var(--red-on-dark)}
.stage.qc .st{color:#fff}
/* flow connector: a small chevron seated in the gap, within each row only */
.stage::after{content:''; position:absolute; right:-11px; top:50%; width:8px; height:8px; transform:translateY(-50%) rotate(45deg); border-top:1.5px solid var(--line-3); border-right:1.5px solid var(--line-3); z-index:2}
.stage:nth-child(4n)::after,.stage:last-child::after{display:none}
.arr{align-self:center; color:var(--line-3); font-size:16px; font-weight:400; line-height:1}

/* ---- Callout -------------------------------------------------------------- */
.scopebox{position:relative; background:var(--soft); border:1px solid var(--line-2); border-left:3px solid var(--navy); border-radius:0 var(--r-md) var(--r-md) 0; padding:16px 20px; margin:22px 0 4px; font-size:var(--fs-sm); line-height:1.6; color:var(--body); max-width:none}
.scopebox b{color:var(--navy); font-weight:600}

/* ---- Group headers (docs) ------------------------------------------------- */
.grouphd{display:flex; align-items:center; gap:14px; font-size:var(--fs-h3); font-weight:600; color:var(--ink); margin:30px 0 6px}
.grouphd::after{content:''; flex:1; height:1px; background:linear-gradient(90deg,var(--line-2),transparent)}
.grouptag{font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--red-text); font-weight:500}

/* ---- Deliverable lineage -------------------------------------------------- */
.lineage{background:linear-gradient(180deg,var(--navy-050),var(--soft)); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:18px; margin:16px 0 6px}
.lin-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.lin-cap{font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.linflow{display:flex; align-items:stretch; gap:10px; flex-wrap:wrap}
.linflow .arr{align-self:center}
.linstage{flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-md); padding:15px; box-shadow:var(--sh-xs)}
.linstage .sn{font-family:var(--mono); font-size:var(--fs-micro); font-weight:500; color:var(--red); letter-spacing:.08em}
.linstage.qc{border-color:var(--red-100); box-shadow:inset 0 2px 0 var(--red)}
.ls-title{font-size:var(--fs-body); font-weight:600; color:var(--ink)}
.ls-desc{font-size:var(--fs-sm); color:var(--body); line-height:1.5; flex:1}
.ls-foot{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:2px}
.ls-foot2{flex-wrap:wrap; justify-content:flex-start; gap:7px}

/* ---- Cards ---------------------------------------------------------------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-top:6px}
.cards.g2{grid-template-columns:repeat(2,1fr)}
.card{position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-md); padding:16px; transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.card:hover{border-color:var(--navy-400); box-shadow:var(--sh-md); transform:translateY(-2px)}
.card-tag{font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.12em; text-transform:uppercase; color:var(--red-text); font-weight:500}
.card-title{font-size:var(--fs-body); font-weight:600; color:var(--ink); margin:6px 0}
.card-desc{font-size:var(--fs-sm); color:var(--body); line-height:1.5; flex:1}
.card-foot{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:13px; padding-top:12px; border-top:1px solid var(--line)}

/* file name + download chip */
.fn{font-family:var(--mono); font-size:9px; letter-spacing:.01em; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.na{color:var(--faint); font-size:var(--fs-xs)}
.dl{flex:none; display:inline-flex; align-items:center; gap:6px; background:var(--navy); color:#fff; font-family:var(--sans); font-size:var(--fs-xs); font-weight:500; letter-spacing:.01em; padding:7px 14px; border-radius:var(--r-sm); white-space:nowrap; transition:background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.dl::after{content:'→'; font-size:.9em; opacity:.7; transition:transform var(--dur-fast) var(--ease)}
.dl:hover{background:var(--navy-700); text-decoration:none; transform:translateY(-1px)}
.dl:hover::after{transform:translateX(2px)}
.dl.sm{padding:5px 11px; font-size:11px}
.dl.sm::after{content:none}

/* ---- Badges --------------------------------------------------------------- */
.badge{display:inline-block; align-self:flex-start; font-family:var(--mono); font-size:9px; font-weight:500; letter-spacing:.07em; text-transform:uppercase; padding:3px 9px; border-radius:var(--r-pill); border:1px solid transparent}
.badge.pass{background:var(--pass-050); color:var(--pass-text); border-color:#BEE3CC}
.badge.final{background:var(--navy-075); color:var(--navy); border-color:var(--navy-100)}
.badge.truth{background:#fff; color:var(--navy); border-color:var(--navy-400)}
.badge.shell,.badge.input{background:var(--soft-2); color:var(--muted); border-color:var(--line-2)}

/* ---- Tables: programs / findings ----------------------------------------- */
.find{border-collapse:collapse; width:100%; font-size:var(--fs-sm); margin-top:4px}
.find th{background:var(--soft-2); text-align:left; padding:11px 12px; color:var(--navy); font-weight:600; font-size:var(--fs-xs); letter-spacing:.04em; text-transform:uppercase; border-bottom:1px solid var(--line-2)}
.find td{padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.5; color:var(--body)}
.find tbody tr:last-child td{border-bottom:0}
.find td code{font-size:.92em; background:var(--soft-2); padding:2px 6px; border-radius:4px; color:var(--navy)}

/* status pills */
.pill{display:inline-block; font-family:var(--mono); font-size:9px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; padding:3px 9px; border-radius:var(--r-pill); border:1px solid transparent}
.pill.ok{background:var(--pass-050); color:var(--pass-text); border-color:#BEE3CC}
.pill.fix{background:var(--red-050); color:var(--red-text); border-color:var(--red-100)}
.pill.acc{background:var(--navy-075); color:var(--navy); border-color:var(--navy-100)}

/* ---- Data tables (engraved) ---------------------------------------------- */
.scroll{overflow-x:auto; border:1px solid var(--line-2); border-radius:var(--r-md); margin:10px 0 4px; -webkit-overflow-scrolling:touch}
.data{border-collapse:collapse; width:100%; font-family:var(--mono); font-size:11.5px; line-height:1.5}
.data thead th{position:sticky; top:0; background:var(--navy); color:#fff; text-align:left; padding:9px 11px; font-weight:500; font-size:10px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap}
.data td{border-bottom:1px solid var(--line); padding:7px 11px; color:var(--ink); white-space:nowrap}
.data tbody tr:last-child td{border-bottom:0}
.data tbody tr:hover td{background:var(--navy-050)}
.data tr.hl td{background:var(--red-050); color:var(--ink); font-weight:500}
.data tr.hl:hover td{background:var(--red-100)}
.data tr.hl td:first-child{box-shadow:inset 3px 0 0 var(--red)}

/* ---- TFL switcher + wells ------------------------------------------------- */
.ttabs{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 14px}
.tt{font-family:var(--mono); font-size:var(--fs-sm); font-weight:500; border:1px solid var(--line-2); background:var(--surface); color:var(--navy); padding:7px 12px; border-radius:var(--r-sm); cursor:pointer; transition:all var(--dur-fast) var(--ease)}
.tt:hover{border-color:var(--navy-400); background:var(--navy-050)}
.tt.on{background:var(--navy); color:#fff; border-color:var(--navy)}
pre.tfl{
  position:relative; background:linear-gradient(180deg,var(--navy-900),var(--navy-950));
  color:#D7E1F3; font-family:var(--mono); font-size:11px; line-height:1.5; letter-spacing:.01em;
  padding:22px 20px 20px; border:1px solid var(--navy-800); border-top:3px solid var(--red);
  border-radius:var(--r-md); overflow-x:auto; white-space:pre; box-shadow:var(--sh-md); -webkit-overflow-scrolling:touch;
}

/* ---- QC metric grid ------------------------------------------------------- */
.qcgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin:8px 0 22px}
.qcbox{position:relative; background:linear-gradient(180deg,var(--soft),var(--surface)); border:1px solid var(--line-2); border-radius:var(--r-md); padding:18px; overflow:hidden}
.qcbox::before{content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--navy)}
.qcbox:nth-child(-n+3)::before{background:var(--pass)}
.qcbox:last-child::before{background:var(--red)}
.qcbox .v{font-size:clamp(1.7rem, 1.3rem + 1.1vw, 2.1rem); font-weight:600; color:var(--navy); line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums lining-nums}
.qcbox .l{font-size:var(--fs-sm); color:var(--body); margin-top:11px; line-height:1.45}

/* ---- Footer --------------------------------------------------------------- */
footer{background:var(--navy-950); color:var(--on-navy); padding:22px clamp(22px,3.6vw,52px); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; align-items:center}
footer .ft{font-size:var(--fs-sm); font-weight:600; color:#fff}
footer .fm{font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.12em; text-transform:uppercase; color:var(--on-navy-faint); text-align:right}
.disc{background:var(--navy-950); border-top:1px solid rgba(175,192,221,.16); padding:12px clamp(22px,3.6vw,52px); font-family:var(--mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--on-navy-faint); line-height:1.7}
.disc b{color:var(--red-on-dark); font-weight:500}

/* ---- Motion: one-time load reveal + tab fade ------------------------------ */
@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@keyframes fade{from{opacity:0} to{opacity:1}}
.masthead>*{animation:rise .6s var(--ease) backwards}
.doclabel{animation-delay:.05s} .masthead h1{animation-delay:.12s}
.sub{animation-delay:.2s} .mast-meta{animation-delay:.28s}
section.on{animation:fade .4s var(--ease-out)}
section.on>*{animation:rise .5s var(--ease) backwards}
section.on>*:nth-child(1){animation-delay:.04s}
section.on>*:nth-child(2){animation-delay:.09s}
section.on>*:nth-child(3){animation-delay:.14s}
section.on>*:nth-child(4){animation-delay:.19s}
section.on>*:nth-child(n+5){animation-delay:.24s}

/* ---- Responsive ----------------------------------------------------------- */
@media(max-width:880px){
  .cards{grid-template-columns:1fr 1fr}
  .qcgrid{grid-template-columns:1fr 1fr}
  .flow{grid-template-columns:repeat(2,1fr)}
  .stage::after{display:none}
}
@media(max-width:720px){
  body{padding:0}
  .wrap{border-radius:0; border-left:0; border-right:0}
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}
  .linflow{flex-direction:column}
  .linflow .arr{transform:rotate(90deg)}
  .tabbar-inner::before{display:none}
  .masthead h1{max-width:none}
}
@media(max-width:520px){
  .cards,.cards.g2,.qcgrid,.flow{grid-template-columns:1fr}
  .mast-status{display:none}
}

/* ---- Reduced motion ------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
}

/* ---- Print: show everything, drop chrome --------------------------------- */
@media print{
  body{background:#fff; padding:0; color:#000}
  .wrap{box-shadow:none; border:0; max-width:none}
  .wrap::before,.masthead::after{display:none}
  .tabbar{display:none}
  .masthead{background:#fff !important; color:#000; border-bottom:2px solid #000; padding:0 0 16px}
  .masthead h1,.mast-brand-text,.doclabel{color:#000}
  .sub,.mast-meta li{color:#333}
  .masthead h1 em,.doclabel,.mast-meta li.warnish{color:var(--red-text)}
  section{display:block !important; padding:22px 0; page-break-inside:auto}
  section + section{border-top:1px solid #ccc}
  pre.tfl{display:block !important; color:#000; background:#fff !important; border:1px solid #999; box-shadow:none; page-break-inside:avoid}
  .ttabs{display:none}
  .data thead th{background:#fff; color:#000; border-bottom:2px solid #000}
  .data td{color:#000}
  .card,.qcbox,.linstage,.stat{box-shadow:none}
  *,*::before,*::after{animation:none !important}
  footer,.disc{background:#fff; color:#333; border-top:1px solid #ccc}
}

/* ---- Define & data explorer ---------------------------------------------- */
.exp{margin:18px 0 6px; border:1px solid var(--line-2); border-radius:var(--r-lg); background:var(--surface); overflow:hidden}
.exp-head{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 16px; background:linear-gradient(180deg,var(--soft),var(--surface)); border-bottom:1px solid var(--line-2)}
.exp-lab{font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.12em; text-transform:uppercase; color:var(--red-text)}
.exp-select{flex:1; min-width:200px; font-family:var(--mono); font-size:var(--fs-sm); color:var(--ink); background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:8px 11px; cursor:pointer}
.exp-select:hover{border-color:var(--navy-400)}
.exp-views{display:inline-flex; gap:4px; background:var(--soft-2); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:3px}
.exp-views button{font-family:var(--sans); font-size:var(--fs-sm); font-weight:500; color:var(--muted); background:transparent; border:0; padding:6px 14px; border-radius:4px; cursor:pointer; transition:all var(--dur-fast) var(--ease)}
.exp-views button:hover{color:var(--navy)}
.exp-views button.on{color:#fff; background:var(--navy)}
.exp-meta{display:flex; align-items:center; gap:10px 22px; flex-wrap:wrap; padding:13px 16px; border-bottom:1px solid var(--line)}
.exp-title{display:flex; align-items:baseline; gap:11px; flex-wrap:wrap}
.exp-code{font-family:var(--mono); font-size:1rem; font-weight:600; color:var(--navy); letter-spacing:.01em}
.exp-name{font-size:var(--fs-body); font-weight:600; color:var(--ink)}
.exp-facts{display:flex; gap:8px 16px; flex-wrap:wrap; font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
.exp-dls{display:inline-flex; gap:7px; margin-left:auto}
.exp-search{display:block; width:calc(100% - 32px); margin:13px 16px 0; font-family:var(--mono); font-size:var(--fs-sm); color:var(--ink); background:var(--soft); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:9px 13px}
.exp-search:focus{outline:2px solid var(--navy-500); outline-offset:1px; background:var(--surface)}
.exp .scroll{margin:13px 16px; border-radius:var(--r-md)}
.exp-pager{display:flex; align-items:center; gap:14px; padding:0 16px 16px; flex-wrap:wrap}
.exp-pager .tt[disabled]{opacity:.4; cursor:default}
.exp-pg{font-family:var(--mono); font-size:var(--fs-xs); color:var(--muted)}
.exp-msg{padding:22px 16px; color:var(--muted); font-size:var(--fs-sm)}