/* Shared native controls and a complete, selectable reading presentation. */
html[data-text-size="125"] { font-size: 125%; }
html[data-text-size="150"] { font-size: 150%; }
html[data-text-size="200"] { font-size: 200%; }
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 3px #000 !important;
}
:where(button, select, input, summary) { min-height: 44px; }
:where(button, summary) { min-width: 44px; }
.skip-link { min-width: 44px; min-height: 44px; }
a:not(p a):not(li a):not(dd a):not(.skip-link) { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
:where(a, button, summary, h1, h2, h3) { scroll-margin-block: 1rem; }
main[tabindex="-1"] { scroll-margin-block: 1rem; }
.a11y-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1rem; }
.a11y-controls label { display: grid; gap: .35rem; }
.a11y-controls :is(button, select) { padding: .65rem; color: #f4f1e8; background: #0b1112; border: 2px solid #aebbb5; font: inherit; }
.a11y-help { margin: 1rem; padding: 1rem; color: #f4f1e8; background: #0b1112; border: 2px solid #aebbb5; overflow-wrap: anywhere; }
.a11y-help summary, .observations-table summary { padding: .75rem; cursor: pointer; }
.a11y-help :is(p, li, dd) { max-width: 80ch; line-height: 1.6; }
.a11y-help dt { margin-top: 1em; font-weight: 700; }
.a11y-help a { color: #f4f1e8; text-decoration: underline; }
.a11y-help :is(summary, .a11y-help__content, h2, h3, p, li, dt, dd) { color: #f4f1e8; }
.field-error { display: block; line-height: 1.6; color: #ffb7b2; }
.observations-table { margin-top: 1rem; }
.observations-table table { min-width: 0; }
dialog { width: min(90vw, 42rem); max-height: calc(100dvh - 2rem); overflow: auto; padding: 2rem; color: #f4f1e8; background: #0b1112; border: 2px solid #aebbb5; }
dialog::backdrop { background: rgb(0 0 0 / 75%); }
dialog p { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.6; }
dialog button { min-width: 44px; min-height: 44px; margin: .5rem; padding: .7rem; color: #f4f1e8; background: #0b1112; border: 2px solid #aebbb5; font: inherit; }
html[data-reading="true"] body { line-height: 1.6; }
html[data-reading="true"] h1 { font-size: 1.4rem !important; line-height: 1.3 !important; }
html[data-reading="true"] :is(.app-shell, .pitch-shell) * { min-width: 0; overflow-wrap: anywhere; }
html[data-reading="true"] :is(.badge, .brand__name, .session-state, .button, .source-link, .source-meta__value) { white-space: normal; }
html[data-reading="true"] .brand { max-width: 100%; flex-wrap: wrap; }
html[data-reading="true"] :is(.source-meta, .source-controls, .ticket-fields, .account-metrics, .replay-controls__buttons, .scenario-actions, .a11y-controls) { grid-template-columns: minmax(0, 1fr); }
html[data-reading="true"] :is(input, select, textarea, button, svg) { max-width: 100%; }
html[data-reading="true"] :is(.app-shell, .workspace, .pitch-shell, .market-grid, .section-heading, .panel__header, .session-panel__heading, .session-panel__body, .slide__layout, .card-grid, .pipeline, .competition, .metrics, .flow__list, .route, .gate-list) { display: block; }
html[data-reading="true"] :is(.sidebar, .pitch-stage, .slide) { position: static; width: auto; height: auto; min-height: 0; max-height: none; aspect-ratio: auto; }
html[data-reading="true"] :is(.workspace, .pitch-stage, .a11y-help) { width: min(calc(100% - 2rem), 80ch); max-width: 80ch; margin-inline: auto; }
html[data-reading="true"] :is(.topbar, .workbench-main, .site-footer) { width: 100%; }
html[data-reading="true"] :is(p, li, dd, dt) { max-width: 80ch; line-height: 1.6 !important; text-align: start !important; letter-spacing: normal; word-spacing: normal; }
html[data-reading="true"] p { margin-block: 2.4em !important; }
html[data-reading="true"] :is(.slide__body, .slide__subline, .slide h2, .ask__copy, .proposition p, .gate-list__step, .flow__step, .route__step, .metric, .comparison li) { font-size: 1.2rem !important; line-height: 1.6 !important; }
html[data-reading="true"] .slide { margin-block: 2rem; padding: 1.5rem; }
html[data-reading="true"] :is(.pipeline__arrow, .diagram__disconnect) { display: none; }
html[data-reading="true"] .control-bar__group { display: none; }
html[data-reading="true"] :is(.pipeline__stage, .flow__step, .route__step, .gate-list__step, .card) { margin-block: 1rem; }
html[data-appearance="light"] { --reading-ink: #111; --reading-paper: #fff; --reading-line: #333; }
html[data-appearance="dark"] { --reading-ink: #fff; --reading-paper: #111; --reading-line: #ddd; }
html[data-appearance="light"] select {
  -webkit-appearance: auto;
  appearance: auto;
  color-scheme: light;
}
html[data-appearance="dark"] select {
  -webkit-appearance: auto;
  appearance: auto;
  color-scheme: dark;
}
html:is([data-appearance="light"], [data-appearance="dark"]) :is(body, body *) {
  color: var(--reading-ink) !important;
  background-color: var(--reading-paper) !important;
  background-image: none !important;
  border-color: var(--reading-line) !important;
}
html:is([data-appearance="light"], [data-appearance="dark"]) .chart-line { stroke: var(--reading-ink); }
html:is([data-appearance="light"], [data-appearance="dark"]) .chart-label { fill: var(--reading-ink); }
html:is([data-appearance="light"], [data-appearance="dark"]) a { text-decoration: underline; }
@media (max-width: 580px) {
  html[data-reading="true"] :is(.workspace, .pitch-stage, .a11y-help) { width: calc(100% - 1rem); }
  html[data-reading="true"] :is(.data-section, .panel, .slide, .a11y-controls, .a11y-help) { padding: .5rem; }
  .a11y-controls { align-items: stretch; }
  .a11y-controls > * { min-width: 0; max-width: 100%; }
  dialog { padding: 1rem; }
}
@media (forced-colors: active) {
  :where(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: Highlight !important; box-shadow: none !important; }
  .chart-line { stroke: CanvasText; }
  .chart-label { fill: CanvasText; }
}