/* Why Humans: styles for every JS-built component (assets/js/*). Uses ONLY the design tokens defined in main.css. */

/* ---------- shared bits ---------- */
.wh-js [hidden], .wh-lab-hidden { display: none !important; }
[data-wh-reveal="pending"] { opacity: 0; }
[data-wh-reveal="done"] { opacity: 1; transition: opacity 150ms linear; }
.wh-note { margin: var(--wh-s3) 0; padding: var(--wh-s3) var(--wh-s4); border-left: 4px solid var(--wh-sky-deep); background: var(--wh-sky); color: var(--wh-ink); border-radius: 0 var(--wh-r) var(--wh-r) 0; }
.wh-note--error { border-color: var(--wh-coral-dark); background: var(--wh-white); }
.wh-note--strong { border-color: var(--wh-violet-dark); background: var(--wh-white); }
.wh-empty { padding: var(--wh-s4); border: 2px dashed var(--wh-ink-muted); border-radius: var(--wh-r); color: var(--wh-ink); background: var(--wh-white); }
.wh-badge { display: inline-block; padding: 2px var(--wh-s2); border: 2px solid var(--wh-ink); border-radius: 999px; background: var(--wh-white); color: var(--wh-ink); font-size: .875rem; font-weight: 600; line-height: 1.4; }
.wh-badge--well-established, .wh-badge--measured { border-style: solid; }
.wh-badge--approximate, .wh-badge--estimate { border-style: dashed; }
.wh-badge--debated, .wh-badge--mixed { border-style: dotted; border-width: 3px; }
.wh-chip[aria-pressed="true"] { background: var(--wh-ink); color: var(--wh-bg); border-color: var(--wh-ink); }
.wh-chip--static { display: inline-block; padding: 2px var(--wh-s2); border: 1px solid var(--wh-ink-muted); border-radius: 999px; font-size: .8125rem; }
.wh-select, .wh-lab select, [data-wh] select, [data-wh] input[type="text"], [data-wh] input[type="search"], [data-wh] input[type="email"], [data-wh] textarea, .wh-search input[type="search"], form[data-wh-form] input:not([type="checkbox"]):not([type="radio"]), form[data-wh-form] textarea {
  min-height: 44px; padding: var(--wh-s2) var(--wh-s3); border: 2px solid var(--wh-ink-muted); border-radius: var(--wh-r); background: var(--wh-white); color: var(--wh-ink); font: inherit; max-width: 100%; box-sizing: border-box;
}
[data-wh] textarea, form[data-wh-form] textarea { min-height: 7rem; width: 100%; }
[data-wh] input[type="text"], [data-wh] input[type="search"], form[data-wh-form] input:not([type="checkbox"]):not([type="radio"]) { width: min(100%, 32rem); }
[data-wh] input[type="checkbox"], [data-wh] input[type="radio"], form[data-wh-form] input[type="checkbox"] { width: 1.5rem; height: 1.5rem; accent-color: var(--wh-violet-dark); vertical-align: middle; }
[data-wh] button, [data-wh-save], form[data-wh-form] button { min-height: 44px; min-width: 44px; cursor: pointer; }
[data-wh] button:disabled, form[data-wh-form] button:disabled { cursor: not-allowed; opacity: .6; }
.wh-btn--danger { background: var(--wh-coral-dark); color: var(--wh-white); border-color: var(--wh-coral-dark); }
[data-wh] :focus-visible, [data-wh-save]:focus-visible, .wh-search :focus-visible, form[data-wh-form] :focus-visible, [data-wh-disclosure]:focus-visible, [data-wh-menu-toggle]:focus-visible, [data-wh-copy-link]:focus-visible, [data-wh-share]:focus-visible, .wh-share-links a:focus-visible, .wh-video-embed :focus-visible {
  outline: 3px solid var(--wh-violet-dark); outline-offset: 2px;
}
.wh-section--dark [data-wh] :focus-visible, .wh-section--dark .wh-video-embed :focus-visible { outline-color: var(--wh-gold); }
.wh-filter__count, .wh-tl__status { color: var(--wh-ink-soft); font-weight: 600; }
.wh-field { margin: var(--wh-s3) 0; }
.wh-field label, form[data-wh-form] label { display: block; font-weight: 600; margin-bottom: var(--wh-s1); }
form[data-wh-form] label:has(> input[type="checkbox"]) { display: flex; gap: var(--wh-s2); align-items: flex-start; font-weight: 400; }
.wh-field-error { margin: var(--wh-s1) 0 0; color: var(--wh-coral-dark); font-weight: 600; }
.wh-field-error::before { content: "Error: "; }
[aria-invalid="true"] { border-color: var(--wh-coral-dark) !important; }
.wh-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- save buttons, saved list ---------- */
[data-wh-save][aria-pressed="true"] { background: var(--wh-ink); color: var(--wh-bg); }
.wh-save-status, .wh-share-status { margin-inline-start: var(--wh-s2); font-size: .9375rem; color: var(--wh-ink-soft); }
.wh-saved__list { list-style: none; margin: var(--wh-s4) 0; padding: 0; display: grid; gap: var(--wh-s2); }
.wh-saved__item { display: flex; flex-wrap: wrap; gap: var(--wh-s2); align-items: center; padding: var(--wh-s3); background: var(--wh-white); border: 1px solid var(--wh-ink-muted); border-radius: var(--wh-r); }
.wh-saved__item[data-topic] { border-inline-start: 6px solid var(--t-solid, var(--wh-ink-muted)); }
.wh-confirm { padding: var(--wh-s3); border: 2px solid var(--wh-coral-dark); border-radius: var(--wh-r); background: var(--wh-white); }

