/* views-cost-studio.css — Cost & Pricing Studio (#/cost-studio).
   Native to the platform: reuses tokens.css variables + shared components
   (Card/StatCard/DataTable/Button/states). Everything class-prefixed
   .cost-studio-*. Money uses --font-mono. */

.cost-studio {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--s5) var(--s4) var(--s6);
}

.cost-studio-head {
  margin-bottom: var(--s5);
}
.cost-studio-title {
  margin: 0 0 var(--s2);
}
.cost-studio-sub {
  font-size: 13px;
  color: var(--text-2);
  margin: 0;
  max-width: 70ch;
  line-height: 1.5;
}

/* Two-column shell: composer + readout. Collapses on narrow viewports. */
.cost-studio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
}
@media (max-width: 860px) {
  /* minmax(0,…): a bare 1fr has a min-content floor, so a wide readout row
     widened the whole page past a 360px phone. */
  .cost-studio-grid { grid-template-columns: minmax(0, 1fr); }
}

.cost-studio-saved,
.cost-studio-compare {
  margin-top: var(--s4);
}

/* ── Composer ─────────────────────────────────────────────────────────────── */
.cost-studio-composer {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.cost-studio-subsection {
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--bg-raised);
  padding: var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.cost-studio-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cost-studio-hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 74ch;
}
/* One analyzer: Model (sized to its longest option) · Units · Rec · remove.
   Wraps instead of squeezing, so a 360px column never scrolls sideways. */
.cost-studio-analyzer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s2) var(--s3);
}
.cost-studio-analyzer-row .cost-studio-field { min-width: 0; max-width: 100%; }
.cost-studio-analyzer-row .cost-studio-select { align-self: flex-start; }
/* Rec lines up with the controls' text, not the label above them. */
.cost-studio-analyzer-row .cost-studio-check { min-height: var(--control-h); }

.cost-studio-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--s3);
}
.cost-studio-field {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}
.cost-studio-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

/* Box, focus ring and the select chevron are the kit field recipe
   (components.css). This sheet only sizes. A select keeps the base
   fit-content / data-field width: a width:auto here let the stacked Field
   (align-items:stretch) pull the Kind select to the full column (323px for
   "scenario"). */
.cost-studio-input,
.cost-studio-select,
.cost-studio-textarea { max-width: 100%; }
.cost-studio-input-narrow { width: 72px; }
/* Content-aware numeric field widths (platform field standard — cf.
   notification-rules numInput): a numeric input sizes to its content class
   instead of stretching to its full grid column. Declared AFTER -narrow so a
   variant wins where both are present; the fleet table's descendant -narrow
   rule (more specific) still owns its in-table inputs. */
/* Sized in ch to the digits the field can hold, plus its chrome: 2 x 10px
   padding + 2px border + ~16px spinner = 2.375rem; 2.75rem leaves slack. */
.cost-studio-input--count { width: calc(4ch + 2.75rem); max-width: 100%; } /* units / hours / days / venues / nodes / carriers: up to 4 digits */
.cost-studio-input--usd { width: calc(9ch + 2.75rem); max-width: 100%; }   /* currency amounts: up to 9 chars (12345.67) */
.cost-studio-input--pct { width: calc(4ch + 2.75rem); max-width: 100%; }   /* percentages */
.cost-studio-textarea { resize: vertical; }
textarea.cost-studio-textarea { min-height: 60px; }

.cost-studio-check {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
}
.cost-studio-check input { accent-color: var(--accent); }

/* ── Readout ──────────────────────────────────────────────────────────────── */
.cost-studio-readout {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.cost-studio-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s3);
}
.cost-studio-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.cost-studio-pos { color: var(--ok); }
.cost-studio-neg { color: var(--danger); }

.cost-studio-section-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0;
}

.cost-studio-breakdown {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
}
.cost-studio-bd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px var(--s3);
  font-size: 13px;
}
.cost-studio-bd-row:not(:last-child) {
  border-bottom: 1px solid var(--border-subtle);
}
.cost-studio-bd-label { color: var(--text-2); }
.cost-studio-bd-val { color: var(--text-1); }
.cost-studio-bd-base { background: var(--bg-raised); }

/* Free-tier gauge */
.cost-studio-gauge-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
}
.cost-studio-epm {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 11px;
  color: var(--text-muted);
}
.cost-studio-gauge {
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}
.cost-studio-gauge-fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--r-pill);
  transition: width 0.2s ease;
}
.cost-studio-gauge-fill.over { background: var(--danger); }
.cost-studio-gauge-caption {
  font-size: 11px;
  color: var(--text-2);
  margin: var(--s1) 0 0;
}

.cost-studio-margin-host { display: block; }

