/*
 * theme.css — Outbound's design-system values.
 *
 * Monochrome-ink: one ink colour on one paper ground, no accent hue at all.
 * --accent, --accent-text, --accent-strong and --ink are the SAME colour on
 * purpose — hierarchy is carried by size, weight and space, never by hue.
 * Corners are 4px everywhere, shadows are near-off (tier 0), one grotesk
 * family (Instrument Sans) does display and body, IBM Plex Mono carries
 * every number: segment counts, character counts, delivery rates, dates.
 */

:root {
  --canvas: #fafaf8;
  --surface: #fdfdfc;
  --surface-2: #f0efe9;
  --border: #e3e1da;
  --border-strong: #b8b5ac;
  --ink: #14130f;
  --muted: #676663;
  --accent: #14130f;
  --accent-hover: #322f28;
  --accent-ink: #fafaf8;
  --accent-text: #14130f;
  --accent-strong: #14130f;
  --accent-soft: #ebe9e3;
  --accent-border: #b8b5ac;
  --success: #3f5d3a;
  --success-ink: #fafaf8;
  --success-soft: #e6e9e2;
  --success-strong: #3f5d3a;
  --warning: #7a5a24;
  --warning-ink: #fafaf8;
  --warning-soft: #ede7da;
  --warning-strong: #7a5a24;
  --danger: #7a3226;
  --danger-ink: #fafaf8;
  --danger-soft: #ede2de;
  --danger-strong: #7a3226;
  --chart-1: #14130f;
  --chart-2: #4a4842;
  --chart-3: #676663;
  --chart-4: #8c8a84;
  --chart-5: #b0aea6;
  --chart-6: #d4d2c8;

  --font-display: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.04em;

  --radius-btn: 4px;
  --radius-card: 4px;
  --radius-input: 4px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: none;
  --shadow-raised: 0 2px 10px rgba(20, 19, 15, 0.08);
  --shadow-btn: none;
  --card-pad: 1.25rem;
  --caps: none;
  --caps-tracking: 0;
  --btn-weight: 600;
  --measure: 68ch;
}

html[data-theme="dark"] {
  --canvas: #131209;
  --surface: #1a1912;
  --surface-2: #201f17;
  --border: #322f24;
  --border-strong: #514c3c;
  --ink: #f6f4ec;
  --muted: #a19d90;
  --accent: #f6f4ec;
  --accent-hover: #ddd9cb;
  --accent-ink: #14130f;
  --accent-text: #f6f4ec;
  --accent-strong: #f6f4ec;
  --accent-soft: #24231a;
  --accent-border: #514c3c;
  --success: #9db393;
  --success-ink: #14130f;
  --success-soft: #23281f;
  --success-strong: #9db393;
  --warning: #cbab73;
  --warning-ink: #14130f;
  --warning-soft: #2b2519;
  --warning-strong: #cbab73;
  --danger: #cf9585;
  --danger-ink: #14130f;
  --danger-soft: #2c2018;
  --danger-strong: #cf9585;
  --chart-1: #f6f4ec;
  --chart-2: #cecabb;
  --chart-3: #a19d90;
  --chart-4: #837f72;
  --chart-5: #625e51;
  --chart-6: #423f34;
}

/*
 * app.css — Outbound's own stylesheet. Everything here reads theme.css
 * tokens only. This is the plain-text-tool look: a left rail, a paper
 * canvas, one ink colour, 4px corners, no shadow, no colour-coded status.
 */

/* ---- Shell: the rail + content pane -------------------------------- */
.shell { @apply flex min-h-screen; }

.rail {
  @apply fixed inset-y-0 left-0 z-30 flex w-16 flex-col border-r border-border bg-surface sm:w-56;
}
.rail-mark {
  @apply flex items-center justify-center gap-2 border-b border-border px-2 py-5 sm:justify-start sm:px-5;
}
.rail-mark-glyph {
  @apply grid size-8 place-items-center border border-ink font-mono text-xs font-semibold sm:hidden;
}
.rail-mark-word {
  @apply hidden font-display text-lg font-semibold tracking-tight sm:inline;
}
.rail-list { @apply flex-1 overflow-y-auto py-3; }
.rail-item {
  @apply relative flex items-center justify-center gap-3 px-2 py-3 text-sm text-muted no-underline
    transition-colors duration-150 sm:justify-start sm:px-5;
}
.rail-item:hover { @apply bg-surface-2 text-ink; }
.rail-item.is-active { @apply bg-accent-soft font-medium text-ink; }
.rail-item.is-active::before {
  content: "";
  @apply absolute inset-y-2 left-0 w-0.5 bg-ink;
}
.rail-icon { @apply shrink-0; }
.rail-label { @apply hidden truncate sm:inline; }
.rail-count { @apply ml-auto hidden shrink-0 font-mono text-xs text-muted sm:inline; }
.rail-foot { @apply flex justify-center border-t border-border p-3 sm:justify-start sm:p-4; }

.shell-main { @apply ml-16 min-w-0 flex-1 sm:ml-56; }

