/* Scale Command showcase: Tool B, the ad return simulator (css/adreturn.css).
   Styles only the .ads-* classes and the #adreturn-tool mount. Colors and fonts
   come from the shell's :root tokens; the --ads-* names alias them, with the
   brief's values as fallbacks so the section renders right even before the
   shell's token names are matched. The ticket slider and the premium chip use
   the shell's ledger and chip grammar. */

:root {
  --ads-gold: var(--gold, #C8A84E);
  --ads-text: var(--text, #EDEBE3);
  --ads-text-2: var(--text-2, #A7A5A0);
  --ads-muted: var(--muted, #8A8A93);
  --ads-hairline: var(--hair, rgba(200, 168, 78, 0.15));
  --ads-money: var(--money, #4ADE80);
  --ads-font-mono: var(--font-mono, 'Manrope', system-ui, sans-serif);
  --ads-font-body: var(--font-body, 'Manrope', system-ui, sans-serif);
}

/* Platform rows: each row is a ledger row (label, readout, range) with a
   4-up mono line under it. Phone first: everything stacks. */
.ads-rows {
  display: block;
  min-width: 0;
}

.ads-row {
  position: relative;
  min-width: 0;
}

.ads-stats {
  grid-column: 1 / -1;
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 10px;
  margin-top: 10px;
  font-family: var(--ads-font-mono);
  font-variant-numeric: tabular-nums;
}

.ads-stat {
  min-width: 0;
}

.ads-stat-k {
  display: block;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ads-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ads-stat-v {
  display: block;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--ads-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}

.ads-stat-v.is-money {
  color: var(--ads-money);
}

/* Totals: a ledger strip of four figures. Two per row on phones. */
.ads-totals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  margin-top: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--ads-hairline);
  border-bottom: 1px solid var(--ads-hairline);
}

.ads-total {
  min-width: 0;
}

.ads-total-k {
  display: block;
  margin-bottom: 4px;
  font-family: var(--ads-font-mono);
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ads-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ads-total-v {
  display: block;
  font-family: var(--ads-font-mono);
  font-weight: 700;
  font-size: clamp(1.1rem, 1vw + 0.9rem, 1.4rem);
  line-height: 1.2;
  color: var(--ads-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ads-total-v.is-money {
  color: var(--ads-money);
}

/* The two return lines, in the app's own words. */
.ads-roas {
  display: grid;
  gap: 6px;
  margin-top: 16px;
}

.ads-roas-line {
  margin: 0;
  font-family: var(--ads-font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ads-text-2);
  overflow-wrap: anywhere;
}

.ads-roas-booked {
  color: var(--ads-text);
  font-size: clamp(1.05rem, 0.6vw + 0.95rem, 1.25rem);
}

.ads-roas-num {
  font-family: var(--ads-font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ads-text);
}

.ads-roas-booked .ads-roas-num {
  font-size: 1.35em;
  line-height: 1;
  color: var(--ads-money);
}

/* Totals go 4-up once there is room. */
@media (min-width: 620px) {
  .ads-totals {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Table layout from 768px, through the modifier class only. Each row becomes
   one line: platform and its spend slider on the left, the four figures as
   columns on the right. Column counts live here, never inline. */
@media (min-width: 768px) {
  .ads-rows.is-table .ads-row {
    display: grid;
    /* Fixed stat columns: the slider (label + readout) spans the rest, so its track is the same width on every row. */
    grid-template-columns: minmax(0, 1fr) auto repeat(4, var(--ads-stat-w, 104px));
    grid-template-areas:
      "label readout leads jobs booked ratio"
      "range range   leads jobs booked ratio";
    column-gap: 16px;
    row-gap: 6px;
    align-items: center;
  }

  .ads-rows.is-table .ads-row > .ledger-label {
    grid-area: label;
    align-self: end;
  }

  .ads-rows.is-table .ads-row > .ledger-readout {
    grid-area: readout;
    align-self: end;
  }

  .ads-rows.is-table .ads-row > .ledger-range {
    grid-area: range;
    align-self: start;
    width: 100%;
    min-width: 0;
  }

  .ads-rows.is-table .ads-stats {
    display: contents;
  }

  .ads-rows.is-table .ads-stat {
    align-self: center;
    padding-left: 10px;
    border-left: 1px solid var(--ads-hairline);
    text-align: right;
  }

  .ads-rows.is-table .ads-stat[data-stat="leads"] { grid-area: leads; }
  .ads-rows.is-table .ads-stat[data-stat="jobs"] { grid-area: jobs; }
  .ads-rows.is-table .ads-stat[data-stat="booked"] { grid-area: booked; }
  .ads-rows.is-table .ads-stat[data-stat="ratio"] { grid-area: ratio; }
}

/* Wider stat columns once the row is full width on a desktop; the slider keeps the rest. */
@media (min-width: 1080px) {
  .ads-rows.is-table .ads-row { --ads-stat-w: 150px; }
}

/* The mount: inside a .row-visual column or a full-width block, never wider than it. */
#adreturn-tool,
#ads-rows,
#ads-totals,
#ads-roas {
  max-width: 100%;
  min-width: 0;
}

#adreturn-tool .chip-row {
  margin-top: 16px;
}

/* In a narrow column the rows stack and the totals go two per row, whatever the viewport
   says; the viewport rules above still apply where container queries are not supported. */
#ads-rows,
#ads-totals {
  container-type: inline-size;
}

@container (max-width: 639px) {
  /* Keep the shell's ledger grid (label left, readout right, the range under them) and put the
     four figures on a third line; the table's named areas no longer exist here, so every cell
     drops back to the 4-up .ads-stats grid. */
  .ads-rows.is-table .ads-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "label readout"
      "range range"
      "stats stats";
    column-gap: 12px;
    row-gap: 0;
  }

  .ads-rows.is-table .ads-row > .ledger-label,
  .ads-rows.is-table .ads-row > .ledger-readout,
  .ads-rows.is-table .ads-row > .ledger-range {
    align-self: center;
  }

  .ads-rows.is-table .ads-stats {
    display: grid;
    grid-area: stats;
  }

  .ads-rows.is-table .ads-stat,
  .ads-rows.is-table .ads-stat[data-stat] {
    grid-area: auto;
    padding-left: 0;
    border-left: 0;
    text-align: left;
  }
}

@container (max-width: 479px) {
  .ads-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ads-row,
  .ads-stat-v,
  .ads-total-v,
  .ads-roas-num {
    transition: none;
    animation: none;
  }
}