/*
 * TrimCI Component Styles
 * Based on Pencil design system (Lunaris)
 */

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-secondary);
    background: var(--background);
    color: var(--foreground);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ── Sidebar ── */
.sidebar {
    width: var(--sidebar-width);
    min-height: 100vh;
    background: var(--sidebar);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
}

.sidebar__header {
    padding: 24px 32px;
    border-bottom: 1px solid var(--sidebar-border);
    display: flex;
    align-items: center;
    gap: 8px;
    height: 88px;
}

.sidebar__logo {
    font-family: var(--font-primary);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.sidebar__logo-icon {
    font-size: 20px;
    line-height: 1;
    color: var(--primary);
    flex-shrink: 0;
}

.sidebar__content {
    flex: 1;
    overflow-y: auto;
    padding: 0 16px;
}

.sidebar__section-title {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    color: var(--sidebar-foreground);
    padding: 16px;
    line-height: 1.15;
}

.sidebar__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-radius: var(--radius-pill);
    font-family: var(--font-secondary);
    font-size: var(--text-lg);
    color: var(--sidebar-foreground);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
    line-height: 1.5;
}

.sidebar__item:hover {
    background: var(--sidebar-accent);
    color: var(--sidebar-accent-foreground);
}

.sidebar__item--active {
    background: var(--sidebar-accent);
    color: var(--sidebar-accent-foreground);
}

.sidebar__item-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.sidebar__badge {
    margin-left: auto;
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

.sidebar__org {
    padding: 16px 32px;
    border-top: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sidebar__org-label {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--sidebar-foreground);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.sidebar__org-name {
    font-family: var(--font-secondary);
    font-size: var(--text-base);
    color: var(--sidebar-accent-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar__org-switcher {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

.sidebar__org-select {
    width: 100%;
    height: 36px;
    padding: 6px 12px;
    font-family: var(--font-secondary);
    font-size: var(--text-base);
    color: var(--sidebar-accent-foreground);
    background: var(--sidebar-accent);
    border: 1px solid var(--sidebar-border);
    border-radius: var(--radius-pill);
    outline: none;
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.sidebar__org-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.15);
}

.sidebar__footer {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--sidebar-border);
}

.sidebar__user {
    flex: 1;
    min-width: 0;
}

.sidebar__user-name {
    font-size: var(--text-lg);
    color: var(--sidebar-accent-foreground);
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar__user-email {
    font-size: var(--text-sm);
    color: var(--sidebar-foreground);
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar__logout-form {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.sidebar__logout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    color: var(--sidebar-foreground);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.sidebar__logout-btn:hover {
    background: var(--sidebar-accent);
    color: var(--sidebar-accent-foreground);
    border-color: var(--sidebar-border);
}

.sidebar__logout-btn .material-symbols-sharp {
    font-size: 20px;
}

/* ── Main Layout ── */
.layout {
    display: flex;
    min-height: 100vh;
}

.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Breadcrumbs ── */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0;
}

.breadcrumbs__item {
    font-family: var(--font-secondary);
    font-size: var(--text-base);
    color: var(--muted-foreground);
    text-decoration: none;
}

.breadcrumbs__item:hover {
    color: var(--foreground);
}

.breadcrumbs__item--active {
    color: var(--foreground);
}

.breadcrumbs__separator {
    width: 14px;
    height: 14px;
    color: var(--muted-foreground);
    margin: 0 4px;
}

/* ── Page Header ── */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-title {
    font-family: var(--font-primary);
    font-size: var(--text-4xl);
    font-weight: 700;
    color: var(--foreground);
}

.page-subtitle {
    font-family: var(--font-secondary);
    font-size: var(--text-base);
    color: var(--muted-foreground);
    margin-top: 8px;
}

/* ── Cards ── */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.card--error-border {
    border: 2px solid var(--color-error-foreground);
}

.card__header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.card__title {
    font-family: var(--font-primary);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--foreground);
}

.card__content {
    padding: 24px;
}

.card__actions {
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Stat Cards ── */
.stats-row {
    display: flex;
    gap: 16px;
}

/* M1: signpost that the hero row is all-conclusions while panels below are filtered. */
.stats-row__scope-note {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3) 0;
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--muted-foreground);
}
.stats-row__scope-note .material-symbols-sharp {
    font-size: 18px;
}

/* M2: honest footnote for the decisive-denominator failure rate. */
.table__footnote {
    margin: var(--space-2) 0 0 0;
    font-family: var(--font-secondary);
    font-size: var(--text-xs);
    color: var(--muted-foreground);
}

.stat-card {
    flex: 1;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.stat-card__label {
    font-family: var(--font-secondary);
    font-size: var(--text-base);
    color: var(--muted-foreground);
}

.stat-card__value {
    font-family: var(--font-primary);
    font-size: var(--text-5xl);
    font-weight: 700;
    color: var(--foreground);
}

.stat-card__change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    margin-top: 4px;
}
.stat-card__change-icon { font-size: 18px; line-height: 1; }
.stat-card__change-meta {
    color: var(--muted-foreground);
    font-weight: 400;
    margin-left: 2px;
}

.stat-card__change--negative {
    color: var(--color-error-foreground);
}

.stat-card__change--positive {
    color: var(--color-success-foreground);
}

.stat-card__change--neutral {
    color: var(--muted-foreground);
}

/* ── Info Row ── */
.info-row {
    display: flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.info-cell {
    flex: 1;
    padding: 20px;
    background: var(--card);
}

.info-cell + .info-cell {
    border-left: 1px solid var(--border);
}

.info-cell__label {
    font-size: var(--text-sm);
    color: var(--muted-foreground);
}

.info-cell__value {
    font-family: var(--font-primary);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--foreground);
    margin-top: 4px;
}

/* ── Alerts / Banners ── */
.alert {
    display: flex;
    gap: 12px;
    padding: 16px;
    border-radius: var(--radius-none);
}

.alert--info    { background: var(--color-info); }
.alert--success { background: var(--color-success); }
.alert--warning { background: var(--color-warning); }
.alert--error   { background: var(--color-error); }

.alert__icon { width: 24px; height: 24px; flex-shrink: 0; }

.alert--info .alert__title,
.alert--info .alert__description,
.alert--info .alert__icon { color: var(--color-info-foreground); }

.alert--success .alert__title,
.alert--success .alert__description,
.alert--success .alert__icon { color: var(--color-success-foreground); }

.alert--warning .alert__title,
.alert--warning .alert__description,
.alert--warning .alert__icon { color: var(--color-warning-foreground); }

.alert--error .alert__title,
.alert--error .alert__description,
.alert--error .alert__icon { color: var(--color-error-foreground); }

.alert__title {
    font-family: var(--font-secondary);
    font-size: var(--text-lg);
    font-weight: 500;
    line-height: 1.5;
}

.alert__description {
    font-family: var(--font-secondary);
    font-size: var(--text-lg);
    line-height: 1.5;
}

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: 500;
    line-height: 1.43;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    border: none;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: opacity var(--transition-fast), background var(--transition-fast);
    white-space: nowrap;
}

.btn:hover { opacity: 0.9; }

.btn--primary {
    background: var(--primary);
    color: var(--primary-foreground);
}

.btn--secondary {
    background: var(--secondary);
    color: var(--secondary-foreground);
}

.btn--outline {
    background: var(--background);
    color: var(--foreground);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.btn--ghost {
    background: transparent;
    color: var(--foreground);
}

.btn--destructive {
    background: var(--destructive);
    color: #fff;
}

.btn--lg {
    padding: 12px 24px;
    height: 48px;
}

.btn--icon {
    width: 40px;
    height: 40px;
    padding: 0;
}

/* ── Labels / Badges ── */
.label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-primary);
    font-size: var(--text-base);
    padding: 8px;
    border-radius: var(--radius-pill);
    line-height: 1.15;
}

.label--success    { background: var(--color-success);  color: var(--color-success-foreground); }
.label--warning    { background: var(--color-warning);  color: var(--color-warning-foreground); }
.label--error      { background: var(--color-error);    color: var(--color-error-foreground); }
.label--info       { background: var(--color-info);     color: var(--color-info-foreground); }
.label--secondary  { background: var(--secondary);      color: var(--secondary-foreground); }
.label--sm {
    font-size: var(--text-xs);
    padding: 2px 8px;
}

/* ── Select / Form Controls ── */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label {
    font-family: var(--font-secondary);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--foreground);
}

.form-select,
.form-input {
    font-family: var(--font-secondary);
    font-size: var(--text-base);
    height: 40px;
    padding: 8px 16px;
    background: var(--background);
    color: var(--foreground);
    border: 1px solid var(--input);
    border-radius: var(--radius-pill);
    outline: none;
    transition: border-color var(--transition-fast);
    width: 100%;
}

.form-select:focus,
.form-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.15);
}

.form-input::placeholder {
    color: var(--muted-foreground);
}

.form-hint {
    font-family: var(--font-secondary);
    font-size: var(--text-xs);
    color: var(--muted-foreground);
    line-height: 1.4;
}

.form-error {
    display: block;
    font-family: var(--font-secondary);
    font-size: var(--text-xs);
    color: var(--destructive);
    font-weight: 500;
}

/* ── Tables ── */
.table-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.table-card__header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.table-card__title {
    font-family: var(--font-primary);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--foreground);
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th {
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--muted-foreground);
    text-align: left;
    padding: 10px 24px;
    border-bottom: 1px solid var(--border);
}

.table td {
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--foreground);
    padding: 10px 24px;
    border-bottom: 1px solid var(--border);
}

.table tr:last-child td {
    border-bottom: none;
}

/* ── Status Cards (Integration Health) ── */
.status-cards {
    display: flex;
    gap: 16px;
}

.status-card {
    flex: 1;
    padding: 24px;
    border-radius: var(--radius-md);
    text-align: center;
}

.status-card--ok      { background: var(--color-success); }
.status-card--warning  { background: var(--color-warning); }
.status-card--error    { background: var(--color-error); }

.status-card__count {
    font-family: var(--font-primary);
    font-size: var(--text-5xl);
    font-weight: 700;
}

.status-card__label {
    font-size: var(--text-lg);
    font-weight: 500;
}

.status-card--ok .status-card__count,
.status-card--ok .status-card__label      { color: var(--color-success-foreground); }
.status-card--warning .status-card__count,
.status-card--warning .status-card__label  { color: var(--color-warning-foreground); }
.status-card--error .status-card__count,
.status-card--error .status-card__label    { color: var(--color-error-foreground); }

/* ── Provider Cards ── */
/* Connectors pages — constrain content width, centered */
.connectors-content {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.provider-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.provider-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Anchor the CTA at the card's bottom so buttons align horizontally
   across the grid row regardless of description length. Explicit height
   keeps btn--primary (no border) and btn--outline (1px border) visually
   identical — without it the outline variant renders 2px taller. */
.provider-card .btn {
    height: 40px;
    margin-top: auto;
}

.provider-card__icon {
    width: 32px;
    height: 32px;
    font-size: 28px;
}

.provider-card__name {
    font-family: var(--font-primary);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--foreground);
}

.provider-card__description {
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    line-height: 1.5;
}

/* ── Connection Card ── */
.connection-card {
    background: var(--card);
    border-radius: var(--radius-md);
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 4px solid var(--color-success-foreground);
}

/* ── Recommendation Card ── */
.reco-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.reco-card__metrics {
    display: flex;
}

.reco-card__metric {
    flex: 1;
    padding: 12px 16px;
}

.reco-card__metric + .reco-card__metric {
    border-left: 1px solid var(--border);
}

