/* The behaviour map is a shared component: it takes its colours from the case-study
   system (../shared/case-study.css) and each study's dialect, never its own palette. */
.ux-behavior-map {
  --bm-bg: var(--white, #fbfaf7);
  --bm-surface: var(--paper, #f1eee7);
  --bm-ink: var(--ink, #171816);
  --bm-muted: var(--muted, #5e5d57);
  --bm-rule: #cfcac0;
  --bm-accent: var(--accent-ink, #171816);
  --bm-accent-soft: var(--accent-tint, #e6e1d7);
  --bm-good: var(--positive, #1e7a4c);
  --bm-good-soft: #e3efe7;
  --bm-bad: var(--critical, #b3261e);
  --bm-bad-soft: #f6e4e1;
  position: relative;
  isolation: isolate;
  padding: clamp(72px, 9vw, 144px) max(56px, calc((100vw - 1320px) / 2));
  overflow: hidden;
  background: var(--bm-bg);
  color: var(--bm-ink);
  font-family: inherit;
}

.bm-shell { max-width: 1320px; margin: 0 auto; }

.bm-heading {
  display: grid;
  grid-template-columns: minmax(160px, 0.32fr) minmax(0, 0.68fr);
  gap: 40px;
  align-items: start;
  margin-bottom: 58px;
}

.bm-kicker,
.bm-mode-copy span,
.bm-lane-label span,
.bm-step-number,
.bm-detail-label,
.bm-legend span,
.bm-expectation span {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.bm-kicker { margin: 4px 0 0; color: var(--bm-muted); }
.bm-heading-copy { max-width: 850px; }
.bm-heading h2 {
  margin: 0;
  max-width: 820px;
  font-size: clamp(38px, 5vw, 72px);
  font-weight: 450;
  line-height: 1.02;
  letter-spacing: -.05em;
}
.bm-heading h2 em { color: var(--bm-accent); font-style: normal; }
.bm-heading-copy > p {
  max-width: 720px;
  margin: 24px 0 0;
  color: var(--bm-muted);
  font-size: 16px;
  line-height: 1.55;
}

.bm-controls {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 28px;
  padding: 18px 0;
  border-block: 1px solid var(--bm-rule);
}
.bm-mode-copy { display: grid; gap: 4px; }
.bm-mode-copy span { color: var(--bm-muted); }
.bm-mode-copy strong { font-size: 19px; font-weight: 500; letter-spacing: -.02em; }
.bm-toggle { display: inline-flex; gap: 4px; padding: 4px; background: rgba(127, 124, 113, .11); }
.bm-toggle button {
  min-height: 40px;
  padding: 8px 18px;
  border: 0;
  background: transparent;
  color: var(--bm-muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.bm-toggle button[aria-pressed="true"] { background: var(--bm-ink); color: var(--bm-surface); }
.bm-toggle button:focus-visible,
.bm-node:focus-visible { outline: 3px solid color-mix(in srgb, var(--bm-accent) 44%, transparent); outline-offset: 3px; }

.bm-expectation {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 72px;
  padding: 14px 0;
  border-bottom: 1px solid var(--bm-rule);
}
.bm-expectation span { color: var(--bm-muted); }
.bm-expectation strong { font-size: 14px; line-height: 1.45; font-weight: 500; }
.bm-expectation b {
  padding: 6px 9px;
  background: var(--bm-good-soft);
  color: var(--bm-good);
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.bm-expectation.is-broken b { background: var(--bm-bad-soft); color: var(--bm-bad); }

.bm-map-wrap { position: relative; }
.bm-map {
  position: relative;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  min-height: 438px;
  border-bottom: 1px solid var(--bm-rule);
}
.bm-lanes { display: grid; grid-template-rows: repeat(3, 146px); border-right: 1px solid var(--bm-rule); }
.bm-lane-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding-right: 20px;
  border-bottom: 1px solid var(--bm-rule);
}
.bm-lane-label:last-child { border-bottom: 0; }
.bm-lane-label span { color: var(--bm-muted); }
.bm-lane-label strong { max-width: 120px; font-size: 13px; font-weight: 500; line-height: 1.3; }

.bm-flow { position: relative; min-width: 0; }
.bm-flow::before,
.bm-flow::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--bm-rule);
}
.bm-flow::before { top: 146px; }
.bm-flow::after { top: 292px; }
.bm-steps { display: grid; grid-template-columns: repeat(6, minmax(112px, 1fr)); height: 438px; }
.bm-step { position: relative; min-width: 0; border-right: 1px solid color-mix(in srgb, var(--bm-rule) 65%, transparent); }
.bm-step:last-child { border-right: 0; }
.bm-node {
  position: absolute;
  z-index: 3;
  top: calc((var(--lane) * 146px) + 39px);
  left: 10px;
  right: 10px;
  min-height: 68px;
  padding: 11px 12px;
  border: 1px solid var(--bm-rule);
  background: var(--bm-surface);
  color: var(--bm-ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.bm-node:hover { transform: translateY(-2px); border-color: var(--bm-accent); }
.bm-node[aria-pressed="true"] { border-color: var(--bm-accent); background: var(--bm-accent-soft); }
.bm-node.is-break { border-color: var(--bm-bad); background: var(--bm-bad-soft); }
.bm-node.is-break[aria-pressed="true"] { box-shadow: inset 4px 0 0 var(--bm-bad); }
.bm-node.is-resolved { border-color: var(--bm-good); background: var(--bm-good-soft); }
.bm-step-number { display: block; margin-bottom: 5px; color: var(--bm-muted); }
.bm-node strong { display: block; font-size: 13px; line-height: 1.25; font-weight: 500; }
.bm-node small { display: none; }

.bm-connector {
  position: absolute;
  z-index: 1;
  height: 1px;
  background: var(--bm-muted);
  transform-origin: 0 50%;
  pointer-events: none;
  opacity: .65;
}
.bm-connector::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.bm-connector.is-break { height: 2px; background: var(--bm-bad); color: var(--bm-bad); opacity: 1; }
.bm-connector.is-resolved { height: 2px; background: var(--bm-good); color: var(--bm-good); opacity: .9; }

/* Motion. The map moves with its study's verb, set as data-motion by the script:
   settle (Triage), draw (DSML) or set (Always-On). A settle or draw map is armed
   until it first comes into view: its steps and lines wait unseen so the path can be
   traced. The token is the issue itself, in the dialect's accent, riding the path
   under the steps so it vanishes into each one. Nothing loops. */
.ux-behavior-map { --bm-token: var(--accent, var(--bm-accent)); }
.ux-behavior-map[data-motion="set"] .bm-node {
  transition: border-color var(--t-state, 120ms) ease, background var(--t-state, 120ms) ease, transform 160ms ease;
}
/* Steps glide between lanes only while the state is being switched, never when the
   layout changes (a resize, or crossing into the phone layout). */
.ux-behavior-map[data-bm-gliding] .bm-node {
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, top 420ms var(--ease, cubic-bezier(.2, .8, .2, 1));
}
.ux-behavior-map[data-motion="set"][data-bm-gliding] .bm-node {
  transition: border-color var(--t-state, 120ms) ease, background var(--t-state, 120ms) ease, transform 160ms ease, top 240ms var(--ease, cubic-bezier(.2, .8, .2, 1));
}
.ux-behavior-map[data-bm-armed] .bm-node,
.ux-behavior-map[data-bm-armed] .bm-connector { opacity: 0; }
.bm-token {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border: 2px solid var(--bm-token);
  background: var(--bm-token);
  opacity: 0;
  pointer-events: none;
}
/* DSML's carried context travels as a chip, the way it does in the study. */
.ux-behavior-map[data-study="dsml"] .bm-token { width: 20px; margin-left: -10px; border-radius: 5px; }

.bm-detail {
  display: grid;
  grid-template-columns: 150px repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--bm-rule);
}
.bm-detail-index { padding: 24px 20px 24px 0; border-right: 1px solid var(--bm-rule); }
.bm-detail-index b {
  display: block;
  color: var(--bm-accent);
  font-size: 34px;
  line-height: 1;
  font-weight: 450;
  letter-spacing: -.05em;
}
.bm-detail-index span { display: block; margin-top: 7px; color: var(--bm-muted); font-size: 12px; }
.bm-detail article { padding: 24px; border-right: 1px solid var(--bm-rule); }
.bm-detail article:last-child { border-right: 0; }
.bm-detail-label { display: block; margin-bottom: 9px; color: var(--bm-muted); }
.bm-detail p { margin: 0; color: var(--bm-ink); font-size: 14px; line-height: 1.5; }
.bm-detail article:last-child p { color: var(--bm-good); }
.bm-detail.is-broken article:last-child p { color: var(--bm-bad); }

.bm-legend { display: flex; flex-wrap: wrap; gap: 22px; padding-top: 18px; color: var(--bm-muted); }
.bm-legend span { display: inline-flex; align-items: center; gap: 7px; letter-spacing: .08em; }
.bm-legend i { width: 20px; height: 2px; background: var(--bm-muted); }
.bm-legend .expected i { background: var(--bm-good); }
.bm-legend .break i { background: var(--bm-bad); }

@media (max-width: 900px) {
  .bm-heading { grid-template-columns: 1fr; gap: 16px; }
  .bm-map { grid-template-columns: 120px minmax(760px, 1fr); overflow-x: auto; }
  .bm-expectation { grid-template-columns: 120px minmax(0, 1fr); }
  .bm-expectation b { grid-column: 2; justify-self: start; }
  .bm-lane-label { padding-right: 12px; }
  .bm-detail { grid-template-columns: 120px 1fr 1fr; }
  .bm-detail article:last-child { grid-column: 2 / -1; border-top: 1px solid var(--bm-rule); }
}

@media (max-width: 640px) {
  .ux-behavior-map { padding-inline: 20px; }
  .bm-controls { align-items: start; flex-direction: column; }
  .bm-toggle { width: 100%; }
  .bm-toggle button { flex: 1; }
  .bm-expectation { grid-template-columns: 1fr; gap: 7px; padding-block: 16px; }
  .bm-expectation b { grid-column: auto; }
  .bm-map { display: block; min-height: 0; overflow: visible; }
  .bm-lanes { display: none; }
  .bm-flow::before, .bm-flow::after, .bm-connector, .bm-token { display: none; }
  .bm-steps { display: grid; grid-template-columns: 1fr; height: auto; }
  .bm-step { min-height: 88px; border-right: 0; border-bottom: 1px solid var(--bm-rule); }
  /* In the list the box sizes to its content (lane, number, title), so the title
     never sits on the border. */
  .bm-node { position: relative; top: auto; left: auto; right: auto; display: block; width: calc(100% - 44px); min-height: 0; margin: 10px 0 10px 44px; }
  .bm-node::before { content: attr(data-lane); display: block; margin-bottom: 4px; color: var(--bm-muted); font: 11px/1.3 var(--mono, ui-monospace, monospace); letter-spacing: .1em; text-transform: uppercase; }
  .bm-step::before { content: attr(data-step); position: absolute; top: 28px; left: 0; color: var(--bm-muted); font: 11px/1 var(--mono, ui-monospace, monospace); }
  .bm-detail { grid-template-columns: 1fr; }
  .bm-detail-index { display: flex; align-items: baseline; gap: 10px; border-right: 0; }
  .bm-detail article { border-right: 0; border-top: 1px solid var(--bm-rule); padding-inline: 0; }
  .bm-detail article:last-child { grid-column: auto; }
}

@media (pointer: coarse) {
  .bm-toggle button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .bm-node { transition: none; }
  .bm-token { display: none; }
}