/* ═══════════════════════════════════════════════════════════════════════════
   ui.css — SubstanceSearch shared UI framework
   ─────────────────────────────────────────────────────────────────────────
   Load order: layout.html →  styles.css  →  THIS FILE  →  per-page CSS.
   styles.css owns the base tokens (--bg, --bg-alt, --bg-elevated, --text,
   --text-dim, --text-muted, --border, --accent, --category-*). This file
   only ADDS tokens and shared `ss-`-prefixed components on top of them.

   Theme mechanism: tokens live on `body, body.light` with overrides on
   `body.dark` — exactly mirroring styles.css. The theme is a BODY CLASS
   (never a data-theme attribute).

   BREAKPOINT CONVENTION (CSS vars cannot drive @media — this is policy):
     md = 768px   (matches the global header collapse in styles.css)
     sm = 480px
   New/migrated rules use ONLY these two. 380/400/500/600/640/700px queries
   are legacy and shrink to these during migration.

   UNIT CONVENTION: rem for font-size & spacing; em for letter-spacing;
   16px is allowed ONLY as --fs-input-mobile (iOS focus-zoom guard).
   FONT-WEIGHT CONVENTION: 400 / 600 / 700 only ('bold'→700, 650→600|700;
   800 permitted only where DM Sans is actually loaded).

   Page CSS may OVERRIDE ss- component styles during migration, but must
   never re-define ss- classes' base rules (split-brain ownership).
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════ 1. Design tokens — light (default) ═════════════════ */
body,
body.light {
    /* ── Accent derivation ─────────────────────────────────────────────
       --accent stays #ff008b (styles.css). --accent-rgb enables tints:
       rgba(var(--accent-rgb), .12) replaces every hardcoded orange/
       magenta/violet/pink accent tint. */
    --accent-rgb: 255, 0, 139;
    --focus-ring: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
    --accent-crosscheck: #14b8a6;   /* Cross-Check brand teal (nav + promo) */

    /* ── Semantic status colors ────────────────────────────────────────
       Values = the substance-page .warning-banner palettes (largest
       existing install base) so migration is pixel-neutral there.
       *-bg     : callout fill          *-ink  : text INSIDE the callout
       *(-text) : standalone text color *-tint : badge/chip fill          */
    --danger:        #d32f2f;
    --danger-bg:     #fce4ec;
    --danger-ink:    #6a1b1b;
    --danger-tint:   rgba(239, 68, 68, 0.15);

    --warning:       #f9a825;
    --warning-bg:    #fff8e1;
    --warning-ink:   #5d4200;
    --warning-text:  #b26a00;       /* AA-safe amber for text on plain bg */
    --warning-tint:  rgba(245, 158, 11, 0.15);

    --success:       #2e7d32;
    --success-bg:    #e8f5e9;
    --success-ink:   #2e7d32;
    --success-tint:  rgba(16, 185, 129, 0.15);

    --info:          #1976d2;
    --info-bg:       #e3f2fd;
    --info-ink:      #0d3b66;
    --info-tint:     rgba(59, 130, 246, 0.12);

    --neutral-ink:   rgb(96, 124, 168);   /* "ambiguous/neutral" slate */

    /* ── Combination-safety (TripSit) statuses ─────────────────────────
       Canonical palette = substance.css combo pills. Consumed by
       substance.css, compare.css, stats.css, cross_check JS, and
       combo_resolver.py must emit these same hexes. */
    --combo-dangerous:      #e53935;
    --combo-unsafe:         #f57c00;
    --combo-caution:        #fdd835;
    --combo-caution-ink:    #333;        /* text ON the yellow chip */
    --combo-caution-text:   #c6a700;     /* yellow as standalone text */
    --combo-lr-synergy:     #43a047;
    --combo-lr-decrease:    #5c9eed;
    --combo-lr-nosynergy:   #78909c;

    /* ── Dose tiers (promoted from .substance-page --chart-*) ──────────
       One source for dose tables, dose calculator, legends, Cross-Check
       TIERCOL, reports dose-response, _dose_risk tiers. */
    --tier-threshold:  #95a5a6;
    --tier-light:      rgb(144, 238, 144);
    --tier-common:     rgb(255, 165, 0);
    --tier-strong:     rgb(255, 99, 71);
    --tier-heavy:      rgb(255, 69, 0);
    --tier-ink-low:    #222;   /* text on light/common cells */
    --tier-ink-high:   #fff;   /* text on strong/heavy cells */

    /* ── Phase colors (duration timeline + Cross-Check curves) ─────────*/
    --phase-onset:   #64b5f6;
    --phase-comeup:  #81c784;
    --phase-peak:    #ff8a65;
    --phase-offset:  #ba68c8;
    --phase-after:   #90a4ae;

    /* ── Source brand colors (trip-report providers) ───────────────────*/
    --brand-reddit:      #ff4500;
    --brand-erowid:      #6a4ca8;
    --brand-bluelight:   #5b9bd5;
    --brand-shulgin:     #d4a843;
    --brand-pw:          #6b8e23;
    --brand-effectindex: #e06c75;
    --brand-nervewing:   #b07cd8;

    /* ── Category chip ink (over var(--category-*) fills) ──────────────*/
    --category-ink: #1a1a1a;

    /* ── Neutral tints (theme-aware; replace rgba(255,255,255,x)) ──────*/
    --tint-1: rgba(0, 0, 0, 0.03);   /* row hover, subtle track */
    --tint-2: rgba(0, 0, 0, 0.06);   /* chip/tag fill, bar track */
    --tint-3: rgba(0, 0, 0, 0.10);   /* hover state of tint-2 */

    /* ── Elevation (from compare.css/category_scales.css, the only two
         files that already theme their shadows) ───────────────────────*/
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.07), 0 4px 12px rgba(0,0,0,0.04);
    --shadow-md:  0 2px 6px rgba(0,0,0,0.09), 0 8px 24px rgba(0,0,0,0.06);
    --shadow-pop: 0 8px 24px rgba(0,0,0,0.25);   /* dropdowns, tooltips */

    /* ── Radius scale ───────────────────────────────────────────────────
       xs 4px tags/chips · sm 6px buttons · md 8px inputs/callouts/cards ·
       lg 12px feature cards · pill 999px · circles stay 50% literal.   */
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-pill: 999px;

    /* ── Spacing scale (rem; replaces px one-offs and 1.1/1.2/1.6rem) ──*/
    --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
    --space-4: 1rem;     --space-5: 1.25rem; --space-6: 1.5rem;
    --space-8: 2rem;     --space-10: 2.5rem;
    --section-gap:    2.5rem;
    --section-gap-sm: 1.5rem;
    --gutter:   1rem;
    --grid-gap: 1rem;
    --card-min: 240px;
    --page-narrow: 900px;
    --page-wide:  1100px;

    /* ── Typography ─────────────────────────────────────────────────────*/
    --font-sans:  "Helvetica Neue", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, sans-serif;
    --font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo,
                  Consolas, monospace;
    --font-serif: Georgia, 'Iowan Old Style', 'Palatino Linotype',
                  'Book Antiqua', serif;

    --fs-micro:   0.62rem;   /* HARD FLOOR — nothing renders below this */
    --fs-label:   0.72rem;
    --fs-small:   0.8rem;
    --fs-body-sm: 0.875rem;
    --fs-body:    1rem;
    --fs-h4:      1.15rem;
    --fs-h3:      1.25rem;   /* standard section title */
    --fs-h2:      1.75rem;   /* large page-section / data-page h1 */
    --fs-h1:      2.5rem;    /* global h1 */
    --fs-hero:    2.8rem;
    --fs-input-mobile: 16px; /* iOS focus-zoom guard — px on purpose */

    /* ── Motion ─────────────────────────────────────────────────────────*/
    --t-fast: 0.15s ease;          /* hovers, color changes */
    --t-slow: 0.3s ease;           /* expansions, reveals */
    --t-fill: width 0.4s ease;     /* score/confidence bar fills */
}

