/* ChatFlow shared components (design A). Needs tokens.css first.
   Built only as far as the chrome and Settings use them; each later area adds what it
   needs here instead of inline styles. Colours, type and shape come from tokens only,
   so night needs no rules of its own in this file.

   Contents: type scale, focus, buttons, icon button, icons, fields and form layout,
   segmented control, menu, chips and status, row and card, folders, list states, page
   and section headers, toast, dialog.

   Scope note: the flow editor's controls, which sit in the top bar, still use a class
   "btn" of their own (.topbar .btn). Until the editor's bar is rebuilt, .btn here skips
   anything inside .topbar. */

/* ---------- Type scale ---------- */
.t-badge   { font: var(--fw-semibold) var(--fs-badge)/var(--lh-badge) var(--font); }
.t-caption { font: var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font); }
.t-label   { font: var(--fw-regular) var(--fs-label)/var(--lh-label) var(--font); }
.t-body    { font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font); }
.t-section { font: var(--fw-semibold) var(--fs-section)/var(--lh-section) var(--font); }
.t-title   { font: var(--fw-semibold) var(--fs-title)/var(--lh-title) var(--font); }
.t-hero    { font: var(--fw-hero) var(--fs-hero)/var(--lh-hero) var(--font); letter-spacing: -0.2px; font-variant-numeric: tabular-nums; }
.t-strong  { font-weight: var(--fw-semibold); }
.t-ink     { color: var(--ink); }
.t-ink-2   { color: var(--ink-2); }
.num       { font-variant-numeric: tabular-nums; }
.sr-only   { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Focus: one ring, only for keyboard focus ---------- */
.btn:not(:where(.topbar *)):focus-visible,
.icon-btn:focus-visible,
.seg > button:focus-visible,
.menu-item:focus-visible,
.chip:focus-visible,
.modal-btns button:focus-visible,
.toast .icon-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
/* On the red error toast the blue ring would vanish (1.2 to 1.6:1): it takes the
   toast's own text colour instead (7.52:1 day, 9.16:1 night). */
.toast-error .icon-btn:focus-visible { outline-color: var(--on-alert); }

/* ---------- Buttons ----------
   .btn neutral (--fill / --ink), .btn-primary (--reply / --on-reply, one per view),
   .btn-danger (--alert text on --fill), .btn-danger.btn-solid (solid --alert, only the
   confirm button of a destructive dialog), .btn-quiet (no ground until hover),
   .btn-tint-info and .btn-tint-bad (tinted secondary actions, below).
   32px on desktop, .btn-sm 28px inside rows; both 44px under (pointer: coarse). */
.btn:not(:where(.topbar *)) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: none;
  height: var(--control-h);
  box-sizing: border-box;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--fill);
  color: var(--ink);
  font: var(--fw-semibold) var(--fs-label)/16px var(--font);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.btn:not(:where(.topbar *)) > .ic:first-child { margin-left: -2px; }
.btn:not(:where(.topbar *)) > .ic:first-child + span { margin-right: 2px; }
.btn.btn-sm:not(:where(.topbar *)) { height: var(--control-h-sm); padding: 0 10px; }
.btn.btn-primary:not(:where(.topbar *)) { background: var(--reply); color: var(--on-reply); }
.btn.btn-danger:not(:where(.topbar *)) { color: var(--alert); }
.btn.btn-danger.btn-solid:not(:where(.topbar *)) { background: var(--alert); color: var(--on-alert); }
/* Tinted secondary actions (colour language rule 6): an important Open in the blue
   tint, a row's Delete in the red tint (5.21 and 6.57:1 by day, 6.14 and 7.01:1 by night). */
.btn.btn-tint-info:not(:where(.topbar *)) { background: var(--info-tint); color: var(--info); }
.btn.btn-tint-bad:not(:where(.topbar *)) { background: var(--bad-tint); color: var(--bad); }
.btn.btn-quiet:not(:where(.topbar *)) { background: transparent; }
.btn:not(:where(.topbar *)):hover:not(:disabled) { background-image: linear-gradient(var(--press-overlay), var(--press-overlay)); }
.btn:not(:where(.topbar *)):disabled { opacity: .5; cursor: default; }
.btn:not(:where(.topbar *))[aria-busy="true"] { cursor: progress; }