/* ---- Page head: one step smaller than a landing hero ---------------- */
.page-head { @apply border-b border-border px-5 py-8 sm:px-10; }
.page-head-kicker { @apply font-mono text-xs text-muted; }
.page-head-title { @apply mt-1 font-display text-3xl tracking-tight sm:text-4xl; }
.page-head-sub { @apply mt-2 max-w-prose text-muted; }

/* ---- Composer --------------------------------------------------------- */
.composer-grid { @apply grid gap-8 px-5 py-8 sm:px-10 lg:grid-cols-[1fr_320px] lg:items-start; }

.token-row { @apply flex flex-wrap gap-2; }
.token-chip {
  @apply inline-flex h-9 cursor-pointer items-center gap-1 border border-border-strong bg-surface px-2.5
    font-mono text-xs text-muted transition-colors duration-150;
  border-radius: var(--radius-btn, 4px);
}
.token-chip:hover { @apply border-ink text-ink; }

.segment-meter {
  @apply mt-3 flex flex-wrap items-center justify-between gap-x-4 gap-y-1 border-t border-border pt-3
    font-mono text-xs text-muted;
}
.segment-meter strong { @apply font-mono font-semibold text-ink; }

.audience-line { @apply mt-2 font-mono text-xs text-muted; }

/* ---- The phone preview: the one thing that moves on load -------------- */
.phone {
  @apply relative mx-auto w-full max-w-[300px] border-2 border-ink bg-canvas p-2.5 sm:sticky sm:top-8;
  border-radius: 1.75rem;
}
.phone-notch {
  @apply mx-auto mb-2 h-1.5 w-16 bg-ink;
  border-radius: 999px;
  opacity: 0.85;
}
.phone-screen {
  @apply flex h-[400px] flex-col gap-2 overflow-y-auto bg-surface p-3;
  border-radius: 1.1rem;
}
.phone-thread-label {
  @apply mb-1 text-center font-mono text-[0.65rem] uppercase tracking-wide text-muted;
}
.phone-bubble {
  @apply max-w-[88%] self-start whitespace-pre-wrap border border-border bg-surface-2 px-3 py-2
    text-sm leading-snug text-ink;
  border-radius: 0.6rem;
  animation: bubble-in 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.phone-bubble-empty { @apply text-muted; }
.phone-caption { @apply mt-3 text-center font-mono text-xs text-muted; }

@keyframes bubble-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
html.reduced-motion .phone-bubble { animation: none; }

/* ---- Dense rows: contacts, campaign history, reports, templates ------- */
.row-list { @apply divide-y divide-border border border-border bg-surface; border-radius: var(--radius-card, 4px); }
/* Below sm, each piece of a row gets its own full-width line — deliberately
   stacked, rather than letting one item shrink to nothing or fall alone
   onto a second line beside the others. */
.row-list-item { @apply flex flex-col items-start gap-2 px-5 py-4 sm:flex-row sm:flex-wrap sm:items-center sm:gap-x-6 sm:gap-y-2; }
.row-list-item:hover { @apply bg-surface-2; }
.row-title { @apply font-medium text-ink; }
.row-sub { @apply text-sm text-muted; }
.row-meta { @apply flex items-center gap-4 font-mono text-xs text-muted sm:ml-auto; }

.tinted-band { @apply border border-border bg-surface-2; border-radius: var(--radius-card, 4px); }

/* Campaign history rows are <details>; we draw our own chevron, so the
   browser's own disclosure triangle is switched off in every engine. */
.row-list details > summary { list-style: none; }
.row-list details > summary::-webkit-details-marker { display: none; }
.row-list details[open] .icon.ml-2 { transform: rotate(180deg); }

.token-underline { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }

/* ---- Status glyphs: shape and weight tell them apart, never colour ---- */
.status-glyph { @apply inline-flex items-center gap-1.5 font-mono text-sm; }
.glyph { @apply inline-block w-3 text-center; }

/* ---- Analytics numerals ------------------------------------------------ */
.stat-row { @apply grid grid-cols-2 gap-x-8 gap-y-10 px-5 py-10 sm:px-10 lg:grid-cols-4; }
.stat-num { @apply font-mono text-4xl font-semibold tabular-nums text-ink sm:text-5xl; }
.stat-label { @apply mt-2 max-w-[20ch] text-sm text-muted; }

/* ---- Scheduler rows ----------------------------------------------------- */
.sched-row { @apply flex flex-wrap items-center gap-4 border border-border-strong bg-surface px-4 py-3; border-radius: var(--radius-card, 4px); }

/* ---- Send now / Schedule segmented toggle ------------------------------- */
.seg2 { @apply inline-flex border border-border-strong; border-radius: var(--radius-btn, 4px); }
.seg2-btn {
  @apply h-9 cursor-pointer select-none px-4 text-sm font-medium text-muted transition-colors duration-150;
}
.seg2-btn:first-child { border-right: var(--border-w, 1px) solid var(--border-strong); }
.seg2-btn[aria-pressed="true"] { @apply bg-accent text-accent-ink; }

/* ---- 390px: the rail stays a rail, just narrower ------------------------ */
@media (width < 400px) {
  .stat-row { @apply grid-cols-2; }
}