/* ============================================================
   QEAGENTS — shared styling for linked case pages.
   Palette and type match the landing page exactly.
   ============================================================ */
:root{
  --ink:#070A0F; --ink-raised:#0C1119; --ink-inset:#05080C;
  --rule:rgba(255,255,255,.10); --rule-strong:rgba(255,255,255,.20);
  --signal:#2F6BFF; --verify:#22C08A; --legacy:#C2703A;
  --text:#EEF1F6; --text-mid:#9AA5B4; --text-dim:#6B7686;
  --display:'Archivo',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
body{
  background:var(--ink); color:var(--text);
  font-family:var(--body); font-size:16px; line-height:1.7;
  max-width:60rem; margin:0 auto; padding:0 1.5rem 6rem;
  -webkit-font-smoothing:antialiased;
}
.site-bar{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.1rem 0; margin-bottom:2.5rem; border-bottom:1px solid var(--rule);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
}
.site-bar a{color:var(--text-mid); text-decoration:none}
.site-bar a:hover{color:var(--text)}
.site-bar .brand{color:var(--text); font-family:var(--display); font-weight:800;
  font-size:.95rem; letter-spacing:-.02em; text-transform:none}
.site-bar .brand em{font-style:normal; color:var(--signal)}

h1,h2,h3{font-family:var(--display); color:var(--text); letter-spacing:-.02em; line-height:1.15}
h2{font-size:1.45rem; font-weight:700; margin:3rem 0 .9rem;
  padding-bottom:.6rem; border-bottom:1px solid var(--rule)}
h3{font-size:1.08rem; font-weight:700; margin:2rem 0 .6rem}
.title-block{padding:1rem 0 2rem; border-bottom:1px solid var(--rule); margin-bottom:2.4rem}
.title-block h1{font-size:2.6rem; font-weight:900; margin:0 0 .6rem}
.title-block .subtitle{font-size:1.05rem; color:var(--text-mid); margin:0}
.title-block .author{font-family:var(--mono); font-size:1.18rem; font-weight:500;
  letter-spacing:.02em; color:var(--signal); margin:1.1rem 0 0}

p{margin:0 0 1rem}
a{color:var(--signal)}
strong{color:var(--text); font-weight:600}
ul{padding-left:1.3rem; margin:0 0 1rem}
li{margin:.35rem 0; color:var(--text-mid)}
li strong{color:var(--text)}
li::marker{color:var(--text-dim)}
code{font-family:var(--mono); font-size:.86em; background:rgba(255,255,255,.06);
  color:var(--text); padding:.12em .38em; border-radius:3px}
.lead{font-size:1.08rem; color:var(--text-mid)}
.pull{
  margin:2rem 0; padding:.2rem 0 .2rem 1.4rem; border-left:2px solid var(--signal);
  font-family:var(--display); font-weight:600; letter-spacing:-.012em;
  font-size:1.28rem; line-height:1.4; color:var(--text);
}
.caption{font-family:var(--mono); font-size:.7rem; letter-spacing:.01em;
  color:var(--text-dim); margin:-.5rem 0 1.6rem; overflow-wrap:anywhere}

/* two-column framing */
.split{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); margin:2rem 0}
@media(min-width:720px){.split{grid-template-columns:1fr 1fr}}
.side{background:var(--ink-raised); padding:1.4rem}
.side h3{margin:0 0 .5rem; font-size:1rem}
.side .tag{font-family:var(--mono); font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; display:block; margin-bottom:.7rem}
.side.a .tag{color:var(--signal)}
.side.b .tag{color:var(--legacy)}
.side p{margin:0; font-size:.92rem; color:var(--text-mid)}

/* code comparison */
.cmp{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); margin:2rem 0}
@media(min-width:900px){.cmp{grid-template-columns:1fr 1fr}}
.cmp-col{background:var(--ink-raised); min-width:0}
.cmp-head{padding:.75rem 1rem; border-bottom:1px solid var(--rule);
  font-family:var(--mono); font-size:.63rem; letter-spacing:.18em; text-transform:uppercase}
.cmp-col.a .cmp-head{color:var(--signal)}
.cmp-col.b .cmp-head{color:var(--legacy)}
.cmp-col.n .cmp-head{color:var(--text-mid)}
.cmp-note{font-family:var(--mono); font-size:.72rem; color:var(--text-mid);
  padding:.7rem 1rem; border-top:1px solid var(--rule)}
.cmp pre{margin:0; border:0; border-radius:0}

pre{background:var(--ink-inset); border:1px solid var(--rule); border-radius:4px;
  padding:1rem 1.1rem; overflow-x:auto; margin:1.2rem 0;
  font-family:var(--mono); font-size:.76rem; line-height:1.8; color:var(--text-mid)}
