/* ============================================================
   flow.css · the coordination-path builder surface.

   Ported from the shared coordination-path builder and re-skinned onto the
   aero.css "Datum" token system, dark candidate identity. Only the builder
   canvas, the review sheet, the inspector, and the result preview are styled
   here. Everything else (rail, cards, scope banner, footer, theme toggle)
   comes from aero.css + shell.css and repaints with the theme.

   COLOR DISCIPLINE: one accent. Cyan (--accent family) carries links, active
   state, the boundary line, ports, and ready/info. Gold (--gold) is RESERVED
   for the deliverable: the Result step glyph, the packet CTA, and the
   pending-attention state. Per-step accent rides --bf-node-color, which flow.js
   only ever sets to a token (cyan family / gold / text-dim), never a raw hex.

   LEGIBILITY: text always in its own panel, never over the map grid. Mono
   micro-labels, hairline datum rules. WCAG-AA on --bg in both themes.

   OVERFLOW: grid tracks use minmax(0,1fr); content columns set min-width:0;
   the stage scrolls inside itself on narrow viewports; review tables sit in a
   .table-scroll wrapper. No horizontal page scroll at 1280px or 375px.
   ============================================================ */

/* the builder is the one surface that earns full width: the canvas grows as
   steps are added, so the workspace runs edge to edge with a safe gutter
   instead of the standard reading-width cap. main.workspace caps at 1120px in
   aero.css; this raises specificity (main.bf-workspace) to lift the cap. */
main.bf-workspace { max-width: none; width: 100%; }

.bf-workspace h1,
.bf-workspace h2,
.bf-workspace h3 { letter-spacing: -0.02em; }

/* ===== Intro hero ===== */
.bf-hero { margin-top: 4px; }
.bf-hero .hero-copy h1 { font-size: 38px; }

.bf-hero-actions {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px;
}
.bf-hero-actions button[aria-pressed="true"] {
  background: var(--accent-bright); border: 1px solid var(--accent-bright);
  color: #06101f; box-shadow: var(--shadow-teal);
}
.bf-hero-actions button[aria-pressed="false"] {
  background: var(--surface); color: var(--text); box-shadow: none;
}

.bf-hero-plate { align-items: stretch; }
.bf-datum-card {
  width: 100%; align-self: stretch;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-width: 0;
}
.bf-datum-row { display: flex; justify-content: space-between; gap: 18px; align-items: baseline; }
.bf-datum-row span { color: var(--text-dim); font-family: var(--mono); font-size: 12px; min-width: 0; }
.bf-datum-row strong {
  color: var(--accent-deep); font-family: var(--mono); font-size: 12px;
  text-transform: uppercase; text-align: right; min-width: 0;
}

/* ===== Builder card ===== */
.bf-builder-card { padding: 0; overflow: hidden; }
.bf-builder-card > .panel-head {
  margin: 0; padding: 22px 24px; border-bottom: 1px solid var(--border);
}
.bf-builder-head { align-items: center; }
.bf-builder-head .muted { margin-top: 4px; font-size: 13px; }
.bf-builder-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }

.bf-workbench {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 320px;
  min-height: 620px;
  background: var(--surface);
}

.bf-palette, .bf-inspector { background: var(--surface); min-width: 0; }
.bf-palette { padding: 16px; border-right: 1px solid var(--border); }
.bf-inspector { padding: 18px; border-left: 1px solid var(--border); }

.bf-panel-title {
  display: flex; justify-content: space-between; gap: 10px; align-items: center;
  margin-bottom: 12px;
  color: var(--text-dim); font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}

.bf-panel-title button,
.bf-map-actions button,
.bf-palette-foot button,
.bf-inspector button:not(.bf-packet-link) {
  min-height: 34px; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font-family: var(--mono); font-size: 11px; font-weight: 600;
}
.bf-panel-title button { min-height: 28px; padding: 4px 8px; }

.bf-panel-title button:hover,
.bf-map-actions button:hover,
.bf-palette-foot button:hover,
.bf-inspector button:not(.bf-packet-link):hover,
.bf-node-type:hover,
.bf-preset:hover {
  border-color: var(--border-accent); background: var(--accent-pale);
}