/* Save form */
.cost-studio-saveform {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.cost-studio-action-row {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
}

/* Saved-scenarios row actions */
.cost-studio-row-actions {
  display: flex;
  gap: var(--s1);
  justify-content: flex-end;
}

/* Cross-compare table */
.cost-studio-compare-wrap { overflow-x: auto; }
.cost-studio-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cost-studio-compare-table th,
.cost-studio-compare-table td {
  padding: 8px var(--s3);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.cost-studio-compare-table th {
  color: var(--text-2);
  font-weight: 600;
  text-align: left;
}
.cost-studio-delta {
  color: var(--text-muted);
  font-size: 11px;
}

/* A2: muted subtext under a "not modeled" breakdown line. */
.cost-studio-bd-subtext {
  padding: 0 var(--s3) 8px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
  border-bottom: 1px solid var(--border-subtle);
}
.cost-studio-bd-row + .cost-studio-bd-subtext { margin-top: -1px; }

/* A3: markup/margin clarifier under the Margin tile. */
.cost-studio-tile-sub {
  margin-top: var(--s1);
  font-size: 11px;
  color: var(--text-2);
}

/* ── Fleet / Portfolio roll-up (Part B) ─────────────────────────────────────── */
.cost-studio-fleet { margin-top: var(--s4); }
.cost-studio-ai { margin-top: var(--s4); }
.cost-studio-ai [data-ai-usage] > * + * { margin-top: var(--s3); }
.cost-studio-fleet-body {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.cost-studio-fleet-note {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
  max-width: 74ch;
}
.cost-studio-fleet-bill {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.cost-studio-fleet .cost-studio-field-grid {
  grid-template-columns: repeat(auto-fit, minmax(120px, max-content));
  justify-content: start;
}
.cost-studio-fleet .cost-studio-tiles {
  grid-template-columns: repeat(auto-fit, minmax(140px, 180px));
  justify-content: start;
}
.cost-studio-cost-chip {
  display: inline-block;
  margin-top: var(--s1);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-2);
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
}
.cost-studio-fx-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.4;
  vertical-align: middle;
  white-space: nowrap;
  color: var(--text-2);
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
}
.cost-studio-section-sub {
  font-size: 12px;
  color: var(--text-2);
  margin: 0 0 var(--s2);
  line-height: 1.45;
}
.cost-studio-fleet-evhead {
  align-items: center;
}
.cost-studio-fleet-add {
  display: inline-flex;
  gap: var(--s2);
  align-items: center;
  text-transform: none;
  letter-spacing: normal;
}
.cost-studio-fleet-add .cost-studio-select { min-width: 180px; width: auto; }

.cost-studio-fleet-table-wrap { overflow-x: auto; }
.cost-studio-fleet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cost-studio-fleet-table th,
.cost-studio-fleet-table td {
  padding: 7px var(--s3);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.cost-studio-fleet-table th {
  color: var(--text-2);
  font-weight: 600;
  text-align: left;
}
.cost-studio-fleet-table .cost-studio-input-narrow { width: 84px; }
.cost-studio-fleet-ssa-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent-text);
  background: var(--accent-soft);
  border-radius: var(--r-sm);
  padding: 1px 5px;
  vertical-align: middle;
}

/* SSA cost-share callout */
.cost-studio-fleet-callout {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  flex-wrap: wrap;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--bg-raised);
  padding: var(--s3);
}
.cost-studio-fleet-callout-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-2);
}
.cost-studio-fleet-callout-val {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-1);
}
.cost-studio-fleet-callout-desc {
  font-size: 12px;
  color: var(--text-muted);
  flex: 1 1 220px;
  line-height: 1.5;
}

