/*!
 * WAJD Teach engine styles. Copyright WAJD Group. Built by WAJD AI.
 *
 * Licensees rebrand by overriding the --wt-* variables only. Nothing else should need
 * touching. Every colour, radius and font here resolves from a variable so a host site
 * can drop this in and have it look like their product rather than like ours.
 */

.wt {
  --wt-accent: var(--gold, #a8801a);
  --wt-accent-ink: var(--gold-ink, #1b1608);
  --wt-ink: var(--ink, #1b1e25);
  --wt-muted: var(--muted, #6a7180);
  --wt-surface: var(--surface, #fff);
  --wt-raised: var(--paper, #f7f6f3);
  --wt-line: var(--line, #ddd9d1);
  --wt-line-strong: var(--line-strong, #c6c1b6);
  --wt-good: var(--good, #2f6d46);
  --wt-good-bg: var(--good-bg, #e8f1eb);
  --wt-warn: var(--warn, #8a5a1c);
  --wt-warn-bg: var(--warn-bg, #f6efe3);
  --wt-bad: var(--bad, #8f3232);
  --wt-bad-bg: var(--bad-bg, #f6eaea);
  --wt-info: var(--info, #2f4a72);
  --wt-info-bg: var(--info-bg, #ecf0f6);
  --wt-radius: 8px;
  --wt-font: inherit;

  font: var(--wt-font);
  color: var(--wt-ink);
  border: 1px solid var(--wt-line-strong);
  border-radius: var(--wt-radius);
  background: var(--wt-surface);
  padding: 1.2rem 1.3rem 1.4rem;
  margin: 1.8rem 0;
  display: block;
}

.wt * { box-sizing: border-box; }
.wt-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.wt-head { margin-bottom: 1rem; }
.wt-kind { text-transform: uppercase; letter-spacing: .09em; font-size: .7rem; font-weight: 700;
  color: var(--wt-accent); margin: 0 0 .35rem; }
.wt-title { margin: 0 0 .4rem; font-size: 1.15rem; }
.wt-intro { margin: 0; color: var(--wt-muted); font-size: .95rem; max-width: 62ch; }

/* Buttons: the engine ships one button system and inherits the host's shape. */
.wt-btn, .wt-btn-quiet, .wt-option, .wt-chip, .wt-icon, .wt-link {
  font: inherit; cursor: pointer; border-radius: 999px; border: 1px solid transparent;
  padding: .5rem 1.1rem; font-weight: 600; font-size: .93rem;
}
.wt-btn { background: var(--wt-accent); color: var(--wt-accent-ink); border-color: var(--wt-accent); }
.wt-btn-quiet { background: transparent; color: var(--wt-ink); border-color: var(--wt-line-strong); }
.wt-btn[disabled] { opacity: .45; cursor: not-allowed; }
.wt-icon { padding: .2rem .55rem; border-color: var(--wt-line-strong); background: transparent;
  color: var(--wt-ink); border-radius: 6px; line-height: 1; }
.wt-link { background: none; border: 0; padding: .2rem 0; color: var(--wt-accent);
  text-decoration: underline; text-underline-offset: 3px; }
.wt-controls { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
.wt-counter { color: var(--wt-muted); font-size: .88rem; }
.wt :focus-visible { outline: 3px solid var(--wt-info); outline-offset: 2px; }

/* Scene */
.wt-stage { border: 1px solid var(--wt-line); border-radius: var(--wt-radius);
  background: var(--wt-raised); padding: .6rem; }
.wt-scene svg { width: 100%; height: auto; display: block; }

/* Scene primitives the authored SVG uses. Elements that a step reveals start hidden and
   are shown by the wt-on class, so a page with no JavaScript shows the base diagram. */
.wt-scene .box { fill: var(--wt-surface); stroke: var(--wt-line-strong); stroke-width: 1.5; }
.wt-scene .gold-box { stroke: var(--wt-accent); stroke-width: 2; }
.wt-scene .good-box { fill: var(--wt-good-bg); stroke: var(--wt-good); }
.wt-scene .bad-box { fill: var(--wt-bad-bg); stroke: var(--wt-bad); }
.wt-scene .node { fill: var(--wt-surface); stroke: var(--wt-line-strong); stroke-width: 2; }
.wt-scene .link { stroke: var(--wt-line-strong); stroke-width: 2; fill: none; }
.wt-scene .link.thick { stroke-width: 3; }
.wt-scene .curve { stroke: var(--wt-accent); stroke-width: 3; fill: none; }
.wt-scene .phase { fill: var(--wt-raised); stroke: var(--wt-line); }
.wt-scene .window { fill: var(--wt-good-bg); stroke: var(--wt-good); stroke-dasharray: 5 4; opacity: .55; }
.wt-scene .danger { fill: var(--wt-bad-bg); stroke: var(--wt-bad); stroke-dasharray: 5 4; opacity: .5; }
.wt-scene .marker { fill: var(--wt-accent); stroke: var(--wt-surface); stroke-width: 2; }
.wt-scene .brk line { stroke: var(--wt-bad); stroke-width: 5; stroke-linecap: round; }
.wt-scene .lab { fill: var(--wt-ink); font-size: 13px; text-anchor: middle;
  font-family: inherit; }
.wt-scene .lab.small { font-size: 11px; fill: var(--wt-muted); }
.wt-scene .lab.big { font-size: 26px; fill: var(--wt-accent); }
.wt-scene .lab.bold { font-weight: 700; }
.wt-scene .lab.left { text-anchor: start; }
.wt-scene .lab.right { text-anchor: end; }
.wt-scene .lab.rot { writing-mode: vertical-rl; }

/* Domain scene primitives. Authored SVG uses these so a licensee inherits the theme
   rather than inheriting our colours. Add new ones here, never inline on the element. */
.wt-scene .wheel { fill: none; stroke: var(--wt-ink); stroke-width: 5; }
.wt-scene .hub { fill: var(--wt-muted); }
.wt-scene .tube { fill: none; stroke: var(--wt-ink); stroke-width: 7; stroke-linejoin: round; }
.wt-scene .bar, .wt-scene .saddle { stroke: var(--wt-ink); stroke-width: 7; stroke-linecap: round; }
.wt-scene .chainring { fill: none; stroke: var(--wt-accent); stroke-width: 4; }
.wt-scene .cog { fill: none; stroke: var(--wt-accent); stroke-width: 3; }
.wt-scene .chain { stroke: var(--wt-muted); stroke-width: 3; }
.wt-scene .rim { fill: none; stroke: var(--wt-ink); stroke-width: 8; }
.wt-scene .rim.inner { stroke: var(--wt-muted); stroke-width: 3; }
.wt-scene .arm { stroke: var(--wt-ink); stroke-width: 8; stroke-linecap: round; }
.wt-scene .pivot { fill: var(--wt-muted); }
.wt-scene .pad { fill: var(--wt-accent); stroke: var(--wt-ink); stroke-width: 1.5; }
.wt-scene .cable { stroke: var(--wt-ink); stroke-width: 3; fill: none; }
.wt-scene .pinch { fill: var(--wt-ink); }
.wt-scene .callout-box { fill: var(--wt-info-bg); stroke: var(--wt-info); stroke-width: 1.5; }
.wt-scene .callout-box.bad { fill: var(--wt-bad-bg); stroke: var(--wt-bad); }
.wt-scene .dpc { fill: var(--wt-info); }
.wt-scene .brick { fill: var(--wt-warn-bg); stroke: var(--wt-warn); stroke-width: 2; }
.wt-scene .perp { stroke: var(--wt-bad); stroke-width: 3; stroke-dasharray: 4 3; }
.wt-scene .stringline { stroke: var(--wt-good); stroke-width: 2; stroke-dasharray: 7 4; }
.wt-scene .pin { fill: var(--wt-good); }
.wt-scene .gaugerod { fill: var(--wt-raised); stroke: var(--wt-ink); stroke-width: 1.5; }
.wt-scene .gaugemark { stroke: var(--wt-accent); stroke-width: 2.5; }
.wt-scene .plumbline { stroke: var(--wt-info); stroke-width: 2.5; stroke-dasharray: 5 4; }
.wt-scene .funnel { fill: var(--wt-raised); stroke: var(--wt-line-strong); stroke-width: 2; }
.wt-scene .funnel.gold { fill: var(--wt-good-bg); stroke: var(--wt-good); }
.wt-scene .leak { stroke: var(--wt-bad); stroke-width: 2.5; stroke-dasharray: 4 3; }

.wt-scene .pipe { stroke: var(--wt-info); stroke-width: 9; fill: none; stroke-linecap: round; }
.wt-scene .pipe.bad { stroke: var(--wt-bad); stroke-dasharray: 7 5; stroke-width: 5; }
.wt-scene .fixture { fill: var(--wt-surface); stroke: var(--wt-line-strong); stroke-width: 2.5; }
.wt-scene .gapline { stroke: var(--wt-good); stroke-width: 4; stroke-dasharray: 4 3; }
.wt-scene .arrow-bad { stroke: var(--wt-bad); stroke-width: 4; marker-end: none; stroke-dasharray: 6 4; }
.wt-scene .dirt { fill: var(--wt-bad); opacity: .5; }
.wt-scene .timber { fill: var(--wt-warn-bg); stroke: var(--wt-warn); stroke-width: 3; }
.wt-scene .bearing { fill: var(--wt-muted); }
.wt-scene .zone-ok { fill: var(--wt-good); opacity: .18; }
.wt-scene .zone-ok2 { fill: var(--wt-info); opacity: .15; }
.wt-scene .cut-ok { fill: var(--wt-good); }
.wt-scene .cut-bad { fill: var(--wt-bad); }

/* Step reveal and highlight. Transitions are short and only fire on a user action. */
/* Anything a step controls starts hidden. The engine adds wt-on to reveal it. Groups
   are opted in by carrying an id, which is how the author signals "this one moves". */
.wt-scene > svg > g[id] { opacity: 0; transition: opacity .28s ease; }
.wt-scene .brk, .wt-scene .window, .wt-scene .danger { opacity: 0; transition: opacity .28s ease; }
.wt-scene .wt-on, .wt-scene .wt-on * { opacity: 1; }
.wt-scene .wt-hi { transition: opacity .28s ease, stroke-width .2s ease; }
.wt-scene .wt-hi rect, .wt-scene .wt-hi circle, .wt-scene circle.wt-hi, .wt-scene rect.wt-hi {
  stroke: var(--wt-accent); stroke-width: 3.5;
}
.wt-scene path.wt-hi { stroke: var(--wt-accent); stroke-width: 4; }
.wt-scene .wt-hi .lab { font-weight: 700; }

/* No JavaScript: reveal everything rather than showing an empty diagram. */
.wt-noscript .wt-scene * { opacity: 1 !important; }

.wt-panel { margin-top: 1rem; }
.wt-step-title { margin: 0 0 .3rem; font-size: 1.02rem; }
.wt-step-text { margin: 0; max-width: 66ch; }
.wt-note { margin: .8rem 0 0; padding: .6rem .8rem; background: var(--wt-info-bg);
  border-left: 3px solid var(--wt-info); border-radius: 0 4px 4px 0; font-size: .92rem; }

/* Sequencer */
.wt-seq { list-style: none; padding: 0; margin: 1rem 0 0; counter-reset: none; }
.wt-seq-item { display: grid; grid-template-columns: 34px 1fr auto; gap: .7rem; align-items: center;
  border: 1px solid var(--wt-line); border-radius: 6px; padding: .6rem .8rem; margin-bottom: .5rem;
  background: var(--wt-raised); }
.wt-seq-n { font-weight: 700; color: var(--wt-accent); text-align: center; }
.wt-seq-moves { display: flex; gap: .3rem; }
.wt-seq-why { grid-column: 1 / -1; margin: .4rem 0 0; font-size: .9rem; color: var(--wt-muted); }
.wt-right { border-color: var(--wt-good); background: var(--wt-good-bg); }
.wt-wrong { border-color: var(--wt-bad); background: var(--wt-bad-bg); }
.wt-right .wt-seq-why, .wt-wrong .wt-seq-why { color: inherit; }

/* Sorter */
.wt-sort { display: grid; gap: .7rem; margin-top: 1rem; }
.wt-sort-item { border: 1px solid var(--wt-line); border-radius: 6px; padding: .8rem .9rem;
  background: var(--wt-raised); }
.wt-sort-label { margin: 0 0 .6rem; font-weight: 600; }
.wt-sort-bins { display: flex; gap: .4rem; flex-wrap: wrap; }
.wt-chip { padding: .3rem .8rem; font-size: .86rem; border-color: var(--wt-line-strong);
  background: var(--wt-surface); color: var(--wt-ink); }
.wt-chosen { background: var(--wt-accent); border-color: var(--wt-accent); color: var(--wt-accent-ink); }
.wt-sort-why { margin: .6rem 0 0; font-size: .9rem; }
.wt-legend { margin-top: 1rem; display: grid; gap: .3rem; font-size: .88rem; color: var(--wt-muted); }

/* Branch */
.wt-branch { border: 1px solid var(--wt-line); border-radius: var(--wt-radius);
  padding: 1rem 1.1rem; background: var(--wt-raised); margin-top: 1rem; }
.wt-situation { font-size: 1.02rem; margin: 0 0 .8rem; max-width: 64ch; }
.wt-prompt { font-weight: 600; margin: 0 0 .7rem; }
.wt-options { display: grid; gap: .5rem; }
.wt-option { background: var(--wt-surface); border-color: var(--wt-line-strong);
  color: var(--wt-ink); text-align: left; border-radius: 6px; }
.wt-option:hover { border-color: var(--wt-accent); }
.wt-outcome { border-left: 4px solid var(--wt-line-strong); border-radius: 0 6px 6px 0;
  padding: .9rem 1.1rem; margin: .4rem 0 0; }
.wt-verdict-label { text-transform: uppercase; letter-spacing: .08em; font-size: .74rem;
  font-weight: 700; margin: 0 0 .4rem; }
.wt-verdict-good { background: var(--wt-good-bg); border-left-color: var(--wt-good); }
.wt-verdict-good .wt-verdict-label { color: var(--wt-good); }
.wt-verdict-poor { background: var(--wt-warn-bg); border-left-color: var(--wt-warn); }
.wt-verdict-poor .wt-verdict-label { color: var(--wt-warn); }
.wt-verdict-unsafe, .wt-verdict-unlawful { background: var(--wt-bad-bg); border-left-color: var(--wt-bad); }
.wt-verdict-unsafe .wt-verdict-label, .wt-verdict-unlawful .wt-verdict-label { color: var(--wt-bad); }

/* Calculator */
.wt-calc { display: grid; gap: .8rem; margin-top: 1rem; }
.wt-calc-row { display: grid; gap: .3rem; }
.wt-calc-label { font-weight: 600; font-size: .93rem; }
.wt-calc-select { font: inherit; padding: .5rem .6rem; border: 1px solid var(--wt-line-strong);
  border-radius: 6px; background: var(--wt-surface); color: var(--wt-ink); max-width: 420px; }
.wt-calc-help { margin: .2rem 0 0; font-size: .86rem; color: var(--wt-muted); max-width: 60ch; }
.wt-calc-out { margin-top: 1rem; border: 1px solid var(--wt-line-strong); border-radius: var(--wt-radius);
  padding: .9rem 1.1rem; }
.wt-calc-total { font-weight: 700; font-size: 1.1rem; margin: 0 0 .3rem; }
.wt-calc-band { font-weight: 700; margin: 0 0 .3rem; }
.wt-calc-missing { color: var(--wt-muted); font-size: .9rem; margin: 0; }
.wt-calc-flag { margin: .6rem 0 0; font-weight: 600; color: var(--wt-warn); }
.wt-calc-foot { margin: .7rem 0 0; font-size: .88rem; color: var(--wt-muted); }
.wt-tone-good { background: var(--wt-good-bg); border-color: var(--wt-good); }
.wt-tone-warn { background: var(--wt-warn-bg); border-color: var(--wt-warn); }
.wt-tone-bad { background: var(--wt-bad-bg); border-color: var(--wt-bad); }

/* Hotspot */
.wt-spots .wt-spot circle { fill: var(--wt-accent); stroke: var(--wt-surface); stroke-width: 2;
  cursor: pointer; }
.wt-spots .wt-spot text { fill: var(--wt-accent-ink); font-size: 13px; font-weight: 700;
  pointer-events: none; }
.wt-spots .wt-spot-on circle { fill: var(--wt-info); }
.wt-detail { margin-top: 1rem; border: 1px solid var(--wt-line); border-radius: var(--wt-radius);
  padding: .9rem 1.1rem; background: var(--wt-raised); min-height: 90px; }
.wt-detail-h { margin: 0 0 .3rem; }
.wt-detail-hint { color: var(--wt-muted); margin: 0; }
.wt-spot-list { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .2rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* Compare */
.wt-table-scroll { overflow-x: auto; margin-top: 1rem; border: 1px solid var(--wt-line);
  border-radius: var(--wt-radius); }
.wt-table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: .93rem; }
.wt-table th, .wt-table td { text-align: left; padding: .65rem .8rem;
  border-bottom: 1px solid var(--wt-line); vertical-align: top; }
.wt-table thead th { background: var(--wt-raised); font-size: .8rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--wt-muted); }
.wt-criterion { width: 150px; font-weight: 600; }
.wt-takeaway { margin: 1rem 0 0; padding: .8rem 1rem; background: var(--wt-info-bg);
  border-left: 3px solid var(--wt-info); border-radius: 0 4px 4px 0; }

/* Results and fallback */
.wt-result { margin-top: 1rem; border-radius: var(--wt-radius); padding: .9rem 1.1rem;
  border: 1px solid var(--wt-line-strong); }
.wt-result-h { font-weight: 700; margin: 0 0 .3rem; }
.wt-pass { background: var(--wt-good-bg); border-color: var(--wt-good); }
.wt-partial { background: var(--wt-warn-bg); border-color: var(--wt-warn); }
.wt-fallback { margin-top: 1.2rem; border-top: 1px solid var(--wt-line); padding-top: .8rem;
  font-size: .92rem; color: var(--wt-muted); }
.wt-fallback summary { cursor: pointer; font-weight: 600; }
.wt-fallback p { margin: .6rem 0 0; max-width: 68ch; }
.wt-error { color: var(--wt-bad); }

@media (max-width: 640px) {
  .wt { padding: 1rem; }
  .wt-seq-item { grid-template-columns: 28px 1fr; }
  .wt-seq-moves { grid-column: 2; justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .wt-scene *, .wt-scene .wt-hi { transition: none !important; }
}

@media print {
  .wt-controls, .wt-seq-moves, .wt-options, .wt-calc-select { display: none !important; }
  .wt-scene * { opacity: 1 !important; }
  .wt { break-inside: avoid; }
}