.wf-page {
  --wf-muted: #b6cec0;
  --wf-line: #426354;
  --wf-panel: #102f25;
  --wf-amber: #ffdaaa;
  background: radial-gradient(ellipse at 76% -12%, #1b5139 0, transparent 57%) var(--deep);
  color: #f3faf5;
  padding-block: clamp(28px, 4.5vw, 68px) clamp(42px, 5.2vw, 78px);
}
.wf-page :focus-visible { outline-color: var(--signal); }
.wf-container { width: min(1420px, calc(100% - clamp(28px, 7.2vw, 104px))); }
.wf-intro { margin-bottom: clamp(16px, 2.1vw, 29px); }
.wf-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  color: var(--mint);
  font: 500 .7rem/1.45 var(--mono);
  letter-spacing: .045em;
  text-transform: uppercase;
}
.wf-kicker .signal-dot { margin-right: 2px; }
.wf-kicker-divider { width: 17px; height: 1px; background: #93b9a6; }
.wf-intro h1 {
  max-width: 23ch;
  margin-top: 12px;
  text-wrap: pretty;
  font-size: clamp(2.05rem, 4.4vw, 4.2rem);
  line-height: 1.04;
}
.wf-intro h1 em { color: var(--signal); font-style: normal; }
.wf-intro > p:last-child { margin-top: 10px; max-width: 72ch; color: var(--wf-muted); font-size: clamp(.93rem, 1.35vw, 1.17rem); }
.wf-fallback { border: 1px solid var(--wf-line); padding: 20px; color: var(--wf-muted); }
.wf-fallback a { color: var(--signal); text-decoration: underline; }

.wf-board {
  --wf-pad: clamp(12px, 1.7vw, 24px);
  background: #0a241b;
  border: 1px solid #567767;
  border-radius: 9px;
  box-shadow: 0 19px 54px #0004;
  overflow: clip;
}
.wf-board-head, .wf-controls, .wf-fields, .wf-evidence, .wf-log, .wf-disclosure { padding-inline: var(--wf-pad); }
.wf-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 18px;
  padding-block: clamp(12px, 1.5vw, 20px);
  background: #123328;
  border-bottom: 1px solid var(--wf-line);
}
.wf-board-head h2 { font-size: clamp(1.15rem, 2.3vw, 1.8rem); margin-top: 4px; text-align: start; }
#wf-reference { color: var(--wf-muted); }
.wf-status-group { min-width: 165px; text-align: end; }
#wf-status { color: var(--mint); font-size: .83rem; font-weight: 680; }
.wf-board:is([data-phase="waiting"], [data-phase="offline"], [data-phase="rejected"]) #wf-status { color: var(--wf-amber); }
.wf-progress-row { display: flex; justify-content: flex-end; align-items: center; gap: 9px; margin-top: 4px; color: var(--wf-muted); font-size: .73rem; }
.wf-progress-row progress { width: 48px; height: 4px; accent-color: var(--signal); border: 0; background: #47685a; }
.wf-progress-row progress::-webkit-progress-bar { background: #47685a; }
.wf-progress-row progress::-webkit-progress-value { background: var(--signal); }
.wf-progress-row progress::-moz-progress-bar { background: var(--signal); }
.wf-controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 9px 15px; padding-block: 10px; }
.wf-scenarios, .wf-run-actions, .wf-branch-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wf-choice, .wf-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 7px 12px;
  border: 1px solid #597b68;
  border-radius: 4px;
  color: #e5f3e9;
  background: #15382b;
  font-size: .83rem;
  font-weight: 620;
  line-height: 1.2;
}
.wf-choice:hover, .wf-action:hover { border-color: var(--mint); background: #224b3a; }
.wf-choice[aria-pressed="true"] { border-color: var(--signal); color: var(--signal); background: #273f27; }
.wf-action.is-primary { background: var(--signal); border-color: var(--signal); color: var(--deep); font-weight: 750; }
.wf-action.is-primary:hover { background: #e7ffa9; }
.wf-action.is-primary[aria-disabled="true"] { cursor: default; color: var(--mint); background: #244534; border-color: #597b68; }
.wf-reset { min-width: 44px; font-size: 1.15rem; }
#wf-start { min-width: 154px; }
.wf-fields { margin-bottom: 8px; color: var(--wf-muted); font-size: .87rem; }
.wf-fields summary, .wf-log summary, .wf-model summary { cursor: pointer; padding-block: 10px; min-height: 44px; }
.wf-fields summary { padding-block: 5px 8px; min-height: 36px; }
.wf-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(155px, 100%), 1fr)); gap: 9px 14px; margin: 4px 0 14px; }
.wf-inputs label { display: grid; gap: 5px; align-content: space-between; font-size: .85rem; line-height: 1.3; color: var(--wf-muted); }
.wf-inputs input { width: 100%; min-width: 0; min-height: 44px; padding: 6px 8px; border: 1px solid #698d77; border-radius: 4px; background: var(--deep); color: #f3faf5; font-size: 1rem; color-scheme: dark; }

.wf-work { display: grid; grid-template-columns: minmax(0, 3.25fr) minmax(250px, 1fr); gap: 1px; background: var(--wf-line); border-block: 1px solid var(--wf-line); }
.wf-canvas {
  padding: 15px var(--wf-pad) 17px;
  min-width: 0;
  background: radial-gradient(circle at 50% 26%, #18433096, transparent 85%), radial-gradient(#75a98f48 1px, transparent 1px) 0 0 / 17px 17px, #0c2a20;
}
.wf-canvas-head { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: space-between; align-items: center; margin-bottom: 13px; color: #e1f5e7; font-size: .86rem; font-weight: 680; }
.wf-canvas-head i { display: inline-block; width: 9px; height: 9px; margin-right: 4px; border: 1px solid var(--mint); border-radius: 50%; }
.wf-canvas-head small { font-size: .74rem; font-weight: 440; color: var(--wf-muted); }
.wf-track { --wf-gap: clamp(15px, 2.1vw, 32px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px var(--wf-gap); position: relative; }
.wf-node-slot { position: relative; grid-row: 1; min-width: 0; }
.wf-node-slot:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 51%;
  width: var(--wf-gap);
  height: 7px;
  transform: translateY(-50%);
  background: #6d937e;
  clip-path: polygon(0 41%, 77% 41%, 77% 0, 100% 50%, 77% 100%, 77% 59%, 0 59%);
}
.wf-node-slot[data-state="done"]::after { background: var(--mint); }
.wf-node-slot:is([data-state="hold"], [data-state="error"])::after { opacity: .35; }
.wf-node-slot[data-next="true"]::before {
  content: '';
  position: absolute;
  left: calc(100% - 3px);
  top: calc(51% - 3px);
  width: 6px;
  height: 6px;
  z-index: 1;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 9px 2px #d4f783a8;
  animation: wf-travel 520ms linear both;
}
@keyframes wf-travel { from { transform: translateX(0); } to { transform: translateX(var(--wf-gap)); } }
.wf-node {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 9px;
  position: relative;
  width: 100%;
  min-height: 134px;
  height: 100%;
  padding: 10px;
  text-align: left;
  border: 1px solid #668b75;
  border-radius: 5px;
  background: #0e2e24;
  color: #edf8f0;
}
.wf-node:hover { background: #194333; }
.wf-node[aria-pressed="true"] { box-shadow: inset 0 -2px #a5d8b7; }
.wf-node-icon { display: grid; place-items: center; width: 29px; height: 29px; color: var(--mint); background: #204837; border-radius: 4px; }
.wf-node-icon svg { width: 18px; height: 18px; }
.wf-node-copy { display: grid; gap: 4px; align-content: start; }
.wf-node-copy small { color: var(--wf-muted); font: 500 .66rem/1.28 var(--mono); overflow-wrap: anywhere; }
.wf-node-copy strong { font-size: .89rem; line-height: 1.15; overflow-wrap: anywhere; }
.wf-node-state { width: fit-content; max-width: 100%; color: var(--wf-muted); font-size: .71rem; line-height: 1.15; font-weight: 640; }
.wf-node-slot[data-state="running"] .wf-node { border-color: var(--signal); box-shadow: inset 0 -2px var(--signal), 0 0 22px #c4ff6042; background: #234733; animation: wf-node-flash 550ms ease-out both; }
.wf-node-slot:is([data-state="running"], [data-state="done"]) .wf-node-state { color: var(--signal); }
.wf-node-slot[data-state="done"] .wf-node { border-color: #85ad94; }
.wf-node-slot:is([data-state="hold"], [data-state="error"]) .wf-node { border-color: #c99c6b; background: #3b3324; }
.wf-node-slot:is([data-state="hold"], [data-state="error"]) .wf-node-state { color: var(--wf-amber); }
.wf-node-slot[data-state="locked"] .wf-node { border-style: dashed; background: #132c23; }
@keyframes wf-node-flash { from { filter: brightness(1.28); } to { filter: brightness(1); } }

.wf-branch { display: grid; gap: 8px; grid-row: auto; position: relative; padding: 9px 12px; border: 1px solid #ad8e64; border-radius: 4px; background: #342d20; font-size: .86rem; }
#wf-retry { grid-column: 2 / -1; }
#wf-review { grid-column: 3 / -1; }
.wf-branch::before { content: ''; position: absolute; bottom: 100%; left: 14%; height: 15px; border-left: 2px solid #ce9a61; }
.wf-branch-label { color: var(--wf-amber); font-weight: 700; }
.wf-branch p { color: #f2e5d4; margin-top: 3px; line-height: 1.35; }
.wf-branch:is([data-kind="approved"], [data-kind="recovered"]) { background: #163d2d; border-color: #86ae95; }
.wf-branch:is([data-kind="approved"], [data-kind="recovered"])::before { border-color: var(--mint); }
.wf-branch:is([data-kind="approved"], [data-kind="recovered"]) .wf-branch-label { color: var(--signal); }
.wf-branch:is([data-kind="approved"], [data-kind="recovered"]) p { color: var(--mint); }
.wf-branch[data-kind="approved"]::after {
  content: '';
  position: absolute;
  bottom: 100%;
  right: 18%;
  width: 7px;
  height: 14px;
  background: var(--mint);
  clip-path: polygon(50% 0, 100% 39%, 62% 39%, 62% 100%, 38% 100%, 38% 39%, 0 39%);
}

.wf-outcome { min-width: 0; padding: 14px clamp(13px, 1.6vw, 22px); background: #13362a; border-top: 2px solid #6a9480; }
.wf-outcome[data-phase="done"] { border-color: var(--signal); background: linear-gradient(125deg, #224c36, #123429 85%); }
.wf-outcome:is([data-phase="waiting"], [data-phase="offline"], [data-phase="rejected"]) { border-color: var(--wf-amber); }
.wf-outcome-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2px 6px; padding-bottom: 8px; border-bottom: 1px solid #567866; color: var(--mint); font: 500 .68rem/1.4 var(--mono); }
.wf-outcome h3 { margin-top: 10px; font-size: clamp(1.18rem, 2vw, 1.61rem); text-align: start; overflow-wrap: anywhere; }
.wf-outcome[data-phase="done"] h3 { color: var(--signal); }
.wf-outcome > p { color: var(--wf-muted); font-size: .85rem; line-height: 1.4; margin-top: 6px; }
.wf-outcome dl { margin: 0; }
.wf-outcome dl:not(:empty) { margin-block: 9px; }
.wf-outcome dl div { padding-block: 5px; border-bottom: 1px solid #547665; overflow-wrap: anywhere; }
.wf-outcome dt { color: var(--wf-muted); font-size: .73rem; }
.wf-outcome dd { margin: 0; font-size: .84rem; font-weight: 620; }
#wf-download { margin-top: 6px; }
.wf-evidence { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 10px 18px; padding-block: 13px; border-bottom: 1px solid var(--wf-line); background: #0e2c22; }
.wf-evidence h3 { font-size: 1rem; text-align: start; margin-top: 3px; }
.wf-evidence-source { font-size: .75rem; color: var(--mint); font-weight: 680; }
#wf-evidence-detail, #wf-evidence-rule { font-size: .85rem; margin-top: 3px; color: #daeae0; line-height: 1.4; }
#wf-evidence-rule { color: var(--wf-muted); }
#wf-evidence-detail.wf-quote { border-left: 2px solid var(--mint); padding-left: 8px; }
.wf-log { border-bottom: 1px solid var(--wf-line); font-size: .86rem; }
.wf-log summary { color: var(--mint); }
.wf-log ol { padding: 0 0 13px 24px; }
.wf-log li { padding: 4px 0; }
.wf-log li span { display: block; color: var(--wf-muted); }
.wf-disclosure { padding-block: 9px; font-size: .75rem; color: var(--wf-muted); line-height: 1.4; }
.wf-model, .wf-contact { margin-top: 13px; padding-inline: clamp(13px, 2vw, 25px); border: 1px solid var(--wf-line); border-radius: 6px; background: #102e24; }
.wf-model summary { color: var(--mint); font-weight: 680; }
.wf-model summary small { margin-left: 8px; color: var(--wf-muted); font-size: .78rem; font-weight: 430; }
.wf-model-result { display: flex; flex-wrap: wrap; gap: 6px 27px; }
.wf-model-result strong { display: block; color: var(--signal); font-size: clamp(1.35rem, 3vw, 2rem); letter-spacing: -.035em; line-height: 1.2; overflow-wrap: anywhere; }
.wf-model-result span, #wf-model-note { color: var(--wf-muted); font-size: .85rem; }
#wf-model-note { margin-block: 8px 12px; }
.wf-contact { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 22px; padding-block: 15px; }
.wf-contact h2 { font-size: clamp(1.24rem, 2.35vw, 2rem); text-align: start; }
.wf-contact p { color: var(--wf-muted); margin-top: 5px; font-size: .9rem; }

@media (max-width: 890px) {
  .wf-work { grid-template-columns: minmax(0, 1fr); }
  .wf-outcome dl:not(:empty) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
}
@media (max-width: 580px) {
  .wf-board-head { flex-wrap: wrap; }
  .wf-status-group { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 3px 10px; text-align: start; min-width: 0; width: 100%; }
  .wf-progress-row { margin-top: 0; }
  .wf-controls { padding-block: 8px; }
  .wf-scenarios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .wf-choice { min-height: 42px; padding-inline: 5px; font-size: .75rem; }
  .wf-run-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; }
  .wf-track { --wf-gap: 13px; display: flex; flex-direction: column; gap: var(--wf-gap); }
  .wf-node { display: grid; grid-template: auto / 29px minmax(0, 1fr) auto; gap: 7px; min-height: 48px; padding: 5px 8px; align-items: center; }
  .wf-node-copy { gap: 2px; }
  .wf-node-copy strong { font-size: .84rem; }
  .wf-node-slot:not(:last-child)::after { top: 100%; left: 21px; width: 7px; height: var(--wf-gap); transform: none; clip-path: polygon(41% 0, 59% 0, 59% 70%, 100% 70%, 50% 100%, 0 70%, 41% 70%); }
  .wf-node-slot[data-next="true"]::before { left: 21px; top: calc(100% - 2px); }
  @keyframes wf-travel { from { transform: translateY(0); } to { transform: translateY(var(--wf-gap)); } }
  .wf-branch { margin-left: 20px; }
  .wf-branch::before { left: 3px; height: 14px; }
  .wf-branch[data-kind="approved"]::after { top: 100%; bottom: auto; left: 0; transform: rotate(180deg); }
  .wf-evidence { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .wf-model summary small { display: block; margin-left: 0; }
}
@media (max-width: 359px) {
  .wf-outcome dl:not(:empty) { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .wf-node-slot[data-next="true"]::before { display: none; }
  .wf-node-slot[data-state="running"] .wf-node { animation: none; }
}

.wf-evidence { scroll-margin-block-start: 96px; }
.wf-branch { animation: wf-branch-enter 230ms ease-out both; }
@keyframes wf-branch-enter {
  from { opacity: .65; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (min-width: 891px) {
  .wf-node-slot:last-child:is([data-state="running"], [data-state="done"])::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 51%;
    width: var(--wf-pad);
    height: 7px;
    transform: translateY(-50%);
    background: var(--signal);
    clip-path: polygon(0 41%, 77% 41%, 77% 0, 100% 50%, 77% 100%, 77% 59%, 0 59%);
  }
}
@media (max-width: 359px) {
  .wf-page { padding-top: 21px; }
  .wf-intro h1 { font-size: 1.85rem; }
}
@media (prefers-reduced-motion: reduce) { .wf-branch { animation: none; } }

#wf-cta-label { font: inherit; flex: 0 1 auto; min-width: 0; }

.wf-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.wf-hub-card {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: clamp(14px, 2.25vw, 25px);
  border: 1px solid var(--wf-line);
  border-top: 2px solid #84ad96;
  background: #103226;
  border-radius: 6px;
}
.wf-hub-card h2, .wf-brief h2, .wf-related h2 { font-size: clamp(1.22rem, 2.2vw, 1.85rem); text-align: start; }
.wf-hub-card h2 a { display: inline-block; padding-block: 4px; }
.wf-hub-card h2 a:hover, .wf-brief a:hover, .wf-related a:hover { color: var(--signal); }
.wf-hub-card h2 span { color: var(--signal); }
.wf-hub-card > p:last-child, .wf-hub-note { color: var(--wf-muted); font-size: .91rem; }
.wf-hub-note { margin-top: 13px; }
.wf-brief, .wf-related {
  margin-top: 18px;
  padding: clamp(13px, 2vw, 24px);
  border: 1px solid var(--wf-line);
  border-radius: 6px;
  background: #102e24;
}
.wf-brief dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 12px 0;
}
.wf-brief dt { color: var(--mint); font-weight: 690; }
.wf-brief dd { margin: 4px 0 0; color: var(--wf-muted); font-size: .9rem; }
.wf-brief-link, .wf-related a { color: var(--mint); text-decoration: underline; text-underline-offset: 4px; font-size: .9rem; }
.wf-related ul { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; padding: 10px 0 0; }
@media (max-width: 850px) { .wf-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 570px) { .wf-hub-grid, .wf-brief dl { grid-template-columns: minmax(0, 1fr); } }
.wf-views { display:flex; flex-wrap:wrap; gap:7px; margin:12px 0; }
.wf-views button { min-height:44px; }
.wf-source-link { display:inline-flex; align-items:center; gap:6px; max-width:100%; min-height:33px; border:0; padding:0; background:transparent; color:inherit; font:inherit; text-align:left; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.wf-source-link:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
.wf-hub-card-variation { border-style:dashed; }
.wf-fallback dl { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:8px; margin:12px 0; }
.wf-fallback dt { font-weight:650; }
.wf-fallback dd { margin:0; }