/* Reset — mirrors what the Claude artifact host injects, so the standalone
   build and the artifact build render identically. */
img{max-width:100%}
[hidden]{display:none!important}

:root{
  color-scheme: light;
  --bg:#f1f3f6; --surface:#ffffff; --surface-2:#e7ebf1; --surface-3:#dde3ea;
  --ink:#10151c; --ink-2:#49535f; --ink-3:#78828e; --line:#d6dde5; --line-2:#c3ccd6;
  --accent:#1b3a6b; --accent-2:#2a78d6; --accent-soft:#e2eaf6;
  --good:#1a6f45; --good-soft:#dcefe4; --warn:#9e6208; --warn-soft:#f7ecd6; --bad:#a52e28; --bad-soft:#f8e3e1;
  --ev:#0f6b45; --ev-soft:#ddf0e6;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#4a3aa7;
  --shadow: 0 1px 2px rgba(16,21,28,.06), 0 8px 24px -12px rgba(16,21,28,.18);
  --r: 10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#0f1319; --surface:#171c24; --surface-2:#1f2630; --surface-3:#28313c;
    --ink:#eef2f7; --ink-2:#a9b3c0; --ink-3:#79838f; --line:#2a323d; --line-2:#38424f;
    --accent:#82a9e3; --accent-2:#3987e5; --accent-soft:#1b2636;
    --good:#4cb583; --good-soft:#16291f; --warn:#d9a03f; --warn-soft:#2a2116; --bad:#e07a72; --bad-soft:#2c1a19;
    --ev:#58c08a; --ev-soft:#15291f;
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#9085e9;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0f1319; --surface:#171c24; --surface-2:#1f2630; --surface-3:#28313c;
  --ink:#eef2f7; --ink-2:#a9b3c0; --ink-3:#79838f; --line:#2a323d; --line-2:#38424f;
  --accent:#82a9e3; --accent-2:#3987e5; --accent-soft:#1b2636;
  --good:#4cb583; --good-soft:#16291f; --warn:#d9a03f; --warn-soft:#2a2116; --bad:#e07a72; --bad-soft:#2c1a19;
  --ev:#58c08a; --ev-soft:#15291f;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#9085e9;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Archivo", ui-sans-serif, system-ui, sans-serif; margin:0; text-wrap:balance; letter-spacing:-.012em}
.mono{font-family:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms !important; transition-duration:.001ms !important}}

