/* Roost UI System v0.1 — base, shell, and components. Sizing and spacing come
   from the design system's token sheet (4px base; radii 6 chips / 8 controls /
   12 cards / 99 badges; rows 52px comfortable, 40px compact, table heads 34px;
   rail 232px). Hairlines separate; shadow is reserved for things that float. */

* { box-sizing: border-box; }

/* The hidden attribute always wins, even against inline display styles —
   without this, a span with style="display: inline-flex" ignores [hidden]. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--roost-bg);
  color: var(--roost-text);
  font-family: var(--roost-font-ui);
  font-size: 14px;
  line-height: 1.55;
  transition: background 200ms ease, color 200ms ease;
}

a { color: var(--roost-accent); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--roost-accent-hover); }

@keyframes roost-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.82); }
}

/* ══ App shell — three fixed parts, one scrolling part ══ */

.shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  height: 100vh;
  overflow: hidden;
}

.rail {
  background: var(--roost-surface-2);
  border-right: 1px solid var(--roost-line);
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  min-height: 0;
}

.rail-brand { display: flex; align-items: center; gap: 9px; padding: 16px 16px 14px; }
.rail-brand .brand-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--roost-text); text-decoration: none; }
.rail-brand .brand-tag {
  margin-left: auto; font-family: var(--roost-font-mono); font-size: 10px;
  color: var(--roost-text-3); border: 1px solid var(--roost-line-strong);
  border-radius: 99px; padding: 1px 6px; white-space: nowrap;
}

.rail-nav { padding: 6px 10px; display: grid; gap: 1px; align-content: start; overflow-y: auto; min-height: 0; }

.rail-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font-size: 13px; font-weight: 500; color: var(--roost-text-2);
  text-decoration: none; border: 0; border-radius: 8px; padding: 8px 10px;
  transition: background 200ms ease, color 200ms ease;
}
.rail-item:hover { background: var(--roost-surface-3); color: var(--roost-text); }
.rail-item svg { flex: none; }
.rail-item .rail-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-item .rail-count {
  font-family: var(--roost-font-mono); font-size: 10px; color: var(--roost-text-3);
  border-radius: 99px; padding: 1px 7px;
}
.rail-item.active { background: var(--roost-surface); color: var(--roost-text); font-weight: 700; }
.rail-item.active .rail-count { background: var(--roost-accent-soft); color: var(--roost-info-fg); }

.rail-foot { padding: 12px 14px; border-top: 1px solid var(--roost-line); display: grid; gap: 10px; }
.rail-health { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--roost-text-2); }
.rail-health .health-label { font-family: var(--roost-font-mono); font-size: 11px; }
.rail-account { display: flex; align-items: center; gap: 9px; }
.rail-account .avatar {
  flex: none; width: 26px; height: 26px; border-radius: 99px;
  background: var(--roost-accent-soft); border: 1px solid var(--roost-info-bd);
  color: var(--roost-info-fg); display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
}
.rail-account .address { font-size: 12px; color: var(--roost-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.pulse-dot {
  width: 7px; height: 7px; border-radius: 99px; flex: none;
  background: var(--roost-green-bright);
  animation: roost-pulse 2.4s ease-in-out infinite;
}
.pulse-dot--danger { background: var(--roost-danger-fg); animation: none; }

.main { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; }
/* Fullscreen pages omit .page-header, so .content--stage would auto-place into
   the `auto` row and size to its content while the empty 1fr row ate the rest
   of the viewport — every editor then collapsed to content height. The layout
   emits .main--stage alongside content_for(:fullscreen) so the stage owns one
   definite full-height track. A class beats `.main:has(> .content--stage)`
   here: it is decided by the same condition that drops the header, so the two
   can never disagree, and it needs no :has() support. */
.main--stage { grid-template-rows: minmax(0, 1fr); }

/* Page header: title + one live indicator + at most three actions; tabs sit
   on the header baseline so switching views never moves the title. */
.page-header { background: var(--roost-surface); border-bottom: 1px solid var(--roost-line); padding: 16px 22px 0; min-width: 0; }
.page-header-row { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.page-heading { min-width: 0; }
.page-title-row { display: flex; align-items: center; gap: 10px; }
.page-title { font-family: var(--roost-font-display); font-weight: 400; font-size: 26px; letter-spacing: -0.01em; margin: 0; }
.page-sub { font-size: 13px; color: var(--roost-text-3); margin-top: 4px; }
.page-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.live-pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600;
  color: var(--roost-text-2); border: 1px solid var(--roost-line); border-radius: 99px; padding: 2px 9px;
}
.live-pill .pulse-dot { width: 6px; height: 6px; }

.page-tabs { display: flex; gap: 2px; margin-top: 14px; }
.page-tabs:empty { margin-top: 16px; }
.tab {
  font-family: inherit; font-size: 13px; font-weight: 600; padding: 9px 13px;
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--roost-text-3); cursor: pointer; margin-bottom: -1px;
  display: flex; align-items: center; gap: 7px; text-decoration: none;
  transition: color 200ms ease;
}
.tab:hover { color: var(--roost-text-2); }
.tab.active { border-bottom-color: var(--roost-accent); color: var(--roost-text); }
.tab .tab-count {
  font-family: var(--roost-font-mono); font-size: 10px; color: var(--roost-text-3);
  background: var(--roost-surface-2); border-radius: 99px; padding: 1px 6px;
}

/* The only scroll container. */
.content { min-width: 0; min-height: 0; overflow-y: auto; background: var(--roost-bg); }
.content-pad { padding: 20px 22px; max-width: 1440px; }

/* ══ Status badges — the product's first language ══ */

.badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600;
  padding: 2px 9px 2px 7px; border-radius: 99px; white-space: nowrap;
}
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 99px; background: currentColor; opacity: .8; }
.badge--ok      { background: var(--roost-ok-bg);      color: var(--roost-ok-fg);      border: 1px solid var(--roost-ok-bd); }
.badge--warn    { background: var(--roost-warn-bg);    color: var(--roost-warn-fg);    border: 1px solid var(--roost-warn-bd); }
.badge--danger  { background: var(--roost-danger-bg);  color: var(--roost-danger-fg);  border: 1px solid var(--roost-danger-bd); }
.badge--info    { background: var(--roost-info-bg);    color: var(--roost-info-fg);    border: 1px solid var(--roost-info-bd); }
.badge--neutral { background: var(--roost-neutral-bg); color: var(--roost-neutral-fg); border: 1px solid var(--roost-neutral-bd); }
.badge--muted   { background: var(--roost-muted-bg);   color: var(--roost-muted-fg);   border: 1px solid var(--roost-muted-bd); }
.badge--violet  { background: var(--roost-violet-bg);  color: var(--roost-violet-fg);  border: 1px solid var(--roost-violet-bd); }

