/* A shared constellation: possibilities become evidence, then a defense task. */
.blackboard-figure {
  --board-accent: #a6ceff;
  --board-progress: 0;
  overflow: hidden;
  border: 1px solid #294561;
  border-radius: 16px;
  background: #0a1a2d;
}
.blackboard-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 54px;
  padding: 13px 28px;
  border-bottom: 1px solid #233c56;
  color: #abc0d8;
}
.blackboard-wordmark { display: flex; align-items: center; gap: 10px; color: #e6f0ff; font-size: 14px; letter-spacing: .02em; }
.blackboard-wordmark > span { color: #abc0d8; font-size: 12px; }
.blackboard-wordmark > i { width: 5px; height: 5px; background: var(--board-accent); border-radius: 50%; }
.blackboard-context { color: #abc0d8; font-size: 12px; letter-spacing: .03em; }
.blackboard-canvas { padding: 8px 20px 0; }
.blackboard-graph { display: block; width: 100%; max-width: 1000px; height: auto; margin-inline: auto; }
.graph-mobile { display: none; }
.graph-starfield { opacity: .17; }
.graph-starfield path { fill: none; stroke: #427296; stroke-width: .75; }
.graph-starfield circle { fill: #87b3da; }
.blackboard-graph text { fill: #dceaff; font-family: var(--font); font-size: 18px; paint-order: stroke; stroke: #0a1a2d; stroke-width: 5px; stroke-linejoin: round; }
.blackboard-graph .graph-small { fill: #afc3db; font-size: 15px; }
.blackboard-graph .graph-status { font-size: 24px; font-weight: 600; fill: #d6e6f8; }
.graph-node circle { fill: #a6ceff; stroke: #d6e8ff; stroke-width: 1.1; }
.graph-node .graph-orbit { fill: #10243a; stroke: #43668b; stroke-width: 1; }
.graph-candidate circle { fill: #b27779; stroke: #e9a8a5; }
.graph-core-dot { fill: #a6ceff; }
.graph-hub > circle { fill: #10243a; stroke: #648cbb; stroke-width: 1; }
.graph-hub > path { fill: none; stroke: #a6ceff; stroke-width: 1.3; }
.graph-hub > .graph-hub-star { fill: #d9ebff; stroke: none; }
.graph-wires > path { fill: none; stroke: #628bb6; stroke-width: 1; }
.graph-wires > .graph-offense { stroke: #cf8c8a; }
.graph-wires > .graph-tracer { stroke: #d4e9ff; stroke-width: 2; stroke-linecap: round; }
.graph-wires > .graph-tracer.graph-offense { stroke: #f2aba6; }
.graph-wires > .graph-dead-end { stroke: #6c829b; stroke-dasharray: 4 5; }
.graph-wires > .graph-return { stroke: #699bd0; stroke-dasharray: 3 5; }
.graph-result circle { fill: #102944; stroke: #a6ceff; stroke-width: 1.3; }
.graph-result .graph-check { fill: none; stroke: #d9eaff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.graph-rejected circle { fill: #10243a; stroke: #8a9eb5; stroke-width: 1; }
.graph-rejected .graph-block { fill: none; stroke: #a5b9cf; stroke-width: 1.5; stroke-linecap: round; }
/* Future routes remain readable. Checks and crosses appear only after validation. */
.blackboard-graph [data-graph-from] { transition: stroke 450ms ease, fill 450ms ease; }
.board-ready .graph-wires > path:not(.graph-tracer) { opacity: .32; transition: opacity .5s ease, stroke .5s ease; }
.board-ready .graph-wires > path.is-reached:not(.graph-tracer) { opacity: .65; }
.board-ready .graph-wires > path.is-current:not(.graph-tracer) { opacity: .9; stroke-width: 1.5; }
.board-ready .graph-wires > .graph-tracer { stroke-dasharray: 4 96; stroke-dashoffset: 100; opacity: 0; }
.board-ready .graph-wires > .graph-tracer.is-current { opacity: 1; animation: board-transit 2.6s linear infinite; }
.board-ready .graph-candidate.is-current circle { fill: #f28a84; stroke: #ffd2ce; }
.board-ready .graph-input.is-current > circle:not(.graph-orbit) { fill: #e4f2ff; }
.board-ready .blackboard-figure[data-phase="0"] .graph-check,
.board-ready .blackboard-figure[data-phase="0"] .graph-block,
.board-ready .blackboard-figure[data-phase="1"] .graph-check,
.board-ready .blackboard-figure[data-phase="1"] .graph-block { opacity: 0; }
.board-ready .blackboard-figure[data-phase="0"] .graph-status,
.board-ready .blackboard-figure[data-phase="1"] .graph-status { font-size: 18px; font-weight: 400; fill: #a7bdd6; }
.board-ready .blackboard-figure[data-phase="0"] .graph-result circle,
.board-ready .blackboard-figure[data-phase="1"] .graph-result circle { fill: #10243a; stroke: #6d87a4; stroke-dasharray: 2 3; }
.board-ready .blackboard-figure[data-phase="0"] .graph-rejected circle,
.board-ready .blackboard-figure[data-phase="1"] .graph-rejected circle { stroke-dasharray: 2 3; }
.board-ready .blackboard-figure[data-phase="2"] .graph-result .graph-status,
.board-ready .blackboard-figure[data-phase="3"] .graph-result .graph-status { fill: #c3e0ff; }
.board-ready .blackboard-figure[data-phase="2"] .graph-service-wire:not(.graph-tracer),
.board-ready .blackboard-figure[data-phase="3"] .graph-service-wire:not(.graph-tracer) { stroke: #6b7e95; stroke-dasharray: 3 5; opacity: .45; }
.board-ready .blackboard-figure[data-phase="2"] .graph-alternative circle,
.board-ready .blackboard-figure[data-phase="3"] .graph-alternative circle { fill: #75899f; stroke: #91a7bd; }
.board-ready .blackboard-figure[data-phase="3"] .graph-hub > circle:first-child { stroke: #b9d9ff; fill: #163557; }
.board-ready .blackboard-figure[data-playing="false"] .graph-tracer { animation-play-state: paused; }
.board-ready .blackboard-figure[data-playing="false"] [data-graph-from] { transition: none; }
.board-defense-point { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0; padding: 0 18px 19px; color: #b8d9ff; font-size: 13px; line-height: 1.6; }
.board-defense-dot { width: 5px; height: 5px; background: #a6ceff; border-radius: 50%; }
.blackboard-narration { display: flex; align-items: flex-start; gap: 24px; min-height: 109px; padding: 20px 30px; border-top: 1px solid #233c56; background: #10243a; }
.blackboard-narration > span:first-child { flex-shrink: 0; padding-top: 5px; color: #a6ceff; font-size: 12px; font-variant-numeric: tabular-nums; }
.blackboard-narration strong { display: block; font-size: 18px; font-weight: 500; line-height: 1.6; color: #e6f0ff; }
.blackboard-narration p { margin: 4px 0 0; color: #b6c9df; font-size: 14px; line-height: 1.8; }
.board-takeaway { margin: 0; padding: 17px 30px; border-top: 1px solid #233c56; color: #a7bdd6; font-size: 13px; line-height: 1.8; }
.board-takeaway strong { color: #cfdef0; font-weight: 400; }
.blackboard-steps { display: none; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #294561; }
.board-ready .blackboard-steps { display: grid; }
.blackboard-steps button { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 58px; padding: 14px 10px; border: 0; border-right: 1px solid #233c56; background: #0b1b2e; color: #b1c8e2; font-size: 14px; }
.blackboard-steps button:last-child { border-right: 0; }
.blackboard-steps b { font-size: 12px; font-weight: 400; color: #8eafd4; font-variant-numeric: tabular-nums; }
.blackboard-steps button::before { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 2px; background: var(--board-accent); transform: scaleX(0); transform-origin: left; }
.blackboard-steps button[aria-pressed="true"] { background: #16314e; color: #ecf4ff; }
.blackboard-steps button[aria-pressed="true"]::before { transform: scaleX(var(--board-progress)); }
.blackboard-steps button:hover { color: #ecf4ff; background: #122c46; }
.blackboard-steps button:focus-visible { outline: 2px solid #b5d2ff; outline-offset: -4px; }
.blackboard-figure figcaption { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 28px; color: #9bb6d4; font-size: 12px; border-top: 1px solid #233c56; }
.blackboard-figure figcaption a { flex-shrink: 0; color: #b6d4f5; font-size: 13px; }
.blackboard-figure figcaption a:hover { color: #edf5ff; }
@keyframes board-transit { to { stroke-dashoffset: 0; } }
@media (max-width: 1000px) {
  .blackboard-narration strong { font-size: 16px; }
  .blackboard-narration { min-height: 117px; }
}
@media (max-width: 760px) {
  .blackboard-lead > p br { display: none; }
  .blackboard-toolbar { padding: 12px 18px; gap: 10px; }
  .blackboard-wordmark { font-size: 13px; gap: 7px; }
  .blackboard-wordmark > span { display: none; }
  .blackboard-context { font-size: 11px; letter-spacing: 0; }
  .blackboard-canvas { padding: 12px 10px 0; }
  .blackboard-narration { gap: 16px; padding: 18px 20px; }
  .blackboard-narration p { font-size: 13px; }
  .board-takeaway { padding: 15px 20px; }
  .blackboard-figure figcaption { padding: 13px 18px; gap: 12px; line-height: 1.6; }
}
@media (max-width: 620px) {
  .blackboard-figure { border-radius: 12px; }
  .blackboard-toolbar { min-height: 48px; padding: 11px 14px; }
  .blackboard-context { font-size: 10px; }
  .blackboard-canvas { padding: 0; }
  .graph-desktop { display: none; }
  .graph-mobile { display: block; max-width: 400px; }
  .blackboard-graph text { font-size: 18px; }
  .blackboard-graph .graph-small { font-size: 15px; }
  .blackboard-graph .graph-status { font-size: 22px; }
  .board-defense-point { padding-bottom: 16px; font-size: 12px; }
  .blackboard-narration { display: block; padding: 16px 18px; min-height: 146px; }
  .blackboard-narration > span:first-child { display: block; margin-bottom: 6px; padding: 0; font-size: 11px; }
  .blackboard-narration strong { font-size: 15px; }
  .blackboard-narration p { line-height: 1.8; }
  .board-takeaway { padding: 13px 18px; font-size: 12px; }
  .board-takeaway strong { display: block; }
  .blackboard-steps button { flex-direction: column; gap: 4px; min-height: 62px; padding: 9px 3px; font-size: 12px; }
  .blackboard-steps b { font-size: 11px; }
  .blackboard-figure figcaption { align-items: flex-start; padding: 12px 14px; font-size: 11px; }
  .blackboard-figure figcaption a { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .blackboard-graph [data-graph-from] { transition: none; }
  .board-ready .graph-wires > path:not(.graph-tracer) { transition: none; }
  .board-ready .graph-wires > .graph-tracer { animation: none; display: none; }
}