/* public/stream/sections.css — shared layout + component classes for the
   Phase 1 web config sections (#sec-alerts / #sec-tips / #sec-loyalty /
   #sec-audio). Ported from the canonical mockup (mockups/omni-mock.css) and
   DESIGN-GUIDELINES §3.5/§3.2; tokens ONLY, no hardcoded color. Loaded once
   alongside control-surface.css. No page-local nav styling lives here. */

/* ── grid helpers (DESIGN-GUIDELINES responsive columns) ── */
.sec-grid { display: grid; gap: var(--space-4); align-items: start; }
.sec-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.sec-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.sec-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .sec-grid.cols-2, .sec-grid.cols-3, .sec-grid.cols-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sec-grid.cols-2, .sec-grid.cols-3, .sec-grid.cols-4 { grid-template-columns: 1fr; } }

/* The card body padding (the .card-head supplies its own padding/border). */
.sec-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }

/* ── well + tile (DESIGN-GUIDELINES §3.2) ── */
.well { background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--space-3); }
.tile { display: flex; flex-direction: column; gap: var(--space-2); }
.between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }

/* ── row (label + control), reused from the mockup pattern ── */
.sec-row { display: flex; align-items: center; gap: var(--space-3); padding: 10px var(--space-2); border-bottom: 1px solid var(--border); }
.sec-row:last-child { border-bottom: 0; }
.sec-row .grow { flex: 1; min-width: 0; }
.sec-row .grow .t { font-weight: 600; display: block; }
.sec-row .grow .s { color: var(--text-dim); font-size: 11.5px; display: block; }

/* ── form field + inputs (DESIGN-GUIDELINES §3.5) ── */
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field > .lbl { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); }
.field > .help { font-size: 11px; color: var(--text-faint); }
.input, .select, .textarea {
  width: 100%; font: inherit; color: var(--text);
  background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 8px var(--space-3);
}
.textarea { min-height: 64px; resize: vertical; font-family: var(--font-mono); font-size: 12px; }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--border-accent); }
.input[readonly] { color: var(--text-dim); }

/* ── toggle (track + knob), accessible role="switch" (DESIGN-GUIDELINES §3.5) ── */
.toggle {
  width: 40px; height: 22px; border-radius: var(--r-pill); background: var(--surface-2);
  border: 1px solid var(--border); position: relative; cursor: pointer; flex: none;
  transition: background var(--dur) var(--ease);
}
.toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--text-dim);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.toggle.on { background: var(--accent); }
.toggle.on::after { transform: translateX(18px); background: var(--text); }
.toggle[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* ── segmented control (binary/enum) (DESIGN-GUIDELINES §3.5) ── */
.seg { display: inline-flex; background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 3px; }
.seg button {
  border: 0; background: transparent; color: var(--text-dim); font: inherit; font-weight: 600;
  font-size: 11.5px; padding: 5px 12px; border-radius: var(--r-pill); cursor: pointer;
}
.seg button.on { background: var(--accent); color: var(--text); }

/* ── chips row (presets, socials) ── */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface-inset); font-size: 12px; }
.chip button { border: 0; background: transparent; color: var(--text-faint); cursor: pointer; font: inherit; padding: 0; line-height: 1; }
.chip button:hover { color: var(--danger); }

/* ── copy row (browser-source URL) ── */
.sec-copyrow { display: flex; gap: var(--space-2); }
.sec-copyrow .input { flex: 1; }

/* ── inline actions + notes ── */
.sec-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.sec-note { margin: 0; font-size: 12px; color: var(--text-dim); }
.sec-err { margin: 0; font-size: 12px; }
.sec-empty, .sec-loading { padding: var(--space-4); text-align: center; font-size: 12px; }

/* ── list of items (alerts/widgets/engagements) ── */
.sec-list { display: flex; flex-direction: column; gap: var(--space-2); }
.sec-item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-inset); }
.sec-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.sec-item-title { font-weight: 600; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.sec-item-meta { font-size: 11px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sec-item-actions { flex: none; display: flex; gap: var(--space-2); }

/* ── sub-tab strip (engagement vs loyalty placeholder) ── */
.subtabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.subtabs button { border: 0; background: transparent; color: var(--text-dim); font: inherit; font-weight: 600; padding: 8px var(--space-3); border-bottom: 2px solid transparent; cursor: pointer; }
.subtabs button.on { color: var(--text); border-bottom-color: var(--accent); }