/* ══ Buttons — 28 · 34 · 42px heights ══ */

.btn {
  font-family: inherit; font-size: 13px; font-weight: 600; padding: 8px 16px;
  border-radius: 8px; cursor: pointer; text-decoration: none; display: inline-flex;
  align-items: center; gap: 7px; line-height: 1.2; white-space: nowrap;
  border: 1px solid var(--roost-line-strong); background: var(--roost-surface); color: var(--roost-text);
  transition: background 200ms ease, transform 150ms ease;
}
.btn:hover { background: var(--roost-surface-2); color: var(--roost-text); }
.btn--primary { border-color: var(--roost-accent); background: var(--roost-accent); color: var(--roost-accent-fg); }
.btn--primary:hover { background: var(--roost-accent-hover); border-color: var(--roost-accent-hover); color: var(--roost-accent-fg); transform: translateY(-1px); }
.btn--danger { border-color: var(--roost-danger-bd); background: var(--roost-danger-bg); color: var(--roost-danger-fg); }
.btn--danger:hover { filter: brightness(.96); background: var(--roost-danger-bg); color: var(--roost-danger-fg); }
.btn--ghost { border-color: transparent; background: transparent; color: var(--roost-text-2); }
.btn--ghost:hover { background: var(--roost-surface-2); color: var(--roost-text); }
.btn--sm { font-size: 12px; padding: 5px 11px; border-radius: 7px; }
.btn--lg { font-size: 14px; padding: 11px 20px; border-radius: 9px; }
.btn[disabled] { border-color: var(--roost-line); background: var(--roost-surface-2); color: var(--roost-text-3); cursor: not-allowed; transform: none; }
.btn--mono { font-family: var(--roost-font-mono); font-size: 12px; padding: 7px 12px; }
.btn.toggled { border-color: var(--roost-info-bd); background: var(--roost-accent-soft); color: var(--roost-info-fg); }

/* ══ Forms ══ */

.label { display: block; font-size: 12px; font-weight: 600; color: var(--roost-text-2); margin-bottom: 6px; }
.input, .select, .textarea {
  width: 100%; min-width: 0; max-width: 100%; font-family: inherit; font-size: 14px; padding: 9px 12px;
  border-radius: 8px; border: 1px solid var(--roost-line-strong);
  background: var(--roost-inset); color: var(--roost-text); outline: none;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--roost-accent); box-shadow: 0 0 0 3px var(--roost-ring); }
.input--mono, .textarea--mono { font-family: var(--roost-font-mono); font-size: 13px; }
.input--error { border-color: var(--roost-danger-bd); background: var(--roost-danger-bg); }
.field-error { display: block; font-size: 12px; color: var(--roost-danger-fg); margin-top: 6px; }
.field-hint { display: block; font-size: 12px; color: var(--roost-text-3); margin-top: 6px; }
.field { display: block; margin-bottom: 16px; }

/* ══ Cards, tiles ══ */

.card { background: var(--roost-surface); border: 1px solid var(--roost-line); border-radius: 12px; }
.card-pad { padding: 26px 28px; }
.card-title { font-size: 15px; font-weight: 700; margin: 0 0 18px; }

.stat-tile { background: var(--roost-surface); border: 1px solid var(--roost-line); border-radius: 12px; padding: 20px 22px; }
.stat-label { font-size: 12px; font-weight: 600; color: var(--roost-text-3); margin-bottom: 10px; }
.stat-value { font-family: var(--roost-font-display); font-weight: 400; font-size: 38px; line-height: 1; letter-spacing: -0.02em; }
.stat-meta { font-size: 11px; color: var(--roost-text-3); margin-top: 8px; }
.stat-row { display: flex; align-items: baseline; gap: 8px; }
.stat-cap { font-family: var(--roost-font-mono); font-size: 11px; color: var(--roost-text-3); }

.meter { position: relative; height: 6px; border-radius: 99px; background: var(--roost-surface-3); margin-top: 14px; }
.meter-fill { position: absolute; inset: 0; border-radius: 99px; }
.meter-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--roost-text-3); }

/* ══ Tables — grid rows, sticky head inside .content ══ */

.table-head {
  display: grid; grid-template-columns: var(--cols); align-items: center; height: 34px; padding: 0 8px 0 20px;
  border-bottom: 1px solid var(--roost-line); background: var(--roost-surface-2);
  position: sticky; top: 0; z-index: 2;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--roost-text-3);
}
.table-row {
  display: grid; grid-template-columns: var(--cols); align-items: center; height: 52px; padding: 0 8px 0 20px;
  border-bottom: 1px solid var(--roost-line); background: var(--roost-surface);
  color: inherit; text-decoration: none; cursor: pointer;
  transition: background 150ms ease;
}
.table-row:hover { background: var(--roost-surface-2); color: inherit; }
.table-row.selected { background: var(--roost-accent-soft); box-shadow: inset 3px 0 0 var(--roost-accent); }
.table-row--compact { height: 40px; }

