/* Canonical page chrome primitives — Phase 15.1.2 (2026-05-17).
   Shared by Home / Latest / History / Speaker detail / Channel
   detail. New canonical class names existing pages can ADOPT
   alongside their existing per-page classes; per-page CSS still
   wins for visuals it explicitly sets.

   Why a separate file: keeps `base.css` focused on global chrome
   (nav, topbar, scrim) and `_tokens.css` focused on color
   primitives. Adding more named classes to either of those
   would dilute their single-purpose. */


/* ---- Page header ---------------------------------------------
   Pattern modeled on History's `.history-v2-header*` (audit
   identified it as the canonical reference). Same row layout
   everywhere, same eyebrow/title/subtitle typography, same
   actions slot. Each page provides whatever specific actions
   live on the right; canonical sets the geometry only. */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
}
.page-header-copy {
  display: grid;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}
.page-header-title-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
.page-header-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.page-header-title {
  margin: 0;
  /* Inherit typography from the global h1/h2/section-title rules;
     the canonical class only resets margin so callers don't have
     to inline `style="margin:0"` on every page. Pages can layer
     on `.section-title` / `.page-title` etc. for the actual
     typography they want. */
}
.page-header-subtitle {
  margin: 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.5;
  max-width: 760px;
}
.page-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* Hero variant — Speaker detail + Channel detail keep the warm-
   cream gradient surface that visually distinguishes them as
   "entity detail" pages. Same `.page-header*` content classes
   work inside; the hero variant adds the surrounding card-style
   chrome that previously lived in per-page `.speaker-hero-shell`
   / `.channel-hero-shell` rules. */
.page-header--hero {
  padding: 22px 24px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--surface-warm) 0%, var(--surface-white) 42%, var(--surface-mint) 100%);
  border: 1px solid var(--border-warm-soft);
  box-shadow: 0 10px 24px rgba(24, 35, 49, 0.06);
}


/* ---- Filter chip family (Phase 15.1.3) ---------------------
   Speaker detail + Channel detail had their own
   `.speaker-filter-chip` + `.channel-active-filter-chip` rules
   that were visually identical to History's `.history-v2-active-
   chip*`. Canonical classes here let all three converge — JS
   renderers on Speaker/Channel now emit `.filter-chip` /
   `.filter-chip-cancel`; the per-page classes can stick around
   as additional hooks for layout or get pruned later.

   `.history-v2-active-chip` / `.history-v2-clear-all` are
   already shaped like the canonical values, so History's
   per-page CSS continues to win when it loads; the canonical
   set kicks in for anything that doesn't ship review-history's
   stylesheet. */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 4px 0 9px;
  border-radius: 999px;
  background: var(--surface-pale-cool);
  border: 1px solid var(--border-cool);
  color: var(--positive-text-deep);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.filter-chip-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border: none;
  background: transparent;
  color: inherit;
  padding: 0;
  cursor: pointer;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  transition: background 0.14s ease, color 0.14s ease;
}
.filter-chip-cancel:hover,
.filter-chip-cancel:focus-visible {
  background: rgba(53, 81, 70, 0.12);
  color: var(--ink-navy);
  outline: none;
}
.filter-chip-clear-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid var(--border-pale);
  background: var(--surface-pale-cool);
  color: var(--ink-slate);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
}
.filter-chip-clear-all:hover,
.filter-chip-clear-all:focus-visible {
  background: var(--surface-pale-cool);
  border-color: var(--border-mid);
  color: var(--ink-navy);
  outline: none;
}

/* Segmented toggle row — the "Card view / Table view" pill
   container History uses. Canonical name for any other page
   that wants the same pattern. */
.segmented-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border-pale);
  border-radius: 999px;
  background: var(--surface-pale-cool);
}


/* ---- List card primitive (Phase 15.1.4) ---------------------
   Canonical surface + shadow + hover pattern for "list of items"
   rows across History (`.history-v2-card`), Speaker detail
   (`.speaker-history-card`), Channel detail
   (`.channel-history-card`), Latest videos
   (`.latest-transcript-card`), and Workspace priority rows.
   Each per-page class already has shadow + hover lift with
   small variation (radius 14 vs 18, shadow opacity 0.05 vs
   0.09); this canonical baseline gives any NEW card a starting
   point + sets up future visual normalization (per-page rules
   can be incrementally migrated to use the same tokens).

   Tokens introduced (only used by .list-card so far; per-page
   rules left unchanged):
     --list-card-radius          14 px
     --list-card-shadow-rest     soft default elevation
     --list-card-shadow-hover    deeper hover state
     --list-card-lift            -2 px (translateY on hover)

   Each can be overridden inline (`.list-card { --list-card-radius:
   18px }`) per page if the canonical default doesn't fit. */
