/* ==========================================================================
   OSRS Market Tools — shared theme (assets/theme.css)
   Single source for the design tokens formerly duplicated in index.html,
   flip.html and dashboard.html, plus the shared component library and the
   app-shell (sidebar / sticky topbar) chrome rendered by assets/shell.js.
   Spec: docs/REDESIGN_SPEC.md §6.1/§6.2/§6.10/§6.11 and
   docs/design/reference-dashboard.md (palette kept EXACTLY; fonts stay
   Cinzel/Inter/JetBrains Mono via each page's existing Google Fonts link).
   Pages must stay usable when this file fails to load (semantic HTML first).
   ========================================================================== */

/* ---------- 1. Design tokens (existing values preserved exactly) ---------- */
:root{
  --abyss:#090d0a; --panel:#131a14; --panel2:#0f1510; --rail:#0c120d; --raise:#1b241b;
  --head:#161e16; --input:#0c110c;
  --frame:#3c4a33; --frameS:#2a3527; --frameB:#6f8254; --fgold:#b8923a;
  --gold:#d9b25e; --goldB:#f0cd76; --goldD:#a2864a;
  --ink:#d7ddc8; --inkS:#aab39a; --inkF:#7d8a71;
  --good:#74c66f; --goodB:#9fe39a; --warn:#e0a82e; --warnB:#f2c659;
  --bad:#e0654a; --badB:#f08a72; --info:#58b6c9; --infoB:#7fd6e6; --purple:#b98ce0;
  --gp-muted:#6f7a64; --gp-white:#d7ddc8; --gp-yellow:#e0c84e; --gp-green:#74c66f; --gp-purple:#b98ce0; --gp-leg:#f0cd76;
  --dsp:'Cinzel',Georgia,serif; --body:'Inter','Segoe UI',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --r-sm:4px; --r-md:7px; --r-lg:11px;
  /* shell additions (extend, don't replace) */
  --side-w:214px; --side-rail:58px;
}

/* ---------- 2. Base ---------- */
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--abyss);color:var(--ink);font:13px/1.5 var(--body);min-height:100vh}
a{color:var(--infoB);text-decoration:none}
a:hover{text-decoration:underline}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wrap{max-width:1500px;margin:0 auto;padding:18px 16px 70px}
body.density-compact{font-size:12px}
body.density-compact table.t td{padding:5px 8px}