.cell-primary { display: block; font-size: 13px; color: var(--roost-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-secondary { display: block; font-size: 13px; color: var(--roost-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-mono-sub { display: block; font-family: var(--roost-font-mono); font-size: 10px; color: var(--roost-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-sub { display: block; font-size: 11px; color: var(--roost-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-sub--warn { color: var(--roost-warn-fg); }
.cell-sub--danger { color: var(--roost-danger-fg); }
.cell-mono { font-family: var(--roost-font-mono); font-size: 12px; color: var(--roost-text-3); }
.cell-mono--strong { color: var(--roost-text); }
.cell-pad { min-width: 0; padding-right: 12px; }

.table-footer {
  display: flex; align-items: center; gap: 14px; padding: 10px 20px;
  border-top: 1px solid var(--roost-line); background: var(--roost-surface);
  font-size: 12px; color: var(--roost-text-3);
}
.table-footer .count { font-family: var(--roost-font-mono); }
.pager { margin-left: auto; display: flex; gap: 6px; }
.pager a, .pager span {
  padding: 4px 10px; border-radius: 7px; border: 1px solid var(--roost-line);
  background: var(--roost-surface-2); color: var(--roost-text-2); text-decoration: none; font-size: 12px;
}
.pager span { opacity: .5; }
.pager a:hover { background: var(--roost-surface-3); color: var(--roost-text); }

/* ══ Filter bar ══ */

.filter-bar {
  display: flex; gap: 10px; align-items: center; padding: 12px 20px;
  border-bottom: 1px solid var(--roost-line); flex-wrap: wrap;
}
.search-box {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  border-radius: 8px; border: 1px solid var(--roost-line-strong);
  background: var(--roost-surface); min-width: 220px;
}
.search-box svg { flex: none; color: var(--roost-text-3); }
.search-box input { border: 0; outline: none; background: transparent; font-family: inherit; font-size: 13px; color: var(--roost-text); width: 100%; }

.filter-pill {
  font-family: inherit; font-size: 12px; font-weight: 600; padding: 5px 11px;
  border-radius: 99px; border: 1px solid var(--roost-line); background: var(--roost-surface);
  color: var(--roost-text-2); cursor: pointer; text-decoration: none;
}
.filter-pill:hover { color: var(--roost-text); }
.filter-pill.active { border-color: var(--roost-info-bd); background: var(--roost-accent-soft); color: var(--roost-info-fg); }
.filter-meta { margin-left: auto; font-family: var(--roost-font-mono); font-size: 11px; color: var(--roost-text-3); }

/* ══ Toasts / banners ══ */

.toast { display: flex; gap: 12px; padding: 14px 16px; border-radius: 10px; }
.toast::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 99px; background: currentColor; margin-top: 6px; }
.toast--ok { background: var(--roost-ok-bg); border: 1px solid var(--roost-ok-bd); color: var(--roost-ok-fg); }
.toast--warn { background: var(--roost-warn-bg); border: 1px solid var(--roost-warn-bd); color: var(--roost-warn-fg); }
.toast--danger { background: var(--roost-danger-bg); border: 1px solid var(--roost-danger-bd); color: var(--roost-danger-fg); }
.toast-title { display: block; font-size: 13px; font-weight: 700; }
.toast-body { display: block; font-size: 13px; color: var(--roost-text-2); margin-top: 2px; }

/* ══ Empty state ══ */

.empty-state { display: grid; place-items: center; height: 100%; min-height: 300px; padding: 60px 24px; }
.empty-state-inner { text-align: center; max-width: 44ch; }
.empty-state svg { margin-bottom: 16px; opacity: .85; }
.empty-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.empty-body { font-size: 13px; color: var(--roost-text-3); margin-bottom: 20px; }

/* ══ Code / dual-pane inspector ══ */

.mono-chip {
  font-family: var(--roost-font-mono); font-size: 11px; color: var(--roost-text-2);
  background: var(--roost-surface-2); border: 1px solid var(--roost-line);
  border-radius: 6px; padding: 1px 7px;
}

.inspector {
  border-left: 1px solid var(--roost-line); background: var(--roost-code-bg);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0;
}
.inspector-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--roost-line); }
.inspector-title { font-family: var(--roost-font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--roost-text-3); }
.inspector-body { overflow: auto; min-height: 0; padding: 14px 16px; font-family: var(--roost-font-mono); font-size: 12px; line-height: 1.75; }
.inspector-foot { border-top: 1px solid var(--roost-line); padding: 10px 16px; display: flex; gap: 8px; align-items: center; }
.inspector-close { margin-left: auto; border: 0; background: transparent; color: var(--roost-text-3); font-size: 15px; cursor: pointer; line-height: 1; }
.inspector-close:hover { color: var(--roost-text); }

.code-pane { background: var(--roost-code-bg); font-family: var(--roost-font-mono); font-size: 12px; line-height: 1.75; white-space: pre; overflow: auto; }

/* Code snippet with a copy button (Settings → Agents & API). */
.snippet { position: relative; border: 1px solid var(--roost-line); border-radius: 8px; background: var(--roost-code-bg); overflow: hidden; }
.snippet + .snippet { margin-top: 10px; }
.snippet-code { padding: 10px 40px 10px 12px; line-height: 1.6; }
.snippet-copy { position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--roost-line); border-radius: 6px; background: var(--roost-surface); color: var(--roost-text-3); cursor: pointer; }
.snippet-copy:hover { color: var(--roost-text); border-color: var(--roost-line-strong); }
.snippet-copy svg { width: 14px; height: 14px; }
.code-key { color: var(--roost-code-key); }
.code-str { color: var(--roost-code-str); }
.code-num { color: var(--roost-code-num); }
.code-bool { color: var(--roost-code-bool); }
.code-punct { color: var(--roost-code-punct); }

/* ══ Misc ══ */

.spark { width: 100%; height: 32px; display: block; margin-top: 10px; }
.section-gap { display: grid; gap: 16px; }
/* Grid items default to min-width:auto, so a card holding a wide <pre> would
   grow past its track and overlap a neighbor; clamp them to the track. */
.section-gap > * { min-width: 0; }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.split-pane { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); height: 100%; min-height: 0; }
.split-pane--closed { grid-template-columns: minmax(0, 1fr); }
.pane-scroll { min-width: 0; min-height: 0; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }

.definition-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--roost-line); border: 1px solid var(--roost-line); border-radius: 10px; overflow: hidden; }
.definition-cell { background: var(--roost-inset); padding: 16px 18px; }
.definition-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--roost-text-3); margin-bottom: 8px; }
.definition-value { font-family: var(--roost-font-mono); font-size: 15px; color: var(--roost-text); word-break: break-word; }

.flash-stack { display: grid; gap: 10px; padding: 16px 22px 0; max-width: 720px; }

/* ══ Responsive — from Queue.dc.html ══ */

