/* ===========================================================
   engine.css — component deep-dive page styling
   Used by compliance-engine.html and future component pages.
   Loads after brand.css.
   =========================================================== */

.cmp-page{font-family:var(--el-sans);color:var(--el-ink)}
.cmp-page h2,.cmp-page h3{font-family:var(--el-serif)}

/* ---------- hero ---------- */
.cmp-hero{background:linear-gradient(160deg,var(--el-navy-deep) 0%,var(--el-navy) 55%,var(--el-navy-mid) 100%);color:#fff;padding:64px 0 0;position:relative;overflow:hidden}
.cmp-hero::after{content:"";position:absolute;right:-140px;top:-90px;width:520px;height:520px;border:1px solid rgba(224,188,99,.16);border-radius:50%}
.cmp-hero .el-shell{position:relative;z-index:1}
.cmp-crumb{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#8FA6B8;margin-bottom:22px}
.cmp-crumb a{color:#8FA6B8;text-decoration:none}
.cmp-crumb a:hover{color:#fff}
.cmp-crumb span{color:var(--el-gold-light)}
.cmp-hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.75fr);gap:56px;align-items:start;padding-bottom:54px}
.cmp-kicker{display:inline-flex;align-items:center;gap:9px;padding:6px 12px;border:1px solid rgba(224,188,99,.4);color:var(--el-gold-light);font:800 .63rem/1 var(--el-sans);letter-spacing:.14em;text-transform:uppercase}
.cmp-kicker::before{content:"";width:6px;height:6px;background:var(--el-gold);border-radius:50%}
.cmp-hero h1{font:700 clamp(2.2rem,4.4vw,3.5rem)/1.08 var(--el-serif);margin:20px 0 18px;letter-spacing:-.01em}
.cmp-lede{font-size:1.08rem;line-height:1.65;color:#C6D6E3;max-width:62ch;margin:0}
.cmp-hero-facts{display:grid;gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12)}
.cmp-hero-facts div{background:rgba(6,24,38,.55);padding:15px 17px}
.cmp-hero-facts dt{font:800 .6rem/1 var(--el-sans);letter-spacing:.13em;text-transform:uppercase;color:#87A0B4}
.cmp-hero-facts dd{margin:7px 0 0;font:700 .92rem/1.4 var(--el-sans);color:#fff}
.cmp-hero-facts dd small{display:block;font-weight:400;font-size:.75rem;color:#9FB3C4;margin-top:3px}

/* ---------- on-this-page rail ---------- */
.cmp-toc{background:rgba(6,24,38,.6);border-top:1px solid rgba(255,255,255,.12)}
.cmp-toc .el-shell{display:flex;align-items:center;gap:8px;overflow-x:auto;padding:0}
.cmp-toc b{flex:none;padding:15px 18px 15px 0;font:800 .62rem/1 var(--el-sans);letter-spacing:.13em;text-transform:uppercase;color:#87A0B4}
.cmp-toc a{flex:none;padding:15px 13px;color:#B7C8D6;text-decoration:none;font:600 .78rem/1 var(--el-sans);border-bottom:3px solid transparent;white-space:nowrap}
.cmp-toc a:hover{color:#fff}
.cmp-toc a.is-active{color:#fff;border-bottom-color:var(--el-gold)}

/* ---------- section scaffolding ---------- */
.cmp-sec{padding:72px 0;border-bottom:1px solid var(--el-hair)}
.cmp-sec:nth-of-type(even){background:var(--el-paper-2)}
.cmp-num{display:flex;align-items:baseline;gap:14px;margin-bottom:10px}
.cmp-num i{font:800 .68rem/1 var(--el-sans);font-style:normal;letter-spacing:.14em;color:var(--el-teal)}
.cmp-num i::before{content:"";display:inline-block;width:26px;height:1px;background:var(--el-teal);vertical-align:3px;margin-right:11px}
.cmp-sec h2{font-size:clamp(1.6rem,2.9vw,2.3rem);line-height:1.15;margin:0 0 16px;max-width:24ch}
.cmp-sec>.el-shell>p{max-width:72ch;line-height:1.7;color:#3A4A59;margin:0 0 18px}
.cmp-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:start}
.cmp-split-wide{grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr)}

/* ---------- data tables ---------- */
.cmp-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--el-hair);font-size:.87rem}
.cmp-table caption{caption-side:top;text-align:left;padding:0 0 11px;font:800 .63rem/1 var(--el-sans);letter-spacing:.13em;text-transform:uppercase;color:var(--el-teal)}
.cmp-table th{background:var(--el-navy);color:#fff;text-align:left;padding:12px 14px;font:800 .66rem/1.3 var(--el-sans);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.cmp-table td{padding:13px 14px;border-top:1px solid var(--el-hair);vertical-align:top;line-height:1.55;color:#3A4A59}
.cmp-table tbody tr:nth-child(even) td{background:#FAFCFD}
.cmp-table code{font:600 .82rem/1.4 ui-monospace,Menlo,Consolas,monospace;color:var(--el-navy);background:#EDF2F6;padding:1px 6px;border-radius:2px;white-space:nowrap}
.cmp-table .t-type{color:var(--el-teal);font:600 .78rem ui-monospace,Menlo,Consolas,monospace}
.cmp-scroll{overflow-x:auto}

/* ---------- code ---------- */
.cmp-code{background:var(--el-navy-deep);border:1px solid #17384F;border-top:3px solid var(--el-teal);overflow:hidden}
.cmp-code header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 16px;background:rgba(255,255,255,.04);border-bottom:1px solid #17384F}
.cmp-code header b{font:800 .64rem/1 var(--el-sans);letter-spacing:.11em;text-transform:uppercase;color:#9FB3C4}
.cmp-code header span{font:600 .68rem/1 ui-monospace,monospace;color:#5E7A90}
.cmp-code pre{margin:0;padding:18px 16px;overflow-x:auto;font:500 .8rem/1.75 ui-monospace,Menlo,Consolas,monospace;color:#CFE0EC;tab-size:2}
.cmp-code .k{color:#7FB2E5}.cmp-code .s{color:#E0BC63}.cmp-code .c{color:#5E7A90;font-style:italic}
.cmp-code .n{color:#9FE0C4}.cmp-code .f{color:#E6A9A9}

/* ---------- callouts ---------- */
.cmp-note{border-left:3px solid var(--el-teal);background:#fff;padding:18px 22px;margin:22px 0;font-size:.89rem;line-height:1.65;color:#3A4A59}
.cmp-note b{color:var(--el-navy);display:block;margin-bottom:5px;font-size:.82rem;letter-spacing:.02em}
.cmp-note.warn{border-left-color:var(--el-gold);background:#FFFCF4}
.cmp-note.stop{border-left-color:#B4453C;background:#FFF7F6}
.cmp-note.stop b{color:#8E332C}

/* ---------- rule cards ---------- */
.cmp-rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:20px;margin-top:26px}
.cmp-rule{background:#fff;border:1px solid var(--el-hair);border-top:4px solid var(--el-navy);padding:24px}
.cmp-rule.flag{border-top-color:var(--el-gold)}
.cmp-rule-id{font:700 .74rem/1 ui-monospace,monospace;letter-spacing:.04em;color:var(--el-teal);margin-bottom:9px}
.cmp-rule h3{margin:0 0 10px;font-size:1.12rem;line-height:1.3}
.cmp-rule p{margin:0 0 14px;font-size:.87rem;line-height:1.6;color:#3A4A59}
.cmp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.cmp-chips code{font:600 .76rem/1 ui-monospace,monospace;background:#EDF2F6;border:1px solid var(--el-hair);padding:5px 9px;color:var(--el-navy)}
.cmp-action{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;background:var(--el-navy);color:#fff;font:800 .67rem/1 ui-monospace,monospace;letter-spacing:.04em}
.cmp-rule.flag .cmp-action{background:#8A6A1C}

/* ---------- math / worked example ---------- */
.cmp-math{background:#fff;border:1px solid var(--el-hair);padding:0;overflow:hidden}
.cmp-math-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--el-hair)}
.cmp-math-row:last-child{border-bottom:0}
.cmp-math-row i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--el-paper-2);border:1px solid var(--el-hair);font:800 .7rem/1 var(--el-sans);font-style:normal;color:var(--el-navy)}
.cmp-math-row p{margin:0;font-size:.87rem;line-height:1.5;color:#3A4A59}
.cmp-math-row p b{color:var(--el-ink)}
.cmp-math-row output{font:700 1.05rem/1 ui-monospace,monospace;color:var(--el-navy);white-space:nowrap}
.cmp-math-row.total{background:var(--el-navy);}
.cmp-math-row.total i{background:var(--el-gold);border-color:var(--el-gold)}
.cmp-math-row.total p,.cmp-math-row.total p b{color:#C6D6E3}
.cmp-math-row.total output{color:var(--el-gold-light);font-size:1.2rem}

/* ---------- interactive evaluator ---------- */
.cmp-lab{background:#fff;border:1px solid var(--el-hair);border-top:4px solid var(--el-teal)}
.cmp-lab-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--el-hair);background:var(--el-paper-2)}
.cmp-lab-head b{font:800 .68rem/1 var(--el-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--el-navy);margin-right:auto}
.cmp-lab-head button{border:1px solid #AEBCC5;background:#fff;color:var(--el-ink);padding:8px 13px;font:700 .75rem var(--el-sans);cursor:pointer}
.cmp-lab-head button:hover{border-color:var(--el-teal);color:var(--el-teal)}
.cmp-lab-body{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.cmp-lab-in{padding:24px;border-right:1px solid var(--el-hair)}
.cmp-lab-out{padding:24px;background:#FAFCFD}
.cmp-field{margin-bottom:17px}
.cmp-field label{display:block;font:800 .63rem/1 var(--el-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--el-slate);margin-bottom:7px}
.cmp-field input,.cmp-field textarea,.cmp-field select{width:100%;padding:11px 12px;border:1px solid #AEBCC5;background:#fff;font:400 .9rem/1.55 var(--el-sans);color:var(--el-ink)}
.cmp-field textarea{resize:vertical;min-height:92px}
.cmp-field input:focus,.cmp-field textarea:focus{outline:2px solid var(--el-teal);outline-offset:0;border-color:var(--el-teal)}
.cmp-field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cmp-presets{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}
.cmp-presets button{border:1px solid var(--el-hair);background:var(--el-paper-2);padding:7px 11px;font:700 .73rem var(--el-sans);color:var(--el-navy);cursor:pointer}
.cmp-presets button:hover,.cmp-presets button[aria-pressed=true]{background:var(--el-navy);border-color:var(--el-navy);color:#fff}

.cmp-out-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.cmp-verdict{padding:6px 11px;font:800 .66rem/1 var(--el-sans);letter-spacing:.08em;text-transform:uppercase}
.cmp-verdict[data-v=clean]{background:#E3F4EC;color:#1C6A4A;border:1px solid #A8D9C2}
.cmp-verdict[data-v=adjusted]{background:#FFF4DC;color:#8A6A1C;border:1px solid #E5CE94}
.cmp-verdict[data-v=consensus]{background:#E7F0F8;color:#1B4E7A;border:1px solid #A9C8E2}
.cmp-out-head small{color:var(--el-slate);font-size:.76rem}

.cmp-meters{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--el-hair);border:1px solid var(--el-hair);margin-bottom:18px}
.cmp-meters div{background:#fff;padding:13px 15px}
.cmp-meters span{display:block;font:800 .58rem/1 var(--el-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--el-slate)}
.cmp-meters b{display:block;margin-top:6px;font:700 1.15rem/1 ui-monospace,monospace;color:var(--el-navy)}
.cmp-meters div.hl b{color:var(--el-teal)}

.cmp-findings{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:9px}
.cmp-findings li{border:1px solid var(--el-hair);border-left:3px solid var(--el-navy);background:#fff;padding:12px 14px}
.cmp-findings li.flag{border-left-color:var(--el-gold)}
.cmp-findings code{font:700 .72rem/1 ui-monospace,monospace;color:var(--el-teal)}
.cmp-findings p{margin:6px 0 0;font-size:.82rem;line-height:1.5;color:#3A4A59}
.cmp-findings em{display:inline-block;margin-top:7px;font-style:normal;font:800 .63rem/1 ui-monospace,monospace;letter-spacing:.05em;color:#fff;background:var(--el-navy);padding:4px 7px}
.cmp-findings li.flag em{background:#8A6A1C}
.cmp-empty{border:1px dashed var(--el-hair);padding:22px;text-align:center;color:var(--el-slate);font-size:.85rem}

.cmp-narr{background:#fff;border:1px solid var(--el-hair);padding:14px;font-size:.85rem;line-height:1.6}
.cmp-narr span{font:800 .58rem/1 var(--el-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--el-slate);display:block;margin-bottom:8px}
.cmp-narr mark{background:#FFE9A8;color:#6B5310;padding:1px 3px}
.cmp-narr s{color:#B4453C;opacity:.75}

.cmp-json{margin-top:18px}
.cmp-json summary{cursor:pointer;font:700 .77rem var(--el-sans);color:var(--el-teal);padding:9px 0}
.cmp-json pre{margin:0;background:var(--el-navy-deep);color:#CFE0EC;padding:16px;overflow-x:auto;font:500 .76rem/1.7 ui-monospace,monospace;max-height:340px}

/* ---------- boundary grid ---------- */
.cmp-bounds{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px;margin-top:26px}
.cmp-bound{background:#fff;border:1px solid var(--el-hair);border-left:4px solid #B4453C;padding:22px}
.cmp-bound h3{margin:0 0 9px;font-size:1rem;line-height:1.35}
.cmp-bound p{margin:0 0 11px;font-size:.85rem;line-height:1.6;color:#3A4A59}
.cmp-bound pre{margin:0;background:var(--el-paper-2);border:1px solid var(--el-hair);padding:11px;font:500 .74rem/1.6 ui-monospace,monospace;color:var(--el-navy);overflow-x:auto;white-space:pre-wrap}
.cmp-bound .cmp-sev{display:inline-block;margin-bottom:10px;padding:4px 8px;font:800 .58rem/1 var(--el-sans);letter-spacing:.1em;text-transform:uppercase;background:#FBEAE8;color:#8E332C;border:1px solid #E9C3BE}

/* ---------- scope list ---------- */
.cmp-scope{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--el-hair);border:1px solid var(--el-hair);margin-top:24px}
.cmp-scope div{background:#fff;padding:20px}
.cmp-scope h4{margin:0 0 8px;font:800 .66rem/1 var(--el-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--el-teal)}
.cmp-scope ul{margin:0;padding-left:17px}
.cmp-scope li{font-size:.85rem;line-height:1.7;color:#3A4A59}
.cmp-scope.no h4{color:#8E332C}

/* ---------- next / downloads ---------- */
.cmp-next{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;margin-top:8px}
.cmp-next a{display:block;background:#fff;border:1px solid var(--el-hair);padding:22px;text-decoration:none;transition:border-color .16s}
.cmp-next a:hover{border-color:var(--el-teal)}
.cmp-next span{font:800 .6rem/1 var(--el-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--el-teal)}
.cmp-next b{display:block;margin:9px 0 6px;font:700 1.02rem/1.35 var(--el-serif);color:var(--el-ink)}
.cmp-next p{margin:0;font-size:.83rem;line-height:1.55;color:#3A4A59}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .cmp-hero-grid,.cmp-split,.cmp-split-wide{grid-template-columns:1fr;gap:30px}
  .cmp-lab-body{grid-template-columns:1fr}
  .cmp-lab-in{border-right:0;border-bottom:1px solid var(--el-hair)}
  .cmp-sec{padding:52px 0}
}
@media(max-width:560px){
  .cmp-field-row,.cmp-meters{grid-template-columns:1fr}
  .cmp-math-row{grid-template-columns:26px 1fr;row-gap:8px}
  .cmp-math-row output{grid-column:2}
}
@media print{
  .cmp-toc,.cmp-lab-head,.cmp-presets{display:none}
  .cmp-hero{background:#fff;color:#000}
  .cmp-hero h1,.cmp-lede{color:#000}
  .cmp-sec{page-break-inside:avoid}
}