/* D223e (UX layout spec, Oct 29 2026): the report Try a change box (#sim) in the home box look. Every value is copied from
   public/static/hqdemo.css (.hqd box, .hqd-h, .hqd-co, .hqd-row, .hqd-btn, slider track/thumb) and home-v51.css (.gl font).
   Layout only: no wording, no logic, no scoring change. Menu untouched (D214w). */
.report-page .report-head.rh-top{background:transparent;border:0;border-radius:0;padding:4px 0 0;margin:8px 0 0}
.report-page section.card.sim#sim{position:relative;margin:12px 0 0;padding:14px 14px 16px;border:0;border-radius:16px;background:linear-gradient(180deg,#0E1320,#1A2340);color:#FFFFFF;box-shadow:none;font-family:Inter,ui-sans-serif,system-ui,sans-serif;overflow-wrap:anywhere;box-sizing:border-box}
@media (max-width:700px){.report-page section.card.sim#sim{margin-left:-8px;margin-right:-8px}}
.report-page #sim button,.report-page #sim select,.report-page #sim input{font:inherit}
.report-page #sim .sim-vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* head */
.report-page #sim .sim-head{display:block}
.report-page #sim .sim-head h2{margin:0;font-size:26px;line-height:30px;font-weight:700;color:#FFFFFF}
.report-page #sim .eyebrow,.report-page #sim .eyebrow.dark{color:#C9D1E3}
.report-page #sim .sim-sub{margin:6px 0 4px;color:#C9D1E3;font-weight:400;font-size:16px;line-height:22px}
.report-page #sim .muted,.report-page #sim p.muted,.report-page #sim .muted.small{color:#C9D1E3}
.report-page #sim .src-tags .src{background:rgba(255,255,255,.08);color:#FFFFFF;border:1px solid rgba(255,255,255,.35)}
/* score block: one box, not a card inside a card */
.report-page #sim .sim-score.sim-hq{background:transparent;padding:0;margin:8px 0 0;border-radius:0}
/* factor rows: home .hqd-row (label line + 48px control line = 70px) */
.report-page #sim .sim-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-top:12px;padding-top:0}
.report-page #sim .sim-item{display:grid;grid-template-columns:minmax(0,1fr) auto 48px;grid-template-rows:22px 48px;grid-template-areas:"lab park i" "ctl on i";column-gap:8px;row-gap:0;padding:0;border:0;border-radius:0;background:transparent;min-height:70px;align-items:center}
.report-page #sim .sim-item>label:not(.sim-on):not(.tog){display:contents}
.report-page #sim .sim-item>label:not(.sim-on):not(.tog)>span:first-child{grid-area:lab;display:block;min-height:0;padding:0!important;font-size:14px;line-height:18px;font-weight:400;color:#FFFFFF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.report-page #sim .sim-val{font-size:14px;font-weight:700;color:#C9D1E3}
.report-page #sim .sim-item input[type=range],.report-page #sim .sim-item select{grid-area:ctl;width:100%;margin:0}
.report-page #sim .sim-item>label.tog{grid-area:1/1/3/2;display:flex;align-items:center;gap:8px;min-height:48px;padding:0!important;border:0;font-size:14px;line-height:18px;font-weight:400;color:#FFFFFF}
.report-page #sim .sim-item select{min-height:48px;padding:0 14px;border:1px solid rgba(255,255,255,.35);border-radius:8px;background:rgba(255,255,255,.08);color:#FFFFFF;font-size:16px}
.report-page #sim .sim-item select option{color:#1A1F2B}
.report-page #sim .sim-ends{display:none}
/* sliders: exactly home (.hqd-row input[type=range], hqdemo.css) */
.report-page #sim .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:0!important;box-shadow:none!important;padding:0;border-radius:0;touch-action:pan-y;outline-offset:2px;accent-color:#1B2A47}
.report-page #sim .sim-grid input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:5px;background:transparent}
.report-page #sim .sim-grid input[type=range]::-moz-range-track{height:10px;border-radius:5px;background:rgba(255,255,255,.14)}
.report-page #sim .sim-grid input[type=range]::-moz-range-progress{height:10px;border-radius:5px;background:transparent}
.report-page #sim .sim-grid input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-9px;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);transition:transform .12s}
.report-page #sim .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)}
.report-page #sim .sim-grid input[type=range]:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}
/* Count this: compact pill (home .hqd-btn colours, .hqd-chip text) on the control line, 48px hit area */
.report-page #sim .sim-item>.sim-on{grid-area:on;position:relative!important;top:auto;right:auto;justify-self:end;display:flex!important;align-items:center;gap:6px!important;min-height:48px;min-width:48px;margin:0;padding:0 10px!important;background:transparent;border:0;border-radius:0;box-shadow:none;font-size:14px!important;line-height:18px;font-weight:700;color:#C9D1E3;cursor:pointer;isolation:isolate;white-space:nowrap}
.report-page #sim .sim-item>.sim-on::before{content:"";position:absolute;left:0;right:0;top:8px;bottom:8px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(255,255,255,.08);z-index:-1}
.report-page #sim .sim-item>.sim-on input{width:18px!important;height:18px!important;margin:0;accent-color:#3A5BFF}
.report-page #sim .sim-on:active{background:transparent}
/* ⓘ: small icon at the right end of the label line, 48px wide hit area over the whole 70px row */
.report-page #sim .sim-item>button.term{grid-area:i;align-self:stretch;justify-self:stretch;display:flex;align-items:flex-start;justify-content:center;width:48px;min-width:48px;min-height:48px;padding:0;margin:0;border:0;background:none;color:#FFFFFF;font-size:18px;line-height:22px;font-weight:400;text-decoration:none}
.report-page #sim .sim-item>button.term:focus-visible{outline:2px solid #FFFFFF;outline-offset:-2px}
/* note + term text: collapsed until the row's ⓘ is opened */
.report-page #sim .sim-item>.sim-note,.report-page #sim .sim-item>.term-x{grid-column:1/-1;margin:0 0 8px}
.report-page #sim .sim-item>.sim-note{display:none;color:#C9D1E3;font-size:14px;line-height:18px}
.report-page #sim .sim-item.open>.sim-note{display:block}
.report-page #sim .sim-item>.term-x{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.35);color:#FFFFFF;font-size:14px;line-height:18px;padding:8px 10px;border-radius:8px}
.report-page #sim .sim-item>.term-x[hidden]{display:none}
.report-page #sim .sim-note .src.you{background:transparent;color:#C9D1E3;border:1px solid rgba(255,255,255,.35)}
/* not-counted rows: home row, greyed slider, the parked line small and muted on the label line (row stays 70px) */
.report-page #sim .sim-item.off{background:transparent}
.report-page #sim .sim-item>.sim-parked{grid-area:park;display:none;font-size:12px;line-height:16px;font-weight:400;color:#C9D1E3;white-space:nowrap}
.report-page #sim .sim-item.off>.sim-parked{display:block}
.report-page #sim .sim-item.off>label:not(.sim-on),.report-page #sim .sim-item.off>label:not(.sim-on)>span:first-child,.report-page #sim .sim-item.off b{color:#C9D1E3;opacity:1;filter:none}
.report-page #sim .sim-item.off select:disabled{background:rgba(255,255,255,.04);color:#C9D1E3}
/* slider notes */
.report-page #sim .uw-h{color:#FFFFFF;margin:12px 0 2px;font-size:16px}
.report-page #sim .uw-list li.muted{color:#C9D1E3;border-color:rgba(255,255,255,.35)}
/* one Start over at the bottom: home secondary button (.hqd-btn on the dark box) */
.report-page #sim .sim-foot{margin-top:12px;text-align:center}
.report-page #sim .sim-foot #simReset{display:block;width:100%;min-width:48px;min-height:48px;padding:0 14px;border:1px solid rgba(255,255,255,.35)!important;border-radius:8px;background:rgba(255,255,255,.08)!important;color:#FFFFFF!important;font-weight:700;font-size:16px;box-shadow:none!important;cursor:pointer}
@media print{.report-page section.card.sim#sim{background:#FFFFFF;color:#1A1F2B}#sim *{color:#1A1F2B!important}}
/* home .hqd::before overlay and .hqd-grid lines (hqdemo.css rev 6), copied; static here (no parallax: no game feel) */
.report-page section.card.sim#sim{isolation:isolate;overflow:hidden}
.report-page section.card.sim#sim::before{content:"";position:absolute;inset:0;border-radius:20px;background:radial-gradient(120% 60% at 50% 0,rgba(58,91,255,.12),transparent 70%);pointer-events:none;z-index:-1}
.report-page section.card.sim#sim::after{content:"";position:absolute;inset:-8px;z-index:-1;pointer-events:none;opacity:.07;background-image:linear-gradient(#FFFFFF 1px,transparent 1px),linear-gradient(90deg,#FFFFFF 1px,transparent 1px);background-size:32px 32px}
/* computed-style match with home (cmp.js): heading .hqd-h, number .hqd-num, row line-height */
.report-page #sim .sim-head h2{font-size:28px;line-height:33.6px;font-weight:600}
.report-page #sim .sim-hq .gauge b{line-height:40px}
.report-page #sim .sim-item{line-height:24px}
.report-page #sim .eyebrow,.report-page #sim .eyebrow.dark{background:transparent;border-color:rgba(255,255,255,.35);color:#C9D1E3}
.report-page #sim .sim-item select{-webkit-appearance:none;appearance:none;background-color:rgba(255,255,255,.08);color:#FFFFFF;background-image:none}
/* D223e trim (UX): title line + one ⓘ (48px); header text and slider notes behind it */
.report-page #sim .sim-title{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px}
.report-page #sim .sim-about{flex:none;width:48px;height:48px;min-width:48px;padding:0;margin:0 -8px 0 0;border:0;background:none;color:#FFFFFF;font-size:18px;line-height:22px;cursor:pointer}
.report-page #sim .sim-about:focus-visible{outline:2px solid #FFFFFF;outline-offset:-2px}
.report-page #sim .sim-about-x[hidden]{display:none}
.report-page #sim #simAbout{margin-top:4px}
/* D223e trim 5: telematics/cameras checkboxes get a 48px hit area; the drawn box stays 24px */
.report-page #sim .sim-item>label.tog input[type=checkbox]{-webkit-appearance:none;appearance:none;width:48px!important;height:48px!important;margin:0 -12px!important;flex:none;cursor:pointer;border:0;border-radius:0;background:no-repeat center/24px 24px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1' y='1' width='22' height='22' rx='4' fill='%23FFFFFF' stroke='%23C9D1E3' stroke-width='2'/%3E%3C/svg%3E")}
.report-page #sim .sim-item>label.tog input[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1' y='1' width='22' height='22' rx='4' fill='%233A5BFF' stroke='%233A5BFF' stroke-width='2'/%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23FFFFFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.report-page #sim .sim-item>label.tog input[type=checkbox]:focus-visible{outline:2px solid #FFFFFF;outline-offset:-10px}
.report-page #sim .sim-item>label.tog input[type=checkbox]:disabled{opacity:.5}
/* UX spec Nov 1 4:13 PM (ELD row, layout only): flex row; the 48px tap box stays 48px (flex 0 0 48px, no negative margins, so it sits inside
   the card); the tap outline (styles.css input:focus, 2px) is inset (offset -2px) and the label text starts 4px past it (2px flex gap).
   Label flex 1 + min-width 0, normal word wrap. Keyboard ring (:focus-visible) unchanged. */
.report-page #sim .sim-item>label.tog{display:flex;flex-direction:row;align-items:center;gap:4px}
.report-page #sim .sim-item>label.tog input[type=checkbox]{flex:0 0 48px;margin:0!important}
.report-page #sim .sim-item>label.tog>span{flex:1 1 auto;min-width:0;white-space:normal;overflow-wrap:normal;word-break:normal}
.report-page #sim .sim-item>label.tog input[type=checkbox]:focus:not(:focus-visible){outline-offset:-2px}
/* Every checkbox row (UX go Nov 1 4:26 PM, as the ELD row): label line gets the full width beside the ⓘ; the Count this pill sits under it at every width (as at 320), so the name fits 2 lines at 390 */
.report-page #sim .sim-item:has(>label.tog){grid-template-columns:minmax(0,1fr) 48px;grid-template-areas:"lab i" "on on" "park park"}
.report-page #sim .sim-item:has(>label.tog)>.sim-on{justify-self:start}
/* UX 11:01: eyebrow always visible, one small line under the title, no wrap at 320 */
.report-page #sim .eyebrow.sim-eb{display:block;margin:0;padding:0;border:0;font-size:12px;line-height:16px;letter-spacing:0;text-transform:none;white-space:nowrap;overflow:visible;color:#C9D1E3}
/* Phone Check 9c543ad FAIL (row layout): as home, the label has its own line and the slider gets the full row width under it.
   Label line = row name (wraps, never cut off) + Count this pill (48px hit) + ⓘ (48px); checkbox rows are the label line only. */
.report-page #sim .sim-item{grid-template-columns:minmax(0,1fr) auto 48px;grid-template-rows:auto auto;grid-template-areas:"lab on i" "ctl ctl ctl" "park park park";min-height:0;align-items:center}
.report-page #sim .sim-item>label:not(.sim-on):not(.tog)>span:first-child{white-space:normal;overflow:visible;text-overflow:clip;align-self:center}
.report-page #sim .sim-item>label.tog{grid-area:lab;min-height:48px;white-space:normal}
.report-page #sim .sim-item>label.tog>span{white-space:normal;overflow:visible}
.report-page #sim .sim-item>.sim-on{grid-area:on;align-self:center}
.report-page #sim .sim-item>button.term{grid-area:i;align-self:center;height:48px;align-items:center}
.report-page #sim .sim-item input[type=range],.report-page #sim .sim-item select{grid-area:ctl;width:100%}
.report-page #sim .sim-item>.sim-parked{grid-area:park;white-space:normal;margin:0 0 4px}
/* Phone Check r2: the row name gets the full line (only the ⓘ beside it), so nothing is squeezed or cut; Count this sits below it */
.report-page #sim .sim-item{grid-template-columns:minmax(0,1fr) 48px;grid-template-areas:"lab i" "on on" "ctl ctl" "park park"}
.report-page #sim .sim-item>.sim-on{justify-self:start;margin-left:-0px}
/* 360px and wider there is room for the pill on the label line; under 360 it stays on its own line under the name */
@media (min-width:360px){.report-page #sim .sim-item{grid-template-columns:minmax(0,1fr) auto 48px;grid-template-areas:"lab on i" "ctl ctl ctl" "park park park"}}
@media (max-width:359.98px){.report-page #sim .eyebrow.sim-eb{font-size:11.5px}}
/* QA (WebKit/iPhone): WebKit drew the native light select with our white text (~1.1:1). Solid light select with dark text everywhere
   (home light button colours: .hqd-all #FFFFFF / #0F1B33 / #DDE2EA). Colours only, no layout change. */
.report-page #sim .sim-item select,.report-page #sim .sim-item select:disabled{background-color:#FFFFFF;color:#0F1B33;border-color:#DDE2EA;-webkit-text-fill-color:#0F1B33}
.report-page #sim .sim-item.off select:disabled{background-color:#FFFFFF;color:#0F1B33;opacity:1}
/* D229: pinned compact HQ Score bar (sim-d229.js). Bottom of the screen, under the menu's layer (nav z-index 10), no taps.
   Phone Check ede8ad6: 40px bar (+1px line); #sim gets bottom room so its last control can scroll clear of the bar;
   sim-d229.js sets html scroll-padding-bottom while the bar is on so focused controls scroll clear. Text >= 14:1 on #0E1320. */
.sim-pin{position:fixed;left:0;right:0;bottom:0;z-index:9;display:flex;align-items:center;gap:8px;height:40px;padding:0 16px env(safe-area-inset-bottom,0px);box-sizing:content-box;background:#0E1320;border-top:1px solid rgba(255,255,255,.35);color:#FFFFFF;font-family:Inter,ui-sans-serif,system-ui,sans-serif;pointer-events:none;transform:translateY(110%);visibility:hidden;transition:transform .15s,visibility 0s .15s}
.sim-pin.on{transform:none;visibility:visible;transition:transform .15s}
.sim-pin svg{width:52px;height:30px;flex:none}
.sim-pin-cap{font-size:14px;line-height:18px;color:#DDE2EA;white-space:nowrap}
.sim-pin-n{margin-left:auto;display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.sim-pin-n b{font-size:24px;line-height:28px;font-weight:700;color:#FFFFFF}
.sim-pin-n span{font-size:14px;color:#DDE2EA}
.report-page section.card.sim#sim{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
html.sim-pin-on{scroll-padding-bottom:calc(57px + env(safe-area-inset-bottom,0px))}
@media (max-height:449.98px){.sim-pin{display:none}}
@media (prefers-reduced-motion:reduce){.sim-pin,.sim-pin.on{transition:none}}
@media print{.sim-pin{display:none}.report-page section.card.sim#sim{padding-bottom:16px}}
/* D231 (UX): decorative select chevron, CSS only. 12px #0F1B33 arrow centred on the right as a background image (never catches
   taps, the whole box stays the select); padding-right 40px so the text never runs under it. White bg / #0F1B33 text kept. */
.report-page #sim .sim-item select,.report-page #sim .sim-item select:disabled{-webkit-appearance:none;appearance:none;min-height:48px;padding-right:40px;background-color:#FFFFFF;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 4l4.5 4.5L10.5 4' fill='none' stroke='%230F1B33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px 12px;text-overflow:ellipsis}
/* D231b (UX): 'Count this' pill ring >= 4.5:1 against the box, on and off. Border colour only (same 1px, same size). */
.report-page #sim .sim-item>.sim-on::before,.report-page #sim .sim-item.off>.sim-on::before{border-color:#A3ADC2}
/* UX layout fix (Oct 30): telematics provider dropdown. The wrapper draws the box (same colours as the selects above) and the focus ring;
   the aria-hidden text wraps (16px, line-height 1.3, 40px kept clear for the chevron); the real select covers the box at opacity 0. */
.report-page #sim .sim-item .sim-prov-box{position:relative;grid-area:auto;display:block;width:100%;min-height:48px;box-sizing:border-box;padding:12px 40px 12px 12px;border:1px solid #DDE2EA;border-radius:8px;background-color:#FFFFFF;color:#0F1B33;font-size:16px;line-height:1.3;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 4l4.5 4.5L10.5 4' fill='none' stroke='%230F1B33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px 12px}
.report-page #sim .sim-item .sim-prov-box:focus-within{outline:2px solid #FFFFFF;outline-offset:2px}
.report-page #sim .sim-item .sim-prov-txt{display:block;white-space:normal;overflow-wrap:anywhere;line-height:1.3;font-size:16px;color:#0F1B33}
.report-page #sim .sim-item .sim-prov-box select#sTelProv{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;opacity:0;cursor:pointer;font-size:16px;border:0}