/* ---------- shell ---------- */
.wrap{max-width:1280px; margin:0 auto; padding-inline:18px; padding-block:0 56px}
header.top{
  display:flex; flex-wrap:wrap; gap:14px 20px; align-items:flex-end; justify-content:space-between;
  padding-block:22px 16px; border-bottom:1px solid var(--line);
}
.brandline{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.plate{
  font-family:"Archivo",sans-serif; font-weight:700; font-size:12px; letter-spacing:.10em;
  background:var(--ev); color:#fff; padding:5px 9px 4px; border-radius:4px; line-height:1; white-space:nowrap;
}
h1{font-size:clamp(22px,3.4vw,30px); font-weight:700}
.sub{color:var(--ink-2); font-size:13.5px; margin-top:3px; max-width:62ch}
.topacts{display:flex; gap:8px; flex-wrap:wrap}
.btn{
  background:var(--surface); border:1px solid var(--line-2); color:var(--ink);
  padding:8px 13px; border-radius:8px; cursor:pointer; font-size:13.5px; font-weight:500;
  display:inline-flex; align-items:center; gap:7px; transition:background .15s, border-color .15s;
}
.btn:hover{background:var(--surface-2); border-color:var(--ink-3)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
:root[data-theme="dark"] .btn.primary, :root:not([data-theme="light"]) .btn.primary{}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn.primary{color:#0f1319}}
:root[data-theme="dark"] .btn.primary{color:#0f1319}
.btn.primary:hover{filter:brightness(1.08)}
.btn.sm{padding:5px 10px; font-size:12.5px}

/* ---------- verdict band ---------- */
.verdict{
  margin-top:18px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  box-shadow:var(--shadow); overflow:hidden; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
}
.verdict .vmain{padding:20px 22px; display:flex; flex-direction:column; gap:12px; border-right:1px solid var(--line)}
.vhead{display:flex; align-items:center; gap:11px; flex-wrap:wrap}
.vpill{
  font-family:"Archivo",sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px; border:1px solid transparent; white-space:nowrap;
}
.vpill[data-t="good"]{background:var(--good-soft); color:var(--good); border-color:color-mix(in srgb, var(--good) 30%, transparent)}
.vpill[data-t="ok"]{background:var(--accent-soft); color:var(--accent); border-color:color-mix(in srgb, var(--accent) 30%, transparent)}
.vpill[data-t="warn"]{background:var(--warn-soft); color:var(--warn); border-color:color-mix(in srgb, var(--warn) 30%, transparent)}
.vpill[data-t="bad"]{background:var(--bad-soft); color:var(--bad); border-color:color-mix(in srgb, var(--bad) 30%, transparent)}
.vtitle{font-size:clamp(19px,2.6vw,25px); font-weight:700}
.vsay{color:var(--ink-2); font-size:14px; max-width:58ch}
.gauge{margin-top:2px}
.gaugebar{position:relative; height:34px; border-radius:7px; overflow:hidden; background:var(--surface-2); border:1px solid var(--line)}
.gzone{position:absolute; top:0; bottom:0}
.gmark{position:absolute; top:-3px; bottom:-3px; width:3px; background:var(--ink); border-radius:2px; box-shadow:0 0 0 2px var(--surface)}
.gmark2{position:absolute; top:4px; bottom:4px; width:2px; background:var(--ink-3); border-radius:2px}
.gticks{display:flex; justify-content:space-between; margin-top:5px; font-size:11px; color:var(--ink-3)}
.vstats{padding:18px 20px; display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; align-content:start; background:var(--surface-2)}
.stat .k{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); font-weight:600}
.stat .v{font-family:"Archivo",sans-serif; font-weight:700; font-size:21px; margin-top:2px; font-variant-numeric:tabular-nums}
.stat .n{font-size:11.5px; color:var(--ink-3); margin-top:1px}

/* ---------- layout ---------- */
.cols{display:grid; grid-template-columns:352px minmax(0,1fr); gap:20px; margin-top:20px; align-items:start}
.main{min-width:0}
.rail{min-width:0; position:sticky; top:14px; max-height:calc(100vh - 28px); overflow-y:auto; display:flex; flex-direction:column; gap:12px; padding-right:2px}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.pad{padding:16px 18px}
.sec{border-bottom:1px solid var(--line)}
.sec:last-child{border-bottom:0}
.sech{
  width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:13px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-family:"Archivo",sans-serif; font-weight:600; font-size:13px; letter-spacing:.045em; text-transform:uppercase; color:var(--ink-2);
}
.sech:hover{color:var(--ink)}
.sech .chev{transition:transform .18s; color:var(--ink-3)}
.sech[aria-expanded="true"] .chev{transform:rotate(90deg)}
.secb{padding:0 16px 15px; display:flex; flex-direction:column; gap:12px}
.field{display:flex; flex-direction:column; gap:5px}
.field > label{font-size:12px; font-weight:600; color:var(--ink-2); display:flex; justify-content:space-between; gap:8px; align-items:baseline}
.field .hint{font-size:11px; color:var(--ink-3); font-weight:400}
input[type=text], input[type=number], select, input[type=search]{
  width:100%; background:var(--surface); border:1px solid var(--line-2); border-radius:7px;
  padding:8px 10px; color:var(--ink); font:inherit; font-size:14px;
  font-variant-numeric:tabular-nums;
}
select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%); background-position:calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:30px}
input:focus, select:focus{border-color:var(--accent-2)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px}
.inline{display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink-2)}
input[type=range]{width:100%; accent-color:var(--accent-2); height:20px}
.seg{display:flex; background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:3px; gap:3px}
.seg button{flex:1; background:none; border:0; padding:6px 4px; border-radius:6px; cursor:pointer; font-size:12.5px; font-weight:500; color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.12); font-weight:600}
.note{font-size:11.5px; color:var(--ink-3); line-height:1.45}