.bf-node-library, .bf-presets, .bf-palette-foot { display: grid; gap: 9px; }

.bf-node-type {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 10px;
  width: 100%; min-height: 48px; padding: 9px 10px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--bf-node-color, var(--accent));
  border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); text-align: left;
}
.bf-node-icon {
  display: grid; place-items: center; width: 24px; height: 24px;
  border: 1px solid currentColor; border-radius: 6px;
  color: var(--bf-node-color, var(--accent));
  font-family: var(--mono); font-size: 10px; font-weight: 700;
}
.bf-node-copy { display: grid; gap: 1px; min-width: 0; }
.bf-node-copy strong { color: var(--text); font-size: 13px; font-weight: 650; }
.bf-node-copy span { color: var(--text-dim); font-size: 11px; }

.bf-preset-head {
  margin: 17px 0 4px; padding-top: 13px; border-top: 1px solid var(--border-soft);
  color: var(--text-dimmer); font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}
.bf-preset-note { color: var(--text-dim); font-size: 12px; margin-bottom: 9px; }

.bf-preset {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; min-height: 36px; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
}
.bf-preset span, .bf-preset i { font-family: var(--mono); font-size: 11px; }
.bf-preset i {
  display: grid; place-items: center; width: 19px; height: 19px;
  border: 1px solid var(--border); border-radius: 5px;
  color: var(--accent-deep); font-style: normal;
}
.bf-palette-foot { margin-top: 16px; }

/* ===== Map canvas ===== */
.bf-center { min-width: 0; background: var(--paper); }
.bf-map-view { height: 100%; min-height: 620px; display: flex; flex-direction: column; }

.bf-map-toolbar {
  min-height: 58px; display: flex; justify-content: space-between; gap: 12px; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.bf-map-title .eyebrow { color: var(--accent); }
.bf-map-title strong {
  display: block; margin-top: 3px; color: var(--text);
  font-size: 12px; font-weight: 650; letter-spacing: 0.4px; text-transform: uppercase;
}
.bf-map-actions { display: flex; gap: 8px; }

/* the stage is the scroll viewport. The node + edge canvas inside it grows to
   fit every step (sized by flow.js via --bf-canvas-w / --bf-canvas-h), so the
   stage scrolls when the path runs wider or taller than the viewport. The grid
   + lane decorations stay pinned to the canvas so they track the work. */
.bf-stage {
  position: relative; flex: 1; min-height: 680px; overflow: auto;
  background:
    linear-gradient(var(--accent-pale) 1px, transparent 1px),
    linear-gradient(90deg, var(--accent-pale) 1px, transparent 1px),
    radial-gradient(100% 80% at 24% 12%, var(--accent-pale), transparent 48%),
    var(--surface);
  background-size: 28px 28px, 28px 28px, auto, auto;
  scrollbar-width: thin;
}

.bf-edges, .bf-nodes {
  position: absolute; top: 0; left: 0;
  width: var(--bf-canvas-w, 100%); height: var(--bf-canvas-h, 100%);
  min-width: 100%; min-height: 100%;
}
.bf-edges { pointer-events: none; }
.bf-edge { fill: none; stroke: var(--subtle); stroke-width: 2; }
.bf-temp-edge { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 5; }

/* ===== Play the path ===== */
/* the play control: cyan, the active teaching gesture (not the deliverable) */
.bf-play-btn[aria-pressed] { border-color: var(--accent); color: var(--accent-deep); }
.bf-play-btn::before {
  content: "\25B6"; margin-right: 6px; font-size: 9px; color: var(--accent-deep);
}
.bf-play-btn[aria-pressed]::before { content: "\25A0"; }

.bf-token-layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 5;
}
/* the traveling pointer rides cyan, the in-scope signal color */
.bf-play-token {
  fill: var(--accent-bright); stroke: var(--surface); stroke-width: 2;
  filter: drop-shadow(0 0 6px var(--accent));
}

