/* Broadcast-specific components.
 *
 * brand.css stays portable to the next THC app; anything only Broadcast needs
 * lives here. Same rules apply: plain CSS, tokens from brand.css, no inline
 * styles in templates, computed contrast (nothing here introduces new ink -
 * every colour is a brand.css token).
 */

/* ---------- Panels ----------
   A titled content surface. brand.css's .card is an image thumbnail; this is
   the app's write-surface: forms, summaries, row tables. */

.panel {
  background: var(--brand-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
  max-width: 32rem;
}

/* Panels holding a table or the composer need the full column width. */
.panel-wide {
  max-width: none;
}

.panel > h2:first-child,
.panel > h3:first-child {
  margin-top: 0;
}

/* ---------- Forms ---------- */

/* Label stacked over its control, the shape every form in the app uses. */
.field {
  display: block;
  margin-bottom: var(--space-4);
}

.field > span {
  display: block;
  font-weight: 500;
  font-size: 0.9rem;
  margin-bottom: var(--space-1);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="search"],
.field input[type="url"],
.field select,
.field textarea {
  width: 100%;
}

/* Narrow numeric inputs (row numbers, counts) should not span the panel. */
.field .narrow {
  width: 6rem;
}

/* A free-standing input outside a .field that still needs room to type in -
   exclusion reasons, recipient search. Capped so it never overflows a panel. */
.input-wide {
  width: 24rem;
  max-width: 100%;
}

/* A fieldset used purely to disable a group of controls at once (read-only
   campaigns), not to draw a box - the UA border/padding would look like a
   panel inside a panel. */
.bare-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/* ---------- Tables ---------- */

/* Wide tables (mapping preview, recipient rows) scroll inside their panel
   rather than widening the page. */
.table-scroll {
  overflow-x: auto;
}

/* ---------- Compose screen ---------- */

/* Editor column plus the right-hand inspector (UX-01). Collapses to one
   column below the composer's supported width (CMP-21 is desktop-first). */
.compose-layout {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
  flex-wrap: wrap;
}

.compose-main {
  flex: 1 1 40rem;
  min-width: 0;
}

.compose-inspector {
  flex: 0 1 24rem;
  min-width: 0;
}

/* Preview frame: 600px is the shell's content width (RND-03); the narrow
   variant is the mobile check. */
.preview-frame {
  width: 100%;
  height: 30rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--brand-surface);
}

.preview-frame.narrow {
  width: 360px;
}

.preview-frame.tall {
  height: 26rem;
}

/* Sandboxed shell/template previews sit on white regardless of page tint. */
.embed-frame {
  width: 100%;
  height: 15rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--brand-surface);
}

.embed-frame.tall {
  height: 25rem;
}

/* An embedded email preview stops at the shell's own content width (600px
   plus its border) rather than stretching past the message it is showing. */
.embed-frame.email {
  max-width: 620px;
}

/* Source editors (shell HTML, plain-text override) want a monospace face and
   room to work. */
.code-input {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
  font-size: 0.85rem;
}

/* The archived plain-text part, shown exactly as sent: preserve its wrapping
   without letting a long footnoted URL widen the page. */
.archive-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
  font-size: 0.85rem;
  color: var(--text-primary);
}

/* ---------- Small helpers ---------- */

/* A status line that updates in place (autosave indicator). */
.status-note {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-left: var(--space-2);
}

/* Remove the trailing margin where a panel ends with a paragraph. */
.tight {
  margin-bottom: 0;
}

/* Spaced block between panel sections. */
.section {
  margin: var(--space-4) 0;
}