/* Victorifer live demo — operator copilot for an aseptic fill–pack line.
   Everything is scoped under #vf-demo so it can be embedded anywhere. */

#vf-demo {
  --gap: 16px;
  font: 14px/1.5 var(--sans);
  color: var(--body);
}
#vf-demo .panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
#vf-demo .ph {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
#vf-demo .ph h4 { font-size: 13px; letter-spacing: .01em; }
#vf-demo .ph-tag {
  margin-left: auto; font: 600 10px/1 var(--mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
#vf-demo .pbody { padding: 14px 16px; }
#vf-demo .pbody.fill { padding: 0; }

/* --- Control bar ------------------------------------------------------------ */
#vf-demo .bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: var(--gap);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
#vf-demo .bar .title { font: 700 14px/1 var(--sans); color: var(--ink); }
#vf-demo .bar .sub { color: var(--faint); font-size: 12px; }
#vf-demo .bar .spacer { flex: 1; }
#vf-demo .injects { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#vf-demo .inject-label {
  font: 600 10px/1 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); margin-right: 2px;
}
#vf-demo .pill {
  font: 600 11px/1 var(--mono); letter-spacing: .04em;
  padding: 6px 9px; border-radius: 100px;
  border: 1px solid var(--line-strong); color: var(--muted); background: var(--surface);
}
#vf-demo .pill.brain {
  color: var(--accent-dark); background: var(--accent-tint); border-color: transparent;
  cursor: pointer; font-family: var(--mono); transition: background .15s, color .15s;
}
#vf-demo .pill.brain:hover { background: var(--accent); color: #fff; }
#vf-demo .pill.brain[data-brain-agent="claude"] { background: var(--accent-dark); color: #fff; }
#vf-demo .pill.live { color: var(--ok); }
#vf-demo .pill.dead { color: var(--block); }

/* --- Guided tour -------------------------------------------------------------- */
#vf-demo .btn.tour { background: var(--accent-tint); border-color: transparent; color: var(--accent-dark); }
#vf-demo .btn.tour:hover { background: var(--accent); color: #fff; }
#vf-demo .tour-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; margin-bottom: var(--gap);
  background: var(--accent-tint); border: 1px solid var(--accent);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
#vf-demo .tour-bar[hidden] { display: none; }
#vf-demo .tour-step {
  font: 700 10px/1 var(--mono); letter-spacing: .08em; white-space: nowrap;
  color: #fff; background: var(--accent); border-radius: 100px; padding: 6px 10px;
}
#vf-demo .tour-text { flex: 1; font: 600 13px/1.5 var(--sans); color: var(--accent-dark); }
#vf-demo .tour-bar .btn { white-space: nowrap; }

/* --- Value delivered this session -------------------------------------------- */
#vf-demo .value-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  margin-bottom: var(--gap); background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
#vf-demo .v-item { background: var(--surface); padding: 14px 16px; text-align: center; }
#vf-demo .v-num { font: 700 24px/1.1 var(--mono); color: var(--ink); }
#vf-demo .v-lab { font: 600 10.5px/1.4 var(--sans); color: var(--muted); margin-top: 5px; }
#vf-demo .v-item.accent { background: var(--ok-tint); }
#vf-demo .v-item.accent .v-num { color: var(--ok); }
#vf-demo .v-item.accent .v-lab { color: #1a6a3c; }
@media (max-width: 720px) { #vf-demo .value-strip { grid-template-columns: repeat(2, 1fr); } }

/* gate toggle */
#vf-demo .gate-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
#vf-demo .gate-toggle-txt { font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ok); }
#vf-demo .switch {
  width: 38px; height: 22px; border-radius: 100px; background: var(--ok);
  position: relative; transition: background .18s;
}
#vf-demo .switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: transform .18s; box-shadow: var(--shadow-sm);
}
#vf-demo .switch[aria-checked="false"] { background: var(--block); }
#vf-demo .switch[aria-checked="false"]::after { transform: translateX(16px); }
#vf-demo .gate-toggle.off .gate-toggle-txt { color: var(--block); }

