/* Champ TV admin — dark-first mono streamer chrome.
   System fonts only. No CDN, no frameworks. Tokens once, used everywhere. */

/* The hidden attribute always wins. Any rule that sets display on a class
   (.search-row's flex, etc.) silently defeats hidden without this — which is
   exactly how the rules-target switcher kept showing on the zero-provider
   live box after W22 hid it. */
[hidden] { display: none !important; }

:root {
  --bg: #0b0d10;
  --panel: #12151a;
  --panel-elev: #171b21;
  --ink: #eef1f5;
  --muted: #8b93a1;
  --line: #232935;
  --line-soft: #1c212b;
  --accent: #6d8dff;
  --accent-ink: #ffffff;
  --accent-soft: #202b4a;
  --danger: #e5684f;
  --ok: #46b17b;
  --live: #6d8dff;
  --marker: #1a1f29;
  --row: #0e1116;
  --row-hover: #161b23;
  --sheet: #0c0e12;
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.45);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-xs: 0.72rem;
  --text-sm: 0.85rem;
  --text-md: 0.95rem;
  --text-lg: 1.15rem;
  --text-xl: 1.55rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  --radius: 8px;
  --radius-sm: 4px;
  --touch: 44px;
  --header-h: 3.5rem;
  /* Reading measure. Prose and page-head text stay inside it; data does not. */
  --content-max: 84rem;
  /* The app column itself. Wide enough that a 1440p or 4K monitor shows no
     gutters at all — the old 84rem/100rem caps read as a phone layout
     stretched onto a desktop. */
  --shell-max: 148rem;
  --sidebar-w: 15rem;
  --gutter: 2rem;
  --ease: 160ms ease;
  --ease-out: 180ms ease-out;
}

* { box-sizing: border-box; }

/* Bare content links pick up the theme instead of browser blue. Tabs,
   buttons and button-links all set their own colors and win on specificity. */
a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--ink); }

html, body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(900px 480px at 8% -12%, #151a24 0%, transparent 55%),
    radial-gradient(700px 420px at 100% 0%, #12161f 0%, transparent 48%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg) 40%);
  color: var(--ink);
  font: var(--text-md)/1.45 var(--font);
  overflow-wrap: anywhere;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { margin: 0.15rem 0 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h3 {
  font-size: var(--text-xs);
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

code { font-family: var(--mono); font-size: 0.9em; word-break: break-all; }
.tabular { font-variant-numeric: tabular-nums; font-family: var(--mono); }

.brand,
.wordmark {
  margin: 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink);
}

.wordmark {
  font-size: 0.92rem;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

/* -- chrome: fixed left rail + page column --------------------------------- */

/* The rail is fixed so the sticky header, the sticky editor strip and every
   `top: var(--header-h)` offset keep measuring against the viewport. The
   shell only reserves the space. */
.app-shell {
  min-height: 100vh;
  display: flow-root;
}

.side-nav {
  /* Mobile default: the nav sheet is the only nav. Never carries [hidden],
     so this display rule cannot fight the global hidden rule. */
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  z-index: 50;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-3);
  background: linear-gradient(180deg, #0d1015 0%, var(--sheet) 100%);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.side-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.25rem;
  padding: 0 0.7rem;
}
.side-mark {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  /* The mark carries its own glow; a soft drop keeps it seated on the rail. */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}
.side-nav-label {
  margin: var(--space-2) 0 0.2rem;
  padding: 0 0.7rem;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.side-foot {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
}
.side-foot .logout button { width: 100%; }

@media (min-width: 900px) {
  .app-shell { padding-left: var(--sidebar-w); }
  .side-nav { display: flex; }
}

.side-nav .nav-groups,
.side-nav .tabs {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 0;
  border-bottom: none;
}
.side-nav a.tab,
.side-nav .tab {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: 500;
}
.side-nav a.tab:hover { color: var(--ink); background: var(--row-hover); }
.side-nav a.tab.active,
.side-nav .tab.active {
  color: var(--accent);
  background: var(--accent-soft);
}
.nav-icon {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}

.site-header,
.top {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  min-height: var(--header-h);
  padding: 0.55rem var(--gutter);
  background: rgba(11, 13, 16, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.identity { min-width: 0; }
.page-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The rail already carries the wordmark on desktop. Below the rail
   breakpoint it comes back, on the same line as the page title so the phone
   header stays one row tall. */
.identity .wordmark { display: none; }
@media (max-width: 899px) {
  .identity {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
  }
  .identity .wordmark { display: block; flex: 0 0 auto; }
  .identity .page-title { font-size: var(--text-md); }
}

.snapshot { margin: 0.15rem 0 0; color: var(--muted); font-size: var(--text-sm); }
.live-status { margin: 0.15rem 0 0; color: var(--muted); font-size: var(--text-sm); }
.live-status.warn { color: var(--accent); }
.live-status:empty { margin: 0; }

/* -- page header band ------------------------------------------------------
   Where the stats lede used to float unattached at the far top-left. It now
   sits in a band under the header with the step nav, reading as one header. */
.page-head {
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(23, 27, 33, 0.55), transparent);
}
.page-head-inner {
  max-width: min(var(--shell-max), 100%);
  margin: 0 auto;
  padding: var(--space-4) var(--gutter) 0;
  width: 100%;
}
.page-head-text { max-width: var(--content-max); }
/* A band with no step nav under it closes itself. */
.page-head--plain .page-head-inner { padding-bottom: var(--space-4); }

.spa-lede {
  margin: 0;
  padding: 0;
  width: 100%;
}
.spa-lede .snapshot,
.spa-lede .live-status { margin: 0.1rem 0; }
.spa-lede .live-status:empty { display: none; }

.actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.actions a.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  text-decoration: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-sm);
}
.actions a.button-link:hover { color: var(--ink); border-color: var(--accent); }

/* Global provider lane chip (header). One control for every admin page. */
.provider-chip-host {
  display: flex;
  align-items: center;
  min-width: 0;
}
.provider-chip {
  position: relative;
  min-width: 0;
}
.provider-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: min(18rem, 46vw);
  min-height: 2.25rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel, rgba(23, 27, 33, 0.9));
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.provider-chip-btn:hover,
.provider-chip-btn[aria-expanded="true"] {
  border-color: var(--accent);
}
.provider-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-chip-note {
  flex: 0 0 auto;
  font-size: var(--text-xs, 0.75rem);
  font-weight: 500;
  color: var(--muted);
}
.provider-chip-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 60;
  min-width: max(100%, 14rem);
  max-width: min(22rem, 90vw);
  padding: 0.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg, #0b0d10);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.provider-chip-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: calc(var(--radius-sm) - 2px);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.provider-chip-option:hover { background: var(--accent-soft, rgba(109, 141, 255, 0.12)); }
.provider-chip-option.is-active {
  background: var(--accent-soft, rgba(109, 141, 255, 0.18));
  font-weight: 600;
}
.provider-chip-option-name { line-height: 1.25; }
.provider-chip-option-note {
  font-size: var(--text-xs, 0.75rem);
  color: var(--muted);
  font-weight: 500;
}
.editor-status .lane-strip {
  margin-right: 0.35rem;
}
.editor-status .lane-strip strong {
  font-weight: 700;
}

.chip {
  font-size: var(--text-xs);
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  white-space: nowrap;
}
.chip.warn {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--touch);
  height: var(--touch);
  padding: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  border-radius: var(--radius-sm);
}
.nav-toggle svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.75; }

.nav-sheet {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--sheet);
  padding: var(--space-4);
  overflow-y: auto;
}
.nav-sheet.is-open { display: flex; flex-direction: column; gap: var(--space-4); }
.nav-sheet-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--touch);
}
.nav-sheet .tabs {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  padding: 0;
}
.nav-sheet .tab,
.nav-sheet a.tab,
.nav-sheet button.tab {
  min-height: var(--touch);
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
  width: 100%;
  text-align: left;
}

.tabs,
.nav-groups {
  display: flex;
  gap: 0.25rem;
  padding: 0;
  flex-wrap: wrap;
}
.nav-groups {
  align-items: stretch;
  flex-direction: column;
  gap: 2px;
}

/* Legacy group chrome kept for the SPA until W19-B. */
.nav-group {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.nav-group-label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 0.9rem;
}
.nav-group-links {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font-weight: 500;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius);
  cursor: pointer;
  font: inherit;
}
.tab[aria-selected="true"],
.tab.active,
a.tab.active {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: transparent;
}
a.tab {
  text-decoration: none;
  display: inline-block;
}