@media (max-width: 1439px) {
  [data-col="attempts"] { display: none !important; }
}
@media (max-width: 1279px) {
  .split-pane { grid-template-columns: minmax(0, 1fr); }
  .inspector { display: none; }
}
/* ── Phone nav: bottom tab bar + More sheet (≤900px) ──────
   The rail is desktop-only; below 900px it is hidden and the tab bar takes
   the shell's second grid row. 100dvh (not 100vh) so iOS Safari's toolbar
   never covers the bar; safe-area padding for the home indicator. */
.tabbar-wrap { display: none; }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; height: 100dvh; }
  .rail { display: none; }
  .tabbar-wrap { display: contents; }
  .tabbar {
    grid-row: 2; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    border-top: 1px solid var(--roost-line); background: var(--roost-surface-2);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 54px; padding: 6px 2px; font-family: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em;
    color: var(--roost-text-3); text-decoration: none; border: 0; background: transparent; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .tabbar-item svg { flex: none; }
  .tabbar-item.active { color: var(--roost-accent); }
  .tabbar-item:active { color: var(--roost-text); }

  .sheet { position: fixed; inset: 0; z-index: 40; }
  .sheet[hidden] { display: none; }
  .sheet-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.38); }
  .sheet-panel {
    position: absolute; left: 0; right: 0; bottom: 0; max-height: 85dvh; overflow-y: auto;
    background: var(--roost-surface); border-top: 1px solid var(--roost-line); border-radius: 16px 16px 0 0;
    padding: 8px 10px calc(12px + env(safe-area-inset-bottom)); box-shadow: var(--roost-shadow-2);
    animation: sheet-rise 180ms ease-out;
  }
  @keyframes sheet-rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  .sheet-grip { width: 36px; height: 4px; border-radius: 99px; background: var(--roost-line-strong); margin: 2px auto 10px; }
  .sheet-nav { display: grid; gap: 2px; }
  .sheet-nav .rail-item { min-height: 46px; font-size: 15px; padding: 10px 12px; }
  .sheet-nav .rail-item svg { width: 18px; height: 18px; }
  .sheet-panel .rail-foot { margin-top: 8px; padding: 12px 10px 0; }
  [data-col="message"] { display: none !important; }
}

/* ── Dual pane (flow builder: tree beside JSON) ───────── */
.dual-pane {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
@media (max-width: 1100px) {
  .dual-pane { grid-template-columns: minmax(0, 1fr); }
}

/* ── Full-screen stage pages (flow builder) ───────────── */
.content--stage { overflow: hidden; display: grid; grid-template-rows: minmax(0, 1fr); position: relative; }
.content--stage > .flash-stack { position: absolute; z-index: 30; top: 12px; right: 16px; pointer-events: none; animation: stage-toast-fade 400ms ease 4s forwards; }
@keyframes stage-toast-fade { to { opacity: 0; visibility: hidden; } }
.content--stage [data-react-mount] { min-height: 0; }
.canvas-insert { opacity: .6; }
.canvas-insert:hover { opacity: 1; border-color: var(--roost-accent) !important; color: var(--roost-accent) !important; }
@media (max-width: 1180px) {
  /* Scoped to the flow builder's stage: the sequence editor's definition pane
     also carries [data-roost="inspector"] and must stay in the split's flow. */
  [data-roost="stage"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-roost="stage"] > [data-roost="inspector"] { position: absolute !important; top: 0; right: 0; bottom: 0; width: min(372px, 92%); z-index: 20; box-shadow: var(--roost-shadow-2); }
}
@media (max-width: 720px) {
  [data-roost="metastrip"] { overflow-x: auto; flex-wrap: nowrap !important; }
  [data-roost="dock-body"] { max-height: 200px; }
}

/* ── The editor/preview split ──────────────────────────────
   One contract for all four editor screens: the email composer, the sequence
   editor, the layout editor and the theme editor. Each renders

     <div data-roost="split" [data-split-closed] [data-mobile-pane="…"]>
       <div data-roost="pane-toggle">…</div>   (optional, phone tablist)
       <div data-roost="edit">…</div>          (the editor column)
       <div data-roost="preview|inspector">…</div>  (the aside)

   and nothing about the geometry lives in the components themselves, so the
   four screens cannot drift apart again.

   Three states:
     wide  (≥1101px) side by side; the aside collapses on demand
     mid   (761–1100px) stacked — editor over aside, each scrolling itself
     phone (≤760px)  one pane at a time where a pane-toggle exists

   The aside is capped rather than pinned, and the cap steps down with the
   viewport. A pinned 520px cap starved the editor column below ~1400px: the
   meta row could not fit its own minimums, spilled sideways, and the opaque
   aside painted over it (there is no positioning involved — just overflow
   under a later, opaque sibling). */
[data-roost="split"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--roost-split-aside, 460px));
  height: 100%;
  min-height: 0;
}
@media (max-width: 1439px) { [data-roost="split"] { --roost-split-aside: 400px; } }
[data-roost="split"] > [data-roost="edit"] { min-width: 0; min-height: 0; }
[data-roost="split"] > [data-roost="preview"],
[data-roost="split"] > [data-roost="inspector"] { min-width: 0; min-height: 0; }

/* Collapsed: the editor takes the whole split and the aside is out of the
   layout. The operator's choice is remembered per screen (cookie on the ERB
   editors, localStorage on the React ones). */
[data-roost="split"][data-split-closed] { grid-template-columns: minmax(0, 1fr); }
/* On a phone the pane-toggle owns which pane is on screen, so a split that has
   one ignores `closed` there — everywhere else `closed` hides the aside. */
[data-roost="split"][data-split-closed]:not([data-mobile-pane]) > [data-roost="preview"],
[data-roost="split"][data-split-closed]:not([data-mobile-pane]) > [data-roost="inspector"] { display: none !important; }
@media (min-width: 761px) {
  [data-roost="split"][data-split-closed][data-mobile-pane] > [data-roost="preview"] { display: none !important; }
}

/* The collapse control — one affordance on all four screens: a button in the
   editor's toolbar that lights up while the aside is open, and a matching ×
   inside the aside's own bar. Phone hides it; the pane-toggle rules there. */