/* --- Pipeline ribbon -------------------------------------------------------- */
#vf-demo .ribbon {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;
  margin-bottom: var(--gap);
}
#vf-demo .stage {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: border-color .18s, background .18s;
}
#vf-demo .stage .num { font: 600 10px/1 var(--mono); color: var(--faint); }
#vf-demo .stage .pip { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); transition: background .18s; }
#vf-demo .stage .name { font: 600 10px/1 var(--sans); letter-spacing: .06em; color: var(--muted); white-space: nowrap; }
#vf-demo .stage.active { border-color: var(--accent); background: var(--accent-tint); }
#vf-demo .stage.active .pip { background: var(--accent); }
#vf-demo .stage.active .name { color: var(--accent-dark); }
#vf-demo .stage.done .pip { background: var(--accent); }
#vf-demo .stage.gate.pass { border-color: var(--ok); background: var(--ok-tint); }
#vf-demo .stage.gate.pass .pip { background: var(--ok); }
#vf-demo .stage.gate.reject { border-color: var(--block); background: var(--block-tint); }
#vf-demo .stage.gate.reject .pip { background: var(--block); }
#vf-demo .stage.gate.review { border-color: var(--review); background: var(--review-tint); }
#vf-demo .stage.gate.review .pip { background: var(--review); }
@media (max-width: 820px) { #vf-demo .ribbon { grid-template-columns: repeat(4, 1fr); } }

/* --- Machine hero ----------------------------------------------------------- */
#vf-demo .machine-panel { margin-bottom: var(--gap); }
#vf-demo .state-pill {
  margin-left: auto; font: 700 11px/1 var(--mono); letter-spacing: .1em;
  padding: 6px 11px; border-radius: 100px; text-transform: uppercase;
  color: var(--muted); background: var(--bg); border: 1px solid var(--line-strong);
}
#vf-demo[data-state="running"] .state-pill { color: var(--ok); background: var(--ok-tint); border-color: transparent; }
#vf-demo[data-state="waiting_for_product"] .state-pill { color: var(--review); background: var(--review-tint); border-color: transparent; }
#vf-demo[data-state="stopped"] .state-pill { color: var(--block); background: var(--block-tint); border-color: transparent; }
#vf-demo[data-state="off"] .state-pill { color: var(--faint); }