.reco-card__metric-label {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.reco-card__metric-value {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: 600;
    margin-top: 4px;
}

/* ── Utilities ── */
.text-primary     { color: var(--primary); }
.text-muted       { color: var(--muted-foreground); }
.text-error       { color: var(--color-error-foreground); }
.text-success     { color: var(--color-success-foreground); }
.text-warning     { color: var(--color-warning-foreground); }

.flex             { display: flex; }
.flex-col         { flex-direction: column; }
.items-center     { align-items: center; }
.justify-between  { justify-content: space-between; }
.gap-2            { gap: var(--space-2); }
.gap-3            { gap: var(--space-3); }
.gap-4            { gap: var(--space-4); }
.gap-6            { gap: var(--space-6); }
.w-full           { width: 100%; }

/* ══════════════════════════════════════════════════════════════════════
   Public Pages (landing, auth, gate)
   Shared visual language for unauthenticated screens.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Topbar ── */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 72px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    z-index: 40;
}

.topbar__inner {
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.topbar__brand-mark {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--primary);
    color: var(--primary-foreground);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.topbar__brand-mark .material-symbols-sharp {
    font-size: 20px;
}

.topbar__brand-text {
    font-family: var(--font-primary);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}

.topbar__nav {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    list-style: none;
}

.topbar__nav-link {
    font-family: var(--font-secondary);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--muted-foreground);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.topbar__nav-link:hover {
    color: var(--foreground);
}

/* ── Hamburger button (mobile only) ── */
.topbar__burger {
    display: none;
    background: none;
    border: none;
    padding: var(--space-2);
    color: var(--foreground);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.topbar__burger:hover {
    background: var(--muted);
}

.topbar__burger .material-symbols-sharp {
    font-size: 24px;
}

/* ── Mobile nav panel ── */
.topbar__mobile-nav {
    border-top: 1px solid var(--border);
    padding: var(--space-4) var(--space-5);
    background: var(--card);
}

.topbar__mobile-nav[hidden] {
    display: none;
}

.topbar__mobile-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.topbar__mobile-link {
    display: block;
    padding: var(--space-3) var(--space-3);
    font-family: var(--font-secondary);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--foreground);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

.topbar__mobile-link:hover {
    background: var(--muted);
}

.topbar__mobile-cta {
    margin-top: var(--space-3);
    width: 100%;
    justify-content: center;
}

/* ── Skip-to-content ── */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    z-index: 200;
    padding: var(--space-3) var(--space-5);
    background: var(--primary);
    color: var(--primary-foreground);
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: var(--space-3);
}

/* ── Public Shell Wrapper ── */
.public-shell {
    padding-top: 72px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.public-messages {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 1200px;
    width: 100%;
    margin: var(--space-5) auto 0;
    padding: 0 40px;
    box-sizing: border-box;
}

.dashboard-messages {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* ── Hero ── */
.hero {
    padding: 96px 32px 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--muted);
    color: var(--primary);
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--space-6);
}

.hero__title {
    font-family: var(--font-primary);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--foreground);
    max-width: 820px;
    margin: 0;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.hero__subtitle {
    font-family: var(--font-secondary);
    font-size: var(--text-xl);
    color: var(--muted-foreground);
    max-width: 680px;
    margin: var(--space-6) 0 var(--space-8);
    line-height: 1.65;
}

.hero__actions {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    justify-content: center;
}

.hero__signin {
    margin-top: var(--space-5);
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--muted-foreground);
}

.hero__signin-link {
    color: var(--primary);
    font-weight: 500;
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.hero__signin-link:hover {
    opacity: 0.85;
}

/* ── Features ── */
.features {
    padding: 64px 32px;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

.section-header {
    text-align: center;
    margin-bottom: var(--space-10);
}

.section-header__label {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: var(--space-2);
}

.section-header__title {
    font-family: var(--font-primary);
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    font-weight: 700;
    color: var(--foreground);
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.features__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.feature-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.feature-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
    border-color: var(--primary);
}

.feature-card__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--muted);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-5);
}

.feature-card__icon .material-symbols-sharp {
    font-size: 24px;
}

.feature-card__title {
    font-family: var(--font-primary);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: var(--space-3);
    line-height: 1.35;
    text-wrap: balance;
}

.feature-card__description {
    font-family: var(--font-secondary);
    font-size: var(--text-base);
    color: var(--muted-foreground);
    line-height: 1.7;
}

/* ── CTA Section ── */
.cta-section {
    padding: 80px 32px;
    text-align: center;
}

.cta-card {
    max-width: 640px;
    margin: 0 auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 56px 48px;
    box-shadow: var(--shadow-card);
}

.cta-card__title {
    font-family: var(--font-primary);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: var(--space-3);
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.cta-card__description {
    font-family: var(--font-secondary);
    font-size: var(--text-lg);
    color: var(--muted-foreground);
    margin-bottom: var(--space-6);
    line-height: 1.6;
}

/* ── Public Footer ── */
.public-footer {
    margin-top: auto;
    border-top: 1px solid var(--border);
}

.public-footer__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-6) 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.public-footer__text {
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--muted-foreground);
}

.public-footer__links {
    display: flex;
    gap: var(--space-6);
}

.public-footer__link {
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.public-footer__link:hover {
    color: var(--foreground);
}

/* ── Hero (report variant) ── */
.hero--report {
    padding: 80px 32px 48px;
}

.hero--report .hero__badge .material-symbols-sharp {
    font-size: 16px;
}

.hero--report .hero__title {
    max-width: 900px;
}

/* ── Stat Band ── */
.stat-band {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--card);
}

.stat-band__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-8) 32px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

.stat-band__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 0 var(--space-4);
    border-left: 2px solid var(--primary);
}

.stat-band__value {
    font-family: var(--font-primary);
    font-size: var(--text-4xl);
    font-weight: 700;
    color: var(--foreground);
    letter-spacing: -0.02em;
    line-height: 1;
}

.stat-band__label {
    font-family: var(--font-secondary);
    font-size: var(--text-base);
    color: var(--foreground);
    font-weight: 500;
    line-height: 1.4;
    margin-top: var(--space-2);
}

.stat-band__source {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ── Section header — subtitle modifier ── */
.section-header__sub {
    font-family: var(--font-secondary);
    font-size: var(--text-lg);
    color: var(--muted-foreground);
    max-width: 760px;
    margin: var(--space-4) auto 0;
    line-height: 1.65;
}

/* ── Calculator ── */
.calculator {
    padding: 80px 32px;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

.calculator__panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-10);
    box-shadow: var(--shadow-card);
}

.calculator__grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-10);
    align-items: stretch;
}

.calculator__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.calculator__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.calculator__label {
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--foreground);
}

.calculator__input {
    width: 100%;
    padding: 12px 14px;
    font-family: var(--font-primary);
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--foreground);
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.calculator__input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.15);
}

.calculator__input:out-of-range,
.calculator__input:invalid {
    border-color: var(--destructive);
}

.calculator__input:out-of-range:focus,
.calculator__input:invalid:focus {
    border-color: var(--destructive);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.calculator__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.calculator__input-wrap .calculator__input {
    padding-right: 52px;
}

.calculator__input--currency {
    padding-left: 28px;
}

.calculator__prefix,
.calculator__suffix {
    position: absolute;
    font-family: var(--font-primary);
    font-size: var(--text-base);
    color: var(--muted-foreground);
    pointer-events: none;
}

.calculator__prefix {
    left: 14px;
}

.calculator__suffix {
    right: 14px;
}

.calculator__hint {
    font-family: var(--font-secondary);
    font-size: var(--text-xs);
    color: var(--muted-foreground);
}

.calculator__result {
    background: var(--sidebar-accent);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.calculator__result-label {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--primary);
    font-weight: 600;
}

.calculator__result-value {
    font-family: var(--font-primary);
    font-size: clamp(2.5rem, 6vw, 3.75rem);
    font-weight: 700;
    color: var(--foreground);
    letter-spacing: -0.03em;
    line-height: 1;
}

.calculator__result-sub {
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--muted-foreground);
}

.calculator__result-sub span {
    color: var(--foreground);
    font-weight: 600;
    font-family: var(--font-primary);
}

.calculator__breakdown {
    list-style: none;
    padding: 0;
    margin: var(--space-4) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    border-top: 1px solid var(--border);
    padding-top: var(--space-4);
}

.calculator__breakdown li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--muted-foreground);
}

.calculator__breakdown strong {
    font-family: var(--font-primary);
    color: var(--foreground);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.calculator__cta {
    margin-top: var(--space-5);
    justify-content: center;
}

.calculator__meta {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border);
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    line-height: 1.7;
    max-width: 920px;
}

/* ── Calculator "what we don't count" note ── */
.calculator__note {
    margin-top: var(--space-6);
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
}

.calculator__note-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.calculator__note-header .material-symbols-sharp {
    color: var(--primary);
    font-size: 26px;
    flex-shrink: 0;
}

.calculator__note-title {
    font-family: var(--font-primary);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--foreground);
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.2;
}

.calculator__note-intro {
    font-family: var(--font-secondary);
    font-size: var(--text-lg);
    color: var(--muted-foreground);
    line-height: 1.7;
    margin: 0 0 var(--space-6);
    max-width: 880px;
}

.calculator__note-list {
    list-style: none;
    margin: 0 0 var(--space-6);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.calculator__note-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-5);
    background: var(--sidebar-accent);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.calculator__note-item:last-child {
    grid-column: 1 / -1;
}

.calculator__note-item .material-symbols-sharp {
    color: var(--primary);
    font-size: 22px;
    flex-shrink: 0;
    margin-top: 2px;
}

.calculator__note-item > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.calculator__note-item > div > strong {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--foreground);
    line-height: 1.3;
}

.calculator__note-item > div > span {
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    line-height: 1.55;
}

.calculator__note-footer {
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    font-style: italic;
    margin: 0;
    line-height: 1.7;
    padding-top: var(--space-5);
    border-top: 1px solid var(--border);
}

/* ── Report section ── */
.report {
    padding: 80px 32px;
    max-width: 1180px;
    margin: 0 auto;
    width: 100%;
    border-top: 1px solid var(--border);
}

.report__pillar {
    margin-top: var(--space-10);
}

.report__pillar:first-of-type {
    margin-top: var(--space-10);
}

.report__pillar-title {
    font-family: var(--font-primary);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--foreground);
    letter-spacing: -0.01em;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
}

.report__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.report-stat {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: border-color var(--transition-base), transform var(--transition-base);
}

.report-stat:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.report-stat__value {
    font-family: var(--font-primary);
    font-size: var(--text-4xl);
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.report-stat__body {
    font-family: var(--font-secondary);
    font-size: var(--text-base);
    color: var(--foreground);
    line-height: 1.65;
    margin: 0;
}

.report-stat__source {
    margin-top: auto;
    padding-top: var(--space-3);
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted-foreground);
    border-top: 1px solid var(--border);
}

a.report-stat__source {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--transition-fast), border-top-color var(--transition-fast);
}

a.report-stat__source:hover,
a.report-stat__source:focus-visible {
    color: var(--primary);
    border-top-color: var(--primary);
}

a.report-stat__source:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.report-stat__source-icon {
    font-size: 14px;
    line-height: 1;
    opacity: 0.5;
    flex-shrink: 0;
    transition: opacity var(--transition-fast), color var(--transition-fast);
}

a.report-stat__source:hover .report-stat__source-icon,
a.report-stat__source:focus-visible .report-stat__source-icon {
    opacity: 1;
    color: var(--primary);
}