/* ---------- share ---------- */
.wh-share-links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--wh-s2); padding: 0; margin: var(--wh-s2) 0; }
.wh-share-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--wh-s3); border: 2px solid var(--wh-ink); border-radius: 999px; color: var(--wh-ink); background: var(--wh-white); text-decoration: none; font-weight: 600; }

/* ---------- search dialog ---------- */
dialog.wh-search { width: min(46rem, calc(100vw - 2 * var(--wh-s4))); max-height: 85vh; overflow: auto; margin: var(--wh-s6) auto auto; padding: var(--wh-s5); border: 0; border-radius: var(--wh-r-lg); background: var(--wh-bg); color: var(--wh-ink); box-shadow: var(--wh-shadow); }
dialog.wh-search:not([open]) { display: none; }
dialog.wh-search[open]:not(:modal) { position: fixed; inset: var(--wh-s6) 0 auto; z-index: 1000; }
dialog.wh-search::backdrop { background: rgba(21, 34, 56, .72); }
.wh-search__close { float: inline-end; }
.wh-search__form { display: flex; flex-wrap: wrap; gap: var(--wh-s2); align-items: end; clear: both; }
.wh-search__label { flex-basis: 100%; font-weight: 700; }
.wh-search__form input[type="search"] { flex: 1 1 14rem; }
.wh-search__hint { color: var(--wh-ink-soft); font-size: .9375rem; }
.wh-search__group-title { font-size: 1rem; margin: var(--wh-s4) 0 var(--wh-s1); color: var(--wh-ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.wh-search__group ul { list-style: none; margin: 0; padding: 0; }
.wh-search__link { display: block; padding: var(--wh-s2) var(--wh-s3); min-height: 44px; border-radius: var(--wh-r); color: var(--wh-ink); text-decoration: none; }
.wh-search__link:hover, .wh-search__link:focus { background: var(--wh-sky); }
.wh-search__title { font-weight: 700; text-decoration: underline; }
.wh-search__excerpt { color: var(--wh-ink-soft); }

/* ---------- rotating question ---------- */
[data-wh="rotating-question"] ul { list-style: none; margin: 0; padding: 0; }
.wh-rq__controls { margin-top: var(--wh-s3); display: flex; flex-wrap: wrap; gap: var(--wh-s2); }

/* ---------- video click-to-load ---------- */
.wh-video-embed { position: relative; aspect-ratio: 16 / 9; background: var(--wh-ink); color: var(--wh-bg); border-radius: var(--wh-r); overflow: hidden; display: grid; place-items: center; }
.wh-video__controls { position: relative; z-index: 1; display: grid; gap: var(--wh-s2); justify-items: center; text-align: center; padding: var(--wh-s4); max-width: 34rem; }
.wh-video__note, .wh-video__alt { font-size: .9375rem; margin: 0; color: var(--wh-bg); }
.wh-video__alt { color: var(--wh-sky); }
.wh-video-embed.is-playing { display: block; }
.wh-video__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wh-video-embed.is-playing > .wh-video__note { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--wh-s1) var(--wh-s3); background: var(--wh-ink); transform: translateY(100%); }
.wh-video-embed.is-playing { overflow: visible; margin-bottom: var(--wh-s6); }

/* ---------- timeline ---------- */
.wh-tl__controls { display: grid; gap: var(--wh-s3); margin-bottom: var(--wh-s4); }
.wh-tl__chips { display: flex; flex-wrap: wrap; gap: var(--wh-s2); }
.wh-tl__selects, .wh-tl__views { display: flex; flex-wrap: wrap; gap: var(--wh-s2); align-items: center; }
.wh-tl__track { display: grid; gap: var(--wh-s4); margin: 0; padding: 0; }
.wh-tl__track--scroll { grid-auto-flow: column; grid-auto-columns: min(24rem, 86vw); overflow-x: auto; scroll-snap-type: x proximity; padding: var(--wh-s2) var(--wh-s2) var(--wh-s4); align-items: start; scroll-padding-inline: var(--wh-s2); }
.wh-tl__track--scroll .wh-tl__card { scroll-snap-align: start; }
.wh-tl__track--list { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }
.wh-tl__card { background: var(--wh-white); color: var(--wh-ink); border: 2px solid var(--wh-ink); border-radius: var(--wh-r); padding: var(--wh-s4); box-shadow: var(--wh-shadow); }
.wh-tl__card:target { outline: 3px solid var(--wh-violet-dark); outline-offset: 3px; }
.wh-tl__img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--wh-r); margin-bottom: var(--wh-s3); }
.wh-tl__date { margin: 0; font-weight: 700; color: var(--wh-violet-dark); }
.wh-tl__title { margin: var(--wh-s1) 0 var(--wh-s2); font-size: 1.25rem; }
.wh-tl__title:focus { outline: 3px solid var(--wh-violet-dark); outline-offset: 2px; }
.wh-tl__meta { display: flex; flex-wrap: wrap; gap: var(--wh-s2); align-items: center; color: var(--wh-ink-soft); margin: 0 0 var(--wh-s3); }
.wh-tl__note { padding: var(--wh-s2) var(--wh-s3); border-left: 4px solid var(--wh-gold-dark); background: var(--wh-bg); border-radius: 0 var(--wh-r) var(--wh-r) 0; }
.wh-tl__label { margin: var(--wh-s3) 0 var(--wh-s1); font-weight: 700; font-size: .875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--wh-ink-soft); }
.wh-tl__sources ul, .wh-tl__related ul { margin: 0; padding-inline-start: 1.25rem; }
.wh-tl__permalink { margin-bottom: 0; font-size: .9375rem; }