/* a node the pointer has passed reads lit in cyan */
.bf-node.is-traveled { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-pale), var(--shadow); }
/* the node the pointer is sitting on right now */
.bf-node.is-here { border-color: var(--accent-bright); box-shadow: 0 0 0 4px var(--accent-pale), var(--shadow); }
/* the result the route lands on reads gold, the deliverable */
.bf-node.is-landed {
  border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-pale), var(--shadow);
}

.bf-play-status {
  min-height: 18px; margin: 0; padding: 8px 16px;
  border-top: 1px solid var(--border); background: var(--surface);
  color: var(--accent-deep); font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.2px;
}
.bf-play-status:empty { display: none; }

.bf-boundary-line {
  position: absolute; top: 42px; left: var(--bf-boundary-x, 58%); width: 3px;
  height: calc(var(--bf-canvas-h, 100%) - 72px); min-height: calc(100% - 72px);
  background: var(--accent); z-index: 1;
}
.bf-boundary-line span {
  position: absolute; top: -25px; left: 50%; transform: translateX(-50%);
  padding: 0 8px; background: var(--surface);
  color: var(--accent-deep); font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}

.bf-map-lane {
  position: absolute; top: 42px; left: 96px;
  color: var(--accent-deep); font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; z-index: 1;
}

.bf-lock-lane { position: absolute; top: 40px; left: var(--bf-lock-x, calc(100% - 214px)); width: 196px; z-index: 1; }
.bf-lock-head {
  margin-bottom: 10px; color: var(--text-dimmer); font-family: var(--mono);
  font-size: 10px; font-weight: 700; letter-spacing: 1px; text-align: center; text-transform: uppercase;
}
.bf-locked-list { display: grid; gap: 8px; }
.bf-locked-item {
  display: flex; justify-content: space-between; gap: 8px; align-items: center;
  min-height: 40px; padding: 8px 10px;
  border: 1px dashed var(--subtle); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text-dim); font-size: 12px;
}
.bf-locked-item strong { font-weight: 600; min-width: 0; }
.bf-locked-item span {
  display: grid; place-items: center; width: 19px; height: 19px;
  border: 1px solid var(--border); border-radius: 5px;
  font-family: var(--mono); font-size: 10px; flex-shrink: 0;
}

.bf-node {
  position: absolute; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 8px; align-items: center;
  width: 178px; min-height: 62px; padding: 9px 10px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--bf-node-color, var(--accent));
  border-radius: var(--radius-sm);
  background: var(--surface); box-shadow: var(--shadow); color: var(--text);
  cursor: grab; user-select: none; z-index: 3;
  /* a short ease so the played-path highlight fades in instead of popping;
     removed under reduced motion below */
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}
.bf-node.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-pale), var(--shadow);
}
.bf-node-icon-block {
  display: grid; place-items: center; width: 24px; height: 24px;
  border: 1px solid var(--bf-node-color, var(--accent)); border-radius: 6px;
  color: var(--bf-node-color, var(--accent));
  font-family: var(--mono); font-size: 10px; font-weight: 700;
}
.bf-node-main { min-width: 0; }
.bf-node-title { display: block; font-size: 12px; font-weight: 650; line-height: 1.2; }
.bf-node-state {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  color: var(--text-dim); font-family: var(--mono); font-size: 10.5px;
}
.bf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bf-status, var(--text-dimmer)); flex-shrink: 0; }

.bf-node-port {
  position: absolute; display: grid; place-items: center;
  width: 13px; height: 13px;
  border: 2px solid var(--accent); background: var(--surface);
  cursor: crosshair; z-index: 4;
}
.bf-node-port.in { left: -7px; top: 50%; transform: translateY(-50%); }
.bf-node-port.out { right: -7px; top: 50%; transform: translateY(-50%); }
.bf-node-port.is-armed { background: var(--accent); }
.bf-node-port.is-target { box-shadow: 0 0 0 4px var(--accent-pale); }

.bf-node-del {
  width: 22px; height: 22px;
  border: 1px solid var(--border); border-radius: 5px;
  background: var(--surface); color: var(--text-dim); flex-shrink: 0;
}