/* ═══════════════════ 1b. Design tokens — dark overrides ═════════════════ */
body.dark {
    --focus-ring: 0 0 0 3px rgba(var(--accent-rgb), 0.25);

    --danger:        #ef5350;
    --danger-bg:     rgba(211, 47, 47, 0.12);
    --danger-ink:    #ef9a9a;

    --warning-bg:    rgba(249, 168, 37, 0.12);
    --warning-ink:   #ffd54f;
    --warning-text:  #ffca28;

    --success:       #66bb6a;
    --success-bg:    rgba(46, 160, 67, 0.15);
    --success-ink:   #81c784;

    --info:          #64b5f6;
    --info-bg:       rgba(25, 118, 210, 0.12);
    --info-ink:      #90caf9;

    --neutral-ink:   rgb(150, 175, 220);

    --combo-dangerous:    #c62828;
    --combo-unsafe:       #e65100;
    --combo-caution:      #f9a825;
    --combo-caution-ink:  #1a1a1a;
    --combo-caution-text: #fdd835;
    --combo-lr-synergy:   #2e7d32;
    --combo-lr-decrease:  #3a7bd5;
    --combo-lr-nosynergy: #607d8b;

    --tier-threshold: #7f8c8d;
    --tier-light:     rgb(110, 200, 110);
    --tier-common:    hsl(39, 90%, 45%);
    --tier-strong:    rgb(210, 75, 55);
    --tier-heavy:     rgb(200, 55, 20);

    --brand-erowid:   #b69bdb;

    --category-ink: #f0f0f0;

    --tint-1: rgba(255, 255, 255, 0.03);
    --tint-2: rgba(255, 255, 255, 0.06);
    --tint-3: rgba(255, 255, 255, 0.13);

    --shadow-sm:  0 1px 3px rgba(0,0,0,0.25), 0 4px 12px rgba(0,0,0,0.15);
    --shadow-md:  0 2px 6px rgba(0,0,0,0.30), 0 8px 24px rgba(0,0,0,0.20);
    --shadow-pop: 0 8px 24px rgba(0,0,0,0.50);
}

