/*
 * Authority explainer — scene-specific styles. Colours come only from tda.css tokens,
 * so the light/dark switch restyles the drawing, controls and notes in place.
 * Author: Loki. Implementation: Claude (Opus 5.5, Claude Code) under Loki's direction, 2026-10-04.
 */

/* ------------------------------------------------------------ layout */

.ae-scene {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "route route"
    "stage stage"
    "side side"
    "notes notes";
}
.ae-scene .tda-scene__stage { border-right: 0; border-bottom: 1px solid var(--line); }
.ae-scene .tda-stage-canvas > svg { max-width: 1060px; margin: 0 auto; }
.ae-scene .tda-scene__side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ae-scene .tda-scene__controls { border-bottom: 0; border-right: 1px solid var(--line); align-content: start; }
.ae-scene .tda-stage-canvas { place-items: start center; }
.ae-scene .tda-stage-canvas > svg { max-height: none; }
.ae-scene .tda-steps button { font-size: 12.5px; }
/* .tda-btn sets display, which would otherwise override the hidden attribute. */
.ae-scene [hidden] { display: none !important; }

/* ------------------------------------------------------------ controls */

.ae-controls { gap: 12px; }
.ae-group { display: grid; gap: 8px; }
.ae-group + .ae-group { border-top: 1px dashed var(--line); padding-top: 10px; }
.ae-group__title {
  margin: 0; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--pink-ink);
}
fieldset.ae-input { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.ae-input > legend { padding: 0; margin-bottom: 4px; font-size: 13.5px; color: var(--dim); }
.ae-options { display: flex; flex-wrap: wrap; gap: 4px; }
.ae-opt {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px;
  padding: 4px 9px 4px 7px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--inset); color: var(--dim); font-size: 13.5px; line-height: 1.3; cursor: pointer;
}
.ae-opt:hover { border-color: var(--line-strong); color: var(--fg); }
.ae-opt input { accent-color: var(--pink); margin: 0; width: 15px; height: 15px; flex: 0 0 auto; }
.ae-opt:has(input:checked) { border-color: var(--pink); background: var(--pink-wash); color: var(--fg); }
.ae-opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ------------------------------------------------------------ explanation */

.ae-text { display: grid; gap: 8px; }
.ae-text p { color: var(--fg); }
.tda-outcome[data-decision="allow"] { border-left-color: var(--good); background: var(--good-wash); }
.tda-outcome[data-decision="deny"] { border-left-color: var(--fail); background: var(--fail-wash); }
.tda-outcome[data-decision="not-submitted"] { border-left-color: var(--neutral); background: var(--inset); }
.ae-limits-text { font-size: 14px !important; color: var(--dim); }
.tda-readout dd[data-decision="allow"] { color: var(--good); }
.tda-readout dd[data-decision="deny"] { color: var(--fail); }
.tda-readout dd { font-size: 15px !important; overflow-wrap: anywhere; }

/* ------------------------------------------------------------ notes */

.ae-check-list li, .ae-check-status li { margin: .2em 0; }
.ae-check-status { list-style: none; padding-left: 0; columns: 2 220px; }
.ae-check-status li::before { content: "• "; color: var(--neutral); }
.ae-check-status li[data-status="pass"]::before { content: "✓ "; color: var(--good); }
.ae-check-status li[data-status="fail"]::before { content: "✗ "; color: var(--fail); }
.ae-check-status li[data-status="not-checked"]::before { content: "– "; color: var(--neutral); }
.tda-notes__body code { font-family: var(--font-mono); font-size: .92em; color: var(--cyan-ink); overflow-wrap: anywhere; }
.ae-chain-table { width: 100%; max-width: 560px; border-collapse: collapse; font-size: 14px; }
.tda-notes__body .tda-table { border-collapse: collapse; margin: .6em 0 1em; }
.tda-notes__body .tda-table th, .tda-notes__body .tda-table td { padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.tda-notes__body .tda-table td.num, .tda-notes__body .tda-table th.num { text-align: right; }
.ae-legend-nc { background: transparent !important; border: 1.5px dashed var(--neutral) !important; }

/* ------------------------------------------------------------ the drawing */

.ae-svg { font-family: var(--font-sans); }
.ae-svg .ae-card-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em; fill: var(--dim); }
.ae-svg .ae-t-small { font-size: 12.5px; fill: var(--fg); }
.ae-svg .ae-t-mono { font-family: var(--font-mono); font-size: 11.5px; fill: var(--dim); }
.ae-svg .ae-t-check { font-size: 13px; fill: var(--fg); }
.ae-svg .ae-t-role { font-size: 12px; fill: var(--dim); }
.ae-svg .ae-t-sec { font-size: 13px; font-weight: 600; fill: var(--fg); }
.ae-svg .is-off { fill: var(--muted); opacity: .75; }
.ae-svg .ae-cyan-ink { fill: var(--cyan-ink); }
.ae-svg .ae-fail-ink { fill: var(--fail); }
.ae-svg .ae-good-ink { fill: var(--good); }
.ae-svg .ae-caution-ink { fill: var(--caution); }
.ae-svg .ae-nc-ink { fill: var(--neutral); }
.ae-svg .ae-st-pass { fill: var(--good); }
.ae-svg .ae-st-fail { fill: var(--fail); }
.ae-svg .ae-st-not-checked { fill: var(--neutral); }
.ae-svg .ae-st-pending { fill: var(--muted); }

