/*
 * 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); } }

/* Impersonation banner (base.html and the error shell): God users logged in as someone
   else see a bar that never scrolls away and a frame round the
   window, above every modal and popup (the TipTap popup sits at 9999). The frame takes no
   clicks. The page is pushed down by the bar's height so it never hides navigation. */
:root { --hijack-bar-h: 4.25rem; }
body.is-hijacked { padding-top: var(--hijack-bar-h); }
.hijack-frame {
    position: fixed;
    inset: 0;
    border: 6px solid var(--danger);
    pointer-events: none;
    z-index: 10000;
}
.hijack-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* Not --hijack-bar-h: the script measures this bar into that variable, and a
       min-height read from it could never shrink back after a resize. */
    min-height: 3.5rem;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    background: var(--danger);
    color: var(--surface);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.25;
}
.hijack-banner__icon { font-size: 1.6rem; flex-shrink: 0; }
.hijack-banner__text { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hijack-banner__main { font-weight: 800; letter-spacing: 0.02em; }
.hijack-banner__fine { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; opacity: 0.9; }
.hijack-banner__form { margin: 0; flex-shrink: 0; }
.hijack-banner__exit {
    border: 0;
    border-radius: 999px;
    padding: 0.4rem 1.1rem;
    background: var(--surface);
    color: var(--danger-ink);
    font-weight: 800;
}
.hijack-banner__exit:hover { background: var(--danger-tint); }
/* Fixed overlays and sticky rails start below the bar instead of under it. */
body.is-hijacked .offcanvas,
body.is-hijacked .radar-pick-overlay,
body.is-hijacked .radar-modal { top: var(--hijack-bar-h); }
body.is-hijacked .radar-modal-card { max-height: calc(100vh - var(--hijack-bar-h) - 3rem); }
/* A native modal <dialog> renders in the top layer, above any z-index, so it is moved
   below the bar rather than allowed to cover it. */
body.is-hijacked dialog:modal {
    margin-top: calc(var(--hijack-bar-h) + 1rem);
    max-height: calc(100vh - var(--hijack-bar-h) - 2rem);
}
body.is-hijacked .modal { top: var(--hijack-bar-h); height: calc(100% - var(--hijack-bar-h)); }
body.is-hijacked .fixed-header { top: var(--hijack-bar-h); }
body.is-hijacked .bs-rail { top: calc(var(--hijack-bar-h) + 1.5rem); }
body.is-hijacked .adm-sticky { top: calc(var(--hijack-bar-h) + 1rem); }
@media (max-width: 767.98px) {
    :root { --hijack-bar-h: 6.25rem; }
    .hijack-banner { font-size: 0.95rem; gap: 0.6rem; justify-content: space-between; }
    .hijack-banner__icon { font-size: 1.3rem; }
    .hijack-banner__text { align-items: flex-start; text-align: left; }
    .hijack-banner__fine { font-size: 0.65rem; }

/* Photo library (image wells): a grid of private thumbnails, shared by Backstage's brand
   photos and a voice's own photos in settings. */
.db-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.75rem;
}
.db-photo-tile {
  margin: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bs-secondary-bg);
}
.db-photo-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.db-photo-tile figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
}
.db-photo-people {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-photo-tile.is-off img {
  opacity: 0.35;
}
.db-photo-note {
  border: 0;
  border-top: 1px solid var(--border-color);
  border-radius: 0;
  font-size: 0.8rem;
}
.db-photo-note-text {
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
}