/* Reason pages only (loaded by /reason/** after site.css). Uses the site's
   tokens; adds no colour a contrast check has not seen: ink on paper and
   surface, the lime, blue and violet fills, and the coral accent for marks. */

.reason-widget { margin-block: 1.5rem; padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.reason-widget .privacy-line { margin: 1rem 0 0; font-size: .9rem; color: var(--muted); }
.reason-mount:empty { min-block-size: 12rem; }
.reason-form { display: grid; gap: 1rem; }
.reason-form h2, .reason-mount > h2 { margin: 0; }
.reason-question { font-size: 1.08rem; line-height: 1.55; margin: 0; }
.reason-field { display: grid; gap: .35rem; min-inline-size: 0; }
.reason-field label { font-weight: 700; }
.reason-field input, .reason-field select { min-block-size: 44px; padding: .5rem .75rem; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--muted); border-radius: 10px; inline-size: 100%; max-inline-size: 22rem; box-sizing: border-box; min-inline-size: 0; }
.reason-field input:focus-visible, .reason-field select:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.reason-hint { margin: 0; font-size: .92rem; color: var(--muted); }
.reason-triple, .reason-interval { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.reason-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.reason-actions .button, .reason-presets .button, .reason-option { min-block-size: 44px; }
.button.link-button { min-block-size: 44px; padding: .25rem .5rem; background: none; border: 0; text-decoration: underline; color: var(--ink); cursor: pointer; font: inherit; }
.reason-seed { margin: .5rem 0 0; font-size: .9rem; color: var(--muted); }
.reason-live, .reason-feedback, .reason-answer { margin: 0; min-block-size: 1.5em; font-weight: 600; }
.reason-choices .choice-option { min-block-size: 44px; }
.reason-scale .choice-set-options { display: flex; flex-wrap: wrap; gap: .5rem; }
.reason-scale .choice-option { min-inline-size: 44px; justify-content: center; }
.reason-choices .reason-mark { margin: .25rem 0; font-weight: 700; }
.reason-choices.fits { border-inline-start: 4px solid var(--ink); padding-inline-start: .75rem; }
.reason-choices.misses { border-inline-start: 4px solid var(--accent); padding-inline-start: .75rem; }
.reason-choices details { margin-top: .5rem; }
.reason-choices summary { min-block-size: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }

.reason-log, .reason-review { display: grid; gap: .5rem; padding-inline-start: 1.25rem; }
.reason-log li { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; }
.reason-log .triple { font-variant-numeric: tabular-nums; font-weight: 700; min-inline-size: 7rem; }
.reason-log .fits .verdict, .reason-review .fits > p:first-of-type::before { color: var(--ink); }
.reason-log .misses .verdict { color: var(--ink); text-decoration: underline wavy var(--accent); }
.reason-log .note { color: var(--muted); font-size: .9rem; }
.reason-review li { padding: .5rem .75rem; border-radius: 10px; background: var(--paper); }
.reason-review li.fits { border-inline-start: 4px solid var(--ink); }
.reason-review li.misses { border-inline-start: 4px solid var(--accent); }
.reason-review p { margin: .25rem 0; }
.reason-rule { font-size: 1.1rem; padding: .75rem 1rem; background: var(--lime); border-radius: 12px; }
.reason-score { font-size: 1.15rem; }
.reason-badge { padding: .75rem 1rem; border-radius: 12px; background: var(--lime); border: 2px solid var(--ink); }
.reason-clock { font-variant-numeric: tabular-nums; font-weight: 700; margin: 0 0 .75rem; }
.reason-card { display: grid; gap: .75rem; }
.reason-argument { margin: 0; padding: 1rem 1.25rem; background: var(--paper); border-inline-start: 4px solid var(--ink); border-radius: 0 12px 12px 0; font-size: 1.08rem; line-height: 1.55; }
.reason-options { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.reason-option { text-align: start; justify-content: flex-start; }
.reason-presets { display: flex; flex-wrap: wrap; gap: .5rem; }
.reason-steps { display: grid; gap: .35rem; padding-inline-start: 1.25rem; }

.reason-figure-wrap { max-inline-size: 22rem; }
.reason-chart-wrap { margin: 1rem 0; max-inline-size: 40rem; }
.reason-chart-wrap figcaption { font-size: .92rem; color: var(--muted); margin-top: .35rem; }
.reason-chart { inline-size: 100%; block-size: auto; display: block; }
.reason-chart .grid { stroke: var(--line); stroke-width: 1; }
.reason-chart .baseline { stroke: var(--ink); stroke-width: 1.5; }
.reason-chart .ideal { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 5 4; fill: none; }
.reason-chart .axis { font-size: 11px; fill: var(--muted); }
.reason-chart .axis-label { font-size: 11px; fill: var(--ink); }
.reason-chart .observed { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.reason-chart .observed-dot { fill: var(--accent); }
.reason-chart .observed-dot.key { stroke: var(--ink); stroke-width: 2; }
.reason-chart .bar { fill: var(--blue); stroke: var(--ink); stroke-width: 1; }
.reason-chart .track { fill: var(--paper); stroke: var(--line); }
.reason-chart .bar-pred { fill: var(--violet); }
.reason-chart .bar-felt { fill: var(--blue); }
.reason-chart .bar-actual { fill: var(--lime); stroke: var(--ink); }
.reason-chart .anchor-high { fill: var(--accent); }
.reason-chart .anchor-low { fill: var(--blue); stroke: var(--ink); }
.reason-figure .fig-box { fill: var(--surface); stroke: var(--ink); stroke-width: .6; }
.reason-figure .fig-dot { fill: var(--ink); }
.reason-figure .fig-on { fill: var(--ink); }
.reason-figure .fig-off { fill: var(--paper); stroke: var(--line); stroke-width: .3; }
.reason-icons .ia-tp { fill: var(--accent); }
.reason-icons .ia-fn { fill: var(--violet); }
.reason-icons .ia-fp { fill: var(--ink); }
.reason-icons .ia-clear { fill: var(--line); }
.reason-legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding: 0; list-style: none; font-size: .92rem; }
.reason-legend .swatch { display: inline-block; inline-size: .9rem; block-size: .9rem; margin-inline-end: .35rem; vertical-align: -.1rem; border-radius: 3px; }
.reason-legend .swatch.ia-tp { background: var(--accent); }
.reason-legend .swatch.ia-fn { background: var(--violet); }
.reason-legend .swatch.ia-fp { background: var(--ink); }
.reason-legend .swatch.ia-clear { background: var(--line); }

.reason-grade { padding: .6rem .9rem; border-radius: 12px; background: var(--paper); border: 1px solid var(--ink); }
.reason-grade.grade-strong { background: var(--lime); }
.reason-grade.grade-mixed { background: var(--blue); }
.reason-grade.grade-weak, .reason-grade.grade-failed, .reason-grade.grade-artefact-debate { background: var(--violet); }
.reason-checklist { list-style: none; padding: 0; display: grid; gap: .5rem; }
.reason-checklist li { position: relative; padding-inline-start: 2rem; }
.reason-checklist li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .2rem; inline-size: 1.1rem; block-size: 1.1rem; border: 2px solid var(--ink); border-radius: 4px; }
.reason-figure-block { margin: 1rem 0; }
.reason-diagram { inline-size: 100%; block-size: auto; max-inline-size: 44rem; display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.reason-diagram .grid { stroke: var(--line); }
.reason-diagram .axis, .reason-diagram .axis-label { font-size: 13px; fill: var(--muted); }
.reason-diagram .gap { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4 3; }
.reason-diagram .series-estimate { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.reason-diagram .series-actual { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 8 5; }
.reason-diagram .dot-estimate { fill: var(--accent); stroke: var(--ink); stroke-width: 1.5; }
.reason-diagram .dot-actual { fill: var(--lime); stroke: var(--ink); stroke-width: 1.5; }
.reason-diagram .series-label { font-size: 14px; font-weight: 700; fill: var(--ink); }

/* Shared marks for the wave-1 bias-page diagrams (diagrams.js): a small
   generic vocabulary reused across all eleven, scoped under .reason-diagram
   so it never leaks into the chart or atlas drawings above. */
.reason-diagram .outline { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; }
.reason-diagram .stroke-ink { fill: none; stroke: var(--ink); stroke-width: 2; }
.reason-diagram .fade { fill: none; stroke: var(--line); stroke-width: 1.5; }
.reason-diagram .fill-a { fill: var(--accent); }
.reason-diagram .fill-a-soft { fill: var(--accent); opacity: .35; }
.reason-diagram .fill-b { fill: var(--blue); }
.reason-diagram .fill-c { fill: var(--violet); }
.reason-diagram .fill-muted { fill: var(--line); }
.reason-diagram .label { font-size: 13px; font-weight: 700; fill: var(--ink); }
.reason-diagram .label-muted { font-size: 12px; fill: var(--muted); }
.reason-diagram .label-invert { font-size: 13px; font-weight: 700; fill: var(--paper); }

.atlas-figure { margin: 1.5rem 0; }
.atlas-scroll { overflow-x: auto; border-radius: 18px; }
.atlas-map { display: block; inline-size: 100%; min-inline-size: 720px; block-size: auto; }
.atlas-sea { fill: var(--blue); }
.atlas-route { fill: none; stroke: var(--surface); stroke-width: 3; stroke-dasharray: 10 8; }
.atlas-land { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.atlas-contour { fill: none; stroke: var(--line); stroke-width: 1.5; }
.atlas-region-title { font-size: 22px; font-weight: 800; fill: var(--ink); }
.atlas-region-sub { font-size: 13px; fill: var(--muted); }
.atlas-label { font-size: 15px; fill: var(--ink); }
.atlas-pin { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; }
.atlas-pin.has-page { fill: var(--accent); }
.atlas-link .atlas-label { text-decoration: underline; font-weight: 700; }
.atlas-link:focus-visible { outline: 3px solid var(--ink); }
.atlas-names { columns: 2 14rem; padding-inline-start: 1.25rem; }
.atlas-names a { font-weight: 700; }
.myth-verdict p { margin: .4rem 0; }
.reason-band a, .reason-deep a { font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .reason-widget *, .atlas-map * { transition: none !important; animation: none !important; }
}
.category-reason .hub-art { float: inline-end; inline-size: min(40%, 320px); block-size: auto; margin: 0 0 1rem 1.5rem; }
@media (max-width: 640px) { .category-reason .hub-art { float: none; inline-size: 100%; margin: 0 0 1rem; } }