/* ---------- 3. Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--r-sm);border:1px solid var(--frame);background:var(--raise);color:var(--ink);font:500 12px var(--body);cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--frameB);color:#fff;text-decoration:none}
.btn.gold{border-color:var(--fgold);color:var(--goldB);background:rgba(184,146,58,.08)}
.btn.danger{border-color:#7a4536;color:var(--badB)}
.btn.on{background:var(--gold);border-color:var(--gold);color:#161009;font-weight:600}
.btn:disabled{opacity:.45;cursor:default}
.btn.sm{padding:5px 9px;font-size:11px}

/* ---------- 4. Inputs / selects / segmented controls / control rows ---------- */
.search{flex:1 1 240px;min-width:180px;background:var(--input);color:var(--ink);border:1px solid var(--frameS);border-radius:var(--r-sm);padding:8px 11px;font:400 12.5px var(--body)}
.search:focus{outline:none;border-color:var(--fgold)}
.input,.sel,select.sel,input.numf{background:var(--input);color:var(--ink);border:1px solid var(--frameS);border-radius:var(--r-sm);padding:7px 9px;font:400 12px var(--body)}
.input:hover,.sel:hover,select.sel:hover,input.numf:hover{border-color:var(--frameB)}
.input:focus,.sel:focus,select.sel:focus,input.numf:focus{outline:none;border-color:var(--fgold)}
input.numf{width:130px}
.seg{display:inline-flex;border:1px solid var(--frameS);border-radius:var(--r-sm);overflow:hidden}
.seg button{background:transparent;color:var(--inkF);border:0;padding:6px 13px;cursor:pointer;font:500 12px var(--body)}
.seg button.on{background:var(--gold);color:#161009;font-weight:600}
.seg button:not(.on):hover{background:var(--raise);color:var(--ink)}
.grp{display:flex;align-items:center;gap:7px}
.grp>label{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--inkF)}
.lbl{color:var(--inkF);font-size:9px;text-transform:uppercase;letter-spacing:.13em;margin-right:2px}
.controls{background:var(--panel2);border:1px solid var(--frameS);border-radius:var(--r-md);padding:11px 13px;margin-bottom:12px;display:grid;gap:11px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.flt{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.count{color:var(--inkS);font-size:11.5px;margin-left:auto;font-family:var(--mono)}

/* ---------- 5. Chips / pills / badges ---------- */
/* checkbox-in-pill filter chip (Money Making) */
label.chk{display:inline-flex;align-items:center;gap:6px;padding:4px 11px 4px 7px;border:1px solid var(--frameS);border-radius:20px;background:var(--panel2);color:var(--inkS);font-size:11.5px;line-height:1.2;white-space:nowrap;cursor:pointer;user-select:none;transition:background-color .12s ease,border-color .12s ease,color .12s ease}
label.chk:hover{border-color:var(--frameB);color:var(--ink)}
label.chk:hover input{border-color:var(--frameB)}
label.chk input{appearance:none;-webkit-appearance:none;margin:0;flex-shrink:0;width:14px;height:14px;border:1px solid var(--frame);border-radius:4px;background-color:var(--input);background-repeat:no-repeat;background-position:center;background-size:10px 10px;cursor:pointer;transition:background-color .12s ease,border-color .12s ease}
label.chk input:checked{border-color:var(--fgold);background-color:var(--gold);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.8 5.4 4.1 7.6 8.2 2.8' fill='none' stroke='%23161009' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
label.chk input:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
label.chk:has(input:checked){border-color:var(--fgold);background:rgba(184,146,58,.10);color:var(--goldB)}
label.chk:has(input:checked):hover{border-color:var(--gold)}
@supports selector(:has(*)){
  label.chk input:focus-visible{outline:none}
  label.chk:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
}
/* dot-toggle filter chip (GE Flipping) */
.chip{display:inline-flex;align-items:center;gap:7px;padding:4px 12px;border-radius:20px;border:1px solid var(--frameS);background:var(--panel2);color:var(--inkS);font:400 11.5px/1.2 var(--body);cursor:pointer;user-select:none;transition:border-color .12s,color .12s,background .12s}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--inkF);flex-shrink:0;transition:background .12s,box-shadow .12s}
.chip:hover{border-color:var(--frameB);color:var(--ink)}
.chip.on{border-color:var(--fgold);color:var(--goldB);background:rgba(184,146,58,.10)}
.chip.on::before{background:var(--gold);box-shadow:0 0 6px rgba(217,178,94,.7)}
.chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* status pills */
.pill{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;line-height:1;padding:3px 7px;border-radius:20px;background:var(--panel2);border:1px solid var(--frameS);color:var(--inkS);white-space:nowrap}
.pill.good{color:var(--goodB);border-color:#3d6e3a;background:rgba(116,198,111,.08)}
.pill.gold{color:var(--goldB);border-color:var(--fgold);background:rgba(184,146,58,.08)}
.pill.bad{color:var(--badB);border-color:#7a3c30;background:rgba(224,101,74,.08)}
.pill.info{color:var(--infoB);border-color:#2f5c63;background:rgba(88,182,201,.08)}
.pill.warn{color:var(--warnB);border-color:#806026;background:rgba(224,168,46,.08)}
.pill.pur{color:var(--purple);border-color:#4b3a5a;background:rgba(185,140,224,.08)}
.warnpill{display:inline-flex;align-items:center;gap:5px;color:var(--warnB);font-size:11px}
/* membership badge */
.mbadge{display:inline-block;margin-left:6px;font-size:8.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:1px 6px;border-radius:5px;vertical-align:1.5px}
.mbadge.mem{color:var(--goldB);border:1px solid var(--fgold);background:rgba(184,146,58,.1)}
.mbadge.f2p{color:var(--goodB);border:1px solid #3d6e3a;background:rgba(116,198,111,.1)}
/* skill chips */
.skc{display:flex;gap:4px;flex-wrap:wrap}
.skchip{display:inline-flex;align-items:center;gap:3px;font-size:10px;padding:2px 6px;border-radius:5px;border:1px solid var(--frameS);background:var(--panel2);color:var(--inkS);white-space:nowrap}
.skchip a{color:var(--inkS)} .skchip a:hover{color:var(--goldB)}
.skchip .lv{color:var(--goldB);font-family:var(--mono)}
/* "manual" chip (§6.8) — marks values that came from the user's planning
   profile, never from game data. Pair with .manual-val on the number. */
.manual-chip{display:inline-flex;align-items:center;font-size:8px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:1px 5px;border-radius:5px;border:1px dashed var(--fgold);color:var(--goldB);background:rgba(184,146,58,.07);cursor:help;vertical-align:1px}
.manual-val{border-bottom:1px dotted var(--goldD);cursor:help}
.dashnote{color:var(--inkF);font-size:10.5px}
/* Research / ML overlay (feasibility tiers 1+2). Purple keeps the ML surfaces
   visually distinct from gold "manual" and green public-data values, so a reader
   never mistakes a labelled research estimate for a live-market number. Every ML
   surface pairs a .research-badge (or its tier-2 variant) with the .research-note
   disclaimer. NO buy/sell wording ever rides on these classes. */
.research-badge{display:inline-flex;align-items:center;gap:4px;font-size:8.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;padding:1px 6px;border-radius:5px;border:1px solid #4b3a5a;color:var(--purple);background:rgba(185,140,224,.09);white-space:nowrap;cursor:help;vertical-align:1px}
.research-badge.t2{border-style:dashed;border-color:#6a4a7d;color:#caa6e8}
.research-badge.abstain{border-color:#5a4a2a;color:var(--warnB);background:rgba(224,168,46,.08)}
.research-note{display:block;font-size:9.5px;line-height:1.45;color:var(--inkF);border-top:1px dashed rgba(185,140,224,.22);margin-top:8px;padding-top:6px}
.research-note::before{content:"⚗ ";color:var(--purple)}

/* ---------- 6. Status dot / status cluster ---------- */
.dot{width:8px;height:8px;border-radius:50%;background:var(--inkF);flex-shrink:0}
.dot.live{background:var(--good);box-shadow:0 0 8px 0 rgba(116,198,111,.6);animation:pz 1.8s infinite}
.dot.cache{background:var(--warn)} .dot.err{background:var(--bad)}
@keyframes pz{0%,100%{opacity:1}50%{opacity:.4}}
.status{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--inkS)}

/* ---------- 7. Stat cards (icon tile + label + value + support line) ---------- */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px;margin-bottom:13px}
.metric{display:flex;align-items:center;gap:11px;padding:11px 13px;background:var(--panel);border:1px solid var(--frame);border-left:3px solid var(--fgold);border-radius:var(--r-md)}
.metric.g{border-left-color:var(--good)} .metric.c{border-left-color:var(--info)}
.metric.y{border-left-color:var(--warn)} .metric.p{border-left-color:var(--purple)}
.metric .mi{width:30px;height:30px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;color:var(--gold);background:rgba(184,146,58,.12);border:1px solid rgba(184,146,58,.25)}
.metric.g .mi{color:var(--good);background:rgba(116,198,111,.10);border-color:rgba(116,198,111,.25)}
.metric.c .mi{color:var(--info);background:rgba(88,182,201,.10);border-color:rgba(88,182,201,.25)}
.metric.y .mi{color:var(--warn);background:rgba(224,168,46,.10);border-color:rgba(224,168,46,.25)}
.metric.p .mi{color:var(--purple);background:rgba(185,140,224,.10);border-color:rgba(185,140,224,.25)}
.metric .ml{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--inkF)}
.metric .mv{font:600 15px var(--dsp);color:var(--ink);line-height:1.25;margin-top:2px}
.metric.g .mv{color:var(--goodB)}
.metric>div:last-child{min-width:0;flex:1}
.metric .msub{font-size:10px;color:var(--inkF);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.metric .mv .dot{display:inline-block;margin-right:6px;vertical-align:1px}

/* ---------- 8. Panels / scrollable table wrapper / tables ---------- */
.panel{position:relative;background:var(--panel);border:1px solid var(--frame);border-radius:var(--r-md)}
.cbk{position:absolute;width:11px;height:11px;pointer-events:none;border-color:var(--fgold);opacity:.55;z-index:3}
.cbk.tl{top:4px;left:4px;border-top:1px solid;border-left:1px solid;border-top-left-radius:3px}
.cbk.tr{top:4px;right:4px;border-top:1px solid;border-right:1px solid;border-top-right-radius:3px}
.cbk.bl{bottom:4px;left:4px;border-bottom:1px solid;border-left:1px solid;border-bottom-left-radius:3px}
.cbk.br{bottom:4px;right:4px;border-bottom:1px solid;border-right:1px solid;border-bottom-right-radius:3px}
/* wide content scrolls inside its wrapper — the page never scrolls sideways */
.tbl-scroll{overflow-x:auto;border-radius:var(--r-md)}
table.t{width:100%;border-collapse:collapse}
table.t thead th{position:sticky;top:0;z-index:2;background:var(--head);text-align:left;padding:9px 10px;font:600 9.5px var(--dsp);letter-spacing:.09em;text-transform:uppercase;color:var(--goldD);border-bottom:1px solid var(--frameS);white-space:nowrap;cursor:default}
table.t thead th.n{text-align:right}
table.t thead th.s{cursor:pointer;user-select:none}
table.t thead th.s:hover{color:var(--gold)}
table.t thead th.act{color:var(--goldB)}
th .arw{font-size:9px;color:var(--gold);margin-left:2px}
table.t td{padding:8px 10px;border-bottom:1px solid rgba(111,130,84,.09);vertical-align:top}
table.t tr.m:hover td{background:rgba(111,130,84,.05)}
table.t tr.m{cursor:pointer}
td.n{text-align:right;font-family:var(--mono);white-space:nowrap}
.star{color:var(--inkF);font-size:15px;cursor:pointer;line-height:1}
.star.on{color:var(--goldB)}
/* numeric color hierarchy (OSRS gp tiers) */
.gp{font-weight:600;font-size:12.5px}
.gp.muted{color:var(--gp-muted)} .gp.white{color:var(--gp-white)} .gp.yellow{color:var(--gp-yellow)}
.gp.green{color:var(--gp-green)} .gp.purple{color:var(--gp-purple)} .gp.leg{color:var(--gp-leg)} .gp.neg{color:var(--bad)}
.cap{color:var(--inkS);font-size:12px} .cap.hi{color:var(--badB)}
.roi{color:var(--ink);font-size:12px} .roi.good{color:var(--goodB)} .roi.bad{color:var(--badB)}
/* stale rows: thin amber left border (§6.3) */
table.t tr.stale-row>td:first-child{box-shadow:inset 2px 0 0 var(--warn)}

/* ---------- 9. KPI cards / strip ---------- */
.anrow{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px}
.an{flex:1;min-width:92px;padding:8px 10px;background:var(--panel);border:1px solid var(--frameS);border-top:2px solid var(--frame);border-radius:var(--r-sm)}
.an.g{border-top-color:var(--good)} .an.b{border-top-color:var(--bad)} .an.c{border-top-color:var(--info)} .an.y{border-top-color:var(--warn)}
.an .k{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--inkF)}
.an .v{font:600 15px var(--dsp);color:var(--ink);margin-top:3px}
.an.g .v{color:var(--goodB)} .an.b .v{color:var(--badB)} .an.c .v{color:var(--infoB)} .an.y .v{color:var(--warnB)}
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}

/* ---------- 10. Tabs (green active underline) ---------- */
.tabbar{display:flex;gap:2px;border-bottom:1px solid var(--frameS);overflow-x:auto}
.tabbar .tab{padding:8px 13px;background:none;border:0;border-bottom:2px solid transparent;color:var(--inkS);font:500 12px var(--body);cursor:pointer;white-space:nowrap}
.tabbar .tab:hover{color:var(--ink)}
.tabbar .tab.on{color:var(--goodB);border-bottom-color:var(--good)}
.tabbar .tab .tct{margin-left:4px;font-size:9px;color:var(--inkF);font-family:var(--mono)}

/* ---------- 11. Warning banners (red / amber) ---------- */
.warnbar{display:flex;align-items:center;gap:8px;background:rgba(224,101,74,.09);border:1px solid #7a3c30;color:var(--badB);padding:7px 11px;border-radius:var(--r-sm);font-size:11.5px;margin-bottom:11px}
.warnbar.amber{background:rgba(224,168,46,.09);border-color:#806026;color:var(--warnB)}
.banner{background:rgba(224,168,46,.09);border:1px solid #806026;color:var(--warnB);padding:8px 12px;border-radius:var(--r-sm);font-size:12px;margin-bottom:11px;display:none}
.banner.show{display:block}
.banner.red{background:rgba(224,101,74,.09);border-color:#7a3c30;color:var(--badB)}

/* ---------- 12. Loading / empty states + skeleton shimmer ---------- */
.state{padding:56px 20px;text-align:center;color:var(--inkS)}
.spin{width:24px;height:24px;border:3px solid var(--frameS);border-top-color:var(--gold);border-radius:50%;animation:sp .8s linear infinite;margin:0 auto 13px}
@keyframes sp{to{transform:rotate(360deg)}}
.skel{position:relative;overflow:hidden;background:var(--raise);border-radius:var(--r-sm);min-height:12px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(215,221,200,.07),transparent);animation:skl 1.4s infinite}
@keyframes skl{to{transform:translateX(100%)}}
.skel-rows{display:grid;gap:10px;padding:16px 14px}
.skel-rows .skel{height:14px}
.skel-rows .skel:nth-child(2n){opacity:.75}

/* ---------- 13. Disclosure panels (legend / about) ---------- */
details.about,details.legend{background:var(--panel);border:1px solid var(--frameS);border-radius:var(--r-md);margin-bottom:12px}
details summary.sm-sum{cursor:pointer;padding:10px 13px;color:var(--gold);font:600 10px var(--dsp);letter-spacing:.1em;text-transform:uppercase;list-style:none}
details summary.sm-sum::-webkit-details-marker{display:none}
details summary.sm-sum::before{content:"▸ ";color:var(--fgold)}
details[open] summary.sm-sum::before{content:"▾ "}
.legend-body,.about-body{padding:0 14px 14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.legend-body .i,.about-body .i{font-size:11.5px;color:var(--inkS);line-height:1.55}
.legend-body .i b,.about-body .i b{color:var(--ink);font-weight:500}

/* ---------- 14. Detail-row shell (shared) & footer ---------- */
tr.det td{background:var(--panel2);padding:0}
.det-in{padding:13px 15px;border-left:3px solid var(--fgold)}
.dh{font:600 10px var(--dsp);letter-spacing:.09em;text-transform:uppercase;color:var(--gold);margin-bottom:7px}
footer{margin-top:22px;color:var(--inkF);font-size:11px;line-height:1.65}
footer a{color:var(--inkS)}

/* ---------- 14b. Method detail — analyst-report card (§6.4) ---------- */
/* Header: left identity block + right KPI strip */
.mdet-head{display:grid;grid-template-columns:1fr auto;gap:14px 18px;align-items:start;margin-bottom:12px}
.mdet-id{display:flex;gap:12px;align-items:flex-start;min-width:0}
.mdet-actcol{display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:2px}
.mdet-actcol .star{font-size:18px}
.mdet-actcol .cmp{width:15px;height:15px}
.mdet-icon{width:46px;height:46px;flex-shrink:0;border:1px solid var(--frame);border-radius:var(--r-md);background:var(--panel2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.mdet-icon img{width:34px;height:34px;object-fit:contain;image-rendering:pixelated}
.mdet-icon .ph{color:var(--gold);font:600 20px var(--dsp)}
.mdet-titlewrap{min-width:0}
.mdet-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mdet-title h3{font:600 18px/1.15 var(--dsp);color:#fff;margin:0}
.mdet-meta{color:var(--inkS);font-size:11.5px;margin-top:5px}
.mdet-meta b{color:var(--ink);font-weight:500}
.mdet-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.mdet-desc{color:var(--inkF);font-size:11.5px;margin-top:7px;max-width:640px}
.mdet-desc a{color:var(--inkS)}
/* KPI strip (right of header) */
.kpi-strip{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.ks{min-width:98px;padding:8px 11px;background:var(--panel);border:1px solid var(--frameS);border-top:2px solid var(--frame);border-radius:var(--r-sm);text-align:right}
.ks .k{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--inkF)}
.ks .v{font:600 17px var(--dsp);color:var(--ink);margin-top:3px}
.ks .sub{font-size:9px;color:var(--inkF);font-family:var(--mono)}
.ks.g{border-top-color:var(--good)} .ks.g .v{color:var(--goodB)}
.ks.b{border-top-color:var(--bad)} .ks.b .v{color:var(--badB)}
.ks.c{border-top-color:var(--info)} .ks.c .v{color:var(--infoB)}
.ks.y{border-top-color:var(--warn)} .ks.y .v{color:var(--warnB)}
/* warning banner "+N more" expander */
.warn-more{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px dashed var(--frameS);color:var(--inkS);padding:6px 11px;border-radius:var(--r-sm);font-size:11px;margin-bottom:11px;cursor:pointer;width:fit-content}
.warn-more:hover{border-color:var(--frameB);color:var(--ink)}
/* tab panels */
.tabpanes{padding-top:13px}
.tabpane{display:none} .tabpane.on{display:block}
/* overview io panels */
.ovgrid{display:grid;grid-template-columns:1.15fr 1.15fr .9fr;gap:16px}
.ovpanel{background:var(--panel);border:1px solid var(--frameS);border-radius:var(--r-md);padding:11px 12px;min-width:0}
.ovpanel .dh{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ovpanel .dh .tot{font-family:var(--mono);font-size:11px;letter-spacing:0;text-transform:none}
.ovpanel .dh .tot.g{color:var(--goodB)} .ovpanel .dh .tot.b{color:var(--badB)}
/* quick-actions grid */
.qa-title{font:600 9px var(--dsp);letter-spacing:.12em;text-transform:uppercase;color:var(--inkF);margin:13px 0 7px}
.qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.qa-grid .btn{justify-content:flex-start;font-size:11.5px;padding:8px 10px}
.qa-grid .btn.wide{grid-column:1/-1}
.qa-grid .btn.done{border-color:var(--fgold);color:var(--goldB);background:rgba(184,146,58,.08)}
/* breakdown / requirements tables */
.bd-tbl{width:100%;border-collapse:collapse;font-size:11px}
.bd-tbl th{font:600 9px var(--dsp);letter-spacing:.06em;text-transform:uppercase;color:var(--goldD);text-align:right;padding:6px 8px;border-bottom:1px solid var(--frameS);white-space:nowrap}
.bd-tbl th:first-child,.bd-tbl th.l{text-align:left}
.bd-tbl td{padding:6px 8px;border-bottom:1px solid rgba(111,130,84,.09);text-align:right;font-family:var(--mono);color:var(--inkS);white-space:nowrap}
.bd-tbl td.l{text-align:left;font-family:var(--body);color:var(--ink)}
.bd-tbl td .side-in{color:var(--badB)} .bd-tbl td .side-out{color:var(--goodB)}
.bd-tbl tr.sidehdr td{background:var(--panel2);color:var(--gold);font:600 9px var(--dsp);letter-spacing:.08em;text-transform:uppercase;text-align:left}
.bd-note{font-size:10.5px;color:var(--inkF)}
/* requirements gear table */
.gear-tbl{width:100%;border-collapse:collapse;font-size:11.5px;margin-top:6px}
.gear-tbl td{padding:6px 8px;border-bottom:1px solid rgba(111,130,84,.09);vertical-align:middle}
.gear-tbl td.g-est{text-align:right;font-family:var(--mono);color:var(--inkS)}
.chip-own{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;padding:2px 8px;border-radius:20px;cursor:pointer;border:1px solid var(--frameS);background:var(--panel2);color:var(--inkS);user-select:none}
.chip-own.owned{border-color:#3d6e3a;background:rgba(116,198,111,.10);color:var(--goodB)}
.chip-own.notowned{border-color:#7a3c30;background:rgba(224,101,74,.07);color:var(--badB)}
.chip-own:hover{border-color:var(--frameB)}
/* requirements/about label list */
.rq-list{display:grid;grid-template-columns:1fr 1fr;gap:6px 22px;font-size:11.5px;color:var(--inkS)}
.rq-list .rq{padding:3px 0}
.rq-list .rq.wide{grid-column:1/-1}
.rq-list b{color:var(--ink);font-weight:500}
/* sensitivity chart */
.sens-wrap{background:var(--panel);border:1px solid var(--frameS);border-radius:var(--r-md);padding:11px 12px}
.sens-wrap svg{width:100%;height:auto;display:block}
.sens-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;font-size:10.5px;color:var(--inkS)}
.sens-legend span{display:inline-flex;align-items:center;gap:6px}
.sens-legend i{width:16px;height:0;border-top:2px solid;display:inline-block}
.sens-legend i.best{border-top-style:dashed;border-color:var(--good)}
.sens-legend i.cur{border-color:var(--goodB)}
.sens-legend i.worst{border-top-style:dashed;border-color:var(--bad)}
.callout{background:var(--panel2);border:1px solid var(--frameS);border-left:3px solid var(--frameB);border-radius:var(--r-sm);padding:9px 11px;margin-top:11px;font-size:11.5px;color:var(--inkS)}
.callout .ct{font:600 9px var(--dsp);letter-spacing:.1em;text-transform:uppercase;color:var(--inkF);margin-bottom:4px}
/* offline / empty hero state (GE History, sensitivity attribution) */
.hero-empty{text-align:center;padding:34px 20px;color:var(--inkS);background:var(--panel);border:1px dashed var(--frameS);border-radius:var(--r-md)}
.hero-empty .hi{font-size:22px;color:var(--inkF);margin-bottom:8px}
.hero-empty code{background:var(--input);border:1px solid var(--frameS);border-radius:3px;padding:1px 5px;font-family:var(--mono);font-size:10.5px;color:var(--goldB)}
/* notes */
.notes-add{display:flex;gap:8px;margin-bottom:11px;align-items:flex-start}
.notes-add textarea{flex:1;background:var(--input);color:var(--ink);border:1px solid var(--frameS);border-radius:var(--r-sm);padding:8px 10px;font:400 12px var(--body);resize:vertical;min-height:44px}
.notes-add textarea:focus{outline:none;border-color:var(--fgold)}
.note{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid rgba(111,130,84,.09);font-size:12px;color:var(--ink)}
.note .nt-txt{white-space:pre-wrap;word-break:break-word;min-width:0}
.note .nt-ts{font-size:9.5px;color:var(--inkF);font-family:var(--mono);margin-top:3px}
.note .nt-del{color:var(--inkF);cursor:pointer;font-size:13px;flex-shrink:0}
.note .nt-del:hover{color:var(--badB)}
/* bottom panels row (About / Similar) */
.mdet-bottom{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:15px}
.mdet-bottom .ovpanel{padding:12px 13px}
.sim-tbl{width:100%;border-collapse:collapse;font-size:11.5px}
.sim-tbl td{padding:6px 6px;border-bottom:1px solid rgba(111,130,84,.09)}
.sim-tbl td.rk{width:22px;color:var(--inkF);font-family:var(--mono)}
.sim-tbl td.nm{color:var(--ink);cursor:pointer}
.sim-tbl td.nm:hover{color:var(--goldB)}
.sim-tbl td.np{text-align:right;font-family:var(--mono);color:var(--goodB)}
.sim-tbl td.ro{text-align:right;font-family:var(--mono);color:var(--inkS);width:52px}
@media(max-width:1099px){.ovgrid{grid-template-columns:1fr 1fr}.ovgrid>div:last-child{grid-column:1/-1}}
@media(max-width:860px){
  .mdet-head{grid-template-columns:1fr}
  .kpi-strip{justify-content:flex-start}
  .ovgrid,.mdet-bottom,.rq-list{grid-template-columns:1fr}
  .tabbar{gap:0}
}

/* ---------- 15. Fallback header (shown only when shell.js is absent) ---------- */
.brand{display:flex;align-items:center;gap:12px}
.emblem{width:36px;height:36px;border:1px solid var(--fgold);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:19px;background:var(--panel2)}
.brand h1{font:600 21px/1 var(--dsp);letter-spacing:.05em;color:var(--goldB);margin:0}
.brand .sub{color:var(--inkF);font-size:11.5px;margin-top:4px}
.shell-fallback{max-width:1500px;margin:0 auto;padding:16px 16px 0;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between}
body.has-shell .shell-fallback{display:none}
.shell-fallback nav{display:flex;gap:3px;flex-wrap:wrap}
.shell-fallback nav a{padding:6px 10px;border:1px solid var(--frameS);border-radius:var(--r-sm);color:var(--inkS);font:500 12px var(--body)}
.shell-fallback nav a:hover{background:var(--raise);color:var(--ink);text-decoration:none}
.shell-fallback nav a[aria-current="page"]{background:var(--gold);border-color:var(--gold);color:#161009;font-weight:600}

/* ---------- 16. App shell: sidebar ---------- */
body.has-shell{padding-left:var(--side-w)}
body.has-shell.rail{padding-left:var(--side-rail)}
.shell-side{position:fixed;top:0;left:0;bottom:0;width:var(--side-w);background:var(--rail);border-right:1px solid var(--frameS);display:none;flex-direction:column;z-index:60}
body.has-shell .shell-side{display:flex}
body.rail .shell-side{width:var(--side-rail)}
.side-brand{display:flex;align-items:center;gap:9px;padding:13px 12px;border-bottom:1px solid var(--frameS)}
.side-emblem{width:32px;height:32px;flex-shrink:0;border:1px solid var(--fgold);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:17px;background:var(--panel2)}
.side-word{font:600 11px/1.35 var(--dsp);letter-spacing:.14em;color:var(--goldB);text-transform:uppercase;white-space:nowrap}
.side-word small{display:block;color:var(--goldD);font-size:9px;letter-spacing:.26em}
.side-nav{flex:1 1 auto;overflow-y:auto;padding:10px 8px;display:flex;flex-direction:column;gap:2px}
.side-link{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--r-md);color:var(--inkS);font:500 12px var(--body);white-space:nowrap}
.side-link:hover{background:var(--raise);color:var(--ink);text-decoration:none}
.side-link.on{background:rgba(116,198,111,.10);color:var(--goodB)}
.side-link .si{width:18px;text-align:center;font-size:13px;flex-shrink:0}
.side-foot{padding:10px 8px;display:grid;gap:8px}
.side-panel{background:var(--panel2);border:1px solid var(--frameS);border-radius:var(--r-md);padding:9px 10px;overflow:hidden}
.sp-head{display:flex;align-items:center;gap:6px;font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--inkF);margin-bottom:6px}
.sp-head .dot{width:7px;height:7px}
.sp-row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px;color:var(--inkS);padding:2px 0}
.sp-k{color:var(--inkF);font-size:10px}
.sp-v{font-family:var(--mono);color:var(--ink);white-space:nowrap}
.sp-note{font-size:10.5px;color:var(--inkF);line-height:1.5}
.sp-note code,.sp-be-body code{font-family:var(--mono);font-size:9.5px;color:var(--infoB);background:rgba(88,182,201,.08);padding:0 3px;border-radius:3px;word-break:break-all}
.sp-note a{color:var(--infoB)}
.be-ok{color:var(--goodB);font-weight:600}
.be-bad{color:var(--badB);font-weight:600}
.sp-be-row{display:flex;gap:5px;margin-top:7px}
.sp-be-url{flex:1;min-width:0;font-family:var(--mono);font-size:9.5px;color:var(--ink);background:var(--input);border:1px solid var(--frameS);border-radius:var(--r-sm);padding:4px 6px}
.sp-be-url:focus{outline:none;border-color:var(--fgold)}
.side-toggle{border:0;border-top:1px solid var(--frameS);background:none;color:var(--inkF);padding:9px;cursor:pointer;font:500 11px var(--body);text-align:center}
.side-toggle:hover{color:var(--ink);background:var(--raise)}
/* icon-rail mode (§6.11: 1100–1279 forced; manual collapse at ≥1280) */
body.rail .side-word,body.rail .side-foot,body.rail .side-link .sl{display:none}
body.rail .side-brand{justify-content:center;padding:13px 6px}
body.rail .side-link{justify-content:center;padding:9px 0}
.side-scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:55}

/* ---------- 17. App shell: sticky topbar ---------- */
.shell-top{display:none;position:sticky;top:0;z-index:50;background:rgba(9,13,10,.94);border-bottom:1px solid var(--frameS);padding:10px 16px;align-items:center;gap:12px}
@supports(backdrop-filter:blur(4px)){.shell-top{background:rgba(9,13,10,.82);backdrop-filter:blur(5px)}}
body.has-shell .shell-top{display:flex}
.top-title{min-width:0}
.top-title h1{font:600 17px/1.15 var(--dsp);letter-spacing:.04em;color:#fff;margin:0;white-space:nowrap}
.top-sub{color:var(--inkF);font-size:10.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-search{flex:1 1 220px;display:flex;justify-content:flex-end;align-items:center;position:relative;min-width:0}
.top-search .search{flex:0 1 340px;min-width:140px;padding-right:54px}
.top-search.empty{visibility:hidden}
.top-kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);font:500 9px var(--mono);color:var(--inkF);border:1px solid var(--frameS);border-radius:4px;padding:1px 5px;pointer-events:none}
.top-burger{display:none;background:none;border:1px solid var(--frameS);border-radius:var(--r-sm);color:var(--ink);font-size:15px;padding:5px 9px;cursor:pointer}
.top-burger:hover{border-color:var(--frameB)}

/* ---------- 18. Responsive (§6.11) ---------- */
@media(max-width:1100px){.hide-lg{display:none}}
@media(max-width:860px){.hide-md{display:none}}
@media(max-width:640px){.hide-sm{display:none}}
@media(max-width:1099px){.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:759px){
  body.has-shell,body.has-shell.rail{padding-left:0}
  .top-burger{display:inline-flex}
  .top-sub{display:none}
  .side-toggle{display:none}
  body.has-shell .shell-side{width:var(--side-w);transform:translateX(-100%);transition:transform .18s ease}
  body.has-shell.side-open .shell-side{transform:none}
  body.rail .side-word,body.rail .side-foot,body.rail .side-link .sl{display:block}
  body.rail .side-link .sl{display:inline}
  body.rail .side-brand{justify-content:flex-start;padding:13px 12px}
  body.rail .side-link{justify-content:flex-start;padding:7px 9px}
  body.has-shell.side-open .side-scrim{display:block}
  /* stat cards: horizontal scroll-snap strip */
  .strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
  .strip .metric{min-width:205px;flex:0 0 auto;scroll-snap-align:start}
}
@media(prefers-reduced-motion:reduce){
  label.chk,label.chk input,.chip,.chip::before,.shell-side{transition:none}
  .skel::after,.dot.live{animation:none}
}

/* ==========================================================================
   19. Bankroll Planner (planner.html, spec §6.6/§6.8) — a MANUAL worksheet.
   Two-column: the profile form (left) + live-recomputed result buckets (right).
   Shared here because the planner is the only page that uses them, but they
   belong to the tokenized component library, not a page's private <style>.
   ========================================================================== */
/* honesty banner: the app never reads your account (§6.6) */
.pl-honesty{display:flex;align-items:flex-start;gap:9px;background:var(--panel2);border:1px solid var(--frameS);border-left:3px solid var(--info);border-radius:var(--r-md);padding:9px 13px;margin-bottom:13px;font-size:11.5px;color:var(--inkS)}
.pl-honesty b{color:var(--infoB);font-weight:600}
.pl-honesty .hx{color:var(--info);font-size:14px;line-height:1.2;flex-shrink:0}
/* two-column worksheet layout */
.pl-grid{display:grid;grid-template-columns:minmax(320px,380px) 1fr;gap:16px;align-items:start}
/* worksheet card (left profile form + right result groups) */
.ws-card{position:relative;background:var(--panel);border:1px solid var(--frame);border-radius:var(--r-md);padding:13px 15px}
.ws-card+.ws-card{margin-top:14px}
.ws-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.ws-title{font:600 11px var(--dsp);letter-spacing:.09em;text-transform:uppercase;color:var(--gold)}
.ws-sub{font-size:10.5px;color:var(--inkF);margin:2px 0 11px}
/* labelled field with a plain-English helper line under each control */
.pf-field{margin-bottom:12px}
.pf-field>label{display:block;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--inkS);margin-bottom:4px}
.pf-field .help{font-size:10.5px;color:var(--inkF);margin-top:4px;line-height:1.45}
.pf-field input[type=text],.pf-field input[type=number],.pf-field select{width:100%;background:var(--input);color:var(--ink);border:1px solid var(--frameS);border-radius:var(--r-sm);padding:8px 10px;font:400 12.5px var(--body)}
.pf-field input:focus,.pf-field select:focus{outline:none;border-color:var(--fgold)}
.pf-row{display:flex;gap:9px}
.pf-row>.pf-field{flex:1;margin-bottom:0}
.pf-two{display:grid;grid-template-columns:1fr 1fr;gap:9px}
/* toggle (members / include-gear / amortize) rendered as a checkbox chip row */
.pf-toggle{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink);cursor:pointer;user-select:none;padding:3px 0}
.pf-toggle input{width:15px;height:15px;flex-shrink:0;accent-color:var(--gold);cursor:pointer}
.pf-toggle .tl{min-width:0}
.pf-toggle .help{display:block;font-size:10px;color:var(--inkF);margin-top:1px}
/* skills entry: name+level rows the user adds manually */
.pf-skill-row{display:grid;grid-template-columns:1fr 74px 30px;gap:7px;margin-bottom:6px}
.pf-skill-row input{width:100%;background:var(--input);color:var(--ink);border:1px solid var(--frameS);border-radius:var(--r-sm);padding:6px 8px;font:400 12px var(--body)}
.pf-skill-row .x{border:1px solid var(--frameS);background:var(--panel2);color:var(--inkF);border-radius:var(--r-sm);cursor:pointer;font-size:13px}
.pf-skill-row .x:hover{border-color:#7a3c30;color:var(--badB)}
.pf-taglist{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 6px}
.pf-tag{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;padding:3px 5px 3px 9px;border-radius:20px;border:1px solid var(--frameS);background:var(--panel2);color:var(--inkS)}
.pf-tag .x{cursor:pointer;color:var(--inkF);font-size:12px;line-height:1}
.pf-tag .x:hover{color:var(--badB)}
.pf-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;padding-top:12px;border-top:1px solid var(--frameS)}
.pf-select-row{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.pf-select-row select{flex:1;background:var(--input);color:var(--ink);border:1px solid var(--frameS);border-radius:var(--r-sm);padding:7px 9px;font:400 12px var(--body)}
/* assumption chips bar (§6.8) — always visible above the results */
.assump-bar{display:flex;gap:7px;flex-wrap:wrap;align-items:center;background:var(--panel2);border:1px solid var(--frameS);border-radius:var(--r-md);padding:9px 11px;margin-bottom:13px}
.assump-bar .al{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--inkF);margin-right:2px}
.assump-chip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;padding:3px 9px;border-radius:20px;border:1px dashed var(--fgold);background:rgba(184,146,58,.07);color:var(--goldB);white-space:nowrap}
.assump-chip.plain{border-style:solid;border-color:var(--frameS);background:var(--panel);color:var(--inkS)}
/* result bucket group */
.bucket{margin-bottom:16px}
.bucket-head{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.bucket-head .bt{font:600 12px var(--dsp);letter-spacing:.04em;color:var(--ink)}
.bucket-head .bn{font-size:10.5px;color:var(--inkF);font-family:var(--mono)}
.bucket-head .bdot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.bucket.affordable .bdot{background:var(--good)} .bucket.blocked .bdot{background:var(--warn)}
.bucket.gear .bdot{background:var(--info)} .bucket.locked .bdot{background:var(--bad)}
.bucket.unknown .bdot{background:var(--inkF)} .bucket.recommend .bdot{background:var(--gold)}
.bucket-desc{font-size:10.5px;color:var(--inkF);margin:-3px 0 8px 17px;line-height:1.45}
/* result rows */
.pl-row{display:grid;grid-template-columns:1fr auto;gap:8px 14px;align-items:center;padding:8px 11px;background:var(--panel2);border:1px solid var(--frameS);border-radius:var(--r-sm);margin-bottom:6px}
.pl-row:hover{border-color:var(--frameB)}
.pl-row .rn{min-width:0}
.pl-row .rn .nm{font:500 12.5px var(--body);color:#eef2e2;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pl-row .rn .nm a{color:#eef2e2} .pl-row .rn .nm a:hover{color:var(--goldB)}
.pl-row .rn .sub{font-size:10.5px;color:var(--inkF);margin-top:3px;font-family:var(--mono)}
.pl-row .rv{text-align:right;white-space:nowrap}
.pl-row .rv .p{font:600 13px var(--mono);color:var(--goodB)}
.pl-row .rv .p.neg{color:var(--badB)}
.pl-row .rv .f{font-size:10.5px;color:var(--inkS);font-family:var(--mono);margin-top:2px}
.pl-row .gap{color:var(--warnB)} .pl-row .over{color:var(--badB)}
.pl-row.deep{border-color:var(--fgold);box-shadow:0 0 0 1px rgba(184,146,58,.25)}
.bucket .more{font-size:10.5px;color:var(--inkS);padding:5px 2px;cursor:pointer}
.bucket .more:hover{color:var(--goldB)}
.bucket .empty{font-size:11px;color:var(--inkF);padding:7px 11px;border:1px dashed var(--frameS);border-radius:var(--r-sm)}
/* full-page no-profile prompt (§6.6) */
.pl-prompt{max-width:560px;margin:40px auto;text-align:center;background:var(--panel);border:1px dashed var(--frameS);border-radius:var(--r-lg);padding:38px 30px}
.pl-prompt .pi{font-size:30px;color:var(--gold);margin-bottom:12px}
.pl-prompt h2{font:600 18px var(--dsp);color:#fff;margin:0 0 9px}
.pl-prompt p{color:var(--inkS);font-size:12.5px;line-height:1.6;margin:0 auto 18px;max-width:420px}
.pl-prompt .em{color:var(--infoB)}
/* small breakdown line for the deep-linked method affordability card */
.pl-breakdown{background:var(--panel2);border:1px solid var(--frameS);border-left:3px solid var(--fgold);border-radius:var(--r-sm);padding:10px 12px;margin-bottom:13px;font-size:11.5px;color:var(--inkS)}
.pl-breakdown .bh{font:600 10px var(--dsp);letter-spacing:.09em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.pl-breakdown .bl{display:flex;justify-content:space-between;gap:12px;padding:3px 0;border-bottom:1px dashed rgba(111,130,84,.12)}
.pl-breakdown .bl b{font-family:var(--mono);color:var(--ink);font-weight:500}
@media(max-width:980px){.pl-grid{grid-template-columns:1fr}}

/* ---------- 20. Shared method-detail overlay (assets/method-card.js) ----------
   A modal/drawer that hosts the SAME analyst-report card the Money Making list
   shows inline, opened in place from Trend Analysis / Planner / Similar-methods.
   The card BODY reuses .det-in and every card class above; these rules only add
   the backdrop, the centred panel, close affordance and mobile full-height. */
.mmg-card-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-start;justify-content:center;
  padding:40px 18px;background:rgba(6,9,7,.72);backdrop-filter:blur(2px);overflow-y:auto;overscroll-behavior:contain}
.mmg-card-modal{position:relative;width:100%;max-width:1180px;background:var(--panel);border:1px solid var(--frame);
  border-radius:var(--r-lg);box-shadow:0 24px 70px rgba(0,0,0,.6);outline:none;max-height:calc(100vh - 80px);display:flex;flex-direction:column}
.mmg-card-scroll{overflow-y:auto;overscroll-behavior:contain;border-radius:var(--r-lg)}
/* the overlay hosts .det-in directly; drop its left gold rule's outer margin so the
   card fills the modal corner-to-corner (the modal border already frames it). */
.mmg-card-modal .det-in{border-left:0;padding:16px 20px 22px}
.mmg-card-close{position:absolute;top:9px;right:11px;z-index:2;width:30px;height:30px;display:flex;align-items:center;
  justify-content:center;border:1px solid var(--frameS);background:var(--raise);color:var(--inkS);border-radius:var(--r-sm);
  font-size:15px;line-height:1;cursor:pointer}
.mmg-card-close:hover{color:var(--ink);border-color:var(--frameB)}
.mmg-card-close:focus-visible{outline:2px solid var(--info);outline-offset:1px}
@media(prefers-reduced-motion:no-preference){
  .mmg-card-overlay{animation:mmgCardFade .14s ease}
  .mmg-card-modal{animation:mmgCardRise .16s ease}
}
@keyframes mmgCardFade{from{opacity:0}to{opacity:1}}
@keyframes mmgCardRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* mobile: full-height sheet, no side gutters, close pinned */
@media(max-width:760px){
  .mmg-card-overlay{padding:0;align-items:stretch}
  .mmg-card-modal{max-width:none;max-height:100vh;min-height:100vh;border-radius:0;border-left:0;border-right:0}
  .mmg-card-scroll{border-radius:0}
  .mmg-card-modal .det-in{padding:14px 13px 20px}
}