#vf-demo .machine-body { display: grid; grid-template-columns: 1.7fr 1fr; }
#vf-demo .machine-stage { position: relative; padding: 8px 6px; border-right: 1px solid var(--line);
  background: radial-gradient(120% 80% at 50% 0%, #fbfcfd 0%, var(--surface-2) 70%); }
#vf-demo .machine-svg { width: 100%; height: auto; display: block; }
@media (max-width: 760px) { #vf-demo .machine-body { grid-template-columns: 1fr; } #vf-demo .machine-stage { border-right: 0; border-bottom: 1px solid var(--line); } }

/* SVG line + conveyor */
#vf-demo .m-shadow { fill: rgba(17,33,56,.05); }
#vf-demo .m-belt { stroke: #b9c4d4; stroke-width: 5; stroke-linecap: round; }
#vf-demo .m-vials .vial rect { fill: #8fb0d4; }
#vf-demo[data-state="running"] .m-vials { animation: vf-belt 2.6s linear infinite; }
@keyframes vf-belt { from { transform: translateX(0); } to { transform: translateX(60px); } }

/* station modules */
#vf-demo .st-block { fill: #eef4fb; stroke: #c3d3e6; stroke-width: 1.2; transition: fill .25s, stroke .25s; }
#vf-demo .st-cap { fill: #d3e0ef; transition: fill .25s; }
#vf-demo .st-rib { stroke: #c8d6e7; stroke-width: 1; }
#vf-demo .sl-housing { fill: #dbe3ee; stroke: #b3c0d2; stroke-width: 1; }
#vf-demo .sl-base, #vf-demo .sl-pole { fill: #aab6c7; }
#vf-demo .st-label { font: 700 11px/1 var(--mono); fill: var(--ink); letter-spacing: .07em; text-anchor: middle; }
#vf-demo .st-note { font: 600 9.5px/1 var(--sans); fill: var(--muted); text-anchor: middle; transition: fill .2s; }

/* stack-light lamps: dim by default, lit by the station's state class */
#vf-demo .lamp { opacity: .14; transition: opacity .2s; }
#vf-demo .lamp.red { fill: var(--block); }
#vf-demo .lamp.amber { fill: var(--review); }
#vf-demo .lamp.green { fill: var(--ok); }
#vf-demo .station.state-running .lamp.green { opacity: 1; filter: drop-shadow(0 0 5px rgba(31,122,70,.55)); }
#vf-demo .station.state-waiting_for_product .lamp.amber { opacity: 1; filter: drop-shadow(0 0 5px rgba(154,98,6,.5)); }
#vf-demo .station.state-stopped .lamp.red { opacity: 1; filter: drop-shadow(0 0 6px rgba(179,38,30,.6)); }

/* station block tint + note colour by state */
#vf-demo .station.state-waiting_for_product .st-block { fill: var(--review-tint); stroke: #e3c891; }
#vf-demo .station.state-waiting_for_product .st-cap { fill: #f0dcb0; }
#vf-demo .station.state-waiting_for_product .st-note { fill: var(--review); }
#vf-demo .station.state-stopped .st-block { fill: var(--block-tint); stroke: #e2a8a3; }
#vf-demo .station.state-stopped .st-cap { fill: #f1c4c0; }
#vf-demo .station.state-stopped .st-note { fill: var(--block); }
#vf-demo .station.state-off .st-block { fill: #eef1f5; stroke: var(--line-strong); }
#vf-demo .station.state-off .st-cap { fill: #dfe4ea; }
#vf-demo.is-unsafe .station[data-station-key="cartoner"] .st-note { fill: var(--block); font-weight: 700; }

/* unsafe-restart overlay */
#vf-demo .machine-stage .unsafe {
  position: absolute; inset: 0; display: none; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 6px;
  background: rgba(179,38,30,.12); backdrop-filter: blur(1px);
  border: 2px solid var(--block); border-radius: var(--radius);
}
#vf-demo.is-unsafe .machine-stage .unsafe { display: flex; }
#vf-demo .unsafe-big { font: 800 22px/1 var(--sans); letter-spacing: .06em; color: var(--block); }
#vf-demo .unsafe-sub { font-size: 12px; color: var(--block); max-width: 320px; }
#vf-demo .unsafe-hint { font-size: 11px; color: var(--muted); max-width: 320px; margin-top: 4px; }

/* tag readouts */
#vf-demo .tags { padding: 16px; display: flex; flex-direction: column; gap: 9px; }
#vf-demo .tagrow { display: flex; align-items: baseline; gap: 8px; }
#vf-demo .tagrow .tk { font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
#vf-demo .tv.big { font: 700 30px/1 var(--mono); color: var(--ink); margin-left: auto; }
#vf-demo .oee-bar { height: 6px; border-radius: 4px; background: var(--bg); overflow: hidden; margin: -2px 0 6px; }
#vf-demo .oee-bar span { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width .4s ease; }
#vf-demo .tag { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
#vf-demo .tag .tk { font-size: 12px; color: var(--muted); }
#vf-demo .tag .tv { margin-left: auto; font: 600 14px/1 var(--mono); color: var(--ink); }
#vf-demo .tag .tu { font: 600 10px/1 var(--mono); color: var(--faint); width: 26px; }
#vf-demo .tag.cost .tv { color: var(--block); }
#vf-demo .tag.saved .tv { color: var(--ok); }
#vf-demo .tag .tv.warn { color: var(--block); }

/* --- Grid ------------------------------------------------------------------- */
#vf-demo .grid { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: var(--gap); align-items: start; }
@media (max-width: 980px) { #vf-demo .grid { grid-template-columns: 1fr; } }

/* --- Active alarms ---------------------------------------------------------- */
#vf-demo .alarms { display: flex; flex-direction: column; gap: 10px; min-height: 90px; }
#vf-demo .alarm-empty { color: var(--faint); font-size: 13px; padding: 18px 0; text-align: center; }
#vf-demo .alarm {
  border: 1px solid var(--line); border-left-width: 3px; border-radius: 6px;
  padding: 10px 12px; background: var(--surface-2);
}
#vf-demo .alarm.warning { border-left-color: var(--review); }
#vf-demo .alarm.critical { border-left-color: var(--block); }
#vf-demo .alarm .ah { display: flex; align-items: center; gap: 8px; }
#vf-demo .alarm .sev { font: 700 9px/1 var(--mono); letter-spacing: .1em; padding: 3px 6px; border-radius: 4px; text-transform: uppercase; }
#vf-demo .alarm.warning .sev { color: var(--review); background: var(--review-tint); }
#vf-demo .alarm.critical .sev { color: var(--block); background: var(--block-tint); }
#vf-demo .alarm .code { font: 700 12px/1 var(--mono); color: var(--ink); }
#vf-demo .alarm .station { margin-left: auto; font: 600 10px/1 var(--mono); color: var(--faint); letter-spacing: .06em; }
#vf-demo .alarm .msg { font-size: 12px; color: var(--body); margin-top: 6px; }

/* --- Cognitive stream ------------------------------------------------------- */
#vf-demo .stream { max-height: 420px; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; }
#vf-demo .stream .idle { color: var(--faint); font-size: 13px; padding: 16px 4px; }
#vf-demo .msg { border-left: 2px solid var(--line-strong); padding: 2px 0 2px 11px; }
#vf-demo .msg .role { font: 700 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
#vf-demo .msg .text { font-size: 12.5px; color: var(--body); margin-top: 4px; }
#vf-demo .msg.thought { border-left-color: var(--accent); }
#vf-demo .msg.thought .role { color: var(--accent-dark); }
#vf-demo .msg.action { border-left-color: var(--ink); }
#vf-demo .msg.observation { border-left-color: var(--muted); }
#vf-demo .msg.engine { border-left-color: var(--accent); }
#vf-demo .msg.engine .text { color: var(--accent-dark); font-weight: 600; }
#vf-demo .msg.error { border-left-color: var(--block); }
#vf-demo .msg.error .role { color: var(--block); }
#vf-demo .msg.error .text { color: var(--block); font-weight: 600; }
/* context source cards */
#vf-demo .srcs { display: flex; flex-direction: column; gap: 5px; margin-top: 7px; }
#vf-demo .src { display: flex; gap: 8px; font-size: 11px; padding: 6px 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; }
#vf-demo .src .s-src { font: 700 9.5px/1.3 var(--mono); letter-spacing: .04em; color: var(--accent-dark); white-space: nowrap; }
#vf-demo .src .s-det { color: var(--muted); }

/* --- Safety gate ------------------------------------------------------------ */
#vf-demo .gate-zone { padding: 14px 16px; }
#vf-demo[data-gate="off"] .ph-tag[data-gate-state] { color: var(--block); }
#vf-demo .verdict-card { border: 1px solid var(--line); border-radius: 8px; padding: 14px; text-align: center; background: var(--surface-2); transition: background .2s, border-color .2s; }
#vf-demo .verdict-big { font: 800 22px/1 var(--sans); letter-spacing: .08em; color: var(--faint); }
#vf-demo .verdict-target { font: 600 12px/1 var(--mono); color: var(--ink); margin-top: 8px; }
#vf-demo .verdict-reason { font-size: 11.5px; color: var(--muted); margin-top: 6px; }
#vf-demo .verdict-card.approve { border-color: var(--ok); background: var(--ok-tint); }
#vf-demo .verdict-card.approve .verdict-big { color: var(--ok); }
#vf-demo .verdict-card.block { border-color: var(--block); background: var(--block-tint); }
#vf-demo .verdict-card.block .verdict-big { color: var(--block); }
#vf-demo .verdict-card.review { border-color: var(--review); background: var(--review-tint); }
#vf-demo .verdict-card.review .verdict-big { color: var(--review); }

#vf-demo .tally { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
#vf-demo .tally .t { text-align: center; padding: 8px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); }
#vf-demo .tally .t b { display: block; font: 700 18px/1 var(--mono); color: var(--ink); }
#vf-demo .tally .t span { font: 600 9px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
#vf-demo .tally .t.ok b { color: var(--ok); }
#vf-demo .tally .t.block b { color: var(--block); }
#vf-demo .tally .t.review b { color: var(--review); }

/* --- Human-in-the-loop review ----------------------------------------------- */
#vf-demo .review-panel { margin-bottom: var(--gap); border: 1px solid var(--review); }
#vf-demo .review-panel .ph { background: var(--review-tint); border-bottom-color: #ecd3a3; }
#vf-demo .ph-tag.review {
  color: var(--review); background: #fff; border: 1px solid #e6c98f;
  padding: 4px 9px; border-radius: 100px; letter-spacing: .08em;
}
#vf-demo .review-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
#vf-demo .review-card {
  display: grid; grid-template-columns: auto 1fr; gap: 0 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--review); border-radius: 8px; padding: 16px 18px;
}
#vf-demo .rv-icon {
  grid-column: 1; grid-row: 1; width: 30px; height: 30px; border-radius: 7px;
  background: var(--review); color: #fff;
  font: 800 17px/30px var(--sans); text-align: center;
}
#vf-demo .rv-text { grid-column: 2; grid-row: 1; min-width: 0; }
#vf-demo .rv-title { font: 700 14px/1.4 var(--sans); color: var(--ink); }
#vf-demo .rv-sub { font: 600 11px/1.5 var(--mono); color: var(--review); margin-top: 5px; }
#vf-demo .rv-reason { font-size: 12px; line-height: 1.55; color: var(--muted); margin-top: 7px; }
#vf-demo .rv-actions {
  grid-column: 2; grid-row: 2; justify-self: end;
  display: flex; gap: 10px; margin-top: 16px;
}
#vf-demo .rv-actions .btn { padding: 9px 16px; }
#vf-demo .btn.release { background: var(--ok); border-color: var(--ok); color: #fff; }
#vf-demo .btn.release:hover { background: #1a6a3c; border-color: #1a6a3c; color: #fff; }
#vf-demo .review-empty { color: var(--faint); font-size: 13px; padding: 6px 0; }