/* ── Quote strip ── */
.quote-strip {
    padding: 64px 32px;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.quote-strip__text {
    font-family: var(--font-primary);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 500;
    color: var(--foreground);
    line-height: 1.4;
    letter-spacing: -0.01em;
    font-style: italic;
    margin: 0 0 var(--space-4);
}

.quote-strip__attribution {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted-foreground);
    margin: 0;
}

.quote-strip__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.quote-strip__link:hover,
.quote-strip__link:focus-visible {
    color: var(--primary);
}

.quote-strip__link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.quote-strip__link .material-symbols-sharp {
    font-size: 14px;
    line-height: 1;
    opacity: 0.5;
    transition: opacity var(--transition-fast), color var(--transition-fast);
}

.quote-strip__link:hover .material-symbols-sharp,
.quote-strip__link:focus-visible .material-symbols-sharp {
    opacity: 1;
    color: var(--primary);
}

/* ── Providers strip ── */
.providers {
    padding: 48px 32px 16px;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.providers__label {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted-foreground);
    margin-bottom: var(--space-5);
}

.providers__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
}

.providers__item {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--foreground);
    padding: 10px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--card);
}

.providers__item--active {
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
}

.providers__item--soon {
    opacity: 0.5;
}

/* ── CTA card — wide variant ── */
.cta-card--wide {
    max-width: 780px;
    padding: 64px 56px;
}

.cta-card__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--muted);
    color: var(--primary);
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--space-5);
}

.cta-card__eyebrow .material-symbols-sharp {
    font-size: 14px;
}

.cta-card__actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--space-6);
}

/* ── Footer nav columns ── */
.public-footer__nav {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* ── Legal pages ── */
.legal-shell {
    max-width: 720px;
    margin: 0 auto;
    padding: 64px 32px 96px;
}

.legal-shell__container {
    text-align: center;
}

.legal-shell__title {
    font-family: var(--font-primary);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--foreground);
    margin: 0 0 var(--space-6) 0;
}

.legal-shell__placeholder {
    font-family: var(--font-secondary);
    font-size: var(--text-lg);
    color: var(--muted-foreground);
    line-height: 1.6;
    margin: 0 0 var(--space-4) 0;
}

.legal-shell__contact {
    font-family: var(--font-secondary);
    font-size: var(--text-base);
    color: var(--muted-foreground);
}

.legal-shell__contact a {
    color: var(--primary);
    text-decoration: none;
}

.legal-shell__contact a:hover {
    text-decoration: underline;
}

/* Long-form legal documents (privacy policy, ToS, DPA, security page) —
   wider, left-aligned reading column on top of the legal shell. */
.legal-shell--doc {
    max-width: 860px;
}

.legal-shell--doc .legal-shell__container {
    text-align: left;
}

.legal-doc__meta {
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    margin: 0 0 var(--space-6) 0;
}

.legal-doc {
    font-family: var(--font-secondary);
    font-size: var(--text-base);
    color: var(--foreground);
    line-height: 1.7;
}

.legal-doc h2 {
    font-family: var(--font-primary);
    font-size: var(--text-xl);
    font-weight: 700;
    margin: var(--space-8) 0 var(--space-3) 0;
}

.legal-doc h3 {
    font-family: var(--font-secondary);
    font-size: var(--text-lg);
    font-weight: 600;
    margin: var(--space-5) 0 var(--space-2) 0;
}

.legal-doc p {
    margin: 0 0 var(--space-3) 0;
}

.legal-doc ul,
.legal-doc ol {
    margin: 0 0 var(--space-3) 0;
    padding-left: 24px;
}

.legal-doc li {
    margin-bottom: var(--space-1);
}

.legal-doc a {
    color: var(--primary);
    text-decoration: none;
}

.legal-doc a:hover {
    text-decoration: underline;
}

.legal-doc__table-wrap {
    overflow-x: auto;
    margin: 0 0 var(--space-4) 0;
}

.legal-doc table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.legal-doc th,
.legal-doc td {
    text-align: left;
    padding: 10px 12px;
    border: 1px solid var(--border);
    vertical-align: top;
}

.legal-doc th {
    background: var(--muted);
    font-weight: 600;
}

/* Plain-language summary box (WP260 layered-notice first layer). */
.legal-doc__summary {
    background: var(--muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    margin: 0 0 var(--space-5) 0;
}

/* GDPR Art. 21(4): the right to object must be presented clearly and
   SEPARATELY from other information — hence a distinct highlighted box. */
.legal-doc__highlight {
    background: var(--accent);
    border: 1px solid var(--primary);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    margin: 0 0 var(--space-4) 0;
}

/* Registration consent checkbox — checkbox inline with linked label text. */
.consent-check {
    margin-top: var(--space-2);
}

.consent-check__label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    cursor: pointer;
}

.consent-check__input {
    width: 16px;
    height: 16px;
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: var(--primary);
}

.consent-check__text {
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    line-height: 1.5;
}

.consent-check__text a {
    color: var(--primary);
    text-decoration: none;
}

.consent-check__text a:hover {
    text-decoration: underline;
}

/* Unfilled operator data ([COMPANY NAME], [NIP], …) — visually loud so a
   placeholder can never slip into production unnoticed. --destructive (not the
   warning-foreground token) because #EA580C on the warm warning tint is only
   ~3.35:1 in the light theme — below AA for normal-size text. */
.legal-doc__todo {
    background: var(--color-warning);
    color: var(--destructive);
    padding: 0 4px;
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.public-footer__link--accent {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--primary);
    font-weight: 500;
}

.public-footer__link--accent .material-symbols-sharp {
    font-size: 16px;
    line-height: 1;
}

.public-footer__link--accent:hover {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Auth Shell ── */
.auth-shell {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 16px 64px;
}

.auth-shell__container {
    width: 100%;
    max-width: 460px;
}

.auth-shell__container--wide {
    max-width: 560px;
}

.auth-shell__header {
    text-align: center;
    margin-bottom: var(--space-8);
}

.auth-shell__title {
    font-family: var(--font-primary);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--foreground);
    letter-spacing: -0.01em;
}

.auth-shell__subtitle {
    font-family: var(--font-secondary);
    font-size: var(--text-base);
    color: var(--muted-foreground);
    margin-top: var(--space-2);
    line-height: 1.6;
}

/* ── Auth Card ── */
.auth-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--shadow-card);
}

.auth-card--centered {
    text-align: center;
}

.auth-card__icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-6);
}

.auth-card__icon .material-symbols-sharp {
    font-size: 32px;
}

.auth-card__icon--info {
    background: var(--color-info);
    color: var(--color-info-foreground);
}

.auth-card__icon--success {
    background: var(--color-success);
    color: var(--color-success-foreground);
}

.auth-card__icon--warning {
    background: var(--color-warning);
    color: var(--color-warning-foreground);
}

.auth-card__title {
    font-family: var(--font-primary);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: var(--space-3);
}

.auth-card__text {
    font-family: var(--font-secondary);
    font-size: var(--text-base);
    color: var(--muted-foreground);
    line-height: 1.6;
    margin-bottom: var(--space-3);
}

.auth-card__email {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    color: var(--foreground);
    margin: var(--space-2) 0 var(--space-4);
    word-break: break-all;
}

.auth-card__help {
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    margin-top: var(--space-5);
}

.auth-card__help a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.auth-card__help a:hover {
    opacity: 0.85;
}

.auth-card__footer {
    text-align: center;
    margin-top: var(--space-6);
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--muted-foreground);
}

.auth-card__footer-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.auth-card__footer-link:hover {
    opacity: 0.85;
}

.auth-card__actions {
    margin-top: var(--space-6);
}

/* ── Auth Form Cascade (Django form.as_p output) ── */
/* Vertical rhythm between form-groups and the submit button inside an
   auth card. Without this every field sits flush against the next one
   (Password → Sign in button with zero breathing room). */
.auth-card__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.auth-card__form p {
    margin-bottom: var(--space-5);
}

.auth-card__form p:last-of-type {
    margin-bottom: var(--space-6);
}

.auth-card__form label {
    display: block;
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--foreground);
    margin-bottom: var(--space-2);
}

.auth-card__form input[type="text"],
.auth-card__form input[type="email"],
.auth-card__form input[type="password"],
.auth-card__form select {
    width: 100%;
    height: 40px;
    padding: 8px 16px;
    font-family: var(--font-secondary);
    font-size: var(--text-base);
    color: var(--foreground);
    background: var(--background);
    border: 1px solid var(--input);
    border-radius: var(--radius-pill);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.auth-card__form select {
    cursor: pointer;
    padding-right: 40px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px 16px;
}

.auth-card__form input[type="text"]::placeholder,
.auth-card__form input[type="email"]::placeholder,
.auth-card__form input[type="password"]::placeholder {
    color: var(--muted-foreground);
}

.auth-card__form input[type="text"]:focus,
.auth-card__form input[type="email"]:focus,
.auth-card__form input[type="password"]:focus,
.auth-card__form select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.15);
}

.auth-card__form textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px 16px;
    font-family: var(--font-secondary);
    font-size: var(--text-base);
    color: var(--foreground);
    background: var(--background);
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    outline: none;
    resize: vertical;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.auth-card__form textarea::placeholder {
    color: var(--muted-foreground);
}

.auth-card__form textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.15);
}

.auth-card__form .helptext {
    display: block;
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    margin-top: var(--space-2);
    line-height: 1.5;
}

.auth-card__form .helptext ul {
    list-style: none;
    padding: 0;
    margin-top: var(--space-1);
}

.auth-card__form .helptext li {
    position: relative;
    padding-left: var(--space-3);
    margin-bottom: 2px;
}

.auth-card__form .helptext li::before {
    content: '·';
    position: absolute;
    left: 4px;
    color: var(--muted-foreground);
    font-weight: 700;
}

.auth-card__form .errorlist {
    list-style: none;
    padding: 0;
    margin-top: var(--space-2);
}

.auth-card__form .errorlist li {
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--color-error-foreground);
    background: var(--color-error);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-1);
}

.auth-card__submit {
    width: 100%;
}

/* ── Gate (Private Preview) ── */
.gate-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
    background: var(--background);
}

.gate-card {
    width: 100%;
    max-width: 440px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 48px 40px 32px;
    box-shadow: var(--shadow-card);
    text-align: center;
}

.gate-card__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    margin-bottom: var(--space-6);
}

.gate-card__brand-mark {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--primary);
    color: var(--primary-foreground);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gate-card__brand-mark .material-symbols-sharp {
    font-size: 20px;
}

.gate-card__brand-text {
    font-family: var(--font-primary);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}

.gate-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--muted);
    color: var(--primary);
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: var(--space-5);
}

.gate-card__title {
    font-family: var(--font-primary);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: var(--space-3);
    letter-spacing: -0.01em;
}

.gate-card__subtitle {
    font-family: var(--font-secondary);
    font-size: var(--text-base);
    color: var(--muted-foreground);
    line-height: 1.6;
    margin-bottom: var(--space-6);
}

.gate-card__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    text-align: left;
}

.gate-card__form input[type="text"],
.gate-card__form input[type="password"] {
    width: 100%;
    height: 40px;
    padding: 8px 16px;
    font-family: var(--font-secondary);
    font-size: var(--text-base);
    color: var(--foreground);
    background: var(--background);
    border: 1px solid var(--input);
    border-radius: var(--radius-pill);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.gate-card__form input[type="text"]::placeholder,
.gate-card__form input[type="password"]::placeholder {
    color: var(--muted-foreground);
}

.gate-card__form input[type="text"]:focus,
.gate-card__form input[type="password"]:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.15);
}