/* Saved portfolios (localStorage) */
.cost-studio-fleet-portfolios {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.cost-studio-fleet-portfolio-list {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.cost-studio-fleet-portfolio-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  background: var(--bg-raised);
  padding: var(--s2) var(--s3);
}
.cost-studio-fleet-portfolio-name {
  font-size: 13px;
  color: var(--text-1);
  font-weight: 500;
}
.cost-studio-fleet-portfolio-acts {
  display: flex;
  gap: var(--s1);
}

/* ── Import from event (fast-follow 1) ─────────────────────────────────────── */
.cost-studio-import {
  margin-bottom: var(--s4);
}
.cost-studio-import-body {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.cost-studio-import-pick {
  display: flex;
  gap: var(--s2);
  align-items: center;
  flex-wrap: wrap;
}
.cost-studio-import-pick .cost-studio-select {
  /* Content-sized (base.css :where(select) fit-content); never stretched. */
  flex: 0 0 auto;
}
.cost-studio-import-hint {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}
.cost-studio-import-prov {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.cost-studio-import-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.cost-studio-import-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  background: var(--bg-raised);
  padding: 2px var(--s2);
  font-size: 12px;
}
.cost-studio-import-chip-label {
  color: var(--text-1);
  font-weight: 500;
}
.cost-studio-import-chip-src {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.cost-studio-import-measured .cost-studio-import-chip-src,
.cost-studio-import-chip.cost-studio-import-measured .cost-studio-import-chip-src {
  color: var(--ok);
}
.cost-studio-import-chip.cost-studio-import-measured {
  border-color: color-mix(in srgb, var(--ok) 40%, var(--border-subtle));
}
.cost-studio-import-chip.cost-studio-import-unavailable {
  border-color: color-mix(in srgb, var(--danger) 40%, var(--border-subtle));
}
.cost-studio-import-chip.cost-studio-import-unavailable .cost-studio-import-chip-src {
  color: var(--danger);
}
.cost-studio-import-chip.cost-studio-import-default .cost-studio-import-chip-src,
.cost-studio-import-chip.cost-studio-import-assumed .cost-studio-import-chip-src {
  color: var(--text-2);
}
.cost-studio-import-meas {
  font-size: 12px;
  color: var(--text-2);
}
.cost-studio-import-notes {
  margin: 0;
  padding-left: var(--s4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cost-studio-import-notes li {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ── Tablet gap (761–1099px; iPad) ────────────────────────────────────────────
   The KPI tile grid's 140px floor packs 4 tiles side-by-side at iPad widths;
   a long money value ("$200000.00" at 28px mono ≈ 200px) clips mid-glyph at
   the tile edge. Raise the floor so tiles wrap to fewer, wider columns
   instead. Desktop (≥1100) keeps the 140px floor and its current column
   count; phone (≤760) is intentionally untouched here. */
@media (min-width:761px) and (max-width:1099px){
  .cost-studio-tiles { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

/* ── Phone (≤760px) ───────────────────────────────────────────────────────────
   Same clip as above, worse: at 375px the 140px floor packs the tiles 2-up at
   ~148px, and "$200000.00" (169px at 28px mono) is cut mid-glyph. Match the
   Usage tab's phone idiom (its tile values drop 26→22px and the grid wraps):
   shrink the value to 22px (10 mono chars ≈ 133px) and raise the floor to
   170px (133px + 34px card padding) so auto-fit only makes columns the value
   actually fits — 2×2 on larger phones, a single column on the narrowest.
   Tablet (761–1099) and desktop (≥1100) are untouched. */
@media (max-width:760px){
  .cost-studio-tiles { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .cost-studio-tiles .stat-value { font-size: 22px; }
  /* Fleet roll-up header: the scenario select (180px floor) + "+ Add event
     line" ran ~100px past the card at 320px (the button fully off-canvas).
     Let the header and the control cluster wrap; the select gives up its
     fixed floor. It keeps its content width (a 140px flex basis cut the
     model name, 202px of text in 187px) and wraps to its own line instead. */
  .cost-studio-fleet-evhead { flex-wrap: wrap; }
  .cost-studio-fleet-add { flex-wrap: wrap; max-width: 100%; }
  .cost-studio-fleet-add .cost-studio-select { min-width: 0; flex: 0 1 auto; max-width: 100%; }
}
/* Narrowest phones: the model field takes the first row on its own; Units +
   Rec + remove share the second. The select still shrinks to its content. */
@media (max-width:380px){
  .cost-studio-analyzer-row .cost-studio-field:first-child { flex: 1 1 100%; }
}

/* ── Price book (economics plan A; owner only — views/price-book.js) ─────── */
.price-book {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  margin-top: var(--s5);
}
.price-book-note {
  font-size: 12px;
  color: var(--text-2);
  margin: 0 0 var(--s2);
  line-height: 1.5;
}
.price-book-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
  margin-top: var(--s2);
}
.price-book-row-actions { display: flex; gap: var(--s1); }
/* Text boxes take the kit m token from price-book.js input(). */
.price-book .cost-studio-input--text { max-width: 100%; }
.cost-studio-input[data-field="url"] { width: auto; min-width: var(--field-l); max-width: 100%; }
.price-book-form .cost-studio-select { width: auto; min-width: 8rem; max-width: 100%; }
@media (max-width: 480px) {
  /* Fields take the row; a select keeps its content width (no grow). */
  .price-book-form > :not([type="checkbox"]):not(select) { flex: 1 1 100%; }
  .price-book .cost-studio-input--text { width: 100%; }
  .cost-studio-input[data-field="url"] { min-width: 0; width: 100%; }
}
.price-book .dt td.price-book-desc,
.price-book .dt th.price-book-desc {
  white-space: normal;
  min-width: 16rem;
  max-width: 36rem;
  vertical-align: top;
}
.price-book-desc-input { white-space: pre-wrap; }
.price-book-default-slot { display: inline-flex; min-width: 8.5rem; }
.price-book .dt td.price-book-source,
.price-book .dt th.price-book-source { white-space: nowrap; vertical-align: middle; }
/* Link + Edit on one centred row. The link has a fixed share of the row and
   ellipsizes (full URL in its title), so every Edit sits at the same x. */
.price-book-source-cell { display: flex; flex-wrap: nowrap; gap: var(--s2); align-items: center; }
.price-book-source-link { flex: 0 1 22rem; width: 22rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.price-book-source-cell > button { flex: none; }
.price-book .dt td.price-book-pack,
.price-book .dt th.price-book-pack { white-space: normal; vertical-align: top; }
.price-book-pack-cell { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; max-width: 28rem; }
.price-book-pack-key {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: normal;
  overflow-wrap: anywhere;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
}
.price-book-pack-name,
.price-book-pack-unlocks { font-size: 12px; line-height: 1.4; white-space: normal; }
.price-book-pack-unknown {
  display: inline-block;
  font-size: 11px;
  line-height: 1.4;
  color: var(--danger);
}
.price-book-tier-cell { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.price-book-key-error { font-size: 11px; line-height: 1.4; color: var(--danger); max-width: 22rem; white-space: normal; }
.price-book-key-error:empty { display: none; }
.cost-studio-input[aria-invalid="true"] { border-color: var(--danger); }
/* A fee tier: the platform_fee row heads it, its allowance rows indent under it. */
.price-book .dt tbody tr.pb-tier-child td:first-child { box-shadow: inset 3px 0 0 var(--accent-soft); }
.price-book .dt tbody tr.pb-tier-head td { border-top: 1px solid var(--border); }
/* Tables inside the price book keep every control at its full width: the
   percentage max-width of the base field rule lets an auto-layout table
   squeeze inputs and clip their text. Controls here have definite widths and
   the Name / Label column takes the spare room, so a table fits its card from
   1200px up with no sideways scroll. Below that (and above the <=760px card
   reflow in components.css) each row wraps onto lines of label-over-value
   cells instead of scrolling. */
@media (min-width: 761px) {
  .price-book .dt td :is(input, select, textarea) { max-width: none; }
}
@media (min-width: 761px) and (max-width: 1199px) {
  .price-book .dt thead { display: none; }
  .price-book .dt, .price-book .dt tbody { display: block; width: 100%; }
  .price-book .dt tbody tr { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s2) var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--border-subtle); }
  .price-book .dt tbody tr.dt-group { display: block; }
  .price-book .dt td { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 0; border: 0; white-space: normal; width: auto; min-width: 0; }
  .price-book .dt td[data-label]::before { content: attr(data-label); font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
  .price-book .dt td.pb-flex { flex: 1 1 16rem; width: auto; }
  .price-book .dt td.pb-flex :is(input, textarea)[data-field="fill"] { min-width: 0; }
  .price-book .dt td.price-book-desc { flex: 1 1 16rem; max-width: none; min-width: 0; }
}
/* Headers that break onto two lines ("Frames /" over "s") to save width. */
.price-book .dt th.pb-fps, .price-book .dt th.pb-bytes, .price-book .dt th.pb-traces { white-space: pre-line; vertical-align: bottom; }
.price-book-name-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.price-book-model-key { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); white-space: nowrap; }
/* One flexible column per table (Name / Label): it takes the spare width, the
   rest shrink to their controls. Narrow screens scroll in the wrapper. */
.price-book .dt th.pb-flex, .price-book .dt td.pb-flex { width: 100%; }
.price-book .dt td.pb-flex :is(input, textarea)[data-field="fill"] { min-width: 22ch; }
.price-book-flex-wrap { field-sizing: content; min-height: 0; height: auto; resize: none; overflow: hidden; line-height: 1.35; }
@media (min-width: 761px) {
  .price-book-models-table th, .price-book-models-table td { padding-left: 8px; padding-right: 8px; white-space: nowrap; }
}
.price-book-totals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-top: var(--s2);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-1);
}
.cost-studio-ai-limits { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; }
.cost-studio-ai-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-2); }
.cost-studio-ai-field input[type="number"] { width: 10ch; }
.cost-studio-ai-field input[type="text"] { width: 22ch; }
.cost-studio-ai-limits > .cost-studio-fleet-note { flex-basis: 100%; margin: 0; }

.cost-studio-fx-chip[role="button"] { cursor: pointer; }
.cost-studio-fx-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 8px;
}
.cost-studio-fx-editor .cost-studio-label { display: inline-flex; align-items: center; gap: 6px; }
.cost-studio-fx-note { font-size: 12px; color: var(--text-2); }

/* Section cards: the first line of body text sits one side-padding below the
   header bar's bottom border, not 4px (section.css .adm-section-body). */
.cost-studio-section > .adm-section-body { padding-top: 18px; }