/* Model layers explainer page (/model-layers).
   Theme-aware: dark by default, flips with html.psa-light (base.html tokens).
   The SVG diagram reads these tokens through style declarations. */

.mly{
  --ml-panel:var(--psa-bg-card); --ml-sunk:var(--psa-bg-panel); --ml-ink:var(--psa-text-primary);
  --ml-muted:var(--psa-text-secondary); --ml-line:var(--psa-border);
  --ml-brand:#8f96ff; --ml-brand-soft:#23275a; --ml-live:#3fcf9e; --ml-live-soft:#163a30;
  --ml-res:#b89cff; --ml-res-soft:#2b2250; --ml-r1:#161a2e; --ml-r2:#1c2038;
  --ml-mono:ui-monospace,"JetBrains Mono","DejaVu Sans Mono",Consolas,monospace;
  max-width:1160px; margin:0 auto; padding:24px 16px 56px; display:grid; gap:36px;
  color:var(--ml-ink); font-size:15px; line-height:1.55;
}
html.psa-light .mly{
  --ml-sunk:#eeeff7; --ml-brand:#4338ca; --ml-brand-soft:#e9ebfd; --ml-live:#0e8f6c; --ml-live-soft:#dcf3ea;
  --ml-res:#7a4fd0; --ml-res-soft:#efe8fb; --ml-r1:#f3f2fb; --ml-r2:#ebeaf8;
}
.mly *{box-sizing:border-box}
.mly h1,.mly h2,.mly h3{margin:0; text-wrap:balance; letter-spacing:-.01em; color:var(--ml-ink)}
.mly h1{font-size:clamp(28px,5vw,44px); font-weight:800; line-height:1.08}
.mly h2{font-size:23px; font-weight:700}
.mly h3{font-size:18px; font-weight:700}
.mly p{margin:0}
.mly .eyebrow{font-family:var(--ml-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ml-brand)}
.mly .lede{font-size:18px; max-width:66ch}
.mly .muted{color:var(--ml-muted)}
.mly header{display:grid; gap:14px}
.mly .xlink{font-size:14px; color:var(--ml-brand); text-decoration:none; justify-self:start}
.mly .xlink:hover{text-decoration:underline}
.mly .legend{display:flex; flex-wrap:wrap; gap:8px 16px; font-size:13px; color:var(--ml-muted); align-items:center}
.mly .dot{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:-1px}
.mly .dot.live{background:var(--ml-live)}
.mly .dot.res{background:var(--ml-res)}
.mly .seg{display:inline-flex; background:var(--ml-sunk); border-radius:9px; padding:3px; gap:2px}
.mly .seg button{font:inherit; font-size:13px; font-weight:500; color:var(--ml-muted); background:transparent; border:0; border-radius:7px; padding:6px 11px; cursor:pointer}
.mly .seg button[aria-pressed="true"]{background:var(--ml-panel); color:var(--ml-ink); box-shadow:0 1px 2px rgba(0,0,0,.18)}
.mly button:focus-visible,.mly .pill:focus-visible{outline:2px solid var(--ml-brand); outline-offset:2px}