main,
.members-main {
  padding: var(--space-5) var(--gutter) var(--space-7);
  max-width: min(var(--shell-max), 100%);
  margin: 0 auto;
  width: 100%;
}
.members-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* First panel on a page already sits under the header band. */
.members-main > .panel:first-child,
main > .panel:first-child { margin-top: 0; }

/* Every admin surface is a real desktop column now; the modifier survives so
   markup and tests that name it keep working. */
.wrap--wide,
main.wrap--wide,
.spa-steps.wrap--wide,
.status.wrap--wide,
.spa-lede.wrap--wide {
  max-width: min(var(--shell-max), 100%);
}
.spa-lede.wrap--wide { max-width: var(--content-max); }

.status {
  min-height: 1.4rem;
  margin: 0.75rem auto 0;
  padding: 0 var(--gutter);
  max-width: min(var(--shell-max), 100%);
  width: 100%;
  color: var(--muted);
  font-size: var(--text-sm);
}
.status.ok { color: var(--ok); }
.status.err { color: var(--danger); }
/* A server flash the toast has taken over: gone from view, still there for
   screen readers (display:none would silence the live region). */
.status.flash-absorbed {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  margin: 0;
}

.panel {
  /* A faint top light instead of a flat fill — surfaces read as lit, not
     painted. Kept to 1.5% so text contrast is untouched. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 4.5rem),
    var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-top: 1.1rem;
  padding: 1rem 1.1rem 1.15rem;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02);
}
.panel.nested {
  margin-top: 1.25rem;
  background: var(--row);
}
.panel-disclosure > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
}
.panel-disclosure > summary::marker {
  color: var(--muted);
}
.panel-disclosure[open] > summary {
  margin-bottom: 1rem;
}

.panel-head p, .hint {
  margin: 0.35rem 0 0.9rem;
  color: var(--muted);
  max-width: 54rem;
  font-size: var(--text-sm);
}
.page-lede {
  margin: 0.35rem 0 1rem;
  color: var(--muted);
  max-width: 42rem;
  font-size: var(--text-md);
  line-height: 1.5;
}

.empty-state {
  margin: var(--space-4) 0;
  padding: var(--space-5);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--row);
  color: var(--muted);
  text-align: left;
}
.empty-state p { margin: 0 0 var(--space-3); color: var(--ink); }
.empty-state .actions-row { margin-top: 0; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.channels-filter { margin: 0 0 var(--space-4); }
.channels-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
}
.channels-filter-row .field.grow { flex: 1 1 12rem; min-width: 10rem; }
.channels-filter-row .field { margin: 0; }
.channels-count { margin: 0 0 var(--space-3); color: var(--muted); }
.channels-source {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
}
.page-footer-links {
  margin: var(--space-5) 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.watch-hero {
  margin: var(--space-4) 0;
  background:
    linear-gradient(135deg, rgba(109, 141, 255, 0.07), transparent 45%),
    var(--row);
  border-color: #2a3140;
}
.watch-hero-hint {
  margin: var(--space-4) 0;
  color: var(--muted);
  font-size: var(--text-sm);
}
.watch-hero-hint p { margin: 0; }
.watch-hero-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: flex-start;
  justify-content: space-between;
}
.watch-hero-main { flex: 1 1 18rem; min-width: 0; }
/* The handout card keeps its own panel chrome on the wizard-done and member
   pages, but inside the hero a box-in-a-box reads as clutter — flatten it. */
.watch-hero #member-handout {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin-top: var(--space-3);
}
.watch-hero #member-handout > h2 { font-size: var(--text-md); color: var(--muted); font-weight: 600; }
.watch-hero .eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.operator-qr {
  flex: 0 0 auto;
  max-width: 10rem;
  margin-left: auto;
  padding: 0.45rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}
.operator-qr svg {
  display: block;
  width: 9rem;
  height: auto;
  border-radius: var(--radius-sm);
}
.operator-tag { margin: 0 0 var(--space-3); }
.operator-claim { margin: 0 0 var(--space-3); }
.operator-claim-hint {
  display: inline-block;
  margin-left: 0.55rem;
  font-size: var(--text-sm);
  vertical-align: middle;
}

@media (max-width: 720px) {
  .operator-qr {
    margin-left: 0;
    max-width: 8rem;
  }
}

button {
  appearance: none;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 600;
  padding: 0.5rem 0.95rem;
  min-height: 2.35rem;
  cursor: pointer;
  border-radius: var(--radius);
}
button:disabled { opacity: 0.4; cursor: not-allowed; }
button.ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
  font-weight: 500;
}
button.ghost:hover:not(:disabled) { color: var(--ink); border-color: var(--accent); }
button.danger { background: transparent; color: var(--danger); border-color: var(--danger); }
button.danger:hover:not(:disabled) { background: rgba(229, 104, 79, 0.12); }
button.publish {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
button.publish:hover:not(:disabled) { filter: brightness(1.1); }

/* SPA Rules sub-steps: underline active, not a second pill nav. Inside the
   page-head band they read as the header's own tab strip. */
.spa-steps {
  display: flex;
  gap: 0.1rem;
  padding: var(--space-3) var(--gutter) 0;
  flex-wrap: wrap;
  max-width: min(var(--shell-max), 100%);
  margin: 0 auto;
  width: 100%;
}
.page-head .spa-steps { padding-left: 0; padding-right: 0; }
.spa-step {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 0.5rem 0.7rem 0.45rem;
  margin-bottom: -1px;
}
.spa-step:hover { color: var(--ink); }
.spa-step[aria-selected="true"],
.spa-step.active {
  color: var(--accent);
  background: transparent;
  border-bottom-color: var(--accent);
}
.spa-crumb {
  margin: 0.85rem 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
}
.nav-sheet-sublabel {
  margin: 0.85rem 0 0.25rem;
  padding: 0 0.9rem;
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  width: 100%;
}
.nav-sheet .spa-step {
  display: block;
  width: 100%;
  text-align: left;
  border-bottom: none;
  border-radius: var(--radius);
  padding: 0.85rem 0.9rem;
  min-height: var(--touch);
  font-size: var(--text-md);
}
.nav-sheet .spa-step[aria-selected="true"],
.nav-sheet .spa-step.active {
  color: var(--accent);
  background: var(--accent-soft);
  border-bottom: none;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

input, select, textarea {
  font: inherit;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line);
  background: var(--row);
  color: var(--ink);
  border-radius: var(--radius-sm);
  width: 100%;
  max-width: 100%;
}
input[type="checkbox"],
input[type="radio"] { width: auto; }

/* -- group order ---------------------------------------------------------- */

.group-list { list-style: none; margin: 0; padding: 0; }
.group-list > li {
  display: grid;
  grid-template-columns: 1.4rem 2.2rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: center;
  padding: 0.5rem 0.65rem;
  background: var(--row);
  border: 1px solid transparent;
  border-bottom-color: var(--line);
  cursor: grab;
  border-radius: var(--radius-sm);
}
.group-list > li:hover { background: var(--row-hover); }
.group-list > li.dragging { opacity: 0.45; }
.group-list > li.drag-over { border-color: var(--accent); }
.group-list > li:focus-visible { background: var(--row-hover); }
.group-list > li.marker {
  align-items: start;
  background: var(--marker);
  border-color: var(--line);
}

.handle { color: var(--muted); font-family: var(--mono); user-select: none; }
.position { color: var(--muted); font-family: var(--mono); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }

/* Name + controls can stack as intact rows; never letter-wrap. */
.group-row-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  min-width: 0;
}
.group-list .name {
  font-weight: 550;
  min-width: 0;
  flex: 1 1 10rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  word-break: normal;
}
/* Wrap rather than nowrap: the Group order column is ~300px inside the three
   column Arrange view, and a nowrap row let "Let it float" spill out under the
   Channels panel, where it read as a truncated button. */
