/*
 * Durable work — scene-specific styles. Colours only through the tda.css tokens,
 * so a theme change restyles the drawing, controls and notes in place.
 * Author: Loki. Implementation: Claude (Opus 5.5, Claude Code) under Loki's direction, 2026-10-04.
 */

/* ------------------------------------------------------------- mechanism */
.dw-scene [hidden] { display: none !important; }
.dw-canvas { display: block; flex: none; min-height: 0; }
.dw-canvas > svg { max-height: none; }
.dw-svg .grid { stroke: var(--grid); }
.dw-svg .dw-tick { font-size: 11px; fill: var(--muted); }
.dw-svg .dw-tick.is-cursor { fill: var(--pink-ink); }
.dw-svg .dw-tick.is-after { opacity: .5; }
.dw-svg .dw-lane-label { fill: var(--dim); }
.dw-svg .dw-group-label { font-size: 10px; fill: var(--muted); letter-spacing: .04em; }
.dw-svg .dw-range { fill: var(--cyan-wash); }
.dw-svg .dw-cursor-col { fill: var(--pink-wash); stroke: var(--pink); stroke-width: 1; stroke-dasharray: 3 3; }

.dw-svg .dw-band.is-v1 { fill: var(--inset); stroke: var(--line-strong); stroke-width: 1; }
.dw-svg .dw-band.is-v2 { fill: var(--pink-wash); stroke: var(--pink); stroke-width: 1; }
.dw-svg .dw-band__txt { font-size: 11px; fill: var(--fg); }

.dw-svg .dw-status { stroke-width: 1; }
.dw-svg .dw-status.is-silent { fill: transparent; stroke-dasharray: 3 2; }
.dw-svg .dw-wait { stroke-dasharray: 4 3; }

.dw-svg .dw-mark__box { fill: var(--panel); stroke: var(--line-strong); stroke-width: 1.2; }
.dw-svg .dw-mark__txt { font-family: var(--font-mono); font-size: 11.5px; fill: var(--fg); }
.dw-svg .dw-mark.is-good .dw-mark__box { fill: var(--good-wash); stroke: var(--good); }
.dw-svg .dw-mark.is-good .dw-mark__txt { fill: var(--good); }
.dw-svg .dw-mark.is-fail .dw-mark__box { fill: var(--fail-wash); stroke: var(--fail); }
.dw-svg .dw-mark.is-fail .dw-mark__txt { fill: var(--fail); }
.dw-svg .dw-mark.is-caution .dw-mark__box { fill: var(--caution-wash); stroke: var(--caution); }
.dw-svg .dw-mark.is-caution .dw-mark__txt { fill: var(--caution); }
.dw-svg .dw-mark.is-cyan .dw-mark__box { fill: var(--cyan-wash); stroke: var(--cyan); }
.dw-svg .dw-mark.is-cyan .dw-mark__txt { fill: var(--cyan-ink); }
.dw-svg .dw-mark.is-pink .dw-mark__box { fill: var(--pink-wash); stroke: var(--pink); }
.dw-svg .dw-mark.is-pink .dw-mark__txt { fill: var(--pink-ink); }
.dw-svg .dw-mark.is-neutral .dw-mark__box { fill: var(--inset); stroke: var(--neutral); }
.dw-svg .dw-mark.is-memory .dw-mark__box { fill: transparent; stroke: var(--neutral); stroke-dasharray: 3 2; }
.dw-svg .dw-mark.is-memory .dw-mark__txt { fill: var(--dim); }
.dw-svg .dw-mark.is-in-range .dw-mark__box { stroke-width: 2; }
.dw-svg .is-future { opacity: .2; }

.tda-legend i.dw-legend-silent { background: transparent; border: 1px dashed var(--cyan); }

