/*
 * Drumbeat components — the shared building blocks, extracted from Riff, Backstage and Radar.
 *
 * Every value comes from tokens.css. Page and app stylesheets compose these; they do not
 * restyle them. If a page needs a variant, add it here as a modifier so the next page can
 * use it too.
 *
 * Sections:
 *   1. Base type
 *   2. Bootstrap, on-brand (buttons, forms, navs, alerts, badges, cards, tables, progress)
 *   3. Brand buttons (rh-btn-*)
 *   4. Page header, eyebrow, section title
 *   5. Card, stat tile, callout
 *   6. Pill, status badge, count
 *   7. Empty state
 *   8. Kanban board
 *   9. Step dots
 *  10. LinkedIn post preview
 *  11. Dictation (mic button)
 */

/* ── 1. Base type ───────────────────────────────────────────────── */
body {
    font-family: var(--font-sans) !important;
    -webkit-font-smoothing: antialiased;
    background-color: var(--surface-page);
    color: var(--ink);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--font-display);
    color: var(--ink);
}

/* One heading scale, the one Riff, Backstage and Radar use: a page title is 1.5rem bold.
   Bootstrap's defaults (h2 = 2rem at 500) are what a bare heading fell back to before. */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
h1, .h1 { font-size: var(--text-xl); }
h2, .h2 { font-size: 1.3rem; }
h3, .h3 { font-size: var(--text-lg); }
h4, .h4 { font-size: 1.05rem; }
h5, .h5 { font-size: var(--text-md); }
h6, .h6 { font-size: var(--text-base); }

a { color: var(--bs-link-color); }
a:hover { color: var(--bs-link-hover-color); }
code, kbd, pre, samp { font-family: var(--font-mono); }
/* Native controls without Bootstrap classes (Django form widgets) otherwise paint in browser blue. */
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--orange-ink); }

/* ── 2. Bootstrap, on-brand ─────────────────────────────────────── */
/* Bootstrap 5.3 compiles most component colours into per-class variables rather than
   reading --bs-primary, so each blue default is replaced here explicitly. */

.btn {
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.45rem;
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--radius-sm);
    --bs-btn-focus-box-shadow: var(--focus-ring);
    letter-spacing: 0.01em;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease,
                box-shadow .12s ease, transform .12s ease;
}
.btn-sm { --bs-btn-padding-x: 0.7rem; --bs-btn-padding-y: 0.28rem; --bs-btn-border-radius: var(--radius-sm); }
.btn-lg { --bs-btn-padding-x: 1.35rem; --bs-btn-padding-y: 0.6rem; --bs-btn-border-radius: 8px; }

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #fff;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-border-color: transparent;
    background: var(--gradient-accent);
    box-shadow: 0 2px 8px rgba(248, 84, 46, 0.18);
}
.btn-primary:hover, .btn-primary:focus-visible, .btn-primary:active, .btn-primary.active {
    background: var(--gradient-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(248, 84, 46, 0.28);
}
.btn-primary:disabled, .btn-primary.disabled { background: var(--gradient-accent); opacity: .55; }

.btn-outline-primary {
    --bs-btn-color: var(--orange-ink);
    --bs-btn-border-color: var(--orange);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--orange);
    --bs-btn-hover-border-color: var(--orange);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--orange-ink);
    --bs-btn-active-border-color: var(--orange-ink);
    --bs-btn-disabled-color: var(--orange-ink);
    --bs-btn-disabled-border-color: var(--orange);
}

.btn-secondary, .btn-dark, .btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ink);
    --bs-btn-border-color: var(--ink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ink-bg);
    --bs-btn-hover-border-color: var(--ink-bg);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ink-bg);
    --bs-btn-active-border-color: var(--ink-bg);
    --bs-btn-disabled-bg: var(--ink);
    --bs-btn-disabled-border-color: var(--ink);
}
.btn-outline-secondary, .btn-outline-dark, .btn-outline-info, .btn-light {
    --bs-btn-color: var(--ink-body);
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-bg: var(--surface-hover);
    --bs-btn-hover-border-color: var(--rule-strong);
    --bs-btn-active-color: var(--ink);
    --bs-btn-active-bg: var(--surface-hover);
    --bs-btn-active-border-color: var(--rule-strong);
    --bs-btn-disabled-color: var(--ink-faint);
    --bs-btn-disabled-bg: var(--surface);
    --bs-btn-disabled-border-color: var(--bs-border-color);
}
.btn-light { --bs-btn-border-color: transparent; --bs-btn-bg: var(--surface-muted); }