.group-row-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  flex: 0 1 auto;
  min-width: 0;
}
.count {
  font-family: var(--mono);
  color: var(--muted);
  font-size: var(--text-sm);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.nudge { display: flex; flex-wrap: nowrap; gap: 0.2rem; }
.nudge button {
  padding: 0.1rem 0.45rem;
  font-size: var(--text-sm);
  line-height: 1.3;
  min-height: 2rem;
  white-space: nowrap;
}

.floating {
  margin: 0.45rem 0 0;
  padding: 0.4rem 0.5rem;
  list-style: none;
  border-left: 2px solid var(--accent);
  color: var(--muted);
  font-size: var(--text-sm);
}
.floating li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.15rem 0.6rem;
  padding: 0.15rem 0;
}
.floating button { padding: 0.1rem 0.5rem; font-size: 0.78rem; min-height: 1.8rem; }

.marker-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 0.2rem;
}

.pins { list-style: none; margin: 0; padding: 0; }
.pins li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem 1rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
}
.pins .why { color: var(--muted); font-size: var(--text-sm); }

/* -- playlist editor ------------------------------------------------------ */

.playlist-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.rules-workspace-main { container-type: inline-size; }

@container (min-width: 58rem) {
  .playlist-shell {
    grid-template-columns: 15rem minmax(0, 1fr);
  }
  .group-nav-chips { display: none !important; }
  .group-nav-side { display: block !important; }
}

.group-nav-side {
  display: none;
  position: sticky;
  top: calc(var(--header-h) + 4.5rem);
  max-height: calc(100vh - 8rem);
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.group-nav-side h3 { margin-bottom: var(--space-2); }
.group-nav-side button {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink);
  font-weight: 500;
  text-align: left;
  padding: 0.55rem 0.6rem;
  min-height: 2.5rem;
  border-radius: var(--radius-sm);
}
.group-nav-side button:hover,
.group-nav-side button.is-active {
  background: var(--row-hover);
  border-color: var(--line);
}
.group-nav-side .count { flex-shrink: 0; }

.group-nav-chips {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.15rem 0 var(--space-2);
  scrollbar-width: thin;
}
.group-nav-chips button {
  flex: 0 0 auto;
  background: var(--row);
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 500;
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
  min-height: 2.4rem;
  white-space: nowrap;
}
.group-nav-chips button.is-active {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

.editor-status {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-3);
  padding: 0.65rem 0.85rem;
  background: rgba(22, 22, 24, 0.94);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
}
.editor-status .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  color: var(--muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.editor-status .meta strong { color: var(--ink); font-weight: 600; }

.playlist-search-sticky {
  position: sticky;
  top: calc(var(--header-h) + 3.35rem);
  z-index: 25;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}
.search-clear-wrap {
  position: relative;
  flex: 1 1 12rem;
  min-width: 0;
}
.search-clear-wrap input { padding-right: 2.6rem; }
.search-clear {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.1rem;
  height: 2.1rem;
  min-height: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
}
.search-clear:hover { color: var(--ink); background: var(--row-hover); }
.search-clear[hidden] { display: none !important; }

/* Three grids nest here: the workspace splits off the member preview, the
   shell splits off the group rail, and the editor splits Group order from
   Channels. Sizing the inner two off the viewport meant a 1280px window
   satisfied all three breakpoints and left the Channels panel 42px wide, so
   the inner two ask their own container how much room they actually got. */
.playlist-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  margin-top: 1.25rem;
}
.playlist-editor > .panel { margin-top: 0; }

.playlist-shell-main { container-type: inline-size; min-width: 0; }

@container (min-width: 52rem) {
  .playlist-editor { grid-template-columns: minmax(320px, 1fr) minmax(0, 1.4fr); }
}

.tag.generated {
  color: var(--accent);
  border-color: var(--accent);
  margin-left: 0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
}

.search-row.wrap { flex-wrap: wrap; }
.check.inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.bulk-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0.6rem 0;
  padding: 0.55rem 0.65rem;
  background: var(--row);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.bulk-row input[type="text"] { min-width: 12rem; flex: 1 1 10rem; width: auto; }

.table-wrap {
  max-height: 62vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.channel-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.channel-table th, .channel-table td {
  padding: 0.45rem 0.55rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.channel-table th {
  position: sticky;
  top: 0;
  background: var(--panel);
  color: var(--muted);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  z-index: 1;
}
.channel-table tbody tr:hover { background: var(--row-hover); }
.channel-table tbody tr.selected { background: var(--accent-soft); }
.channel-table .sub { color: var(--muted); font-size: 0.82rem; }
.channel-table .group-badge {
  display: inline-block;
  font-size: var(--text-xs);
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.channel-actions button {
  min-height: 2rem;
  padding: 0.25rem 0.55rem;
  font-size: var(--text-xs);
}

/* Bottom sheet for move-to-group on mobile */
.bottom-sheet {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  padding: 0;
}
.bottom-sheet[hidden] { display: none !important; }
.bottom-sheet-panel {
  width: min(100%, 32rem);
  max-height: min(78vh, 36rem);
  overflow: auto;
  background: var(--panel-elev);
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  padding: var(--space-4);
  box-shadow: var(--shadow);
  animation: sheet-up 180ms ease-out;
}
.bottom-sheet-panel h2 { margin-bottom: var(--space-2); }
.bottom-sheet-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
}
.bottom-sheet-list button {
  width: 100%;
  justify-content: space-between;
  display: flex;
  background: var(--row);
  border: 1px solid var(--line);
  color: var(--ink);
  margin-bottom: var(--space-2);
  text-align: left;
  min-height: var(--touch);
}

@keyframes sheet-up {
  from { transform: translateY(18px); opacity: 0.6; }
  to { transform: translateY(0); opacity: 1; }
}

/* -- member layout editor ------------------------------------------------- */

/* Rearranging a playlist, not editing a table of overrides. Every rule below
   spends the existing tokens: one accent, an 8px rhythm, motion only where it
   confirms something the operator just did.

   Two standing traps in here. (1) `[hidden]` must keep winning, so nothing
   that ever carries the attribute — #layout-panel, #hidden-section,
   #group-list, #channel-search-results, #layout-loading, #preview-foot —
   gets a `display` declaration through its class. (2) `.row-actions` is
   already taken by the members table; the editor namespaces its own row
   parts under `layout-`. */

.layout-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  font-size: var(--text-xs);
  color: var(--muted);
  background: var(--marker);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  text-decoration: none;
}
.layout-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}
a.layout-badge:hover {
  color: var(--ink);
  border-color: var(--accent);
}

.layout-section-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* The People table's Layout column is a single fact; let it keep one line.
   Only while it is a real table — below the breakpoint the rows become
   cards and nowrap would push them sideways. */
@media (min-width: 900px) {
  .members-table td[data-label="Layout"] { white-space: nowrap; }
}

/* The page head explains once; prose gets a reading measure so it stops
   stretching to the full 1500px column and out-shouting the editor. */
.layout-explain { max-width: 62ch; }

.layout-floor {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-variant-numeric: tabular-nums;
}
.layout-floor::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ok);
  flex: 0 0 auto;
}
.layout-floor:empty { display: none; }
.layout-floor.warn { color: var(--danger); }
.layout-floor.warn::before { background: var(--danger); }

/* -- the two columns ------------------------------------------------------ */

.layout-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.layout-editor-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

/* The preview is a screen, not another editor panel: recessed instead of
   raised, so the eye reads left-to-right as cause then effect. */
.layout-preview {
  min-width: 0;
  background: var(--row);
  border-color: var(--line-soft);
}

.layout-preview-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.layout-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  flex: 0 0 auto;
}

/* The phone switcher is a real segmented control, not two loose pills.
   Declared before the desktop media query so `display: none` there wins on
   source order — the reverse silently leaks the strip onto desktop. */
.layout-mobile-tabs {
  display: flex;
  margin: var(--space-4) auto 0;
  position: sticky;
  bottom: var(--space-3);
  z-index: 2;
  width: fit-content;
  background: var(--panel-elev);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: var(--space-1);
  gap: var(--space-1);
  box-shadow: var(--shadow);
}
.layout-mobile-tabs button {
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  min-height: 2.4rem;
  padding: 0 var(--space-5);
  font-weight: 600;
  transition: background var(--ease), color var(--ease);
}
.layout-mobile-tabs .is-active {
  background: var(--accent-soft);
  color: var(--ink);
}

@media (min-width: 1100px) {
  .layout-editor {
    grid-template-columns: minmax(0, 1.45fr) minmax(19rem, 0.8fr);
    gap: var(--space-5);
  }
  .layout-mobile-tabs { display: none; }
  .layout-preview {
    position: sticky;
    top: calc(var(--header-h) + var(--space-3));
    max-height: calc(100vh - var(--header-h) - var(--space-5));
    overflow: auto;
  }
}