/* a resolved-review row in the audit log */
#vf-demo .aud .v.human { color: var(--accent-dark); background: var(--accent-tint); }

/* confidence meter in the verdict card */
#vf-demo .conf { margin-top: 12px; }
#vf-demo .conf-bar { height: 8px; border-radius: 5px; background: var(--bg); overflow: hidden; }
#vf-demo .conf-bar span { display: block; height: 100%; border-radius: 5px; background: var(--muted); transition: width .35s ease; }
#vf-demo .verdict-card.approve .conf-bar span { background: var(--ok); }
#vf-demo .verdict-card.review .conf-bar span { background: var(--review); }
#vf-demo .verdict-card.block .conf-bar span { background: var(--block); }
#vf-demo .conf-meta { margin-top: 7px; font: 600 11px/1 var(--mono); color: var(--muted); }
#vf-demo .conf-meta b { color: var(--ink); }

/* "why held" badge on review cards */
#vf-demo .rv-why { display: inline-block; vertical-align: middle; font: 700 9px/1 var(--mono); letter-spacing: .08em; padding: 3px 6px; border-radius: 4px; }
#vf-demo .rv-why.policy { color: var(--block); background: var(--block-tint); }
#vf-demo .rv-why.lowconf { color: var(--review); background: var(--review-tint); }

/* confidence column in the audit log */
#vf-demo .aud .ac { margin-left: auto; font: 700 10px/1 var(--mono); color: var(--muted); }

/* --- Audit log -------------------------------------------------------------- */
#vf-demo .audit { border-top: 1px solid var(--line); padding: 12px 16px; }
#vf-demo .audit-h { font: 600 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
#vf-demo .audit-list { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto; }
#vf-demo .aud { display: flex; align-items: center; gap: 8px; font: 600 11px/1.3 var(--mono); padding: 5px 7px; border-radius: 4px; background: var(--surface-2); }
#vf-demo .aud.empty { color: var(--faint); background: none; }
#vf-demo .aud .v { font-weight: 700; padding: 2px 5px; border-radius: 3px; font-size: 9px; letter-spacing: .06em; }
#vf-demo .aud .v.approve { color: var(--ok); background: var(--ok-tint); }
#vf-demo .aud .v.block { color: var(--block); background: var(--block-tint); }
#vf-demo .aud .v.review { color: var(--review); background: var(--review-tint); }
#vf-demo .aud .at { color: var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }