/* proof-map.css · Halcyon candidate branch · interactive proof-map flowchart.
   Layers the motion + interactive styling for the SVG node-graph that
   proof-map.js builds, on top of the shared Datum tokens in halcyon.css.
   Every color is a token, so light and dark themes repaint for free.
   All motion is gated behind prefers-reduced-motion: no-preference, with a
   fully-drawn static fallback. Owns ONLY classes this surface introduces
   (pm-wall / pm-zone / pm-node-g / pm-result-* / pm-detail / pm-gate-glow);
   the base pm-link / pm-node-ring / pm-pointer styling stays in halcyon.css.

   ## Zero-trust — presentation only, no behavior, no network, no data path.
   ## Red-team — a hostile page cannot read anything from a stylesheet; the
      only surface here is visual emphasis. Reduced motion removes all motion. */

/* The stage hugs the rendered graph so there is no empty band below it.
   The SVG fills the column width and its height tracks the graph (auto),
   so the map stays prominent on a wide column and clean on a narrow one. */
.analysis-stage {
  min-height: 0;
}
.analysis-stage .halcyon-proof-map {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- zone labels (Sources / Review) -------------------------------------- */
.pm-zone {
  fill: var(--text-dimmer);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---- the controlled-data boundary wall ----------------------------------- */
.pm-wall {
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-dasharray: 5 6;
  opacity: 0.82;
}
.pm-wall-label {
  fill: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pm-wall-sub {
  fill: var(--text-dimmer);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* the thin highlight bar that runs the wall on a filter switch */
.pm-wall-sweep {
  fill: var(--accent);
  opacity: 0;
}

/* ---- paths (override base width + add the dim/focus emphasis states) ------ */
.pm-link {
  fill: none;
  stroke-linecap: round;
  opacity: 0.62;
  transition: opacity 0.25s ease, stroke-width 0.25s ease;
}
.pm-link.is-coral { stroke: var(--coral); }
.pm-link.is-dim { opacity: 0.16; }
.pm-node-g:hover ~ .pm-link,
.pm-link.is-focus { opacity: 1; }

/* ---- node group (interactive) -------------------------------------------- */
.pm-node-g {
  cursor: pointer;
  outline: none;
}
.pm-node-g.is-faded { opacity: 0.28; }
.pm-node-ring {
  transition: r 0.18s ease, stroke-width 0.18s ease, filter 0.18s ease;
}
.pm-node-ring.is-focus {
  r: 16;
  stroke-width: 2.4;
}
.pm-node-g:hover .pm-node-ring,
.pm-node-g:focus-visible .pm-node-ring {
  r: 16;
  stroke-width: 2.4;
}
.pm-node-g:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}
.pm-record-lock {
  fill: none;
  stroke: var(--text-dimmer);
  stroke-width: 1;
}
.pm-label.is-bold {
  fill: var(--text);
  font-weight: 700;
}

/* ---- the human-review gate ----------------------------------------------- */
.pm-gate-glow {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.2;
  opacity: 0.4;
}
.pm-gate-ring {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
}
.pm-gate-dot { fill: var(--gold); }
.pm-gate-g:hover .pm-gate-glow { opacity: 0.7; }

/* ---- the arm to the result + the result card (gold = the deliverable) ---- */
.pm-result-arm {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-dasharray: 2 4;
  opacity: 0.7;
  marker-end: none;
}
.pm-result-card {
  fill: var(--gold-pale);
  stroke: var(--gold);
  stroke-width: 1.5;
}
.pm-result-line { fill: var(--gold); opacity: 0.85; }

/* ---- the hover detail tag ------------------------------------------------- */
.pm-detail {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.pm-detail.is-on { opacity: 1; }
.pm-detail-pill {
  fill: var(--surface-2);
  stroke: var(--border-accent);
  stroke-width: 1;
}
.pm-detail-text {
  fill: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
}

/* ---- the "this department at a glance" counts (sidebar, real totals) ------ */
.pm-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.pm-count {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  min-width: 0;
}
.pm-count-num {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}
.pm-count-num.is-share { color: var(--accent); }
.pm-count-num.is-held { color: var(--coral); }
.pm-count-cap {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dimmer);
  line-height: 1.3;
}

/* ============================================================
   MODE-AWARE companion panels: the Guided walkthrough + the Detailed table.
   proof-map.js shows ONE of these per view mode (Visual shows neither, so the
   diagram stands alone). Self-contained styles so analysis.html needs no extra
   stylesheet. Every color is a Datum token (AA in both themes).
   ============================================================ */

/* small uppercase mono hint, used in the detail panel head */
.admin-hint {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-dimmer);
}

/* GUIDED · the three-beat walkthrough */
.walk-list {
  margin: var(--space-3) 0 var(--space-4);
  padding-left: 1.4em;
  display: grid;
  gap: var(--space-3);
}
.walk-list li {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-dim);
}
.walk-list li::marker {
  color: var(--accent);
  font-family: var(--mono);
  font-weight: 700;
}

/* DETAILED · the full per-department table */
.pm-table-wrap { overflow-x: auto; margin-top: var(--space-2); }
.pm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.pm-table-cap {
  text-align: left;
  caption-side: top;
  font-size: 12.5px;
  color: var(--text-dim);
  margin-bottom: var(--space-3);
  line-height: 1.5;
}
.pm-table th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-dimmer);
  font-weight: 600;
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.pm-table td {
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-dim);
  vertical-align: middle;
}
.pm-table .pm-td-name { color: var(--text); font-weight: 600; }
.pm-table .pm-td-protected {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dimmer);
  white-space: nowrap;
}
.pm-table tr:last-child td { border-bottom: none; }
.pm-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  white-space: nowrap;
}
.pm-tag.is-shared { color: var(--accent); border-color: var(--border-accent); background: var(--accent-pale); }
.pm-tag.is-reviewed { color: var(--ok); border-color: rgba(75,191,134,0.4); background: var(--ok-wash); }
.pm-tag.is-held { color: var(--gold); border-color: var(--gold-soft); background: var(--gold-pale); }

/* ============================================================
   MOTION — only when the reader has not asked to reduce it.
   The staged entrance: wall draws, nodes pop in sequence, paths
   draw, gate + result settle. Pointer travel is driven in JS.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .pm-wall-draw {
    animation: pm-draw 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  .pm-link-draw {
    animation: pm-draw 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  .pm-node-pop {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: pm-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  /* the gate breathes slowly — waiting for a decision */
  .pm-gate-glow {
    animation: pm-breathe 3.2s ease-in-out infinite;
  }
  /* the highlight bar travels the wall top to bottom on a filter switch */
  .pm-wall-sweep.is-sweep {
    animation: pm-sweep 0.6s ease-out forwards;
  }
}

@keyframes pm-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes pm-pop {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes pm-breathe {
  0%, 100% { opacity: 0.32; }
  50% { opacity: 0.66; }
}
@keyframes pm-sweep {
  0% { opacity: 0.9; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(312px); }
}

/* reduced motion: everything is drawn and still, nothing loops */
@media (prefers-reduced-motion: reduce) {
  .pm-wall-draw,
  .pm-link-draw { stroke-dashoffset: 0 !important; }
  .pm-node-pop { opacity: 1 !important; transform: none !important; }
  .pm-gate-glow,
  .pm-wall-sweep.is-sweep { animation: none !important; }
}

/* ---- narrow viewports: keep the four-zone read legible, no overflow ------ */
@media (max-width: 600px) {
  .analysis-stage { min-height: 380px; }
  .pm-zone,
  .pm-wall-sub { font-size: 9px; }
  .pm-detail-text { font-size: 10px; }
}