@media (max-width: 1099px) {
  .layout-panel.show-preview .layout-editor-main { display: none; }
  .layout-panel:not(.show-preview) .layout-preview { display: none; }
  /* Doubled class: .toast-host's own `bottom` is declared later in the file
     and would win on source order at equal specificity. */
  .toast-host.toast-host--above-tabs { bottom: 4.75rem; }
}

/* -- toolbar: title, quiet status line, filters --------------------------- */

/* flex-start, not center: the diff disclosure grows downward when opened and
   centring would drag the filters to the middle of the expanded list. */
.layout-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  align-items: flex-start;
}
.layout-toolbar-text { min-width: 0; }

/* A segmented control reads as one object; three loose bordered pills read
   as three decisions. Used by the filters and by each row's move buttons. */
.layout-seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--row);
}
.layout-seg button {
  border: none;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
  font-size: var(--text-sm);
  min-height: 2.1rem;
  padding: 0 var(--space-3);
  transition: background var(--ease), color var(--ease);
}
.layout-seg button:last-child { border-right: none; }
.layout-seg button:hover:not(:disabled) {
  background: var(--row-hover);
  color: var(--ink);
}
.layout-seg button:disabled { opacity: 0.3; }
.layout-seg .is-active {
  background: var(--accent-soft);
  color: var(--ink);
}
.layout-seg :focus-visible { outline-offset: -2px; }

/* The change count is a status line, not an alarm: muted text, a plain
   count, a chevron that only turns when it is opened. */
.diff-summary { margin-top: var(--space-1); }
.diff-summary > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--muted);
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-2) var(--space-1) 0;
  border-radius: var(--radius-sm);
  transition: color var(--ease);
}
.diff-summary > summary::-webkit-details-marker { display: none; }
.diff-summary > summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid currentColor;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  transition: transform var(--ease);
}
.diff-summary[open] > summary::before { transform: rotate(90deg); }
.diff-summary > summary:hover { color: var(--ink); }
.diff-summary.is-quiet > summary::before { opacity: 0; }
.diff-summary ul {
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--line);
  color: var(--ink);
  font-size: var(--text-sm);
}
.diff-summary li {
  padding: var(--space-1) 0 var(--space-1) var(--space-3);
  color: var(--muted);
}

/* -- the ordered group list = the editor ---------------------------------- */

.layout-group-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--row);
}

.layout-group-row {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line-soft);
  min-height: 3.25rem;
  transition: background var(--ease), box-shadow var(--ease);
}
.layout-group-row:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.layout-group-row:last-child {
  border-bottom: none;
  border-radius: 0 0 var(--radius) var(--radius);
}
.layout-group-row:hover,
.layout-group-row:focus-within { background: var(--row-hover); }

/* Empty is a state with instructions, not a blank box. */
.layout-empty-row {
  padding: var(--space-5) var(--space-4);
  color: var(--muted);
  font-size: var(--text-sm);
  text-align: center;
}

/* Changed rows are marked, not shouted at: a hairline in the accent, the
   same one the nav uses for "you are here". */
.layout-group-row.is-changed { box-shadow: inset 2px 0 0 var(--accent); }

/* Drag: the row lifts out of the list, and the gap it will land in gets a
   single accent rule. Nothing else moves, so nothing jumps. */
.layout-group-row.is-dragging {
  opacity: 0.4;
  background: var(--panel-elev);
  box-shadow: var(--shadow);
}
.layout-group-row.drop-before::after,
.layout-group-row.drop-after::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  pointer-events: none;
}
.layout-group-row.drop-before::after { top: -1px; }
.layout-group-row.drop-after::after { bottom: -1px; }

/* The settle: the row the operator just moved glows once and fades. Feedback,
   not decoration — it answers "which one did I just move?" */
.layout-group-row.just-moved { animation: row-settle 620ms ease-out; }
@keyframes row-settle {
  0% { background: var(--accent-soft); }
  100% { background: transparent; }
}

.drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  align-self: stretch;
  color: var(--line);
  cursor: grab;
  user-select: none;
  transition: color var(--ease);
}
.drag-handle svg {
  width: 12px;
  height: 16px;
  fill: currentColor;
}
.layout-group-row:hover .drag-handle,
.layout-group-row:focus-within .drag-handle { color: var(--muted); }
.drag-handle:active { cursor: grabbing; }

.layout-row-pos {
  min-width: 1.5rem;
  text-align: right;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.layout-group-main { min-width: 0; }
.layout-group-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.layout-group-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin-top: 0.1rem;
  color: var(--muted);
  font-size: var(--text-sm);
}
.layout-was {
  color: var(--muted);
  background: var(--marker);
  border-radius: var(--radius-sm);
  padding: 0 0.3rem;
  font-size: var(--text-xs);
}

.layout-row-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  justify-self: end;
}

/* Hide and Rename are borderless at rest so ten rows do not read as fifty
   boxes; they take a background the moment the row is live. */
.layout-row-action {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
  font-size: var(--text-sm);
  min-height: 2.1rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.layout-row-action:hover:not(:disabled) {
  background: var(--marker);
  color: var(--ink);
  border-color: var(--line);
}
.layout-row-action.warn { color: var(--danger); }
.layout-row-action.warn:hover:not(:disabled) {
  background: rgba(229, 104, 79, 0.12);
  border-color: var(--danger);
}

/* -- hidden groups: parked, findable, never a drop target ----------------- */

.layout-hidden { margin-top: var(--space-5); }
.layout-hidden-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.layout-hidden .hint,
.layout-panel-block .hint {
  color: var(--muted);
  font-size: var(--text-sm);
  margin: var(--space-1) 0 var(--space-3);
}

/* Dashed cards, not list rows: parked things should not look ordered. */
.layout-group-list--hidden {
  border: none;
  background: transparent;
  margin-top: var(--space-2);
}
.layout-group-list--hidden .layout-group-row {
  grid-template-columns: minmax(0, 1fr) auto;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: transparent;
  margin-bottom: var(--space-2);
  opacity: 0.8;
  transition: opacity var(--ease), border-color var(--ease);
}
.layout-group-list--hidden .layout-group-row:last-child { margin-bottom: 0; }
.layout-group-list--hidden .layout-group-row:hover {
  opacity: 1;
  border-color: var(--line);
  background: var(--row);
}
/* Restore is the only way out of this section, so it keeps its edges. */
.layout-group-list--hidden .layout-row-action {
  border-color: var(--line);
  color: var(--ink);
}

/* -- channel chips -------------------------------------------------------- */

.chip-block { margin-bottom: var(--space-4); }
.chip-block:last-of-type { margin-bottom: 0; }
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-2);
}

.layout-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.25rem 0.25rem 0.25rem 0.7rem;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--marker);
  font-size: var(--text-sm);
  transition: border-color var(--ease);
}
.layout-chip:hover { border-color: var(--line); }
.layout-chip .chip-arrow { color: var(--muted); }

.chip-x {
  border: none;
  background: transparent;
  color: var(--muted);
  min-width: 1.4rem;
  height: 1.4rem;
  min-height: 0;
  padding: 0;
  line-height: 1;
  border-radius: 50%;
  font-size: 1rem;
  transition: background var(--ease), color var(--ease);
}
.chip-x:hover {
  background: rgba(229, 104, 79, 0.16);
  color: var(--danger);
}

.chip-more {
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: var(--text-sm);
  min-height: 1.8rem;
  padding: 0 var(--space-1);
}
.chip-more:hover { text-decoration: underline; }

/* An empty state that names the next move, not just the absence. */
.chip-empty {
  color: var(--muted);
  font-size: var(--text-sm);
}

/* -- channel composer ----------------------------------------------------- */

.channel-add {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--row);
}
.channel-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
}
.channel-add-row .field { margin: 0; }
.channel-add-row .field-search { flex: 2 1 16rem; min-width: 0; }
.channel-add-row .field-group { flex: 1 1 10rem; min-width: 0; }

.channel-search-results {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-height: 17rem;
  overflow: auto;
  background: var(--panel-elev);
  box-shadow: var(--shadow);
}