.bf-status-legend {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  min-height: 38px; padding: 8px 16px;
  border-top: 1px solid var(--border); background: var(--surface);
  color: var(--text-dim); font-family: var(--mono); font-size: 11px; letter-spacing: 0.2px;
}
.bf-status-legend span { display: inline-flex; gap: 7px; align-items: center; }
.bf-leg { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dimmer); }
.bf-leg.is-active, .bf-leg.is-ok { background: var(--ok); }
.bf-leg.is-ready { background: var(--accent); }
.bf-leg.is-pending { background: var(--gold); }
.bf-leg.is-locked { background: var(--text-dimmer); }

/* ===== Review view ===== */
.bf-review-view { min-height: 620px; padding: 14px; background: var(--surface); }
.bf-review-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.bf-review-card {
  min-height: 220px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--paper); overflow: hidden; min-width: 0;
}
.bf-review-card h2 {
  margin: 0; padding: 11px 13px; border-bottom: 1px solid var(--border);
  color: var(--text); font-family: var(--mono);
  font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}
.bf-review-card h3 {
  margin: 0; padding: 9px 11px; border-bottom: 1px solid var(--border-soft);
  color: var(--accent-deep); font-family: var(--mono);
  font-size: 11px; font-weight: 700; text-transform: uppercase;
}

.bf-review-table, .bf-ledger-list, .bf-validation-list { display: grid; min-width: 0; }
.bf-review-row, .bf-ledger-row, .bf-validation-row, .bf-output-row {
  display: grid; border-bottom: 1px solid var(--border-soft);
}
.bf-review-row { grid-template-columns: 32px minmax(110px, 1fr) 92px 96px 108px; min-width: 460px; }
.bf-output-row { grid-template-columns: minmax(92px, 0.85fr) minmax(150px, 1.3fr) minmax(120px, 0.9fr) 76px; min-width: 460px; }

.bf-review-row span,
.bf-ledger-row span,
.bf-validation-row span,
.bf-output-row span {
  min-width: 0; padding: 8px 9px; border-right: 1px solid var(--border-soft);
  color: var(--text-dim); font-size: 12px; overflow-wrap: anywhere;
}
.bf-review-row span:last-child,
.bf-ledger-row span:last-child,
.bf-validation-row span:last-child,
.bf-output-row span:last-child { border-right: 0; }

.bf-review-row.is-head, .bf-output-row.is-head {
  background: var(--surface-2); color: var(--text-dim);
  font-family: var(--mono); text-transform: uppercase;
}

.bf-ledger-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 170px; }
.bf-ledger-pair > div { min-width: 0; }
.bf-ledger-pair > div + div { border-left: 1px solid var(--border); }
.bf-ledger-row { grid-template-columns: 30px minmax(0, 1fr); }
.bf-ledger-list.is-locked .bf-ledger-row span:last-child::after {
  content: " locked"; color: var(--text-dimmer);
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
}
.bf-validation-row { grid-template-columns: minmax(0, 1fr) 100px minmax(0, 1.15fr); min-width: 460px; }

.bf-status-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; color: var(--text);
}
.bf-status-chip::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--bf-status, var(--text-dimmer)); flex-shrink: 0;
}

/* ===== Inspector ===== */
.bf-inspector-head {
  display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 14px;
}
.bf-inspector-head h2 { margin: 0; font-size: 18px; line-height: 1.12; }
.bf-inspector-head > div { min-width: 0; }
.bf-inspector-head span {
  display: block; margin-bottom: 3px; color: var(--text-dim);
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
}
.bf-inspector-type {
  display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0;
  border: 1px solid var(--bf-node-color, var(--border-accent)); border-radius: 8px;
  color: var(--bf-node-color, var(--accent-deep));
  font-family: var(--mono); font-size: 11px; font-weight: 700;
}

.bf-field { display: grid; gap: 6px; margin-bottom: 12px; min-width: 0; }
.bf-field label {
  color: var(--text-dim); font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
}
.bf-field input, .bf-field select {
  width: 100%; max-width: 100%; min-height: 36px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text); font-family: var(--sans); font-size: 14px;
}
.bf-field input:focus, .bf-field select:focus {
  outline: none; border-color: var(--accent); background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-pale);
}