.split-toggle {
  flex: none; font-family: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  padding: 6px 11px; border-radius: 8px; border: 1px solid var(--roost-line-strong);
  background: var(--roost-surface); color: var(--roost-text-2); cursor: pointer;
}
.split-toggle.is-open { border-color: var(--roost-info-bd); background: var(--roost-accent-soft); color: var(--roost-info-fg); }
.split-close {
  flex: none; margin-left: auto; border: 0; background: transparent; color: var(--roost-text-3);
  font-size: 15px; line-height: 1; padding: 2px 4px; cursor: pointer;
}
@media (max-width: 760px) { .split-toggle { display: none !important; } }

/* react_mount's wrapper is a plain block, so the code island inside it had no
   height to resolve 100% against and collapsed to its own content — the same
   dead space below the editor that the stage height fix removed above. */
[data-roost="editor"] [data-react-mount] { height: 100%; }

/* The meta row above the body: whatever fits, wrapped, never a fixed floor. */
[data-roost="meta"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
[data-roost="meta"] > * { min-width: 0; }
[data-roost="actions-aside"] { min-width: 0; flex-wrap: wrap; }

/* Mid: stacked, each pane scrolling inside itself. The editor column drops its
   fixed row template here — at a fraction of the viewport a 1fr body row
   leaves nothing to write in, so the column scrolls as one document. */
@media (max-width: 1100px) {
  [data-roost="split"] {
    grid-template-columns: minmax(0, 1fr);
    /* The editor takes the larger share — it is where the work happens. */
    grid-template-rows: minmax(0, 1.4fr) minmax(0, 1fr);
  }
  [data-roost="split"][data-split-closed] { grid-template-rows: minmax(0, 1fr); }
  [data-roost="split"] > [data-roost="edit"] {
    grid-template-rows: none !important; grid-auto-rows: auto; overflow-y: auto;
  }
  [data-roost="split"] > [data-roost="edit"] [data-roost="editor"] { min-height: 320px; }
  [data-roost="split"] > [data-roost="preview"],
  [data-roost="split"] > [data-roost="inspector"] {
    border-left: 0 !important;
    border-top: 1px solid var(--roost-line);
  }
}

/* ── Email body WYSIWYG (TipTap surface) ───────────────── */
.roost-toolbar { display: flex; align-items: center; gap: 2px; padding: 6px 10px; border-bottom: 1px solid var(--roost-line); background: var(--roost-surface); flex-wrap: wrap; min-height: 40px; }
.roost-toolbtn { display: grid; place-items: center; min-width: 28px; height: 26px; padding: 0 7px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--roost-text-2); font-family: inherit; font-size: 12.5px; cursor: pointer; }
.roost-toolbtn:hover { background: var(--roost-inset); }
.roost-toolbtn.is-active { background: var(--roost-accent-soft); border-color: var(--roost-info-bd); color: var(--roost-info-fg); }
.roost-toolbar-rule { width: 1px; height: 18px; background: var(--roost-line); margin: 0 6px; }
.roost-linkbox { display: flex; align-items: center; gap: 6px; margin-left: 6px; }
.roost-linkbox input { width: 220px; font-family: var(--roost-font-mono); font-size: 12px; padding: 4px 8px; border-radius: 7px; border: 1px solid var(--roost-accent); background: var(--roost-surface); color: var(--roost-text); outline: none; box-shadow: 0 0 0 3px var(--roost-ring); }
.roost-linkbox button { border: 0; background: var(--roost-accent); color: var(--roost-accent-fg); font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 7px; cursor: pointer; }

.roost-prose { cursor: text; }
/* The writing surface fills its pane, so clicking anywhere below the last
   paragraph is a click on the contenteditable itself. Before the fullscreen
   stage got a real height this never showed; at full height the editable was
   200px inside an 800px box and the dead area below it swallowed clicks.
   EditorContent's wrapper carries no class of its own. */
.roost-prose > div:first-child { min-height: 100%; display: flex; flex-direction: column; }
.roost-prose .ProseMirror { outline: none; max-width: 640px; margin: 0 auto; padding: 20px 16px 40px; min-height: 200px; flex: 1 0 auto; width: 100%; }
.roost-prose .ProseMirror > * + * { margin-top: 12px; }
.roost-prose .ProseMirror p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--roost-text-2); }
.roost-prose .ProseMirror h1 { margin: 0; font-family: var(--roost-font-display); font-weight: 400; font-size: 26px; line-height: 1.15; letter-spacing: -0.01em; color: var(--roost-text); }
.roost-prose .ProseMirror h2 { margin: 0; font-family: var(--roost-font-display); font-weight: 400; font-size: 21px; line-height: 1.2; color: var(--roost-text); }
.roost-prose .ProseMirror h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--roost-text); }
.roost-prose .ProseMirror ul, .roost-prose .ProseMirror ol { margin: 0; padding-left: 22px; }
.roost-prose .ProseMirror li { font-size: 15px; line-height: 1.7; color: var(--roost-text-2); }
.roost-prose .ProseMirror li p { margin: 0; }
.roost-prose .ProseMirror blockquote { margin: 0; border-left: 3px solid var(--roost-line-strong); padding-left: 14px; color: var(--roost-text-3); }
.roost-prose .ProseMirror a { color: var(--roost-accent); text-decoration: underline; text-underline-offset: 2px; }
.roost-prose .ProseMirror code { font-family: var(--roost-font-mono); font-size: 13px; background: var(--roost-code-bg); border: 1px solid var(--roost-line); border-radius: 5px; padding: 1px 5px; }
.roost-prose .ProseMirror pre { margin: 0; font-family: var(--roost-font-mono); font-size: 12px; line-height: 1.6; color: var(--roost-text-2); background: var(--roost-code-bg); border: 1px solid var(--roost-line); border-radius: 8px; padding: 10px 12px; white-space: pre-wrap; }
.roost-prose .ProseMirror pre code { background: transparent; border: 0; padding: 0; }
.roost-prose .ProseMirror hr { border: 0; border-top: 1px solid var(--roost-line-strong); margin: 14px 0; }
.roost-prose .ProseMirror p.is-editor-empty:first-child::before { content: attr(data-placeholder); color: var(--roost-text-3); float: left; height: 0; pointer-events: none; }

