@import url("../css/tokens.css");

* { box-sizing: border-box; }
body { margin: 0; padding: 1.25rem 1.25rem .75rem; background: var(--bg); color: var(--ink); font-family: var(--sans); }
.shell { max-width: 1440px; margin: 0 auto; }
.masthead { margin-bottom: .8rem; }
.eyebrow, .kicker { margin: 0 0 .5rem; color: var(--teal); font: .7rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--teal) 38%, transparent); }
h1, h2 { font-family: var(--serif); font-weight: 600; }
h1 { max-width: 700px; margin: 0 0 .55rem; font-size: 1.85rem; line-height: 1.1; }
h2 { margin: 0; font-size: 1.25rem; }
.lede { max-width: 720px; margin: 0; color: var(--sub); line-height: 1.4; }
.controls, .stage-card, .info-card { border: 1px solid var(--line); background: var(--panel); border-radius: 10px; }
.controls { display: flex; align-items: end; flex-wrap: wrap; gap: .45rem; padding: .55rem .65rem; margin-bottom: .7rem; }
.perm-field { flex: 1 1 360px; min-width: 230px; }
.perm-field span { display: block; margin: 0 0 .3rem .15rem; color: var(--sub); font: .67rem var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.perm-field input { width: 100%; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); color: var(--ink); font: .9rem var(--mono); }
button { border: 1px solid var(--line); border-radius: 7px; padding: .65rem .85rem; color: var(--ink); background: transparent; cursor: pointer; font: .75rem var(--mono); }
button:hover { border-color: var(--teal); color: var(--teal); }
button:disabled { opacity: .35; cursor: default; border-color: var(--line); color: var(--sub); }
button:focus-visible, input:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
button.primary { border-color: var(--teal); background: var(--teal); color: white; }
button.primary:hover { background: color-mix(in srgb, var(--teal) 85%, black); color: white; }
button.secondary { background: var(--teal-soft); border-color: transparent; }
button.icon { padding: .53rem .78rem; font-size: 1.2rem; line-height: 1; }
button.icon.edge { font-size: .82rem; }
.status { align-self: center; min-width: 7rem; color: var(--sub); font: .7rem var(--mono); }
.twintree-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(300px, .72fr); gap: .9rem; align-items: start; }
.stage-card { overflow: hidden; }
.stage-head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding: .75rem 1rem .6rem; border-bottom: 1px solid var(--line); }
.facts { color: var(--sub); font: .7rem var(--mono); text-align: right; line-height: 1.7; }
.stage-wrap { display: grid; place-items: center; min-height: 350px; padding: .65rem; background: var(--panel); }
.stage { display: grid; place-items: center; width: min(100%, 900px); height: min(52vh, 540px); min-height: 320px; }
.stage svg { display: block; width: 100%; height: min(52vh, 540px); max-width: 100%; max-height: 540px; overflow: visible; }
.canvas-bg { fill: var(--panel); stroke: var(--ink); stroke-width: 2; }
.room { stroke: var(--panel); stroke-width: 2; }
.room-label { font-family: var(--mono); font-size: 11px; fill: var(--room-ink); opacity: .82; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.room.focus { stroke: var(--ink); stroke-width: 3; }
.room.root-plus { stroke: var(--teal); stroke-width: 3; }
.room.root-minus { stroke: var(--plum); stroke-width: 3; }
.overlay-layer { pointer-events: none; }
.tree-edge { fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .3s ease, stroke-width .3s ease; }
.tree-edge.plus { stroke: var(--teal); stroke-width: 2.6; }
.tree-edge.minus { stroke: var(--plum); stroke-width: 2.3; stroke-dasharray: 7 5; }
.tree-edge.visible { opacity: .92; }
.tree-edge.active { stroke-width: 4.5; opacity: 1; filter: drop-shadow(0 0 3px color-mix(in srgb, currentColor 35%, transparent)); }
.corner-node { opacity: 0; transition: opacity .3s ease; }
.corner-node.visible { opacity: 1; }
.corner-node circle { fill: var(--panel); stroke: var(--teal); stroke-width: 2.4; }
.cross-mark { fill: none; stroke: var(--plum); stroke-width: 2.6; stroke-linecap: round; }
.corner-node text { fill: var(--room-ink); font: 600 8px var(--mono); text-anchor: middle; dominant-baseline: central; }
.corner-label { transition: opacity .2s ease; }
.morph-label { opacity: 0; font-size: 8.5px !important; }
.morph-circle { opacity: 0; fill: var(--node-fill); stroke: var(--panel); stroke-width: 1.6; }
.face-layer { opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.face-layer line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
.face-layer circle { stroke: none; }
.morphed .room, .morphed .room-label, .morphed .canvas-bg { opacity: 0; transition: opacity .65s ease; }
.morphing .corner-label, .morphed .corner-label { opacity: 0; }
.morphing .corner-node, .morphing .face-layer { transition: none; }
.morphed .morph-label { opacity: 1; }
.morphed .cross-mark { opacity: 0; }
.morphed .morph-circle { opacity: 1; }
.morphed .corner-node circle { fill: var(--node-fill); stroke: var(--panel); stroke-width: 1.6; }
.morphed .tree-edge { stroke: var(--line); stroke-width: 1.6; stroke-dasharray: none; opacity: 1; filter: none; }
.morphed .face-layer { opacity: 1; }
.tile-copy { opacity: 0; pointer-events: none; }
.tile-copy-shape { fill: var(--node-fill); stroke: var(--panel); stroke-width: 1.5; }
.tile-copy-label { fill: var(--room-ink); font: 600 9px var(--mono); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.final-log { border-left-color: var(--amber) !important; }
.legend { display: flex; flex-wrap: wrap; gap: .65rem 1.2rem; padding: .55rem 1rem .6rem; border-top: 1px solid var(--line); color: var(--sub); font: .68rem var(--mono); }
.legend span { display: inline-flex; align-items: center; gap: .4rem; }
.legend-circle { display: inline-block; width: .8rem; height: .8rem; border: 2px solid var(--teal); border-radius: 50%; }
.legend-cross { color: var(--plum); font-size: 1.1rem; line-height: .7; }
.timeline-wrap { padding: .6rem 1rem .7rem; border-top: 1px solid var(--line); }
#timeline { width: 100%; accent-color: var(--teal); }
.timeline-labels { display: flex; justify-content: space-between; color: var(--sub); font: .65rem var(--mono); }
.side-stack { display: grid; gap: .8rem; }
.info-card { min-height: 0; padding: .8rem 1rem; box-shadow: 0 1px 4px rgba(0,0,0,.04); }
.card-heading { display: flex; align-items: start; justify-content: space-between; gap: .8rem; }
.info-button, .modal-close { display: grid; place-items: center; width: 2rem; height: 2rem; padding: .3rem; border: 1px solid var(--line); border-radius: 50%; color: var(--sub); }
.info-button svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.info-button:hover, .modal-close:hover { color: var(--teal); border-color: var(--teal); }
.modal-close { font: 1.35rem/1 var(--sans); }
.move-log { display: grid; gap: .4rem; max-height: 196px; overflow: auto; margin-top: .6rem; padding: .1rem .2rem .2rem 0; scrollbar-width: thin; }
.move-log::after { content: ""; position: sticky; bottom: 0; height: 1.5rem; margin-top: -1.5rem; pointer-events: none; background: linear-gradient(transparent, var(--panel)); opacity: 0; transition: opacity .2s; }
.move-log.is-scrollable::after, .move-log[data-overflow="true"]::after, .move-log.fade-bottom::after { opacity: 1; }
.log-line { width: 100%; padding: .55rem .65rem; border-left: 3px solid var(--line); background: color-mix(in srgb, var(--bg) 55%, var(--panel)); color: var(--sub); cursor: pointer; font: .79rem/1.45 var(--sans); text-align: left; }
.log-line:hover { border-color: var(--teal); color: var(--ink); }
.log-line.plus { border-left-color: var(--teal); }
.log-line.minus { border-left-color: var(--plum); }
.log-line.latest { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.log-line[data-phase], .log-line.transform { border-left-width: 3px; }
.log-line[data-phase="1"], .log-line.transform-1 { border-left-color: var(--teal); }
.log-line[data-phase="2"], .log-line.transform-2 { border-left-color: var(--amber); }
.log-line[data-phase="3"], .log-line.transform-3 { border-left-color: var(--plum); }
.phase-rail { display: flex; align-items: center; gap: .35rem; margin-top: .55rem; padding: .45rem .5rem; border: 1px solid var(--line); border-radius: 7px; background: color-mix(in srgb, var(--bg) 48%, var(--panel)); }
.phase-stop { display: inline-flex; align-items: center; gap: .3rem; padding: 0; border: 0; color: var(--sub); font: .62rem var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.phase-stop:hover { border: 0; color: var(--teal); }
.phase-stop i { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border: 1px solid var(--line); border-radius: 50%; font-style: normal; }
.phase-stop.active i, [data-phase="active"] .phase-stop i { border-color: var(--teal); background: var(--teal); color: white; }
.phase-stop.complete i { border-color: var(--teal); color: var(--teal); }
.phase-connector { flex: 1; height: 1px; min-width: .4rem; background: var(--line); }
.sequence { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .85rem; }
.seq-item { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--line); border-radius: 6px; color: var(--sub); font: .78rem/1 var(--mono); cursor: pointer; }
.seq-item:hover { border-color: var(--teal); }
.seq-item.done { border-color: var(--teal); background: var(--teal-soft); color: var(--teal); }
.seq-item.active { border-color: var(--ink); background: var(--amber); color: var(--ink); transform: translateY(-2px); }
.seq-item.final { width: auto; padding: 0 .55rem; color: var(--amber); }
.match-note { margin: .9rem 0 0; color: var(--sub); font: .72rem var(--mono); line-height: 1.45; }
.match-note.good { color: var(--teal); }
.log-empty, .log-history { padding: .4rem .1rem; color: var(--sub); font: .7rem var(--mono); }
.log-history { display: flex; align-items: center; gap: .35rem; padding-bottom: .05rem; }
.log-history::before { content: "↑"; color: var(--amber); }
.tree-fact-row { display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: center; gap: .55rem; padding: .45rem 0; border-bottom: 1px solid var(--line); color: var(--sub); font: .76rem var(--mono); }
.tree-fact-row:last-of-type { border-bottom: 0; }
.tree-chip { display: inline-grid; place-items: center; width: 2.3rem; height: 1.75rem; border-radius: 5px; color: white; font-weight: 700; }
.tree-chip.plus { background: var(--teal); }
.tree-chip.minus { background: var(--plum); }
.canopy { display: inline-flex; gap: 2px; }
.canopy i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.canopy i.plus { background: var(--teal); }
.canopy i.minus { background: var(--plum); }
.tree-facts { background: linear-gradient(135deg, color-mix(in srgb, var(--teal-soft) 52%, var(--panel)), var(--panel) 58%, color-mix(in srgb, var(--plum) 8%, var(--panel))); }
.tree-facts::before { content: ""; display: block; height: 2.2rem; margin: -.8rem -1rem .55rem; opacity: .55; background: linear-gradient(90deg, var(--teal) 0 48%, transparent 48% 52%, var(--plum) 52%); clip-path: polygon(0 100%, 14% 42%, 27% 76%, 42% 16%, 55% 64%, 70% 28%, 84% 72%, 100% 8%, 100% 100%); }
.callout, .leader-label, [data-callout] { pointer-events: none; }
.callout-line, .leader-line { fill: none; stroke: var(--amber); stroke-width: 1.4; stroke-dasharray: 3 3; opacity: .8; }
.callout-label, .leader-label { fill: var(--ink); font: 600 9px var(--mono); paint-order: stroke; stroke: var(--panel); stroke-width: 3px; stroke-linejoin: round; }
.callout.hidden, [data-callout="hidden"] { opacity: 0; }
.tree-summary { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; white-space: nowrap; }
.tree-summary-root { display: inline-flex; align-items: center; gap: .22rem; font-weight: 700; }
.tree-summary-root::before { content: ""; width: .48rem; height: .48rem; border: 2px solid currentColor; border-radius: 50%; }
.tree-summary-root.minus::before { width: .62rem; height: .62rem; border: 0; border-radius: 0; background: linear-gradient(45deg, transparent 43%, currentColor 44% 56%, transparent 57%), linear-gradient(-45deg, transparent 43%, currentColor 44% 56%, transparent 57%); }
.tree-summary-root.plus, .tree-summary-edge.plus { color: var(--teal); }
.tree-summary-root.minus, .tree-summary-edge.minus { color: var(--plum); }
.tree-summary-edge { width: .9rem; height: 1px; background: currentColor; opacity: .7; }
.tree-summary .canopy { gap: 3px; }
.tree-summary .canopy i { width: 7px; height: 7px; }
.context-explanation { pointer-events: none; }
.context-explanation line { stroke: var(--ink); stroke-width: 1.25; stroke-linecap: round; opacity: .72; }
.context-explanation rect { fill: color-mix(in srgb, var(--panel) 92%, white); stroke: var(--line); stroke-width: .8; rx: 3; }
.context-explanation text { fill: var(--ink); font: 600 5.7px var(--mono); dominant-baseline: middle; }
.error { min-height: 1.3rem; margin: .9rem 0; color: var(--red); font: .78rem var(--mono); }
.error:empty { display: none; }
.rules-dialog { width: min(92vw, 560px); padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); box-shadow: 0 18px 60px rgba(35,38,43,.22); }
.rules-dialog::backdrop { background: rgba(35,38,43,.38); }
.modal-head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.25rem .95rem; border-bottom: 1px solid var(--line); }
.rules-content { padding: 1rem 1.25rem 1.25rem; color: var(--sub); line-height: 1.55; }
.rules-content p { margin: 0 0 .9rem; }
.rules-content p:last-child { margin-bottom: 0; }
.rules-content ol { margin: 0 0 .9rem; padding-left: 1.35rem; }
.rules-content li { padding-left: .25rem; margin: .45rem 0; }
.rules-content strong { color: var(--ink); font-family: var(--mono); font-weight: 600; }
@media (max-width: 760px) { body { padding-top: 1rem; } .stage-wrap { min-height: 320px; } .stage { height: min(54vh, 480px); min-height: 300px; } .stage svg { height: min(54vh, 480px); max-height: 480px; } .twintree-grid { grid-template-columns: 1fr; } .stage-head { flex-direction: column; } .facts { text-align: left; } .status { flex: 1 0 100%; } }