/* ChatFlow Landing Pages view (#pages-view, design A). Needs tokens.css, components.css (rows,
   chips, status, folders, list states, dialog) and chrome.css (.cf-page) first. Page header
   (one primary: New Landing Page; New Folder), then the folders and the pages in no folder,
   each a card of shared rows: the slug with its status control, then template · campaign.
   Colours come from tokens only, so night needs no rules here. Class names are pg-* (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) or
   Off grey (.chip-idle), on a real button that opens the status menu; a listing of a page
   hosted elsewhere carries the grey External identity chip (.chip-external) instead. 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 */
.pg-page > :not(.page-head) { max-width: 1200px; }

/* ---------- Page rows (the shared .row) ---------- */
.pg-row { gap: 16px; }
.pg-row[draggable="true"] { cursor: grab; }
.pg-row[draggable="true"]:active { cursor: grabbing; }
.pg-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. Same values as the
   Offers view's .off-status. */
.pg-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;
}
.pg-status:hover,
.pg-status[aria-expanded="true"] { background: var(--fill); }
.pg-status:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pg-status > .ic { flex: none; }

/* The live address of an external listing: a link, so it is blue and underlined. Its meta line
   clips (a long address ends in an ellipsis), so that line gets 4px of room above and below,
   given back by a negative margin: the focus ring (2px, 2px out) is drawn whole. */
.pg-link { color: var(--reply); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.pg-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.pg-row .row-meta:has(> .pg-link) { padding-block: 4px; margin-block: -4px; }

/* ---------- New, Edit and Duplicate: the page editor ---------- */
.pg-dialog { width: 640px; }
.pg-req { font-weight: var(--fw-regular); color: var(--ink-2); }
/* Slug | Template, then Folder | Campaign */
.pg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
/* Information inside the dialog (a listing only, a design-managed template): ink on --fill */
.pg-note {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-control);
  background: var(--fill);
  color: var(--ink);
  font: var(--fw-regular) var(--fs-label)/var(--lh-label) var(--font);
}
/* The template's own fields, under a hairline and a section-sized legend */
.pg-fields { min-width: 0; margin: 0; padding: 16px 0 0; border: 0; border-top: 1px solid var(--line); }
.pg-fields > legend { float: left; width: 100%; margin: 0 0 12px; padding: 0; font: var(--fw-semibold) var(--fs-body)/var(--lh-body) var(--font); color: var(--ink); }
.pg-fields > legend + * { clear: both; }
.pg-live { gap: 2px; }
.pg-live .hint { padding-left: 24px; overflow-wrap: anywhere; }
.pg-code { color: var(--ink); font: var(--fw-regular) var(--fs-caption)/var(--lh-caption) ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; }
/* busy while its request runs: it keeps focus, so aria-disabled rather than disabled */
.pg-dialog .modal-btns button[aria-disabled="true"] { opacity: .5; cursor: progress; background-image: none; }

/* ---------- Stats ---------- */
.pg-stats-dialog { width: 420px; }
.pg-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; }
.pg-stat { min-width: 0; padding: 12px; border-radius: var(--radius-control); background: var(--fill); }
/* Three tiles (no Conversions): the last one takes the whole row */
.pg-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pg-stat dt { font: var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font); color: var(--ink-2); }
.pg-stat dd { margin: 0; }
.pg-stat-num { font: var(--fw-semibold) var(--fs-title)/var(--lh-title) var(--font); color: var(--ink); font-variant-numeric: tabular-nums; }
.pg-stat-sub { font: var(--fw-regular) var(--fs-label)/var(--lh-label) var(--font); color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ---------- Phones: the title line wraps, the editor is one column ---------- */
@media (max-width: 767px) {
  .pg-row { align-items: flex-start; padding-right: 8px; }
  .pg-row .row-title-line { flex-wrap: wrap; row-gap: 2px; }
  .pg-row .row-title { white-space: normal; overflow-wrap: anywhere; }
  .pg-row .row-meta { white-space: normal; overflow-wrap: anywhere; }
  .pg-row .row-actions { gap: 4px; }
  .pg-grid { grid-template-columns: 1fr; }
}