/* ============================================================
   Case Study — shared visual language with index.html
   Tokens echo the résumé; components are case-study specific.
   ============================================================ */

:root{
  --bg:#f4f1ec;
  --paper:#fbf9f5;
  --ink:#16181c;
  --ink-2:#3a3d44;
  --ink-3:#6b6f78;
  --rule:#d9d3c7;
  --rule-soft:#e8e3d8;
  --accent:#1f2a44;          /* deep navy-ink */
  --accent-soft:#e5e1d6;
  --accent-tint:#eef0f5;     /* cool navy wash */

  --warn:#9a6b2f;            /* muted amber  */
  --crit:#8f3a34;            /* muted brick  */
  --ok:#3f6b52;              /* muted green  */

  --code-bg:#191c24;
  --code-panel:#21252f;
  --code-ink:#d9d6cc;
  --code-dim:#727b8c;
  --code-gold:#c9a55e;
  --code-green:#9bc09a;
  --code-blue:#8fa6cf;

  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --display:'Inter Tight', 'Inter', sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- page shell ---------- */
.page{
  max-width:1120px;
  margin:32px auto 80px;
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:6px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 30px 60px -30px rgba(22,24,28,.15),
    0 8px 20px -10px rgba(22,24,28,.08);
  overflow:hidden;
}

.mono-label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
}

/* ---------- masthead ---------- */
.masthead{
  padding:48px 56px 38px;
  border-bottom:1px solid var(--rule);
  display:grid;
  grid-template-columns:1fr auto;
  gap:32px;
  align-items:end;
}
.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:18px;
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow .ix{
  border:1px solid var(--rule);
  padding:3px 8px;
  border-radius:3px;
  color:var(--ink-2);
  background:var(--bg);
}
h1.title{
  font-family:var(--display);
  font-weight:600;
  font-size:54px;
  letter-spacing:-.025em;
  line-height:1.02;
  margin:0;
  color:var(--ink);
  max-width:16ch;
}
h1.title .sub{
  display:block;
  font-size:21px;
  font-weight:500;
  color:var(--ink-3);
  letter-spacing:-.01em;
  margin-top:16px;
  max-width:none;
  line-height:1.35;
}
h1.title .sub em{
  font-style:normal;
  color:var(--accent);
  background:linear-gradient(transparent 62%, var(--accent-soft) 62%);
  padding:0 2px;
}
.meta{
  font-family:var(--mono);
  font-size:12px;
  line-height:1.9;
  color:var(--ink-2);
  min-width:270px;
  margin-left:auto;
  display:inline-grid;
  grid-template-columns:auto 1fr;
  column-gap:14px;
  row-gap:2px;
}
.meta > div{display:contents;}
.meta .label{color:var(--ink-3); text-align:left;}
.meta .val{text-align:left; color:var(--ink-2);}
.meta a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--rule);}
.meta a:hover{border-bottom-color:var(--accent); color:var(--accent);}

/* ---------- scenario band ---------- */
.scenario{
  padding:34px 56px 38px;
  border-bottom:1px solid var(--rule);
  display:grid;
  grid-template-columns:1.35fr .9fr;
  gap:48px;
  background:linear-gradient(180deg, var(--paper), var(--bg) 240%);
}
.scenario .lede{
  font-family:var(--display);
  font-weight:500;
  font-size:20px;
  line-height:1.45;
  letter-spacing:-.012em;
  color:var(--ink);
  margin:0 0 16px;
  text-wrap:pretty;
}
.scenario .lede .hl{background:linear-gradient(transparent 62%, var(--accent-soft) 62%);}
.scenario p.body-copy{
  margin:0 0 12px;
  color:var(--ink-2);
  font-size:14.5px;
  line-height:1.6;
  text-wrap:pretty;
}
.scenario p.body-copy strong{color:var(--ink); font-weight:600;}