.gate-card__error {
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--color-error-foreground);
    margin: calc(-1 * var(--space-1)) 0 0;
}

.gate-card__footer {
    margin-top: var(--space-6);
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    color: var(--muted-foreground);
    letter-spacing: 0.05em;
}

/* ── Settings ── */
/* Narrow, centred reading column for the Settings page — mirrors
   .recommendations-content so every single-column form-heavy screen shares
   the same content-width rhythm. Without this cap, forms stretch the full
   dashboard main area (up to ~1440px) and inputs look absurdly wide. */
.settings-content {
    max-width: 960px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.settings__section {
    margin-top: var(--space-10);
}

.settings__section-title {
    font-family: var(--font-primary);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: var(--space-4);
}

/* Section title that carries a status badge (e.g. "Beta") next to the
   heading text. Flex + center-align so the badge sits on the title's
   optical baseline rather than the top of the cap height. */
.settings__section-title--with-badge {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.settings__card {
    margin-bottom: var(--space-5);
}

.settings__card--danger {
    border-color: var(--destructive);
}

.settings__card--danger .card__header {
    border-bottom-color: var(--destructive);
}

.settings__card--danger .card__title {
    color: var(--destructive);
}

.settings__description {
    font-family: var(--font-secondary);
    font-size: var(--text-base);
    color: var(--muted-foreground);
    line-height: 1.6;
    margin-bottom: var(--space-5);
}

.settings__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.settings__form input[type="text"],
.settings__form input[type="email"],
.settings__form input[type="password"],
.settings__form input[type="number"],
.settings__form select {
    width: 100%;
    height: 40px;
    padding: 8px 16px;
    font-family: var(--font-secondary);
    font-size: var(--text-base);
    color: var(--foreground);
    background: var(--background);
    border: 1px solid var(--input);
    border-radius: var(--radius-pill);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.settings__form input[type="text"]::placeholder,
.settings__form input[type="email"]::placeholder,
.settings__form input[type="password"]::placeholder,
.settings__form input[type="number"]::placeholder {
    color: var(--muted-foreground);
}

.settings__form input[type="text"]:focus,
.settings__form input[type="email"]:focus,
.settings__form input[type="password"]:focus,
.settings__form input[type="number"]:focus,
.settings__form select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.15);
}

.settings__form--inline {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--space-4);
    align-items: end;
}

.settings__form-grow {
    min-width: 0;
}

.settings__form-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-start;
    align-items: center;
}

.settings__form--inline .settings__form-actions {
    align-self: end;
    padding-bottom: 0;
}

.settings__field-error {
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--color-error-foreground);
}

.settings__field-help {
    font-family: var(--font-secondary);
    font-size: var(--text-xs);
    color: var(--muted-foreground);
    line-height: 1.5;
}

.settings__field-help ul {
    padding-left: var(--space-5);
    margin-top: var(--space-1);
}

.settings__inline-form {
    display: inline-flex;
    margin: 0;
}

.settings__icon-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--destructive);
}

/* Non-destructive icon action (e.g. re-include a billable contributor) —
   the default red reads as an alarm, wrong for an undo/positive action. */
.settings__icon-btn--neutral {
    color: var(--primary);
}

.settings__icon-btn .material-symbols-sharp {
    font-size: 18px;
}

.settings__pending {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border);
}

.settings__pending-title {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-3);
}

.settings__pending-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.settings__pending-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--foreground);
    border-bottom: 1px solid var(--border);
}

.settings__pending-item:last-child {
    border-bottom: none;
}

.settings__pending-email {
    flex: 1;
    font-family: var(--font-primary);
    color: var(--foreground);
    word-break: break-all;
}

.settings__pending-date {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    color: var(--muted-foreground);
}

/* ── Dashboard Analytics ── */
.dash-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.dash-header__meta {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    margin-left: var(--space-2);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--space-6);
    align-items: start;
}

.provider-filter {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
    background: var(--muted);
    border-radius: var(--radius-pill);
    padding: 3px;
}
.provider-filter__pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--muted-foreground);
    background: transparent;
    border: none;
    text-decoration: none;
    transition: var(--transition-fast);
    cursor: pointer;
}
.provider-filter__pill:hover {
    color: var(--foreground);
    background: var(--card);
}
.provider-filter__pill--active {
    color: var(--foreground);
    background: var(--card);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}

/* ── Provider health sidebar ── */
.dash-sidebar__title {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: var(--space-3);
}

.dash-provider-card {
    display: block;
    padding: 16px;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    text-decoration: none;
    transition: var(--transition-fast);
}
.dash-provider-card:hover { opacity: 0.85; }

.dash-provider-card__rate {
    font-family: var(--font-primary);
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: 1;
}
.dash-provider-card__name {
    font-family: var(--font-secondary);
    font-size: var(--text-base);
    font-weight: 600;
    margin-top: var(--space-1);
}
.dash-provider-card__detail {
    font-family: var(--font-secondary);
    font-size: var(--text-xs);
    margin-top: var(--space-1);
    opacity: 0.75;
}

/* Provider card colors — reuse status tokens */
.dash-provider-card.status-card--ok {
    background: var(--color-success);
    color: var(--color-success-foreground);
}
.dash-provider-card.status-card--warning {
    background: var(--color-warning);
    color: var(--color-warning-foreground);
}
.dash-provider-card.status-card--error {
    background: var(--color-error);
    color: var(--color-error-foreground);
}

/* ── Dashboard empty state ── */
.dash-empty {
    text-align: center;
    padding: 40px 20px;
}
.dash-empty__icon {
    font-size: 32px;
    color: var(--muted-foreground);
}
.dash-empty__text {
    color: var(--muted-foreground);
    margin-top: var(--space-2);
    font-size: var(--text-sm);
}
.dash-empty__icon--success { color: var(--color-success-foreground); }

/* ── Dashboard zero-state (no providers) ── */
.dash-zero-state {
    text-align: center;
    padding: 80px 0;
}
.dash-zero-state__icon {
    font-size: 48px;
    color: var(--muted-foreground);
}
.dash-zero-state__title {
    color: var(--muted-foreground);
    margin-top: 16px;
    font-size: var(--text-lg);
}
.dash-zero-state__text {
    color: var(--muted-foreground);
    font-size: var(--text-base);
    margin-top: 8px;
}
.dash-zero-state__cta { margin-top: 24px; }

/* "Analysed — nothing actionable" state: a successful-but-empty generation,
   distinct from the never-generated onboarding zero-state. */
.rec-no-results__icon { color: var(--color-success-foreground); }
.rec-no-results__health {
    max-width: 560px;
    margin: var(--space-4) auto 0;
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--border);
    background: var(--muted);
    border-radius: var(--radius-sm);
    color: var(--foreground);
    font-size: var(--text-sm);
    font-style: italic;
    text-align: left;
}
.rec-no-results__meta { font-size: var(--text-xs); margin-top: var(--space-3); }

/* ── Card header (split + icons) ── */
.card__header--split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}
/* Connectors picker header: Sync now + Refresh sit side by side. */
.connectors-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.card__content--flush { padding: 0; }
.card__title-icon {
    font-size: 20px;
    vertical-align: middle;
    margin-right: 6px;
}
.card__title-icon--error   { color: var(--color-error-foreground); }
.card__title-icon--primary { color: var(--primary); }
.card__title-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 0 8px;
    margin-left: 8px;
    height: 20px;
    border-radius: var(--radius-pill);
    background: var(--muted);
    color: var(--muted-foreground);
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: 600;
}

/* ── Dashboard toolbar (search + filters above table) ── */
.dash-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.dash-toolbar--compact { gap: var(--space-1); }
.dash-toolbar__search {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.dash-toolbar__search-icon {
    position: absolute;
    left: 10px;
    font-size: 18px;
    color: var(--muted-foreground);
    pointer-events: none;
}

/* Search input with leading icon */
.form-input--search {
    padding-left: 34px;
    min-width: 240px;
    width: auto;
    height: 34px;
    font-size: var(--text-sm);
}
/* Small select (for inline filters) */
.form-select--sm {
    width: auto;
    height: 34px;
    padding: 0 28px 0 12px;
    font-size: var(--text-sm);
}
/* Screen-reader-only label (kept for accessibility without UI chrome) */
.form-label--sr,
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Horizontal scroll wrapper for tables ── */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Table cell modifiers ── */
.table__cell--right   { text-align: right; }
.table__cell--strong  { font-weight: 500; }
.table__cell--muted   { color: var(--muted-foreground); }
.table__cell--mono    { font-family: var(--font-primary); }
.table__cell--actions {
    text-align: right;
    width: 48px;
}
.table__cell--jobs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    max-width: 240px;
    overflow: hidden;
}
/* `.label` is declared `display: inline-flex`, but the spec blockifies
   inline-flex into flex when the element is itself a flex item — that makes
   each label grow to fill the cell width and stack vertically, giving the
   Recent Failures table uneven row heights. Pin labels to content width and
   ellipsize long names so every row lands on a single line. */
.table__cell--jobs .label {
    flex: 0 1 auto;
    display: inline-flex;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Stacked cell content (two-line cell) */
.cell-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.cell-stack--inline {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.cell-stack__primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--foreground);
}
.cell-stack__secondary {
    font-size: var(--text-xs);
    color: var(--muted-foreground);
}

/* Recent-failures table: balanced column widths so it doesn't stretch at low row counts */
.table--failures th,
.table--failures td { padding: 12px 14px; }
.table--failures th:nth-child(1),
.table--failures td:nth-child(1) { min-width: 180px; max-width: 300px; }
.table--failures th:nth-child(2),
.table--failures td:nth-child(2) { min-width: 120px; max-width: 220px; }
.table--failures th:nth-child(3),
.table--failures td:nth-child(3) { max-width: 240px; }
.table--failures th:nth-child(4),
.table--failures td:nth-child(4),
.table--failures th:nth-child(5),
.table--failures td:nth-child(5) { white-space: nowrap; }
/* Pin every Recent-Failures row to a baseline height so inline chips
   ("Cancelled" / "Timed out") and long pipeline names don't produce uneven
   vertical rhythm. Rows can grow when Failed-Jobs chips wrap to a second
   line, so use min-height rather than a hard height cap. */
.table--failures tbody tr { height: auto; min-height: 72px; }

/* Recent Failures table should never produce a horizontal scrollbar —
   Failed-Jobs chips wrap via .table__cell--jobs { flex-wrap: wrap }. */
.card:has(> .card__content > .table-wrap > .table--failures) .table-wrap {
    overflow-x: hidden;
}
.table--failures tbody td { vertical-align: middle; }
.table--failures .cell-stack__primary {
    flex-wrap: nowrap;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.table--failures .cell-stack--inline {
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
}
.table--failures .cell-stack--inline > .branch-chip,
.table--failures .cell-stack--inline > .trigger-chip {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.table__inline-icon {
    font-size: 16px;
    vertical-align: middle;
    margin-right: 6px;
    color: var(--muted-foreground);
}
.table__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    color: var(--muted-foreground);
    text-decoration: none;
    transition: var(--transition-fast);
}
.table__action:hover {
    background: var(--muted);
    color: var(--foreground);
}
.table__action .material-symbols-sharp { font-size: 18px; }

/* ── Sortable table headers ── */
.table--sortable th { padding: 0; }
.table--sortable th .table__sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 24px;
    width: 100%;
    color: inherit;
    text-decoration: none;
    font: inherit;
    cursor: pointer;
    transition: var(--transition-fast);
}
.table--sortable th .table__sort:hover { color: var(--foreground); }
.table--sortable th.table__cell--right .table__sort {
    justify-content: flex-end;
}
.table__sort-icon {
    font-size: 16px;
    opacity: 0.6;
}

