/* 0.2.3 D219i/j (Zach 8:03/8:06/8:07 AM): the report Try a change box in the live 0.2.1 home demo look. Values copied from
   public/static/hqdemo.css (dial, ends, number, sliders) per UX /workspace/ux-proto/d219/spec.md section 1. Layout only: no wording, no logic. */
.sim .sim-score.sim-hq{position:static;display:flex;flex-direction:column;align-items:center;gap:6px;margin:12px 0 0;padding:14px;border:0;border-radius:16px;background:linear-gradient(180deg,#0E1320,#1A2340);background-color:#0B1F3A;color:#E2E8F0;box-shadow:none;text-align:center}
.sim .sim-hq .sim-gw{display:flex;flex-direction:column;align-items:center;width:100%;gap:0}
.sim .sim-hq .sim-cap{color:#E2E8F0;font-size:14px;font-weight:700}
/* 0.2.3 Compliance (QA cbb4bec item 2): made-up tag right under the ring (ring box bottom = lowest drawn arc pixel, to tag top 6px; QA r2 margin-top:-5px), nothing between; Lower/Higher move below it.
   Home's beside-the-dial spot does not fit here: the report panel is 210px wide at 320 (dial is 220px), 280px at 390. */
.sim .sim-hq .sim-dw{display:flex;flex-direction:column;align-items:center;width:100%;min-height:126px}
.sim .sim-hq svg.sim-dial{width:220px;height:126px;display:block;flex:none}
.sim-dt,.sim-df,.sim-dr{fill:none;stroke-width:12;stroke-linecap:butt}
.sim-dt{stroke:#64748B}
.sim-df{stroke:#60A5FA;stroke-dasharray:100 100}
.sim-dr{stroke:#F87171;stroke-dasharray:20 100;stroke-dashoffset:-80}
.sim-tk{stroke:#E2E8F0;stroke-width:2;stroke-linecap:round}
.sim-nd{stroke:#FFFFFF;stroke-width:4;stroke-linecap:round}
.sim-nc{fill:#FFFFFF}
@media (prefers-reduced-motion:no-preference){.sim-df{transition:stroke-dashoffset .3s ease}.sim-nd{transition:transform .3s ease}}
.sim .sim-hq .sim-dends{display:flex;justify-content:space-between;width:250px;max-width:100%;margin:0;font-size:12px;line-height:16px;color:#E2E8F0}
.sim .sim-hq .sim-gr{display:flex;flex-direction:column;align-items:center;gap:0;width:100%}
.sim .sim-hq .gauge,.sim .sim-hq .gauge.neutral{width:auto;height:auto;border:0;border-radius:0;background:none;display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:6px;margin:6px 0 0;color:#E2E8F0}
.sim .sim-hq .gauge b,.sim .sim-hq .gauge.neutral b{font-size:40px;line-height:44px;font-weight:800;color:#FFFFFF;font-variant-numeric:tabular-nums}
.sim .sim-hq .gauge span{font-size:14px;color:#E2E8F0}
.sim .sim-hq .gauge small{display:block;flex-basis:100%;font-size:12px;color:#E2E8F0}
.sim .sim-hq .sim-madeup{width:100%;max-width:250px;margin:-5px 0 0;transform:none;text-align:center;font-size:14px;line-height:18px;font-weight:400;color:#E2E8F0} /* D211 Compliance 3: same size/colour as the '(Not a safety rating.)' line */
.sim .sim-hq .sim-est,.sim .sim-hq .sim-real,.sim .sim-hq .whatif-hyp{display:block;width:100%;max-width:none;margin:4px 0 0;text-align:center;font-size:14px;line-height:18px;color:#E2E8F0}
/* QA cbb4bec item 1: [hidden] wins over the display rules above */
.sim .sim-hq [hidden]{display:none}
.sim .sim-hq .sim-madeup[hidden]{display:block;visibility:hidden} /* as home .hqd-madeup[hidden]: space kept, no shift */
.sim .sim-hq .whatif-hyp a,.sim .sim-hq .whatif-hyp .fp-ref{color:#E2E8F0}
.sim .sim-hq>div:last-child{display:flex;flex-direction:column;align-items:center;width:100%;gap:6px}
/* '+N from start': same declarations as .qp-delta (0.2.2 question page, public/static/qpage.css 224b5d4) */
.sim .sim-hq .delta,.sim .sim-hq .delta.up,.sim .sim-hq .delta.down{display:block;color:#E2E8F0;font-size:12px;margin-top:2px;min-width:0;min-height:0;font-weight:400}
.sim .sim-hq #simReset{width:100%;min-height:48px;background:transparent!important;color:#FFFFFF!important;border:1px solid #FFFFFF!important;border-radius:10px;box-shadow:none!important}
/* sliders: home look (hqdemo.css .hqd-row), on white cards; fill painted on the input by simulator.js simFill() */
.sim-grid input[type=range]{-webkit-appearance:none;appearance:none;height:48px!important;min-height:48px;background-color:transparent;background-repeat:no-repeat;background-position:0 50%;background-size:100% 10px;border-radius:5px;touch-action:pan-y;border:0!important;box-shadow:none!important;padding:0;outline-offset:2px}
.sim-grid input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:5px;background:transparent}
.sim-grid input[type=range]::-moz-range-track{height:10px;border-radius:5px;background:rgba(15,31,58,.14)}
.sim-grid input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-9px;border:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFFFFF,#C9D1E3 60%,#8A94AD);box-shadow:0 2px 4px rgba(0,0,0,.5),inset 0 -2px 3px rgba(0,0,0,.25)}
.sim-grid input[type=range]::-moz-range-thumb{width:28px;height:28px;border:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFFFFF,#C9D1E3 60%,#8A94AD);box-shadow:0 2px 4px rgba(0,0,0,.5)}
.sim-grid input[type=range]:disabled::-webkit-slider-runnable-track{background:transparent}
.sim-grid input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle at 35% 30%,#FFFFFF,#C9D1E3 60%,#8A94AD)}
.sim-grid input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle at 35% 30%,#FFFFFF,#C9D1E3 60%,#8A94AD)}
.sim-grid input[type=range]:focus-visible{outline:2px solid #1A2340;outline-offset:2px}