.spec-card{
  border:1px solid var(--rule);
  border-radius:6px;
  background:var(--bg);
  overflow:hidden;
  align-self:start;
}
.spec-card .spec-head{
  padding:12px 16px;
  border-bottom:1px solid var(--rule);
  background:var(--accent);
  color:var(--paper);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.spec-card .spec-head .tag{
  font-size:9.5px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:3px;
  padding:2px 7px;
  letter-spacing:.08em;
}
.spec-card dl{
  margin:0;
  display:grid;
  grid-template-columns:auto 1fr;
}
.spec-card dt,.spec-card dd{
  margin:0;
  padding:9px 16px;
  border-top:1px solid var(--rule-soft);
  font-family:var(--mono);
  font-size:11.5px;
  line-height:1.5;
}
.spec-card dt{
  color:var(--ink-3);
  text-transform:uppercase;
  letter-spacing:.06em;
  white-space:nowrap;
}
.spec-card dd{color:var(--ink); border-left:1px solid var(--rule-soft);}
.spec-card dl > dt:first-child,
.spec-card dl > dt:first-child + dd{border-top:none;}

/* ---------- journey stepper ---------- */
.journey{
  padding:26px 56px;
  border-bottom:1px solid var(--rule);
  background:var(--bg);
}
.journey .mono-label{margin-bottom:18px; display:block;}
.stepper{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:0;
  position:relative;
}
.stepper::before{
  content:"";
  position:absolute;
  left:7%; right:7%;
  top:13px;
  height:1px;
  background:var(--rule);
}
.step{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  position:relative;
  padding:0 6px;
}
.step .node{
  width:28px;height:28px;
  border-radius:50%;
  background:var(--paper);
  border:1.5px solid var(--accent);
  color:var(--accent);
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:1;
}
.step:last-child .node{background:var(--accent); color:var(--paper);}
.step .step-name{
  font-family:var(--display);
  font-weight:600;
  font-size:13px;
  letter-spacing:-.01em;
  color:var(--ink);
  line-height:1.2;
}
.step .step-art{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.04em;
  color:var(--ink-3);
  text-transform:uppercase;
}

/* ---------- body grid (mirrors résumé) ---------- */
.body{padding:8px 56px 56px;}
section.block{
  display:grid;
  grid-template-columns:188px 1fr;
  gap:48px;
  padding:40px 0;
  border-top:1px solid var(--rule-soft);
}
section.block:first-of-type{border-top:none; padding-top:28px;}
/* let the grid columns shrink below their content's min-size so wide
   children (tables, the sequence diagram, code) can scroll internally
   instead of forcing the whole section past the viewport on mobile */
section.block > .section-label,
section.block > .block-body{ min-width:0; }

/* horizontal scroll wrapper for wide data tables on small screens */
.table-scroll{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.section-label{padding-top:4px;}
.section-label .phase{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  display:block;
  margin-bottom:8px;
}
.section-label h2{
  font-family:var(--display);
  font-weight:600;
  font-size:20px;
  letter-spacing:-.015em;
  line-height:1.18;
  margin:0 0 12px;
  color:var(--ink);
}
.section-label .note{
  font-size:12.5px;
  color:var(--ink-3);
  line-height:1.5;
  text-wrap:pretty;
}

.block-body > p{
  margin:0 0 18px;
  color:var(--ink-2);
  font-size:14.5px;
  line-height:1.62;
  text-wrap:pretty;
  max-width:68ch;
}
.block-body > p strong{color:var(--ink); font-weight:600;}
.block-body > p:last-child{margin-bottom:0;}
.block-body .hl{background:linear-gradient(transparent 62%, var(--accent-soft) 62%);}

h3.sub-h{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:500;
  margin:30px 0 14px;
  padding-bottom:8px;
  border-bottom:1px solid var(--rule);
}
h3.sub-h:first-child{margin-top:0;}

/* ---------- two-plane cards ---------- */
.planes{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:8px;}
.plane{
  border:1px solid var(--rule);
  border-radius:6px;
  padding:18px 20px;
  background:var(--bg);
}
.plane .pk{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3); margin-bottom:8px;
}
.plane h4{
  font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.01em;
  margin:0 0 6px;color:var(--ink);
}
.plane p{margin:0;font-size:13px;line-height:1.5;color:var(--ink-2);}
.plane .when{
  margin-top:12px;padding-top:10px;border-top:1px dashed var(--rule);
  font-family:var(--mono);font-size:10.5px;color:var(--accent);letter-spacing:.04em;
}

/* ---------- data tables ---------- */
.tbl{width:100%; border-collapse:collapse; font-size:13.5px;}
.tbl th{
  text-align:left;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:500;
  padding:0 14px 10px;
  border-bottom:1px solid var(--rule);
  vertical-align:bottom;
}
.tbl td{
  padding:13px 14px;
  border-bottom:1px solid var(--rule-soft);
  color:var(--ink-2);
  line-height:1.5;
  vertical-align:top;
  text-wrap:pretty;
}
.tbl tr:last-child td{border-bottom:none;}
.tbl td.actor,.tbl td.k{
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink);
  white-space:nowrap;
}
.tbl td strong{color:var(--ink); font-weight:600;}
.tbl tbody tr:hover{background:var(--accent-tint);}