/* ---------- charts ---------- */
.wh-chart { --c: var(--wh-ink); margin: var(--wh-s5) 0; padding: var(--wh-s4); background: var(--wh-white); color: var(--wh-ink); border: 2px solid var(--wh-ink); border-radius: var(--wh-r); }
.wh-chart__title { margin: 0 0 var(--wh-s2); font-size: 1.25rem; }
.wh-chart__badges { list-style: none; display: flex; flex-wrap: wrap; gap: var(--wh-s2); margin: 0 0 var(--wh-s3); padding: 0; }
.wh-chart__meta { display: grid; grid-template-columns: max-content 1fr; gap: 2px var(--wh-s3); margin: 0 0 var(--wh-s3); font-size: .9375rem; }
.wh-chart__meta dt { font-weight: 700; } .wh-chart__meta dd { margin: 0; }
.wh-chart__frame { position: relative; overflow-x: auto; }
.wh-chart__svg { display: block; width: 100%; min-width: 600px; height: auto; }
.wh-chart__gridline { stroke: var(--wh-ink-muted); stroke-opacity: .35; stroke-width: 1; }
.wh-chart__axis, .wh-chart__tickmark { stroke: var(--wh-ink); stroke-width: 1.5; }
.wh-chart__tick { fill: var(--wh-ink-soft); font-size: 14px; }
.wh-chart__axis-title { fill: var(--wh-ink); font-size: 15px; font-weight: 600; }
.wh-chart__s--a { --c: var(--wh-violet-dark); } .wh-chart__s--b { --c: var(--wh-coral-dark); } .wh-chart__s--c { --c: var(--wh-teal-dark); }
.wh-chart__s--d { --c: var(--wh-gold-dark); } .wh-chart__s--e { --c: var(--wh-plum); } .wh-chart__s--f { --c: var(--wh-forest); }
.wh-chart__line { stroke: var(--c); stroke-width: 2.5; fill: none; stroke-linejoin: round; }
.wh-chart__point { stroke: var(--c); stroke-width: 2.5; fill: var(--c); }
.wh-chart__point.is-hollow { fill: var(--wh-white); }
path.wh-chart__point { fill: none; stroke-linecap: round; }
.wh-chart__bar { stroke: var(--c); stroke-width: 1.5; }
.wh-chart__bar:not(.is-hollow) { fill: var(--c); }
.wh-chart__pat-bg { fill: var(--wh-white); } .wh-chart__pat-stripe { fill: var(--c); }
.wh-chart__point:focus, .wh-chart__bar:focus { outline: 3px solid var(--wh-violet-dark); outline-offset: 3px; stroke-width: 4; }
.wh-chart__tip { position: absolute; z-index: 2; max-width: min(20rem, 80%); transform: translate(-50%, calc(-100% - 14px)); padding: var(--wh-s2) var(--wh-s3); background: var(--wh-ink); color: var(--wh-bg); border-radius: var(--wh-r); font-size: .9375rem; line-height: 1.4; pointer-events: none; box-shadow: var(--wh-shadow); }
.wh-chart__legend { list-style: none; display: grid; gap: var(--wh-s1); margin: var(--wh-s3) 0; padding: 0; }
.wh-chart__legend-item { display: flex; flex-wrap: wrap; gap: var(--wh-s2); align-items: center; }
.wh-chart__swatch { flex: none; }
.wh-chart__caption { margin: var(--wh-s3) 0; font-weight: 600; }
.wh-chart__details { margin: var(--wh-s3) 0; }
.wh-chart__details summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.wh-chart__table-wrap { overflow-x: auto; margin: var(--wh-s3) 0; max-height: 28rem; border: 1px solid var(--wh-ink-muted); }
.wh-chart__table, .wh-quiz table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: .9375rem; }
.wh-chart__table caption { text-align: left; padding: var(--wh-s2) var(--wh-s3); font-weight: 600; }
.wh-chart__table th, .wh-chart__table td { padding: var(--wh-s2) var(--wh-s3); border-top: 1px solid var(--wh-ink-muted); text-align: right; }
.wh-chart__table th[scope="row"], .wh-chart__table thead th:first-child { text-align: left; }
.wh-chart__table thead th { position: sticky; top: 0; background: var(--wh-sky); }
.wh-chart__source, .wh-chart__tablenote { font-size: .9375rem; color: var(--wh-ink-soft); }
.wh-chart__source a { color: var(--wh-violet-dark); }

