/* [HX] Hermes contract-build artifact — contractor-owned (not CTO/founder). See notes/OWNERSHIP.md. */
/* Step-3 ADDITIVE styles ONLY. The canon design system (dob.css) is lifted     */
/* VERBATIM and untouched per wave1-ui-v1.0-decision1(a). This sheet styles the  */
/* row-driven affordances the static canon never had: per-row state badges, the  */
/* empty-queue state, the real measured-outcome block, and the read-only         */
/* decision trace for terminal-state rows. Tokens reused from dob.css :root.     */

/* queue rows are now <a> links — keep them visually identical to the canon div */
.queue-row { text-decoration: none; color: inherit; display: block; }

/* per-row state badge in the top-row (lifecycle state, not family) */
.state-badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--surface); color: var(--ink-3);
}
.top-row .state-badge { margin-left: 8px; }

/* tone variants — map lifecycle states onto the canon palette */
.tone-pending  { color: var(--amber);   background: var(--amber-soft);  border-color: var(--amber); }
.tone-approved { color: var(--sage);    background: var(--sage-soft);   border-color: var(--sage-mid); }
.tone-fired    { color: var(--moat);    background: var(--moat-soft);   border-color: var(--moat-mid); }
.tone-outcome  { color: var(--sage);    background: var(--sage-soft);   border-color: var(--sage); }
.tone-rejected { color: var(--oxblood); background: var(--oxblood-soft); border-color: var(--oxblood); }
.tone-failed   { color: var(--warn);    background: var(--oxblood-soft); border-color: var(--warn); }
.tone-expired,
.tone-modified,
.tone-unknown  { color: var(--ink-3);   background: var(--paper-2);     border-color: var(--rule); }

/* empty-queue state (renders when zero demo rows match the filter) */
.queue-empty {
  padding: 48px 26px; text-align: center; color: var(--ink-2);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.queue-empty .empty-mark {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--sage-soft); color: var(--sage);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 600;
}
.queue-empty h3 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 18px; color: var(--ink); }
.queue-empty p  { font-size: 13px; color: var(--ink-3); max-width: 320px; line-height: 1.5; }
.queue-empty code, .reasoning-body code, .measurement-item code {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.92em;
  background: var(--paper-2); padding: 1px 5px; border-radius: 4px; color: var(--ink-2);
}

/* real measured-outcome block (replaces the await-plot when an outcome row exists) */
.outcome-measured {
  margin-top: 14px; padding: 16px 18px; border-radius: 10px;
  background: var(--sage-soft); border: 1px solid var(--sage-mid);
}
.outcome-measured .measured-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.outcome-measured .measured-lbl  { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage); }
.outcome-measured .measured-method { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--ink-3); }
.outcome-measured .measured-val  { font-family: 'Fraunces', serif; font-weight: 600; font-size: 30px; color: var(--sage); margin: 6px 0 4px; }
.outcome-measured .measured-val .sign { font-size: 20px; vertical-align: super; }
.outcome-measured .measured-note { font-size: 12px; color: var(--ink-2); line-height: 1.5; }

/* read-only decision trace for terminal-state rows (no live approve/reject) */
.decision-trace {
  font-size: 12px; color: var(--ink-2);
  font-family: 'IBM Plex Sans', sans-serif;
}
.decision-trace .state-badge { margin-left: 4px; }

/* detail-empty (no row selected) */
.detail-empty { padding: 48px 26px; color: var(--ink-3); font-size: 13px; text-align: center; }

/* disabled modify shell — visible but inert for now; P-10 FROZEN 2026-06-14,
   functional modify lands with the step-5 build */
.btn.large[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ===== Step-4 ADDITIVE: functional decision affordances ===================== */
/* The canon decision-bar .right is a flex row of buttons. Wrapping the live
 * buttons in <form> (PRG so a refresh can't refire) must not disturb that
 * layout: the form is display:contents so its button is laid out as a direct
 * flex child exactly as the static canon button was. */
.decision-form { display: contents; }

/* failed-state trace gets the warn tone alongside the retry button */
.decision-trace.failed { color: var(--warn); font-weight: 500; }

/* one-shot flash banner after a decision (PRG redirect target).
 * Tokens reused from dob.css :root — no new palette. */
.flash {
  margin: 0 0 18px; padding: 11px 16px; border-radius: 9px;
  font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; line-height: 1.45;
  border: 1px solid var(--rule);
}
.flash-ok   { background: var(--sage-soft);    border-color: var(--sage-mid); color: var(--sage); }
.flash-warn { background: var(--oxblood-soft); border-color: var(--warn);     color: var(--warn); }

/* ===== Step-5 ADDITIVE: the modify panel (approve-with-changes) ============= */
/* Toggled open by the Modify button. Edits ONLY the 3 P-10-permitted fields.
 * Tokens reused from dob.css :root — no new palette, no dob.css edit. */
.modify-panel {
  margin: 14px 0 0; padding: 16px 18px; border-radius: 10px;
  background: var(--paper-2); border: 1px solid var(--rule);
  font-family: 'IBM Plex Sans', sans-serif;
}
.modify-panel[hidden] { display: none; }
.modify-head h4 {
  font-family: 'Fraunces', serif; font-weight: 500; font-size: 15px;
  color: var(--ink); margin: 0 0 4px;
}
.modify-head p { font-size: 12px; color: var(--ink-3); line-height: 1.5; margin: 0 0 12px; max-width: 520px; }
.modify-fields { display: flex; gap: 14px; flex-wrap: wrap; }
.modify-field, .modify-note { display: flex; flex-direction: column; gap: 4px; }
.modify-field { flex: 1 1 150px; }
.modify-note { margin-top: 12px; }
.mf-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
}
.modify-panel input {
  font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; color: var(--ink);
  padding: 7px 10px; border: 1px solid var(--rule); border-radius: 7px;
  background: var(--surface);
}
.modify-panel input:disabled { opacity: 0.45; cursor: not-allowed; }
.mf-orig { font-size: 10.5px; color: var(--ink-3); }
.modify-actions { margin-top: 14px; display: flex; justify-content: flex-end; }