/* ═══════════════════ 2. Motion primitives ═══════════════════════════════ */
@keyframes ss-fade-up {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ss-fade-up { animation: ss-fade-up 0.25s ease-out both; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ═══════════════════ 3. Page wrappers ═══════════════════════════════════ */
/* Reading pages (substance, reports, cross-check, safety, compare, home
   content, disclaimer, methodology). Override --page-max per page during
   transition if a width change is not wanted yet. */
.ss-page {
    max-width: var(--page-max, var(--page-narrow));
    margin: 0 auto;
    padding: 0 var(--gutter) var(--space-8);
}
/* Data-dense pages (stats, scales, pills, category). */
.ss-page--wide { --page-max: var(--page-wide); }

/* ═══════════════════ 4. Cards ═══════════════════════════════════════════ */
.ss-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
}
.ss-card--alt    { background: var(--bg-alt); }
.ss-card--sm     { padding: var(--space-3); }
.ss-card--lg     { padding: var(--space-6); border-radius: var(--radius-lg); }
.ss-card--shadow { box-shadow: var(--shadow-sm); }
.ss-card--accent { border-left: 4px solid var(--accent); }
.ss-card--hover  {
    transition: transform var(--t-fast), box-shadow var(--t-fast),
                border-color var(--t-fast);
}
.ss-card--hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

/* ═══════════════════ 5. Callouts ════════════════════════════════════════ */
.ss-callout {
    border-left: 4px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-3) 0;
    font-size: 0.9rem;
    line-height: 1.55;
    background: var(--bg-alt);
    color: var(--text);
}
.ss-callout > :first-child { margin-top: 0; }
.ss-callout > :last-child  { margin-bottom: 0; }