/* ---------- Icon button: 28px minimum (44 on touch), always with an aria-label ---------- */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--control-h-sm);
  height: var(--control-h-sm);
  box-sizing: border-box;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}
.icon-btn:hover:not(:disabled) { background: var(--fill); color: var(--ink); }
.icon-btn[aria-expanded="true"] { background: var(--fill); color: var(--ink); }
.icon-btn:disabled { opacity: .5; cursor: default; }

/* ---------- Icons ----------
   Control icons (.ic) paint with currentColor. I3 section glyphs (.i3): structure in
   --ink-2, accent (.a) in --reply; selected = whole glyph --reply; on a primary button
   the whole glyph takes --on-reply. */
.ic, .i3 { display: block; flex: none; }
.i3 { color: var(--ink-2); }
.i3 .a { color: var(--reply); }
.i3.is-selected,
[aria-current="page"] .i3 { color: var(--reply); }
.btn-primary .i3,
.btn-primary .i3 .a { color: var(--on-reply); }

/* ---------- Fields: visible label above, 36px input, 2px focus ring ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-label { font: var(--fw-semibold) var(--fs-label)/var(--lh-label) var(--font); color: var(--ink); }
.input {
  width: 100%;
  height: var(--field-h);
  box-sizing: border-box;
  padding: 0 10px;
  border: 1px solid var(--edge-field);
  border-radius: var(--radius-control);
  background: var(--bg);
  color: var(--ink);
  font: var(--fw-regular) var(--fs-label)/var(--lh-label) var(--font);
  color-scheme: var(--scheme);
  outline: none;
}
textarea.input { height: auto; min-height: 72px; padding: 8px 10px; resize: vertical; }
select.input {
  padding-right: 32px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none' stroke='%238E8E93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8L10 12L14 8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.input::placeholder { color: var(--ink-2); opacity: 1; }
.input:focus { border-color: var(--reply); box-shadow: 0 0 0 1px var(--reply); }
.input:disabled { background: var(--fill); color: var(--ink-2); }
.input[aria-invalid="true"] { border-color: var(--alert); }
.hint { margin: 0; font: var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font); color: var(--ink-2); }
.field-error { margin: 0; font: var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font); color: var(--alert); }
.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  font: var(--fw-regular) var(--fs-label)/var(--lh-label) var(--font);
  color: var(--ink);
  cursor: pointer;
}
.check-row input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--reply); color-scheme: var(--scheme); }
/* A field or input shown only in some states (hidden attribute) */
.field[hidden], .input[hidden] { display: none; }
/* Form layout inside a dialog: fields 16px apart */
.form-stack { display: flex; flex-direction: column; gap: 16px; }
/* A short scrolling list of check rows (for example accounts to assign) */
.check-list {
  max-height: 150px;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 4px 10px;
  border: 1px solid var(--edge-field);
  border-radius: var(--radius-control);
  background: var(--bg);
}
.check-list > .hint { padding: 6px 0; }
/* Touch: each check row is a 44px target, and the list shows about five of them */
@media (pointer: coarse) {
  .check-row { min-height: 44px; }
  .check-list { max-height: 232px; }
}
@media (max-width: 767px) {
  .input { font-size: 16px; }
}

/* ---------- Segmented control: 2 to 4 options, aria-pressed ---------- */
.seg {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  padding: 2px;
  border-radius: var(--radius-control);
  background: var(--fill);
}
.seg > button {
  min-width: 104px;
  height: 28px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: var(--fw-regular) var(--fs-label)/16px var(--font);
  white-space: nowrap;
  cursor: pointer;
}
.seg > button:hover:not([aria-pressed="true"]) { background: var(--hover); }
.seg > button[aria-pressed="true"] {
  background: var(--reply-tint);
  box-shadow: inset 0 0 0 1px var(--reply);
  font-weight: var(--fw-semibold);
}
@media (pointer: coarse) {
  .seg > button { height: 44px; }
}

