/* executor.css - Assistant UI for the System-1 in-browser executor.
   Classic stylesheet, no dependencies. Visible focus everywhere, logical
   tab order follows the DOM order. */

.s1-root {
  border: 1px solid #cbd5e1;
  border-radius: 0.75rem;
  padding: 1.25rem;
  background: #f8fafc;
}

.s1-root .s1-title {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}

.s1-root .s1-lede {
  margin: 0 0 1rem;
  color: #334155;
}

/* Trust bar: live counter next to the guarantee copy. */
.s1-root .s1-trust {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  background: #ecfdf5;
  border: 1px solid #6ee7b7;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.s1-root .s1-netcount {
  font-variant-numeric: tabular-nums;
}

.s1-root .s1-draftbadge {
  margin-left: auto;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.8rem;
  white-space: nowrap;
}

/* Chips: real radio inputs, keyboard navigable. */
.s1-root .s1-chipgroup {
  border: none;
  padding: 0;
  margin: 0 0 0.9rem;
}

.s1-root .s1-chipname {
  font-weight: 600;
  margin-bottom: 0.4rem;
  padding: 0;
}

.s1-root .s1-chipoptions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.s1-root .s1-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid #94a3b8;
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  background: #ffffff;
}

.s1-root .s1-chip input {
  accent-color: #0f172a;
}

.s1-root .s1-chip:has(input:checked) {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}