.ss-callout--danger {
    border-left-color: var(--danger);
    background: var(--danger-bg);
    color: var(--danger-ink);
}
.ss-callout--warning {
    border-left-color: var(--warning);
    background: var(--warning-bg);
    color: var(--warning-ink);
}
.ss-callout--success {
    border-left-color: var(--success);
    background: var(--success-bg);
    color: var(--success-ink);
}
.ss-callout--info {
    border-left-color: var(--info);
    background: var(--info-bg);
    color: var(--info-ink);
}
.ss-callout--neutral {
    border-left-color: var(--text-muted);
    background: var(--tint-1);
    color: var(--text-dim);
}
/* Icon + text layout variant (matches .warning-banner anatomy) */
.ss-callout--flex { display: flex; align-items: flex-start; gap: 0.65rem; }
.ss-callout--flex .ss-callout-icon { flex-shrink: 0; font-size: 1.15rem; line-height: 1.45; }
.ss-callout--flex .ss-callout-text { flex: 1; min-width: 0; }

/* ═══════════════════ 6. Badges / chips / tags ═══════════════════════════ */
/* .ss-badge — rounded pill chip (status, counts, sentiment). */
.ss-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    border-radius: var(--radius-pill);
    padding: 0.15rem 0.55rem;
    font-size: var(--fs-label);
    font-weight: 600;
    line-height: 1.4;
    background: var(--tint-2);
    color: var(--text-dim);
    white-space: nowrap;
}
.ss-badge--success { background: var(--success-tint); color: var(--success); }
.ss-badge--warning { background: var(--warning-tint); color: var(--warning-text); }
.ss-badge--danger  { background: var(--danger-tint);  color: var(--danger); }
.ss-badge--info    { background: var(--info-tint);    color: var(--info); }
.ss-badge--neutral { background: var(--tint-2);       color: var(--neutral-ink); }

/* .ss-badge--tag — square-ish mono tag (source tags, EP tags, hazard codes) */
.ss-badge--tag {
    border-radius: var(--radius-xs);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 0.1rem 0.4rem;
}

/* Category chip — set the fill inline: style="--badge-cat: var(--category-x)"
   Ink flips with theme so it is readable on light pastels AND dark tones. */
.ss-badge--category {
    background: var(--badge-cat, var(--category-default));
    color: var(--category-ink);
    font-weight: 700;
}

/* Status dot (combo details, legends, live indicators) */
.ss-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    vertical-align: middle;
}

/* ═══════════════════ 7. Buttons ═════════════════════════════════════════ */
.ss-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.5rem 1rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    color: var(--text);
    background: var(--bg-alt);
    text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast),
                border-color var(--t-fast), transform var(--t-fast),
                box-shadow var(--t-fast);
}
.ss-btn:hover { text-decoration: none; }
.ss-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ss-btn:disabled { opacity: 0.5; cursor: default; }

.ss-btn--primary { background: var(--accent); color: #fff; }
.ss-btn--primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.ss-btn--outline {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
}
.ss-btn--outline:hover { background: var(--accent); color: #fff; }

.ss-btn--ghost { background: var(--tint-2); color: inherit; }
.ss-btn--ghost:hover { background: var(--tint-3); }

.ss-btn--danger { background: var(--danger-tint); color: var(--danger); }
.ss-btn--danger:hover { background: var(--danger); color: #fff; }

.ss-btn--pill { border-radius: var(--radius-pill); }
.ss-btn--sm   { padding: 0.35rem 0.7rem; font-size: var(--fs-small); }
/* Square icon button (delete ×, swap ⇄, clear) */
.ss-btn--icon { width: 2.375rem; height: 2.375rem; padding: 0; font-size: 1.1rem; }

/* ═══════════════════ 8. Inputs & autocomplete ═══════════════════════════ */
.ss-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.85rem;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--text);
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.ss-input::placeholder { color: var(--text-muted); }
.ss-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

/* Autocomplete dropdown (anchor inside a position:relative wrapper) */
.ss-suggest {
    position: absolute;
    left: 0; right: 0;
    top: calc(100% + 3px);
    z-index: 100;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
    max-height: 60vh;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0;
}
.ss-suggest:empty { display: none; }
.ss-suggest-item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.55rem 0.8rem;
    cursor: pointer;
    transition: background var(--t-fast);
}
.ss-suggest-item:hover,
.ss-suggest-item.is-selected { background: var(--bg-alt); }
.ss-suggest-item small { font-size: var(--fs-small); color: var(--text-dim); opacity: 0.8; }

/* ═══════════════════ 9. Tables ══════════════════════════════════════════ */
.ss-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.ss-table th {
    font-size: var(--fs-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
}
.ss-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}
.ss-table tbody tr:hover { background: var(--tint-1); }

/* --grid: full cell borders, centered (dose tables) */
.ss-table--grid th,
.ss-table--grid td { border: 1px solid var(--border); text-align: center; }
.ss-table--grid thead th { background: var(--bg-alt); color: var(--text-dim); text-transform: none; letter-spacing: 0; font-size: 0.85rem; font-weight: 700; }

/* --striped: zebra rows (reference tables) */
.ss-table--striped tbody tr:nth-child(even) { background: var(--tint-1); }

/* --compact: dense mono data tables (dose-effects / dose-risk partials) */
.ss-table--compact { font-size: var(--fs-label); }
.ss-table--compact th {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: 0.04em;
    padding: 0.4rem 0.5rem;
    white-space: nowrap;
}
.ss-table--compact td { padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--tint-2); }