/* ---------- Menu ---------- */
.menu {
  position: fixed;
  z-index: 9000;
  min-width: 180px;
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--pop);
  color: var(--ink);
  box-shadow: var(--shadow-pop);
  font-family: var(--font);
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 32px;
  box-sizing: border-box;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: var(--fw-regular) var(--fs-label)/16px var(--font);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.menu-item:hover:not(:disabled),
.menu-item:focus-visible { background: var(--fill); }
.menu-item:disabled { color: var(--ink-2); cursor: default; }
.menu-item.is-danger { color: var(--alert); }
.menu-item .menu-check { flex: none; display: flex; width: 16px; height: 16px; color: var(--reply); }
.menu-item .menu-icon { flex: none; display: flex; width: 16px; height: 16px; color: inherit; }
.menu-item > span:not(.menu-check) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.menu-head { margin: 0; padding: 5px 8px 3px; font: var(--fw-semibold) var(--fs-caption)/var(--lh-caption) var(--font); color: var(--ink-2); }
.menu-sep { height: 1px; margin: 5px 2px; background: var(--line); }
.menu-id { display: flex; align-items: center; gap: 10px; padding: 6px 8px 7px; }
.menu-id-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.menu-id-name { font: var(--fw-semibold) var(--fs-label)/16px var(--font); color: var(--ink); }
.menu-id-role { font: var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font); color: var(--ink-2); }
@media (pointer: coarse) {
  .menu-item { height: 44px; }
}

/* ---------- Avatar (initial on a desaturated tint, never a status hue) ---------- */
.avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--av-stone-bg);
  color: var(--av-stone-fg);
  font: var(--fw-semibold) var(--fs-label)/16px var(--font);
}
.avatar.avatar-sm { width: 24px; height: 24px; font-size: var(--fs-caption); }

/* ---------- Chips and status ----------
   Every status carries a word; colour is never the only signal. The colour language
   (tokens.css, COLOUR-TOKENS.md): a plain .chip is neutral; a status chip is .chip-ok
   (green), .chip-warn (amber), .chip-bad (red), .chip-info (blue) or .chip-idle (grey),
   plus .chip-solid for the words that must pop; an identity chip is .chip-meta,
   .chip-tiktok, .chip-bot, .chip-dm, .chip-channel or .chip-external (an outline). */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--fill);
  color: var(--ink-2);
  font: var(--fw-semibold) var(--fs-badge)/var(--lh-badge) var(--font);
  white-space: nowrap;
}
/* status */
.chip-ok    { background: var(--ok-tint); color: var(--ok); }
.chip-warn  { background: var(--warn-tint); color: var(--warn); }
.chip-bad   { background: var(--bad-tint); color: var(--bad); }
.chip-info  { background: var(--info-tint); color: var(--info); }
.chip-idle  { background: var(--idle-tint); color: var(--idle); }
/* solid: the lifecycle words that must pop (Active, Live, Warming, Watch, Banned, Kill,
   Failed, Low) take the solid of their status, white text (5.02 to 5.62:1, day and night) */
.chip-solid.chip-ok   { background: var(--ok-solid); color: var(--on-solid); }
.chip-solid.chip-warn { background: var(--warn-solid); color: var(--on-solid); }
.chip-solid.chip-bad  { background: var(--bad-solid); color: var(--on-solid); }
/* .chip-alert: the old red chip, kept as it was on origin/main for any markup still using it
   (no view does since Tracker v2, which uses .chip-bad) */
