/* Guided Workflow -- the 8th tool: a station-by-station path (Identify -> Procedure ->
   Date & Timeline -> Fees) with a live preview docked at the bottom. Own identity colour
   so it reads as its own tool in the nav, distinct from the other seven. */
.vcl-app {
  --workflow: #41762F;
  --workflow-bg: #EBF2E3;
  --workflow-tint: rgba(65, 118, 47, 0.07);
}

.vcl-app .vcl-wf {
  /* Fill the whole detail column (like the Workload tool) rather than capping at 760px --
     the extra width goes to the timeline in Station C. */
  max-width: none;
}

/* Head styled like the other tools (serif title + description + a coloured divider). */
.vcl-app .vcl-wf-head {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--workflow);
}
.vcl-app .vcl-wf-head h3 {
  font-family: "IBM Plex Serif", serif;
  font-weight: 600;
  font-size: 20px;
  margin: 0 0 8px;
}
.vcl-app .vcl-wf-head p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* --- Station indicator (A B C D) --- */
.vcl-app .vcl-wf-stations {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
}
.vcl-app .vcl-wf-station {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font: inherit;
}
.vcl-app .vcl-wf-station:disabled { cursor: default; }
.vcl-app .vcl-wf-station__dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  background: #fff;
  border: 1.5px solid var(--line, #d8d8d2);
  color: var(--muted);
}
.vcl-app .vcl-wf-station.is-active .vcl-wf-station__dot {
  background: var(--workflow-bg);
  border-color: var(--workflow);
  color: var(--workflow);
}
.vcl-app .vcl-wf-station.is-done .vcl-wf-station__dot {
  background: var(--workflow);
  border-color: var(--workflow);
  color: #fff;
}
.vcl-app .vcl-wf-station__label {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  line-height: 1.3;
}
.vcl-app .vcl-wf-station.is-active .vcl-wf-station__label { color: var(--workflow); font-weight: 600; }

/* connecting line behind the dots */
.vcl-app .vcl-wf-stations { position: relative; }

