/* HPV Community Simulation — scoped under .hpv-sim */
.hpv-sim{--surface-1:#fcfcfb; --page:#f4f4f1; --text-primary:#0b0b0b; --text-secondary:#52514e;
    --muted:#898781; --grid:#e1e0d9; --baseline:#c3c2b7; --border:rgba(11,11,11,0.10);
    --good:#0ca30c; --warning:#fab219; --serious:#ec835a; --critical:#d03b3b;
    --s-blue:#2a78d6; --s-orange:#eb6834; --s-aqua:#1baf7a; --s-yellow:#eda100;
    --s-magenta:#e87ba4; --s-green:#008300; --s-violet:#4a3aa7; --s-red:#e34948;
    --radius:12px;
    font-size:16px;}
.hpv-sim, .hpv-sim *{box-sizing:border-box;}
.hpv-sim{background:var(--page); color:var(--text-primary);
    font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
    line-height:1.45;}
.hpv-sim .wrap{max-width:1180px;margin:0 auto;padding:20px 20px 60px;}
.hpv-sim header.top{padding:6px 0 18px;border-bottom:1px solid var(--border);margin-bottom:20px;}
.hpv-sim header.top h1{font-size:26.4px;margin:0 0 6px;}
.hpv-sim header.top p{margin:4px 0;color:var(--text-secondary);max-width:860px;}
.hpv-sim .badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.hpv-sim .badge{font-size:12.48px;background:var(--surface-1);border:1px solid var(--border);border-radius:999px;padding:4px 10px;color:var(--text-secondary);}
.hpv-sim .panel{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;margin-bottom:18px;}
.hpv-sim .panel h2{font-size:16.8px;margin:0 0 4px;}
.hpv-sim .panel .sub{color:var(--text-secondary);font-size:13.6px;margin:0 0 14px;}
.hpv-sim .grid-2col{display:grid;grid-template-columns:340px 1fr;gap:18px;align-items:start;}
@media (max-width:880px){.hpv-sim .grid-2col{grid-template-columns:1fr;}}
/* sliders */
.hpv-sim .slider-group{margin-bottom:14px;}
.hpv-sim .slider-group:last-child{margin-bottom:0;}
.hpv-sim .slider-label{display:flex;justify-content:space-between;align-items:baseline;font-size:13.76px;font-weight:600;margin-bottom:2px;}
.hpv-sim .slider-label .val{font-variant-numeric:tabular-nums;color:var(--s-blue);font-weight:700;}
.hpv-sim .slider-note{font-size:11.84px;color:var(--text-secondary);margin:0 0 6px;}
.hpv-sim .slider-track-wrap{position:relative;padding-top:6px;}
.hpv-sim input[type=range]{width:100%;accent-color:var(--s-blue);height:20px;position:relative;z-index:2;background:transparent;}
.hpv-sim .today-tick-line{position:absolute;top:6px;width:1px;height:18px;background:var(--muted);pointer-events:none;z-index:1;}
.hpv-sim .target-tick-line{position:absolute;top:4px;width:2px;height:22px;background:#e0a300;margin-left:-1px;pointer-events:none;z-index:1;border-radius:1px;}
.hpv-sim .marker-row{position:relative;height:32px;margin-top:0;}
.hpv-sim .marker{position:absolute;top:2px;font-size:10.4px;color:var(--muted);white-space:nowrap;}
.hpv-sim .marker.who-target{top:16px;color:#8a5b00;font-weight:700;}
/* run controls */
.hpv-sim .run-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--border);}
.hpv-sim button{font:inherit;cursor:pointer;border-radius:8px;border:1px solid var(--border);background:var(--surface-1);padding:8px 14px;font-size:13.6px;font-weight:600;color:var(--text-primary);}
.hpv-sim button.primary{background:var(--s-blue);border-color:var(--s-blue);color:#fff;}
.hpv-sim button.primary:hover{background:#1c5cab;}
.hpv-sim button:hover{background:var(--page);}
.hpv-sim button:disabled{opacity:.45;cursor:default;}
.hpv-sim .year-readout{font-size:15.2px;font-weight:700;margin-left:auto;font-variant-numeric:tabular-nums;}
.hpv-sim .speed-row{display:flex;align-items:center;gap:6px;font-size:12.48px;color:var(--text-secondary);}
.hpv-sim .speed-row input{width:90px;}
.hpv-sim .elim-banner{margin-top:12px;padding:10px 12px;border-radius:8px;font-size:13.6px;display:none;}
.hpv-sim .elim-banner.show{display:block;}
.hpv-sim .elim-banner.cervical{background:#eafbea;border:1px solid var(--good);color:#0a5c0a;}
.hpv-sim .elim-banner.deaths{background:#eaf3fb;border:1px solid var(--s-blue);color:#124d84;}
/* dot grid */
.hpv-sim .dotgrid-wrap{display:flex;flex-direction:column;align-items:center;}
.hpv-sim canvas#dotgrid{width:100%;max-width:760px;height:auto;background:var(--surface-1);border-radius:8px;}
.hpv-sim .legend{display:flex;flex-wrap:wrap;gap:10px 16px;justify-content:center;margin-top:10px;font-size:12.16px;color:var(--text-secondary);}
.hpv-sim .legend .item{display:flex;align-items:center;gap:5px;}
.hpv-sim .legend .swatch{width:10px;height:10px;border-radius:50%;display:inline-block;}
/* WHO dashboard */
.hpv-sim .who-quote{background:#f1f6fb;border:1px solid #cfe0f2;border-radius:8px;padding:12px 14px;font-size:13.12px;color:#124d84;margin-bottom:14px;}
.hpv-sim .who-quote b{color:#0b3a63;}
.hpv-sim .who-quote-lg{margin-top:16px;margin-bottom:0;padding:22px 24px;font-size:18.24px;line-height:1.7;}
.hpv-sim .who-quote-lg h3{margin:0 0 12px;font-size:19.52px;color:#0b3a63;}
.hpv-sim .who-quote-lg p{margin:0 0 10px;}
.hpv-sim .who-quote-lg p:last-child{margin-bottom:0;}
.hpv-sim .who-quote-lg ul{margin:0 0 10px;padding-left:24px;}
.hpv-sim .who-quote-lg li{margin-bottom:8px;}
.hpv-sim .elim-gauge-wrap{margin-top:14px;border-top:1px solid var(--border);padding-top:14px;}
/* charts */
.hpv-sim .chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:880px){.hpv-sim .chart-grid{grid-template-columns:1fr;}}
.hpv-sim .chart-card{}
.hpv-sim .chart-card h3{font-size:14.08px;margin:0 0 2px;}
.hpv-sim .chart-card .note{font-size:11.52px;color:var(--text-secondary);margin:0 0 8px;}
.hpv-sim canvas.chart{width:100%;height:220px;}
.hpv-sim .chart-legend{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:11.52px;color:var(--text-secondary);margin-top:4px;}
.hpv-sim .chart-legend .item{display:flex;align-items:center;gap:5px;}
.hpv-sim .chart-legend .swatch{width:16px;height:3px;border-radius:2px;display:inline-block;}
/* cost calculator */
.hpv-sim .cost-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px;}
@media (max-width:760px){.hpv-sim .cost-grid{grid-template-columns:repeat(2,1fr);}}
.hpv-sim .stat-tile{border:1px solid var(--border);border-radius:10px;padding:10px 12px;}
.hpv-sim .stat-tile .label{font-size:11.52px;color:var(--text-secondary);margin-bottom:4px;}
.hpv-sim .stat-tile .value{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;}
.hpv-sim .stat-tile .sub{font-size:11.2px;color:var(--muted);margin-top:2px;}
.hpv-sim .stat-tile .fraction{margin:2px 0 0;}
.hpv-sim .stat-tile .frac-row{display:flex;align-items:baseline;gap:6px;}
.hpv-sim .stat-tile .num, .hpv-sim .stat-tile .den{font-size:18.4px;font-weight:700;font-variant-numeric:tabular-nums;}
.hpv-sim .stat-tile .den{color:var(--text-secondary);}
.hpv-sim .stat-tile .frac-tag{font-size:10.88px;color:var(--muted);}
.hpv-sim .stat-tile .frac-bar{border-top:2px solid var(--border);margin:3px 0;}
.hpv-sim details.data-sources{font-size:13.28px;}
.hpv-sim details.data-sources summary{cursor:pointer;font-weight:700;font-size:15.2px;padding:4px 0;}
.hpv-sim details.data-sources h4{margin:14px 0 4px;font-size:13.6px;}
.hpv-sim details.data-sources ul{margin:4px 0 10px;padding-left:20px;}
.hpv-sim details.data-sources li{margin-bottom:4px;color:var(--text-secondary);}
.hpv-sim details.data-sources a{color:var(--s-blue);}
.hpv-sim details.data-sources .assumption{background:#fff8e8;border:1px solid #f0dfa8;border-radius:8px;padding:10px 12px;margin:10px 0;font-size:12.48px;}
.hpv-sim footer.foot{text-align:center;color:var(--muted);font-size:12px;margin-top:20px;}
.hpv-sim .tabbar{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap;}
.hpv-sim .tabbar button{padding:6px 12px;font-size:12.48px;}
.hpv-sim .tabbar button.active{background:var(--text-primary);color:#fff;border-color:var(--text-primary);}

/* ---- Theme-isolation guards (WordPress themes style these elements globally) ---- */
.hpv-sim{font-size:16px;line-height:1.45;text-align:left;}
.hpv-sim h1,.hpv-sim h2,.hpv-sim h3,.hpv-sim h4{font-family:inherit;color:inherit;line-height:1.25;text-transform:none;letter-spacing:normal;font-weight:700;padding:0;border:0;}
.hpv-sim p,.hpv-sim ul,.hpv-sim li{font-family:inherit;letter-spacing:normal;}
.hpv-sim button{text-transform:none;letter-spacing:normal;line-height:normal;box-shadow:none;text-shadow:none;min-height:0;width:auto;}

/* ---- Sliders: fully custom-drawn so theme range-input resets can't hide the track ----
   Uses the #hpv-sim ID for specificity; width is left to the .hpv-sim rules above
   so the Speed slider keeps its 90px width. --hpv-fill is set by hpv-range-fill.js. */
#hpv-sim input[type=range]{-webkit-appearance:none;appearance:none;height:20px;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;outline:none;cursor:pointer;--hpv-fill:50%;}
#hpv-sim input[type=range]::-webkit-slider-runnable-track{height:4px;border:0;border-radius:2px;box-shadow:none;background:linear-gradient(to right,var(--s-blue) 0,var(--s-blue) var(--hpv-fill),#c3c2b7 var(--hpv-fill),#c3c2b7 100%);}
#hpv-sim input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;background:#fff;border:2px solid var(--s-blue);box-shadow:0 1px 3px rgba(0,0,0,.25);}
#hpv-sim input[type=range]::-moz-range-track{height:4px;border:0;border-radius:2px;background:#c3c2b7;}
#hpv-sim input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--s-blue);}
#hpv-sim input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--s-blue);box-shadow:0 1px 3px rgba(0,0,0,.25);}
#hpv-sim input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--s-blue);outline-offset:2px;}
#hpv-sim input[type=range]:focus-visible::-moz-range-thumb{outline:2px solid var(--s-blue);outline-offset:2px;}
.hpv-sim canvas{max-width:100%;display:block;}
.hpv-sim a{text-decoration:underline;}