.bf-inspector-section { margin: 14px 0; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.bf-inspector-section-title {
  color: var(--text-dim); font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
}
.bf-check-list, .bf-action-list { display: grid; gap: 8px; margin-top: 8px; }
.bf-check-item { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 12px; }
.bf-check-item strong { font-weight: 600; min-width: 0; }
.bf-check-item span:last-child { color: var(--accent-deep); font-family: var(--mono); flex-shrink: 0; }

.bf-warning {
  margin: 14px 0; padding: 10px 12px;
  border: 1px solid var(--gold); border-radius: var(--radius-sm);
  background: var(--gold-pale); color: var(--gold-deep); font-size: 12px;
}
.bf-primary {
  background: var(--accent-bright) !important; border-color: var(--accent-bright) !important;
  color: #06101f !important; box-shadow: var(--shadow-teal);
}
.bf-empty { padding: 16px; color: var(--text-dim); font-size: 13px; }

/* the inspector shortcut to the result surface (gold: it leads to the packet) */
.bf-packet-link {
  display: block; margin-top: 14px; text-align: center;
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--gold); color: #1a1206;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase;
  border: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
  box-shadow: var(--shadow-gold);
}
.bf-packet-link:hover { filter: brightness(1.04); border-bottom-color: var(--gold); }
/* light mode: white ink on the brown gold for WCAG-AA, matching the packet CTA */
:root[data-theme="light"] .bf-packet-link { color: #fff; }

/* ===== Result handoff ===== */
.bf-result-card { padding: 24px; }
.bf-result-links {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 16px 0 18px;
}
.bf-result-cta { display: flex; justify-content: flex-start; }

[hidden] { display: none !important; }

/* ===== Responsive ===== */
@media (max-width: 1180px) {
  .bf-workbench { grid-template-columns: minmax(0, 1fr); }
  .bf-palette, .bf-inspector { border-left: 0; border-right: 0; }
  .bf-center { order: 1; }
  .bf-palette { order: 2; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .bf-inspector { order: 3; border-top: 1px solid var(--border); }
  .bf-node-library, .bf-presets { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
  .bf-stage { overflow-x: auto; }
  .bf-edges, .bf-nodes { min-width: 940px; }
  .bf-lock-lane { right: auto; left: 740px; width: 176px; }
  .bf-boundary-line { left: 525px; }
}

@media (max-width: 980px) {
  .bf-result-links { grid-template-columns: minmax(0, 1fr); }
  .bf-review-grid, .bf-ledger-pair { grid-template-columns: minmax(0, 1fr); }
  .bf-ledger-pair > div + div { border-left: 0; border-top: 1px solid var(--border); }
}

@media (max-width: 720px) {
  .bf-hero-actions, .bf-map-actions, .bf-builder-meta { align-items: stretch; flex-direction: column; }
  .bf-hero-actions button, .bf-map-actions button { width: 100%; text-align: center; }
  .bf-builder-card > .panel-head, .bf-result-card { padding: 18px; }
  .bf-result-cta .packet-cta { width: 100%; text-align: center; }
}

/* ===== Print: one landscape page that fits the whole path ===== */
/* Printing the flow page makes one landscape sheet that holds the full map:
   every step, the boundary line and its label, and the locked-out lane. The
   chrome that helps you build (rail, dock, panels, toolbars, tour, help, ask,
   feedback) drops away so only the board prints. flow.js sizes .bf-stage to the
   grown canvas and sets --bf-print-scale on beforeprint so the board fits the
   printable width with no clipping and no scroll. Ink reads dark on white in
   both the light and the dark theme: the print block forces the light token set
   so a dark-theme screen still prints legibly. */
@media print {
  /* force dark ink on white so a dark-theme screen prints clean and legible */
  :root,
  :root[data-theme="dark"],
  :root[data-theme="light"] {
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #f4f4f1;
    --paper: #ffffff;
    --text: #15171c;
    --text-dim: #2c313a;
    --text-dimmer: #3c424c;
    --accent: #0b5a6e;
    --accent-deep: #083a47;
    --accent-pale: rgba(11, 90, 110, 0.08);
    --accent-bright: #0b5a6e;
    --gold: #6b430b;
    --gold-deep: #573509;
    --gold-pale: rgba(107, 67, 11, 0.08);
    --subtle: #8a9098;
    --border: #b9bdc3;
    --border-soft: #cfd2d6;
  }

  @page { size: landscape; margin: 12mm; }

  html, body { background: #ffffff; }

  /* drop the build chrome: the shell rail, the status dock, the floating
     launchers and their panels, the tour ribbon and overlay, and the panels
     that help you edit. Only the board and the boundary story print. */
  .sidebar, #ti-shell-nav, .ti-rail,
  #ti-dock,
  .ti-theme-toggle, .ti-viewtoggle,
  .ti-ask, .ti-ask-panel,
  .ti-help-launch, .ti-help-overlay, .ti-help-panel,
  .ti-feedback-launch,
  .ti-dlt-ribbon, #ti-page-tour-ribbon, .ti-dlt-scrim, .ti-dlt-card,
  .scope-banner,
  .bf-palette, .bf-inspector,
  .bf-hero, .bf-hero-actions,
  .bf-map-toolbar, .bf-map-actions,
  .bf-status-legend, .bf-play-status,
  .bf-result-card, .page-footer {
    display: none !important;
  }

  /* the page becomes one flat column at full width, no reading-width cap */
  .app-shell { display: block; }
  .workspace, main.bf-workspace { max-width: none; width: 100%; margin: 0; padding: 0; }
  .page-header { margin: 0 0 6mm; }
  .bf-builder-card { border: 0; box-shadow: none; overflow: visible; }
  .bf-builder-card > .panel-head { border-bottom: 1px solid var(--border); padding: 0 0 4mm; }

  /* the workbench collapses to just the board (palette + inspector are hidden) */
  .bf-workbench { display: block; min-height: 0; background: #ffffff; }
  .bf-center { background: #ffffff; }
  .bf-map-view { min-height: 0; height: auto; display: block; }

  /* the review view never prints; the map is the print subject */
  #bf-review-view { display: none !important; }

  /* the stage stops being a fixed-height scroll viewport: it opens to the full
     canvas height and lets the board show in one piece. The grid backdrop is
     dropped so the lines stay crisp dark ink on white. */
  .bf-stage {
    overflow: visible;
    min-height: 0;
    height: var(--bf-canvas-h, auto);
    background: #ffffff;
    border: 1px solid var(--border);
  }

  /* fit the whole board to the printable landscape width. flow.js computes the
     scale from the page width over the canvas width and sets --bf-print-scale
     on beforeprint (1 when the board already fits, below 1 when it is wider).
     transform-origin top-left keeps the scaled board anchored to the corner so
     nothing clips off the left or top edge. */
  .bf-stage {
    transform: scale(var(--bf-print-scale, 1));
    transform-origin: top left;
  }

  /* keep the boundary line + its label: it is the core story of the path, so it
     prints as a solid dark rule with a readable label, not a faint screen tint */
  .bf-boundary-line { background: var(--accent); }
  .bf-boundary-line span {
    background: #ffffff; color: var(--accent-deep);
  }
  .bf-map-lane, .bf-lock-head { color: var(--accent-deep); }

  /* every node, port, and edge prints as dark ink on white with its label legible */
  .bf-node {
    background: #ffffff; box-shadow: none;
    border: 1px solid var(--border);
    border-left: 3px solid var(--bf-node-color, var(--accent));
  }
  .bf-node-title, .bf-node-state, .bf-locked-item strong { color: var(--text); }
  .bf-edge { stroke: var(--subtle); }
  .bf-locked-item { background: #ffffff; border: 1px dashed var(--subtle); color: var(--text-dim); }

  /* the traveling-path highlight, the play token, and any transition do not
     belong on paper */
  .bf-token-layer, .bf-play-token { display: none !important; }
  .bf-node { transition: none !important; }

  /* let backgrounds and ink print as authored instead of being stripped */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (prefers-reduced-motion: reduce) {
  .bf-packet-link, .bf-node { transition: none; }
}