:root {
  --list-card-radius: 14px;
  --list-card-shadow-rest:  0 12px 26px rgba(40, 52, 67, 0.05);
  --list-card-shadow-hover: 0 24px 48px rgba(40, 52, 67, 0.12), 0 0 0 3px rgba(57, 95, 122, 0.045);
  --list-card-lift: -2px;
}
.list-card {
  display: block;
  border: 1px solid var(--border-pale);
  border-radius: var(--list-card-radius);
  background: var(--surface-white);
  box-shadow: var(--list-card-shadow-rest);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.list-card[data-card-href],
.list-card[role="button"],
.list-card.is-clickable,
a.list-card,
button.list-card {
  cursor: pointer;
}
.list-card:hover,
.list-card:focus-visible {
  transform: translateY(var(--list-card-lift));
  box-shadow: var(--list-card-shadow-hover);
  outline: none;
}


/* ---- Buttons -------------------------------------------------
   Canonical button tokens — Phase 15.2 (2026-05-17).

   The pre-existing class set in base.css stays (.button,
   .button-light, .button-secondary, .button-generate, .button-nav,
   .button-compact, .button-admin, .button-disabled, .button-fixed,
   .more-button, .table-action-button) — names are stable. What
   changes is that those rules will reach for the tokens below
   instead of hard-coding gradients, radii, font-sizes, and shadows.
   Per-page bespoke buttons (workspace-getting-started-btn,
   latest-report-cta, etc.) should also consume these tokens rather
   than re-rolling their own values. */
:root {
  /* Geometry */
  --btn-radius:        12px;
  --btn-radius-soft:   14px;   /* larger CTA cards */
  --btn-radius-pill:   999px;  /* pill / accent CTA */

  /* Size scale — height + horizontal padding + font */
  --btn-h-sm:          28px;
  --btn-h-md:          38px;
  --btn-h-lg:          44px;

  --btn-pad-x-sm:      12px;
  --btn-pad-x-md:      16px;
  --btn-pad-x-lg:      18px;

  --btn-font-sm:       11px;
  --btn-font-md:       13px;

  --btn-weight:        800;
  --btn-letter:        0.08em;

  /* Motion */
  --btn-transition:    transform 0.15s ease, box-shadow 0.15s ease,
                       filter 0.15s ease, background 0.16s ease,
                       border-color 0.16s ease;

  /* Elevation */
  --btn-shadow-rest:        0 10px 22px rgba(23, 35, 44, 0.16);
  --btn-shadow-hover:       0 14px 26px rgba(23, 35, 44, 0.18);
  --btn-shadow-soft-rest:   0 8px 18px rgba(33, 52, 70, 0.08);
  --btn-shadow-soft-hover:  0 12px 22px rgba(33, 52, 70, 0.12);
  --btn-shadow-accent-rest: 0 8px 18px rgba(23, 56, 45, 0.16);
  --btn-shadow-accent-hover:0 10px 22px rgba(23, 56, 45, 0.20);

  /* Surface — primary (dark ink, default .button) */
  --btn-primary-bg:           linear-gradient(135deg, var(--ink-navy) 0%, var(--ink-navy) 100%);
  --btn-primary-bg-hover:     var(--btn-primary-bg);
  --btn-primary-fg:           var(--button-action-text);
  --btn-primary-border:       rgba(19, 33, 44, 0.9);

  /* Surface — secondary (slightly brighter slate, .button-generate / .button-secondary) */
  --btn-secondary-bg:         linear-gradient(135deg, var(--ink-navy) 0%, var(--ink-slate) 100%);
  --btn-secondary-fg:         var(--button-action-text);
  --btn-secondary-border:     var(--ink-slate);

  /* Surface — accent (green, .button-nav / .more-button) */
  --btn-accent-bg:            var(--button-nav-bg);
  --btn-accent-fg:            var(--surface-white);
  --btn-accent-border:        var(--positive-text-deep);

  /* Surface — ghost / light (.button-light) */
  --btn-ghost-bg:             rgba(255, 255, 255, 0.78);
  --btn-ghost-bg-hover:       var(--surface-pale-cool);
  --btn-ghost-fg:             var(--ink-navy);
  --btn-ghost-border:         var(--border-cool);

  /* Surface — admin / destructive (.button-admin) */
  --btn-admin-bg:             linear-gradient(135deg, var(--danger-bg-bright) 0%, var(--danger-bg-bright) 100%);
  --btn-admin-fg:             var(--button-action-text);
  --btn-admin-border:         var(--rust-deep);

  /* Surface — disabled */
  --btn-disabled-bg:          var(--button-disabled-bg);
  --btn-disabled-fg:          var(--surface-white);
}


/* ---- Typography ----------------------------------------------
   Canonical type tokens — Phase 15.2.3 (2026-05-17).

   Audit on the 5 pages + base.css found 30+ distinct font-sizes
   with ~9 carrying the bulk of usage. These tokens cover the
   bulk; outliers (12.5, 13.5, 14.25, etc.) are intentional
   fine-tuning and stay as raw values for now — collapsing them
   would shift type vertically and needs visual review.

   Use a token whenever a new rule needs a canonical step. Stop
   reaching for raw `font-size: 12px` in component CSS. */
:root {
  /* Font-size scale */
  --type-3xs:    10px;    /* extra-small label (timestamps, score chips) */
  --type-tiny:   10.5px;  /* chip / eyebrow labels (17 uses) */
  --type-2xs:    11px;    /* secondary tiny labels */
  --type-xs:     12px;    /* small body, compact UI text */
  --type-sm:     13px;    /* default body, button text */
  --type-md:     14px;    /* body emphasis, list-item titles */
  --type-lg:     18px;    /* section titles */
  --type-xl:     20px;    /* large headlines (lists / level cards) */
  --type-2xl:    22px;    /* page titles */

  /* Weight scale — top-3 (700/800/600) already cover 78%
     of usage codebase-wide; 760 + 740 + 680 are the
     "non-loud bold" variants designers reach for. */
  --type-weight-medium:  600;
  --type-weight-bold:    700;
  --type-weight-heavy:   760;
  --type-weight-strong:  800;
  --type-weight-black:   900;

  /* Letter-spacing scale (tracking on uppercase labels) */
  --type-track-tight:    0.01em;
  --type-track-normal:   0.04em;
  --type-track-wide:     0.06em;
  --type-track-loose:    0.08em;

  /* Line-height */
  --type-leading-tight:  1.15;
  --type-leading-snug:   1.4;
  --type-leading-normal: 1.5;
}


/* ---- Spacing ------------------------------------------------
   Canonical spacing scale — Phase 15.2.4 (2026-05-17).

   Audit on the 5 pages found gap is the heaviest single-value
   target. Padding/margin sprawl is mostly compound shorthands
   (2-4 values), which don't tokenize cleanly — those stay as
   raw values for now. The scale below is even-step; odd-pixel
   gaps (3/5/7/9/11px) are designer fine-tunes and stay raw.

   Use a token when adding a new rule. Stop reaching for raw
   `gap: 10px` in component CSS. */
:root {
  --space-1:   4px;
  --space-2:   6px;
  --space-3:   8px;
  --space-4:  10px;
  --space-5:  12px;
  --space-6:  14px;
  --space-7:  16px;
  --space-8:  18px;
  --space-9:  20px;
  --space-10: 24px;
}


/* ---- Form controls -------------------------------------------
   Canonical input/select/textarea tokens — Phase 15.2.5
   (2026-05-17).

   The 5 pages currently roll three near-identical search-input
   patterns (workspace-search, channel-library-search,
   speaker-archive-input/select, latest-filter-search-input).
   Heights, radii, and focus rings should converge on these
   tokens; intentional surface differences (pill radius vs
   soft radius) stay per-page. */
:root {
  /* Height + padding */
  --field-h-sm:        32px;
  --field-h-md:        36px;
  --field-h-lg:        40px;
  --field-pad-x:       12px;

  /* Surface */
  --field-bg:          var(--surface-white);
  --field-border:      1px solid var(--border-pale);
  --field-border-hover:1px solid var(--border-mid);
  --field-radius:      12px;
  --field-radius-pill: var(--btn-radius-pill);

  /* Focus ring — cool steel halo */
  --field-focus-border: rgba(49, 89, 103, 0.34);
  --field-focus-ring:   0 0 0 3px rgba(49, 89, 103, 0.09);

  /* Active filter state (e.g. select with a value applied) */
  --field-active-bg:     var(--surface-pale-cool);
  --field-active-border: rgba(42, 84, 57, 0.22);
  --field-active-fg:     var(--positive-text-deep);
}


/* ---- Modal / dialog chrome -----------------------------------
   Canonical modal tokens — Phase 15.2.5 (2026-05-17).

   Workspace has a bespoke .workspace-signal-modal family.
   The shared `.app-dialog*` system in base.css is the broader
   canonical surface. Tokens here let both honor the same
   geometry and elevation. Full collapse of workspace-signal-
   modal into .app-dialog is a separate phase. */
:root {
  --modal-backdrop-bg:     rgba(24, 35, 49, 0.42);
  --modal-card-bg:         var(--surface-white);
  --modal-card-radius:     18px;
  --modal-card-shadow:     0 28px 56px rgba(24, 35, 49, 0.24),
                           0 0 0 1px var(--border-pale);
  --modal-card-pad:        16px;
  --modal-card-pad-tight:  13px;
}