.channel-search-results li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line-soft);
  transition: background var(--ease);
}
.channel-search-results li:hover,
.channel-search-results li:focus-within { background: var(--row-hover); }
.channel-search-results li:last-child { border-bottom: none; }
.channel-search-results .result-name { font-weight: 600; }
.channel-search-results .result-actions {
  display: flex;
  gap: var(--space-1);
  flex: 0 0 auto;
}
.channel-search-results .meta,
.layout-group-meta .meta { color: var(--muted); font-size: var(--text-sm); }

/* -- the preview ---------------------------------------------------------- */

.layout-preview-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.layout-preview-list > li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line-soft);
}
.layout-preview-list > li:last-child { border-bottom: none; }

.preview-head {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: baseline;
}

.preview-head .pos {
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--text-sm);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.preview-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preview-head .meta {
  color: var(--muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.preview-pins {
  list-style: none;
  margin: var(--space-1) 0 0 2.35rem;
  padding: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}
.preview-pins li {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
}
.preview-pins li::before {
  content: "\2191";
  color: var(--accent);
  flex: 0 0 auto;
}

.preview-foot {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: var(--text-sm);
}

/* -- reuse ---------------------------------------------------------------- */

.layout-reuse-actions {
  margin-bottom: var(--space-2);
  gap: var(--space-2);
}
/* Label + control + verb on one line. The generic .override-form wraps the
   button under a full-width select, which reads as four stacked forms
   instead of four one-line choices. */
.reuse-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-2) var(--space-3);
  border-top: 1px solid var(--line-soft);
  padding-top: var(--space-3);
  margin-top: var(--space-3);
}
.reuse-form:first-of-type { border-top: none; }
.reuse-form .field { margin: 0; min-width: 0; }
.reuse-form button { white-space: nowrap; }

@media (max-width: 720px) {
  .reuse-form { grid-template-columns: minmax(0, 1fr); }
  .reuse-form button { min-height: var(--touch); }
}

/* -- loading: reserve the shape so nothing jumps in --------------------- */

.layout-skeleton-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--row);
}
.layout-skeleton-list li {
  height: 3.25rem;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
}
.layout-skeleton-list li:last-child { border-bottom: none; }
.layout-skeleton-list--plain {
  border: none;
  background: transparent;
  padding: 0;
}
.layout-skeleton-list--plain li { height: 2.6rem; padding: 0; }
.layout-skeleton-bar {
  height: 0.7rem;
  width: 40%;
  border-radius: var(--radius-sm);
  background: var(--marker);
  animation: skeleton-pulse 1.6s ease-in-out infinite;
}
.layout-skeleton-list li:nth-child(2n) .layout-skeleton-bar { width: 55%; }
.layout-skeleton-list li:nth-child(3n) .layout-skeleton-bar { width: 32%; }
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* -- the standard-playlist empty state ------------------------------------ */

.layout-default-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
@media (min-width: 900px) {
  .layout-default-grid {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.65fr);
  }
}
.layout-default-copy p { max-width: 42rem; }
.layout-default-order {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--row);
}
.layout-default-order .hint { margin-bottom: var(--space-2); }

/* -- phone: the buttons are the path, and they are full-size -------------- */

@media (max-width: 720px) {
  /* Drag is a desktop nicety; on touch the handle is dead weight. The
     element never carries [hidden], so this display rule is safe. */
  .layout-group-row .drag-handle { display: none; }

  .layout-group-row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "pos main"
      "actions actions";
    row-gap: var(--space-2);
    padding: var(--space-3);
  }
  .layout-group-row .layout-row-pos { grid-area: pos; align-self: start; }
  .layout-group-row .layout-group-main { grid-area: main; }
  .layout-group-row .layout-row-actions {
    grid-area: actions;
    justify-self: stretch;
    gap: var(--space-2);
  }
  .layout-row-actions .layout-seg { flex: 0 0 auto; }
  .layout-row-actions .layout-seg button {
    min-height: var(--touch);
    min-width: var(--touch);
    padding: 0;
  }
  .layout-row-action {
    flex: 1 1 0;
    min-height: var(--touch);
    border-color: var(--line);
    background: var(--row-hover);
    color: var(--ink);
  }

  .layout-group-list--hidden .layout-group-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "main" "actions";
  }
  .layout-group-list--hidden .layout-group-row button { min-height: var(--touch); }

  .layout-toolbar { align-items: stretch; }
  .layout-filters.layout-seg { width: 100%; }
  .layout-filters.layout-seg button { flex: 1 1 0; min-height: 2.5rem; }

  .channel-add-row .field-search,
  .channel-add-row .field-group { flex: 1 1 100%; }
  .channel-search-results li { flex-wrap: wrap; }
  .channel-search-results .result-actions button { min-height: 2.5rem; }
}

/* legacy compare kept for any leftover markup */
.layout-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}
.layout-compare ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.layout-compare li {
  display: flex;
  gap: 0.6rem;
  padding: 0.35rem 0.55rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
}
.layout-compare li.diff { background: var(--accent-soft); }
.layout-compare .pos {
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--text-sm);
  min-width: 1.5rem;
  font-variant-numeric: tabular-nums;
}

.override-list { list-style: none; margin: 0; padding: 0; }
.override-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.override-list .meta { color: var(--muted); font-size: var(--text-sm); }

/* -- finder --------------------------------------------------------------- */

.finder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.search-row { display: flex; gap: 0.5rem; align-items: center; }
.search-row input { flex: 1 1 auto; min-width: 0; width: auto; }
.search-row select { width: auto; min-width: 8rem; }

.results { list-style: none; margin: 0; padding: 0; max-height: 62vh; overflow-y: auto; }
.results li { border-bottom: 1px solid var(--line); }
.results button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--ink);
  font-weight: 400;
  padding: 0.65rem 0.4rem;
  min-height: var(--touch);
  border-radius: 0;
}
.results button:hover { background: var(--row-hover); }
.results button[aria-current="true"] {
  background: var(--row-hover);
  box-shadow: inset 2px 0 0 var(--accent);
}
.results .sub { display: block; color: var(--muted); font-size: 0.82rem; margin-top: 0.15rem; }

.tag {
  display: inline-block;
  font-size: 0.72rem;
  padding: 0.05rem 0.4rem;
  margin-left: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  vertical-align: 0.05rem;
}
.tag.pin { color: var(--accent); border-color: var(--accent); }
.tag.drop { color: var(--danger); border-color: var(--danger); }
.tag.live { color: var(--ok); border-color: var(--ok); }

.facts { margin: 0; }
.facts div {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 0.6rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--line);
}
.facts dt { color: var(--muted); font-size: var(--text-sm); }
.facts dd { margin: 0; }

.detail h3 { margin-top: 1.1rem; }
.detail .card {
  background: var(--row);
  border: 1px solid var(--line);
  padding: 0.6rem 0.7rem;
  margin-top: 0.4rem;
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}
.detail .card p { margin: 0.25rem 0; }
.detail .warn { color: var(--accent); }
.move-form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.move-form input { flex: 1 1 12rem; min-width: 0; width: auto; }

/* -- ranking -------------------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: var(--text-sm);
  color: var(--muted);
}
.field input, .field select, .field textarea { color: var(--ink); width: 100%; }

.check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-md);
  margin: 0.6rem 0 0.2rem;
}
.check input { width: auto; }

.hint.warn { color: var(--accent); }

.assistant-box {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.75rem;
  align-items: flex-end;
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}
.assistant-box[hidden] { display: none; }
.assistant-box .field.grow { flex: 1 1 16rem; min-width: 12rem; }
.assistant-result { flex: 1 1 100%; margin: 0; }
.assistant-proposals {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.assistant-proposals li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised, var(--bg));
}
.assistant-proposals li.applied { opacity: 0.65; }
.assistant-proposals li span { flex: 1 1 12rem; color: var(--ink); }

.ranking-settings { display: flex; flex-direction: column; gap: 0.1rem; max-width: 34rem; }
.ranking-settings input[type="number"] { max-width: 8rem; }

/* -- rules member preview (phone column) -------------------------------- */

.rule-vocab {
  color: var(--muted);
  font-weight: 500;
  font-size: var(--text-sm);
}

.rules-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.rules-workspace-main { min-width: 0; }

.rules-member-preview {
  display: none;
  min-width: 0;
  background: var(--row);
  border-color: var(--line-soft);
  max-width: 22rem;
  margin-left: auto;
  margin-right: auto;
  border-radius: 1.25rem;
  padding: var(--space-4) var(--space-3);
  box-shadow: inset 0 0 0 1px var(--line);
}