/* ---------- tabs ---------- */
.tabs{display:flex; gap:2px; overflow-x:auto; padding:4px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); scrollbar-width:thin}
/* nine tabs: on a desktop let them wrap rather than hide the last ones; phones keep the swipeable row */
@media (min-width:901px){ .tabs{flex-wrap:wrap} }
.tabs button{
  background:none; border:0; padding:8px 10px; border-radius:7px; cursor:pointer; white-space:nowrap;
  font-family:"Archivo",sans-serif; font-weight:600; font-size:13px; color:var(--ink-2);
}
.tabs button[aria-selected="true"]{background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.12)}
.views{margin-top:14px; display:flex; flex-direction:column; gap:14px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:18px 20px}
.card > h3{font-size:15px; font-weight:600; letter-spacing:.005em}
.card > .csub{font-size:12.5px; color:var(--ink-3); margin-top:3px; margin-bottom:14px; max-width:70ch}
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px}
.grid3{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px}

/* ---------- bits ---------- */
.tile{border:1px solid var(--line); border-radius:9px; padding:13px 14px; background:var(--surface-2)}
.tile .k{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); font-weight:600}
.tile .v{font-family:"Archivo",sans-serif; font-weight:700; font-size:20px; margin-top:3px; font-variant-numeric:tabular-nums}
.tile .n{font-size:11.5px; color:var(--ink-3); margin-top:2px; line-height:1.4}
table{width:100%; border-collapse:collapse; font-size:13px}
th{text-align:right; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); font-weight:600; padding:7px 6px; border-bottom:1px solid var(--line-2); white-space:nowrap}
th:first-child, td:first-child{text-align:left}
td{padding:7px 6px; border-bottom:1px solid var(--line); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr.tot td{font-weight:600; border-top:1px solid var(--line-2); background:var(--surface-2)}
.scrollx{overflow-x:auto; margin-inline:-4px; padding-inline:4px}
.legend{display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px; font-size:12px; color:var(--ink-2)}
.legend span{display:inline-flex; align-items:center; gap:6px}
.swatch{width:11px; height:11px; border-radius:3px; flex:none}
.bar{height:26px; display:flex; border-radius:6px; overflow:hidden; background:var(--surface-2); gap:2px}
.bar > i{display:block; height:100%}
.chip{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2)}
.chip.ev{background:var(--ev-soft); color:var(--ev); border-color:color-mix(in srgb, var(--ev) 32%, transparent)}
.chip.good{background:var(--good-soft); color:var(--good); border-color:color-mix(in srgb,var(--good) 32%, transparent)}
.chip.warn{background:var(--warn-soft); color:var(--warn); border-color:color-mix(in srgb,var(--warn) 32%, transparent)}
.chip.bad{background:var(--bad-soft); color:var(--bad); border-color:color-mix(in srgb,var(--bad) 32%, transparent)}
svg.chart{display:block; width:100%; height:auto; overflow:visible}
.cwrap{position:relative}
.tip{
  position:absolute; pointer-events:none; background:var(--ink); color:var(--bg); padding:7px 10px; border-radius:7px;
  font-size:12px; line-height:1.45; white-space:pre; opacity:0; transition:opacity .12s; z-index:5; box-shadow:0 6px 20px rgba(0,0,0,.3);
  font-variant-numeric:tabular-nums;
}
.tip.on{opacity:1}
/* shared with the report (js/parts.js) */
.grid4{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px}
.fig{margin:14px 0 4px}
tbody tr.me td{background:var(--accent-soft)}
.callout{padding:11px 14px; border-radius:9px; background:var(--accent-soft); color:var(--ink); font-size:13px; margin:12px 0 0}
.callout.good{background:var(--good-soft)} .callout.warn{background:var(--warn-soft)} .callout.bad{background:var(--bad-soft)}
.donutrow{display:grid; grid-template-columns:220px minmax(0,1fr); gap:24px; align-items:center}
svg.donut{display:block; width:220px; height:220px; max-width:100%}
details.tablev{margin-top:12px}
details.tablev > summary{cursor:pointer; font-size:12.5px; font-weight:600; color:var(--ink-2); padding:4px 0}
details.tablev > summary:hover{color:var(--ink)}
details.tablev[open] > summary{margin-bottom:6px}
@media (max-width:640px){
  .donutrow{grid-template-columns:minmax(0,1fr)}
  svg.donut{margin:0 auto}
}
.checkrow{display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--line)}
.checkrow:last-child{border-bottom:0}
.checkrow .ic{flex:none; width:19px; height:19px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; margin-top:1px; color:#fff}
.checkrow .ic.y{background:var(--good)} .checkrow .ic.n{background:var(--bad)} .checkrow .ic.m{background:var(--warn)}
.checkrow .tx b{font-weight:600} .checkrow .tx{font-size:13.5px; color:var(--ink-2)} .checkrow .tx b{color:var(--ink)}
.results{max-height:280px; overflow-y:auto; border:1px solid var(--line); border-radius:8px; margin-top:8px}
.cres{padding:9px 11px; border-bottom:1px solid var(--line); cursor:pointer; display:flex; justify-content:space-between; gap:10px; align-items:center}
.cres:last-child{border-bottom:0}
.cres:hover{background:var(--accent-soft)}
.cres .nm{font-size:13.5px; font-weight:500}
.cres .mt{font-size:11.5px; color:var(--ink-3)}
.cres .pr{font-size:13px; font-variant-numeric:tabular-nums; color:var(--ink-2); white-space:nowrap}
.foot{margin-top:26px; padding-top:16px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-3); line-height:1.6}
.foot a{color:var(--accent)}
.hidden{display:none !important}
.banner{padding:11px 14px; border-radius:9px; font-size:13px; display:flex; gap:9px; align-items:flex-start}
.banner.info{background:var(--accent-soft); color:var(--accent)}
.banner.warn{background:var(--warn-soft); color:var(--warn)}
.spin{width:13px;height:13px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sp .7s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}