.chip-alert { background: var(--fail-fill); color: var(--fail-label); }
/* money: REG and FTD stay green */
.chip-money { background: var(--money-tint); color: var(--money); }
.chip-ftd   { background: var(--money-solid); color: var(--on-money); }
/* identity */
.chip-meta     { background: var(--id-meta-tint); color: var(--id-meta); }
.chip-tiktok   { background: var(--id-tiktok-tint); color: var(--id-tiktok); box-shadow: inset 0 0 0 1px var(--id-tiktok-edge); }
.chip-bot      { background: var(--id-bot-tint); color: var(--id-bot); }
.chip-dm       { background: var(--id-dm-tint); color: var(--id-dm); }
.chip-channel  { background: var(--id-channel-tint); color: var(--id-channel); }
/* external is an outline, never a filled grey: a grey fill in a status slot only ever means Off */
.chip-external { background: transparent; color: var(--id-external); box-shadow: inset 0 0 0 1px var(--edge-field); }
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: var(--fw-regular) var(--fs-label)/var(--lh-label) var(--font);
  color: var(--ink);
  white-space: nowrap;
}
.status::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  border-radius: 50%;
  background: currentColor;
}
/* the dot and its word take the status colour; off and idle show a hollow grey dot */
.status.is-ok { color: var(--ok); }
.status.is-warn { color: var(--warn); }
.status.is-bad,
.status.is-alert { color: var(--bad); }
.status.is-info { color: var(--info); }
.status.is-off,
.status.is-idle { color: var(--idle); }
.status.is-off::before,
.status.is-idle::before { background: transparent; border: 1.5px solid currentColor; }
.status.t-strong { font-weight: var(--fw-semibold); }
.row-title-line > .status { flex: none; }

/* Numbers coloured by a threshold the view already computes (Match %, C2L %, ROAS, CPL
   vs target): colour only, so the layout never moves. 4.5:1 or better on every ground. */
.num-ok   { color: var(--ok); }
.num-warn { color: var(--warn); }
.num-bad  { color: var(--bad); }