/* ── Branch / trigger chips ── */
.branch-chip {
    display: inline-block;
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    padding: 2px 6px;
    background: var(--muted);
    border-radius: var(--radius-sm);
    color: var(--foreground);
}
.trigger-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    color: var(--muted-foreground);
}
.trigger-chip__icon {
    font-size: 16px;
    color: var(--muted-foreground);
}

/* ── Pagination ── */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 12px 24px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
.pagination__summary {
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--muted-foreground);
}
.pagination__controls {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.pagination__pageinfo {
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    padding: 0 var(--space-2);
}
.pagination__btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--foreground);
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition-fast);
}
.pagination__btn:hover { background: var(--muted); }
.pagination__btn .material-symbols-sharp { font-size: 18px; }
.pagination__btn--disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

/* ── Period badge ── */
.dash-period-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--muted-foreground);
    background: var(--muted);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
}

/* ── Failure rate utility colors ── */
.failure-rate--good { color: var(--color-success-foreground); }
.failure-rate--warn { color: var(--color-warning-foreground); }
.failure-rate--bad  { color: var(--color-error-foreground); }

/* ── Responsive ── */
@media (max-width: 1024px) {
    .sidebar { display: none; }
    .main-content { margin-left: 0; }
    .provider-grid { grid-template-columns: repeat(2, 1fr); }
    .dashboard-grid { grid-template-columns: 1fr; }
    .dash-header { flex-direction: column; }
    .features__grid { grid-template-columns: repeat(2, 1fr); }
    .stat-band__inner { grid-template-columns: repeat(2, 1fr); }
    .calculator__grid { grid-template-columns: 1fr; }
    .report__grid { grid-template-columns: repeat(2, 1fr); }
    .calculator__note-list { grid-template-columns: 1fr; }
    .calculator__note-item:last-child { grid-column: auto; }
}

@media (max-width: 640px) {
    .main-content { padding: 16px; }
    .stats-row { flex-direction: column; }
    .info-row { flex-direction: column; }
    .provider-grid { grid-template-columns: 1fr; }
    .status-cards { flex-direction: column; }
    .settings__form--inline { grid-template-columns: 1fr; }

    .topbar__inner { padding: 0 16px; }
    .topbar__nav--desktop { display: none; }
    .topbar__burger { display: flex; }
    .hero { padding: 80px 20px 48px; }
    .hero--report { padding: 72px 20px 40px; }
    .features { padding: 48px 20px; }
    .features__grid { grid-template-columns: 1fr; }
    .cta-section { padding: 48px 20px; }
    .cta-card { padding: 40px 28px; }
    .cta-card--wide { padding: 44px 24px; }
    .cta-card__actions { flex-direction: column; }
    .cta-card__actions .btn { width: 100%; justify-content: center; }
    .public-footer__inner { flex-direction: column; gap: var(--space-4); padding: var(--space-5) 20px; }
    .auth-card { padding: 28px; }
    .gate-card { padding: 36px 28px 28px; }

    .stat-band__inner { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-6) 20px; }
    .calculator { padding: 48px 20px; }
    .calculator__panel { padding: var(--space-6); }
    .calculator__result { padding: var(--space-6); }
    .calculator__note { padding: var(--space-6); }
    .calculator__note-title { font-size: var(--text-xl); }
    .report { padding: 48px 20px; }
    .report__grid { grid-template-columns: 1fr; }
    .report__pillar-title { font-size: var(--text-xl); }
    .quote-strip { padding: 48px 20px; }
    .providers { padding: 32px 20px 8px; }
}

/* =========================================================================
   Pricing

   Live since Phase 6: the public /pricing/ page (tier cards, comparison
   table, FAQ) and the landing pricing-summary section reuse these blocks.
   ========================================================================= */

/* ----- pricing section (landing page) ----- */
.pricing-section {
    padding: 64px 32px 48px;
    max-width: 1200px;
    margin: 0 auto;
}

.pricing-section__container {
    text-align: center;
}

.pricing-section__free-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    background: var(--color-success);
    color: var(--color-success-foreground);
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--space-5);
}

.pricing-section__free-badge .material-symbols-sharp {
    font-size: 18px;
}

.pricing-section__footnote {
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    margin-top: var(--space-8);
    text-align: center;
}

.pricing-section__footnote a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.pricing-section__footnote a:hover {
    text-decoration: underline;
}

.pricing-section__actions {
    display: flex;
    justify-content: center;
    margin-top: var(--space-8);
}

/* ── Pricing comparison table ── */
.ptable-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 0 16px;
}

.ptable {
    width: 100%;
    min-width: 640px;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    text-align: center;
}

.ptable__corner {
    width: 200px;
    min-width: 160px;
}

/* ── Header row ── */
.ptable__plan {
    padding: var(--space-5) var(--space-3) var(--space-4);
    vertical-align: bottom;
    position: relative;
}

.ptable__plan--featured {
    background: var(--accent);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    border-top: 2px solid var(--primary);
    border-left: 2px solid var(--primary);
    border-right: 2px solid var(--primary);
}

.ptable__plan-name {
    display: block;
    font-family: var(--font-secondary);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--foreground);
}

.ptable__plan-badge {
    display: inline-block;
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: var(--text-xs);
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-2);
}

/* ── Body cells ── */
.ptable__label {
    text-align: left;
    padding: 11px var(--space-4) 11px 0;
    font-weight: 500;
    color: var(--foreground);
    white-space: nowrap;
}

.ptable__val {
    padding: 11px var(--space-3);
    color: var(--foreground);
    font-weight: 500;
}

.ptable__val--featured {
    background: var(--accent);
    border-left: 2px solid var(--primary);
    border-right: 2px solid var(--primary);
}

/* ── Row styles ── */
.ptable tbody tr {
    border-bottom: 1px solid var(--border);
}

.ptable tbody tr:not(.ptable__row--cta):hover {
    background: var(--muted);
}

.ptable tbody tr:not(.ptable__row--cta):hover .ptable__val--featured {
    background: color-mix(in srgb, var(--primary) 8%, var(--muted));
}

.ptable__row--price td {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

.ptable__row--price strong {
    font-family: var(--font-primary);
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.ptable__row--cta td {
    padding: var(--space-5) var(--space-3) var(--space-4);
}

.ptable__row--cta .ptable__val--featured {
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    border-bottom: 2px solid var(--primary);
}

/* ── Check / dash icons ── */
.ptable__check {
    color: var(--color-success-foreground);
    font-size: 20px;
}

.ptable__dash {
    color: var(--muted-foreground);
    font-size: var(--text-base);
}

/* ── CTA buttons inside table ── */
.ptable .btn--sm {
    padding: 8px 20px;
    font-size: var(--text-sm);
    width: 100%;
    justify-content: center;
}

/* ----- pricing cards (public /pricing/ page + landing pricing summary) ----- */
.pricing--page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 64px 40px 48px;
}
.pricing__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    align-items: stretch;
    max-width: 1100px;
    margin: 0 auto;
}
.pricing__card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-5) var(--space-5);
    display: flex;
    flex-direction: column;
    transition: border-color var(--transition-base), transform var(--transition-base);
}
.pricing__card:hover {
    border-color: var(--primary);
}
.pricing__card--featured {
    border: 2px solid var(--primary);
    background: var(--accent);
    box-shadow: 0 12px 40px -16px rgba(108, 92, 231, 0.4);
}
.pricing__badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
}
.pricing__card-header {
    margin-bottom: var(--space-4);
}
.pricing__card-name {
    font-family: var(--font-secondary);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 var(--space-1) 0;
}
.pricing__card-lead {
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    margin: 0;
}
.pricing__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: var(--space-5);
}
.pricing__amount {
    font-family: var(--font-secondary);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--foreground);
    letter-spacing: -0.02em;
}
.pricing__interval {
    font-size: var(--text-base);
    color: var(--muted-foreground);
}
.pricing__price-note {
    font-size: var(--text-xs);
    color: var(--muted-foreground);
    margin: calc(-1 * var(--space-3)) 0 var(--space-5) 0;
}
.pricing__features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-6) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex-grow: 1;
}
.pricing__features li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--foreground);
}
.pricing__features .material-symbols-sharp {
    color: var(--primary);
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}
.pricing__cta {
    width: 100%;
    justify-content: center;
    margin-top: auto;
}
/* Wrapped in a flex container because `margin: auto` on a block <p> with
   max-width was unreliable inside the `.public-shell { display: flex }`
   ancestor chain -- block auto-margin centering interacts poorly with
   flex descendants in some browsers. Flex + justify-content: center is
   deterministic. */
.pricing__footnote-wrap {
    display: flex;
    justify-content: center;
    margin-top: var(--space-12);
}
.pricing__footnote {
    max-width: 720px;
    margin: 0;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--muted-foreground);
}

/* ----- card + settings helpers ----- */

/* The card header layouts title + status label side-by-side. .card__header is
   otherwise a plain block container, so pages opt in with this flex rule
   rather than editing the shared .card__header. */
.card .card__header:has(.label) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
}

/* Muted one-liner under a settings__section title. */
.settings__section-subtitle {
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    margin: 0 0 var(--space-4) 0;
    line-height: 1.5;
}

.settings__section-subtitle a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.settings__section-subtitle a:hover {
    text-decoration: underline;
}

/* ── Plan surfaces (U3): sidebar badge + global banner ── */

/* .sidebar__org is a flex column — keep the chip at its natural width. */
.sidebar__plan-badge {
    align-self: flex-start;
    margin-top: var(--space-2);
}

/* Persistent plan nudge above flash messages. Slimmer type than .alert so it
   never competes with one-shot flash messages sitting below it. */
.plan-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: 12px 16px;
    background: var(--color-info);
    color: var(--color-info-foreground);
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
}

/* display:flex beats the UA's [hidden] rule — same trap as
   .topbar__mobile-nav[hidden]. Dismissible banners render hidden until the
   reveal script clears it. */
.plan-banner[hidden] {
    display: none;
}

.plan-banner--free-over-cap {
    background: var(--color-warning);
    color: var(--color-warning-foreground);
}

.plan-banner--past-due {
    background: var(--color-error);
    color: var(--color-error-foreground);
}

.plan-banner__icon {
    font-size: 20px;
    flex-shrink: 0;
}

.plan-banner__body {
    flex: 1;
}

.plan-banner__link {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}

.plan-banner__dismiss {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}

.plan-banner__dismiss .material-symbols-sharp {
    font-size: 18px;
}

/* ----- pricing FAQ ----- */
.faq {
    max-width: 860px;
    margin: 0 auto;
}

.faq__item {
    border-bottom: 1px solid var(--border);
    padding: var(--space-4) 0;
}

.faq__q {
    font-family: var(--font-secondary);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--foreground);
    cursor: pointer;
    list-style-position: inside;
}

.faq__q:hover {
    color: var(--primary);
}

.faq__a {
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    line-height: 1.6;
    margin: var(--space-3) 0 0 0;
}

/* ----- pricing responsive ----- */
@media (max-width: 1024px) {
    .pricing__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .pricing--page { padding: 40px 20px 64px; }
    .pricing__grid { grid-template-columns: 1fr; }
    .pricing-section { padding: 48px 16px 48px; }
    .ptable__corner { width: 120px; min-width: 120px; }
    .ptable__label { font-size: var(--text-xs); padding-right: var(--space-2); }
    .ptable__val { padding: 10px var(--space-2); font-size: var(--text-xs); }
    .ptable__plan-name { font-size: var(--text-base); }
    .ptable__row--price strong { font-size: var(--text-lg); }
}