.btn-success {
    --bs-btn-color: #fff; --bs-btn-bg: var(--success); --bs-btn-border-color: var(--success);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--success-ink); --bs-btn-hover-border-color: var(--success-ink);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--success-ink); --bs-btn-active-border-color: var(--success-ink);
    --bs-btn-disabled-bg: var(--success); --bs-btn-disabled-border-color: var(--success);
}
.btn-danger {
    --bs-btn-color: #fff; --bs-btn-bg: var(--danger); --bs-btn-border-color: var(--danger);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--danger-ink); --bs-btn-hover-border-color: var(--danger-ink);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--danger-ink); --bs-btn-active-border-color: var(--danger-ink);
    --bs-btn-disabled-bg: var(--danger); --bs-btn-disabled-border-color: var(--danger);
}
.btn-warning {
    --bs-btn-color: var(--warning-ink); --bs-btn-bg: var(--warning); --bs-btn-border-color: var(--warning);
    --bs-btn-hover-color: var(--warning-ink); --bs-btn-hover-bg: #E38E06; --bs-btn-hover-border-color: #E38E06;
    --bs-btn-active-color: var(--warning-ink); --bs-btn-active-bg: #E38E06; --bs-btn-active-border-color: #E38E06;
}
.btn-outline-success {
    --bs-btn-color: var(--success-ink); --bs-btn-border-color: var(--success);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--success); --bs-btn-hover-border-color: var(--success);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--success-ink); --bs-btn-active-border-color: var(--success-ink);
}
.btn-outline-danger {
    --bs-btn-color: var(--danger); --bs-btn-border-color: var(--danger);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--danger); --bs-btn-hover-border-color: var(--danger);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--danger-ink); --bs-btn-active-border-color: var(--danger-ink);
}
.btn-outline-warning {
    --bs-btn-color: var(--warning-ink); --bs-btn-border-color: var(--warning);
    --bs-btn-hover-color: var(--warning-ink); --bs-btn-hover-bg: var(--warning-tint); --bs-btn-hover-border-color: var(--warning);
    --bs-btn-active-color: var(--warning-ink); --bs-btn-active-bg: var(--warning-tint); --bs-btn-active-border-color: var(--warning);
}
.btn-link {
    --bs-btn-color: var(--orange-ink);
    --bs-btn-hover-color: var(--orange-deep);
    --bs-btn-active-color: var(--orange-deep);
    --bs-btn-disabled-color: var(--ink-faint);
    --bs-btn-font-weight: 500;
}

.form-control:focus, .form-select:focus {
    border-color: var(--orange);
    box-shadow: var(--focus-ring);
}
.form-check-input:checked {
    background-color: var(--orange-ink);
    border-color: var(--orange-ink);
}
.form-check-input:focus { border-color: var(--orange); box-shadow: var(--focus-ring); }
.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23F8542E'/%3e%3c/svg%3e");
}
.form-range::-webkit-slider-thumb { background-color: var(--orange-ink); }
.form-range::-moz-range-thumb { background-color: var(--orange-ink); }
.form-label { font-weight: 600; color: var(--ink); }
.form-text { color: var(--ink-mute); }

