/* arthurshafer.com/ridemo/ — layout main.css lacks for the drivable synthetic demonstration:
   the console variant, the district polygons, the question menu, the district panel, the
   record list, and the district table. Everything else on the page is main.css.
   Same rules as main.css: zero border-radius, zero animation, transitions ≤ 160 ms and only
   on hover/focus colour, mono ≥ 0.7rem, reading text ≥ 0.8rem, contrast ≥ 4.5:1.
   The red / blue / neutral hexes are the console's own (.map-dot.red/.blue/.neutral). */

/* ------------------------------------------------------------ standing label */
.ridemo-standing {
    margin-bottom: 20px; padding: 14px 18px;
    border: 1px solid rgba(184, 154, 98, 0.4); color: var(--brass-light); background: rgba(184, 154, 98, 0.07);
    /* Three sentences of reading text, and the page's primary disclosure: the 0.8rem
       reading floor applies, not the 0.7rem label floor. The mono kicker keeps its
       treatment on the <strong> only. */
    font-size: 0.85rem; line-height: 1.6;
}
.ridemo-standing strong { font-family: var(--mono); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

/* ----------------------------------------------------------------- console */
.ridemo-console { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); min-height: 0; }
.ridemo-map-panel { display: flex; flex-direction: column; min-height: 0; overflow: visible; }

/* --------------------------------------------------------------------- map */
.ridemo-map { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; padding: 16px 20px 0; }
/* No transition on the polygons or the menu: their states change by script, and a
   recorded step either shows or does not. Hover feedback on them is immediate. */