/* ─────────────────────────────────────────────────────────────────────────
   Modal dialog — native <dialog> element with project-styled content.
   Used for destructive confirmations (Disconnect GitHub, delete actions).
   Open with dialog.showModal(); close with dialog.close() or the Cancel
   button. The native element gives us focus trapping, Esc to close, and
   the backdrop overlay for free.
   ───────────────────────────────────────────────────────────────────────── */

.modal {
    padding: 0;
    border: none;
    background: transparent;
    max-width: 480px;
    width: calc(100vw - 32px);
    margin: auto;
    color: var(--foreground);
}

.modal::backdrop {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
}

.modal__panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.modal__header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal__icon {
    color: var(--color-error-foreground);
    flex-shrink: 0;
}

.modal__title {
    font-family: var(--font-primary);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--foreground);
}

.modal__body {
    padding: 24px;
    color: var(--muted-foreground);
    line-height: 1.6;
}

.modal__body p {
    margin: 0 0 12px 0;
}

.modal__body p:last-child {
    margin-bottom: 0;
}

.modal__body ul {
    margin: 0 0 12px 20px;
    padding: 0;
}

.modal__body ul li {
    margin-bottom: 4px;
}

.modal__actions {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    background: var(--muted, transparent);
}

/* =========================================================================
   Dashboard refinements
   ========================================================================= */

/* Bound the dashboard content width so horizontal space isn't wasted on
   ultra-wide screens. Stays fluid below 1440px. */
.dashboard-content {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Stale-snapshot banner — explicit warning when the daily snapshot is older
   than the stale threshold (Celery Beat paused, credits depleted, etc.). */
.dash-stale-banner {
    align-items: flex-start;
}

/* Freshness dot next to "Updated X ago" — green when fresh, amber when stale. */
.dash-header__freshness-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    background: var(--color-success-foreground);
    vertical-align: middle;
}
.dash-header__meta--stale .dash-header__freshness-dot {
    background: var(--color-warning-foreground);
}
.dash-header__meta--stale {
    color: var(--color-warning-foreground);
}

/* Time-range chips above Recent Failures. */
.range-chips {
    display: inline-flex;
    gap: 2px;
    background: var(--muted);
    border-radius: var(--radius-pill);
    padding: 3px;
}
.range-chips__chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--muted-foreground);
    text-decoration: none;
    transition: var(--transition-fast);
}
.range-chips__chip:hover {
    color: var(--foreground);
    background: var(--card);
}
.range-chips__chip--active {
    color: var(--foreground);
    background: var(--card);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}

/* Out-of-plan window (E2): visible but locked — a visibility gate, not a
   hidden feature. Hover explains via the title tooltip. */
.range-chips__chip--locked {
    cursor: not-allowed;
    opacity: 0.55;
    gap: 4px;
}

.range-chips__chip--locked .material-symbols-sharp {
    font-size: 14px;
}

/* Avg Duration split card — shows overall + success/failed breakdown so the
   "why do failures take longer?" insight is surfaced at a glance. */
.stat-card--split .stat-card__value {
    margin-bottom: 8px;
}
.stat-card__providers {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    margin-top: var(--space-2);
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
}
.stat-card__provider {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}
.stat-card__provider-name {
    color: var(--muted-foreground);
}
.stat-card__provider-value {
    font-weight: 600;
    color: var(--foreground);
}
.stat-card__provider-sep {
    color: var(--muted-foreground);
}
.stat-card__split {
    display: flex;
    gap: 16px;
    font-size: var(--text-sm);
    color: var(--muted-foreground);
}
.stat-card__split-item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}
.stat-card__split-label {
    font-family: var(--font-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: var(--text-xs);
}
.stat-card__split-value {
    font-family: var(--font-primary);
    font-weight: 600;
    color: var(--foreground);
}
.stat-card__split-value--fail {
    color: var(--color-error-foreground);
}

/* Avg Duration card when the org spans multiple providers: GitHub measures
   wall-clock, GitLab measures queue-excluded run time, so a blended average is
   non-comparable. We replace the number with a muted "Mixed providers" label
   plus a hint to filter to one provider. Smaller than the metric value since
   it's a phrase, not a figure. */
.stat-card__value--muted {
    font-size: var(--text-2xl);
    color: var(--muted-foreground);
}
.stat-card__hint {
    margin-top: 6px;
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--muted-foreground);
}

/* Clickable table rows in Recent Failures. Hit target = whole row, but the
   primary "open" action still lives on the When cell's anchor so keyboard
   users reach it via Tab. */
.table__row--clickable {
    cursor: pointer;
    transition: background var(--transition-fast);
}
.table__row--clickable:hover {
    background: var(--muted);
}
.table__row-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit;
    text-decoration: none;
}
.table__row-link:hover { color: var(--foreground); }
.table__row-link-icon {
    font-size: 16px;
    color: var(--muted-foreground);
}

/* Small "+" marker on pagination summary when the recent-failures cap kicks in
   (500). Communicates that the number is bounded, not a hard total. */
.pagination__summary-note {
    display: inline-block;
    margin-left: 2px;
    color: var(--muted-foreground);
    cursor: help;
    font-weight: 600;
}

/* On narrow screens the dashboard toolbar wraps; make sure range-chips stay
   on their own row rather than squeezing into the conclusion <select>. */
@media (max-width: 768px) {
    .dash-toolbar--compact {
        flex-direction: column;
        align-items: stretch;
    }
    .range-chips {
        align-self: flex-start;
    }
}

/* =========================================================================
   Estimated loss card (dashboard — global summary under hero stats)
   ========================================================================= */

.loss-card__settings {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    background: var(--muted);
    color: var(--muted-foreground);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: var(--transition-fast);
}
.loss-card__settings:hover {
    color: var(--foreground);
    background: var(--card);
    box-shadow: var(--shadow-sm);
}
.loss-card__settings .material-symbols-sharp {
    font-size: 16px;
}

.loss-card__body {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.loss-card__main {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.loss-card__value {
    font-family: var(--font-primary);
    font-size: var(--text-5xl);
    font-weight: 700;
    color: var(--color-error-foreground);
    line-height: 1.05;
}
.loss-card__per-dev {
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--color-error-foreground);
    opacity: 0.8;
}
.loss-card__reassurance {
    margin-top: 8px;
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--muted-foreground);
}

/* Per-repo loss column: red so it reads as "what you're losing" at a glance,
   visually tied to the main Estimated Loss card. Uses `.table td.repo-loss-cell`
   selector to win specificity against `.table td { color: var(--foreground) }`. */
.table td.repo-loss-cell {
    color: var(--color-error-foreground);
    font-weight: 600;
}

/* Small hint under hourly-rate input in Settings. */
.settings__field-hint {
    margin-top: 4px;
    font-family: var(--font-secondary);
    font-size: var(--text-xs);
    color: var(--muted-foreground);
}

/* =========================================================================
   Global filter bar (dashboard) — sticky under page title
   ========================================================================= */

.filter-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    margin-bottom: var(--space-5);
    background: var(--background);
    border-bottom: 1px solid var(--border);
}
.filter-bar__group {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.filter-bar__group + .filter-bar__group {
    padding-left: var(--space-5);
    border-left: 1px solid var(--border);
}
.filter-bar__label {
    font-family: var(--font-secondary);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.filter-bar__reset {
    margin-left: auto;
}
.filter-bar__reset .material-symbols-sharp {
    font-size: 16px;
    margin-right: 4px;
}

/* =========================================================================
   Sparkline (inline SVG)
   ========================================================================= */

.sparkline {
    display: inline-block;
    vertical-align: middle;
    overflow: visible;
}
.sparkline__line { stroke-linejoin: round; stroke-linecap: round; }
.sparkline__area { fill: currentColor; opacity: 0.12; }
.sparkline--empty {
    display: inline-block;
    color: var(--muted-foreground);
    font-family: var(--font-primary);
}
.stat-card__sparkline { margin-top: 6px; color: var(--muted-foreground); }

/* =========================================================================
   Loss breakdown (3-part rozbicie kosztu)
   ========================================================================= */

.loss-card__breakdown {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px dashed var(--border);
}
.loss-card__breakdown-item { display: flex; flex-direction: column; gap: 2px; }
.loss-card__breakdown-label {
    font-family: var(--font-secondary);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.loss-card__breakdown-value {
    font-family: var(--font-primary);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--foreground);
}
.loss-card__delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: var(--space-3);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
    width: fit-content;
}
.loss-card__delta .material-symbols-sharp { font-size: 16px; }
.loss-card__delta--worse { color: var(--color-error-foreground); background: var(--color-error); }
.loss-card__delta--better { color: var(--color-success-foreground); background: var(--color-success); }

/* =========================================================================
   Conclusion distribution bar
   ========================================================================= */

.conclusion-bar {
    display: flex;
    align-items: stretch;
    height: 8px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: var(--muted);
}
.conclusion-bar__slice {
    min-width: 4px;
    transition: flex-grow var(--transition-base), opacity var(--transition-base);
}
.conclusion-bar__slice--muted {
    opacity: 0.25;
}
.conclusion-bar__slice--active {
    outline: 2px solid var(--foreground);
    outline-offset: -2px;
}
.conclusion-bar__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-2);
}
.conclusion-bar__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-secondary);
    font-size: var(--text-xs);
    color: var(--muted-foreground);
}
/* Highlight the selected conclusion by emphasis (weight + full foreground),
   NOT by dimming the others' text — opacity on already-muted legend text would
   drop it below the WCAG AA contrast floor. Non-text bar slices keep opacity. */
.conclusion-bar__legend-item--active {
    color: var(--foreground);
    font-weight: 600;
}
.conclusion-bar__swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

/* =========================================================================
   Failure week strip (compact 7-cell view used for ≤7d ranges)
   ========================================================================= */

.failure-week-strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}
.failure-week-strip__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 4px;
    border-radius: var(--radius-sm);
    background: var(--muted);
    color: var(--muted-foreground);
    font-family: var(--font-primary);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    min-height: 84px;
}
.failure-week-strip__day:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.failure-week-strip__weekday {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted-foreground);
    font-weight: 600;
    line-height: 1;
}
.failure-week-strip__date {
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1;
}
.failure-week-strip__count {
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    margin-top: 2px;
    color: var(--color-error-foreground);
}
.failure-week-strip__day--lvl-0 {
    color: var(--foreground);
}
.failure-week-strip__day--lvl-1 {
    background: color-mix(in srgb, var(--color-error-foreground) 18%, var(--muted));
    color: var(--foreground);
}
.failure-week-strip__day--lvl-2 {
    background: color-mix(in srgb, var(--color-error-foreground) 38%, var(--muted));
    color: var(--foreground);
}
.failure-week-strip__day--lvl-3 {
    background: color-mix(in srgb, var(--color-error-foreground) 65%, var(--muted));
    color: #fff;
}
.failure-week-strip__day--lvl-3 .failure-week-strip__weekday,
.failure-week-strip__day--lvl-3 .failure-week-strip__count {
    color: #fff;
}
.failure-week-strip__day--lvl-4 {
    background: var(--color-error-foreground);
    color: #fff;
}
.failure-week-strip__day--lvl-4 .failure-week-strip__weekday,
.failure-week-strip__day--lvl-4 .failure-week-strip__count {
    color: #fff;
}

/* =========================================================================
   Failure calendar (month grid with day numbers + 0..4 intensity ramp)
   ========================================================================= */