/* ---------- message-type cards ---------- */
.mtypes{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
.mtype{
  border:1px solid var(--rule);
  border-radius:6px;
  padding:16px 18px;
  background:var(--bg);
  display:flex; flex-direction:column; gap:8px;
}
.mtype .mt-top{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.mtype h4{
  font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.01em;
  margin:0;color:var(--ink);
}
.mtype p{margin:0; font-size:12.5px; line-height:1.45; color:var(--ink-2);}
.mtype .badges{display:flex; gap:6px; flex-wrap:wrap; margin-top:2px;}
.badge{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;border:1px solid var(--rule);
  color:var(--ink-3);background:var(--paper);white-space:nowrap;
}
.badge.on{border-color:var(--accent); color:var(--accent); background:var(--accent-tint);}
.badge.sign{border-color:var(--crit); color:var(--crit); background:#f6ecea;}

/* ============================================================
   SEQUENCE DIAGRAM
   ============================================================ */
.seq-wrap{
  border:1px solid var(--rule);
  border-radius:8px;
  background:
    linear-gradient(180deg,#fcfbf7,#f7f4ee);
  padding:24px 26px 30px;
  margin-top:6px;
  overflow-x:auto;
}
.seq{position:relative; min-width:680px;}
.seq-actors{display:grid; grid-template-columns:repeat(4,1fr); margin-bottom:8px;}
.seq-actor{
  display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center;
}
.seq-actor .who{
  font-family:var(--display);font-weight:600;font-size:13px;color:var(--ink);
  border:1px solid var(--rule);background:var(--paper);
  padding:7px 12px;border-radius:6px;line-height:1.1;min-width:108px;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}
.seq-actor .role-k{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}

.seq-body{position:relative; padding-top:6px;}
.lifeline{position:absolute; top:0; bottom:0; width:1px; background:var(--rule); transform:translateX(-50%);}
.lifeline.l1{left:12.5%;}
.lifeline.l2{left:37.5%;}
.lifeline.l3{left:62.5%;}
.lifeline.l4{left:87.5%;}

.msg{position:relative; min-height:38px;}
.msg .seg{position:absolute; top:0; bottom:0;}
.s12 .seg{left:12.5%; width:25%;}
.s23 .seg{left:37.5%; width:25%;}
.s34 .seg{left:62.5%; width:25%;}
.seg .line{position:absolute; left:0; right:0; top:60%; border-top:1.5px solid var(--accent);}
.seg .line.dash{border-top-style:dashed; opacity:.85;}
.dir-r .seg .line::after{
  content:""; position:absolute; right:-1px; top:-4.5px;
  width:0;height:0;border:5px solid transparent;border-left-color:var(--accent);
}
.dir-l .seg .line::after{
  content:""; position:absolute; left:-1px; top:-4.5px;
  width:0;height:0;border:5px solid transparent;border-right-color:var(--accent);
}
.seg .cap{position:absolute; left:0; right:0; bottom:60%; margin-bottom:5px; text-align:center; line-height:1;}
.seg .cap span{
  display:inline-block;
  background:var(--paper);
  padding:2px 9px;
  font-size:12px;
  color:var(--ink);
  border-radius:4px;
  max-width:94%;
}
.seg .cap span small{display:block; font-family:var(--mono); font-size:9.5px; color:var(--ink-3); letter-spacing:.04em; margin-top:2px;}

/* processing (self) box centred on a lifeline */
.proc-row{position:relative; min-height:42px;}
.proc{
  position:absolute; top:6px; transform:translateX(-50%);
  background:var(--accent-tint);
  border:1px solid #c4ccdd;
  border-radius:6px;
  padding:6px 11px;
  font-family:var(--mono); font-size:11px; color:var(--accent);
  white-space:nowrap; line-height:1.2;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}
.proc::before{
  content:"↺"; margin-right:6px; opacity:.7;
}
.atL2{left:37.5%;}
.atL3{left:62.5%;}
.atL4{left:87.5%;}

/* fragments */
.frag{
  position:relative;
  border:1px solid #c8cedb;
  border-radius:5px;
  margin:8px 0;
  padding:24px 12px 10px;
}
.frag > .frag-tab{
  position:absolute; top:0; left:0;
  background:var(--accent); color:var(--paper);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 10px 3px 9px;
  border-radius:5px 0 7px 0;
}
.frag > .frag-cond{
  position:absolute; top:3px; left:54px;
  font-family:var(--mono); font-size:10px; color:var(--ink-3);
}
.frag-else{
  border-top:1px dashed #c8cedb;
  margin:8px -12px 6px;
  padding:7px 12px 0;
  position:relative;
}
.frag-else span{
  font-family:var(--mono); font-size:10px; color:var(--ink-3);
  background:var(--paper); padding:0 6px; position:relative; top:-15px;
}
.note-budget{
  text-align:center; margin:2px 0 10px;
}
.note-budget span{
  font-family:var(--mono); font-size:10px; letter-spacing:.04em;
  color:var(--warn); background:#f6efe2; border:1px dashed #d9c39a;
  border-radius:4px; padding:3px 10px;
}

.seq-caption{
  font-family:var(--mono); font-size:10.5px; color:var(--ink-3);
  margin-top:14px; letter-spacing:.03em; text-align:right;
}

/* ---------- gap log ---------- */
.gap-tbl td.id{
  font-family:var(--mono);font-size:11.5px;color:var(--accent);font-weight:500;white-space:nowrap;
}
.sev{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
.sev::before{content:"";width:8px;height:8px;border-radius:50%;}
.sev.crit{color:var(--crit);} .sev.crit::before{background:var(--crit);}
.sev.warn{color:var(--warn);} .sev.warn::before{background:var(--warn);}
.sev.ok{color:var(--ok);} .sev.ok::before{background:var(--ok);}
.owner-chip{
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;
  border:1px solid var(--rule);border-radius:999px;padding:3px 9px;color:var(--ink-2);
  white-space:nowrap;background:var(--bg);
}

/* ---------- requirements chips ---------- */
.req-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.req{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
  border:1px solid var(--rule); border-radius:6px; padding:12px 14px; background:var(--bg);
}
.req .rid{
  font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--paper);
  background:var(--accent); border-radius:4px; padding:4px 7px; white-space:nowrap; line-height:1;
}
.req.nfr .rid{background:var(--ink-2);}
.req p{margin:0; font-size:13px; line-height:1.45; color:var(--ink-2);}
.req p b{color:var(--ink); font-weight:600;}

/* ---------- code panel ---------- */
.code{
  background:var(--code-bg);
  border:1px solid #0f1117;
  border-radius:8px;
  overflow:hidden;
  margin:6px 0 4px;
  box-shadow:0 14px 30px -18px rgba(0,0,0,.5);
}
.code .code-bar{
  display:flex; align-items:center; gap:8px;
  padding:10px 14px;
  background:var(--code-panel);
  border-bottom:1px solid #0f1117;
}
.code .code-bar .dots{display:flex; gap:6px;}
.code .code-bar .dots i{width:9px;height:9px;border-radius:50%;background:#3a4150;display:block;}
.code .code-bar .fname{
  font-family:var(--mono); font-size:11px; color:var(--code-dim); margin-left:6px;
  letter-spacing:.03em;
}
.code .code-bar .lang{
  margin-left:auto; font-family:var(--mono); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--code-dim);
  border:1px solid #353c4a; border-radius:3px; padding:2px 7px;
}
.code pre{
  margin:0; padding:16px 18px; overflow-x:auto;
  font-family:var(--mono); font-size:12.5px; line-height:1.65; color:var(--code-ink);
}
.code .kw{color:var(--code-gold);}
.code .st{color:var(--code-green);}
.code .cm{color:var(--code-dim); font-style:italic;}
.code .nm{color:var(--code-blue);}
.code .pl{color:#aab2c2;}

/* ---------- contract / endpoint card ---------- */
.endpoint{
  border:1px solid var(--rule); border-radius:8px; overflow:hidden; margin-bottom:18px;
  background:var(--bg);
}
.endpoint .ep-head{
  display:flex; align-items:center; gap:12px; padding:14px 18px;
  background:var(--paper); border-bottom:1px solid var(--rule);
}
.method{
  font-family:var(--mono); font-weight:600; font-size:12px; letter-spacing:.06em;
  color:var(--paper); background:var(--ok); border-radius:4px; padding:5px 9px;
}
.endpoint .path{font-family:var(--mono); font-size:14px; color:var(--ink); font-weight:500;}
.endpoint .ep-host{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--ink-3);}
.endpoint .ep-desc{padding:14px 18px; font-size:13.5px; color:var(--ink-2); line-height:1.55;}
.endpoint .ep-desc strong{color:var(--ink);}
.resp-list{border-top:1px solid var(--rule-soft);}
.resp{
  display:grid; grid-template-columns:64px 1fr; gap:14px; align-items:baseline;
  padding:11px 18px; border-top:1px solid var(--rule-soft); font-size:13px; color:var(--ink-2);
}
.resp:first-child{border-top:none;}
.resp .status{
  font-family:var(--mono); font-size:12px; font-weight:500; border-radius:4px;
  padding:3px 0; text-align:center; line-height:1;
}
.resp .status.s2{color:var(--ok); border:1px solid #b9d2c3; background:#eef5f0;}
.resp .status.s4{color:var(--crit); border:1px solid #ddc0bd; background:#f7eeed;}
.resp b{color:var(--ink); font-weight:600;}

/* ---------- critical-path flow ---------- */
.flow{position:relative; margin-top:4px; padding-left:6px;}
.flow .stage{
  position:relative; display:grid; grid-template-columns:30px 1fr; gap:18px;
  padding-bottom:22px;
}
.flow .stage:last-child{padding-bottom:0;}
.flow .rail{position:relative; display:flex; justify-content:center;}
.flow .rail::before{
  content:""; position:absolute; top:4px; bottom:-22px; width:2px; background:var(--rule);
}
.flow .stage:last-child .rail::before{display:none;}
.flow .dot{
  width:18px;height:18px;border-radius:50%;
  background:var(--paper); border:2px solid var(--accent); z-index:1; margin-top:3px;
}
.flow .stage.gate .dot{
  border-radius:3px; transform:rotate(45deg); background:var(--accent);
  width:16px;height:16px;
}
.flow .stage.done .dot{background:var(--ok); border-color:var(--ok);}
.flow .fc{
  border:1px solid var(--rule); border-radius:6px; background:var(--bg);
  padding:13px 16px;
}
.flow .stage.gate .fc{border-color:var(--accent); background:var(--accent-tint);}
.flow .fc .fc-top{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.flow .fc h4{
  font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:-.01em;
  margin:0; color:var(--ink);
}
.flow .fc .gate-tag{
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--paper); background:var(--accent); border-radius:3px; padding:3px 7px;
}
.flow .fc p{margin:6px 0 0; font-size:12.5px; color:var(--ink-2); line-height:1.5;}
.flow .fc p strong{color:var(--ink);}
.flow .parallel{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.flow .parallel .fc{padding:11px 14px;}
.flow .parallel .fc p{font-size:12px;}
.flow .pk-tag{
  font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
}

/* ---------- coverage matrix ---------- */
.matrix{width:100%; border-collapse:collapse; font-size:12.5px;}
.matrix th{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3); font-weight:500; padding:0 8px 10px; text-align:center; vertical-align:bottom;
}
.matrix th.lead{text-align:left; width:42%;}
.matrix td{
  padding:9px 8px; border-top:1px solid var(--rule-soft); text-align:center; color:var(--ink-2);
}
.matrix td.lead{text-align:left; color:var(--ink); font-size:13px;}
.matrix tbody tr:hover{background:var(--accent-tint);}
.mk{font-family:var(--mono); font-weight:600;}
.mk.yes{color:var(--ok);}
.mk.part{color:var(--warn); font-size:10px; letter-spacing:.04em;}
.mk.no{color:var(--rule); }
.matrix .env-foot td{font-family:var(--mono);font-size:9.5px;color:var(--ink-3);border-top:1px solid var(--rule);padding-top:8px;}

.checklist{
  list-style:none; margin:18px 0 0; padding:16px 18px;
  border:1px solid var(--rule); border-radius:6px; background:var(--bg);
  display:grid; grid-template-columns:1fr 1fr; gap:8px 22px;
}
.checklist li{
  position:relative; padding-left:24px; font-size:13px; color:var(--ink-2); line-height:1.4;
}
.checklist li::before{
  content:"✓"; position:absolute; left:0; top:0;
  color:var(--ok); font-weight:700; font-family:var(--mono);
}
.checklist li.head{
  grid-column:1/-1; padding-left:0; font-family:var(--mono); font-size:10px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:2px;
}
.checklist li.head::before{content:"";}

/* ---------- callout ---------- */
.callout{
  border-left:3px solid var(--accent);
  background:var(--accent-tint);
  border-radius:0 6px 6px 0;
  padding:14px 18px;
  margin:20px 0;
}
.callout .ck{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:6px;}
.callout p{margin:0; font-size:13.5px; line-height:1.55; color:var(--ink-2);}
.callout p strong{color:var(--ink);}

/* ============================================================
   JIRA BOARD
   ============================================================ */
.epic{
  border:1px solid var(--accent);
  border-radius:8px;
  background:var(--accent);
  color:var(--paper);
  padding:16px 20px;
  margin-bottom:18px;
  display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center;
}
.epic .ekey{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  border:1px solid rgba(255,255,255,.4); border-radius:4px; padding:4px 9px;
}
.epic .etitle{font-family:var(--display); font-weight:600; font-size:17px; letter-spacing:-.01em;}
.epic .etitle small{display:block; font-family:var(--mono); font-weight:400; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-top:3px;}
.epic .etotals{display:flex; gap:18px; text-align:right;}
.epic .etotals .num{font-family:var(--display); font-weight:600; font-size:22px; line-height:1;}
.epic .etotals .lab{font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.65);}

.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
.jcard{
  border:1px solid var(--rule); border-radius:7px; background:var(--bg);
  padding:14px 16px; display:flex; flex-direction:column; gap:9px;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.jcard:hover{border-color:var(--accent); box-shadow:0 8px 20px -14px rgba(31,42,68,.5); transform:translateY(-1px);}
.jcard.wide{grid-column:1/-1;}
.jcard .jc-top{display:flex; align-items:center; gap:9px;}
.jcard .jkey{font-family:var(--mono); font-size:11px; color:var(--accent); font-weight:500;}
.jcard .jtype{
  font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase;
  border-radius:3px; padding:3px 7px; color:var(--ink-2); border:1px solid var(--rule); background:var(--paper);
}
.jcard .jtype.story{color:var(--ok); border-color:#b9d2c3; background:#eef5f0;}
.jcard .jtype.spike{color:var(--warn); border-color:#d9c39a; background:#f6efe2;}
.jcard .pts{
  margin-left:auto; font-family:var(--mono); font-size:11px; font-weight:600; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule); border-radius:999px;
  width:24px;height:24px; display:flex; align-items:center; justify-content:center;
}
.jcard .jsum{font-family:var(--display); font-weight:500; font-size:14.5px; letter-spacing:-.01em; color:var(--ink); line-height:1.3;}
.jcard .jmeta{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:auto;}
.jcard .dep{
  font-family:var(--mono); font-size:10px; color:var(--ink-3);
}
.trace{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.03em;
  border:1px solid var(--rule); border-radius:3px; padding:2px 6px; color:var(--ink-2); background:var(--paper);
}
.trace.gap{color:var(--crit); border-color:#ddc0bd;}
.labels{display:flex; flex-wrap:wrap; gap:5px;}
.lbl{
  font-family:var(--mono); font-size:9px; letter-spacing:.03em;
  background:var(--accent-tint); color:var(--accent); border-radius:3px; padding:2px 7px;
}
.jcard .ac{
  border-top:1px dashed var(--rule); padding-top:9px; margin-top:2px;
  font-size:12px; color:var(--ink-2); line-height:1.5;
}
.jcard .ac b{color:var(--ink);font-weight:600;}

/* ---------- colophon ---------- */
.colophon{
  padding:22px 56px;
  border-top:1px solid var(--rule);
  background:var(--bg);
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3);
  flex-wrap:wrap;
}
.colophon a{color:var(--accent); text-decoration:none; border-bottom:1px solid var(--rule);}
.colophon a:hover{border-bottom-color:var(--accent);}

/* ---------- responsive ---------- */
@media (max-width: 920px){
  .page{margin:0; border-radius:0; border-left:none; border-right:none;}
  .masthead,.scenario,.journey,.body,.colophon{padding-left:24px; padding-right:24px;}
  .masthead{grid-template-columns:1fr; gap:22px;}
  .meta{margin-left:0;}
  .scenario{grid-template-columns:1fr; gap:26px;}
  h1.title{font-size:40px;}
  .stepper{grid-template-columns:1fr; gap:14px;}
  .stepper::before{display:none;}
  .step{flex-direction:row; text-align:left; gap:14px;}
  section.block{grid-template-columns:1fr; gap:18px;}
  .planes,.mtypes,.req-grid,.cards,.flow .parallel,.checklist{grid-template-columns:1fr;}
  .epic{grid-template-columns:1fr; gap:12px; text-align:left;}
  .epic .etotals{justify-content:flex-start;}
}

/* ---------- scroll reveal ---------- */
.reveal-enabled :is(
  .masthead, .summary, .scenario > *,
  .journey .mono-label, .journey .step,
  section.block .section-label, section.block .entry,
  section.block .skill-group, section.block .ref,
  section.block .block-body > *
){
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),
             transform .6s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--reveal-delay, 0ms);
}
.reveal-enabled .is-visible{
  opacity:1 !important;
  transform:none !important;
}
@media print, (prefers-reduced-motion: reduce){
  .reveal-enabled :is(
    .masthead, .summary, .scenario > *,
    .journey .mono-label, .journey .step,
    section.block .section-label, section.block .entry,
    section.block .skill-group, section.block .ref,
    section.block .block-body > *
  ){
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* ---------- print ---------- */
@page{ size:A4 portrait; margin:12mm 10mm; }
@media print{
  html,body{background:#fff !important;}
  .page{box-shadow:none !important; border:none !important; margin:0 !important; max-width:none !important; border-radius:0 !important;}
  .masthead,.scenario,.journey,.body,.colophon{padding-left:0 !important; padding-right:0 !important; background:#fff !important;}
  section.block{break-inside:avoid;}
  .jcard,.frag,.flow .stage,.endpoint,.code{break-inside:avoid;}
  .code{box-shadow:none;}
  .jcard:hover{transform:none; box-shadow:none;}
  *,*::before,*::after{-webkit-print-color-adjust:exact !important; print-color-adjust:exact !important;}
}