@media (max-width:900px){
  .cols{grid-template-columns:minmax(0,1fr)}
  .rail{position:static; max-height:none; order:2}
  .main{order:1}
  .verdict{grid-template-columns:1fr}
  .verdict .vmain{border-right:0; border-bottom:1px solid var(--line)}
}
@media (max-width:520px){
  .vstats{grid-template-columns:1fr 1fr}
  .row3{grid-template-columns:1fr 1fr}
  .card{padding:15px 14px}
  .pad{padding:14px}
}

/* ---------- about the developer ---------- */
.dev{
  margin-top:26px; display:grid; grid-template-columns:minmax(0,1fr) 232px; gap:0;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden;
}
.devmain{padding:20px 22px; display:flex; flex-direction:column; gap:13px; min-width:0}
.devhead{display:flex; align-items:center; gap:13px}
.monogram{
  flex:none; width:44px; height:44px; border-radius:8px; background:var(--accent); color:var(--surface);
  display:grid; place-items:center; font-family:"Archivo",sans-serif; font-weight:700; font-size:16px; letter-spacing:.06em;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .monogram{color:#0f1319}}
:root[data-theme="dark"] .monogram{color:#0f1319}
.dev h2{font-size:17px; font-weight:700}
.devrole{margin:2px 0 0; font-size:12.5px; color:var(--ink-3)}
.devbio{
  margin:0; padding-left:13px; border-left:2px solid var(--line-2);
  font-size:13.5px; line-height:1.6; color:var(--ink-2); max-width:66ch;
}
.devchips{display:flex; flex-wrap:wrap; gap:6px}
.devside{
  padding:20px 20px; background:var(--surface-2); border-left:1px solid var(--line);
  display:flex; flex-direction:column; gap:1px; min-width:0;
}
.devlabel{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); font-weight:600; margin-bottom:7px}
.devlink{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding:7px 0; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink);
  font-size:13px; font-weight:500;
}
.devlink:last-child{border-bottom:0}
.devlink:hover{color:var(--accent-2)}
.devurl{font-size:11.5px; color:var(--ink-3); font-family:"IBM Plex Mono", ui-monospace, monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.devlink:hover .devurl{color:var(--accent-2)}
@media (max-width:720px){
  .dev{grid-template-columns:minmax(0,1fr)}
  .devside{border-left:0; border-top:1px solid var(--line)}
}

/* ---------- share dialog ---------- */
.dlg{
  width:min(640px, calc(100vw - 24px)); max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px);
  padding:0; overflow:auto; border:1px solid var(--line); border-radius:12px;
  background:var(--surface); color:var(--ink); box-shadow:0 24px 60px -20px rgba(0,0,0,.45);
}
.dlg::backdrop{background:rgba(10,14,20,.55)}
.dlghead{
  display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px 18px;
  border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--surface); z-index:1;
}
.dlghead h2{font-size:17px; font-weight:700}
.dlgbody{padding:16px 18px 20px; display:flex; flex-direction:column; gap:12px}
.dlgsec{
  font-family:"Archivo",sans-serif; font-weight:600; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-2); margin-top:6px; padding-top:12px; border-top:1px solid var(--line);
}
.sharecard{display:block; width:100%; height:auto; aspect-ratio:1200/630; border-radius:9px; border:1px solid var(--line); background:var(--surface-2)}
.sharegrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:8px}
.shbtn{
  display:flex; align-items:center; gap:9px; min-height:40px; padding:7px 11px; border:1px solid var(--line-2); border-radius:9px;
  background:var(--surface); color:var(--ink); text-decoration:none; font-size:13px; font-weight:500; cursor:pointer; text-align:left;
}
.shbtn:hover{background:var(--surface-2); border-color:var(--ink-3)}
.shbtn[hidden]{display:none}
.shico{
  flex:none; width:24px; height:24px; border-radius:6px; display:grid; place-items:center;
  color:#fff; font-family:"Archivo",sans-serif; font-weight:700; font-size:12px; line-height:1;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);   /* keeps the near-black X tile visible on dark */
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .shico[style*="--accent"]{color:#0f1319}}
:root[data-theme="dark"] .shico[style*="--accent"]{color:#0f1319}
.sharemsg{
  width:100%; resize:vertical; font:inherit; font-size:12.5px; line-height:1.5; background:var(--surface-2);
  border:1px solid var(--line); border-radius:8px; padding:10px 12px; color:var(--ink-2);
}
.toast{
  position:fixed; left:50%; bottom:22px; transform:translate(-50%,10px); max-width:calc(100vw - 32px);
  background:var(--ink); color:var(--bg); padding:10px 15px; border-radius:9px; font-size:13px;
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; z-index:50; box-shadow:0 10px 30px -10px rgba(0,0,0,.5);
}
.toast.on{opacity:1; transform:translate(-50%,0)}
@media (max-width:520px){
  .dlghead, .dlgbody{padding-inline:14px}
  .sharegrid{grid-template-columns:1fr 1fr}
}

/* Print: drop the controls, let the results flow. */
@media print{
  .rail, .tabs, .topacts, .gauge, .devside, .dlg, .toast{display:none !important}
  body{background:#fff}
  .cols{display:block}
  .card, .panel, .verdict{box-shadow:none; border-color:#ccc; break-inside:avoid}
  .wrap{max-width:none; padding:0}
}