.failure-calendar-card .card__header--split {
    gap: var(--space-4);
    flex-wrap: wrap;
}
.failure-calendar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}
/* The calendar lives in the dash-top-grid sidebar slot (~360–440px wide),
   so each month panel grows to fill the available column. Multiple months
   stack onto new rows when the column is too narrow to fit them side by side. */
.failure-calendar__month {
    flex: 1 1 260px;
    min-width: 0;
}
/* Native <details> expander styled to match the card. */
.failure-calendar__expand {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border);
}
.failure-calendar__expand-summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--muted);
    color: var(--foreground);
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background var(--transition-base);
}
.failure-calendar__expand-summary::-webkit-details-marker {
    display: none;
}
.failure-calendar__expand-summary::marker {
    content: "";
}
.failure-calendar__expand-summary:hover {
    background: color-mix(in srgb, var(--foreground) 8%, var(--muted));
}
.failure-calendar__expand-summary:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.failure-calendar__expand-chevron {
    transition: transform var(--transition-base);
}
.failure-calendar__expand[open] .failure-calendar__expand-chevron {
    transform: rotate(180deg);
}
.failure-calendar__expand-text--hide {
    display: none;
}
.failure-calendar__expand[open] .failure-calendar__expand-text--show {
    display: none;
}
.failure-calendar__expand[open] .failure-calendar__expand-text--hide {
    display: inline;
}
.failure-calendar__expand[open] .failure-calendar--extras {
    margin-top: var(--space-4);
}
/* Month-paged calendar (JS-enhanced prev/next arrow navigation). */
.failure-calendar__panel[hidden] {
    display: none;
}
.failure-calendar__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
}
.failure-calendar__nav[hidden] {
    display: none;
}
.failure-calendar__nav-label {
    min-width: 8ch;
    text-align: center;
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--muted-foreground);
}
.failure-calendar__nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card);
    color: var(--foreground);
    cursor: pointer;
    transition: var(--transition-base);
}
.failure-calendar__nav-btn:hover {
    background: var(--muted);
}
.failure-calendar__nav-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.failure-calendar__nav-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}
.failure-calendar__month {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}
.failure-calendar__month-header {
    margin: 0;
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--foreground);
    letter-spacing: 0.01em;
}
.failure-calendar__weekdays,
.failure-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}
.failure-calendar__weekdays span {
    font-family: var(--font-secondary);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted-foreground);
    text-align: center;
    padding: 2px 0;
}
.failure-calendar__day {
    aspect-ratio: 1 / 1;
    min-height: 36px;
    /* Soft cap so 2-month layouts don't blow cells up beyond a reasonable
       click target — keeps day numbers readable, not headline-sized. */
    max-height: 76px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 4px 2px;
    border-radius: var(--radius-sm);
    background: var(--muted);
    color: var(--muted-foreground);
    font-family: var(--font-primary);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.failure-calendar__day:not(.failure-calendar__day--placeholder):not(.failure-calendar__day--inactive):hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.failure-calendar__day--placeholder {
    background: transparent;
    box-shadow: none;
}
.failure-calendar__day--inactive {
    background: color-mix(in srgb, var(--muted) 55%, transparent);
    color: var(--muted-foreground);
}
.failure-calendar__day-number {
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1;
}
.failure-calendar__day-count {
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.02em;
}
/* Intensity ramp — discrete levels keep text contrast predictable. */
.failure-calendar__day--lvl-0 {
    color: var(--foreground);
}
.failure-calendar__day--lvl-1 {
    background: color-mix(in srgb, var(--color-error-foreground) 18%, var(--muted));
    color: var(--foreground);
}
.failure-calendar__day--lvl-1 .failure-calendar__day-count {
    color: var(--color-error-foreground);
}
.failure-calendar__day--lvl-2 {
    background: color-mix(in srgb, var(--color-error-foreground) 38%, var(--muted));
    color: var(--foreground);
}
.failure-calendar__day--lvl-2 .failure-calendar__day-count {
    color: var(--color-error-foreground);
}
.failure-calendar__day--lvl-3 {
    background: color-mix(in srgb, var(--color-error-foreground) 65%, var(--muted));
    color: #fff;
}
.failure-calendar__day--lvl-3 .failure-calendar__day-count {
    color: #fff;
}
.failure-calendar__day--lvl-4 {
    background: var(--color-error-foreground);
    color: #fff;
}
.failure-calendar__day--lvl-4 .failure-calendar__day-count {
    color: #fff;
}
.failure-calendar__legend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-secondary);
    font-size: var(--text-xs);
    color: var(--muted-foreground);
}
.failure-calendar__legend-label {
    line-height: 1;
}
.failure-calendar__legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    aspect-ratio: 1 / 1;
    min-height: 0;
    padding: 0;
}

/* =========================================================================
   Failures grouping
   ========================================================================= */

.failures-group__header td {
    background: var(--muted);
    font-family: var(--font-secondary);
    font-weight: 600;
}
.failures-group__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 0;
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
}
.failures-group__toggle .material-symbols-sharp {
    font-size: 18px;
    transition: transform var(--transition-fast);
}
.failures-group--collapsed .failures-group__toggle .material-symbols-sharp {
    transform: rotate(-90deg);
}
.failures-group__count {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--color-error);
    color: var(--color-error-foreground);
    font-family: var(--font-primary);
    font-size: var(--text-xs);
}
.failures-group--collapsed .failures-group__row { display: none; }

/* =========================================================================
   Insights panel (two-column on wide screens)
   ========================================================================= */

.insights-grid { display: block; }

@media (min-width: 1440px) {
    .insights-grid {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
        gap: var(--space-6);
        align-items: start;
    }
    /* Collapse to a single column when the aside is not rendered so the
       main column can use the full width instead of reserving empty space
       for a missing sidebar (e.g. when show_provider_health is false). */
    .insights-grid:not(:has(.insights-grid__aside)) {
        grid-template-columns: minmax(0, 1fr);
    }
    .insights-grid__main { min-width: 0; }
    .insights-grid__aside {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        position: sticky;
        top: 80px;
    }
}

/* ── Top grid: loss card + heatmap side-by-side on wide viewports ── */
.dash-top-grid {
    display: block;
    margin-bottom: var(--space-6);
}

.dash-top-grid__calendar {
    margin-top: var(--space-4);
}

@media (min-width: 1280px) {
    .dash-top-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.6fr) minmax(360px, 1fr);
        gap: var(--space-6);
        align-items: stretch;
    }
    .dash-top-grid > .card { height: 100%; }
    .dash-top-grid__calendar { margin-top: 0; }
}

/* =========================================================================
   HTMX swap feedback (dashboard)
   ========================================================================= */

.dashboard-content.htmx-request { opacity: 0.55; pointer-events: none; transition: opacity var(--transition-base); }
.dashboard-skeleton {
    display: none;
    padding: var(--space-6);
    border-radius: var(--radius-md);
    background: var(--muted);
    color: var(--muted-foreground);
    text-align: center;
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
}
.htmx-request > .dashboard-skeleton { display: block; }

/* =========================================================================
   AI Recommendations
   ========================================================================= */

/* Constrain the page width to match the other dashboard views (same
   pattern as ``.connectors-content``). Kept as a block element (NOT a
   nested flex container) because a child ``display: flex`` interacts with
   the parent ``.main-content`` flex column in a way that breaks the
   symmetric cross-axis auto margins — the element ends up pinned to the
   right edge instead of centred. Vertical rhythm between sections is
   supplied by the sibling margin rule below. */
.recommendations-content {
    max-width: 960px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.recommendations-content > * + * { margin-top: var(--space-6); }

/* Checkbox label lives inside .filter-bar__group but shouldn't inherit the
   uppercase/letter-spacing treatment of the numeric/dropdown labels. */
.filter-bar__checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    cursor: pointer;
}

.recommendations-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.recommendations-group__title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

.recommendations-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* ── Recommendation card ── */

.rec-card {
    background: var(--background);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    box-shadow: var(--shadow-card);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.rec-card:hover { box-shadow: var(--shadow-sm); }
.rec-card--critical { border-left-color: var(--destructive); }
.rec-card--high     { border-left-color: var(--color-warning-foreground); }
.rec-card--medium   { border-left-color: var(--color-info-foreground); }
.rec-card--low      { border-left-color: var(--muted-foreground); }
/* Already dismissed (surfaced only via "Show dismissed"): dim the card
   so the active list stays visually loud, and hide the severity accent
   because the card is archived. Restore button in the header brings it
   back — the severity border returns on the next render. */
.rec-card--dismissed {
    opacity: 0.7;
    border-left-color: var(--border);
}

.rec-card__header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-3);
    align-items: start;
}
.rec-card__category-icon {
    font-size: 28px;
    color: var(--muted-foreground);
    line-height: 1;
}
.rec-card__heading { min-width: 0; }
.rec-card__title {
    font-family: var(--font-secondary);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
    word-wrap: break-word;
}
.rec-card__meta {
    margin-top: var(--space-1);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--muted-foreground);
    flex-wrap: wrap;
}
.rec-card__category { text-transform: uppercase; letter-spacing: 0.5px; }
.rec-card__dot { color: var(--border); }
.rec-card__auto-badge { display: inline-flex; align-items: center; gap: 2px; }
.rec-card__auto-badge .material-symbols-sharp { font-size: 14px; }

.rec-card__dismiss { align-self: start; }

.rec-card__summary {
    font-size: var(--text-base);
    color: var(--foreground);
    margin: 0;
}

.rec-card__repos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
}
.rec-card__repos-label { color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.5px; }
.rec-card__repo { font-family: var(--font-primary); }
/* Affected-repo chip is a link into the dashboard filtered to that repo. */
a.rec-card__repo {
    text-decoration: none;
    cursor: pointer;
    transition: filter var(--transition-base);
}
a.rec-card__repo:hover { text-decoration: underline; filter: brightness(0.97); }
a.rec-card__repo:focus-visible { outline: 2px solid var(--color-info-foreground); outline-offset: 1px; }

/* ── Freshness line (generated X ago · last N days) ── */
.rec-card__freshness {
    margin-top: var(--space-1);
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: var(--text-xs);
    color: var(--muted-foreground);
}
.rec-card__freshness .material-symbols-sharp { font-size: 14px; }
/* Stale signal lives in this chip (mirrors .label--warning), not in a recolor
   of the small freshness text — recolouring it would drop below WCAG AA on the
   light card background. */
.rec-card__stale-hint {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-warning);
    color: var(--color-warning-foreground);
    cursor: help;
}

.rec-card__details {
    border-top: 1px dashed var(--border);
    padding-top: var(--space-3);
}
.rec-card__details-summary {
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    cursor: pointer;
    user-select: none;
}
.rec-card__details-summary:hover { color: var(--foreground); }
.rec-card__details[open] .rec-card__details-summary { margin-bottom: var(--space-3); }

.rec-card__block + .rec-card__block { margin-top: var(--space-3); }
.rec-card__block-title {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted-foreground);
    margin-bottom: var(--space-2);
}
.rec-card__list {
    margin: 0;
    padding-left: var(--space-5);
    font-size: var(--text-sm);
    color: var(--foreground);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.rec-card__list--ordered { list-style: decimal; }
.rec-card__list:not(.rec-card__list--ordered) { list-style: disc; }

/* ── Impact pills ── */

.rec-impact {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.rec-impact__label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    color: var(--muted-foreground);
    cursor: help;
}
.rec-impact__pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.rec-impact__pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--muted);
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-family: var(--font-primary);
}
.rec-impact__pill .material-symbols-sharp { font-size: 14px; }