/* -------------------------------------------------- trace position + text */
.dw-trace-ctl { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 16px; }
.dw-trace-field { flex: 1 1 240px; }
.dw-trace-label { display: flex; justify-content: space-between; gap: 8px; }
.dw-moment h3, .dw-did-head { font-family: var(--font-mono); font-weight: 400; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin: 0 0 6px; }
.dw-moment ul, .dw-did, .dw-violations { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dw-moment li { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; color: var(--fg); padding: 4px 8px; border-left: 3px solid var(--line-strong); background: var(--inset); overflow-wrap: anywhere; }
.dw-moment li[data-lane="attempt"] { border-left-color: var(--cyan); }
.dw-moment li[data-lane="journal"] { border-left-color: var(--neutral); }
.dw-moment li[data-lane="artifact"] { border-left-color: var(--good); }
.dw-moment li[data-lane="effect"] { border-left-color: var(--caution); }
.dw-moment li[data-lane="input"] { border-left-color: var(--pink); }
.dw-moment li[data-lane="dependant"] { border-left-color: var(--pink); }
.dw-lane-tag { display: inline-block; min-width: 7.5em; color: var(--dim); margin-right: 6px; }
.dw-quiet { color: var(--dim); font-style: italic; }

.dw-ledger { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg2); padding: 10px 12px; }
.dw-ledger__head { margin: 0 0 8px; font-size: 14px; color: var(--dim); }
.dw-ledger__head strong { color: var(--fg); font-family: var(--font-mono); font-weight: 400; }
.dw-ledger__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dw-ledger section { border-top: 2px solid var(--line-strong); padding-top: 6px; min-width: 0; }
.dw-ledger section:nth-child(2) { border-top-color: var(--good); }
.dw-ledger section:nth-child(3) { border-top-color: var(--pink); }
.dw-ledger h3 { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
.dw-ledger h3 span { font-family: var(--font-mono); font-weight: 400; font-size: 11px; color: var(--dim); letter-spacing: .05em; text-transform: uppercase; margin-left: 4px; }
.dw-ledger ul { list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 1.5; }
.dw-ledger li { overflow-wrap: anywhere; }
.dw-stale { color: var(--fail); font-style: normal; font-weight: 600; }

/* ----------------------------------------------------------------- controls */
.dw-panel { display: grid; gap: 10px; }
.dw-input { display: grid; gap: 5px; }
.dw-input__label { font-size: 13.5px; color: var(--dim); }
.dw-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.dw-opt { position: relative; display: inline-flex; }
.dw-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.dw-opt span {
  display: inline-flex; align-items: center; min-height: 32px; padding: 4px 10px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--inset);
  color: var(--dim); font-size: 13.5px; line-height: 1.25; cursor: pointer;
}
.dw-opt:hover span { border-color: var(--line-strong); color: var(--fg); }
.dw-opt input:checked + span { border-color: var(--pink); background: var(--pink-wash); color: var(--fg); }
.dw-opt[data-protective] input:checked + span { border-color: var(--cyan); background: var(--cyan-wash); }
.dw-opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

/* -------------------------------------------------------------- explanation */
.dw-offer { align-self: flex-start; }
.tda-outcome[data-ok="true"] { border-left-color: var(--good); background: var(--good-wash); }
.tda-outcome[data-ok="false"] { border-left-color: var(--fail); background: var(--fail-wash); }
.dw-readout dd { font-size: 15px; }
.dw-readout div.is-bad { border-color: var(--fail); }
.dw-readout div.is-bad dd { color: var(--fail); }
.dw-violations li { font-size: 13.5px; line-height: 1.5; padding: 6px 8px; border-left: 3px solid var(--fail); background: var(--fail-wash); }
.dw-violations strong { font-family: var(--font-mono); color: var(--fail); }
.dw-did li { font-size: 14px; line-height: 1.55; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.dw-did li:last-child { border-bottom: 0; }
.dw-did-head { margin-top: 6px; }

.tda-notes__body ul { padding-left: 1.2em; }
.tda-notes__body li { margin: .3em 0; }

/* -------------------------------------------------------------- narrow */
@media (max-width: 560px) {
  .dw-ledger__cols { grid-template-columns: minmax(0, 1fr); }
  .dw-opt span { min-height: 44px; padding: 6px 12px; font-size: 14.5px; }
  .dw-trace-ctl .tda-anim { width: 100%; }
  .dw-trace-ctl .tda-anim .tda-btn { flex: 1 1 auto; }
  .tda-range { min-height: 44px; }
  .dw-lane-tag { min-width: 0; display: block; }
  .tda-stage-head { flex-direction: column; gap: 2px; }
}