/* Academy control states · 2026.10.11.3
   This Academy-only layer owns presentation, not behavior. Important declarations
   in the layer outrank inherited unlayered important and dynamically injected
   viewer colours. Every state selector has zero specificity, so the explicit
   order is the policy: default → hover → primary → selected → focus → disabled.
   No display, visibility, pointer-events, position, transform or model paint gate
   is changed. Archived routes use these same shells; marketing is not linked. */
:root {
  --ats-control-bg: #ffffff;
  --ats-control-ink: #173e57;
  --ats-control-border: #607786;
  --ats-control-hover-bg: #edf6f7;
  --ats-control-hover-border: #23475d;
  --ats-control-selected-bg: #075b63;
  --ats-control-selected-hover-bg: #064a51;
  --ats-control-selected-ink: #ffffff;
  --ats-control-focus: #b77900;
  --ats-control-disabled-bg: #edf0f2;
  --ats-control-disabled-ink: #5c6c76;
  --ats-control-disabled-border: #7c8b94;
}
@layer ats-controls {
:where(button, select, input[type="button"], input[type="submit"], input[type="reset"], [role="tab"], [role="button"]:not(g):not(svg), summary, a.button, a.btn, a.primary, a.secondary, a.quiet, a.action-link, a.link-button, a.nav-item) {
  color: var(--ats-control-ink) !important;
  background: var(--ats-control-bg) !important;
  border-color: var(--ats-control-border) !important;
  border-style: solid !important;
  border-width: 1px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
/* Preserve independent status chips and the passed lesson-index colour pair. */
:where(:is(button, select, input[type="button"], input[type="submit"], input[type="reset"], [role="tab"], [role="button"]:not(g):not(svg), summary, a.button, a.btn, a.primary, a.secondary, a.quiet, a.action-link, a.link-button, a.nav-item) :is(small, strong, em, .control-label, .button-label, .icon, span:not(.lesson-index):not(.status):not(.status-dot):not(.badge):not(.tag))) {
  color: inherit !important;
}
:where(.motor-journey nav button::before, .lesson-link .lesson-record-status::before) {
  color: inherit !important;
}
:where(:is(button, select, input[type="button"], input[type="submit"], input[type="reset"], [role="tab"], [role="button"]:not(g):not(svg), summary, a.button, a.btn, a.primary, a.secondary, a.quiet, a.action-link, a.link-button, a.nav-item):hover:not(:disabled, [aria-disabled="true"])) {
  background: var(--ats-control-hover-bg) !important;
  border-color: var(--ats-control-hover-border) !important;
  color: var(--ats-control-ink) !important;
}
/* Primary actions keep emphasis without borrowing the selected fill. */
:where(:is(button, a):is(.primary, .depth-primary, .fs-primary, .cooling-primary, .sl-primary, .fc-primary-next)) {
  border-width: 2px !important;
  border-color: var(--ats-control-ink) !important;
  font-weight: 750 !important;
}
:where(:is(button, a).danger) {
  color: #862d2d !important;
  border-color: #862d2d !important;
  border-width: 2px !important;
  font-weight: 750 !important;
}
:where(:is(button, a).danger:hover:not(:disabled, [aria-disabled="true"])) {
  color: #862d2d !important;
  border-color: #862d2d !important;
  background: #fff2f0 !important;
}
/* White inset = active indicator; outer white edge remains visible on dark 3D. */
:where(:is(button, [role="tab"], [role="button"]:not(g):not(svg), a):is([aria-pressed="true"], [aria-selected="true"], [aria-expanded="true"], [aria-current="page"], [aria-current="step"], [aria-current="location"], [aria-current="date"], [aria-current="time"], [aria-current="true"], .active, .selected, .is-selected), details[open] > summary) {
  background: var(--ats-control-selected-bg) !important;
  color: var(--ats-control-selected-ink) !important;
  border-color: var(--ats-control-selected-bg) !important;
  box-shadow: inset 0 -3px 0 var(--ats-control-selected-ink), 0 0 0 1px var(--ats-control-selected-ink) !important;
  text-shadow: none !important;
}
:where(:is(button, [role="tab"], [role="button"]:not(g):not(svg), a):is([aria-pressed="true"], [aria-selected="true"], [aria-expanded="true"], [aria-current="page"], [aria-current="step"], [aria-current="location"], [aria-current="date"], [aria-current="time"], [aria-current="true"], .active, .selected, .is-selected):hover:not(:disabled, [aria-disabled="true"]), details[open] > summary:hover:not([aria-disabled="true"])) {
  background: var(--ats-control-selected-hover-bg) !important;
  color: var(--ats-control-selected-ink) !important;
  border-color: var(--ats-control-selected-hover-bg) !important;
}
:where(:is(button, a, input, select, textarea, summary, [role="tab"], [role="button"], [tabindex]):focus-visible) {
  outline: 3px solid var(--ats-control-focus) !important;
  outline-offset: 3px !important;
}
:where(:is(button, input, select, textarea, [role="tab"], [role="button"]:not(g):not(svg), a, summary):is(:disabled, [aria-disabled="true"])) {
  background: var(--ats-control-disabled-bg) !important;
  color: var(--ats-control-disabled-ink) !important;
  border-color: var(--ats-control-disabled-border) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}
:where(:is(button, input, select, textarea, [role="tab"], [role="button"]:not(g):not(svg), a, summary):is(:disabled, [aria-disabled="true"]):not(.hotspot, .motor-live-hotspot)) {
  opacity: 1 !important;
}
/* Native fields retain their controls and input semantics. */
:where(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: var(--ats-control-selected-bg); }
/* SVG selector cards are controls. Footprints/mechanisms remain equipment drawings. */
:where(:is(g[data-overview-node], g.explanation-node) > :is(rect[data-domain-node], rect.node-plate)) {
  fill: var(--ats-control-bg) !important;
  stroke: var(--ats-control-border) !important;
  stroke-width: 1.5px !important;
}
:where(g[data-overview-node] > text, g.explanation-node > :is(text.node-tag, text.node-role)) {
  fill: var(--ats-control-ink) !important;
}
:where(:is(g[data-overview-node], g.explanation-node):hover > :is(rect[data-domain-node], rect.node-plate)) {
  fill: var(--ats-control-hover-bg) !important;
  stroke: var(--ats-control-hover-border) !important;
}
:where(:is(g[data-overview-node], g.explanation-node)[aria-pressed="true"] > :is(rect[data-domain-node], rect.node-plate)) {
  fill: var(--ats-control-selected-bg) !important;
  stroke: var(--ats-control-selected-ink) !important;
  stroke-width: 4px !important;
}
:where(g[data-overview-node][aria-pressed="true"] > text, g.explanation-node[aria-pressed="true"] > :is(text.node-tag, text.node-role)) {
  fill: var(--ats-control-selected-ink) !important;
}
:where(:is(g[data-overview-node], g.explanation-node)[aria-pressed="true"]:hover > :is(rect[data-domain-node], rect.node-plate)) {
  fill: var(--ats-control-selected-hover-bg) !important;
}
:where(:is(g[data-map-asset], #mechanism g[data-part])[aria-pressed="true"]) {
  outline: 3px solid var(--ats-control-selected-bg) !important;
  outline-offset: 4px !important;
}
:where(g[data-map-asset][aria-pressed="true"] > rect) {
  stroke: #ffffff !important;
  stroke-width: 4px !important;
}
:where(:is(g[data-overview-node], g.explanation-node, g[data-map-asset], #mechanism g[data-part]):focus-visible) {
  outline: 3px solid var(--ats-control-focus) !important;
  outline-offset: 5px !important;
}
/* The retained explanation canvas has a dark radial gradient. */
:where(#explanation-canvas g.explanation-node:focus-visible) {
  outline-color: #ffcf5b !important;
}
@media (prefers-reduced-motion: reduce) {
:where(button, select, input[type="button"], input[type="submit"], input[type="reset"], [role="tab"], [role="button"]:not(g):not(svg), summary, a.button, a.btn, a.primary, a.secondary, a.quiet, a.action-link, a.link-button, a.nav-item) {
  transition: none !important;
}
}
@media (forced-colors: active) {
:where(button, select, input[type="button"], input[type="submit"], input[type="reset"], [role="tab"], [role="button"]:not(g):not(svg), summary, a.button, a.btn, a.primary, a.secondary, a.quiet, a.action-link, a.link-button, a.nav-item) {
  forced-color-adjust: auto !important;
}
:where(:is(button, [role="tab"], [role="button"]:not(g):not(svg), a):is([aria-pressed="true"], [aria-selected="true"], [aria-expanded="true"], [aria-current="page"], [aria-current="step"], [aria-current="location"], [aria-current="date"], [aria-current="time"], [aria-current="true"], .active, .selected, .is-selected), details[open] > summary) {
  background: Highlight !important;
  color: HighlightText !important;
  border-color: Highlight !important;
  text-decoration: underline !important;
  text-decoration-thickness: 3px !important;
  text-underline-offset: 4px !important;
}
:where(:is(button, input, select, textarea, [role="tab"], [role="button"]:not(g):not(svg), a, summary):is(:disabled, [aria-disabled="true"])) {
  color: GrayText !important;
  background: Canvas !important;
  border-color: GrayText !important;
  text-decoration: none !important;
}
:where(:is(button, a, input, select, textarea, summary, [role="tab"], [role="button"], [tabindex]):focus-visible) {
  outline-color: Highlight !important;
}
:where(:is(g[data-overview-node], g.explanation-node)[aria-pressed="true"] > :is(rect[data-domain-node], rect.node-plate)) {
  fill: Highlight !important;
  stroke: HighlightText !important;
}
:where(g[data-overview-node][aria-pressed="true"] > text, g.explanation-node[aria-pressed="true"] > :is(text.node-tag, text.node-role)) {
  fill: HighlightText !important;
  text-decoration: underline !important;
}
:where(:is(g[data-map-asset], #mechanism g[data-part])[aria-pressed="true"]) {
  outline-color: Highlight !important;
}
:where(:is(g[data-overview-node], g.explanation-node, g[data-map-asset], #mechanism g[data-part]):focus-visible) {
  outline-color: Highlight !important;
}
}
}