/* CP Flow Explorer styles. Tokens ported from PoshaUI (companion scale):
   spacing space1..6 = 4/8/12/16/24/36; text sm=12 xs=11; default colours. */

:root {
  --space1: 4px; --space2: 8px; --space3: 12px; --space4: 16px; --space5: 24px; --space6: 36px;
  --primary-black: #232222; --secondary-black: #484848;
  --body-secondary: #484848; --body-tertiary: #6E6E6E; --placeholder: #9E9E9E;
  --bg-grey: #FAFAFA; --light-borders: #F2F2F2; --border: #E5E5E5; --page-bg: #F9F7F6; --white: #FFFFFF;
  --red-dark: #8B2F2F; --green-dark: #4E6B4B; --yellow-dark: #976720;
  --cream: #EAE3D7; --posha-yellow: #FFD582;
  --fs-sm: 12px; --fs-xs: 11px; --fs-name: 14px;
  --radius-tile: 12px; --radius-chip: 20px; --thumb: 48px;
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); color: var(--primary-black); background: #0e0f11; }

/* ── top bar ─────────────────────────────────────────────────────────── */
.topbar {
  position: relative;
  display: flex; align-items: center; gap: var(--space4);
  padding: 10px var(--space4); background: #16181c; border-bottom: 1px solid #24262b; color: #e6e7ea;
}
.topbar .brand { font-weight: 700; font-size: 14px; letter-spacing: .2px; }
.topbar .brand b { color: #4ade80; }
.topbar label { font-size: 11px; color: #9aa0a6; margin-right: 6px; text-transform: uppercase; letter-spacing: .6px; }
.topbar select {
  font-family: var(--font); font-size: 13px; padding: 6px 10px; border-radius: 8px;
  background: #1e2126; color: #e6e7ea; border: 1px solid #2c2f36;
}
.topbar .spacer { flex: 1; }
.src { font-family: var(--mono); font-size: 11px; padding: 4px 9px; border-radius: 999px; border: 1px solid #2c2f36; color: #9aa0a6; }
.src.live { color: #4ade80; border-color: #2c5b3f; }
.src.fixture { color: #fbbf24; border-color: #5b4a1f; }
.topbar a.back { color: #9aa0a6; text-decoration: none; font-size: 12px; }
.topbar a.back:hover { color: #e6e7ea; }
.topbar .gear {
  background: transparent; border: 1px solid #2c2f36; color: #c2c6cc; cursor: pointer;
  width: 30px; height: 30px; border-radius: 8px; font-size: 15px; line-height: 1; margin-left: var(--space2);
}
.topbar .gear:hover { color: #fff; border-color: #3a3d44; }
.settings-pop {
  position: absolute; top: calc(100% + 4px); right: 16px; z-index: 60; width: 300px;
  background: #16181c; border: 1px solid #2c2f36; border-radius: 12px; padding: var(--space4);
  box-shadow: 0 18px 40px rgba(0,0,0,.5); color: #d4d6da;
}
.settings-pop .settings-title { font-size: 13px; font-weight: 700; color: #e6e7ea; margin-bottom: var(--space3); }
.settings-pop label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: #9aa0a6; margin-bottom: 6px; }
.settings-pop select {
  width: 100%; font-family: var(--font); font-size: 13px; padding: 8px 10px; border-radius: 8px;
  background: #1e2126; color: #e6e7ea; border: 1px solid #2c2f36;
}

/* ── two-pane layout ─────────────────────────────────────────────────── */
.app { display: grid; grid-template-columns: 420px 1fr; gap: 0; height: calc(100vh - 53px); }
.pane-phone { display: flex; justify-content: center; align-items: center; padding: var(--space5); overflow: hidden; background: #0e0f11; }
.pane-flow { background: #0e0f11; border-left: 1px solid #24262b; overflow: hidden; }

/* ── phone frame ─────────────────────────────────────────────────────── */
.phone {
  position: relative; overflow: hidden;
  width: 360px; background: var(--page-bg); border-radius: 28px; padding: 18px var(--space4) var(--space4);
  box-shadow: 0 0 0 10px #1a1c20, 0 24px 60px rgba(0,0,0,.5);
  height: calc(100vh - 53px - 2 * var(--space5)); max-height: 760px;
  display: flex; flex-direction: column;
}
.phone-body { flex: 1; min-height: 0; overflow-y: auto; margin: 0 calc(-1 * var(--space2)); padding: 0 var(--space2) 76px; }

/* navigation/view transition animations (only on nav, not data re-renders) */
.phone-body.va-in { animation: vaIn .28s cubic-bezier(.2,.7,.2,1) both; }
.phone-body.va-back { animation: vaBack .28s cubic-bezier(.2,.7,.2,1) both; }
.phone-body.va-fade { animation: vaFade .2s ease both; }
@keyframes vaIn { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes vaBack { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@keyframes vaFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* gentle stagger of ingredient tiles when a view slides in */
.phone-body.va-in .tile { animation: tileIn .32s cubic-bezier(.2,.7,.2,1) both; }
.phone-body.va-in .tile:nth-child(1) { animation-delay: .02s; }
.phone-body.va-in .tile:nth-child(2) { animation-delay: .05s; }
.phone-body.va-in .tile:nth-child(3) { animation-delay: .08s; }
.phone-body.va-in .tile:nth-child(4) { animation-delay: .11s; }
.phone-body.va-in .tile:nth-child(5) { animation-delay: .14s; }
.phone-body.va-in .tile:nth-child(n+6) { animation-delay: .16s; }
@keyframes tileIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* micro-interactions */
.ptab { transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
.chip { transition: background .15s ease, border-color .15s ease, color .15s ease; }
.chip:active { transform: scale(.94); }
.recipe-row, .recipe-row-wrap { transition: background .15s ease, color .15s ease; }
.tile { transition: border-color .2s ease, opacity .2s ease; }
.fab-add, .fab-reset { transition: transform .1s ease, box-shadow .15s ease; }
.fab-add:active, .fab-reset:active:not(:disabled) { transform: scale(.97); }
.sheet .opt { transition: border-color .15s ease, background .15s ease; }
.phone-body::-webkit-scrollbar { width: 6px; }
.phone-body::-webkit-scrollbar-thumb { background: #d8d2c8; border-radius: 3px; }
.phone-head { display: flex; align-items: center; gap: var(--space3); margin-bottom: var(--space4); }
.phone-head .chev { font-size: 20px; color: var(--primary-black); }
.phone-head .chev.back { cursor: pointer; }
.phone-head .chev.back:hover { color: var(--green-dark); }
.phone-head h1 { font-size: 17px; font-weight: 700; margin: 0; color: var(--primary-black); }
.phone-sub { font-size: var(--fs-xs); color: var(--body-tertiary); margin: -8px 0 var(--space4); }
.recipe-search-wrap { margin: 0 0 var(--space3); }
.recipe-search-wrap + .phone-sub { margin-top: 0; }
.recipe-search { width: 100%; box-sizing: border-box; padding: 9px var(--space3); border-radius: 12px; border: 1px solid var(--border); background: var(--bg-grey); font-family: var(--font); font-size: 13px; color: var(--primary-black); }
.recipe-search::placeholder { color: var(--body-tertiary); }
.recipe-search:focus { outline: none; border-color: var(--primary-black); background: var(--white); }

/* ── ingredient tile ─────────────────────────────────────────────────── */
.tile {
  display: flex; align-items: flex-start; gap: var(--space3);
  background: var(--bg-grey); border-radius: var(--radius-tile);
  padding: var(--space3) var(--space4); margin-bottom: var(--space3);
  border: 0 solid transparent;
}
.tile.swapped { border: 1.5px solid var(--primary-black); }
.tile.added { border: 1.5px solid var(--green-dark); }
.tile.removed { border: 1.5px solid var(--red-dark); opacity: .45; }
.tile.quantityChanged { border: 1.5px solid var(--yellow-dark); }
.tile.prepChanged { border: 1.5px solid var(--yellow-dark); }
.tile .thumb { width: var(--thumb); height: var(--thumb); border-radius: 8px; background: var(--light-borders); object-fit: cover; flex: none; }
.tile .body { flex: 1; min-width: 0; }
.tile .name { font-size: var(--fs-name); font-weight: 500; color: var(--primary-black); line-height: 1.2; }
.tile.removed .name { text-decoration: line-through; }
.tile .prep { font-size: var(--fs-xs); color: var(--body-secondary); margin-top: var(--space1); }
.tile.removed .prep { text-decoration: line-through; }
.tile .qty { font-size: var(--fs-xs); color: var(--body-secondary); margin-top: var(--space1); }
.tile .right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space2); flex: none; max-width: 150px; }

.badge { font-size: var(--fs-xs); padding: 2px 8px; border-radius: var(--radius-chip); border: 1px solid; }
.badge.swapped { color: var(--primary-black); border-color: var(--primary-black); background: rgba(35,34,34,.12); }
.badge.added { color: var(--green-dark); border-color: var(--green-dark); background: rgba(78,107,75,.12); }
.badge.removed { color: var(--red-dark); border-color: var(--red-dark); background: rgba(139,47,47,.12); }
.badge.quantityChanged { color: var(--yellow-dark); border-color: var(--yellow-dark); background: rgba(151,103,32,.12); }
.badge.prepChanged { color: var(--yellow-dark); border-color: var(--yellow-dark); background: rgba(151,103,32,.12); }

.chips { display: flex; flex-direction: column; align-items: stretch; gap: var(--space2); }
.chip {
  font-family: var(--font); font-size: var(--fs-xs); padding: 4px 10px; border-radius: var(--radius-chip);
  background: transparent; border: 1px solid var(--primary-black); color: var(--primary-black); cursor: pointer;
  text-align: center;
}
.chip.swap { border-color: var(--primary-black); color: var(--primary-black); }
.chip.remove { border-color: var(--red-dark); color: var(--red-dark); }
.chip.restore { border-color: var(--green-dark); color: var(--green-dark); }
.chip.qty { border-color: var(--body-tertiary); color: var(--body-tertiary); font-family: var(--mono); padding: 2px 8px; }
.chip.prep { border-color: var(--yellow-dark); color: var(--yellow-dark); }
.chip:hover { background: rgba(0,0,0,.04); }

/* ── bottom actions ──────────────────────────────────────────────────── */
/* floating Add / Reset pinned to the phone frame */
.fab-bar { position: absolute; left: var(--space4); right: var(--space4); bottom: var(--space4); display: flex; gap: var(--space2); z-index: 5; }
.fab-add {
  flex: 1; font-family: var(--font); font-size: 14px; font-weight: 600; padding: 13px; border-radius: 14px;
  border: 0; background: var(--primary-black); color: var(--white); cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.28);
}
.fab-reset {
  font-family: var(--font); font-size: 14px; font-weight: 500; padding: 13px var(--space4); border-radius: 14px; border: 1px solid var(--border);
  background: var(--white); color: var(--body-secondary); cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.18); white-space: nowrap;
}
.fab-reset:disabled { color: var(--disabled-text, #C2C2C2); cursor: default; box-shadow: none; }
.fab-add.full { background: var(--white); color: var(--body-tertiary); border: 1px solid var(--border); cursor: default; box-shadow: none; }

/* ── recipe list ─────────────────────────────────────────────────────── */
.recipe-row-wrap { display: flex; align-items: center; gap: var(--space2); border-bottom: 1px solid var(--light-borders); }
.recipe-row {
  flex: 1; text-align: left; font-family: var(--font); font-size: 14px; color: var(--primary-black);
  background: transparent; border: 0; padding: 13px 4px; cursor: pointer;
}
.recipe-row:hover { color: var(--green-dark); }
.recipe-row-wrap:hover { background: var(--bg-grey); }
.recipe-chev { color: var(--placeholder); font-size: 18px; padding-right: 4px; }

/* ── recipe config card ──────────────────────────────────────────────── */
.recipe-card { background: var(--bg-grey); border: 1px solid var(--border); border-radius: var(--radius-tile); padding: var(--space3) var(--space4); margin-bottom: var(--space4); display: flex; gap: var(--space4); align-items: center; }
.cfg-row { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 0; }
.cfg-row + .cfg-row { border-left: 1px solid var(--light-borders); padding-left: var(--space4); }
.cfg-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .4px; color: var(--body-tertiary); }
.cfg-select { font-family: var(--font); font-size: 13px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--white); color: var(--primary-black); }
.cust-off { font-size: var(--fs-sm); color: var(--body-tertiary); text-align: center; padding: var(--space5) var(--space3); line-height: 1.5; }

/* ── container headings (group ingredient tiles) ─────────────────────── */
.cont-heading { display: flex; align-items: center; gap: var(--space2); margin: var(--space4) 0 var(--space2); padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.cont-heading:first-child { margin-top: 0; }
.cont-heading .cont-id { font-weight: 600; font-size: 12px; color: var(--primary-black); text-transform: uppercase; letter-spacing: .4px; }
.cont-heading .cont-type { font-size: 9px; text-transform: uppercase; letter-spacing: .4px; color: var(--body-tertiary); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; }
.cont-heading .cont-role { font-size: var(--fs-xs); color: var(--body-tertiary); margin-left: auto; }

/* ── toggle switch ───────────────────────────────────────────────────── */
.switch { width: 42px; height: 24px; border-radius: 999px; border: 0; background: var(--border); cursor: pointer; padding: 0; position: relative; transition: background .15s; }
.switch.on { background: var(--green-dark); }
.switch .knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.switch.on .knob { left: 20px; }

/* ── phone tabs ──────────────────────────────────────────────────────── */
.ptabs { display: flex; gap: var(--space1); background: var(--light-borders); border-radius: 10px; padding: 3px; margin-bottom: var(--space4); }
.ptab {
  flex: 1; font-family: var(--font); font-size: 13px; font-weight: 500; padding: 8px; border: 0; cursor: pointer;
  border-radius: 8px; background: transparent; color: var(--body-secondary);
}
.ptab.on { background: var(--white); color: var(--primary-black); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* ── adjust panel ────────────────────────────────────────────────────── */
.adjust { display: flex; flex-direction: column; }
.adjust .sub-label { font-size: var(--fs-sm); font-weight: 500; color: var(--body-secondary); letter-spacing: .4px; margin: var(--space3) 0 var(--space1); }
.adjust .sub-label:first-child { margin-top: 0; }
.adjust .note { font-size: 11px; color: var(--placeholder); padding: var(--space4) 0; text-align: center; }
.adjust-row { display: flex; align-items: center; padding: var(--space1) 0; }
.adjust-row .arow-label { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.adjust-row .arow-name { font-size: var(--fs-sm); color: var(--body-primary, #2E2E2E); }
.adjust-row .arow-range { font-size: 11px; color: var(--body-tertiary); }
.adjust-row.off .arow-name { color: var(--body-tertiary); }
.stepper { display: flex; align-items: center; gap: var(--space1); }
.step {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--light-borders);
  background: var(--disabled-bg, #F2F2F2); color: var(--primary-black); font-size: 18px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.step:disabled { color: var(--body-tertiary); cursor: default; opacity: .6; }
.step.reset { font-size: 15px; color: var(--body-secondary); background: transparent; margin-right: 2px; }
.step.reset:disabled { opacity: .3; }
.stepper .lvl { width: 36px; text-align: center; font-weight: 700; font-size: var(--fs-sm); }
.stepper .lvl.pos { color: var(--green-dark); }
.stepper .lvl.neg { color: #5D5D5D; }
.stepper .lvl.zero { color: var(--body-tertiary); }

/* ── bottom sheet ────────────────────────────────────────────────────── */
.sheet-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: flex-end; justify-content: center; z-index: 50; }
.sheet { width: 100%; background: var(--white); border-radius: 20px 20px 0 0; padding: var(--space4) var(--space4) var(--space4); height: 62%; max-height: 88%; overflow: hidden; margin: 0; box-shadow: 0 -8px 30px rgba(0,0,0,.25); animation: sheetup .22s ease; display: flex; flex-direction: column; }
/* Grab handle so every sheet reads as a draggable bottom sheet, like the app. */
.sheet::before { content: ''; display: block; flex: none; width: 36px; height: 4px; border-radius: 2px; background: var(--light-borders); margin: 0 auto var(--space3); }
@keyframes sheetup { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet h3 { margin: 0 0 var(--space3); font-size: 15px; color: var(--primary-black); flex: none; }
.sheet .swap-content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
/* Keep Confirm/Cancel pinned to the bottom even when a level is short. */
.sheet .swap-content .actions { margin-top: auto; }
.sheet-loading { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space3); color: var(--body-tertiary); font-size: 13px; }
.spin.big { width: 26px; height: 26px; border-width: 3px; }
.sheet-head { display: flex; align-items: center; gap: var(--space2); margin-bottom: var(--space3); flex: none; }
.sheet-head h3 { margin: 0; }
.sheet-back { cursor: pointer; font-size: 22px; line-height: 1; color: var(--primary-black); padding-right: 2px; }
.sheet-back:hover { color: var(--green-dark); }
.sheet .opt-chev { font-family: var(--mono); color: var(--body-tertiary); font-size: 17px; flex: none; }
.sheet-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 calc(-1 * var(--space1)); padding: 0 var(--space1); }
.sheet .qty-row, .sheet .actions, .sheet .qty-host { flex: none; }
.sheet .qty-host .loading { padding: var(--space3) 0; }
.sheet .opt {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space2);
  padding: var(--space3); border: 1px solid var(--border); border-radius: 10px; margin-bottom: var(--space2); cursor: pointer;
}
.sheet .opt:hover { border-color: var(--primary-black); }
.sheet .opt.sel { border-color: var(--primary-black); background: var(--bg-grey); }
.sheet .opt-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sheet .opt .nm { font-size: 13px; color: var(--primary-black); }
.sheet .opt .pp { align-self: flex-start; font-size: var(--fs-xs); color: var(--body-secondary); background: var(--bg-grey); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }
.sheet .opt .pp:empty { display: none; }
.sheet .qty-loading { display: flex; align-items: center; gap: var(--space2); padding: var(--space3) 0; font-size: 13px; color: var(--body-tertiary); }
.sheet .spin { width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--primary-black); border-radius: 50%; animation: spin .6s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.sheet .opt-qty { font-family: var(--mono); font-size: 12px; color: var(--body-secondary); white-space: nowrap; flex: none; }
.sheet .qty-row { margin: var(--space3) 0; }
.sheet .qty-row label { font-size: var(--fs-xs); color: var(--body-secondary); display: flex; justify-content: space-between; }
.sheet input[type=range] { width: 100%; accent-color: var(--primary-black); }
.sheet .actions { display: flex; gap: var(--space2); margin-top: var(--space3); }
.sheet .confirm { flex: 1; padding: 11px; border-radius: 10px; border: 0; background: var(--primary-black); color: var(--white); font-size: 13px; cursor: pointer; }
.sheet .confirm:disabled { background: var(--placeholder); cursor: default; }
.sheet .cancel { padding: 11px var(--space4); border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--body-secondary); cursor: pointer; }
.sheet .empty { font-size: 13px; color: var(--body-tertiary); padding: var(--space4) 0; text-align: center; }
.sheet .loading { font-size: 13px; color: var(--body-tertiary); padding: var(--space4) 0; text-align: center; }

/* ── flow pane ───────────────────────────────────────────────────────── */
.flow { padding: var(--space4); color: #d4d6da; height: 100%; display: flex; flex-direction: column; gap: var(--space3); }
.flow > .delta { flex: none; margin-bottom: 0; }
.flow-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: var(--space6); }
.flow h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: #7c828a; margin: 0 0 var(--space3); }
.steps-head { display: flex; align-items: center; justify-content: space-between; }
.steps-head h2 { margin-bottom: var(--space3); }
.steps-clear { font-family: var(--font); font-size: 11px; color: #9aa0a6; background: transparent; border: 1px solid #2a2e35; border-radius: 6px; padding: 3px 9px; cursor: pointer; margin-bottom: var(--space3); }
.steps-clear:hover { color: #e9fbef; border-color: #3a3f47; background: #181b20; }
/* shared collapsible panel chrome (delta panel + steps) */
.flow details { background: #15171b; border: 1px solid #1f2228; border-radius: 10px; }
.flow details > summary { cursor: pointer; padding: 11px var(--space3); font-size: 13px; color: #c2c6cc; list-style: none; display: flex; align-items: center; gap: var(--space2); }
.flow details > summary::-webkit-details-marker { display: none; }
.flow details > summary:hover { background: #181b20; border-radius: 10px; }
.flow details > summary::before { content: '\25B8'; font-size: 14px; line-height: 1; color: #7c828a; transition: transform .15s; display: inline-block; width: 12px; flex: none; }
.flow details[open] > summary::before { transform: rotate(90deg); }

/* steps list: each step is a collapsible card that owns its API calls */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space2); }
.fstep { background: #15171b; border: 1px solid #1f2228; border-radius: 10px; }
.fstep.cur { border-color: #2c5b3f; }
.fstep .step-no { width: 22px; height: 22px; border-radius: 50%; background: #24262b; color: #9aa0a6; font-family: var(--mono); font-size: 11px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.fstep.cur .step-no { background: #4ade80; color: #08130c; }
.fstep.err .step-no { background: #5b2c2c; color: #fbdada; }
.fstep .step-text { flex: 1; line-height: 1.4; }
.fstep.cur > summary .step-text { color: #e9fbef; }
.call-badge { font-family: var(--mono); font-size: 10px; color: #9bf0bd; background: color-mix(in srgb, #4ade80 16%, #15171b); border: 1px solid #2c5b3f; border-radius: 999px; padding: 3px 9px; flex: none; white-space: nowrap; }

/* a step's API calls, visually nested under the step */
.step-body { padding: 0 var(--space3) var(--space3) calc(var(--space3) + 22px + var(--space2)); }
.step-body .no-calls { font-size: 11px; color: #6b7178; font-style: italic; }
/* each API call is its own collapsible (open by default) */
.step-body .api-call { background: #0e0f11; border: 1px solid #1f2228; border-radius: 8px; margin-top: var(--space2); }
.step-body .api-call:first-child { margin-top: 0; }
.step-body .api-call > summary { font-family: var(--mono); font-size: 11px; color: #cdd0d5; flex-wrap: wrap; padding: 9px var(--space3); }
.api-call .verb { color: #4ade80; font-weight: 500; }
.api-call .path { flex: 1; word-break: break-all; }
.api-call .src-chip { font-size: 9px; padding: 2px 6px; border-radius: 999px; border: 1px solid #2c2f36; color: #9aa0a6; flex: none; }
.api-call .src-chip.fixture { color: #fbbf24; border-color: #5b4a1f; }
.api-call .io-grid { display: flex; align-items: stretch; gap: var(--space2); padding: 0 var(--space3) var(--space3); }
.api-call .io-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.api-call .lbl { font-size: 9px; text-transform: uppercase; letter-spacing: .6px; color: #6b7178; margin-bottom: 4px; }
.api-call pre { font-family: var(--mono); font-size: 10.5px; line-height: 1.45; color: #aeb2b8; background: #16181c; border: 1px solid #1f2228; border-radius: 6px; padding: 8px; margin: 0; overflow: auto; max-height: 240px; min-width: 0; flex: 1; }

/* change-count badge on the "Your changes" summary */
.chg-badge {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; background: #24262b; color: #7c828a; border: 1px solid #2c2f36;
}
.chg-badge.has { background: color-mix(in srgb, #4ade80 22%, #15171b); color: #9bf0bd; border-color: #2c5b3f; }
.chg-badge.bump { animation: chgbump .45s ease; }
@keyframes chgbump { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1); } }
.flow details > summary .sub-note { font-family: var(--mono); font-size: 10px; color: #6b7178; }
.delta pre { font-family: var(--mono); font-size: 10.5px; line-height: 1.45; color: #aeb2b8; padding: var(--space3); margin: 0; overflow: auto; max-height: 320px; }
.delta .k-hot { color: #4ade80; }