.nav-link { --bs-nav-link-color: var(--ink-body); --bs-nav-link-hover-color: var(--ink); }
.nav-tabs { --bs-nav-tabs-link-active-color: var(--ink); --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--surface); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--ink); --bs-nav-pills-link-active-color: #fff; }
.pagination {
    --bs-pagination-color: var(--ink-body);
    --bs-pagination-hover-color: var(--ink);
    --bs-pagination-focus-color: var(--ink);
    --bs-pagination-focus-box-shadow: var(--focus-ring);
    --bs-pagination-active-bg: var(--ink);
    --bs-pagination-active-border-color: var(--ink);
}
.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--orange-tint);
    --bs-dropdown-link-active-color: var(--ink);
    --bs-dropdown-border-color: var(--rule);
    --bs-dropdown-box-shadow: var(--shadow-pop);
    border-radius: 10px;
}
.list-group {
    --bs-list-group-active-bg: var(--orange-tint);
    --bs-list-group-active-color: var(--ink);
    --bs-list-group-active-border-color: #FBC9BC;
}
.accordion {
    --bs-accordion-active-color: var(--ink);
    --bs-accordion-active-bg: var(--surface-muted);
    --bs-accordion-btn-focus-box-shadow: var(--focus-ring);
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23241B33' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}
.progress, .progress-stacked { --bs-progress-bar-bg: var(--orange); --bs-progress-bg: var(--surface-muted); }
.progress-bar { background: var(--gradient-accent); }
.progress-bar.bg-success { background: var(--success) !important; }
.progress-bar.bg-warning { background: var(--warning) !important; }
.progress-bar.bg-danger { background: var(--danger) !important; }
.progress-bar.bg-info { background: var(--info) !important; }
.progress-bar.bg-secondary { background: var(--neutral) !important; }
.spinner-border, .spinner-grow { color: var(--orange); }
.spinner-border.text-light, .btn .spinner-border, .btn .spinner-grow { color: inherit; }

/* A bordered option box (`form-check p-3 border rounded`): p-3 wipes the left padding the
   radio hangs into, which left it sitting on the border. Give it room inside the box. */
.form-check.border { padding-left: 2.6rem !important; }
.form-check.border > .form-check-input { margin-left: -1.6rem; }

/* Text colour utilities keep their historical meaning: text-primary is ink, not orange. */
.text-primary { color: var(--ink) !important; }
.text-muted, .text-secondary, .text-body-secondary { color: var(--ink-mute) !important; }
.text-accent-orange { color: var(--orange-ink); }
.text-accent-pink { color: var(--crimson); }
.border-primary { border-color: var(--ink) !important; }
.border-accent-orange { border-color: var(--orange) !important; }
.border-accent-pink { border-color: var(--crimson) !important; }
.bg-primary { background-color: var(--ink) !important; }
.text-bg-primary { background-color: var(--ink) !important; color: #fff !important; }

/* Alerts: tinted surface, a 4px status rule on the left, status-ink text. */
.alert {
    border: none;
    border-radius: 10px;
    padding: 0.85rem 1rem 0.85rem 1.15rem;
    position: relative;
    overflow: hidden;
    color: var(--ink);
    background: var(--surface-muted);
}
.alert::before {
    content: "";
    position: absolute; top: 0; left: 0; width: 4px; height: 100%;
    background: var(--neutral);
}
.alert-primary, .alert-info { background: var(--info-tint); color: var(--info-ink); }
.alert-primary::before, .alert-info::before { background: var(--info); }
.alert-success { background: var(--success-tint); color: var(--success-ink); }
.alert-success::before { background: var(--success); }
.alert-warning { background: var(--warning-tint); color: var(--warning-ink); }
.alert-warning::before { background: var(--warning); }
.alert-danger { background: var(--danger-tint); color: var(--danger-ink); }
.alert-danger::before { background: var(--danger); }
.alert-secondary, .alert-light { background: var(--surface-muted); color: var(--ink-body); }
.alert-dark { background: var(--ink); color: #fff; }
.alert .alert-link { color: inherit; }

/* Badges: small uppercase label. Background utilities give it the status colour. */
.badge {
    font-weight: 600;
    padding: 0.38em 0.7em;
    border-radius: var(--radius-sm);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.68rem;
}
.badge.rounded-pill, .badge-pill { border-radius: var(--radius-pill); }
.badge.bg-success, .badge-success, .badge.text-bg-success { background: var(--success) !important; color: #fff !important; }
.badge.bg-warning, .badge-warning, .badge.text-bg-warning { background: var(--warning) !important; color: var(--warning-ink) !important; }
.badge.bg-danger, .badge-danger, .badge.text-bg-danger { background: var(--danger) !important; color: #fff !important; }
.badge.bg-info, .badge-info, .badge.text-bg-info { background: var(--info) !important; color: #fff !important; }
.badge.bg-primary, .badge-primary, .badge.text-bg-primary { background: var(--ink) !important; color: #fff !important; }
.badge.bg-secondary, .badge.text-bg-secondary { background: var(--neutral) !important; color: #fff !important; }
.badge.bg-light, .badge.text-bg-light { background: var(--surface-muted) !important; color: var(--ink-body) !important; }
.badge.bg-dark, .badge.text-bg-dark { background: var(--ink) !important; color: #fff !important; }
/* Tabler-UI "-lt" tints are used in markup but Bootstrap does not ship them. */
.bg-success-lt   { background: var(--success-tint) !important; color: var(--success-ink) !important; }
.bg-warning-lt   { background: var(--warning-tint) !important; color: var(--warning-ink) !important; }
.bg-danger-lt    { background: var(--danger-tint) !important;  color: var(--danger-ink) !important; }
.bg-info-lt, .bg-azure-lt, .bg-blue-lt, .bg-purple-lt
                 { background: var(--info-tint) !important;    color: var(--info-ink) !important; }
.bg-secondary-lt { background: var(--neutral-tint) !important; color: var(--neutral-ink) !important; }
/* Status badges keep their historical names. */
.badge-ready, .badge-active { background: var(--success) !important; color: #fff; }
.badge-inactive { background: var(--neutral) !important; color: #fff; }

/* Cards: white, hairline, soft shadow. Every .card lifts on hover — a modal must never be
   nested inside one (see .claude/rules/templates.md). */
.card {
    --bs-card-border-color: var(--rule);
    --bs-card-border-radius: var(--radius);
    --bs-card-inner-border-radius: calc(var(--radius) - 1px);
    --bs-card-cap-bg: var(--surface-muted);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: var(--shadow-rest);
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.card-shadow { box-shadow: var(--card-shadow); }
.card-brand { border-top: 3px solid var(--orange); }

.table { --bs-table-color: var(--ink); --bs-table-border-color: var(--rule-soft); --bs-table-hover-bg: var(--surface-muted); }
.table > thead th {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.breadcrumb-item a { color: var(--ink); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--orange-ink); text-decoration: underline; }

/* ── 3. Brand buttons ───────────────────────────────────────────── */
/* rh-btn-save is the primary action, rh-btn-ghost the secondary, rh-btn-quiet the
   tertiary / cancel; rh-btn-danger and rh-btn-success carry those intents. */
.rh-btn-save {
    background: var(--gradient-accent) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600;
    padding: 0.45rem 1.1rem !important;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(248, 84, 46, 0.18);
    transition: transform .12s ease, box-shadow .12s ease;
}
.rh-btn-save:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(248, 84, 46, 0.28); }
.rh-btn-ghost {
    background: transparent;
    border: 1px solid var(--orange);
    color: var(--orange-ink);
    font-weight: 600;
    padding: 0.45rem 1.1rem;
    letter-spacing: 0.02em;
}
.rh-btn-ghost:hover, .rh-btn-ghost:focus { background: var(--orange); border-color: var(--orange); color: #fff; }
.rh-btn-quiet { background: transparent; border: none; color: var(--ink-mute); font-weight: 500; }
.rh-btn-quiet:hover, .rh-btn-quiet:focus { color: var(--ink); }
.rh-btn-danger { background: var(--danger); border: 1px solid var(--danger); color: #fff; font-weight: 600; padding: 0.45rem 1.1rem; }
.rh-btn-danger:hover, .rh-btn-danger:focus { background: var(--danger-ink); border-color: var(--danger-ink); color: #fff; }
.rh-btn-success { background: var(--success); border: 1px solid var(--success); color: #fff; font-weight: 600; padding: 0.45rem 1.1rem; }
.rh-btn-success:hover, .rh-btn-success:focus { background: var(--success-ink); border-color: var(--success-ink); color: #fff; }

/* ── 4. Page header, eyebrow, section title ─────────────────────── */
.db-page-head { margin-bottom: 1.5rem; }
.db-page-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.db-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
}
.db-lede { color: var(--ink-mute); font-size: var(--text-base); line-height: 1.55; margin: 0.35rem 0 0; }

/* The uppercase label that heads a section or names a field group. */
.db-eyebrow {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin: 0 0 0.5rem;
}
.db-eyebrow--accent { color: var(--orange-ink); }
.db-section-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 0.35rem;
}
.db-section { margin-bottom: 2rem; }
.db-meta { font-size: var(--text-sm); color: var(--ink-mute); }

/* ── 5. Card, stat tile, callout ────────────────────────────────── */
/* .db-card is a plain surface with no hover lift, for content that is not clickable. */
.db-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: var(--shadow-rest);
    padding: 1.1rem 1.25rem;
}
.db-card--lg { border-radius: var(--radius-lg); padding: 1.5rem 1.75rem; }
.db-card--flush { padding: 0; }
.db-card--muted { background: var(--surface-muted); box-shadow: none; }
.db-card--link { transition: transform .15s ease, box-shadow .15s ease; cursor: pointer; }
.db-card--link:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.db-card--selected { border-color: var(--orange); background: var(--orange-tint); }

.db-stat {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    height: 100%;
}
.db-stat-label {
    font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--ink-mute); margin-bottom: 0.3rem;
}
.db-stat-value {
    font-family: var(--font-display);
    font-size: 1.6rem; font-weight: 700; line-height: 1.1;
    color: var(--ink); font-variant-numeric: tabular-nums;
}
.db-stat-sub { font-size: var(--text-sm); color: var(--ink-mute); margin-top: 0.2rem; }

.db-callout {
    border-left: 3px solid var(--orange);
    background: var(--surface);
    border-radius: 0 10px 10px 0;
    padding: 0.75rem 1rem;
    color: var(--ink-body);
}
.db-callout--quiet { border-left-color: var(--rule); background: var(--surface-muted); }

/* ── 6. Pill, status badge, count ───────────────────────────────── */
.db-pill {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-pill);
    background: var(--surface);
    font-size: var(--text-sm); font-weight: 500; line-height: 1.3;
    color: var(--ink-body);
    white-space: nowrap;
}
.db-pill--accent { border-color: #FBC9BC; background: var(--orange-tint); color: var(--orange-deep); }
.db-pill--warning { border-color: var(--warning); background: var(--warning-tint); color: var(--warning-ink); }

/* Status: dot + tinted pill. One class per meaning, never per page. */
.db-status {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.18rem 0.6rem;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; line-height: 1.4; white-space: nowrap;
    background: var(--neutral-tint); color: var(--neutral-ink);
}
.db-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--neutral); flex: none; }
.db-status--plain::before { display: none; }
.db-status--success { background: var(--success-tint); color: var(--success-ink); }
.db-status--success::before { background: var(--success); }
.db-status--warning { background: var(--warning-tint); color: var(--warning-ink); }
.db-status--warning::before { background: var(--warning); }
.db-status--danger  { background: var(--danger-tint);  color: var(--danger-ink); }
.db-status--danger::before  { background: var(--danger); }
.db-status--info    { background: var(--info-tint);    color: var(--info-ink); }
.db-status--info::before    { background: var(--info); }
.db-status--accent  { background: var(--orange-tint);  color: var(--orange-deep); }
.db-status--accent::before  { background: var(--orange); }

.db-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.5rem; padding: 0.05rem 0.45rem;
    border-radius: var(--radius-pill);
    background: var(--neutral-tint); color: var(--ink-body);
    font-size: var(--text-xs); font-weight: 800; font-variant-numeric: tabular-nums;
}

/* ── 7. Empty state ─────────────────────────────────────────────── */
.empty-state, .db-empty {
    text-align: center;
    padding: 2.5rem 1.25rem;
    color: var(--ink-mute);
}
.empty-state > .ti:first-child, .db-empty > .ti:first-child,
.db-empty-icon {
    display: block;
    font-size: 2.25rem;
    color: #CFCAD6;
    margin: 0 auto 0.75rem;
}
.db-empty-title { font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; color: var(--ink); margin: 0 0 0.3rem; }
.db-empty-text { font-size: var(--text-sm); margin: 0 auto; max-width: 32rem; }
.db-empty--compact { padding: 1rem; font-size: var(--text-sm); }
.db-empty--dashed { border: 1px dashed var(--rule-strong); border-radius: 10px; font-style: italic; font-size: var(--text-xs); padding: 0.9rem; }

/* ── 8. Kanban board ────────────────────────────────────────────── */
/* Flex, not grid, so a column can collapse to a rail. The board scrolls sideways inside the
   page: without inline-size containment its columns' minimum widths widen the whole app
   shell past a phone screen. */
.db-board { display: flex; align-items: flex-start; gap: 0.75rem; overflow-x: auto; padding-bottom: 0.5rem; contain: inline-size; }
.db-col { flex: 1 1 0; min-width: 11rem; background: var(--surface-board); border-radius: var(--radius-lg); padding: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; }
.db-col--collapsed { flex: 0 0 46px; min-width: 46px; max-width: 46px; cursor: pointer; padding: 0.5rem 0; }
.db-col-head { display: flex; align-items: center; gap: 0.45rem; padding: 0.2rem 0.35rem; font-size: var(--text-sm); font-weight: 700; color: var(--ink); }
.db-col-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--neutral); flex: none; }
.db-col-card { background: var(--surface); border: 1px solid var(--rule-soft); border-radius: var(--radius); box-shadow: var(--shadow-rest); padding: 0.7rem 0.75rem; }
.db-col-card:hover { box-shadow: var(--shadow-hover); }

/* ── 9. Step dots ───────────────────────────────────────────────── */
/* Done = orange, current = orange ring, upcoming = hairline. */
.db-steps { display: flex; align-items: center; gap: 0.4rem; list-style: none; padding: 0; margin: 0; }
.db-step { width: 8px; height: 8px; border-radius: 50%; background: #DCD8E2; }
.db-step.is-done { background: var(--orange); }
.db-step.is-current { background: var(--surface); box-shadow: inset 0 0 0 2px var(--orange); width: 10px; height: 10px; }

/* Numbered step circle for how-it-works lists. */
.db-step-num {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--orange-tint); color: var(--orange-deep);
    font-size: var(--text-sm); font-weight: 700;
}

/* ── 10. LinkedIn post preview ──────────────────────────────────── */
/* Mimics LinkedIn on purpose: system font, LinkedIn's greys. */
.li-preview {
    font-family: var(--font-linkedin);
    background: #fff;
    border: 1px solid #E0DFDC;
    border-radius: 8px;
    padding: 0.9rem 1rem;
    color: rgba(0, 0, 0, 0.9);
    font-size: 14px;
    line-height: 1.43;
}
.li-preview-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.li-preview-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; background: #E9E5DF; }
.li-preview-name { font-weight: 600; font-size: 14px; color: rgba(0, 0, 0, 0.9); line-height: 1.3; }
.li-preview-meta { font-size: 12px; color: rgba(0, 0, 0, 0.6); line-height: 1.3; }
.li-preview-body { white-space: pre-wrap; word-wrap: break-word; }
.li-preview-avatar--initial { display: flex; align-items: center; justify-content: center; background: var(--li-blue); color: #fff; font-weight: 700; font-size: 1.2rem; }
/* A third party's avatar we cannot show: grey disc with a glyph. */
.li-preview-avatar--placeholder { display: flex; align-items: center; justify-content: center; background: var(--neutral); color: #fff; font-size: 24px; }
.li-preview-feed { background-color: var(--li-feed); }
/* Emitted by the render_linkedin_mentions filter wherever post text is shown. */
.linkedin-mention { color: var(--li-blue); font-weight: 600; text-decoration: none; }
.linkedin-mention:hover { text-decoration: underline; }

/* The "you can leave this page" note and progress track shared by the post and article loaders. */
.gen-leave-note { background: var(--info-tint); }
.gen-leave-note .ti { color: var(--violet); font-size: 1.2rem; }
.gen-leave-note span { color: var(--ink); font-size: var(--text-base); }
.gen-progress { max-width: 500px; }

/* Page widths: every page sits in base.html's centred .content-container; reading pages go
   narrower, full-bleed pages (boards) opt out. */
.content-container { max-width: 1000px; }
.content-container--narrow { max-width: 800px; }
.content-container--reading { max-width: 900px; }
.content-container--wide { max-width: none; }

/* ── 11. Dictation (speech-to-text.js) ──────────────────────────── */
/* Recording is shown in the danger colour: it is the "you are live" signal, not a brand accent. */
.mic-button {
    background: var(--surface);
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    width: 44px; height: 44px; padding: 0;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    cursor: pointer;
    color: var(--ink-body);
    transition: background-color .2s ease, border-color .2s ease;
}
.mic-button:hover { background: var(--surface-hover); border-color: var(--rule-strong); }
.mic-button.listening { background: var(--danger-tint); border-color: var(--danger); animation: db-mic-pulse 1.5s infinite; }
.input-with-mic { position: relative; }
.listening-indicator {
    background: var(--surface-muted);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    padding: 12px 16px; margin-top: -8px; margin-bottom: 12px;
    font-size: var(--text-sm); color: var(--ink-body);
    animation: db-slide-in .3s ease-out;
}
.listening-pulse { width: 12px; height: 12px; background: var(--danger); border-radius: 50%; animation: db-mic-dot 1.5s infinite; }
.mic-tooltip {
    position: absolute; z-index: 1000; white-space: nowrap;
    background: var(--ink); color: #fff;
    padding: 8px 12px; border-radius: var(--radius-sm); font-size: var(--text-sm);
    animation: db-fade-in-out 3s ease-in-out;
}
@keyframes db-mic-pulse { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .4); } 70% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); } }
@keyframes db-mic-dot { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .7); } 70% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); } }
@keyframes db-slide-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes db-fade-in-out { 0% { opacity: 0; transform: translateY(10px); } 20%, 80% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-10px); } }