/* ChatFlow Offers view (#offers-view, design A). Needs tokens.css, components.css (rows,
   chips, folders, list states, dialog) and chrome.css (.cf-page) first. Page header (one
   primary: New Offer; New Folder), then the folders and the offers in no folder, each a
   card of shared rows: the offer name with its status control, brand · geo · network, and
   the funnel counters (Sent, Clicks, Regs, FTDs) as the row's key numbers in tabular
   figures. Colours come from tokens only, so night needs no rules here. Class names are
   off-* (and the shared fold-* / list-*) so the old night layer's .flow-list, .flow-card,
   .folder-card and .empty-state rules never reach this view.

   Status is a word on a chip in the colour language (COLOUR-TOKENS): Live green (.chip-ok),
   Paused amber (.chip-warn), Stopped red (.chip-bad). Money stays green: a REG count above
   zero sits on the money tint, an FTD count on the money solid, as in the inbox. Folders and
   the unfiled card are raised surfaces (.card, --shadow-card). */

/* The page frame of Settings: the header spans the page, the content stops at 1200px */
.off-page > :not(.page-head) { max-width: 1200px; }

/* ---------- Offer rows (the shared .row) ---------- */
.off-row { gap: 16px; }
/* The name is the row's identifier: it never shrinks below this while the counters sit beside it */
.off-row .row-main { min-width: 160px; }
.off-row[draggable="true"] { cursor: grab; }
.off-row[draggable="true"]:active { cursor: grabbing; }
.off-row .row-actions button { cursor: pointer; }

/* The status control: the status word opens the status menu. 28px tall (44 on touch); the
   negative margin keeps the title line at its own height on desktop. */
.off-status {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  height: var(--control-h-sm);
  margin: -4px 0;
  box-sizing: border-box;
  padding: 0 2px 0 6px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  cursor: pointer;
}
.off-status:hover,
.off-status[aria-expanded="true"] { background: var(--fill); }
.off-status:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.off-status > .ic { flex: none; }

/* The funnel counters: value (15/600) over its label (12px), right-aligned so each column
   lines up from row to row. Every value has the same side padding, so a tinted REG or FTD
   value ends where a plain one does. */
.off-stats { flex: none; display: flex; gap: 4px; margin: 0; }
.off-stat { display: flex; flex-direction: column-reverse; align-items: flex-end; width: 76px; }
.off-stat dt { padding: 0 6px; font: var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font); color: var(--ink-2); }
.off-stat dd { max-width: 100%; margin: 0; overflow: hidden; text-overflow: ellipsis; font: var(--fw-semibold) var(--fs-body)/var(--lh-body) var(--font); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.off-num { display: inline-block; padding: 0 6px; border-radius: 6px; }
.off-stat.is-zero dd { color: var(--ink-2); }
.off-stat.is-reg .off-num { background: var(--money-tint); color: var(--money); }
.off-stat.is-ftd .off-num { background: var(--money-solid); color: var(--on-money); }

/* ---------- New Offer and Edit Offer ---------- */
.off-dialog { width: 460px; }
.off-req { font-weight: var(--fw-regular); color: var(--ink-2); }
.off-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Qualified-CPA gate switch: label left, switch right, hint under both */
.off-qftd-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.off-qftd-line .field-label { margin: 0; }
/* CPA per country: one row per country of the Geo field (code, euros, start date) */
.off-cpa { margin: 0; padding: 0; border: 0; min-width: 0; }
.off-cpa > .hint { margin: 2px 0 8px; }
.off-cpa-row { display: grid; grid-template-columns: 44px 1fr 1fr; align-items: center; gap: 8px; }
.off-cpa-row + .off-cpa-row { margin-top: 8px; }
.off-cpa-geo { font: var(--fw-semibold) var(--fs-label)/var(--lh-label) var(--font); color: var(--ink); }
.off-cpa-older { grid-column: 2 / -1; margin: 0; }
/* busy while its request runs: it keeps focus, so aria-disabled rather than disabled */
.off-dialog .modal-btns button[aria-disabled="true"] { opacity: .5; cursor: progress; background-image: none; }

/* The tracking URL and postback help: closed until asked for, ink on --fill */
.off-help { border-radius: var(--radius-control); background: var(--fill); color: var(--ink); }
.off-help > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  box-sizing: border-box;
  padding: 0 10px;
  border-radius: var(--radius-control);
  font: var(--fw-semibold) var(--fs-label)/var(--lh-label) var(--font);
  list-style: none;
  cursor: pointer;
}
.off-help > summary::-webkit-details-marker { display: none; }
@media (pointer: coarse) { .off-help > summary { min-height: var(--control-h); } }
.off-help > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.off-help > summary > .ic { color: var(--ink-2); transition: transform .15s ease; }
.off-help[open] > summary > .ic { transform: rotate(90deg); }
.off-help-body { padding: 2px 12px 12px; font: var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font); color: var(--ink); }
.off-help-body p { margin: 0 0 8px; }
.off-help-body b { font-weight: var(--fw-semibold); }
.off-help code { padding: 1px 4px; border-radius: 4px; background: var(--bg); font: var(--fw-regular) var(--fs-caption)/var(--lh-caption) ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.off-pb + .off-pb { margin-top: 10px; }
.off-pb-label { margin: 0 0 4px; font: var(--fw-semibold) var(--fs-caption)/var(--lh-caption) var(--font); color: var(--ink-2); }
.off-pb-line { display: flex; align-items: center; gap: 8px; }
.off-pb-line code { flex: 1; min-width: 0; overflow-x: auto; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; }
.off-pb-line .btn { background: var(--bg); }

@media (prefers-reduced-motion: reduce) {
  .off-help > summary > .ic { transition: none; }
}

/* ---------- Narrow lists: the counters take their own line under the name ----------
   The list is a size container, so the switch follows the width the list really has (sidebar
   shown or hidden, laptop, tablet or phone), not the window's. Beside the name, the status,
   the four counters and Edit/More take about 530px; under 720px they would squeeze the name,
   so the counters move to their own line. */
#offers-list { container: off-list / inline-size; }
@container off-list (max-width: 719px) {
  .off-row { flex-wrap: wrap; align-items: flex-start; row-gap: 10px; padding-right: 8px; }
  .off-row .row-main { flex: 1 1 0; }
  .off-row .row-title-line { flex-wrap: wrap; row-gap: 2px; }
  .off-row .row-meta { white-space: normal; overflow-wrap: anywhere; }
  .off-row .row-actions { order: 2; gap: 4px; }
  .off-stats { order: 3; flex: 1 1 100%; margin-left: -6px; }
  .off-stat { flex: 1 1 0; width: auto; min-width: 0; align-items: flex-start; }
}
@media (max-width: 767px) {
  .off-pair { grid-template-columns: 1fr; }
}