.ridemo-district { fill: #7f7d78; fill-opacity: 0.28; stroke: rgba(241, 238, 230, 0.45); stroke-width: 1; stroke-linejoin: miter; }
.ridemo-district[data-band="red"] { fill: #d44751; }
.ridemo-district[data-band="blue"] { fill: #5578f0; }
.ridemo-district[data-band="neutral"] { fill: #7f7d78; }
.ridemo-district.is-named { fill-opacity: 0.55; stroke: var(--brass-light); stroke-width: 2; }
.ridemo-district.is-selected { stroke: var(--paper); stroke-width: 2.5; }
.has-js .ridemo-district { cursor: pointer; }
.has-js .ridemo-district:hover { fill-opacity: 0.5; }
.ridemo-district:focus-visible { outline: none; stroke: var(--blue-soft); stroke-width: 3; }
.ridemo-labels text { fill: var(--paper); font-family: var(--mono); font-size: 14px; letter-spacing: 0.06em; text-anchor: middle; pointer-events: none; }
.ridemo-map-note { padding: 8px 20px 0; color: var(--muted); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; }
.ridemo-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 12px 20px 18px; color: var(--muted); font-size: 0.8rem; }
.ridemo-legend li { display: inline-flex; align-items: center; gap: 8px; }
.ridemo-legend i, .ridemo-table .band i { display: inline-block; width: 10px; height: 10px; border: 1px solid rgba(241, 238, 230, 0.45); }
.ridemo-legend .red, .ridemo-table .band .red { background: rgba(212, 71, 81, 0.55); }
.ridemo-legend .blue, .ridemo-table .band .blue { background: rgba(85, 120, 240, 0.55); }
.ridemo-legend .neutral, .ridemo-table .band .neutral { background: rgba(127, 125, 120, 0.55); }

/* ---------------------------------------------------------- district panel */
.ridemo-district-panel { margin-top: auto; padding: 18px 20px 22px; border-top: 1px solid var(--rule-on-ink); }
.ridemo-district-name { margin-top: 8px; font-family: var(--display); font-size: 1.35rem; font-weight: 450; line-height: 1.15; }
.ridemo-district-empty { margin-top: 8px; color: var(--muted); font-size: 0.85rem; line-height: 1.5; }
.ridemo-aggregates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; margin-top: 12px; }
.ridemo-aggregates div { padding: 9px 0; border-bottom: 1px solid var(--rule-on-ink); }
.ridemo-aggregates .wide { grid-column: 1 / -1; }
.ridemo-aggregates dt { color: var(--muted); font-size: 0.8rem; font-weight: 500; }
.ridemo-aggregates dd { margin-top: 2px; color: var(--paper); font-family: var(--mono); font-size: 0.85rem; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------- menu */
.ridemo-panel { grid-template-rows: auto auto 1fr; }
.ridemo-menu { padding: 16px 22px 18px; border-bottom: 1px solid var(--rule-on-ink); }
.ridemo-menu ol { margin-top: 10px; border-top: 1px solid var(--rule-on-ink); }
.ridemo-menu li { border-bottom: 1px solid var(--rule-on-ink); }
.ridemo-menu a {
    display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: baseline;
    padding: 11px 10px; color: var(--paper-soft); font-size: 0.9rem; font-weight: 500; line-height: 1.4;
}
.ridemo-menu a span { color: var(--muted); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; }
.ridemo-menu a:hover { color: var(--paper); }
.ridemo-menu a[aria-current="true"] { color: var(--paper); background: rgba(184, 154, 98, 0.07); }
.ridemo-menu a[aria-current="true"] span { color: var(--brass-light); }

/* ---------------------------------------------------------------- answers */
.ridemo-answer + .ridemo-answer { border-top: 1px solid var(--brass); }
.ridemo-answer:focus-visible { outline-offset: -3px; }
.ridemo-answer .agent-question { margin-top: 12px; }
.ridemo-districts { margin-top: 16px; color: var(--muted); font-size: 0.82rem; line-height: 1.7; }
.ridemo-districts span, .ridemo-counter span, .ridemo-note span { color: var(--brass-light); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.ridemo-districts a { color: var(--paper-soft); border-bottom: 1px solid var(--rule-on-ink); transition: border-color 160ms var(--ease); }
.ridemo-districts a:hover { border-bottom-color: var(--brass-light); }
.ridemo-refusal { margin-top: 18px; padding-inline: 18px; border: 1px solid rgba(184, 154, 98, 0.4); }

.ridemo-compare-wrap { padding: 0 22px 20px; overflow-x: auto; }
.ridemo-compare { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.ridemo-compare caption { padding-bottom: 8px; color: var(--brass-light); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-align: left; text-transform: uppercase; }
.ridemo-compare th, .ridemo-compare td { padding: 9px 10px; border-bottom: 1px solid var(--rule-on-ink); text-align: left; vertical-align: top; }
.ridemo-compare thead th { color: var(--muted); font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.ridemo-compare tbody th { color: var(--muted); font-weight: 500; }
.ridemo-compare td { color: var(--paper-soft); }
.ridemo-compare .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.ridemo-records { padding: 16px 22px 12px; border-top: 1px solid var(--rule-on-ink); }
.ridemo-records > .evidence-label { margin-bottom: 10px; }
.ridemo-record { border-top: 1px solid var(--rule-on-ink); }
.ridemo-record summary { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 12px 0; list-style: none; }
.ridemo-record summary::-webkit-details-marker { display: none; }
.has-js .ridemo-record summary { cursor: pointer; }
.ridemo-record summary span { color: var(--blue-soft); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.ridemo-record summary strong { color: var(--paper); font-size: 0.9rem; font-weight: 600; line-height: 1.4; transition: color 160ms var(--ease); }
.has-js .ridemo-record summary:hover strong { color: var(--brass-light); }
.has-js .ridemo-record summary strong::after { content: " +"; color: var(--muted); font-family: var(--mono); font-weight: 400; }
.has-js .ridemo-record[open] summary strong::after { content: " \2212"; }
.ridemo-record > p { padding-bottom: 12px; }
.ridemo-locator { color: var(--brass-light); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; }
.ridemo-summary { color: var(--muted); font-size: 0.85rem; line-height: 1.55; }
.ridemo-note { color: var(--muted); font-size: 0.82rem; line-height: 1.55; }
.ridemo-counter { padding: 14px 22px; border-top: 1px solid var(--rule-on-ink); color: var(--paper-soft); font-size: 0.85rem; line-height: 1.6; }

/* ---------------------------------------------------------- district table */
.ridemo-table-wrap { overflow-x: auto; }
.ridemo-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 0.85rem; }
.ridemo-table th, .ridemo-table td { padding: 12px 10px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.ridemo-table thead th { color: var(--kicker); font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; border-top: 1px solid var(--rule); }
.ridemo-table .num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.ridemo-table td:first-child { color: var(--brass-dark); }
.ridemo-table td a { border-bottom: 1px solid var(--rule); transition: border-color 160ms var(--ease); }
.ridemo-table td a:hover { border-bottom-color: var(--brass-dark); }
.ridemo-table .band i { margin-right: 8px; border-color: var(--rule-on-paper); vertical-align: -1px; }
.ridemo-table tr.is-named, .ridemo-table tr.is-selected { background: var(--paper-tint); }
.ridemo-table tr.is-selected td:first-child { color: var(--ink); }
.ridemo-table-note { margin-top: 12px; color: var(--brass-dark); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; line-height: 1.6; text-transform: uppercase; }
.ridemo-cast { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 56px; border: 1px solid var(--rule); background: var(--rule); }
.ridemo-cast div { padding: 22px; background: var(--paper); }
.ridemo-cast dd { margin-top: 10px; color: var(--muted-dark); font-size: 0.85rem; line-height: 1.55; }

/* ---------------------------------------------------------------- boundary */
.ridemo-boundary { margin-top: 0; }

/* ------------------------------------------------------------- breakpoints */
@media (max-width: 980px) {
    .ridemo-console { grid-template-columns: 1fr; }
    .ridemo-map-panel { border-right: 0; border-bottom: 1px solid var(--rule-on-ink); }
    .ridemo-cast { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .ridemo-aggregates { grid-template-columns: 1fr; }
    .ridemo-record summary { grid-template-columns: 1fr; gap: 4px; }
    .ridemo .agent-transcript, .ridemo .agent-window-title, .ridemo-menu, .ridemo-records, .ridemo-counter, .ridemo-compare-wrap, .ridemo .agent-boundary { padding-inline: 16px; }
    .ridemo-map { padding-inline: 12px; }
    .ridemo-map-note, .ridemo-legend, .ridemo-district-panel { padding-inline: 16px; }
    .ridemo-refusal { padding-inline: 14px; }
}

/* Below this width the SVG scales the district numbers under the 0.7rem mono
   floor. The district table is the map's semantic twin, so drop the labels
   rather than ship type nobody can read. */
@media (max-width: 376px) {
    .ridemo-labels { display: none; }
}

/* Short paths between prepared answers and district details. */
.ridemo-quick-nav { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0; }
.ridemo-answer, .ridemo-menu, .ridemo-map-panel, .ridemo-district-panel { scroll-margin-top: 96px; }
.ridemo-answer-return { padding: 18px 22px; border-top: 1px solid var(--rule-on-ink); }
.ridemo-return { display: inline-block; margin-top: 18px; }
@media (max-width: 680px) {
    .ridemo-quick-nav .button { width: 100%; }
    .ridemo-answer-return { padding-inline: 16px; }
}