/* ---------- bias explorer ---------- */
.wh-be__controls { display: flex; flex-wrap: wrap; gap: var(--wh-s3); align-items: center; margin: var(--wh-s4) 0; }
.wh-be__grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--wh-s4); align-items: start; }
.wh-be__card { background: var(--wh-white); color: var(--wh-ink); border: 2px solid var(--wh-ink); border-top: 8px solid var(--t-solid, var(--wh-ink)); border-radius: var(--wh-r); padding: var(--wh-s4); }
.wh-be__hub { margin: 0; font-size: .875rem; color: var(--t-text, var(--wh-ink-soft)); font-weight: 700; }
.wh-be__toggle { background: none; border: 2px solid var(--wh-ink); border-radius: 999px; padding: 0 var(--wh-s3); color: var(--wh-ink); font: inherit; font-weight: 600; }
.wh-be__toggle[aria-expanded="true"] { background: var(--wh-ink); color: var(--wh-bg); }
.wh-be__panel { margin-top: var(--wh-s3); }

/* ---------- quiz ---------- */
.wh-quiz, .wh-habit, .wh-hc, .wh-qg, .wh-poll, .wh-path__check { background: var(--wh-white); color: var(--wh-ink); border: 2px solid var(--wh-ink); border-radius: var(--wh-r); padding: var(--wh-s4); margin: var(--wh-s4) 0; }
.wh-quiz__fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.wh-quiz__q { font-size: 1.25rem; font-weight: 700; padding: 0; margin-bottom: var(--wh-s3); }
.wh-quiz__q:focus { outline: 3px solid var(--wh-violet-dark); outline-offset: 2px; }
.wh-quiz__option { display: flex; gap: var(--wh-s2); align-items: flex-start; padding: var(--wh-s2) var(--wh-s3); margin: var(--wh-s2) 0; min-height: 44px; border: 2px solid var(--wh-ink-muted); border-radius: var(--wh-r); }
.wh-quiz__option label { flex: 1; cursor: pointer; padding: var(--wh-s1) 0; }
.wh-quiz__option.is-correct { border: 3px solid var(--wh-forest); background: var(--wh-bg); }
.wh-quiz__option.is-wrong { border: 3px dashed var(--wh-coral-dark); }
.wh-quiz__tag { font-weight: 700; }
.wh-quiz__feedback:empty { display: none; }
.wh-quiz__feedback { margin: var(--wh-s3) 0; padding: var(--wh-s3); background: var(--wh-sky); border-radius: var(--wh-r); }
.wh-quiz__feedback:focus { outline: 3px solid var(--wh-violet-dark); }
.wh-quiz__review { padding-inline-start: 1.5rem; }
.wh-quiz__review li { margin-bottom: var(--wh-s3); padding-inline-start: var(--wh-s2); }
.wh-quiz__review li.is-correct { border-inline-start: 6px solid var(--wh-forest); padding-inline-start: var(--wh-s3); }
.wh-quiz__review li.is-wrong { border-inline-start: 6px dashed var(--wh-coral-dark); padding-inline-start: var(--wh-s3); }

