/* =============================================================================
 * ux-settings.css — Settings + global form refinements (UX_AUDIT_100).
 * -----------------------------------------------------------------------------
 * Owner: Markup engineer. Loaded LAST (after styles.css + studio-v2.css) from
 * index.html <head>, so every rule here is purely ADDITIVE and wins on equal
 * specificity via cascade order. No JS depends on these styles.
 *
 * All colours reuse the design tokens from styles.css :root
 * (--ink/--ink-soft/--ink-faint, --line, --card, --surface-soft, --blue/
 * --blue-tint/--blue-dark, --radius*, --t-fast). Dark mode is handled either by
 * those tokens re-defining themselves under :root[data-theme="dark"]
 * (studio-v2.css) or by the explicit [data-theme="dark"] rules below.
 *
 * Items implemented:
 *   #47  Prefs controls (default-status + schedule-time) → tidy 2-col grid.
 *   #51  Global <select> consistency → min-width + caret affordance (the caret
 *        SVG itself already ships in styles.css/studio-v2.css; here we just add a
 *        consistent min-width and harden the box, scoped so native/FullCalendar
 *        widgets are never touched).
 *   #53  Prefs "Default platforms" checkboxes → labeled toggle PILLS (CSS-only,
 *        driven by :has(input:checked) so the native checkbox state still works).
 *   #28  Token "Where do I find this?" affordance styling.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * #47 — Preferences: two-column grid for default-status + schedule-time.
 * The base .field-row is a flex-wrap row (styles.css); on the prefs card we want
 * a deterministic 2-col grid that collapses to 1 col on narrow screens. The
 * timezone picker (#pref-tz-picker) is a separate full-width .field and stays
 * full-width by design (it is a searchable multi-select), so this grid scopes to
 * the status/time pair only.
 * -------------------------------------------------------------------------- */
.field-row--prefs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  align-items: start;
}
/* Reset the flex sizing the base .field-row > .field rule applies, so the grid
   tracks (not flex-basis) own the sizing. */
.field-row--prefs > .field {
  flex: initial;
  min-width: 0;
  margin: 0;
}
@media (max-width: 560px) {
  .field-row--prefs {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------------------------
 * #51 — <select> consistency.
 * styles.css already gives selects appearance:none + a custom caret SVG, and
 * studio-v2.css re-tints that caret for dark mode. The only gaps are a
 * consistent min-width (so a select never collapses narrower than its inputs)
 * and a small affordance polish. Scope strictly to OUR form selects — the
 * `.input` utility class and selects that live inside a labelled `.field` /
 * `.field-row` — so FullCalendar's toolbar and any native browser widgets keep
 * their own sizing.
 * -------------------------------------------------------------------------- */
select.input,
.field > select,
.field-row select,
.section-head select,
.feed-toolbar select {
  min-width: 168px;
}
/* Keep the caret clickable region tidy and the closed select from looking
   cramped. (Caret image + appearance:none already set upstream.) */
select.input,
.field > select,
.field-row select {
  text-overflow: ellipsis;
}
/* Filter selects that sit inside a fixed-width toolbar shouldn't be forced wide
   on small screens — let them shrink below the min-width when space is tight. */
@media (max-width: 560px) {
  select.input,
  .field > select,
  .field-row select,
  .section-head select,
  .feed-toolbar select {
    min-width: 0;
  }
}

/* -----------------------------------------------------------------------------
 * #53 — "Default platforms" checkboxes → labeled toggle pills.
 * The markup is unchanged checkboxes wrapped in <label class="check"> inside
 * .pref-platforms. We restyle the label as a pill and drive the selected state
 * purely from the native checkbox via :has(input:checked) — no JS, the existing
 * read/write of [name=prefPlatforms] in app.js keeps working untouched.
 * Mirrors the existing .chip pill vocabulary in styles.css for visual
 * consistency with the rest of the UI.
 * -------------------------------------------------------------------------- */
.pref-platforms {
  gap: 8px;
}
.pref-platforms .check {
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), box-shadow var(--t-fast);
}
.pref-platforms .check:hover {
  border-color: #c4d2df;
}
/* The native box stays visible and operable; it reads as the pill's status dot. */
.pref-platforms .check input {
  width: 14px;
  height: 14px;
  accent-color: var(--blue);
}
/* Selected pill = filled blue tint + blue text/border (matches .chip.selected). */
.pref-platforms .check:has(input:checked) {
  background: var(--blue-tint);
  border-color: var(--blue);
  color: var(--blue);
}
/* Keyboard focus affordance on the pill (the input is small; surface it). */
.pref-platforms .check:focus-within {
  box-shadow: 0 0 0 3px rgba(10, 102, 194, 0.18);
  border-color: var(--blue);
}

/* Dark-mode: --card / --blue-tint already re-tint via tokens, but nudge the
   hover border so it reads against the darker surface. */
:root[data-theme="dark"] .pref-platforms .check:hover {
  border-color: #3a4a5b;
}

/* -----------------------------------------------------------------------------
 * #28 — Token "Where do I find this?" affordance.
 * A subtle <details> beneath the token hint. Keeps the summary quiet (looks like
 * a hint link) and reveals a one-line explainer on open. No JS.
 * -------------------------------------------------------------------------- */
.token-help {
  margin-top: 6px;
}
.token-help > summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color var(--t-fast);
}
.token-help > summary::-webkit-details-marker {
  display: none;
}
/* A small disclosure chevron that rotates open (consistent with the app's
   expandable affordances — audit #60/#62). */
.token-help > summary::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--t-fast);
  opacity: 0.85;
}
.token-help[open] > summary::before {
  transform: rotate(45deg);
}
.token-help > summary:hover {
  color: var(--blue-dark);
  text-decoration: underline;
}
.token-help > summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}
.token-help > .hint {
  margin: 6px 0 0;
  max-width: 56ch;
}
:root[data-theme="dark"] .token-help > summary:hover {
  color: #6db1f2;
}

/* ---- Settings → Brands ------------------------------------------------------ */
.brands-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.brand-row { border: 1px solid var(--line, #e2e8f0); border-radius: 10px; padding: 10px 12px; }
.brand-row__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.brand-row__name { flex: 1 1 220px; min-width: 0; font-weight: 700; }
.brand-row__accounts { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.brand-row__acct {
  font-size: 11px; padding: 1px 8px; border-radius: 999px;
  border: 1px solid var(--line, #cbd5e1); color: var(--ink-soft, #5b6b7b);
}
.brand-row__brief { width: 100%; resize: vertical; }
.brand-row__actions { margin-top: 6px; align-items: center; gap: 8px; }
.brand-row__fd { margin: 4px 0 2px; font-size: 12px; gap: 8px; flex-wrap: wrap; }
.brand-row__fd select { max-width: 100%; }
\n.credits-ledger { margin-top: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--ink-soft, #5b6b7b); }\n.credits-ledger__row { white-space: pre; overflow: hidden; text-overflow: ellipsis; }\n
.brand-row__seed { margin: 6px 0 2px; font-size: 12px; }
.brand-row__seed-opts { align-items: center; gap: 6px; margin: 4px 0 0 24px; }
.brand-row__seed-opts select { max-width: 100%; }