/* ---------- Card and row ----------
   A card is a raised surface: its --line edge plus the soft --shadow-card (the Tracker's
   cards, .tr-card and .tr-empty, set the same shadow in tracker.css). */
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--pop);
  color: var(--ink);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  box-sizing: border-box;
  padding: 10px 12px 10px 16px;
}
.row + .row { border-top: 1px solid var(--line); }
.row.row-compact { min-height: 52px; }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-title-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.row-title {
  font: var(--fw-semibold) var(--fs-body)/var(--lh-body) var(--font);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row-meta {
  font: var(--fw-regular) var(--fs-label)/var(--lh-label) var(--font);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row-actions { flex: none; display: flex; align-items: center; gap: 8px; }

/* ---------- Folders (the Account Pool pattern, for the content views) ----------
   .fold-list stacks the groups. A folder is a .card.fold: a head with its toggle button
   (chevron, folder icon, name, count) and a More button, then its rows in .fold-body.
   The items in no folder follow a .group-head ("No Folder") in a .card.list-root, which
   shows its data-empty text while it holds nothing. Folders and the root take drops
   (.is-drop-target). The names avoid the old night layer's .folder-card and .folder-head. */
.fold-list { display: flex; flex-direction: column; gap: 12px; }
.fold { transition: box-shadow .12s ease; }
.fold-head { display: flex; align-items: center; gap: 4px; padding: 0 8px 0 0; }
.fold-toggle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 48px;
  box-sizing: border-box;
  padding: 0 8px 0 12px;
  border: 0;
  border-radius: var(--radius-card) 0 0 var(--radius-card);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.fold-toggle:hover { background: var(--hover); }
.fold-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.fold-toggle .ic { color: var(--ink-2); }
.fold-toggle .fold-chev { display: flex; transition: transform .15s ease; }
.fold-toggle[aria-expanded="false"] .fold-chev { transform: rotate(-90deg); }
.fold-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--fw-semibold) var(--fs-body)/var(--lh-body) var(--font); }
.fold-count { flex: none; font: var(--fw-regular) var(--fs-label)/var(--lh-label) var(--font); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fold-body { border-top: 1px solid var(--line); }
.fold-body[hidden] { display: none; }
.fold-note { margin: 0; padding: 14px 16px; font: var(--fw-regular) var(--fs-label)/var(--lh-label) var(--font); color: var(--ink-2); }
.group-head { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 -4px; padding: 0 4px; }
.group-title { margin: 0; font: var(--fw-semibold) var(--fs-label)/var(--lh-label) var(--font); color: var(--ink); }
.group-count { font: var(--fw-regular) var(--fs-label)/var(--lh-label) var(--font); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.list-root { min-height: 48px; }
.list-root:empty::after { content: attr(data-empty); display: block; padding: 14px 16px; font: var(--fw-regular) var(--fs-label)/var(--lh-label) var(--font); color: var(--ink-2); }
.fold.is-drop-target,
.list-root.is-drop-target { box-shadow: inset 0 0 0 2px var(--reply), var(--shadow-card); background: var(--reply-tint); }

/* ---------- List states: skeleton, inline error with Try Again, empty ----------
   A failed first load shows .list-error in place of the list; a failed refresh shows it
   above the last good list, which stays. */
.list-skel { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--pop); box-shadow: var(--shadow-card); overflow: hidden; }
.list-skel-row { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 16px; }
.list-skel-row + .list-skel-row { border-top: 1px solid var(--line); }
.list-skel-bar { display: block; height: 12px; border-radius: 4px; background: var(--skeleton-a); animation: list-pulse 1.2s ease-in-out infinite alternate; }
.list-skel-col { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.list-skel-col .list-skel-bar:first-child { width: 180px; max-width: 70%; height: 14px; }
.list-skel-col .list-skel-bar:last-child { width: 300px; max-width: 90%; }
.list-skel-wide { width: 220px; height: 28px; border-radius: 6px; }
.list-skel-btn { width: 48px; height: 28px; border-radius: var(--radius-control); }
@keyframes list-pulse { from { background: var(--skeleton-a); } to { background: var(--skeleton-b); } }
.list-error {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0 0 16px;
  padding: 8px 8px 8px 12px;
  border-radius: var(--radius-control);
  background: var(--fail-fill);
  color: var(--fail-label);
  font: var(--fw-semibold) var(--fs-label)/var(--lh-label) var(--font);
}
.list-error > .ic { flex: none; }
.list-error-text { flex: 1 1 240px; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.list-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 24px; }
.list-empty-title { margin: 0; font: var(--fw-semibold) var(--fs-body)/var(--lh-body) var(--font); color: var(--ink); }
.list-empty-text { margin: 0 0 12px; font: var(--fw-regular) var(--fs-label)/var(--lh-label) var(--font); color: var(--ink-2); }
@media (max-width: 767px) {
  .list-skel-wide { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .list-skel-bar { animation: none; }
  .fold, .fold-toggle .fold-chev { transition: none; }
}

/* ---------- Page header and section header ---------- */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}
.page-head-text { min-width: 0; }
/* Sub tabs of a section (Sites: Funnels, Landing Pages, Apps), the look of Media Lab's tool
   tabs: quiet links on a rule, the open one tinted with its edge. The info pair is the reply
   blue by day (5.21:1) and stays readable by night (6.14:1; reply on its tint is 3.94:1). */
.cf-subtabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 24px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.cf-page.cf-canvas .cf-subtabs .btn,
.cf-subtabs .btn { background-color: transparent; border-color: transparent; box-shadow: none; color: var(--ink-2); }
.cf-page.cf-canvas .cf-subtabs .btn[aria-current],
.cf-subtabs .btn[aria-current] { background-color: var(--info-tint); border-color: var(--info); color: var(--info); }
@media (max-width: 767px) { .cf-subtabs { margin-bottom: 16px; } }
.page-title { margin: 0; font: var(--fw-semibold) var(--fs-title)/var(--lh-title) var(--font); color: var(--ink); }
.page-sub { margin: 0; font: var(--fw-regular) var(--fs-label)/var(--lh-label) var(--font); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.page-actions { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  min-height: 32px;
}
.section-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.section-title { margin: 0; font: var(--fw-semibold) var(--fs-section)/var(--lh-section) var(--font); color: var(--ink); }
.section-sub { margin: 4px 0 0; font: var(--fw-regular) var(--fs-label)/var(--lh-label) var(--font); color: var(--ink-2); }

/* ---------- Toast: one region above the dialog scrim ----------
   Same showToast(msg, type) signature. info and success are the calm ink pill,
   warning uses --warn, error uses --alert and stays until closed. */
.toast-region {
  position: fixed;
  top: 64px;
  left: 50%;
  z-index: 10002;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100vw - 32px);
  transform: translateX(-50%);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  padding: 10px 14px;
  border-radius: var(--radius-card);
  background: var(--ink);
  color: var(--bg);
  box-shadow: var(--shadow-pop);
  font: var(--fw-semibold) var(--fs-label)/var(--lh-label) var(--font);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
}
.toast.is-shown { opacity: 1; transform: none; }
.toast-text { min-width: 0; overflow-wrap: anywhere; }
.toast-warning { background: var(--warn-tint); color: var(--warn); box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--warn); }
.toast-error { background: var(--alert); color: var(--on-alert); padding-right: 6px; }
.toast .icon-btn { color: inherit; margin: -4px 0; }
.toast .icon-btn:hover:not(:disabled) { background: color-mix(in srgb, currentColor 16%, transparent); color: inherit; }

/* ---------- Dialog ----------
   Restyles the one overlay pattern every dialog in the app uses (.modal-overlay >
   .modal-box > h3, body, .modal-btns). Height is capped to the viewport, the body
   scrolls, and the button row stays pinned at the bottom. Behaviour (role, focus,
   Esc, Tab trap, focus return) lives in components.js. */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--scrim);
}
.modal-box {
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 20px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--pop);
  color: var(--ink);
  box-shadow: var(--shadow-pop);
  font-family: var(--font);
  color-scheme: var(--scheme);
}
.modal-box:focus { outline: none; }
.modal-box h3 { margin: 0 0 16px; font: var(--fw-semibold) var(--fs-section)/var(--lh-section) var(--font); color: var(--ink); }
.modal-box .modal-text { margin: -8px 0 0; font: var(--fw-regular) var(--fs-label)/var(--lh-label) var(--font); color: var(--ink-2); }
.modal-box input,
.modal-box textarea,
.modal-box select {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--edge-field);
  border-radius: var(--radius-control);
  background: var(--bg);
  color: var(--ink);
  font: var(--fw-regular) var(--fs-label)/var(--lh-label) var(--font);
  outline: none;
}
.modal-box input:focus,
.modal-box textarea:focus,
.modal-box select:focus { border-color: var(--reply); box-shadow: 0 0 0 1px var(--reply); }
.modal-box input[type="checkbox"],
.modal-box input[type="radio"] { width: auto; padding: 0; accent-color: var(--reply); }
/* The rule above strips the outline from every field; boxes get the app's ring back */
.modal-box input[type="checkbox"]:focus-visible,
.modal-box input[type="radio"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: none; }
/* The date picker of the Story dialogs (flatpickr) is placed against the window while open,
   so the scrolling body never cuts it off: ui/stories.css and stPlacePicker. */