.roost-chip { font-family: var(--roost-font-mono); font-size: 12px; padding: 1px 7px; border-radius: 6px; background: var(--roost-violet-bg); color: var(--roost-violet-fg); border: 1px solid var(--roost-violet-bd); white-space: nowrap; }
.roost-chip--warn { background: var(--roost-warn-bg); color: var(--roost-warn-fg); border-color: var(--roost-warn-bd); }
.roost-chip--url { padding: 2px 8px; }
.roost-chip--url input, .roost-btn-pill input { border: 0; background: transparent; color: inherit; font: inherit; outline: none; }
.roost-block-button { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.roost-btn-pill { display: inline-block; font-size: 13.5px; font-weight: 600; padding: 9px 18px; border-radius: 6px; background: var(--roost-accent); color: var(--roost-accent-fg); }
.roost-block-note { font-size: 11.5px; color: var(--roost-text-3); }
.roost-block-component { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 9px; border: 1px dashed var(--roost-line-strong); background: var(--roost-inset); }
.roost-mono { font-family: var(--roost-font-mono); font-size: 12px; }
.roost-violet { color: var(--roost-violet-fg); }
.roost-block-condition { border-left: 2px solid var(--roost-warn-bd); padding-left: 12px; }
.roost-condition-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.roost-condition-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--roost-warn-fg); }
.roost-condition-body > * + * { margin-top: 12px; }
.roost-image { max-width: 100%; border-radius: 8px; }
.roost-prose .ProseMirror-selectednode { outline: 2px solid var(--roost-accent); outline-offset: 2px; border-radius: 8px; }
.roost-bubble { display: flex; align-items: center; gap: 2px; padding: 4px 6px; background: var(--roost-surface); border: 1px solid var(--roost-line); border-radius: 10px; box-shadow: var(--roost-shadow-2); }

/* ── Emails lists (Broadcasts · Sequences): metric grid tracks follow the
   visible cells — a repeat(4) with two hidden cells leaves dead tracks and
   breaks the right gutter. ── */
[data-roost="list-row"] { gap: 16px; height: auto; min-height: 58px; padding: 11px 22px 11px 20px; }
[data-roost="list-row"] > * { min-width: 0; }
[data-roost="list-row"].is-sending { background: var(--roost-inset); }
.badge--live::before { animation: roost-pulse 2.4s ease-in-out infinite; }
[data-roost="list-row"] > [data-roost="rowaction"] form { margin: 0; }
[data-roost="list-row"]:focus-visible { outline: 2px solid var(--roost-accent); outline-offset: -2px; }
/* Fixed tracks + a floored name column need ~700px; narrower than that the
   list scrolls sideways rather than crushing the name (phones stack instead). */
[data-roost="list-scroll"] { overflow-x: auto; }
@media (min-width: 761px) {
  [data-roost="list-scroll"] > [data-roost="list-row"] { min-width: 700px; }
}
/* Emails lists: four cells → two below 1420. With an extension cell
   (data-ext, e.g. revenue) each state keeps that cell: 5 → 3. */
@media (max-width: 1420px) {
  [data-metrics="email"] { grid-template-columns: repeat(2, minmax(64px, max-content)) !important; }
  [data-metrics="email"] [data-roost="m-ctor"], [data-metrics="email"] [data-roost="m-unsub"] { display: none !important; }
  [data-metrics="email"][data-ext] { grid-template-columns: repeat(3, minmax(64px, max-content)) !important; }
}
/* Flows list: five fixed 82px cells → four below 1520 (Unsub) → three below 1340 (Clicks).
   With an extension cell: 6 → 5 → 4 — declared tracks always equal visible cells. */
@media (max-width: 1520px) {
  [data-metrics="flow"] { grid-template-columns: repeat(4, 82px) !important; }
  [data-metrics="flow"] [data-roost="m-unsub"] { display: none !important; }
  [data-metrics="flow"][data-ext] { grid-template-columns: repeat(5, 82px) !important; }
}
@media (max-width: 1340px) {
  [data-metrics="flow"] { grid-template-columns: repeat(3, 82px) !important; }
  [data-metrics="flow"] [data-roost="m-clicks"] { display: none !important; }
  [data-metrics="flow"][data-ext] { grid-template-columns: repeat(4, 82px) !important; }
}

/* People list (people-list drop): ≤1360 hides Subscribed and the reclaimed
   width goes to Last interaction; !important because the track template is
   inline. data-ext marks the extension (revenue) column present. ≤900 stacks
   the row and drops the header. */
@media (max-width: 1360px) {
  [data-roost="people-row"], [data-roost="people-head"] { grid-template-columns: minmax(0, 1fr) minmax(280px, 1.2fr) !important; }
  [data-roost="people-row"][data-ext], [data-roost="people-head"][data-ext] { grid-template-columns: minmax(0, 1fr) minmax(280px, 1.2fr) 104px !important; }
  [data-roost="people-row"] [data-roost="col-sub"], [data-roost="people-head"] [data-roost="col-sub"] { display: none !important; }
}
@media (max-width: 900px) {
  /* Both selectors: the ≤1360 [data-ext] rule outranks a bare attribute
     selector, so the stacked template must match its specificity too. */
  [data-roost="people-row"], [data-roost="people-row"][data-ext] { grid-template-columns: minmax(0, 1fr) !important; row-gap: 10px !important; height: auto !important; padding-top: 10px !important; padding-bottom: 10px !important; }
  [data-roost="people-head"] { display: none !important; }
  [data-roost="people-row"] [data-roost="col-rev"] { justify-self: start !important; text-align: left !important; }
}

/* Person profile primitives (person-detail drop) — the one definition of
   the tile/section/key-value pattern; helpers and extension partials all
   emit these classes. Hairlines draw ON cells; the card border is the
   outer edge. */
