/* Existing workflow boards, sized for the Engineering detail panels. */
/* Case-panel colours that have no twin in the Engineering palette. */
.engineering-panel[data-case-study] {
  --case-ink: #c1cbd3;
  --case-detail: #b0c0cc;
  --case-step-ink: #b8c8d3;
  --case-board-border: #3b4d5b;
  --case-control-border: #5a7385;
  --case-wire: #718fa3;
  --case-node: #192630;
  --case-node-line: #476377;
  --case-active: #273e4e;
  --case-pressed: #233642;
  --case-focus: #aec8d8;
  --case-disabled: #a1afb9;
}
.engineering-panel[data-case-study] .case-status {
  color: var(--sea);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 20px;
}
.engineering-panel[data-case-study] .case-intro p {
  color: var(--case-ink);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 16px;
}
.engineering-panel[data-case-study] .board-wrap {
  container-type: inline-size;
  margin: 24px 0 0;
  min-width: 0;
}
.engineering-panel[data-case-study] .board {
  background: var(--pane);
  border: 1px solid var(--case-board-border);
  overflow: hidden;
  color: var(--ink);
  min-width: 0;
}
.engineering-panel[data-case-study] .board svg {
  direction: ltr;
  display: block;
  width: 100%;
  height: auto;
}
.engineering-panel[data-case-study] .board text {
  fill: var(--ink);
  font-family: inherit;
}
.engineering-panel[data-case-study] .board .small-label {
  fill: var(--sea);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0;
}
.engineering-panel[data-case-study] .chalk-line {
  fill: none;
  stroke: var(--sea);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1600;
  stroke-dashoffset: 0;
}
.engineering-panel[data-case-study] .workflow-wires {
  fill: none;
  stroke: var(--case-wire);
  stroke-width: 2;
}
.engineering-panel[data-case-study] .workflow-node rect {
  fill: var(--case-node);
  stroke: var(--case-node-line);
  stroke-width: 1.5;
}
.engineering-panel[data-case-study] .workflow-node circle {
  fill: var(--case-node);
  stroke: var(--sea);
  stroke-width: 2;
}
.engineering-panel[data-case-study] .workflow-node.is-active rect {
  fill: var(--case-active);
  stroke: var(--case-focus);
  stroke-width: 2.5;
}
.engineering-panel[data-case-study] .node-label {
  font-size: 23px;
  font-weight: 500;
}
.engineering-panel[data-case-study] .node-detail {
  font-size: 13px;
  fill: var(--case-detail);
}
.engineering-panel[data-case-study] .execution-caption { display: none; }
.engineering-panel[data-case-study] .execution-dot {
  fill: var(--case-focus);
  offset-distance: 100%;
}
.engineering-panel[data-case-study] .board-wrap figcaption { margin-top: 8px; }
.engineering-panel[data-case-study] .board-controls {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}
.engineering-panel[data-case-study] .board-replay {
  background: transparent;
  border: 0;
  color: var(--case-focus);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  min-height: 44px;
  padding: 8px 0;
}
.engineering-panel[data-case-study] .board-replay:disabled {
  color: var(--case-disabled);
  cursor: default;
}
.engineering-panel[data-case-study] .steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0;
}
.engineering-panel[data-case-study] .step-button {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  min-height: 52px;
  padding: 10px;
  border: 1px solid var(--case-control-border);
  background: var(--pane);
  color: var(--case-step-ink);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
}
.engineering-panel[data-case-study] .step-button span {
  color: var(--sea);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 13px;
}
.engineering-panel[data-case-study] .step-button[aria-pressed="true"] {
  background: var(--case-pressed);
  border-color: var(--sea);
  color: var(--ink);
}
.engineering-panel[data-case-study] .step-description {
  color: var(--case-detail);
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 24px;
  min-height: 4.8em;
}
.engineering-panel[data-case-study] .case-actions { margin: 24px 0 0; }
/* The evidence link is a plain project link, like the other panels. */
.engineering-panel[data-case-study] .workflow-cta {
  align-items: center;
  display: flex;
  font-size: 14px;
  max-width: 100%;
  min-height: 44px;
  width: fit-content;
}
.engineering-panel[data-case-study] :is(.step-button, .board-replay):focus-visible {
  outline: 2px solid var(--case-focus);
  outline-offset: 4px;
}
html:not(.engineering-ready) .engineering-panel[data-case-study] :is(.board-controls, .steps, .step-description) {
  display: none;
}
@container (max-width: 360px) {
  .engineering-panel[data-case-study] .node-detail { display: none; }
  .engineering-panel[data-case-study] .node-label {
    font-size: 27px;
    transform: translateY(12px);
  }
}
@media (hover: hover) {
  .engineering-panel[data-case-study] .step-button:hover { background: var(--case-pressed); }
  .engineering-panel[data-case-study] .board-replay:not(:disabled):hover { text-decoration: underline; }
}
@media (prefers-reduced-motion: no-preference) {
  html[data-paused="false"] .engineering-panel[data-case-study] .chalk-line { animation: engineering-line 2.8s var(--lf-ease) both; }
  html[data-paused="false"] .engineering-panel[data-case-study] .chalk-text { animation: engineering-text 1.6s var(--lf-ease) both; }
  html[data-paused="false"] .engineering-panel[data-case-study] .delay { animation-delay: .4s; }
  html[data-paused="false"] .engineering-panel[data-case-study] .execution-dot { animation: engineering-flow 2.4s var(--lf-ease) 1 both; }
}
.engineering-panel[data-case-study] .board-paused * { animation-play-state: paused !important; }
/* A paused or chosen board shows its finished frame, never the first one. */
.engineering-panel[data-case-study] :is(.board-paused, .board-selected) :is(.chalk-line, .chalk-text) { animation: none !important; }
@keyframes engineering-line { from { stroke-dashoffset: 1600; } to { stroke-dashoffset: 0; } }
@keyframes engineering-text { from { opacity: 0; } to { opacity: 1; } }
@keyframes engineering-flow { from { offset-distance: 0%; } to { offset-distance: 100%; } }