.rules-member-preview-head { margin-bottom: var(--space-3); }
.rules-member-preview-title {
  margin: 0;
  font-weight: 650;
  font-size: var(--text-md);
  line-height: 1.35;
}

.rules-member-preview .layout-preview-list {
  max-height: min(70vh, 40rem);
  overflow: auto;
}

.rules-preview-toggle {
  display: none;
  position: sticky;
  bottom: var(--space-3);
  z-index: 3;
  margin: var(--space-4) auto 0;
  width: fit-content;
  background: var(--panel-elev);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.55rem 1.25rem;
  font-weight: 600;
  color: var(--ink);
  box-shadow: var(--shadow);
}

@media (min-width: 1100px) {
  .rules-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
    gap: var(--space-5);
  }
  .rules-member-preview {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + var(--space-3));
    max-height: calc(100vh - var(--header-h) - var(--space-5));
    overflow: auto;
    margin: 0;
    width: 100%;
    max-width: none;
  }
  .rules-preview-toggle { display: none !important; }
}

@media (max-width: 1099px) {
  .rules-preview-toggle { display: block; }
  .rules-workspace.show-preview .rules-workspace-main { display: none; }
  .rules-workspace.show-preview .rules-member-preview { display: block; }
  .rules-workspace:not(.show-preview) .rules-member-preview { display: none; }
}

.headline-list { list-style: none; margin: 0; padding: 0; }
.headline-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.6rem 0.9rem;
  padding: 0.6rem 0.65rem;
  background: var(--row);
  border: 1px solid transparent;
  border-bottom-color: var(--line);
  cursor: grab;
  border-radius: var(--radius-sm);
}
.headline-list > li:hover { background: var(--row-hover); }
.headline-list > li.dragging { opacity: 0.45; }
.headline-list > li.drag-over { border-color: var(--accent); }
.headline-list > li:focus-visible { background: var(--row-hover); }
.headline-list .position { align-self: center; }

.headline-fields { display: flex; flex-wrap: wrap; gap: 0.5rem; flex: 1 1 22rem; }
.headline-fields .field { flex: 1 1 10rem; min-width: 8rem; }
.headline-fields .field.narrow { flex: 0 0 6rem; }

.headline-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.82rem;
  color: var(--muted);
  flex: 1 1 12rem;
  align-self: center;
}
.headline-meta .warn { color: var(--accent); }

.sport-suggestions {
  margin: 0.9rem 0 1.1rem;
  padding: 0.75rem 0.8rem;
  background: var(--row);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.sport-suggestions h3 {
  margin: 0 0 0.25rem;
  font-size: var(--text-md);
  font-weight: 600;
}
.suggest-list {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.suggest-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.6rem 0.9rem;
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid var(--line);
}
.suggest-list > li:last-child { border-bottom: none; }

.advanced-block {
  flex: 1 1 100%;
  margin: 0.2rem 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.65rem 0.55rem;
  background: var(--row);
}
.advanced-block > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: var(--text-sm);
  padding: 0.25rem 0;
}
.advanced-block[open] > summary { margin-bottom: 0.45rem; }
.advanced-block .field { margin-top: 0.45rem; }

.chip-picker-field { flex: 1 1 100%; min-width: 0; }
.chip-picker-field > span {
  display: block;
  font-size: var(--text-sm);
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.word-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.word-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}
.word-chip:hover { border-color: var(--accent); }
.word-chip.is-selected {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.word-chip .count {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
}
.word-chip.is-selected .count { color: var(--ink); }
.word-chip-empty {
  color: var(--muted);
  font-size: var(--text-sm);
  margin: 0;
}

.derive-panel {
  margin: 0.55rem 0 0.75rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--row);
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.75rem;
  align-items: flex-end;
}
.derive-panel h3 {
  flex: 1 1 100%;
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
}
.derive-panel .hint { flex: 1 1 100%; margin: 0; }
.derive-panel .field { flex: 1 1 16rem; min-width: 10rem; }
.derive-panel .actions-row { flex: 1 1 100%; margin: 0; }
.derive-result {
  flex: 1 1 100%;
  margin: 0.2rem 0 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: var(--text-sm);
}
.derive-result.warn { border-color: var(--accent); }
.derive-result .derive-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0.35rem 0 0.55rem;
}
.derive-result .derive-stats strong {
  font-variant-numeric: tabular-nums;
}

.headline-form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; }
.headline-form .field { flex: 1 1 14rem; min-width: 10rem; }
.headline-form .field.narrow { flex: 0 0 7rem; }
.headline-form .actions-row { flex: 1 1 100%; margin: 0.4rem 0 0; }
.headline-form #rk-check-result { flex: 1 1 100%; margin: 0; }

/* -- preview and history -------------------------------------------------- */

.table-scroll { overflow-x: auto; }

.delta { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.delta th, .delta td {
  text-align: left;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.delta th { color: var(--muted); font-weight: 500; }
.delta td:nth-child(n+2) { font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.delta th:nth-child(n+2) { text-align: right; }
.delta .pos { color: var(--ok); }
.delta .neg { color: var(--danger); }
.delta tr.changed td:first-child { box-shadow: inset 2px 0 0 var(--accent); }

#providers-table td.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  white-space: normal;
}
#providers-table tr.disabled td { color: var(--muted); }
#providers-table .hint { margin: 0.2rem 0 0; }
.headline-form select {
  color: var(--ink);
  background: var(--row);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.5rem;
  font: inherit;
  width: 100%;
}

.history { list-style: none; margin: 0; padding: 0; }
.history li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  align-items: center;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.86rem;
}
.history button { font-size: 0.82rem; padding: 0.3rem 0.65rem; }

/* -- login ---------------------------------------------------------------- */

.login-page { display: grid; place-items: center; min-height: 100vh; padding: var(--space-4); }
.login-card {
  width: min(24rem, 92vw);
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 1.75rem;
  border-radius: var(--radius);
}
.login-card .lede { color: var(--muted); margin: 0.4rem 0 1.2rem; }
.login-card label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--muted);
  font-size: var(--text-sm);
}
.login-mark {
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  object-fit: contain;
  margin: 0 auto 0.6rem;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}
.login-card button,
.login-card a.button {
  display: block;
  margin-top: 1rem;
  width: 100%;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  padding: 0.75rem 1rem;
  min-height: var(--touch);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius);
}
.login-card a.button:hover { filter: brightness(1.05); }

/* -- Members / Settings --------------------------------------------------- */

.members-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-md);
}
.members-table th,
.members-table td {
  text-align: left;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.members-table th {
  color: var(--muted);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.members-table .member-link {
  /* Block, not inline: a two-word name wraps onto two lines, and an inline
     anchor's hit area is the glyph runs only, so a click aimed at the middle
     of the name lands in the gap between them and does nothing. */
  display: block;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.members-table .member-link span {
  border-bottom: 1px solid var(--line);
}
.members-table .member-link:hover span,
.members-table .member-link:focus-visible span {
  border-bottom-color: currentColor;
}
.members-table .member-link:hover,
.members-table .member-link:focus-visible {
  color: var(--accent);
  border-bottom-color: currentColor;
}
.members-table td.tabular,
.members-table .age {
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  font-size: var(--text-sm);
}

.redacted-url {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--muted);
  font-size: var(--text-xs);
}

.guide-tag {
  display: inline-block;
  font-size: var(--text-xs);
  color: var(--muted);
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--row);
  white-space: nowrap;
}

.line-badge {
  display: inline-block;
  font-size: var(--text-xs);
  color: var(--muted);
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--row);
  white-space: nowrap;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.12rem 0.6rem 0.12rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
}
.status-pill::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: currentColor;
}
.status-pill.status-active {
  color: var(--ok);
  border-color: rgba(70, 177, 123, 0.35);
  background: rgba(70, 177, 123, 0.08);
}
.status-pill.status-revoked {
  color: var(--danger);
  border-color: rgba(229, 104, 79, 0.35);
  background: rgba(229, 104, 79, 0.08);
}

.muted { color: var(--muted); }

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.row-actions form.inline { display: inline; margin: 0; }
/* One primary action per screen. Inside a table row everything is quiet;
   danger keeps its color but not a loud border until hovered. */