.modal-box select {
  padding-right: 32px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none' stroke='%238E8E93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8L10 12L14 8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.modal-box .input { height: var(--field-h); padding: 0 10px; }
.modal-box textarea.input { height: auto; padding: 8px 10px; }
.modal-btns {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px -20px 0;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--line);
  background: var(--pop);
}
.modal-btns button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--control-h);
  box-sizing: border-box;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--fill);
  color: var(--ink);
  font: var(--fw-semibold) var(--fs-label)/16px var(--font);
  white-space: nowrap;
  cursor: pointer;
}
.modal-btns .btn-ok { background: var(--reply); color: var(--on-reply); }
.modal-btns .btn-danger { background: var(--alert); color: var(--on-alert); }
.modal-btns button:hover:not(:disabled) { background-image: linear-gradient(var(--press-overlay), var(--press-overlay)); }
.modal-btns button:disabled { opacity: .5; cursor: default; }
.modal-btns button[aria-busy="true"] { cursor: progress; }
/* The failure of an open dialog (CFUI.toast while a dialog is open): first line of
   the pinned button row, alert text on the failure ground (9.40:1 day, 7.01:1 night). */
.modal-notice {
  flex: 1 0 100%;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: var(--radius-control);
  background: var(--fail-fill);
  color: var(--fail-label);
  font: var(--fw-semibold) var(--fs-label)/var(--lh-label) var(--font);
}
.modal-notice > .ic { margin-top: 1px; }
.modal-notice-text { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .modal-box input, .modal-box textarea, .modal-box select { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}