.ae-svg .box.is-muted { opacity: .55; }
.ae-svg .box.ae-nc-card { stroke: var(--neutral); stroke-dasharray: 5 4; fill: var(--inset); }
.ae-svg .box.ae-doc-ro { stroke-dasharray: 2 3; }
.ae-svg .box.ae-log { fill: var(--bg2); }
.ae-svg .box.is-muted-card { fill: var(--inset); }

.ae-svg .ae-axis { stroke: var(--line-strong); stroke-width: 1.5; }
.ae-svg .ae-tick.is-off { fill: var(--panel); stroke: var(--line-strong); stroke-width: 1.2; }
.ae-svg .ae-tick.is-on.is-cyan { fill: var(--cyan); }
.ae-svg .ae-tick.is-on.is-pink { fill: var(--pink); }
.ae-svg .ae-tick.is-on.is-fail { fill: var(--fail); }
.ae-svg .ae-tick.is-on.is-caution { fill: var(--caution); }

.ae-svg .ae-bar-bg { fill: var(--grid); }
.ae-svg .ae-bar { fill: var(--cyan); }

.ae-svg .ae-chk { stroke-width: 1.5; }
.ae-svg .ae-chk.is-pass { fill: var(--good); stroke: var(--good); }
.ae-svg .ae-chk.is-fail { fill: var(--fail); stroke: var(--fail); }
.ae-svg .ae-chk.is-nc { fill: none; stroke: var(--neutral); stroke-dasharray: 2.5 2.5; }
.ae-svg .ae-chk.is-pending, .ae-svg .ae-chk.is-waiting { fill: var(--inset); stroke: var(--line-strong); }
.ae-svg .ae-chk-mark { fill: none; stroke: var(--bg); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ae-svg .ae-banner.is-allow { fill: var(--good-wash); stroke: var(--good); }
.ae-svg .ae-banner.is-deny { fill: var(--fail-wash); stroke: var(--fail); }
.ae-svg .ae-banner.is-pending { fill: var(--inset); stroke: var(--line-strong); stroke-dasharray: 4 3; }
.ae-svg .ae-banner-text { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .06em; fill: var(--fg); }

.ae-svg .ae-row { fill: transparent; stroke: none; }
.ae-svg .ae-row.is-written { fill: var(--good-wash); stroke: var(--good); }
.ae-svg .ae-row.is-harm { fill: var(--fail-wash); stroke: var(--fail); }
.ae-svg .ae-row.is-refused { fill: transparent; stroke: var(--fail); stroke-dasharray: 4 3; }

.ae-svg .wire.ae-wire-good { stroke: var(--good); }
.ae-svg .wire.ae-wire-fail { stroke: var(--fail); }
.ae-svg .wire.ae-wire-nc { stroke: var(--neutral); }
.ae-svg .wire.ae-wire-off { stroke: var(--line); }
.ae-svg .ae-head { fill: var(--line-strong); }
.ae-svg .ae-head.is-cyan { fill: var(--cyan); }
.ae-svg .ae-head.is-pink { fill: var(--pink); }
.ae-svg .ae-head.ae-wire-good { fill: var(--good); }
.ae-svg .ae-head.ae-wire-fail { fill: var(--fail); }
.ae-svg .ae-head.ae-wire-off { fill: var(--line); }
.ae-svg .ae-block { fill: none; stroke: var(--fail); stroke-width: 2.4; stroke-linecap: round; }

/* ------------------------------------------------------------ narrow screens */

@media (max-width: 900px) {
  .ae-scene { grid-template-columns: minmax(0, 1fr); grid-template-areas: "route" "stage" "side" "notes"; }
  .ae-scene .tda-scene__side { grid-template-columns: minmax(0, 1fr); }
  .ae-scene .tda-scene__controls { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .ae-opt { min-height: 44px; font-size: 14px; flex: 1 1 100%; }
  .ae-options { flex-direction: column; }
  .ae-svg .ae-t-small { font-size: 13px; }
  .ae-svg .ae-t-mono { font-size: 12px; }
  .ae-svg .ae-t-check, .ae-svg .ae-t-sec { font-size: 14px; }
  .tda-notes__body { padding: 0 12px 14px; }
  .ae-check-status { columns: 1; }
  .tda-readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}