pre .kw{color:#C792EA} pre .ty{color:#7FD1FF} pre .st{color:#22C08A}
pre .nu{color:#C2703A} pre .co{color:#6B7686; font-style:italic} pre .fn{color:#82AAFF}
pre .an{color:#FF9E64} pre .hi{background:rgba(194,112,58,.18); display:inline-block; width:100%}

/* generic artifact panel (ticket, change record, pipeline run) */
.panel{border:1px solid var(--rule); border-radius:4px; overflow:hidden;
  background:var(--ink-raised); margin:2rem 0}
.panel-bar{display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.8rem 1.1rem; border-bottom:1px solid var(--rule); flex-wrap:wrap}
.panel-id{font-family:var(--mono); font-size:.76rem; color:var(--signal)}
.panel-state{font-family:var(--mono); font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; padding:.2rem .55rem; border-radius:2px}
.st-ok{color:var(--verify); border:1px solid rgba(34,192,138,.35)}
.st-warn{color:var(--legacy); border:1px solid rgba(194,112,58,.4)}
.st-info{color:var(--text-dim); border:1px solid var(--rule-strong)}
.panel-body{padding:1.2rem 1.1rem}
.panel-body h4{font-family:var(--display); font-size:1rem; margin:0 0 .6rem; color:var(--text)}
.panel-body p{font-size:.94rem; color:var(--text-mid)}
.field-row{display:flex; gap:1rem; padding:.6rem 0; border-bottom:1px solid var(--rule);
  font-size:.9rem; flex-wrap:wrap}
.field-row:last-child{border-bottom:0}
.field-k{font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-dim); flex:0 0 9.5rem}
.field-v{color:var(--text-mid); flex:1 1 14rem; min-width:0}
.field-v.thin{color:var(--text-dim); font-style:italic}

/* acceptance criteria / gate list */
.gates{border-top:1px solid var(--rule); margin:1.6rem 0}
.gate{display:flex; flex-wrap:wrap; gap:.3rem 1rem; align-items:flex-start;
  padding:.85rem 0; border-bottom:1px solid var(--rule)}
.gate-mark{font-family:var(--mono); font-size:.7rem; flex:0 0 5.4rem;
  letter-spacing:.1em; text-transform:uppercase; padding-top:.15rem}
.g-hit{color:var(--verify)} .g-miss{color:var(--legacy)} .g-na{color:var(--text-dim)}
.gate-text{font-size:.93rem; color:var(--text-mid)}
.gate-text b{color:var(--text); font-weight:500}

/* metric row */
.metrics{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); margin:2rem 0}
@media(min-width:640px){.metrics{grid-template-columns:repeat(3,1fr)}}
.metric{background:var(--ink-raised); padding:1.3rem 1.2rem}
.metric-n{font-family:var(--display); font-weight:800; font-size:2rem;
  letter-spacing:-.03em; line-height:1; color:var(--text)}
.metric-n.ok{color:var(--verify)} .metric-n.warn{color:var(--legacy)}
.metric-l{font-family:var(--mono); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-dim); margin-top:.6rem}

/* findings list */
.res{border-top:1px solid var(--rule); margin-top:2rem}
.res-item{border-bottom:1px solid var(--rule); padding:1.5rem 0}
.res-head{display:flex; gap:1rem; align-items:baseline; flex-wrap:wrap; margin-bottom:.7rem}
.res-idx{font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; color:var(--text-dim)}
.res-field{font-family:var(--mono); font-size:.92rem; color:var(--text)}
.res-verdict{font-family:var(--mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; padding:.2rem .55rem; border-radius:2px; margin-left:auto}
.v-keep{color:var(--verify); border:1px solid rgba(34,192,138,.35)}
.v-flag{color:var(--legacy); border:1px solid rgba(194,112,58,.4)}
.res p{margin:0 0 .5rem; font-size:.94rem; color:var(--text-mid)}
.res .why{color:var(--text)}

table{border-collapse:collapse; width:100%; margin:1.4rem 0; font-size:.9rem;
  display:block; overflow-x:auto}
th,td{border:1px solid var(--rule); padding:.6rem .8rem; text-align:left; vertical-align:top}
th{background:var(--ink-raised); font-family:var(--display); font-weight:600;
  font-size:.8rem; color:var(--text)}
td{color:var(--text-mid)}
td strong{color:var(--text)}
.foot{border-top:1px solid var(--rule); margin-top:3.5rem; padding-top:1.6rem;
  font-family:var(--mono); font-size:.65rem; letter-spacing:.12em; color:var(--text-dim)}

@media(max-width:640px){
  body{font-size:15px; padding:0 1rem 4rem}
  .title-block h1{font-size:1.9rem}
  .title-block .author{font-size:1rem}
  .field-k{flex-basis:100%}
  .gate-mark{flex-basis:100%}
}