/* --- Station body --- */
.vcl-app .vcl-wf-body {
  border: 1px solid var(--line, #e4e4de);
  border-radius: 12px;
  background: #fff;
  padding: 18px 20px;
  margin-bottom: 14px;
}
.vcl-app .vcl-wf-body__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink, #222);
  margin: 0 0 2px;
}
.vcl-app .vcl-wf-body__sub {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 16px;
}
.vcl-app .vcl-wf-placeholder {
  font-size: 13px;
  color: var(--ink-faint, #8a8a83);
  background: var(--workflow-tint);
  border: 1px dashed color-mix(in srgb, var(--workflow) 35%, transparent);
  border-radius: 10px;
  padding: 22px;
  text-align: center;
}

/* --- Nav buttons --- */
.vcl-app .vcl-wf-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
}
.vcl-app .vcl-wf-btn {
  font-size: 13px;
  border-radius: 8px;
  padding: 7px 16px;
  cursor: pointer;
  border: 1px solid var(--line, #d8d8d2);
  background: #fff;
  color: var(--ink, #222);
}
.vcl-app .vcl-wf-btn:hover { border-color: var(--workflow); }
.vcl-app .vcl-wf-btn--primary {
  background: var(--workflow-bg);
  border-color: var(--workflow);
  color: var(--workflow);
  font-weight: 600;
}
.vcl-app .vcl-wf-btn[disabled] { opacity: 0.4; cursor: default; }

/* --- Live preview (docked at the bottom) --- */
.vcl-app .vcl-wf-live {
  border: 1.5px solid var(--workflow);
  border-radius: 12px;
  background: var(--workflow-bg);
  padding: 12px 16px;
}
.vcl-app .vcl-wf-live__head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--workflow);
  margin-bottom: 10px;
}
.vcl-app .vcl-wf-live__head .hint {
  margin-left: auto;
  font-weight: 400;
  color: var(--muted);
}
.vcl-app .vcl-wf-live__row {
  display: flex;
  gap: 14px;
  align-items: stretch;
}
.vcl-app .vcl-wf-live__stat {
  text-align: center;
  padding: 0 4px;
  min-width: 74px;
}
.vcl-app .vcl-wf-live__stat .v {
  font-size: 20px;
  font-weight: 600;
  color: var(--workflow);
  line-height: 1.1;
}
.vcl-app .vcl-wf-live__range {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.15;
  margin-top: 1px;
}
.vcl-app .vcl-wf-live__stat .l {
  font-size: 10px;
  color: var(--muted);
}
.vcl-app .vcl-wf-live__mid {
  flex: 1;
  border-left: 1px solid color-mix(in srgb, var(--workflow) 30%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--workflow) 30%, transparent);
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.vcl-app .vcl-wf-live__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.vcl-app .vcl-wf-chip {
  font-size: 11px;
  background: #fff;
  border: 0.5px solid color-mix(in srgb, var(--workflow) 30%, transparent);
  color: var(--ink, #222);
  border-radius: 20px;
  padding: 2px 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* --- Station A: identify (picker + substance) --- */
.vcl-app .vcl-wf-flabel {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink, #222);
  margin-bottom: 6px;
}
.vcl-app .vcl-wf-search input {
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  padding: 8px 12px;
  border: 1px solid var(--line, #d8d8d2);
  border-radius: 8px;
  background: #fff;
}
.vcl-app .vcl-wf-search input:focus {
  outline: none;
  border-color: var(--workflow);
}
.vcl-app .vcl-wf-results {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
}
.vcl-app .vcl-wf-result {
  display: flex;
  gap: 10px;
  align-items: baseline;
  text-align: left;
  background: #fff;
  border: 0.5px solid var(--line, #e4e4de);
  border-radius: 7px;
  padding: 7px 10px;
  cursor: pointer;
  font: inherit;
}
.vcl-app .vcl-wf-result:hover { border-color: var(--workflow); background: var(--workflow-tint); }
.vcl-app .vcl-wf-result__code { font-weight: 600; color: var(--workflow); font-size: 12px; white-space: nowrap; }
.vcl-app .vcl-wf-result__title { font-size: 12px; color: var(--muted); }
.vcl-app .vcl-wf-hint { font-size: 12px; color: var(--ink-faint, #8a8a83); margin: 6px 0 0; }
/* Required-action variant: a Type-IA-only submission must pick a mode before Next enables.
   Tool accent colour + weight lifts it out of the neutral hint grey. */
.vcl-app .vcl-wf-hint--req { color: var(--workflow); font-weight: 600; }

/* Chapter-C multi-RMS Super-Grouping warning -- the one new visual element this feature
   introduces; warm/amber accent + left stripe keeps it calm alongside vcl-wf-hint above. */
.vcl-app .vcl-wf-warn { border: 1px solid #e6c15a; border-left: 3px solid #c8912a; background: #fdf6e3; border-radius: 8px; padding: 12px 14px; margin: 12px 0; }
.vcl-app .vcl-wf-warn__title { font-weight: 600; color: #8a5a12; margin-bottom: 4px; font-size: 13px; }
.vcl-app .vcl-wf-warn__body { color: #6f5312; font-size: 13px; line-height: 1.5; }

.vcl-app .vcl-wf-variants { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.vcl-app .vcl-wf-variant {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 0.5px solid var(--line, #e4e4de);
  border-radius: 8px;
  padding: 9px 12px;
  cursor: pointer;
}
.vcl-app .vcl-wf-variant:hover { border-color: var(--workflow); background: var(--workflow-tint); }
.vcl-app .vcl-wf-variant__label { font-size: 13px; color: var(--ink, #222); }

.vcl-app .vcl-wf-picked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--workflow-tint);
  border: 1px solid color-mix(in srgb, var(--workflow) 30%, transparent);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
}
.vcl-app .vcl-wf-picked__code { font-weight: 600; color: var(--workflow); }
.vcl-app .vcl-wf-change {
  font-size: 12px;
  border: 1px solid var(--line, #d8d8d2);
  background: #fff;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.vcl-app .vcl-wf-change:hover { border-color: var(--workflow); }

.vcl-app .vcl-wf-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.vcl-app .vcl-wf-opt {
  font-size: 13px;
  border: 1px solid var(--line, #d8d8d2);
  background: #fff;
  color: var(--ink, #222);
  border-radius: 8px;
  padding: 7px 14px;
  cursor: pointer;
}
.vcl-app .vcl-wf-opt:hover { border-color: var(--workflow); }
.vcl-app .vcl-wf-opt.is-on {
  background: var(--workflow-bg);
  border-color: var(--workflow);
  color: var(--workflow);
  font-weight: 600;
}
.vcl-app .vcl-wf-opt--sm { font-size: 12px; padding: 5px 11px; display: inline-flex; align-items: center; gap: 5px; }
.vcl-app .vcl-wf-opt.is-disabled { opacity: 0.35; cursor: default; }

/* Direct type pick (no classification) under the search */
.vcl-app .vcl-wf-quicktype {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 0.5px solid var(--line, #e4e4de);
}
.vcl-app .vcl-wf-quicktype__label { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.vcl-app .vcl-wf-brow__quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }

/* --- Station B: procedure editor (country level) --- */
.vcl-app .vcl-wf-field { margin-top: 4px; }
.vcl-app .vcl-wf-select {
  width: 100%;
  max-width: 380px;
  box-sizing: border-box;
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--line, #d8d8d2);
  border-radius: 8px;
  background: #fff;
}
.vcl-app .vcl-wf-select:focus { outline: none; border-color: var(--workflow); }

.vcl-app .vcl-wf-cgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 5px;
}
.vcl-app .vcl-wf-cc {
  font-size: 12px;
  text-align: center;
  padding: 5px 0;
  border: 0.5px solid var(--line, #d8d8d2);
  border-radius: 6px;
  background: #fff;
  color: var(--ink, #222);
  cursor: pointer;
}
.vcl-app .vcl-wf-cc:hover { border-color: var(--workflow); }
.vcl-app .vcl-wf-cc.is-on {
  background: var(--workflow-bg);
  border-color: var(--workflow);
  color: var(--workflow);
  font-weight: 600;
}
.vcl-app .vcl-wf-cc.is-disabled { opacity: 0.35; cursor: default; }

/* --- List builders (grouping / worksharing) --- */
.vcl-app .vcl-wf-builder {
  margin-top: 14px;
  border: 1px dashed color-mix(in srgb, var(--workflow) 40%, transparent);
  border-radius: 10px;
  background: var(--workflow-tint);
  padding: 12px 14px;
}
.vcl-app .vcl-wf-builder__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--workflow);
  margin-bottom: 8px;
}
.vcl-app .vcl-wf-count {
  font-size: 11px;
  font-weight: 600;
  background: #fff;
  color: var(--workflow);
  border-radius: 20px;
  padding: 1px 8px;
}
.vcl-app .vcl-wf-brow {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #fff;
  border: 0.5px solid var(--line, #e4e4de);
  border-radius: 8px;
  padding: 7px 10px;
  margin-bottom: 6px;
}
.vcl-app .vcl-wf-brow__main { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.4; }
/* Variant chooser inside a grouping row: full-width rows (reuses .vcl-wf-variant), stacked. */
.vcl-app .vcl-wf-brow__pick { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.vcl-app .vcl-wf-brow__pick .vcl-wf-variant { margin: 0; }
.vcl-app .vcl-wf-brow__input {
  width: 100%;
  box-sizing: border-box;
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--line, #d8d8d2);
  border-radius: 6px;
}
.vcl-app .vcl-wf-brow__input:focus { outline: none; border-color: var(--workflow); }
.vcl-app .vcl-wf-brow__matches { display: flex; flex-direction: column; gap: 3px; margin-top: 5px; }
.vcl-app .vcl-wf-brow__match {
  text-align: left;
  font-size: 12px;
  background: #fff;
  border: 0.5px solid var(--line, #e4e4de);
  border-radius: 6px;
  padding: 5px 8px;
  cursor: pointer;
  color: var(--muted);
}
.vcl-app .vcl-wf-brow__match:hover { border-color: var(--workflow); background: var(--workflow-tint); }
.vcl-app .vcl-wf-brow__variants { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.vcl-app .vcl-wf-rm {
  font-size: 12px;
  color: var(--muted);
  background: none;
  border: 0.5px solid var(--line, #d8d8d2);
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
  flex-shrink: 0;
}
.vcl-app .vcl-wf-rm:hover { border-color: #b23a2e; color: #b23a2e; }
.vcl-app .vcl-wf-add {
  font-size: 12px;
  width: 100%;
  text-align: center;
  border: 0.5px dashed color-mix(in srgb, var(--workflow) 45%, transparent);
  background: #fff;
  color: var(--workflow);
  border-radius: 7px;
  padding: 6px;
  cursor: pointer;
  margin-top: 2px;
}
.vcl-app .vcl-wf-add:hover { background: var(--workflow-tint); }
.vcl-app .vcl-wf-pcard {
  border: 0.5px solid var(--line, #e4e4de);
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.vcl-app .vcl-wf-pcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink, #222);
  margin-bottom: 8px;
}

/* --- Station D: fees per procedure --- */
.vcl-app .vcl-wf-fee-proc {
  border: 0.5px solid var(--line, #e4e4de);
  border-radius: 10px;
  background: #fff;
  padding: 10px 14px;
  margin-bottom: 10px;
}
.vcl-app .vcl-wf-fee-proc__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #222);
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 0.5px solid var(--line, #eee);
}
.vcl-app .vcl-wf-fee-proc__sum { color: var(--workflow); white-space: nowrap; }
.vcl-app .vcl-wf-fee-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  padding: 3px 0;
}
.vcl-app .vcl-wf-fee-line__c { color: var(--ink, #222); }
.vcl-app .vcl-wf-fee-line__cc {
  font-size: 10.5px;
  color: var(--muted);
  border: 0.5px solid var(--line, #d8d8d2);
  border-radius: 4px;
  padding: 0 4px;
}
.vcl-app .vcl-wf-fee-line__role { font-size: 11px; color: var(--muted); }
.vcl-app .vcl-wf-fee-line__amt { font-family: "IBM Plex Mono", monospace; font-size: 12px; white-space: nowrap; }
.vcl-app .vcl-wf-fee-grand {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--workflow);
  background: var(--workflow-bg);
  border: 1px solid var(--workflow);
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 4px;
}

/* --- Station C: timeline --- */
.vcl-app .vcl-wf-slider { margin: 14px 0 4px; }
.vcl-app .vcl-wf-slider label { display: block; font-size: 12px; margin-bottom: 4px; color: var(--ink, #222); }
.vcl-app .vcl-wf-slider label strong { color: var(--workflow); }
.vcl-app .vcl-wf-slider input[type="range"] { width: 320px; max-width: 100%; accent-color: var(--workflow); }

.vcl-app .vcl-wf-tl {
  position: relative;
  height: 16px;
  border-radius: 5px;
  overflow: hidden;
  background: #f0efe9;
  margin: 2px 0 10px; /* small top gap: the milestone markers' arrows sit directly above */
}
.vcl-app .vcl-wf-tl--mini { height: 9px; margin: 0; border-radius: 3px; }
.vcl-app .vcl-wf-tl-seg { position: absolute; top: 0; bottom: 0; }
.vcl-app .vcl-wf-tl-seg.prep { background: #cfd8c8; }
.vcl-app .vcl-wf-tl-seg.val { background: #b7c2a6; }
.vcl-app .vcl-wf-tl-seg.assess { background: var(--workflow); opacity: 0.55; }
.vcl-app .vcl-wf-tl-seg.stop {
  background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--workflow) 45%, #fff) 0 4px, #fff 4px 8px);
}
.vcl-app .vcl-wf-tl-seg.closure { background: var(--workflow); }

/* Milestone markers above the bar: a stacked label (role + day-number) with a short connector
   line and a ▼ arrow pointing down at the timeline. Adjacent close markers (Submission / Day 0)
   ride at different heights via an inline connector height so their labels never collide. */
.vcl-app .vcl-wf-tl-marks { position: relative; height: 56px; margin: 8px 0 0; }
.vcl-app .vcl-wf-tl-mark {
  position: absolute; bottom: 0; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; line-height: 1.15;
}
.vcl-app .vcl-wf-tl-mark .s { font-size: 9px; color: var(--muted); white-space: nowrap; }
.vcl-app .vcl-wf-tl-mark .t { font-size: 11.5px; font-weight: 600; color: var(--ink, #222); white-space: nowrap; }
.vcl-app .vcl-wf-tl-mark .conn { width: 1px; background: color-mix(in srgb, var(--workflow) 45%, transparent); }
.vcl-app .vcl-wf-tl-mark .a { font-size: 8px; line-height: 1; color: var(--workflow); }

/* Phase labels under the arrows: one per assessment phase, centred under its segment. Sits
   right beneath the duration arrows (small negative pull) so each name reads with its arrow. */
.vcl-app .vcl-wf-tl-phases { position: relative; height: 15px; margin-top: -4px; }
.vcl-app .vcl-wf-tl-phase { position: absolute; text-align: center; }
.vcl-app .vcl-wf-tl-phase span { font-size: 10px; color: var(--muted); white-space: nowrap; }

/* Small legend for the RA-owned segments + a gloss for the marker abbreviations. */
.vcl-app .vcl-wf-tl-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px 14px;
  margin-top: 12px;
}
.vcl-app .vcl-wf-tl-legend .k { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--muted); }
.vcl-app .vcl-wf-tl-legend .sw { width: 12px; height: 10px; border-radius: 2px; display: inline-block; flex: none; }
.vcl-app .vcl-wf-tl-legend .sw.prep { background: #cfd8c8; }
.vcl-app .vcl-wf-tl-legend .sw.closure { background: var(--workflow); }
.vcl-app .vcl-wf-tl-legend .note { flex-basis: 100%; font-size: 10px; color: var(--ink-faint, #8a8a83); line-height: 1.5; }

/* Duration arrows under the mini bar (Timetables-style): a horizontal line with an arrowhead
   at each end and the span's length in days floating over its middle. */
.vcl-app .vcl-wf-tl-durrow { position: relative; height: 20px; margin: 0 0 2px; }
.vcl-app .vcl-wf-tl-dur {
  position: absolute; top: 9px; height: 0;
  border-top: 1px solid color-mix(in srgb, var(--workflow) 50%, transparent);
}
.vcl-app .vcl-wf-tl-dur::before, .vcl-app .vcl-wf-tl-dur::after {
  content: ""; position: absolute; top: -3px; width: 0; height: 0;
  border-top: 3px solid transparent; border-bottom: 3px solid transparent;
}
.vcl-app .vcl-wf-tl-dur::before { left: 0; border-right: 5px solid color-mix(in srgb, var(--workflow) 50%, transparent); }
.vcl-app .vcl-wf-tl-dur::after { right: 0; border-left: 5px solid color-mix(in srgb, var(--workflow) 50%, transparent); }
.vcl-app .vcl-wf-tl-dur span {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px; color: var(--muted); background: #fff; padding: 0 4px; white-space: nowrap;
}

.vcl-app .vcl-wf-tl-list {
  border: 0.5px solid var(--line, #e4e4de);
  border-radius: 8px;
  overflow: hidden;
}
.vcl-app .vcl-wf-tl-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  padding: 6px 12px;
  border-bottom: 0.5px solid var(--line, #eee);
  color: var(--muted);
}
.vcl-app .vcl-wf-tl-row:last-child { border-bottom: none; }
.vcl-app .vcl-wf-tl-row.is-strong { color: var(--ink, #222); font-weight: 600; background: var(--workflow-tint); }
.vcl-app .vcl-wf-tl-row__d { font-family: "IBM Plex Mono", monospace; font-size: 12px; white-space: nowrap; }

/* --- Station D: hand-off link to the Fee Calculator --- */
.vcl-app .vcl-wf-xlink { margin-top: 14px; text-align: center; }
.vcl-app .vcl-wf-xlink__btn {
  font-size: 12px;
  color: var(--workflow);
  background: none;
  border: 1px dashed color-mix(in srgb, var(--workflow) 40%, transparent);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
}
.vcl-app .vcl-wf-xlink__btn:hover { background: var(--workflow-tint); border-style: solid; }

/* --- Station D: closing summary --- */
.vcl-app .vcl-wf-sum {
  margin-top: 16px;
  border: 1px solid color-mix(in srgb, var(--workflow) 30%, transparent);
  border-radius: 10px;
  background: var(--workflow-tint);
  padding: 12px 16px;
}
.vcl-app .vcl-wf-sum__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--workflow);
  margin-bottom: 8px;
}
.vcl-app .vcl-wf-sum__row {
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-size: 12.5px;
  padding: 4px 0;
  border-top: 0.5px solid color-mix(in srgb, var(--workflow) 15%, transparent);
}
.vcl-app .vcl-wf-sum__row:first-of-type { border-top: none; }
.vcl-app .vcl-wf-sum__l { flex: 0 0 120px; color: var(--muted); }
.vcl-app .vcl-wf-sum__v { flex: 1; color: var(--ink, #222); }
.vcl-app .vcl-wf-sum__muted { color: var(--muted); font-size: 11.5px; }

/* "Grouping" / "Worksharing" recognition tag before the value */
.vcl-app .vcl-wf-sum__tag {
  display: inline-block;
  font-size: 10px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  color: var(--workflow);
  background: #fff;
  border: 0.5px solid color-mix(in srgb, var(--workflow) 35%, transparent);
  border-radius: 20px; padding: 1px 8px; margin-right: 4px;
}
/* "Show codes & descriptions" toggle -- a quiet inline link */
.vcl-app .vcl-wf-sum__toggle {
  font: inherit; font-size: 11.5px; color: var(--workflow); font-weight: 600;
  background: none; border: none; padding: 0; margin-left: 6px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.vcl-app .vcl-wf-sum__toggle:hover { color: var(--workflow-deep, #2f5622); }
/* Grouped-variation list (revealed by the toggle) + worksharing procedure list */
.vcl-app .vcl-wf-sum__vlist,
.vcl-app .vcl-wf-sum__plist { display: flex; flex-direction: column; margin: 6px 0 4px; padding-left: 132px; }
.vcl-app .vcl-wf-sum__plist { gap: 5px; }
/* Variations, grouped by type: "Type IB · 3" sub-header, then code + badge over a description. */
.vcl-app .vcl-wf-sum__vgroup {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin: 9px 0 3px;
}
.vcl-app .vcl-wf-sum__vgroup:first-child { margin-top: 0; }
.vcl-app .vcl-wf-sum__vitem { padding: 5px 0; border-top: 0.5px solid var(--line, #eee); }
.vcl-app .vcl-wf-sum__vgroup + .vcl-wf-sum__vitem { border-top: none; }
.vcl-app .vcl-wf-sum__vhead { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.vcl-app .vcl-wf-sum__vcode { font-size: 12px; font-weight: 600; color: var(--workflow); white-space: nowrap; }
.vcl-app .vcl-wf-sum__vdesc { font-size: 12px; color: var(--muted); line-height: 1.45; }
/* Procedures list: numbered rows */
.vcl-app .vcl-wf-sum__pitem {
  font-size: 12px; color: var(--ink, #222); line-height: 1.4;
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.vcl-app .vcl-wf-sum__pn {
  flex: none; font-size: 10px; font-family: "IBM Plex Mono", monospace;
  color: var(--muted); border: 0.5px solid var(--line, #d8d8d2); border-radius: 4px; padding: 0 5px;
}
@media (max-width: 560px) {
  .vcl-app .vcl-wf-sum__vlist, .vcl-app .vcl-wf-sum__plist { padding-left: 0; }
}

/* --- Station D: strengths (default + overrides) --- */
.vcl-app .vcl-wf-strength {
  border: 0.5px solid var(--line, #e4e4de);
  border-radius: 10px;
  background: #fff;
  padding: 10px 14px;
  margin: 4px 0 12px;
}
.vcl-app .vcl-wf-strength__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  padding: 3px 0;
}
.vcl-app .vcl-wf-strength__l { color: var(--ink, #222); }
.vcl-app .vcl-wf-strength__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink, #222);
  cursor: pointer;
  margin-top: 8px;
}
.vcl-app .vcl-wf-strength__list {
  margin-top: 8px;
  border-top: 0.5px solid var(--line, #eee);
  padding-top: 4px;
}
.vcl-app .vcl-wf-num {
  width: 62px;
  box-sizing: border-box;
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid var(--line, #d8d8d2);
  border-radius: 6px;
  background: #fff;
  text-align: center;
}
.vcl-app .vcl-wf-num:focus { outline: none; border-color: var(--workflow); }

/* --- Station D: worksharing (lead box + per-line special-case picker) --- */
.vcl-app .vcl-wf-ws-lead {
  border: 1.5px solid var(--workflow);
  background: var(--workflow-tint);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 14px 0;
}
.vcl-app .vcl-wf-ws-lead__head {
  font-size: 12px;
  font-weight: 600;
  color: var(--workflow);
  margin-bottom: 4px;
}
.vcl-app .vcl-wf-ws-lead .vcl-wf-fee-line { padding: 4px 0; }
.vcl-app .vcl-wf-ws-lead .vcl-wf-fee-line__amt { color: var(--workflow); font-weight: 600; }
.vcl-app .vcl-wf-ws-lead .vcl-wf-hint { margin-top: 6px; }
.vcl-app .vcl-wf-fee-line__r {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.vcl-app .vcl-wf-fee-sel {
  font-size: 11.5px;
  padding: 3px 6px;
  border: 1px solid var(--line, #d8d8d2);
  border-radius: 6px;
  background: #fff;
  color: var(--ink, #222);
  max-width: 190px;
}
.vcl-app .vcl-wf-fee-sel:focus { outline: none; border-color: var(--workflow); }
.vcl-app .vcl-wf-fee-line__str { font-size: 11px; color: var(--muted); }
.vcl-app .vcl-wf-fee-line__note { font-size: 11px; color: var(--muted); font-style: italic; }

/* Summary: one line per variation (code + badge + description, no type sub-headers). */
.vcl-app .vcl-wf-sum__vitem1 {
  padding: 5px 0;
  border-top: 0.5px solid var(--line, #eee);
  font-size: 12px;
  line-height: 1.45;
}
.vcl-app .vcl-wf-sum__vitem1:first-child { border-top: none; }

/* --- Live preview: dates above / key-point markers below the mini timeline --- */
.vcl-app .vcl-wf-tl-dates { font-size: 11px; color: var(--ink, #222); margin: 0 0 4px; }
.vcl-app .vcl-wf-tl-dates strong { color: var(--workflow); }
.vcl-app .vcl-wf-tl-dates--muted { color: var(--muted); }
.vcl-app .vcl-wf-tl-dates__muted { color: var(--muted); }
/* NB: class deliberately NOT "vcl-wf-tl-marks" -- that one belongs to Station C's big timeline. */
.vcl-app .vcl-wf-live-marks {
  position: relative;
  height: 15px;
  margin-top: 3px;
  font-size: 9.5px;
  color: var(--muted);
}
.vcl-app .vcl-wf-live-marks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.vcl-app .vcl-wf-live-marks span::before {
  content: "\25B2";
  display: block;
  text-align: center;
  font-size: 6px;
  line-height: 4px;
  color: var(--workflow);
}

/* --- Station D worksharing view: column grid per procedure card ("V1") --- */
.vcl-app .vcl-wf-fee-proc { overflow-x: auto; }
.vcl-app .vcl-wf-fee-grid {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 64px 195px 70px 100px;
  gap: 5px 10px;
  align-items: center;
  font-size: 12.5px;
  padding: 2px 0;
  min-width: 620px;
}
.vcl-app .vcl-wf-fee-grid__h {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
  border-bottom: 0.5px solid var(--line, #eee);
  padding-bottom: 3px;
}
.vcl-app .vcl-wf-fee-grid__h.is-c { text-align: center; }
.vcl-app .vcl-wf-fee-grid__str { font-size: 11px; color: var(--muted); text-align: center; }
.vcl-app .vcl-wf-fee-grid .is-r { text-align: right; }
.vcl-app .vcl-wf-fee-sel { width: 185px; max-width: 185px; box-sizing: border-box; }
.vcl-app .vcl-wf-fee-sel--static {
  display: inline-block;
  color: var(--muted);
  background: #f6f6f2;
  text-align: center;
}
/* CMS chip: tiny authority suffix for composite codes ("DE" + "BfArM") on one line. */
.vcl-app .vcl-wf-cc__sfx {
  font-size: 7.5px;
  font-weight: 600;
  color: var(--muted);
  margin-left: 2px;
}
.vcl-app .vcl-wf-cc.is-on .vcl-wf-cc__sfx { color: inherit; }

/* --- Station D: strengths block (bold head, right-aligned reset, deviation tint) --- */
.vcl-app .vcl-wf-strength__l--head { font-weight: 700; }
.vcl-app .vcl-wf-strength__hintrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.vcl-app .vcl-wf-strength__hintrow .vcl-wf-hint { flex: 1; margin: 6px 0; }
.vcl-app .vcl-wf-strength__reset {
  font-size: 12px;
  border: 1px solid var(--workflow);
  color: var(--workflow);
  background: #fff;
  border-radius: 7px;
  padding: 5px 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.vcl-app .vcl-wf-strength__reset:hover { background: var(--workflow-tint); }
.vcl-app .vcl-wf-strength__reset[disabled] { opacity: 0.4; cursor: default; }
.vcl-app .vcl-wf-num.is-diff {
  border-color: var(--workflow);
  background: var(--workflow-bg);
  font-weight: 600;
}

/* --- Station A: Product-information gate switch (workload-pink accent when on) --- */
.vcl-app .vcl-wf-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; margin: 2px 0; }
.vcl-app .vcl-wf-switch__track { width: 38px; height: 22px; border-radius: 999px; background: #d8d8d2; position: relative; flex: none; transition: background .15s; }
.vcl-app .vcl-wf-switch__thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
.vcl-app .vcl-wf-switch.is-on .vcl-wf-switch__track { background: var(--workflow); }
.vcl-app .vcl-wf-switch.is-on .vcl-wf-switch__thumb { left: 18px; }
.vcl-app .vcl-wf-switch__label { font-size: 12.5px; font-weight: 600; color: var(--ink, #222); }

/* --- "How the RA hours are calculated" box (below the live preview, every station) --- */
/* Workload identity colour so it reads as the shared methodology, distinct from the green preview. */
.vcl-app .vcl-wf-meth { margin-top: 8px; border: 1px solid color-mix(in srgb, #41762F 30%, #EBF2E3); border-radius: 12px; background: #fff; overflow: hidden; }
.vcl-app .vcl-wf-meth-bar { display: flex; align-items: center; gap: 8px; width: 100%; font: inherit; font-size: 12px; font-weight: 600; color: #41762F; background: #EBF2E3; border: none; padding: 10px 14px; cursor: pointer; text-align: left; }
.vcl-app .vcl-wf-meth-bar .i { width: 16px; height: 16px; border-radius: 50%; background: #41762F; color: #fff; font-size: 10px; font-style: italic; font-family: "IBM Plex Serif", serif; display: flex; align-items: center; justify-content: center; flex: none; }
.vcl-app .vcl-wf-meth-bar .t { flex: 1; }
.vcl-app .vcl-wf-meth-bar .chev { color: #41762F; }
.vcl-app .vcl-wf-meth-panel { padding: 0; }
.vcl-app .vcl-wf-meth-inner { padding: 14px 16px; border-top: 1px solid color-mix(in srgb, #41762F 18%, transparent); }
.vcl-app .vcl-wf-meth-table { margin: 0 0 14px; }
.vcl-app .vcl-wf-meth-table__title { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #41762F; margin: 0 0 4px; }
.vcl-app .vcl-wf-meth-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12.5px; padding: 3px 0; border-top: .5px solid var(--line, #eee); color: var(--muted); }
.vcl-app .vcl-wf-meth-row:first-of-type { border-top: none; }
.vcl-app .vcl-wf-meth-row.is-active { color: var(--ink, #222); font-weight: 600; }
.vcl-app .vcl-wf-meth-val { font-family: "IBM Plex Sans", sans-serif; font-size: 12.5px; font-weight: 500; white-space: nowrap; color: #27500A; }
.vcl-app .vcl-wf-meth-note { font-size: 11px; color: var(--muted); line-height: 1.5; margin: 5px 0 0; }
.vcl-app .vcl-wf-meth-formula { display: block; width: 100%; box-sizing: border-box; font-family: "IBM Plex Mono", monospace; font-size: 11px; background: #EBF2E3; border-radius: 8px; padding: 8px 10px; color: var(--ink, #222); line-height: 1.6; margin: 0 0 14px; }
.vcl-app .vcl-wf-meth-total { border-top: 1px solid color-mix(in srgb, #41762F 35%, transparent); margin-top: 2px; padding-top: 7px; font-weight: 600; color: var(--workflow); }
.vcl-app .vcl-wf-meth-total .vcl-wf-meth-val { color: var(--workflow); font-weight: 600; }
.vcl-app .vcl-wf-meth-colhead { text-align: right; font-size: 11px; color: var(--muted); margin: 2px 0 6px; }
.vcl-app .vcl-wf-meth-h { font-size: 12px; font-weight: 700; color: var(--ink, #222); margin: 0 0 8px; }
.vcl-app .vcl-wf-meth-src { font-size: 11px; color: var(--muted); line-height: 1.5; margin-top: 6px; }
.vcl-app .vcl-wf-meth-src strong { color: var(--ink, #222); }
.vcl-app .vcl-wf-meth-dl { display: inline-block; margin-top: 8px; font-size: 11px; color: #41762F; text-decoration: underline; text-underline-offset: 2px; }
/* Additive breakdown: each named section is fine-line separated; its subtotal has a dashed
   top rule; the grand total (.vcl-wf-meth-total) keeps the solid, heavier rule above. */
.vcl-app .vcl-wf-meth-sec { padding: 9px 0 3px; border-top: 1px solid color-mix(in srgb, #41762F 18%, transparent); }
.vcl-app .vcl-wf-meth-sec:first-of-type { border-top: none; padding-top: 0; }
.vcl-app .vcl-wf-meth-sec__title { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #41762F; margin: 0 0 4px; }
.vcl-app .vcl-wf-meth-subtotal { border-top: 1px dashed color-mix(in srgb, #41762F 30%, transparent); margin-top: 3px; padding-top: 6px; font-weight: 600; color: var(--ink, #222); }
/* RA-hours reference lookup: filter row + itemised table, rendered from window.VCL_WORKLOAD_HD. */
.vcl-app .vcl-wf-ref-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.vcl-app .vcl-wf-ref-filter { display: flex; flex-direction: column; gap: 3px; }
.vcl-app .vcl-wf-ref-filter label { font-size: 11px; color: var(--muted); }
.vcl-app .vcl-wf-ref-filter .vcl-wf-select { min-width: 130px; }
.vcl-app .vcl-wf-ref-table { font-size: 12.5px; }
.vcl-app .vcl-wf-ref-row { display: grid; grid-template-columns: 54px 1fr 64px; gap: 8px; padding: 4px 0; border-top: .5px solid var(--line, #eee); color: #27500A; }
.vcl-app .vcl-wf-ref-row--head { color: var(--muted); font-size: 11px; border-top: none; }
.vcl-app .vcl-wf-ref-row > span:nth-child(3) { text-align: right; white-space: nowrap; }
.vcl-app .vcl-wf-ref-stream { color: #3B6D11; font-weight: 600; }
.vcl-app .vcl-wf-ref-mods { margin-top: 12px; padding-top: 9px; border-top: 1px solid color-mix(in srgb, #41762F 22%, transparent); }
.vcl-app .vcl-wf-ref-mod-head { display: grid; grid-template-columns: 1fr 64px; gap: 8px; color: var(--muted); font-size: 11px; padding-bottom: 2px; }
.vcl-app .vcl-wf-ref-mod-head--2 { grid-template-columns: 1fr 60px 60px; }
.vcl-app .vcl-wf-ref-mod-head > span:not(:first-child) { text-align: right; }
.vcl-app .vcl-wf-ref-mod-title { font-size: 12.5px; font-weight: 600; color: #3B6D11; margin: 6px 0 2px; }
.vcl-app .vcl-wf-ref-mod-row { display: grid; grid-template-columns: 1fr 64px; gap: 8px; padding: 2px 0 2px 12px; color: #27500A; font-size: 12.5px; }
.vcl-app .vcl-wf-ref-mod-row--2 { grid-template-columns: 1fr 60px 60px; }
.vcl-app .vcl-wf-ref-mod-row > span:not(:first-child) { text-align: right; white-space: nowrap; }