.s1-root .s1-chip:has(input:focus-visible) {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

.s1-root .s1-templatebox {
  margin-top: 0.5rem;
}

.s1-root .s1-tmplpick {
  margin: 0.25rem 0.5rem 0.25rem 0;
}

/* Step log. */
.s1-root .s1-runhead {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.s1-root .s1-logtitle {
  margin: 0;
}

.s1-root .s1-steplog {
  max-height: 16rem;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  padding: 0.75rem 0.75rem 0.75rem 2rem;
  margin: 0.75rem 0;
}

.s1-root .s1-step {
  padding: 0.25rem 0;
}

.s1-root .s1-step.s1-error {
  color: #b91c1c;
}

.s1-root .s1-step.s1-aborted {
  color: #92400e;
}

.s1-root .s1-step.s1-corrected {
  color: #065f46;
}

.s1-root .s1-status {
  min-height: 1.5em;
  color: #334155;
}

.s1-root .s1-flagbox {
  border: 1px solid #f59e0b;
  background: #fffbeb;
  border-radius: 0.5rem;
  padding: 0.75rem;
  margin: 0.75rem 0;
}

/* Review cards (2026-10-05): grouped under headings, calm and monochrome.
   One card per artifact: shape icon, name, type in plain words, Confirm /
   Fix. The inline Fix editor sits on the card. Single column at 390px
   with touch-size buttons. */
.s1-root .s1-reviewexplain {
  color: #334155;
  margin: 0 0 0.75rem;
}

/* Review editing workspace (2026-10-05): top explainer, group intros,
   Add buttons on group headers, type/category chips on cards, inline
   rename / remove-confirm / setup editors. Single column at 390px;
   every button 44px; visible focus everywhere. */
.s1-root .s1-reviewintro {
  color: #334155;
  margin: 0 0 1rem;
}

.s1-root .s1-cardgroup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0 0 0.35rem;
}

.s1-root .s1-cardgroup-head .s1-cardgroup-title {
  margin: 0;
}

.s1-root .s1-cardgroup-intro {
  color: #475569;
  font-size: 0.9rem;
  margin: 0 0 0.6rem;
}

.s1-root .s1-addflowwrap {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.s1-root .s1-addwhy {
  font-size: 0.85rem;
  color: #64748b;
}

.s1-root .s1-typechips,
.s1-root .s1-catchips {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.s1-root .s1-typechip,
.s1-root .s1-catchip,
.s1-root .s1-chipopt {
  border: 1px solid #94a3b8;
  background: #ffffff;
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  min-height: 44px;
  font-size: 0.85rem;
  cursor: pointer;
}

.s1-root .s1-typechip.s1-on,
.s1-root .s1-catchip.s1-on,
.s1-root .s1-chipopt.s1-on {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}

.s1-root .s1-renamebox,
.s1-root .s1-removebox,
.s1-root .s1-setupbox,
.s1-root .s1-addflowbox {
  grid-column: 1 / -1;
  margin-top: 0.25rem;
  padding-top: 0.6rem;
  border-top: 1px dashed #cbd5e1;
}

.s1-root .s1-renamebox,
.s1-root .s1-removebox {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.s1-root .s1-removeask {
  font-size: 0.9rem;
  color: #334155;
  margin-right: 0.25rem;
}

.s1-root .s1-renamebox input[type="text"] {
  padding: 0.35rem 0.5rem;
  border: 1px solid #94a3b8;
  border-radius: 0.35rem;
  min-width: 12rem;
  min-height: 44px;
  flex: 1;
}

.s1-root .s1-setupbox .s1-field,
.s1-root .s1-addflowbox .s1-field {
  margin-bottom: 0.55rem;
}

.s1-root .s1-setupbox .s1-field label,
.s1-root .s1-addflowbox .s1-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 0.25rem;
}

.s1-root .s1-setupbox .s1-field input[type="text"],
.s1-root .s1-addflowbox .s1-field input[type="text"],
.s1-root .s1-addflowbox .s1-field select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0.5rem;
  border: 1px solid #94a3b8;
  border-radius: 0.35rem;
  min-height: 44px;
  font-size: 0.95rem;
}

.s1-root .s1-fieldlabel {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 0.25rem;
}

.s1-root .s1-chipset {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.s1-root .s1-fielderr {
  color: #b3401f;
  font-size: 0.9rem;
  margin: 0.25rem 0 0.5rem;
}

.s1-root .s1-setupbtns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.s1-root .s1-cardbtns .btn,
.s1-root .s1-renamebox .btn,
.s1-root .s1-removebox .btn,
.s1-root .s1-setupbtns .btn,
.s1-root .s1-addflowbox .btn,
.s1-root .s1-cardgroup-head .btn {
  min-height: 44px;
}

@media (max-width: 24.375rem) {
  .s1-root .s1-cardgroup-head {
    align-items: flex-start;
  }
  .s1-root .s1-renamebox input[type="text"] {
    min-width: 0;
    flex: 1 1 100%;
  }
}

.s1-root .s1-cardgroup {
  margin: 0 0 1rem;
}

.s1-root .s1-cardgroup-title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.s1-root .s1-card {
  display: grid;
  grid-template-columns: 2.25rem 1fr auto;
  gap: 0.5rem 0.75rem;
  align-items: center;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  background: #ffffff;
  padding: 0.75rem;
  margin-bottom: 0.6rem;
}

.s1-root .s1-cardicon {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
}

.s1-root .s1-cardname {
  margin: 0;
  font-weight: 600;
}

.s1-root .s1-cardtype {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  color: #475569;
}

.s1-root .s1-cardstatus {
  margin: 0;
  font-size: 0.8rem;
  color: #64748b;
  grid-column: 2;
}

.s1-root .s1-cardstatus.confirmed {
  color: #065f46;
}

.s1-root .s1-cardbtns {
  display: flex;
  gap: 0.5rem;
  grid-column: 3;
  grid-row: 1 / span 2;
}

.s1-root .s1-cardeditor {
  grid-column: 1 / -1;
  margin-top: 0.25rem;
  padding-top: 0.6rem;
  border-top: 1px dashed #cbd5e1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.s1-root .s1-cardeditor input[type="text"] {
  padding: 0.35rem 0.5rem;
  border: 1px solid #94a3b8;
  border-radius: 0.35rem;
  min-width: 12rem;
}

.s1-root .s1-cardeditor .btn {
  min-height: 44px;
}

@media (max-width: 24.375rem) {
  .s1-root .s1-card {
    grid-template-columns: 2.25rem 1fr;
  }
  .s1-root .s1-cardbtns {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .s1-root .s1-cardbtns .btn {
    flex: 1;
    min-height: 44px;
  }
}

/* Results screen (2026-10-05): map-first. The results map reuses the
   builder canvas geometry (same 640x420 viewBox, same .edge /
   .node-label class names, so page styles apply); it scales to the
   panel width with no horizontal scroll at 390px. */
.s1-root .s1-donelede {
  color: #334155;
  margin: 0 0 0.75rem;
}

.s1-root .s1-viewtoggle {
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin: 0 0 0.75rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.s1-root .s1-viewlabel {
  font-weight: 600;
  padding: 0 0.5rem;
}

.s1-root .s1-viewopt {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid #94a3b8;
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  min-height: 44px;
  cursor: pointer;
  background: #ffffff;
}

.s1-root .s1-viewopt input {
  accent-color: #0e6e64;
}

.s1-root .s1-viewopt:has(input:checked) {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}

.s1-root .s1-viewopt:has(input:focus-visible) {
  outline: 3px solid #0e6e64;
  outline-offset: 2px;
}

.s1-root .s1-mapwrap {
  margin: 0 0 0.75rem;
}

.s1-root .s1-resultmap {
  width: 100%;
  height: auto;
  display: block;
  background: #fbfaf7;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
}

.s1-root .s1-tablewrap {
  margin: 0 0 0.75rem;
}

.s1-root .s1-resulttable {
  margin-bottom: 0.75rem;
}

.s1-root .s1-resulttable-title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}

.s1-root .s1-resulttable table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  font-size: 0.9rem;
}

.s1-root .s1-resulttable th,
.s1-root .s1-resulttable td {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border: 1px solid #e2e8f0;
}

.s1-root .s1-resulttable th {
  background: #f1f5f9;
  font-weight: 600;
}

/* Done row. */
.s1-root .s1-dlrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

/* Canvas bloom for newly added nodes/edges. */
#builder-canvas .s1-bloom .shape {
  animation: s1bloom 1.1s ease-out;
}

#builder-canvas .s1-bloom-edge {
  animation: s1bloomedge 1.1s ease-out;
}

@keyframes s1bloom {
  0% { opacity: 0; transform: scale(0.4); }
  60% { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes s1bloomedge {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* The UA [hidden] rule loses to our display rules (e.g. .s1-cardbtns);
   re-assert it so hidden toggles always hide. */
.s1-root [hidden] {
  display: none !important;
}

/* Buttons reuse the demo .btn styles; visible focus for all interactives. */
.s1-root button:focus-visible,
.s1-root a:focus-visible,
.s1-root input:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  #builder-canvas .s1-bloom .shape,
  #builder-canvas .s1-bloom-edge {
    animation: none;
  }
}

/* ---- Prod launch refinements: ledger palette, step stagger, trust pulse.
   Signature micro-interaction is deliberately small; calm everywhere else.
   Animations on transform/opacity only. No em dashes. ---- */

/* Ledger palette: teal for focus, teal-wash trust bar. */
.s1-root .s1-chip:has(input:focus-visible) { outline: 3px solid #0e6e64; outline-offset: 2px; }
.s1-root button:focus-visible,
.s1-root a:focus-visible,
.s1-root input:focus-visible,
.s1-root select:focus-visible { outline: 3px solid #0e6e64; outline-offset: 2px; }
.s1-root .s1-trust { background: #e2efec; border-color: #0e6e64; }

/* 44px touch targets on chips and review buttons. */
.s1-root .s1-chip { min-height: 44px; transition: transform 120ms ease-out; }
.s1-root .s1-chip:active { transform: scale(0.97); }
.s1-root .s1-cardbtns .btn,
.s1-root .s1-dlrow .btn,
.s1-root .s1-cardeditor .btn,
.s1-root .s1-confirmall,
.s1-root .s1-viewopt { min-height: 44px; }
/* Confirm all sits under the progress line; hidden while nothing is unconfirmed. */
.s1-root .s1-confirmall { margin-top: 0.75rem; }

/* Step-log stagger: 60ms fade-slide as nodes bloom. */
.s1-root .s1-step {
  animation: s1stepin 200ms ease-out both;
  animation-delay: calc(var(--s1-i, 0) * 60ms);
}
@keyframes s1stepin {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Trust badge pulse when a step completes. */
.s1-root .s1-trust.s1-pulse { animation: s1pulse 300ms ease-out; }
@keyframes s1pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .s1-root .s1-step { animation: none; }
  .s1-root .s1-trust.s1-pulse { animation: none; }
  .s1-root .s1-chip { transition: none; }
  .s1-root .s1-chip:active { transform: none; }
}

@media (max-width: 24.375rem) {
  .s1-root { padding: 1rem; }
  .s1-root .s1-draftbadge { margin-left: 0; }
}

/* Single-panel mode toggle (Issue 8): native radios, ledger styling.
   Keyboard-operable with a visible focus ring; short lines at 390px. */
.s1-root .s1-modebar { border: 1px solid #cbd5e1; border-radius: 0.5rem; padding: 0.75rem 1rem; margin: 1rem 0; }
.s1-root .s1-modelabel { font-weight: 600; padding: 0 0.5rem; }
.s1-root .s1-mode { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.4rem 0; cursor: pointer; }
.s1-root .s1-mode input { margin-top: 0.2rem; width: 1.1rem; height: 1.1rem; accent-color: #0e6e64; flex: none; }
.s1-root .s1-mode input:focus-visible { outline: 3px solid #0e6e64; outline-offset: 2px; }
.s1-root .s1-modetxt strong { display: block; }
.s1-root .s1-modedesc { color: #475569; font-size: 0.9rem; }
.s1-root .s1-modenote { color: #b3401f; font-size: 0.9rem; margin: 0.25rem 0 0; min-height: 1.2em; }
.s1-root .s1-chatslot { margin-top: 0.5rem; }

/* Wipe-fix (2026-10-05): confirmed cards keep every action; the row just
   sits quieter so it reads as done without losing operability. */
.s1-root .s1-cardbtns.s1-confirmed-actions { opacity: 0.72; }
.s1-root .s1-cardbtns.s1-confirmed-actions:hover,
.s1-root .s1-cardbtns.s1-confirmed-actions:focus-within { opacity: 1; }
/* Review progress toward the results screen. */
.s1-root .s1-reviewprogress { font-size: 0.9rem; color: #475569; margin: 0.5rem 0 0; }
/* Inline wipe confirm (replaces window.confirm). */
.s1-root .s1-wipebox { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0.75rem 0; }
.s1-root .s1-wipeask { font-size: 0.92rem; }