/* ---------- habit builder ---------- */
.wh-habit__plan { font-size: 1.125rem; padding: var(--wh-s3); background: var(--wh-bg); border-radius: var(--wh-r); border: 2px solid var(--wh-ink); }
.wh-habit__plan.is-empty { color: var(--wh-ink-soft); border-style: dashed; }
.wh-habit__actions { display: flex; flex-wrap: wrap; gap: var(--wh-s2); margin: var(--wh-s3) 0; }
.wh-habit__status { min-height: 1.5em; font-weight: 600; }

/* ---------- perception ---------- */
.wh-perc__demo { background: var(--wh-white); color: var(--wh-ink); border: 2px solid var(--wh-ink); border-radius: var(--wh-r); padding: var(--wh-s4); margin: var(--wh-s5) 0; }
.wh-perc__fig { margin: var(--wh-s3) 0; }
.wh-perc__svg { width: 100%; max-width: 40rem; height: auto; display: block; border: 1px solid var(--wh-ink-muted); }
.wh-perc__target { fill: var(--wh-coral); stroke: var(--wh-ink); stroke-width: 1; }
.wh-perc__inducer { fill: var(--wh-ink-muted); }
.wh-perc__ring { stroke: var(--wh-ink); stroke-width: 2; stroke-dasharray: 5 3; }
.wh-perc__rule { stroke: var(--wh-ink); stroke-width: 2; }
.wh-perc__controls { display: grid; gap: var(--wh-s3); justify-items: start; }
.wh-perc__controls input[type="range"] { width: min(100%, 24rem); min-height: 44px; accent-color: var(--wh-violet-dark); }
.wh-perc__readout { margin: 0; font-variant-numeric: tabular-nums; }
.wh-perc__notes { display: grid; gap: var(--wh-s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); margin-top: var(--wh-s4); }

/* ---------- history challenge ---------- */
.wh-hc__list, .wh-hc__results { padding-inline-start: 2rem; display: grid; gap: var(--wh-s2); }
.wh-hc__item { display: flex; flex-wrap: wrap; gap: var(--wh-s3); align-items: center; padding: var(--wh-s2) var(--wh-s3); border: 2px solid var(--wh-ink); border-radius: var(--wh-r); background: var(--wh-bg); }
.wh-hc__item.is-dragging { box-shadow: var(--wh-shadow); background: var(--wh-sky); }
.wh-hc__grip { cursor: grab; touch-action: none; min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; font-size: 1.25rem; color: var(--wh-ink-soft); user-select: none; }
.wh-hc__title { flex: 1 1 12rem; }
.wh-hc__btns { display: flex; gap: var(--wh-s2); }
.wh-hc__btns [aria-disabled="true"] { opacity: .55; }
.wh-hc__result { padding: var(--wh-s3); border-radius: var(--wh-r); background: var(--wh-bg); }
.wh-hc__result.is-correct { border-inline-start: 6px solid var(--wh-forest); }
.wh-hc__result.is-wrong { border-inline-start: 6px dashed var(--wh-coral-dark); }
.wh-hc__score:focus { outline: 3px solid var(--wh-violet-dark); }