.row-actions button,
.row-actions a.button,
.row-actions a.button.ghost {
  min-height: 2rem;
  padding: 0.3rem 0.7rem;
  font-size: var(--text-sm);
  font-weight: 500;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.row-actions button:hover:not(:disabled),
.row-actions a.button:hover {
  filter: none;
  border-color: var(--accent);
}
.row-actions button.danger { color: var(--danger); }
.row-actions button.danger:hover:not(:disabled) {
  border-color: var(--danger);
  background: rgba(229, 104, 79, 0.1);
}

.copy-status { color: var(--ok); font-size: var(--text-sm); }

.copy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.35rem 0.5rem;
  align-items: center;
  margin: 0;
  padding: 0.55rem 0;
}
.copy-row + .copy-row { border-top: 1px solid var(--line-soft); }
.copy-row label {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.copy-row input {
  grid-column: 1 / 2;
  font-family: var(--mono);
  font-size: var(--text-sm);
}
.copy-row button {
  width: auto;
  min-height: 2.1rem;
  padding: 0.3rem 0.8rem;
  font-size: var(--text-sm);
  font-weight: 500;
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.copy-row button:hover:not(:disabled) {
  filter: none;
  border-color: var(--accent);
}

.stack-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  max-width: 28rem;
  margin-top: 0.8rem;
}
.stack-form.wide { max-width: 36rem; }
/* Headings carry almost no top margin, so on Settings every Save button sat
   2px above the next section title and the page read as one wall of text. */
.stack-form + h2,
.stack-form + h3 {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-soft);
}
.stack-form label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--muted);
  font-size: var(--text-sm);
}
.stack-form label.check {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
}
.stack-form input[type="text"],
.stack-form input[type="url"],
.stack-form input[type="password"],
.stack-form input[type="number"],
.stack-form input:not([type]),
.stack-form select,
.stack-form textarea {
  background: var(--row);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-sm);
  font: inherit;
}

.form-sticky-actions {
  position: sticky;
  bottom: 0;
  z-index: 20;
  margin: var(--space-4) -0.25rem 0;
  padding: var(--space-3);
  background: linear-gradient(180deg, transparent, var(--panel) 28%);
  border-top: 1px solid var(--line-soft);
}
.form-sticky-actions button {
  width: 100%;
  min-height: var(--touch);
}

.member-facts {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 0.35rem 0.8rem;
  margin: 1rem 0;
}
.member-facts dt {
  color: var(--muted);
  font-size: var(--text-sm);
}
.member-facts dd { margin: 0; }

a.button.ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 0.45rem 0.8rem;
  min-height: 2.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  background: transparent;
  font-weight: 500;
}

/* -- Home pipeline -------------------------------------------------------- */

.overview-hero {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  align-items: flex-end;
  justify-content: space-between;
  margin-top: var(--space-2);
}
.overview-hero .page-lede { margin-bottom: 0; max-width: 34rem; }
.stat-band {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 6.5rem;
  padding: 0.65rem 0.9rem 0.6rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent), var(--panel);
  text-decoration: none;
  transition: border-color var(--ease), transform var(--ease);
}
.stat:hover { border-color: var(--accent); transform: translateY(-1px); }
.stat-num {
  color: var(--ink);
  font-size: var(--text-xl);
  font-weight: 650;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat-label {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.up-next {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
}
.up-next li {
  display: flex;
  gap: var(--space-4);
  align-items: baseline;
  padding: 0.5rem 0.15rem;
}
.up-next li + li { border-top: 1px solid var(--line-soft); }
.up-next-when {
  flex: 0 0 auto;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.up-next-title { min-width: 0; color: var(--ink); }

.overview-panel .overview-lead {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.overview-metric {
  margin: 0.65rem 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
}
.overview-metric strong {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.overview-table { margin-top: 0.75rem; }
.overview-attention {
  margin: 0.75rem 0 0;
  padding-left: 1.2rem;
  color: var(--ink);
}
.overview-attention li + li { margin-top: 0.4rem; }

.pipeline-card {
  display: flex;
  flex-direction: column;
}
.pipeline-card:hover {
  border-color: #2c3446;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}
.pipeline-card .panel-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.pipeline-card .panel-head > div:last-child { min-width: 0; flex: 1; }
.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  margin-top: 0.15rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--ease), color var(--ease);
}
.pipeline-card:hover .step-badge {
  border-color: var(--accent);
  color: var(--accent);
}
.pipeline-card .pipeline-link {
  margin-top: auto;
  padding-top: var(--space-4);
  margin-bottom: 0;
}

/* -- Wizards -------------------------------------------------------------- */

.wizard-steps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
}
.wizard-step {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--line);
  background: var(--row);
  color: var(--muted);
  font-size: var(--text-sm);
  border-radius: 999px;
}
.wizard-step-num {
  display: inline-flex;
  width: 1.45rem;
  height: 1.45rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-weight: 600;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}
.wizard-step.is-current {
  color: var(--ink);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.wizard-step.is-current .wizard-step-num {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.wizard-step.is-done { color: var(--ok); }

.wizard-verdict {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--ink);
  margin: 0.75rem 0;
  max-width: 40rem;
}
.wizard-samples {
  margin: 0.4rem 0 1rem;
  padding-left: 1.2rem;
  color: var(--muted);
}
.wizard-choices {
  border: 1px solid var(--line);
  padding: 0.9rem 1rem;
  margin: 1rem 0;
  border-radius: var(--radius);
  background: var(--row);
}
.wizard-choices legend {
  padding: 0 0.35rem;
  color: var(--ink);
  font-weight: 600;
}

.actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.75rem;
}

a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 600;
  padding: 0.5rem 0.95rem;
  min-height: 2.35rem;
  border-radius: var(--radius);
}
a.button.ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
  font-weight: 500;
}
a.button.ghost:hover {
  color: var(--ink);
  border-color: var(--accent);
}

/* -- motion --------------------------------------------------------------- */

button,
a.button,
a.button-link,
.tab,
.panel {
  transition:
    background-color var(--ease),
    border-color var(--ease),
    color var(--ease),
    opacity var(--ease),
    transform var(--ease),
    box-shadow var(--ease);
}
button:hover:not(:disabled),
a.button:hover { filter: brightness(1.05); }
button:active:not(:disabled),
a.button:active { transform: translateY(1px); }
button.is-working { opacity: 0.7; cursor: wait; }

.page-enter { animation: page-enter var(--ease-out); }
.flash-in { animation: flash-in var(--ease-out); }
.flash-out { animation: flash-out 220ms ease-in forwards; }
.copy-flash {
  color: var(--ok);
  margin-left: 0.4rem;
  font-size: var(--text-sm);
}
.copy-flash-out {
  opacity: 0;
  transition: opacity 200ms ease;
}

