/* ---- Matchups page ---- */
.app .caveat{background:var(--surface);border:1px solid var(--grid);border-left:3px solid var(--accent);border-radius:0 10px 10px 0;padding:14px 18px}
.app .caveat summary{cursor:pointer;list-style:none;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.app .caveat summary::-webkit-details-marker{display:none}
.app .caveat summary b{font:700 13px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.app .caveat summary b::before{content:"\25B8";display:inline-block;margin-right:8px;transition:transform .15s}
.app .caveat[open] summary b::before{transform:rotate(90deg)}
.app .caveat summary span{color:var(--ink2);font-size:13.5px}
.app .caveat ul{margin:12px 0 2px;padding-left:18px;display:grid;grid-template-columns:1fr 1fr;gap:8px 34px;color:var(--ink2);font-size:13px;line-height:1.45}
@media (max-width:900px){.app .caveat ul{grid-template-columns:1fr}}
.app .caveat li b{color:var(--ink)}
.app #tbl th[data-k=tdi]{color:var(--accent)!important;font-weight:700}
.app #tbl th[data-k=tdi],.app #tbl td.tdi{background:rgba(208,176,99,.10);box-shadow:inset 1px 0 0 rgba(208,176,99,.35),inset -1px 0 0 rgba(208,176,99,.35)}
.app #tbl td.tdi{color:var(--accent);font-weight:700;font-size:14.5px}
.app #tbl tbody tr{cursor:pointer}
.app #tbl tbody tr:hover td{background:var(--hl)}
.app .pbar{display:inline-flex;gap:3px;margin-left:8px;vertical-align:1px}
.app .pbar i{display:block;width:5px;height:12px;border-radius:1px;background:var(--axis)}
.app .chartrow2{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:24px;align-items:start}
.app #mchart svg{display:block;width:100%;max-height:470px}
.app .mtip{position:absolute;pointer-events:none;background:#050506;border:1px solid var(--axis);border-radius:6px;padding:6px 9px;font-size:12px;transform:translate(-50%,-115%);white-space:nowrap}
.app .mtip b{display:block}
.app .mside{display:grid;gap:10px;font-size:13px;color:var(--ink2)}
.app .mside b{color:var(--ink)}
@media (max-width:900px){.app .chartrow2{grid-template-columns:1fr}}
/* card */
.app .mk4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}
.app .mk{border-top:2px solid var(--grid);padding-top:7px;min-width:0}
.app .mk.hi{border-top-color:var(--accent)}
.app .mk .k{font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.app .mk .v{font:600 24px/1.15 var(--mono);color:var(--ink);margin:4px 0 2px}
.app .mk.hi .v{color:var(--accent)}
.app .mk .v .rk{font-size:10px;margin-left:4px;vertical-align:2px}
.app .mk .s{font-size:11.5px;color:var(--muted);min-height:18px}
.app .mk .kp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:6px}
.app .mk .kp>span{display:block;font:500 9.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.app .mk .kp b{display:block;font:600 13px/1.3 var(--mono);letter-spacing:0;color:var(--ink);text-transform:none}
.app .mk .kp b.neg{color:var(--neg)}
.app .mk .kp .rk{font-size:8.5px;margin-left:3px}
.app .mgrid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:18px;align-items:start}
.app .atbl{width:100%;border-collapse:collapse;font-size:12.5px}
.app .atbl th{font:500 10px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:right;padding:0 7px 6px;border-bottom:1px solid var(--grid);vertical-align:bottom}
.app .atbl th.l,.app .atbl td.l{text-align:left}
.app .atbl td{padding:6px 7px;border-bottom:1px solid var(--grid);text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.app .atbl td.l{font-family:var(--body)}
.app .atbl td.b{color:var(--muted)}
.app .atbl td.neg{color:var(--neg)}
.app .atbl td.pos{color:var(--accent)}
.app .sbox{background:var(--bg);border:1px solid var(--grid);border-radius:8px;padding:12px 12px 10px}
.app .sbox svg{display:block;width:100%;height:auto}
.app .pop .note.mn{font-size:11.5px;margin:8px 0 0}
.app .atbl tr.dim td{color:var(--muted)}
.app .atbl td a{color:var(--ink)}
.app #tbl td .pos{color:var(--accent);font-family:var(--mono)}
.app #tbl td span.neg{color:var(--neg);font-family:var(--mono)}
.app #tbl td .dim{color:var(--muted);font-family:var(--mono);font-size:11px}
@media (max-width:820px){.app .mk4{grid-template-columns:repeat(2,minmax(0,1fr))}.app .mgrid{grid-template-columns:1fr}.app .mk .kp{grid-template-columns:repeat(2,minmax(0,1fr))}.app .mk .kp>span{white-space:normal;font-size:9px}.app .atbl .tag{white-space:nowrap}}