/* Blabb website — shared components used by subpages alongside css/home.css.
   Everything here is referenced by live HTML; the retired pre-retheme design
   system (old nav/hero/pricing/history recreations) was removed 2026-07-17. */

:root {
  --accent: #DCB04B;
  --accent-muted: #CD9A33;
  --on-accent: #201607;
  --surface-icon-tile: #1E1F28;
  --surface-card: #0F1015;
  --text-primary: #F3EFE4;
  --text-secondary: #CDC8BA;
  --text-tertiary: #6E6A5F;
  --text-muted: #A6A194;
  --radius-pill: 999px;
}

/* Chips (metadata + legal tabs + edition before/after labels) */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-icon-tile);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: 12px;
  color: var(--text-secondary);
}

.chip.accent { background: var(--accent-muted); color: #fff; }
.chip.selected { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.chip.outline { background: var(--surface-card); border: 1px solid rgba(246, 234, 198, 0.12); color: var(--text-primary); }

/* Before/after demo text (edition + use-case pages) */

.seg-output { max-width: 720px; margin-left: auto; margin-right: auto; text-align: left; }
.seg-output > .chip.selected { margin-top: 24px; }

.seg-spoken {
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 14px;
  font-style: italic; /* spoken words read as speech; result stays upright */
  max-width: 70ch;
}

.seg-result {
  margin-top: 12px;
  font-size: 16px;
  max-width: 70ch;
}

.seg-result .ins { color: var(--accent); font-weight: 600; }
.seg-result .del { color: var(--text-tertiary); text-decoration: line-through; }

/* Legal document tables (/legal/*). Unstyled they take browser auto-layout, which
   sizes columns to their longest unwrapped run and overflows the 820px column —
   the horizontal scrollbar on the notices page. Constrain to the column and let
   cell text wrap instead. CSS only: the HTML is Store-certified and stays as is. */

.legal-doc table {
  width: 100%;
  margin-top: 22px;
  border-collapse: collapse;
  font-size: 14px;
}
.legal-doc th, .legal-doc td {
  text-align: left;
  vertical-align: top;
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid rgba(246, 234, 198, 0.09);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.legal-doc th { font-size: 12px; color: var(--text-muted); }