.profile-card { background: var(--roost-surface); border: 1px solid var(--roost-line); border-radius: 12px; overflow: hidden; min-width: 0; }
.profile-tile { background: var(--roost-surface); padding: 14px 16px; min-width: 0; box-shadow: -1px 0 0 var(--roost-line), 0 -1px 0 var(--roost-line); }
.profile-tile-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--roost-text-3); margin-bottom: 7px; }
.profile-tile-value { font-family: var(--roost-font-display); font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: -0.02em; color: var(--roost-text); }
.profile-tile-value--muted { color: var(--roost-text-3); }
.profile-tile-value--ok { color: var(--roost-ok-fg); }
.profile-tile-note { font-size: 11.5px; color: var(--roost-text-3); margin-top: 7px; text-wrap: pretty; }
.profile-section-head { display: flex; align-items: baseline; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--roost-line); flex-wrap: wrap; }
.profile-kv-key { font-family: var(--roost-font-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--roost-text-3); padding: 8px 0 8px 16px; border-top: 1px solid var(--roost-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-kv-val { min-width: 0; padding: 8px 16px 8px 12px; border-top: 1px solid var(--roost-line); }
.profile-empty { padding: 26px 16px; text-align: center; }
.profile-empty-title { font-size: 13.5px; font-weight: 700; margin-bottom: 4px; }
.profile-empty-body { font-size: 12.5px; color: var(--roost-text-3); max-width: 40ch; margin: 0 auto; }

/* Person profile (person-detail drop): hairline tile/tag grids narrow
   3 → 2 columns; the Attribution/Fields (and Purchases/Subscriptions) pair
   stacks; the meta strip drops its dividers on phones. */
@media (max-width: 1240px) {
  [data-roost="tiles"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  [data-roost="tagcols"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 1020px) {
  [data-roost="pair"] { grid-template-columns: minmax(0, 1fr) !important; }
}
/* Profile list rows (purchases/subscriptions/attributed): phones keep the
   name plus one number and drop the [data-roost="kv-extra"] columns. */
@media (max-width: 760px) {
  [data-roost="kvrows"] { grid-template-columns: minmax(0, 1fr) max-content !important; }
  [data-roost="kvrows"] [data-roost="kv-extra"] { display: none !important; }
}
@media (max-width: 760px) {
  [data-roost="tiles"], [data-roost="tagcols"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-roost="meta-item"] { border-left: 0 !important; padding-left: 0 !important; }
}

/* Person Emails tab: the disclosure caret sits left of the status pill and
   rotates when its row's ledger is open. */
[data-roost="send-caret"] { transition: transform 120ms ease; }
details[open] > summary [data-roost="send-caret"] { transform: rotate(90deg); }

/* Email editor pane toggle exists only on phones. */
[data-roost="pane-toggle"] { display: none; }

/* ══ Phone (≤760px) ══════════════════════════════════════
   One breakpoint for "held in one hand". Desktop rules above are untouched;
   everything here tightens spacing, stacks what was side-by-side, keeps tap
   targets ≥44px, and holds inputs at 16px so iOS Safari never zooms on focus.
   Tables: list tables swap to --cols-phone and hide [data-col~="phone"] cells;
   dense numeric tables wrap in .table-scroll and keep every column. */
.table-scroll { min-width: 0; }
@media (max-width: 760px) {
  /* header */
  .page-header { padding: 12px 14px 0; }
  .page-header-row { gap: 10px; }
  .page-title { font-size: 22px; }
  .page-sub { font-size: 12.5px; }
  .page-actions { margin-left: 0; flex: 1 1 100%; flex-wrap: wrap; }
  .page-actions > .btn, .page-actions > form { flex: 1 1 auto; }
  .page-actions > form > .btn { width: 100%; justify-content: center; }
  .page-actions > .btn { justify-content: center; }
  .page-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 10px -14px 0; padding: 0 14px; scroll-snap-type: x proximity; }
  .page-tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; min-height: 44px; padding: 9px 11px; scroll-snap-align: start; }

  /* touch + inputs */
  .btn { min-height: 40px; }
  .btn--sm { min-height: 34px; }
  .filter-pill { min-height: 34px; display: inline-flex; align-items: center; }
  .pager a, .pager span { padding: 8px 13px; }
  .input, .select, .textarea, .input--mono, .textarea--mono, .search-box input { font-size: 16px; }
  .search-box { min-width: 0; flex: 1 1 100%; }
  .filter-bar { padding: 10px 14px; gap: 8px; }
  .filter-meta { margin-left: 0; flex: 1 1 100%; }

  /* layout primitives. WebKit lets a <select> demand its longest option's
     width whatever width:100% says, which widened the broadcast composer and
     scrolled .content sideways on an iPhone — so grid/flex children under the
     pad clamp to their track, selects ellipsize, and .content clips instead
     of scrolling. */
  .content { overflow-x: hidden; }
  .content-pad { padding: 14px 12px; }
  .content-pad form > *, .content-pad section, .content-pad aside, .content-pad label, .content-pad .card { min-width: 0; max-width: 100%; }
  .select { text-overflow: ellipsis; }
  .card-pad { padding: 16px; }
  .card-title { margin-bottom: 14px; }
  .section-gap { gap: 12px; }
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat-tile { padding: 14px; }
  .stat-value { font-size: 28px; }
  .definition-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .definition-cell { padding: 12px; }
  .flash-stack { padding: 12px 12px 0; }
  .empty-state-inner { max-width: none; }

  /* tables */
  .table-head, .table-row { grid-template-columns: var(--cols-phone, var(--cols)); padding: 0 12px; column-gap: 10px; }
  [data-roost="list-row"] { row-gap: 10px; padding: 10px 12px; }
  [data-roost="list-row"] [data-roost="metrics"] { justify-self: start !important; }
  [data-roost="list-row"] [data-roost="metrics"] > span { text-align: left !important; }
  [data-roost="list-row"] [data-roost="rowaction"] { justify-self: start !important; }
  [data-roost="headrow"] { display: none; }
  [data-roost="list-sticky"] { position: static; } /* the wrapped toolbar would eat half the screen */
  [data-roost="list-totals"] { margin-left: 0; flex: 1 1 100%; }
  .table-row { height: auto; min-height: 52px; padding-top: 9px; padding-bottom: 9px; }
  .table-row--compact { min-height: 40px; padding-top: 5px; padding-bottom: 5px; }
  .table-head { height: 32px; font-size: 10.5px; }
  [data-col~="phone"] { display: none !important; }
  /* Or hide by column index: data-phone-hide="3 6 7" on head and rows. */
  [data-phone-hide] { grid-template-columns: var(--cols-phone, var(--cols)) !important; }
  [data-phone-hide~="1"] > :nth-child(1) { display: none !important; }
  [data-phone-hide~="2"] > :nth-child(2) { display: none !important; }
  [data-phone-hide~="3"] > :nth-child(3) { display: none !important; }
  [data-phone-hide~="4"] > :nth-child(4) { display: none !important; }
  [data-phone-hide~="5"] > :nth-child(5) { display: none !important; }
  [data-phone-hide~="6"] > :nth-child(6) { display: none !important; }
  [data-phone-hide~="7"] > :nth-child(7) { display: none !important; }
  [data-phone-hide~="8"] > :nth-child(8) { display: none !important; }
  .table-footer { padding: 10px 12px; flex-wrap: wrap; }
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-left: -16px !important; margin-right: -16px !important; }
  .table-scroll > .table-head { position: static; }
  .table-scroll > .table-head, .table-scroll > .table-row { min-width: var(--scroll-min, 640px); }
}

/* ── Email editor on a phone: one pane at a time, sticky save bar ── */
@media (max-width: 760px) {
  [data-roost="editor-head"] { padding: 10px 12px !important; gap: 6px 10px !important; }
  [data-roost="editor-title"] {
    font-size: 19px !important; white-space: normal !important; flex: 1 1 100%;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2;
  }
  [data-roost="editor-actions"] { flex: 1 1 100%; margin-left: 0 !important; flex-wrap: wrap; }
  [data-roost="editor-actions"] .btn { font-size: 12px; padding: 5px 11px; min-height: 34px; }

  /* Every split is already one column here (the ≤1100px stack). A split that
     carries a tablist swaps the second row for the toggle strip and shows one
     pane at a time; the others stay stacked. */
  [data-roost="split"][data-mobile-pane] { grid-template-rows: auto minmax(0, 1fr); }
  [data-roost="pane-toggle"] {
    display: flex; gap: 2px; padding: 8px 12px; background: var(--roost-surface); border-bottom: 1px solid var(--roost-line);
  }
  [data-roost="pane-toggle"] > button {
    flex: 1; min-height: 36px; font-family: inherit; font-size: 13px; font-weight: 600; border: 1px solid var(--roost-line);
    background: var(--roost-surface-2); color: var(--roost-text-3); cursor: pointer; border-radius: 0;
  }
  [data-roost="pane-toggle"] > button:first-child { border-radius: 8px 0 0 8px; }
  [data-roost="pane-toggle"] > button:last-child { border-radius: 0 8px 8px 0; }
  [data-roost="pane-toggle"] > button.is-active { background: var(--roost-accent-soft); border-color: var(--roost-info-bd); color: var(--roost-info-fg); }
  [data-roost="split"][data-mobile-pane="edit"] > [data-roost="preview"] { display: none !important; }
  [data-roost="split"][data-mobile-pane="preview"] > [data-roost="edit"] { display: none !important; }

  [data-roost="edit"] { grid-template-rows: none !important; grid-auto-rows: auto; overflow-y: auto; }
  [data-roost="meta-wrap"] { padding: 12px 12px 0 !important; gap: 10px !important; }
  [data-roost="meta"] { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  [data-roost="insert"] { position: relative; padding: 10px 12px 0 !important; }
  [data-roost="insert-anchor"] { position: static !important; }
  [data-roost="insert-pop"] { left: 0 !important; right: 0; min-width: 0 !important; width: auto; max-height: 50dvh; overflow-y: auto; }
  [data-roost="edit"] [data-roost="editor"] { margin: 10px 12px 0 !important; min-height: 55dvh !important; }
  [data-roost="usage"] { padding: 10px 12px 0 !important; order: 9; }
  [data-roost="actions"] {
    position: sticky; bottom: 0; z-index: 5; order: 10; margin-top: 10px;
    background: var(--roost-surface); border-top: 1px solid var(--roost-line);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important; gap: 8px !important;
  }
  /* Row 1: Save · Send a test. Row 2: the test recipient. Flags after. The
     agent-prompt link and the hint stay desktop-only. */
  [data-roost="actions"] > .btn--primary { flex: 1 1 auto; justify-content: center; order: 1; }
  [data-roost="actions"] > .btn:not(.btn--primary) { order: 2; }
  [data-roost="test-to"] { order: 3; flex: 1 1 100%; max-width: none !important; }
  [data-roost="actions"] > span { order: 4; }
  [data-roost="actions-aside"] { display: none !important; }
  [data-roost="insert-pop"] [role="menuitem"] { flex-wrap: wrap; gap: 2px 9px !important; }
  [data-roost="insert-pop"] [role="menuitem"] > span:first-child { flex: 1 1 100%; white-space: normal !important; overflow-wrap: anywhere; }
  [data-roost="insert-pop"] [role="menuitem"] > span:last-child { margin-left: 0 !important; }
  [data-roost="hint"] { display: none !important; }
  [data-roost="split"] [data-roost="preview-bar"] { padding: 8px 12px !important; }
  [data-roost="split"] [data-roost="preview-body"] { padding: 12px 8px !important; }

  /* Broadcast compose/show and the new-broadcast picker: stack the columns,
     preview below the form, iframe sized to the screen. */
  [data-roost="cols"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-roost="preview-card"] { position: static !important; }
  [data-roost="preview-frame"] { height: 60dvh !important; }
  [data-roost="audience"] label { flex-wrap: wrap; }
  [data-roost="audience"] label > .select { flex: 1 1 100% !important; margin-left: 0 !important; }

  .roost-toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .roost-toolbar::-webkit-scrollbar { display: none; }
  .roost-toolbtn { min-width: 34px; height: 32px; flex: none; }
  .roost-linkbox { flex: 1 0 auto; }
  .roost-linkbox input { width: 160px; font-size: 16px; }

  /* iOS zooms any focused control under 16px — inline-styled ones need the hammer. */
  [data-roost="edit"] input, [data-roost="edit"] select, [data-roost="preview"] input,
  .roost-prose .ProseMirror, .roost-prose .ProseMirror p, .roost-prose .ProseMirror li,
  [data-roost="edit"] .cm-editor, [data-roost="edit"] .cm-content { font-size: 16px !important; }
}