/* Percent bar used inside table cells */
.ss-bar-track {
    background: var(--tint-2);
    border-radius: 2px;
    overflow: hidden;
    height: 10px;
}
.ss-bar-fill {
    height: 100%;
    min-width: 3px;
    border-radius: 2px;
    transition: var(--t-fill);
}

/* ═══════════════════ 10. Headings & micro-typography ════════════════════ */
.ss-section-title {
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--text);
    margin: 0 0 var(--space-4);
}
.ss-section-title--rule {
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
}
.ss-section-title--lg { font-size: var(--fs-h2); }   /* substance-page scale */

/* Head row: title left, badge/actions right, shared rule underneath */
.ss-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-4);
}
.ss-section-head .ss-section-title { margin: 0; padding: 0; border: none; }
.ss-section-badge {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
}

/* Page-level eyebrow ("HARM REDUCTION · GUIDE") */
.ss-kicker {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
}

/* Small uppercase data label (stat labels, field labels, mini headers) */
.ss-label {
    font-size: var(--fs-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

/* Footnote / caption / disclaimer text */
.ss-footnote {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* ═══════════════════ 11. Legend ═════════════════════════════════════════ */
.ss-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.ss-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.ss-legend-swatch {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* ═══════════════════ 12. Card grid ══════════════════════════════════════ */
.ss-grid-cards {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
}

/* ═══════════════════ 13. Utilities ══════════════════════════════════════ */
.ss-hidden { display: none !important; }

.ss-mt-2 { margin-top: var(--space-2); }
.ss-mt-4 { margin-top: var(--space-4); }
.ss-mt-6 { margin-top: var(--space-6); }
.ss-mb-2 { margin-bottom: var(--space-2); }
.ss-mb-4 { margin-bottom: var(--space-4); }
.ss-mb-6 { margin-bottom: var(--space-6); }
.ss-section-gap { margin-bottom: var(--section-gap); }

/* ═══════════════════ 14. Mobile — md breakpoint (768px) ═════════════════ */
@media (max-width: 768px) {
    .ss-page { padding-bottom: var(--space-6); }
    .ss-section-title--lg { font-size: 1.3rem; }
    .ss-table--compact th,
    .ss-table--compact td { padding: 0.3rem 0.4rem; }
}

/* ═══════════════════ 15. Mobile — sm breakpoint (480px) ═════════════════ */
@media (max-width: 480px) {
    body { --gutter: 0.5rem; }
    .ss-card    { padding: var(--space-3) var(--space-4); }
    .ss-card--lg { padding: var(--space-4); }
    /* iOS focus-zoom guard: inputs must not drop below 16px on phones */
    .ss-input { font-size: var(--fs-input-mobile); }
    .ss-btn   { padding: 0.45rem 0.8rem; }
    .ss-section-title { font-size: var(--fs-h4); }
}