.mly .bench{background:var(--ml-panel); border:1px solid var(--ml-line); border-radius:14px; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); overflow:hidden}
.mly .diagram{background:var(--ml-sunk); padding:12px; display:grid; align-content:center; gap:8px; min-width:0; border-right:1px solid var(--ml-line)}
.mly .diagram svg{display:block; width:100%; height:auto}
.mly .dtools{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; padding:4px 6px}
.mly .side{padding:20px 22px; display:grid; gap:18px; align-content:start; min-width:0}
.mly .lbl{font-family:var(--ml-mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--ml-muted)}
.mly .scen{display:grid; gap:8px}
.mly .scen-btns{display:grid; gap:6px}
.mly .scen-btns button{font:inherit; font-size:14px; font-weight:500; text-align:left; color:var(--ml-ink); background:var(--ml-panel); border:1px solid var(--ml-line); border-radius:9px; padding:9px 12px; cursor:pointer}
.mly .scen-btns button[aria-pressed="true"]{border-color:var(--ml-brand); background:var(--ml-brand-soft)}
.mly .steps{list-style:none; margin:0; padding:0; display:grid; gap:4px; counter-reset:s}
.mly .steps li{display:grid; grid-template-columns:22px minmax(0,1fr); gap:8px; padding:8px 10px; border-radius:8px; cursor:pointer; font-size:14px; color:var(--ml-muted); border:1px solid transparent}
.mly .steps li::before{counter-increment:s; content:counter(s); font-family:var(--ml-mono); font-size:12px; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--ml-sunk); color:var(--ml-muted)}
.mly .steps li.on{color:var(--ml-ink); border-color:var(--ml-line); background:var(--ml-panel)}
.mly .steps li.on::before{background:var(--ml-brand); color:var(--ml-panel)}
.mly .steps .rd{display:block; font-family:var(--ml-mono); font-size:12px; color:var(--ml-brand); margin-top:3px}
.mly .ctrl{display:flex; gap:6px; align-items:center}
.mly .ctrl .lbl{flex:1}
.mly .btn{font:inherit; font-size:13px; font-weight:600; border:1px solid var(--ml-line); background:var(--ml-panel); color:var(--ml-ink); border-radius:8px; padding:6px 12px; cursor:pointer}
.mly .btn.primary{background:var(--ml-brand); border-color:var(--ml-brand); color:var(--ml-panel)}
.mly .note{font-size:12px; color:var(--ml-muted)}

.mly .card{border:1px solid var(--ml-line); border-radius:12px; padding:16px; display:grid; gap:10px; background:var(--ml-panel)}
.mly .card .head{display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
.mly .badge{font-family:var(--ml-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:999px; white-space:nowrap}
.mly .badge.live{background:var(--ml-live-soft); color:var(--ml-live)}
.mly .badge.res{background:var(--ml-res-soft); color:var(--ml-res)}
.mly .kv{display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 12px; font-size:14px; margin:0}
.mly .kv dt{font-family:var(--ml-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ml-muted); padding-top:3px}
.mly .kv dd{margin:0}
.mly .num{font-family:var(--ml-mono); font-size:13px; background:var(--ml-sunk); border-radius:8px; padding:8px 10px}

.mly .sec{display:grid; gap:14px}
.mly .tablewrap{overflow-x:auto}
.mly .cmp{width:100%; border-collapse:collapse; font-size:14px; background:var(--ml-panel); border:1px solid var(--ml-line)}
.mly .cmp th,.mly .cmp td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--ml-line); vertical-align:top}
.mly .cmp th{font-family:var(--ml-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ml-muted); font-weight:500}
.mly .cmp td:first-child{font-weight:600}
.mly .cmp tr:last-child td{border-bottom:0}
.mly .plainw{background:var(--ml-panel); border:1px solid var(--ml-line); border-radius:12px; padding:20px 22px; display:grid; gap:10px}
.mly .plainw p{max-width:78ch}
.mly .foot{font-size:12px; color:var(--ml-muted); max-width:92ch}

.mly .ring{cursor:pointer; transition:opacity .3s}
.mly .ringname{font-family:var(--ml-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; fill:var(--ml-muted)}
.mly .pill{cursor:pointer; transition:opacity .3s}
.mly .pill rect{stroke-width:1.4}
.mly .pill text{font-size:11px; font-weight:600}
.mly .pill.live rect{fill:var(--ml-live-soft); stroke:var(--ml-live)}
.mly .pill.live text{fill:var(--ml-live)}
.mly .pill.res rect{fill:var(--ml-res-soft); stroke:var(--ml-res); stroke-dasharray:4 3}
.mly .pill.res text{fill:var(--ml-res)}
.mly .pill.sel rect{stroke-width:2.6}
.mly .dim{opacity:.18}
.mly .src{font-size:12px; font-weight:600; fill:var(--ml-ink)}
.mly .srcsub{font-family:var(--ml-mono); font-size:10px; fill:var(--ml-muted)}
.mly .flow{fill:var(--ml-muted)}
.mly .flow.hot{fill:var(--ml-brand)}
.mly .pulse{fill:none; stroke:var(--ml-brand)}
.mly .core-bar{fill:var(--ml-line)}

@media (max-width:900px){
  .mly .bench{grid-template-columns:1fr}
  .mly .diagram{border-right:0; border-bottom:1px solid var(--ml-line)}
}
@media (prefers-reduced-motion: reduce){ .mly .ring,.mly .pill{transition:none} }