.toast-host {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
  max-width: min(22rem, calc(100vw - 2rem));
}
.toast {
  pointer-events: auto;
  padding: 0.75rem 0.95rem;
  background: var(--panel-elev);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ok);
  border-radius: var(--radius);
  color: var(--ink);
  box-shadow: var(--shadow);
  animation: flash-in var(--ease-out);
}
.toast.err { border-left-color: var(--danger); }
.toast.has-action {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.toast-text { flex: 1 1 auto; min-width: 0; }
.toast-action {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: 600;
  min-height: 2rem;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
}
.toast-action:hover { border-color: var(--accent); color: var(--ink); }

@keyframes page-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes flash-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes flash-out {
  from { opacity: 1; }
  to { opacity: 0; height: 0; margin: 0; min-height: 0; overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  button,
  a.button,
  a.button-link,
  .tab,
  .panel,
  .copy-flash-out,
  .layout-group-row,
  .layout-row-action,
  .layout-seg button,
  .layout-chip,
  .chip-x,
  .drag-handle,
  .channel-search-results li,
  .diff-summary > summary,
  .diff-summary > summary::before {
    transition: none !important;
  }
  .page-enter,
  .flash-in,
  .flash-out,
  .bottom-sheet-panel,
  .toast,
  .layout-group-row.just-moved,
  .layout-skeleton-bar {
    animation: none !important;
  }
  button:active:not(:disabled),
  a.button:active { transform: none; }
}

/* -- responsive tables as cards ------------------------------------------- */

/* Below the rail breakpoint the sheet is the nav. The rail itself is already
   display:none by default and only turns on at 900px. */
@media (max-width: 899px) {
  .nav-toggle { display: inline-flex; }
  :root { --gutter: 1.1rem; }
}

@media (max-width: 720px) {
  :root { --gutter: 0.85rem; }

  /* Stats lede lives in the page-head band, not the sticky header. On a phone
     the sticky editor strip already carries counts/draft state, so the band
     collapses to just the step nav. */
  .spa-lede { display: none; }
  .page-head-inner { padding-top: var(--space-2); }

  /* The sticky editor strip and the Preview-and-publish view carry preview,
     publish and draft state on a phone; repeating them in the sticky header
     doubled its height for no new information. */
  .site-header .actions #btn-preview,
  .site-header .actions #btn-publish,
  .site-header .actions #draft-chip { display: none; }

  /* Header shortcuts stay reachable on a phone without pushing the bar to
     two rows. */
  .site-header .actions a.button-link {
    font-size: var(--text-xs);
    padding: 0.3rem 0.5rem;
    min-height: 2rem;
  }

  .members-table thead { display: none; }
  .members-table,
  .members-table tbody,
  .members-table tr,
  .members-table td {
    display: block;
    width: 100%;
  }
  .members-table tr {
    background: var(--row);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin: 0 0 var(--space-3);
    padding: var(--space-3);
  }
  .members-table td {
    border: none;
    padding: 0.35rem 0;
    display: grid;
    grid-template-columns: minmax(5.5rem, 34%) minmax(0, 1fr);
    gap: 0.5rem;
    align-items: start;
  }
  .members-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
  }
  .members-table td.row-actions-cell,
  .members-table td[data-label="Actions"] {
    display: block;
  }
  .members-table td.row-actions-cell::before,
  .members-table td[data-label="Actions"]::before {
    display: block;
    margin-bottom: 0.45rem;
  }
  .members-table .row-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .members-table .row-actions > *,
  .members-table .row-actions form,
  .members-table .row-actions button,
  .members-table .row-actions a.button {
    width: 100%;
  }
  .members-table .row-actions button,
  .members-table .row-actions a.button {
    min-height: var(--touch);
  }

  .finder { grid-template-columns: minmax(0, 1fr); }
  .search-row { flex-wrap: wrap; }
  .search-row input,
  .search-row select { flex: 1 1 100%; width: 100%; }
  .results { max-height: none; }
  .group-list > li { grid-template-columns: minmax(0, 1fr); }
  .group-list .position, .group-list .handle { display: none; }
  .facts div { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .headline-list .position, .headline-list .handle { display: none; }
  .layout-compare { grid-template-columns: minmax(0, 1fr); }
  .member-facts { grid-template-columns: minmax(0, 1fr); }
  .copy-row {
    grid-template-columns: 1fr;
  }
  .copy-row input,
  .copy-row button { grid-column: 1; width: 100%; min-height: var(--touch); }

  .channel-table thead { display: none; }
  .channel-table,
  .channel-table tbody,
  .channel-table tr,
  .channel-table td {
    display: block;
    width: 100%;
  }
  .channel-table tr {
    background: var(--row);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin: 0 0 var(--space-2);
    padding: var(--space-3);
  }
  .channel-table td {
    border: none;
    padding: 0.25rem 0;
  }
  .channel-table td.channel-check { margin-bottom: 0.35rem; }
  .channel-actions button { min-height: var(--touch); flex: 1 1 auto; }

  .editor-status { top: var(--header-h); }
  .playlist-search-sticky {
    top: calc(var(--header-h) + 3.6rem);
  }
  .stack-form { max-width: none; }
  .delta th, .delta td { white-space: normal; }
}

@media (max-width: 860px) {
  .finder { grid-template-columns: minmax(0, 1fr); }
}

body.nav-open { overflow: hidden; }

/* -- desktop density ------------------------------------------------------ */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 90;
  padding: 0.6rem 0.9rem;
  background: var(--panel-elev);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
}
.skip-link:focus { left: var(--space-3); top: var(--space-3); }

/* Home pipeline: five cards stacked in one column wasted the whole right half
   of a desktop monitor. */
.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  /* Cards stretch to their row, so a short card's button still lines up
     with its neighbours' (the card itself is a flex column with the link
     pinned to the bottom). */
  align-items: stretch;
}
.overview-grid > .panel { margin-top: 0; }
.overview-grid > .overview-hero,
.overview-grid > .page-lede,
.overview-grid > .overview-panel:not(.pipeline-card) { grid-column: 1 / -1; }

@media (min-width: 1100px) {
  .overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1700px) {
  .overview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  /* Results list does not need half a 27-inch monitor; the detail pane does. */
  .finder { grid-template-columns: minmax(0, 28rem) minmax(0, 1fr); }
}

@media (min-width: 900px) {
  /* Tighter rows, and a header that survives a 200-row scroll. */
  .members-table th,
  .members-table td { padding: 0.42rem 0.7rem; }
  /* body sets overflow-wrap:anywhere, which counts toward min-content and
     let the auto table algorithm shrink a name column until it split
     "Matthew" across two lines. break-word only kicks in when a word truly
     cannot fit. */
  .members-table th { white-space: nowrap; }
  .members-table td,
  .channel-table td { overflow-wrap: break-word; }
  .members-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.015); }
  .members-table tbody tr:hover { background: var(--row-hover); }

  /* A four-column list does not want 1300px of even columns. */
  .channels-table { table-layout: fixed; }
  .channels-table th:nth-child(1),
  .channels-table td:nth-child(1) { width: 5rem; color: var(--muted); }
  .channels-table th:nth-child(3),
  .channels-table td:nth-child(3) { width: 22%; }
  .channels-table th:nth-child(4),
  .channels-table td:nth-child(4) { width: 14%; }
  .channels-filter.stack-form { max-width: min(46rem, 100%); }

  /* A stacked form stretches its buttons to the form width. On a phone that
     is the point; on a desktop it turns Save into a 450px slab. */
  .stack-form > button,
  .stack-form > .actions-row > button { align-self: flex-start; }
  .members-table:not(.overview-table) > thead th {
    position: sticky;
    top: var(--header-h);
    z-index: 2;
    background: var(--panel);
    box-shadow: inset 0 -1px 0 var(--line);
  }
  .channel-table th,
  .channel-table td { padding: 0.4rem 0.6rem; }
  .table-wrap { max-height: min(68vh, 52rem); }
  .results { max-height: min(68vh, 52rem); }
  .panel { padding: 1.1rem 1.25rem 1.25rem; }
}

/* Groups tab -------------------------------------------------------------- */
.groups-page .groups-ask {
  margin-top: var(--space-4);
}
.groups-page #groups-query {
  font-size: 1.15rem;
  padding: 0.75rem 0.9rem;
  min-height: 3rem;
}
.groups-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.75rem;
}
.groups-chips button {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.8rem;
  font: inherit;
  cursor: pointer;
}
.groups-chips button:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.groups-ambiguous {
  margin-top: var(--space-4);
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--accent-soft);
}
.groups-ambiguous h2 {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
}
.groups-ambiguous-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.groups-ambiguous-actions button {
  flex: 1 1 12rem;
  min-height: 3rem;
  font-size: 1.05rem;
  padding: 0.7rem 1rem;
}
.groups-results {
  display: grid;
  gap: 0.9rem;
  margin-top: var(--space-4);
}
.groups-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  background: var(--panel);
}
.groups-card.is-muted {
  opacity: 0.72;
}
.groups-card h3 {
  margin: 0 0 0.35rem;
  font-size: 1.25rem;
}
.groups-card .groups-blurb {
  margin: 0 0 0.5rem;
  color: var(--muted);
}
.groups-card .groups-count {
  margin: 0 0 0.75rem;
  font-weight: 600;
}
.groups-card .groups-why {
  margin: 0 0 0.75rem;
  color: var(--muted);
}
.groups-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.groups-sample {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}
.groups-sample li {
  padding: 0.2rem 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
}
.groups-sample li:last-child { border-bottom: 0; }
.groups-overlap {
  margin-top: var(--space-4);
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.groups-overlap h2 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}
.groups-applied {
  margin-top: var(--space-5);
}
.groups-applied h2 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}
.groups-applied-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.groups-applied-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
}
.groups-applied-list li:last-child { border-bottom: 0; }
.groups-applied-list .groups-applied-name {
  flex: 1 1 10rem;
  font-weight: 600;
}
.groups-footer {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.groups-preview-out {
  margin-top: 0.75rem;
  font-size: var(--text-sm);
  color: var(--muted);
}
.panel-inset {
  padding: 0.85rem 0 0;
}