/* ── Feedback buttons ── */

.rec-feedback {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px dashed var(--border);
    font-size: var(--text-sm);
    color: var(--muted-foreground);
}
.rec-feedback__prompt { margin-right: auto; }
.rec-feedback__thanks {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-right: auto;
}
.rec-feedback__change {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-secondary);
    font-size: var(--text-xs);
    color: var(--muted-foreground);
    text-decoration: underline;
    cursor: pointer;
    transition: color var(--transition-base);
}
.rec-feedback__change:hover { color: var(--foreground); }

/* Dismiss toast: reuses .alert--success styling for the outer shell
   (icon + description + colour tokens), only adds a flex alignment so the
   undo button sits flush-right after the description stretches to fill. */
.rec-toast { align-items: center; }
.rec-toast .alert__description { flex: 1; min-width: 0; font-size: var(--text-base); }
.rec-toast__hint {
    font-size: var(--text-xs);
    color: var(--muted-foreground);
    margin-top: 2px;
}

/* Only the spinner rotation is custom — the surrounding container reuses
   the standard .alert layout so colour tokens stay in one place. */
.rec-spinner { animation: rec-spinner-rotate 1.2s linear infinite; }
@keyframes rec-spinner-rotate { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
    .rec-card__header { grid-template-columns: auto 1fr; }
    .rec-card__dismiss { grid-column: 2; justify-self: end; }
    .rec-toast { flex-direction: column; align-items: stretch; }
}

/* ── Hero title emphasis (primary-tinted closer) ── */
.hero__title-em {
    color: var(--primary);
    display: block;
}

/* ── Sidebar user avatar ── */
.sidebar__user-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--primary);
    color: var(--primary-foreground);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: 700;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* ── Theme toggle ── */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    color: var(--muted-foreground);
    border: 0;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    flex-shrink: 0;
}

.theme-toggle:hover {
    background: var(--muted);
    color: var(--foreground);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.theme-toggle .material-symbols-sharp {
    font-size: 20px;
    line-height: 1;
}

/* Icon visibility — specificity 0-2-0 beats the Google Fonts .material-symbols-sharp
   base rule (0-1-0) and its inline-block display. */
.theme-toggle .theme-toggle__icon--dark { display: none; }
[data-theme="dark"] .theme-toggle .theme-toggle__icon--light { display: none; }
[data-theme="dark"] .theme-toggle .theme-toggle__icon--dark { display: inline-flex; }

/* Topbar variant — sits between nav and CTA in the desktop bar. */
.topbar__theme-toggle {
    margin: 0 var(--space-1) 0 var(--space-2);
}

@media (max-width: 1024px) {
    .topbar__theme-toggle { display: none; }
}

/* Mobile nav — surfaces the toggle inside the drawer. */
.topbar__mobile-theme {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border);
    margin-top: var(--space-2);
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--muted-foreground);
}

/* ────────────────────────────────────────────────────────────────────────
 * Reports module
 *
 * Shared atoms (.data-table, .visually-hidden, .label__icon, …) are declared
 * here because the reports feature is the first consumer. If other apps pick
 * them up later, the selectors stay generic — only the .reports-* block is
 * feature-scoped.
 * ──────────────────────────────────────────────────────────────────────── */

/* Shared atoms */

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.btn--sm {
    padding: 4px 10px;
    font-size: var(--text-xs);
    line-height: 1.2;
}

.btn--destructive-ghost {
    color: var(--destructive);
}
.btn--destructive-ghost:hover {
    background: color-mix(in srgb, var(--destructive) 10%, transparent);
    color: var(--destructive);
}

.card__content--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-6);
    color: var(--muted-foreground);
    font-family: var(--font-secondary);
}

.page-header__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* ── Rate Meter (rolling-window counter, e.g. reports/day) ── */
.rate-meter {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    min-width: 200px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    font-family: var(--font-secondary);
    transition: border-color var(--transition-base), background var(--transition-base);
}

.rate-meter__icon {
    font-size: 28px !important;
    line-height: 1;
    color: var(--muted-foreground);
}

.rate-meter__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.15;
}

.rate-meter__count {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--font-primary);
    white-space: nowrap;
}

.rate-meter__remaining {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--foreground);
}

.rate-meter__total {
    font-size: var(--text-sm);
    color: var(--muted-foreground);
}

.rate-meter__label {
    font-size: var(--text-xs);
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rate-meter--healthy .rate-meter__icon {
    color: var(--color-success-foreground);
}

.rate-meter--warning {
    border-color: var(--color-warning-foreground);
    background: var(--color-warning);
}
.rate-meter--warning .rate-meter__icon,
.rate-meter--warning .rate-meter__remaining {
    color: var(--color-warning-foreground);
}
.rate-meter--warning .rate-meter__total,
.rate-meter--warning .rate-meter__label {
    color: var(--color-warning-foreground);
    opacity: 0.85;
}

.rate-meter--depleted {
    border-color: var(--color-error-foreground);
    background: var(--color-error);
}
.rate-meter--depleted .rate-meter__icon,
.rate-meter--depleted .rate-meter__remaining {
    color: var(--color-error-foreground);
}
.rate-meter--depleted .rate-meter__total,
.rate-meter--depleted .rate-meter__label {
    color: var(--color-error-foreground);
    opacity: 0.85;
}

@media (max-width: 640px) {
    .rate-meter {
        width: 100%;
        min-width: 0;
    }
}

.form-label__required {
    color: var(--destructive);
    margin-left: 2px;
}

.label__icon {
    font-size: 14px !important;
    line-height: 1;
    margin-right: 4px;
    vertical-align: -2px;
}
.label__icon--spin {
    animation: label-icon-spin 1.2s linear infinite;
    transform-origin: 50% 50%;
    display: inline-block;
}
@keyframes label-icon-spin {
    to { transform: rotate(360deg); }
}

/* Lightweight data table used by the reports list. Kept generic so other
 * dashboards can pick it up — no .reports- prefix. */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
}
.data-table thead th {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    font-weight: 600;
    color: var(--muted-foreground);
    text-transform: uppercase;
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--border);
    background: var(--muted);
}
.data-table tbody td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    color: var(--foreground);
}
.data-table tbody tr:last-child td {
    border-bottom: 0;
}
.data-table tbody tr:hover td {
    background: color-mix(in srgb, var(--primary) 4%, transparent);
}
.data-table__actions-col {
    width: 1%;
    white-space: nowrap;
}
.data-table__actions {
    text-align: right;
    white-space: nowrap;
}

/* Reports — page wrapper */
.reports-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-6);
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}

/* Reports — generate form
 *
 * Structure: the outer form uses .settings__form (grey, spaced column).
 * Each logical step (Period, Repositories, Branches, Triggers) lives
 * inside a ``.reports-form__subsection`` block — a title + help line on
 * top and whatever controls the step needs below. Subsections are
 * separated by a thin rule so the user scans downward naturally without
 * the whole form feeling like a wall of inputs. */
.reports-form {
    gap: var(--space-6);
}

.reports-form__subsection {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border);
}
.reports-form__subsection:last-of-type {
    padding-bottom: 0;
    border-bottom: 0;
}

.reports-form__subsection-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.reports-form__subsection-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--foreground);
}

.reports-form__subsection-help {
    margin: 0;
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    line-height: 1.5;
}

.reports-form__required-chip,
.reports-form__optional-chip {
    font-family: var(--font-secondary);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    line-height: 1.2;
}
.reports-form__required-chip {
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--primary);
}
.reports-form__optional-chip {
    background: var(--secondary);
    color: var(--muted-foreground);
}

.reports-form__preset-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.reports-form__preset {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    background: var(--card);
    cursor: pointer;
    transition: background var(--transition-base), border-color var(--transition-base),
                color var(--transition-base);
}
.reports-form__preset:hover {
    background: color-mix(in srgb, var(--primary) 6%, var(--card));
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
}
.reports-form__preset:has(input:checked) {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, var(--card));
    color: var(--primary);
    font-weight: 600;
}
.reports-form__preset input {
    accent-color: var(--primary);
}

.reports-form__custom-range {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-1);
}
.reports-form__custom-range[hidden] {
    display: none;
}
.reports-form__custom-range input[type="date"] {
    width: 100%;
    height: 40px;
    padding: 8px 14px;
    font-family: var(--font-secondary);
    font-size: var(--text-base);
    color: var(--foreground);
    background: var(--background);
    border: 1px solid var(--input);
    border-radius: var(--radius-pill);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.reports-form__custom-range input[type="date"]:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.15);
}

/* Repository picker */
.reports-form__repo-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;
}
.reports-form__repo-search {
    flex: 1 1 260px;
    min-width: 200px;
    height: 40px;
    padding: 8px 14px;
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--foreground);
    background: var(--background);
    border: 1px solid var(--input);
    border-radius: var(--radius-pill);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.reports-form__repo-search:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.15);
}
.reports-form__repo-quick {
    display: flex;
    gap: var(--space-2);
}
.reports-form__repo-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-height: 320px;
    overflow-y: auto;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--background);
}
.reports-form__repo-group + .reports-form__repo-group {
    margin-top: var(--space-2);
}
.reports-form__repo-group-title {
    font-family: var(--font-secondary);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--border);
}
.reports-form__repo-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 6px 10px;
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    color: var(--foreground);
    cursor: pointer;
    transition: background var(--transition-base);
}
.reports-form__repo-item:hover {
    background: color-mix(in srgb, var(--primary) 6%, transparent);
}
.reports-form__repo-item input {
    accent-color: var(--primary);
}
.reports-form__repo-item:has(input:checked) {
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.reports-form__repo-item:has(input:checked) .reports-form__repo-name {
    color: var(--primary);
    font-weight: 600;
}
.reports-form__repo-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Per-repo initial-sync status pill, pushed to the trailing edge of the row. */
.reports-form__repo-sync {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-secondary);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    line-height: 1.2;
    white-space: nowrap;
}
.reports-form__repo-sync .material-symbols-sharp {
    font-size: 14px;
}
.reports-form__repo-sync--done {
    background: var(--color-success);
    color: var(--color-success-foreground);
}
.reports-form__repo-sync--pending {
    background: var(--color-warning);
    color: var(--color-warning-foreground);
}
.reports-form__empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    margin: 0;
    padding: var(--space-3) 0;
}
.reports-form__empty p {
    margin: 0;
}
.reports-form__footer-hint {
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    margin: 0;
}

/* Trigger-event checkboxes */
.reports-form__triggers {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.reports-form__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    background: var(--card);
    cursor: pointer;
    transition: background var(--transition-base), border-color var(--transition-base),
                color var(--transition-base);
}
.reports-form__trigger:hover {
    background: color-mix(in srgb, var(--primary) 6%, var(--card));
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
}
.reports-form__trigger:has(input:checked) {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, var(--card));
    color: var(--primary);
    font-weight: 600;
}
.reports-form__trigger input {
    accent-color: var(--primary);
}

.reports-form__footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}

/* Reports — table row */
.reports-row__period {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    font-family: var(--font-primary);
    white-space: nowrap;
}
.reports-row__period-sep {
    color: var(--muted-foreground);
}
.reports-row__period-days {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    margin-top: 2px;
}
.reports-row__filters {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}
.reports-row__actions {
    display: inline-flex;
    gap: var(--space-1);
    align-items: center;
    justify-content: flex-end;
}
.reports-row__delete-form {
    display: inline-flex;
    margin: 0;
}
.reports-row--failed td:first-child {
    border-left: 3px solid var(--destructive);
}
.reports-row--generating td:first-child {
    border-left: 3px solid var(--primary);
}