/* FRAME • SYSTEM INTELLIGENCE
   Visual system map layered over the existing command-snapshot.v1 read model.
   No source-of-truth or execution semantics live in this stylesheet/surface. */

.frame-map-section {
  position: relative;
  padding: 34px 0 52px;
  border-bottom: 1px solid var(--line);
}

.frame-map-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.frame-map-heading h2 {
  max-width: 780px;
  font-size: clamp(30px, 4vw, 56px);
  line-height: .96;
}

.frame-map-heading-copy {
  max-width: 420px;
  margin: 0 0 3px;
  color: var(--muted);
  text-align: right;
  font-size: 13px;
}

.frame-preview-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 7px 10px;
  border: 1px solid rgba(101, 216, 255, .28);
  border-radius: 999px;
  color: #98e5ff;
  background: rgba(72, 188, 255, .06);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.frame-preview-badge[hidden] { display: none; }
.frame-preview-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7de4ff;
  box-shadow: 0 0 14px rgba(89, 216, 255, .75);
}

#framePreviewToggle[aria-pressed="true"] {
  color: #9ce8ff;
  border-color: rgba(89, 216, 255, .5);
  background: rgba(89, 216, 255, .07);
}

.frame-map-shell {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  border: 1px solid rgba(142, 143, 180, .24);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 48%, rgba(95, 73, 255, .12), transparent 28%),
    radial-gradient(circle at 18% 72%, rgba(63, 197, 255, .055), transparent 28%),
    linear-gradient(180deg, rgba(10, 12, 22, .98), rgba(5, 7, 14, .99));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035),
    0 28px 80px rgba(0, 0, 0, .28);
  isolation: isolate;
}

.frame-map-shell::before,
.frame-map-shell::after {
  content: '';
  position: absolute;
  inset: -20%;
  pointer-events: none;
}

.frame-map-shell::before {
  z-index: -2;
  opacity: .58;
  background-image:
    linear-gradient(rgba(106, 117, 166, .13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(106, 117, 166, .13) 1px, transparent 1px);
  background-size: 44px 44px;
  transform: perspective(620px) rotateX(13deg) scale(1.05);
  transform-origin: 50% 45%;
  mask-image: radial-gradient(ellipse at center, #000 0%, rgba(0,0,0,.95) 58%, transparent 90%);
}

.frame-map-shell::after {
  z-index: -1;
  opacity: .36;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.012) 3px 4px),
    radial-gradient(circle at 50% 50%, rgba(111, 76, 255, .16), transparent 48%);
  animation: frame-map-breathe 8s ease-in-out infinite alternate;
}

.frame-map-toolbar {
  position: absolute;
  z-index: 6;
  top: 16px;
  left: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}

