/* App-specific styles for the ops dashboard.
   Kit primitive styles live in lib/kit.css — link it first. */
@import url('lib/kit.css');

/* ── demo / gallery helpers ──────────────────────────────────────────── */
.demo-states { display: grid; gap: 8px; }
.form-demo { max-width: 30rem; }

/* ── rig control (lib/rig.js rigControl) ─────────────────────────────── */
.rig-control { max-width: 34rem; margin: 2rem 0; }
.rig-control h2 { margin: 0 0 .25rem; }
.rig-field { display: block; margin: .85rem 0; font-size: .8rem; color: var(--dim, #9aa); }
.rig-field input { display: block; width: 100%; margin-top: .3rem; padding: .5rem .6rem;
  background: #0d1117; border: 1px solid #2a3140; border-radius: 6px; color: #e6edf3;
  font: inherit; box-sizing: border-box; }
.rig-control .btn-row { display: flex; gap: .6rem; margin-top: 1rem; }

/* ── decision cockpit ────────────────────────────────────────────────── */
.cockpit-detail { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #2a3140; }
.activate-form { max-width: 40rem; margin-top: 1rem; padding: 1rem 1.1rem; background: #0d1117;
  border: 1px solid #2a3140; border-radius: 8px; }
.activate-form h3 { margin: 0 0 .25rem; font-size: .95rem; }
.activate-form .btn-row { display: flex; align-items: center; gap: .8rem; margin-top: .9rem; }
.identity-line { margin: .25rem 0 1rem; }

/* ── ops issue expand ────────────────────────────────────────────────── */
.ops-issue-title { font-weight: 600; margin-bottom: 8px; }
.ops-issue .btn-row { margin-top: 8px; }

/* ── task actions ────────────────────────────────────────────────────── */
.task-form { max-width: 40rem; margin-top: .75rem; padding: 1rem 1.1rem; background: #0d1117;
  border: 1px solid #2a3140; border-radius: 8px; }
.task-form .btn-row { display: flex; align-items: center; gap: .8rem; margin-top: .9rem; }

/* ── DEMO palette (task-status keys) ─────────────────────────────────── */
.barchart-fill.done,  .stack-seg.done,  .donut-seg.done,  .sankey-ribbon.done,  .stack-dot.done  { background: var(--ok);      stroke: var(--ok);      fill: var(--ok); }
.barchart-fill.active,.stack-seg.active,.donut-seg.active,.sankey-ribbon.active,.stack-dot.active { background: var(--accent);  stroke: var(--accent);  fill: var(--accent); }
.barchart-fill.blocked,.stack-seg.blocked,.donut-seg.blocked,.sankey-ribbon.blocked,.stack-dot.blocked { background: var(--warn); stroke: var(--warn);   fill: var(--warn); }
.barchart-fill.todo,  .stack-seg.todo,  .donut-seg.todo,  .sankey-ribbon.todo,  .stack-dot.todo  { background: var(--ink-dim); stroke: var(--ink-dim); fill: var(--ink-dim); }