/* ---------- question generator, path, poll ---------- */
.wh-qg__question { font-size: clamp(1.25rem, 2.5vw + .75rem, 1.875rem); font-weight: 700; line-height: 1.3; margin: var(--wh-s3) 0; }
.wh-qg__question:focus { outline: 3px solid var(--wh-violet-dark); outline-offset: 4px; }
.wh-qg__actions { display: flex; flex-wrap: wrap; gap: var(--wh-s2); align-items: center; }
.wh-qg__actions p { margin: 0; }
.wh-path__progress { margin: var(--wh-s3) 0; }
.wh-progress { height: 14px; border: 2px solid var(--wh-ink); border-radius: 999px; background: var(--wh-white); overflow: hidden; }
.wh-progress__fill { display: block; height: 100%; width: 0; background: var(--wh-violet-dark); }
.wh-poll__form fieldset { border: 0; padding: 0; margin: 0 0 var(--wh-s3); }
.wh-poll__option { display: flex; gap: var(--wh-s2); align-items: center; min-height: 44px; }
.wh-poll__bars { list-style: none; padding: 0; margin: var(--wh-s2) 0; display: grid; gap: var(--wh-s3); }
.wh-poll__bar { display: block; height: 14px; margin-top: var(--wh-s1); border: 2px solid var(--wh-ink); border-radius: 999px; overflow: hidden; background: var(--wh-white); }
.wh-poll__fill { display: block; height: 100%; background: var(--wh-teal-dark); }
.wh-poll__note { font-size: .9375rem; color: var(--wh-ink-soft); }

/* ---------- form status ---------- */
.wh-form__status { margin-top: var(--wh-s3); padding: 0; min-height: 0; }
.wh-form__status:not(:empty) { padding: var(--wh-s3) var(--wh-s4); border-radius: var(--wh-r); border: 2px solid var(--wh-ink); background: var(--wh-white); color: var(--wh-ink); font-weight: 600; }
.wh-form__status--success:not(:empty) { border-color: var(--wh-forest); border-width: 3px; }
.wh-form__status--error:not(:empty) { border-color: var(--wh-coral-dark); border-style: dashed; border-width: 3px; }
.wh-form__status:focus { outline: 3px solid var(--wh-violet-dark); outline-offset: 2px; }
form[data-wh-form][aria-busy="true"] { cursor: progress; }

/* ---------- small screens ---------- */
@media (max-width: 40em) {
  .wh-tl__track--scroll { grid-auto-columns: 88vw; }
  .wh-hc__item { align-items: flex-start; }
  .wh-chart { padding: var(--wh-s3); }
}

/* ---------- motion, contrast, forced colors ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-wh-reveal], .wh-js [data-wh] *, .wh-search, .wh-search * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  [data-wh-reveal="pending"] { opacity: 1; }
}
@media (forced-colors: active) {
  .wh-chart__line, .wh-chart__point, .wh-chart__bar { stroke: CanvasText; }
  .wh-chart__point:not(.is-hollow), .wh-chart__bar:not(.is-hollow) { fill: CanvasText; }
  .wh-chart__point.is-hollow { fill: Canvas; }
  .wh-progress__fill, .wh-poll__fill { background: Highlight; }
}

/* ---------- print ---------- */
@media print {
  .wh-js header, .wh-js footer, .wh-js nav, dialog.wh-search, .wh-rq__controls, .wh-tl__controls, .wh-tl__nav, .wh-video__controls,
  [data-wh-save], [data-wh-copy-link], [data-wh-share], [data-wh-print], .wh-habit__actions, .wh-save-status, .wh-chart__actions, .wh-qg__actions button { display: none !important; }
  body.wh-print-habit [data-wh="habit-builder"] .wh-habit__form, body.wh-print-habit .wh-habit__status { display: none !important; }
  body.wh-print-habit .wh-habit__summary { display: block !important; }
  body.wh-print-only * { visibility: hidden; }
  body.wh-print-only .wh-print-area, body.wh-print-only .wh-print-area * { visibility: visible; }
  body.wh-print-only .wh-print-area { position: absolute; inset: 0 auto auto 0; width: 100%; }
  .wh-chart, .wh-quiz, .wh-tl__card, .wh-be__card, .wh-habit, .wh-perc__demo { break-inside: avoid; box-shadow: none; border-color: #000; }
  .wh-js .wh-chart__table-wrap[hidden], .wh-chart__table-wrap { display: block !important; max-height: none; overflow: visible; }
  .wh-tl__track--scroll { display: block; overflow: visible; }
  .wh-tl__card { margin-bottom: var(--wh-s3); }
  .wh-chart__tip { display: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; word-break: break-all; }
}