.frame-map-status,
.frame-map-reset {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 31px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 999px;
  color: rgba(235, 237, 250, .7);
  background: rgba(6, 8, 15, .72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.frame-map-reset {
  cursor: pointer;
}
.frame-map-reset:hover { color: #fff; border-color: rgba(255,255,255,.28); }

.frame-map-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #70ddb0;
  box-shadow: 0 0 14px rgba(112, 221, 176, .65);
}
[data-preview="true"] .frame-map-live-dot {
  background: #65d8ff;
  box-shadow: 0 0 14px rgba(101, 216, 255, .72);
}

.frame-map-stage {
  position: relative;
  min-height: 720px;
}

.frame-map-svg {
  display: block;
  width: 100%;
  height: 720px;
  overflow: visible;
  user-select: none;
  -webkit-user-select: none;
}

.frame-map-edge {
  fill: none;
  stroke: rgba(150, 158, 205, .27);
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
  transition: opacity .35s ease, stroke .35s ease, stroke-width .35s ease;
}
.frame-map-edge.edge-system { stroke: rgba(136, 123, 255, .31); }
.frame-map-edge.edge-intelligence { stroke: rgba(126, 224, 255, .54); stroke-width: 1.45; }
.frame-map-edge.edge-execution { stroke: rgba(116, 214, 181, .5); stroke-dasharray: 6 9; animation: frame-edge-flow 10s linear infinite; }
.frame-map-edge.edge-evidence { stroke: rgba(184, 176, 255, .36); stroke-dasharray: 2 7; animation: frame-edge-flow 14s linear infinite; }
.frame-map-edge.edge-decision { stroke: rgba(242, 240, 232, .44); stroke-width: 1.35; }
.frame-map-edge.edge-needs-owner {
  stroke: rgba(255, 162, 94, .9);
  stroke-width: 2;
  stroke-dasharray: 4 8;
  filter: drop-shadow(0 0 5px rgba(255, 136, 73, .6));
  animation: frame-edge-flow 5.2s linear infinite;
}
.frame-map-edge.is-muted { opacity: .08; }

.frame-map-node {
  cursor: pointer;
  outline: none;
  transition: opacity .35s ease, filter .35s ease, transform .7s cubic-bezier(.22,.8,.24,1);
}
.frame-map-node.is-muted { opacity: .13; }
.frame-map-node:focus-visible .frame-map-node-ring,
.frame-map-node:hover .frame-map-node-ring,
.frame-map-node.is-selected .frame-map-node-ring {
  stroke-opacity: 1;
  stroke-width: 1.8;
}

.frame-map-node-halo {
  fill: rgba(92, 76, 255, .045);
  stroke: none;
  opacity: .8;
  animation: frame-node-pulse 5.8s ease-in-out infinite;
}
.frame-map-node-ring {
  fill: transparent;
  stroke: rgba(149, 141, 255, .33);
  stroke-width: 1;
  stroke-opacity: .65;
  vector-effect: non-scaling-stroke;
  transition: stroke .25s ease, stroke-width .25s ease, stroke-opacity .25s ease;
}
.frame-map-node-core {
  fill: rgba(23, 23, 39, .98);
  stroke: rgba(177, 170, 255, .72);
  stroke-width: 1.1;
  filter: url(#frameGlow);
  vector-effect: non-scaling-stroke;
}
.frame-map-node.kind-core .frame-map-node-core {
  fill: rgba(71, 48, 180, .42);
  stroke: rgba(185, 172, 255, .94);
  stroke-width: 1.6;
}
.frame-map-node.kind-owner .frame-map-node-core {
  fill: rgba(242, 240, 232, .92);
  stroke: #fff;
}
.frame-map-node.kind-actor .frame-map-node-core {
  fill: rgba(34, 70, 81, .88);
  stroke: rgba(112, 222, 255, .78);
}
.frame-map-node:focus-visible .frame-map-node-ring {
  stroke: rgba(173, 162, 255, .98);
  stroke-width: 2.4;
}
.frame-map-node.kind-practice .frame-map-node-core {
  fill: rgba(45, 42, 72, .96);
  stroke: rgba(196, 186, 255, .66);
}
.frame-map-node.kind-evidence .frame-map-node-core {
  fill: rgba(39, 38, 57, .95);
  stroke: rgba(177, 170, 255, .5);
}
.frame-map-node.health-critical .frame-map-node-core,
.frame-map-node.needs-owner .frame-map-node-core {
  stroke: rgba(255, 150, 83, .95);
  filter: drop-shadow(0 0 9px rgba(255, 128, 58, .42));
}
.frame-map-node.health-attention:not(.needs-owner) .frame-map-node-core {
  stroke: rgba(255, 201, 114, .76);
}
.frame-map-node.health-healthy .frame-map-node-core {
  stroke: rgba(109, 222, 177, .75);
}

.frame-map-node-orbit {
  fill: none;
  stroke: rgba(173, 162, 255, .2);
  stroke-width: 1;
  stroke-dasharray: 2 8;
  transform-origin: 0 0;
  animation: frame-orbit 28s linear infinite;
}
.frame-map-node-orbit.orbit-two {
  opacity: .55;
  animation-direction: reverse;
  animation-duration: 38s;
}

.frame-map-node-label,
.frame-map-node-eyebrow,
.frame-map-node-count {
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(5, 7, 14, .96);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.frame-map-node-label {
  fill: rgba(244, 244, 248, .94);
  font-size: 10px;
  font-weight: 720;
  letter-spacing: .08em;
}
.frame-map-node.kind-core .frame-map-node-label { font-size: 13px; letter-spacing: .14em; }
.frame-map-node.kind-evidence .frame-map-node-label { font-size: 8.5px; fill: rgba(235,236,248,.78); }
.frame-map-node.kind-practice .frame-map-node-label { font-size: 9px; fill: rgba(240,240,250,.9); }
.frame-map-node-eyebrow {
  fill: rgba(155, 160, 190, .76);
  font-size: 6.7px;
  font-weight: 660;
  letter-spacing: .1em;
}
.frame-map-node-count {
  fill: #ffbf84;
  stroke-width: 2px;
  font-size: 8px;
  font-weight: 800;
}
.frame-map-node.kind-owner .frame-map-node-label,
.frame-map-node.kind-owner .frame-map-node-eyebrow {
  fill: rgba(245,245,248,.96);
}

.frame-map-detail {
  position: absolute;
  z-index: 5;
  left: 18px;
  bottom: 18px;
  width: min(390px, calc(100% - 36px));
  min-height: 118px;
  /* The panel now carries a WORKFLOW depth, not only four metadata rows. It
     scrolls inside itself rather than growing over the map. */
  max-height: min(66%, 440px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 17px 18px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px;
  color: rgba(237,238,246,.9);
  background: rgba(7, 9, 17, .82);
  box-shadow: 0 20px 60px rgba(0,0,0,.26);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.frame-map-detail-kicker {
  margin: 0 0 5px;
  color: #9b90ff;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.frame-map-detail h3 {
  margin: 0 0 7px;
  font-size: 17px;
  font-weight: 580;
  letter-spacing: -.02em;
}
.frame-map-detail p:not(.frame-map-detail-kicker) {
  margin: 0;
  color: rgba(183,187,208,.78);
  font-size: 11.5px;
  line-height: 1.48;
}
.frame-map-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
  margin-top: 12px;
}
.frame-map-detail-grid div {
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.frame-map-detail-grid span,
.frame-map-detail-grid strong { display: block; }
.frame-map-detail-grid span {
  color: rgba(151,156,182,.64);
  font-size: 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.frame-map-detail-grid strong {
  margin-top: 2px;
  color: rgba(239,240,247,.88);
  font-size: 10.5px;
  font-weight: 560;
}

/* Multi-source provenance (issue #129, point 6): a DERIVED domain with no
   dedicated per-source child node (e.g. Human Intelligence) still names each
   real owning source and its own state — "derived" never means "no source". */
.frame-map-sources {
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.frame-map-sources .frame-map-detail-kicker { margin-top: 0; }
.frame-map-source-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.frame-map-source-row:first-of-type { border-top: none; }
.frame-map-source-row span {
  color: rgba(210,212,228,.86);
  font-size: 10.5px;
}
.frame-map-source-row strong {
  flex-shrink: 0;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.frame-map-source-row strong.grounding-current { color: rgba(129, 226, 186, .92); }
.frame-map-source-row strong.grounding-unknown,
.frame-map-source-row strong.grounding-stale,
.frame-map-source-row strong.grounding-not_operational { color: rgba(255, 186, 138, .92); }

/* WORKFLOW depth — SYSTEM MAP → PRACTICE / DOMAIN → WORKFLOW → EVIDENCE.
   Rendered only from what the owning practice record actually models. */
.frame-map-workflow {
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.frame-map-workflow .frame-map-detail-kicker { margin-top: 0; }
.frame-map-workflow .frame-map-detail-kicker + .frame-map-detail-kicker,
.frame-map-workflow-dependency + .frame-map-detail-kicker,
.frame-map-workflow-steps + .frame-map-detail-kicker { margin-top: 12px; }
.frame-map-workflow-steps {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: frame-step;
}
.frame-map-workflow-steps li {
  position: relative;
  padding-left: 13px;
  border-left: 1px solid rgba(155, 144, 255, .34);
}
.frame-map-workflow-steps li::before {
  content: "";
  position: absolute;
  top: 5px;
  left: -3.5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(155, 144, 255, .8);
}
.frame-map-workflow-steps span {
  display: block;
  color: rgba(174, 165, 255, .82);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.frame-map-workflow-steps strong {
  display: block;
  margin-top: 2px;
  color: rgba(233,234,244,.85);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.45;
}
.frame-map-workflow-dependency { display: grid; gap: 7px; }
.frame-map-workflow-dependency div {
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
}
.frame-map-workflow-dependency span {
  display: block;
  font-size: 8px;
  font-weight: 780;
  letter-spacing: .12em;
}
.frame-map-workflow-dependency strong {
  display: block;
  margin-top: 2px;
  color: rgba(231,232,243,.84);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.45;
}
/* KEEP is necessary human judgment; PREPARE and REMOVE are the reducible part.
   The colour carries that distinction, the label states it. */
.frame-map-workflow-dependency .dep-keep { border-color: rgba(109, 222, 177, .34); }
.frame-map-workflow-dependency .dep-keep span { color: rgba(129, 226, 186, .9); }
.frame-map-workflow-dependency .dep-prepare { border-color: rgba(155, 144, 255, .34); }
.frame-map-workflow-dependency .dep-prepare span { color: rgba(174, 165, 255, .9); }
.frame-map-workflow-dependency .dep-remove { border-color: rgba(255, 155, 91, .34); }
.frame-map-workflow-dependency .dep-remove span { color: rgba(255, 186, 138, .92); }
.frame-map-workflow.is-unmodelled p:not(.frame-map-detail-kicker),
.frame-map-workflow-empty {
  color: rgba(170,174,198,.66);
  font-size: 10.5px;
  font-style: italic;
}
.frame-map-detail-truncated {
  margin-top: 9px !important;
  color: rgba(255, 190, 142, .74) !important;
  font-size: 10px !important;
}

.frame-map-owner-meter {
  position: absolute;
  z-index: 5;
  right: 18px;
  bottom: 18px;
  display: grid;
  justify-items: end;
  gap: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 155, 91, .22);
  border-radius: 14px;
  background: rgba(7, 9, 17, .76);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.frame-map-owner-meter span {
  color: rgba(255, 190, 142, .62);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
}
.frame-map-owner-meter strong {
  color: #ffc08a;
  font-size: 24px;
  font-weight: 510;
  line-height: 1;
}

.frame-map-principle {
  display: flex;
  justify-content: center;
  margin: 14px 0 0;
  color: var(--dim);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.frame-map-shell.is-unavailable .frame-map-svg { opacity: .2; }

/* Client-preview mode is a screen-share/presentation view, not a public endpoint.
   Auth and source reads stay unchanged. Sensitive operational/detail surfaces are
   visually removed and the map renderer itself switches to generic case labels. */
body.frame-preview-mode .masthead .snapshot-meta,
body.frame-preview-mode #commandSwitcherHost,
body.frame-preview-mode #refreshButton,
body.frame-preview-mode footer,
body.frame-preview-mode #realitySurface > :not(.frame-map-section) {
  display: none !important;
}
body.frame-preview-mode .shell {
  width: min(1500px, calc(100% - 28px));
  padding-top: 22px;
}
body.frame-preview-mode .masthead {
  align-items: center;
  padding-bottom: 20px;
  border-bottom-color: rgba(255,255,255,.08);
}
body.frame-preview-mode .masthead h1 { font-size: clamp(30px, 4.4vw, 60px); }
body.frame-preview-mode .frame-map-section { padding-top: 24px; border-bottom: none; }
body.frame-preview-mode .frame-map-shell,
body.frame-preview-mode .frame-map-stage,
body.frame-preview-mode .frame-map-svg {
  min-height: min(820px, calc(100vh - 210px));
  height: min(820px, calc(100vh - 210px));
}
body.frame-preview-mode .frame-map-owner-meter { display: none; }
body.frame-preview-mode .frame-map-detail-grid,
body.frame-preview-mode .frame-map-workflow,
body.frame-preview-mode .frame-workflow-stage { display: none !important; }
body.frame-preview-mode .frame-map-heading-copy {
  max-width: 460px;
}

/* ===========================================================================
   WORKFLOW DEPTH — SYSTEM MAP → PRACTICE / DOMAIN → WORKFLOW → EVIDENCE

   A business process, not an automation graph: humans, systems, decisions and
   handoffs are all first-class nodes and are told apart by shape and colour.
   Rendered as HTML inside the existing map stage so every node is a real,
   keyboard-reachable element with wrapping text — no second surface.
   =========================================================================== */
.frame-workflow-stage {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: none;
  padding: 22px 22px 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(6, 8, 15, .94);
}
.frame-map-shell[data-view="workflow"] .frame-workflow-stage { display: block; }
.frame-map-shell[data-view="workflow"] .frame-map-svg,
.frame-map-shell[data-view="workflow"] .frame-map-detail,
.frame-map-shell[data-view="workflow"] .frame-map-owner-meter,
/* The map toolbar overlays the stage; in the workflow depth the breadcrumb
   replaces it, and leaving it visible showed map controls over the flow. */
.frame-map-shell[data-view="workflow"] .frame-map-toolbar { visibility: hidden; }

.frame-wf-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}
.frame-wf-crumb {
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  color: rgba(190,193,214,.8);
  background: rgba(255,255,255,.03);
  font: inherit;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.frame-wf-crumb:hover { color: #fff; border-color: rgba(173,162,255,.5); }
.frame-wf-crumb:focus-visible { outline: 2px solid rgba(173,162,255,.9); outline-offset: 2px; }
.frame-wf-crumb.is-current {
  color: #cfc8ff;
  border-color: rgba(173,162,255,.42);
  background: rgba(88, 72, 200, .2);
  cursor: default;
}
.frame-wf-crumb-sep { color: rgba(150,154,180,.5); font-size: 10px; }

.frame-wf-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
}
.frame-wf-head h3 {
  margin: 0;
  font-size: clamp(19px, 2.4vw, 26px);
  font-weight: 560;
  letter-spacing: -.02em;
}
.frame-wf-status {
  margin: 5px 0 0;
  color: rgba(160,164,190,.72);
  font-size: 10px;
  letter-spacing: .04em;
}

.frame-wf-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 26px 30px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  counter-reset: frame-wf;
}
.frame-wf-step { position: relative; counter-increment: frame-wf; }
/* Directed flow: the connector points at the next step and disappears at the
   end of a visual row rather than pointing into empty space. */
.frame-wf-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -22px;
  width: 14px;
  height: 1px;
  background: linear-gradient(90deg, rgba(173,162,255,.16), rgba(173,162,255,.75));
}
.frame-wf-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -24px;
  width: 0;
  height: 0;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  border-left: 5px solid rgba(173,162,255,.75);
  transform: translateY(-50%);
  z-index: 1;
}
.frame-wf-step-card {
  position: relative;
  height: 100%;
  padding: 13px 14px 12px;
  border: 1px solid rgba(255,255,255,.1);
  border-left-width: 3px;
  border-radius: 13px;
  background: rgba(16, 18, 30, .92);
}
.frame-wf-step-card::before {
  content: counter(frame-wf);
  position: absolute;
  top: 11px;
  right: 12px;
  color: rgba(150,154,182,.4);
  font-size: 9px;
  font-weight: 800;
}
.frame-wf-step-kind {
  margin: 0;
  font-size: 7.5px;
  font-weight: 780;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.frame-wf-step-card h4 {
  margin: 5px 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}
.frame-wf-step-detail {
  margin: 0;
  color: rgba(200,203,222,.82);
  font-size: 10.5px;
  line-height: 1.5;
}
.frame-wf-step-participant {
  margin: 9px 0 0;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.07);
  color: rgba(155,159,186,.72);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .1em;
}
/* System-prepared work, human work and the human decision must be readable as
   different kinds of node at a glance. */
.frame-wf-step.kind-system .frame-wf-step-card { border-left-color: rgba(112, 222, 255, .7); }
.frame-wf-step.kind-system .frame-wf-step-kind { color: rgba(133, 226, 255, .9); }
.frame-wf-step.kind-input .frame-wf-step-card { border-left-color: rgba(242, 240, 232, .62); }
.frame-wf-step.kind-input .frame-wf-step-kind { color: rgba(238, 238, 232, .84); }
.frame-wf-step.kind-handoff .frame-wf-step-card { border-left-color: rgba(255, 155, 91, .7); }
.frame-wf-step.kind-handoff .frame-wf-step-kind { color: rgba(255, 186, 138, .92); }
/* The one step the product direction fixes as necessary human judgment. */
.frame-wf-step.kind-decision .frame-wf-step-card {
  border-color: rgba(109, 222, 177, .34);
  border-left-color: rgba(109, 222, 177, .92);
  background: rgba(15, 30, 26, .9);
}
.frame-wf-step.kind-decision .frame-wf-step-kind { color: rgba(129, 226, 186, .95); }

.frame-wf-band-title {
  margin: 0 0 9px;
  color: #9b90ff;
  font-size: 8.5px;
  font-weight: 760;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.frame-wf-dependency {
  display: grid;
  gap: 9px;
  margin-bottom: 20px;
}
.frame-wf-dependency .frame-wf-band-title { grid-column: 1 / -1; }
.frame-wf-dep {
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 11px;
  background: rgba(14, 16, 26, .8);
}
.frame-wf-dep p:last-child {
  margin: 4px 0 0;
  color: rgba(203,206,224,.82);
  font-size: 10.5px;
  line-height: 1.5;
}
.frame-wf-dep-kind {
  margin: 0;
  font-size: 8px;
  font-weight: 780;
  letter-spacing: .11em;
}
.frame-wf-dep.dep-keep { border-color: rgba(109, 222, 177, .34); }
.frame-wf-dep.dep-keep .frame-wf-dep-kind { color: rgba(129, 226, 186, .92); }
.frame-wf-dep.dep-prepare { border-color: rgba(155, 144, 255, .34); }
.frame-wf-dep.dep-prepare .frame-wf-dep-kind { color: rgba(174, 165, 255, .92); }
.frame-wf-dep.dep-remove { border-color: rgba(255, 155, 91, .34); }
.frame-wf-dep.dep-remove .frame-wf-dep-kind { color: rgba(255, 186, 138, .92); }

.frame-wf-evidence { padding-top: 4px; }
.frame-wf-evidence .frame-map-detail-grid { margin-top: 0; }
.frame-wf-empty {
  margin: 0 0 18px;
  color: rgba(170,174,198,.68);
  font-size: 11px;
  font-style: italic;
}

@media (max-width: 860px) {
  .frame-workflow-stage { padding: 18px 14px 18px; }
  .frame-wf-flow { grid-template-columns: 1fr; gap: 22px; }
  /* One column: the flow reads downward, so the connector turns with it. */
  .frame-wf-step:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: -18px;
    left: 22px;
    width: 1px;
    height: 10px;
    background: linear-gradient(180deg, rgba(173,162,255,.16), rgba(173,162,255,.75));
  }
  .frame-wf-step:not(:last-child)::before {
    top: auto;
    right: auto;
    bottom: -20px;
    left: 19px;
    border-top: 5px solid rgba(173,162,255,.75);
    border-right: 3.5px solid transparent;
    border-bottom: 0;
    border-left: 3.5px solid transparent;
    transform: none;
  }
}

@keyframes frame-edge-flow { to { stroke-dashoffset: -64; } }
@keyframes frame-orbit { to { transform: rotate(360deg); } }
@keyframes frame-node-pulse {
  0%, 100% { opacity: .38; transform: scale(.94); }
  50% { opacity: .78; transform: scale(1.08); }
}
@keyframes frame-map-breathe {
  from { opacity: .25; transform: scale(1); }
  to { opacity: .44; transform: scale(1.025); }
}

@media (max-width: 860px) {
  .frame-map-heading { align-items: flex-start; flex-direction: column; }
  .frame-map-heading-copy { max-width: 620px; text-align: left; }
  .frame-map-shell, .frame-map-stage { min-height: 680px; }
  .frame-map-svg { height: 680px; }
  /* Browser evidence (issue #129 QA, 390px): a floating bottom-anchored detail
     panel can cover up to 66% of the stage height at any width, and on a
     narrow-but-tall mobile viewport that region reliably overlaps the node
     ring — the panel then intercepts taps meant for whatever node sits behind
     it, regardless of which node is currently selected. Below 860px the panel
     leaves the map's positioned overlay entirely and flows in normal
     document order right after the SVG instead, so it can never occupy the
     same screen region as a node again — not a heuristic, a guarantee. */
  .frame-map-detail {
    position: static;
    width: auto;
    max-height: none;
    margin-top: 14px;
  }
  .frame-map-owner-meter { top: 58px; right: 14px; bottom: auto; }
  .frame-map-node-label { font-size: 9px; }
  .frame-map-node-eyebrow { font-size: 6px; }
}

@media (max-width: 560px) {
  .frame-map-section { padding-top: 28px; }
  .frame-map-heading h2 { font-size: clamp(28px, 9vw, 42px); }
  .frame-map-shell, .frame-map-stage { min-height: 650px; border-radius: 18px; }
  .frame-map-svg { height: 650px; }
  .frame-map-toolbar { top: 12px; right: 12px; left: 12px; }
  .frame-map-status, .frame-map-reset { padding: 6px 8px; font-size: 8px; }
  .frame-map-detail { padding: 14px 15px; }
  .frame-map-detail-grid { grid-template-columns: 1fr 1fr; }
  .frame-map-owner-meter { top: 50px; }
  .frame-map-node.kind-evidence .frame-map-node-label { font-size: 7.5px; }
  .frame-map-node.kind-practice .frame-map-node-label { font-size: 8px; }
  body.frame-preview-mode .shell { width: min(100% - 16px, 1500px); }
  body.frame-preview-mode .masthead { align-items: flex-start; flex-direction: column; gap: 14px; }
  body.frame-preview-mode .frame-map-shell,
  body.frame-preview-mode .frame-map-stage,
  body.frame-preview-mode .frame-map-svg { min-height: 650px; height: 650px; }
}

@media (prefers-reduced-motion: reduce) {
  .frame-map-shell::after,
  .frame-map-node-halo,
  .frame-map-node-orbit,
  .frame-map-edge { animation: none !important; }
  .frame-map-node { transition-duration: .01ms; }
}