:root {
    --bg: #f3f6fa;
    --bg-card: #ffffff;
    --text: #080c1d;
    --text-muted: #65748b;
    --primary: #c026d3;
    --primary-hover: #a21caf;
    --accent: #d946ef;
    --accent-subtle: rgba(217, 70, 239, 0.08);
    --nav-bg: #ffffff;
    --nav-text: #65748b;
    --nav-text-active: #080c1d;
    --border: #d8e1ee;
    --radius: 12px;
    --shadow: 0 1px 3px rgba(26, 26, 46, 0.07);
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* European Union emblem - flag colours, used only by the data residency mark. */
    --eu-flag-blue: #003399;
    --eu-flag-gold: #ffcc00;

    --severity-critical: #dc2626;
    --severity-warning: #f59e0b;
    --severity-warning-bg: #fffbeb;
    --severity-warning-border: #fde68a;
    --severity-warning-text: #92400e;
    --severity-suggestion: #8b5cf6;
    --severity-info: #8b5cf6;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
}

/* Session expiry warning bar. Two independent guards keep it off the screen, and
   both are needed: base.html renders it only for a signed-in visitor, so an
   anonymous page never carries the element at all, and --hidden keeps it out of
   the way until static/js/app.js decides the idle window is nearly over. Without
   this rule the class does nothing and the bar sits on every page, including the
   login screen. */
.session-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.55rem 1rem;
    background: var(--severity-warning-bg);
    border-bottom: 1px solid var(--severity-warning-border);
    color: var(--severity-warning-text);
    font-size: 0.85rem;
    font-weight: 500;
}

.session-banner--hidden {
    display: none;
}

/* Header */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    height: 56px;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border);
    box-shadow: none;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header__mark {
    display: block;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    object-fit: contain;
}

.header__brand-copy {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    line-height: 1.1;
}

.header__brand-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0;
}

a.header__brand {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.header__nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    height: 100%;
}

.nav__link {
    text-decoration: none;
    color: var(--nav-text);
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    transition: color 0.2s, background 0.2s;
}

.nav__link:hover {
    color: var(--nav-text-active);
    background: #f5f7fb;
}

.nav__link--active {
    color: var(--nav-text-active);
    background: transparent;
    font-weight: 600;
}

.nav__separator {
    width: 1px;
    height: 24px;
    background: var(--border);
    margin: 0 0.5rem;
}

/* Main */
.main { max-width: 1200px; margin: 2rem auto; padding: 0 2rem; }

/* KPI */
.kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 1.5rem 0; }

.kpi-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    text-align: center;
    box-shadow: var(--shadow);
}

.kpi-card__value { display: block; font-size: 2rem; font-weight: 700; font-family: var(--mono); }
.kpi-card__label { display: block; font-size: 0.85rem; color: var(--text-muted); margin-top: 0.25rem; }

a.kpi-card--link { text-decoration: none; color: inherit; transition: border-color 0.2s, box-shadow 0.2s; }
a.kpi-card--link:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(192, 38, 211, 0.15); }
.kpi-card--danger { border-color: #ef4444; }
.kpi-card--danger .kpi-card__value { color: #ef4444; }

/* Page header */
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

.btn--primary { background: linear-gradient(135deg, #8b5cf6, #d946ef); color: #fff; border: none; }
.btn--primary:hover { filter: brightness(1.1); box-shadow: 0 2px 10px rgba(192, 38, 211, 0.3); }
.btn--secondary { background: var(--border); color: var(--text); }
.btn--danger { background: #dc2626; color: #fff; }
.btn--danger:hover { background: #b91c1c; }
.btn--sm { padding: 0.3rem 0.75rem; font-size: 0.8rem; }

/* Table */
.table { width: 100%; border-collapse: collapse; background: var(--bg-card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.table th, .table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--border); }
.table th { background: var(--bg); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; color: var(--text-muted); }
.table td a { color: var(--primary); text-decoration: none; font-weight: 500; }
.table__row--clickable { cursor: pointer; transition: background 0.15s; }
.table__row--clickable:hover { background: var(--bg); }

/* Info grid */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1.5rem 0; }

.info-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: var(--shadow);
}

.info-card__label { display: block; font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; font-weight: 600; }
.info-card__value { display: block; font-size: 1rem; margin-top: 0.25rem; font-family: var(--mono); }

/* Server detail */
.page-header { display: flex; justify-content: space-between; align-items: flex-start; }
.page-header__actions { display: flex; gap: 0.5rem; }

.server-meta { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin: 1rem 0 1.5rem; color: var(--text); }

.snapshot-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.snapshot-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow);
    line-height: 1.8;
}

.snapshot-card--wide { margin-bottom: 1.5rem; }

.snapshot-card__title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.snapshot-card__detail { margin-top: 0.5rem; }

.text-muted { color: var(--text-muted); }
.text-sm { font-size: 0.85rem; }

.alert { padding: 1rem 1.25rem; border-radius: var(--radius); margin: 1.5rem 0; }
.alert--warning { background: #fff8e1; border: 1px solid #ffe082; color: #6d4c00; }
.alert--danger { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
.alert--success { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.alert--info { background: #eff6ff; border: 1px solid #93c5fd; color: #1e40af; }

.index-health__reindex {
    font-size: 0.8rem;
    word-break: break-all;
    user-select: all;
}

@media (max-width: 768px) {
    .snapshot-grid { grid-template-columns: 1fr; }
    .page-header { flex-direction: column; gap: 1rem; }
}

/* Checks */
.check-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow);
}

.check-card--critical { border-left-color: var(--severity-critical); }
.check-card--warning { border-left-color: var(--severity-warning); }
.check-card--info { border-left-color: var(--severity-info); }

.check-card__severity { font-size: 0.75rem; text-transform: uppercase; font-weight: 700; }
.check-card--critical .check-card__severity { color: var(--severity-critical); }
.check-card--warning .check-card__severity { color: var(--severity-warning); }
.check-card--info .check-card__severity { color: var(--severity-info); }

.check-card__title { margin: 0.25rem 0; }
.check-card__desc { color: var(--text-muted); font-size: 0.9rem; }
.check-card__recommendation { display: block; margin-top: 0.5rem; padding: 0.5rem; background: var(--bg); border-radius: 6px; font-size: 0.85rem; }

/* Empty state */
.empty-state { color: var(--text-muted); padding: 2rem; text-align: center; }
.empty-state a { color: var(--primary); }

/* Server detail tabs */
.server-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin: 1.5rem 0 0;
}

.server-tab {
    padding: 0.6rem 1.25rem;
    border: none;
    background: none;
    font-family: var(--sans);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
}

.server-tab:hover { color: var(--text); }

.server-tab--active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.server-tab-panel { padding: 1.25rem 0; }

/* Memory metrics */
.memory-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1rem;
}

.memory-metric {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow);
}

.memory-metric__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.75rem;
    gap: 1rem;
}

.memory-metric__label {
    font-weight: 700;
    font-size: 1.05rem;
}

.memory-metric__value {
    font-family: var(--mono);
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.progress-bar {
    height: 8px;
    background: var(--bg);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar__fill {
    height: 100%;
    background: var(--primary);
    border-radius: 4px;
    transition: width 0.4s ease;
}

.memory-metric__detail {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.memory-metric__detail code {
    font-family: var(--mono);
    font-size: 0.8rem;
}

/* Tuning recommendations */
.tuning-section { margin-top: 2rem; }
.tuning-section h3 { margin-bottom: 1rem; }
.tuning-recommended { color: var(--primary); font-weight: 600; }
.tuning-rationale { font-size: 0.85rem; color: var(--text-muted); max-width: 320px; }

.confidence-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
}
.confidence-badge--high { background: rgba(34, 197, 94, 0.1); color: #16a34a; }
.confidence-badge--medium { background: rgba(245, 158, 11, 0.1); color: var(--severity-warning); }
.confidence-badge--low { background: rgba(139, 92, 246, 0.1); color: var(--severity-info); }

.restart-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    background: rgba(245, 158, 11, 0.12);
    color: var(--severity-warning);
    cursor: help;
}

.status-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}
.status-badge--ok { background: rgba(34, 197, 94, 0.1); color: #16a34a; }

/* Tuning detail page */
.tuning-detail-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.tuning-detail-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.tuning-detail-card__header { padding: 0.75rem 1rem; font-weight: 600; font-size: 0.875rem; border-bottom: 1px solid var(--border); background: var(--bg); }
.tuning-detail-card__body { padding: 1rem; }
.tuning-detail-card__values { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
.tuning-detail-card__value-group { display: flex; flex-direction: column; gap: 0.25rem; }
.tuning-detail-card__label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.tuning-detail-card__value { font-size: 1.25rem; font-weight: 600; }
.tuning-detail-card__value--recommended { color: var(--primary); }
.tuning-detail-card__arrow { font-size: 1.5rem; color: var(--text-muted); }
.tuning-detail-card__meta { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.tuning-detail-card__rule { font-size: 0.75rem; color: var(--text-muted); background: var(--bg); padding: 0.15rem 0.5rem; border-radius: 4px; }
.tuning-detail-card__rationale { color: var(--text); line-height: 1.6; margin: 0; }
.tuning-detail-card__rationale--secondary { margin-top: 0.5rem; font-size: 0.9rem; color: var(--text-muted); }
.tuning-detail-card--ok { border-color: #22c55e40; }
.tuning-detail-card--ok .tuning-detail-card__header { background: #22c55e10; }
.tuning-detail-card--danger { border-color: #ef444460; }
.tuning-detail-card--danger .tuning-detail-card__header { background: #ef444415; color: #dc2626; }
.tuning-detail-card__value--danger { color: #dc2626; font-weight: 700; }
.tuning-detail-card__check { font-size: 1.5rem; color: #22c55e; font-weight: 700; }
.tuning-detail-card__value--ok { color: #22c55e; font-size: 1rem; }
.tuning-detail-card__rule-id { font-size: 0.7rem; color: var(--text-muted); background: var(--bg); padding: 0.15rem 0.5rem; border-radius: 4px; font-family: monospace; }
.tuning-detail-card__sql { margin-top: 0.9rem; }
.tuning-detail-card__apply-note { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }
.tuning-detail-card__measured { margin-top: 0.5rem; font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }
.tuning-detail-card__context { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.tuning-detail-card__context-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.tuning-detail-card__context-value { font-size: 0.95rem; font-weight: 600; }
.decision-trace { display: flex; flex-direction: column; margin: 1rem 0; }
.decision-trace__step { display: flex; gap: 0.75rem; }
.decision-trace__indicator { display: flex; flex-direction: column; align-items: center; width: 20px; flex-shrink: 0; }
.decision-trace__icon { font-size: 0.875rem; line-height: 1; }
.decision-trace__icon--matched { color: #22c55e; }
.decision-trace__icon--skipped { color: var(--text-muted); }
.decision-trace__icon--failed { color: #ef4444; }
.decision-trace__connector { flex: 1; width: 2px; background: var(--border); min-height: 1rem; margin: 0.25rem 0; }
.decision-trace__content { flex: 1; padding-bottom: 1rem; }
.decision-trace__header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.decision-trace__id { font-size: 0.8rem; color: var(--text); }
.decision-trace__badge { font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 3px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.decision-trace__badge--matched { background: #22c55e20; color: #16a34a; }
.decision-trace__badge--skipped { background: var(--bg); color: var(--text-muted); }
.decision-trace__badge--failed { background: #ef444420; color: #ef4444; }
.decision-trace__fact-value { font-size: 0.7rem; color: var(--text-muted); font-family: monospace; }
.decision-trace__reason { font-size: 0.85rem; color: var(--text-muted); margin: 0.25rem 0 0; line-height: 1.5; }
.decision-trace__step--matched .decision-trace__content { }
.decision-trace__step--skipped .decision-trace__id { color: var(--text-muted); }
.decision-trace__facts { margin-top: 0.5rem; }
.decision-trace__facts h4 { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.5rem; }
.tuning-chart-container { position: relative; height: 320px; margin-bottom: 0.75rem; }
.tuning-chart-hint { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }
.tuning-info-icon { cursor: help; color: var(--text-muted); font-size: 0.85rem; margin-left: 0.25rem; }
.tuning-chart-note { margin-top: 0.6rem; font-size: 0.82rem; color: var(--text-muted); }
.tuning-chart-note > summary { cursor: pointer; color: var(--color-accent, #7F2EFF); width: fit-content; }
.tuning-chart-note__body { margin-top: 0.5rem; line-height: 1.55; }
.tuning-chart-note__body pre { background: rgba(127,46,255,0.06); border-radius: 0.5rem; padding: 0.6rem 0.8rem; overflow-x: auto; font-size: 0.8rem; }
.tuning-chart-note__body a { color: var(--color-accent, #7F2EFF); }

/* System-wide empty-chart state: shown in place of a chart that has no
   plottable data, so an empty axis grid never reads as a broken chart. */
.chart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 260px; padding: 2rem 1rem; }
.chart-empty__icon { font-size: 2rem; line-height: 1; margin-bottom: 0.6rem; color: var(--text-muted); opacity: 0.7; }
.chart-empty--all_zero .chart-empty__icon { color: var(--success, #10b981); opacity: 1; }
.chart-empty__headline { font-size: 0.95rem; font-weight: 600; color: var(--text); margin: 0 0 0.25rem; }
.chart-empty__subtext { font-size: 0.85rem; color: var(--text-muted); margin: 0; max-width: 36rem; line-height: 1.5; }
.tuning-stats-row { display: flex; gap: 1.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.tuning-stat { display: flex; flex-direction: column; padding: 0.75rem 1rem; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; }
.tuning-stat__value { font-size: 1.25rem; font-weight: 700; color: var(--text); }
.tuning-stat__value--warning { color: var(--danger, #ef4444); }
.tuning-stat__label { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; }
.table__row--active { background: rgba(59, 130, 246, 0.04); }

@media (max-width: 768px) {
    .tuning-detail-summary { grid-template-columns: 1fr; }
}

/* Setup page */
.setup {
    max-width: 760px;
    margin: 0 auto;
}

.setup__back {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    transition: opacity 0.2s;
}

.setup__back:hover { opacity: 0.7; }

.setup__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.setup__title {
    font-size: 1.5rem;
    font-weight: 700;
}

.setup__subtitle {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 2rem;
    padding-left: 2.75rem;
    line-height: 1.6;
}

.setup__card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.setup__card-section {
    padding: 1.75rem 2rem;
}

.setup__card-section + .setup__card-section {
    border-top: 1px solid var(--border);
}

.setup__card-section--details {
    background: var(--bg);
}

.setup__card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.setup__card-header h3 {
    font-size: 1.15rem;
    font-weight: 700;
}

.setup__card-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 0.25rem;
}

.setup__card-desc code {
    background: var(--bg);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-family: var(--mono);
}

.setup__os-toggle {
    display: inline-flex;
    gap: 0.25rem;
    margin-top: 0.6rem;
    padding: 0.25rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-card);
}

.setup__os-btn {
    padding: 0.35rem 0.9rem;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--sans);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.setup__os-btn:hover {
    color: var(--text);
}

.setup__os-btn--active {
    background: var(--primary);
    color: var(--text);
}

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

.setup__copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    white-space: nowrap;
    font-family: var(--sans);
}

.setup__copy-btn:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(192, 38, 211, 0.12);
}

.setup__copy-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

.setup__code-block {
    background: #1e1e2e;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-top: 0.75rem;
    overflow-x: auto;
}

.setup__code-block pre {
    margin: 0;
}

.setup__code-block code {
    color: #a6e3a1;
    font-family: var(--mono);
    font-size: 0.85rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-all;
}

.setup__status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.setup__status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: pulse 1.5s ease-in-out infinite;
}

.setup__status-dot--success {
    background: #16a34a;
    animation: none;
}

@keyframes pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

.setup__success {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 1.25rem;
}

.setup__success h3 {
    color: #16a34a;
    margin-bottom: 0.25rem;
}

.setup__success p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.setup__actions { display: flex; gap: 0.75rem; margin-top: 1rem; }

.setup__checklist {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.setup__checklist-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: var(--text);
}

.setup__checklist-item code {
    background: #fff;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-size: 0.82rem;
    font-family: var(--mono);
    border: 1px solid var(--border);
}

@media (max-width: 600px) {
    .setup__card-section { padding: 1.25rem; }
    .setup__card-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
    .setup__subtitle { padding-left: 0; }
}

/* Forms */
.form-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: var(--sans);
    background: var(--bg);
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary);
}

.form-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.actions { white-space: nowrap; }
.actions .btn { margin-left: 0.25rem; }
.actions .btn:first-child { margin-left: 0; }

/* Footer */
.footer { text-align: center; padding: 2rem; color: var(--text-muted); font-size: 0.8rem; }

/* Responsive */
@media (max-width: 768px) {
    .header { flex-direction: column; gap: 0.5rem; height: auto; padding: 0.75rem 1rem; }
    .header__nav { flex-wrap: wrap; justify-content: center; }
    .main { padding: 0 1rem; }
    .kpi-strip { grid-template-columns: 1fr; }
}

/* Auth pages */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 3rem;
    min-height: calc(100vh - 200px);
}

.auth-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

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

.auth-card__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.75rem;
    text-align: center;
    color: var(--text);
}
.auth-card__title + .auth-card__subtitle {
    margin-top: -1.25rem;
}
.auth-card__subtitle {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 1.75rem;
}

.auth-required {
    color: var(--primary);
    font-weight: 700;
}

.auth-alert {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
}

.auth-alert--error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

.auth-alert--success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #16a34a;
}

.auth-last-method {
    text-align: center;
    font-size: 0.85rem;
    color: #94a3b8;
    margin-bottom: 1rem;
}

.auth-last-method strong {
    color: #8b5cf6;
}

.auth-card__forgot {
    text-align: center;
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
}
.auth-card__forgot a { color: var(--text-muted); }
.auth-card__forgot a:hover { color: var(--primary); }

.auth-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.auth-form__group {
    margin-bottom: 1.25rem;
}

.auth-form__group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.35rem;
}

.auth-form__group input {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 2px solid var(--border);
    border-radius: 10px;
    font-size: 0.9rem;
    font-family: var(--sans);
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    color: var(--text);
}

.auth-form__group input::placeholder {
    color: #adb5bd;
}

.auth-form__group input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(192, 38, 211, 0.1);
}

.auth-form__submit {
    width: 100%;
    padding: 0.75rem;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.25rem;
    background: linear-gradient(135deg, #8b5cf6, #d946ef);
    border: none;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    transition: box-shadow 0.2s, filter 0.2s;
}

.auth-form__submit:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 16px rgba(192, 38, 211, 0.35);
}

/* EU data residency - a statement, never a form control: no label, no required
   marker, no field surface, no tab stop. Shared verbatim by the registration form
   and the OAuth onboarding step, so it has to hold in the 560px card and in the
   420px one without a per-screen variant. Sizes are in em so the mark keeps its
   proportion to the text when the browser zooms text only. */
.auth-residency {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin: 0 0 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.auth-residency__flag {
    flex: 0 0 auto;
    width: 2.4em;
    height: 1.6em;
    margin-top: 0.2em;
    border-radius: 2px;
}

.auth-residency__flag-field { fill: var(--eu-flag-blue); }
.auth-residency__flag-stars { fill: var(--eu-flag-gold); }

.auth-residency__headline {
    display: block;
    color: var(--text);
    font-weight: 600;
    text-wrap: balance;
}

.auth-divider {
    display: flex;
    align-items: center;
    margin: 1.75rem 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--border);
}

.auth-divider span {
    padding: 0 1rem;
    white-space: nowrap;
}

.auth-social {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.auth-social--row {
    flex-direction: row;
}

.auth-social__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 1;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    border: 2px solid var(--border);
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.auth-social__icon {
    flex-shrink: 0;
}

.auth-social__btn--google {
    background: #fff;
    color: var(--text);
}

.auth-social__btn--google:hover {
    border-color: #4285f4;
    box-shadow: 0 2px 8px rgba(66, 133, 244, 0.15);
}

.auth-social__btn--github {
    background: #fff;
    color: var(--text);
}

.auth-social__btn--github:hover {
    border-color: #24292e;
    box-shadow: 0 2px 8px rgba(36, 41, 46, 0.15);
}

.auth-social__btn--disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: auto;
}
.auth-social__btn--disabled:hover {
    border-color: var(--border);
    box-shadow: none;
}

.auth-card__footer {
    text-align: center;
    margin-top: 1.75rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

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

.auth-card__footer a:hover {
    text-decoration: underline;
}

@media (max-width: 600px) {
    .auth-form__row { grid-template-columns: 1fr; }
    .auth-social--row { flex-direction: column; }
    .auth-card { padding: 1.5rem; }
    .auth-card--wide { max-width: 100%; }
}

/* Nav user */
.nav__user {
    font-size: 0.8rem;
    color: var(--nav-text);
    font-weight: 500;
    padding: 0.3rem 0.7rem;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid var(--border);
    margin-left: 0.25rem;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
}

.nav__user:hover {
    border-color: var(--accent);
    color: var(--nav-text-active);
}

a.nav__user.nav__link--active {
    border-color: var(--accent);
    color: var(--nav-text-active);
    background: var(--accent-subtle);
}

.nav__link--logout {
    color: var(--nav-text);
    font-size: 0.8rem;
}

.nav__link--logout:hover {
    color: #fca5a5;
    background: rgba(220, 38, 38, 0.1);
}

/* Wizard */
.wizard {
    max-width: 900px;
    margin: 0 auto;
}

.wizard__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.wizard__step-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b5cf6, #d946ef);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wizard__title {
    font-size: 1.5rem;
    font-weight: 700;
}

.wizard__subtitle {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 2rem;
    padding-left: 2.75rem;
}

.wizard__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.wizard__card {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 14px;
    padding: 1.75rem 1.5rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    position: relative;
}

.wizard__card--active {
    cursor: pointer;
}

.wizard__card--active:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 20px rgba(192, 38, 211, 0.18);
    transform: translateY(-2px);
}

.wizard__card--disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.wizard__card-icon {
    margin-bottom: 0.25rem;
}

.wizard__card-title {
    font-size: 1.05rem;
    font-weight: 700;
}

.wizard__card-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
    flex: 1;
}

.wizard__card-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 0.25rem;
}

.wizard__card-badge--available {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.wizard__card-badge--soon {
    background: #fef9ee;
    color: #b45309;
    border: 1px solid #fde68a;
}

@media (max-width: 768px) {
    .wizard__grid { grid-template-columns: 1fr; }
    .wizard__subtitle { padding-left: 0; }
}

/* Settings */
.settings {
    max-width: 720px;
    margin: 0 auto;
}

.settings__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.settings__alert {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.settings__alert--success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #16a34a;
}

.settings__alert--error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

.settings__section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.settings__section--danger {
    border-color: #fecaca;
}

.settings__section--danger .settings__section-header {
    background: #fef2f2;
}

.settings__section--danger .settings__section-header h3 {
    color: #dc2626;
}

.settings__section-header {
    padding: 1rem 1.5rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.settings__section-header h3 {
    font-size: 1rem;
    font-weight: 700;
}

.settings__section-body {
    padding: 1.25rem 1.5rem;
}

.settings__section-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    line-height: 1.5;
}

.settings__field {
    margin-bottom: 1.25rem;
}

.settings__field:last-child {
    margin-bottom: 0;
}

.settings__field label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 0.3rem;
}

.settings__field input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: var(--sans);
    background: var(--bg);
    transition: border-color 0.2s;
    height: 36px;
}

.settings__field input:focus {
    outline: none;
    border-color: var(--primary);
}

.settings__input-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.settings__input-row input {
    flex: 1;
}

.settings__input-row select {
    flex: 1;
    height: 36px;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.875rem;
    background-color: var(--bg);
    color: var(--text);
}

.settings__input-row .btn {
    flex-shrink: 0;
    height: 36px;
    display: inline-flex;
    align-items: center;
}

.settings__readonly {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--text);
    min-height: 36px;
}

.settings__readonly--mono {
    font-family: var(--mono);
    font-size: 0.9rem;
}

.settings__badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: var(--bg);
    color: var(--text-muted);
    border: 1px solid var(--border);
    font-family: var(--sans);
}

.settings__hint {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.settings__form-inline {
    margin-bottom: 0;
}

.settings__form-inline + .settings__field {
    margin-top: 0.25rem;
}

.settings__form-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.settings__form-stack .settings__section-desc {
    margin-bottom: 0;
}

.settings__field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.settings__oauth-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.settings__oauth-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
}

.settings__oauth-item--inactive {
    opacity: 0.5;
}

.settings__oauth-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 500;
    font-size: 0.9rem;
}

.settings__oauth-status {
    font-size: 0.82rem;
    color: var(--text-muted);
}

@media (max-width: 600px) {
    .settings__field-row { grid-template-columns: 1fr; }
    .settings__input-row { flex-direction: column; }
    .settings__section-body { padding: 1rem; }
}

/* Activity page */
.activity-controls { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.activity-controls .form-select { padding: 0.4rem 0.75rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.9rem; background: var(--bg); color: var(--text); }
.activity-chart-container { position: relative; height: 360px; margin-bottom: 0.75rem; }
.activity-chart-hint { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }

/* Status dots (agent health) */
.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
.status-dot--healthy { background: #22c55e; box-shadow: 0 0 4px rgba(34, 197, 94, 0.4); }
.status-dot--warning { background: #eab308; box-shadow: 0 0 4px rgba(234, 179, 8, 0.4); }
.status-dot--offline { background: #ef4444; box-shadow: 0 0 4px rgba(239, 68, 68, 0.4); }
.status-dot--unknown { background: #9ca3af; }

/* Findings dashboard */
body.page-findings {
    background: #eef3f8;
}

.page-findings .main {
    max-width: none;
    margin: 0;
    padding: 0;
}

.findings-page {
    max-width: none;
    background: #eef3f8;
    margin: 0;
    padding: 1.9rem clamp(1rem, 2vw, 1.5rem) 2.25rem;
    min-height: calc(100vh - 56px);
}

.findings-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 0;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.findings-header__title {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.findings-header__subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.findings-header__badges {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
    align-items: center;
}

.severity-pill {
    display: inline-block;
    padding: 0.45rem 0.85rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.severity-pill--critical {
    background: #fef2f2;
    color: var(--severity-critical);
    border: 1px solid #fecaca;
}

.severity-pill--warning {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

.severity-pill--suggestion {
    background: #f5f3ff;
    color: var(--severity-suggestion);
    border: 1px solid #ddd6fe;
}

/* Findings filters */
.findings-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--border);
    align-items: center;
}

.findings-filter {
    min-height: 38px;
    padding: 0.45rem 0.75rem;
    border: 1px solid #c7d4e5;
    border-radius: 6px;
    font-size: 0.86rem;
    font-family: var(--sans);
    background-color: rgba(255, 255, 255, 0.72);
    color: var(--text);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236c757d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
    transition: border-color 0.2s, background-color 0.2s;
}

select.findings-filter:focus {
    outline: none;
    border-color: var(--primary);
}

.findings-filter--static {
    cursor: default;
    background-image: none;
    padding-right: 0.65rem;
    color: var(--text-muted);
    font-size: 0.84rem;
}

/* Searchable combobox */
.combo {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* The existing focus rule is select-qualified (select.findings-filter:focus)
   and does not apply to the combobox input, so restate it explicitly. */
.combo__input:focus {
    outline: none;
    border-color: var(--primary);
}

.combo__clear {
    position: absolute;
    right: 1.5rem;
    background: none;
    border: none;
    padding: 0.15rem 0.3rem;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
}

.combo__clear:hover {
    color: var(--text);
}

.combo__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 2px;
    z-index: 50;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: var(--shadow);
    max-height: 16rem;
    overflow-y: auto;
    padding: 0.25rem 0;
    list-style: none;
}

.combo__list li[role="option"] {
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    font-size: 0.86rem;
}

.combo__list li[role="option"]:hover,
.combo__list .combo__option--active {
    background: var(--accent-subtle);
}

.combo__list li[aria-selected="true"] {
    font-weight: 600;
}

.combo__empty {
    padding: 0.4rem 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

@media (max-width: 768px) {
    /* .combo__input already stretches via the shared .findings-filter
       full-width rule in the layout media block below. */
    .combo { width: 100%; }
}

@media (pointer: coarse) {
    /* Below 16px iOS Safari zooms the page on focus; pin min-height so the
       filter row stays aligned with the native selects. */
    .combo__input {
        font-size: 1rem;
        min-height: 38px;
    }
}

/* Findings table */
.findings-table-wrap {
    background: rgba(255, 255, 255, 0.58);
    border-radius: 8px;
    border: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    overflow: hidden;
    margin-top: 1.5rem;
}

.findings-table {
    box-shadow: none;
    border-radius: 0;
    background: transparent;
}

.findings-table thead { border-bottom: 1px solid var(--border); }

.findings-table th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--text-muted);
    font-weight: 600;
    padding: 0.72rem 1rem;
    background: rgba(248, 250, 252, 0.72);
    border-bottom: none;
}

.findings-table__severity-col { width: 130px; text-align: center; }
.findings-table__age-col { width: 90px; text-align: right; }

.findings-row { transition: background 0.1s; }
.findings-row:hover { background: rgba(248, 250, 252, 0.72); }

.findings-row td {
    padding: 0.85rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
}

.findings-row__main {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.findings-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.3rem;
}

.findings-dot--critical { background: var(--severity-critical); }
.findings-dot--warning { background: var(--severity-warning); }
.findings-dot--suggestion { background: var(--severity-suggestion); }
.findings-dot--ok { background: #16a34a; }

.findings-row__text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.findings-row__title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
}

.findings-row__detail {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.severity-badge {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
}

.severity-badge--critical {
    background: #fef2f2;
    color: var(--severity-critical);
    border: 1px solid #fecaca;
}

.severity-badge--warning {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

.severity-badge--suggestion {
    background: #f5f3ff;
    color: var(--severity-suggestion);
    border: 1px solid #ddd6fe;
}

.severity-badge--ok {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

/* Passed rows (clear rollups, and open categories shown under "Passed only"
   for their passed checks) are visually muted on the dashboard list */
.findings-row--clear .findings-row__title,
.findings-row--clear .findings-row__title .findings-row__link {
    color: var(--text-muted);
    font-weight: 500;
}

.findings-row__age {
    text-align: right;
    font-size: 0.82rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Findings empty state */
.findings-empty {
    text-align: center;
    padding: 4rem 2rem;
}

.findings-empty__icon {
    font-size: 3rem;
    color: #22c55e;
    margin-bottom: 0.75rem;
}

.findings-empty h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.findings-empty p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .findings-header { flex-direction: column; }
    .findings-filters { flex-direction: column; }
    .findings-filter { width: 100%; }
    .findings-table__severity-col,
    .findings-table__age-col,
    .findings-row td:nth-child(2),
    .findings-row__age { display: none; }
}

/* ============================================================
   Finding detail page (/findings/{rollup_uuid})
   ============================================================ */

body.page-finding-detail {
    background:
        radial-gradient(900px 500px at 8% -8%, rgba(127, 46, 255, 0.10), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgba(244, 71, 174, 0.07), transparent 60%),
        #eef3f8;
}

body.page-finding-detail .main {
    max-width: none;
    padding: 0 2.5rem;
}

.finding-detail {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

/* Breadcrumb */
.finding-detail__breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.finding-detail__breadcrumbs a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s;
}
.finding-detail__breadcrumbs a:hover {
    color: #7F2EFF;
    text-decoration: underline;
}
.finding-detail__breadcrumb-sep { opacity: 0.45; }
.finding-detail__breadcrumb-current {
    color: var(--text);
    font-weight: 500;
}

/* Hero card with severity stripe */
.finding-detail__hero {
    position: relative;
    display: flex;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.05);
}
.finding-detail__hero-stripe {
    flex: 0 0 6px;
    background: linear-gradient(180deg, #7F2EFF 0%, #ba3be5 52%, #F447AE 100%);
}
.finding-detail__hero--critical .finding-detail__hero-stripe {
    background: linear-gradient(180deg, #dc2626 0%, #F447AE 100%);
}
.finding-detail__hero--warning .finding-detail__hero-stripe {
    background: linear-gradient(180deg, #f59e0b 0%, #F447AE 100%);
}
.finding-detail__hero--suggestion .finding-detail__hero-stripe {
    background: linear-gradient(180deg, #7F2EFF 0%, #F447AE 100%);
}
.finding-detail__hero-body {
    flex: 1 1 auto;
    padding: 1.6rem 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}
.finding-detail__hero-titlebar {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}
.finding-detail__title {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0;
}
.finding-detail__subtitle {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0;
    max-width: 70ch;
}
.finding-detail__hero-context {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin: 0.35rem 0 0;
    opacity: 0.85;
}

/* Severity pill */
.severity-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.severity-pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.severity-pill--critical {
    background: #fef2f2;
    color: var(--severity-critical);
    border: 1px solid #fecaca;
}
.severity-pill--warning {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}
.severity-pill--suggestion {
    background: #f5f3ff;
    color: var(--severity-suggestion);
    border: 1px solid #ddd6fe;
}

/* Meta grid */
.finding-detail__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.9rem 1.4rem;
    margin: 0;
    padding: 0.9rem 1rem;
    background: linear-gradient(180deg, rgba(127, 46, 255, 0.04), rgba(244, 71, 174, 0.03));
    border: 1px solid rgba(127, 46, 255, 0.10);
    border-radius: 10px;
}
.finding-detail__meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.finding-detail__meta-item dt {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.finding-detail__meta-item dd {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text);
    word-break: break-word;
}
.finding-detail__meta-link {
    color: #7F2EFF;
    text-decoration: none;
    font-weight: 500;
}
.finding-detail__meta-link:hover { text-decoration: underline; }
.finding-detail__meta-muted {
    color: var(--text-muted);
    font-weight: 400;
}

/* Callout */
.finding-detail__callout {
    padding: 0.85rem 1rem;
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
    border-radius: 6px;
}
.finding-detail__callout-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #b45309;
    margin-bottom: 0.25rem;
}
.finding-detail__callout p {
    margin: 0;
    color: var(--text);
    font-size: 0.93rem;
    line-height: 1.55;
}

/* Panel */
.finding-detail__panel {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.05);
}
.finding-detail__panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.4rem;
    border-bottom: 1px solid var(--border);
    background: rgba(248, 250, 252, 0.6);
}
.finding-detail__panel-header h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.finding-detail__panel-count {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    background: #ffffff;
    border: 1px solid var(--border);
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
}

/* Table wrap (horizontal scroll with shadow indicators) */
.finding-detail__table-wrap {
    overflow-x: auto;
    background:
        linear-gradient(to right, #ffffff, #ffffff) left center / 16px 100% no-repeat,
        linear-gradient(to right, rgba(15, 23, 42, 0.08), transparent) left center / 8px 100% no-repeat,
        linear-gradient(to right, #ffffff, #ffffff) right center / 16px 100% no-repeat,
        linear-gradient(to left, rgba(15, 23, 42, 0.08), transparent) right center / 8px 100% no-repeat;
    background-attachment: local, scroll, local, scroll;
}

.finding-detail__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
/* Tuning table only: keep Apply (last col) wide enough for SQL */
.finding-detail__table--tuning {
    table-layout: fixed;
}
.finding-detail__table--tuning th:nth-child(1),
.finding-detail__table--tuning td:nth-child(1) { width: 40px; }
.finding-detail__table--tuning th:nth-child(2),
.finding-detail__table--tuning td:nth-child(2) { width: 22%; }
.finding-detail__table--tuning th:nth-child(3),
.finding-detail__table--tuning td:nth-child(3) { width: 14%; white-space: nowrap; }
.finding-detail__table--tuning th:nth-child(4),
.finding-detail__table--tuning td:nth-child(4) { width: 14%; white-space: nowrap; }
.finding-detail__table--tuning th:nth-child(5),
.finding-detail__table--tuning td:nth-child(5) { width: 110px; }
.finding-detail__table--tuning th:last-child,
.finding-detail__table--tuning td:last-child { width: auto; }
.finding-detail__table thead th {
    text-align: left;
    padding: 0.7rem 1rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: rgba(248, 250, 252, 0.55);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.finding-detail__th--sort {
    cursor: pointer;
    user-select: none;
}
.finding-detail__th--sort::after {
    content: "\2195";
    margin-left: 0.35rem;
    opacity: 0.35;
    font-size: 0.85em;
}
.finding-detail__th--sort:hover {
    color: var(--text);
    background: rgba(127, 46, 255, 0.05);
}
.finding-detail__th--sort:hover::after {
    opacity: 0.6;
}
.finding-detail__th--sort[aria-sort="ascending"]::after {
    content: "\2191";
    opacity: 1;
    color: #7f2eff;
}
.finding-detail__th--sort[aria-sort="descending"]::after {
    content: "\2193";
    opacity: 1;
    color: #7f2eff;
}
.finding-detail__col-num.finding-detail__th--sort {
    text-align: right;
}
.finding-detail__table tbody td {
    padding: 0.85rem 1rem;
    vertical-align: top;
    border-bottom: 1px solid #eef2f7;
}
.finding-detail__table tbody tr:last-child td { border-bottom: none; }
.finding-detail__table tbody tr:hover { background: rgba(127, 46, 255, 0.025); }

/* Whole-row navigation: clicking anywhere on the row opens its detail page. */
.finding-detail__row--clickable { cursor: pointer; }
.finding-detail__row--clickable:hover { background: rgba(127, 46, 255, 0.05); }
.finding-detail__row--clickable:focus-visible {
    outline: 2px solid var(--accent, #7F2EFF);
    outline-offset: -2px;
}

.finding-detail__table code {
    font-family: var(--mono);
    font-size: 0.85em;
    background: rgba(127, 46, 255, 0.07);
    color: #5a1fb8;
    padding: 0.08rem 0.35rem;
    border-radius: 4px;
    word-break: break-all;
}

.finding-detail__col-num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

/* Index name cell */
.finding-detail__index-name {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-bottom: 0.2rem;
}
.finding-detail__index-method {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: lowercase;
}

/* Location cell */
.finding-detail__location {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.finding-detail__location-db {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Status stack of tags */
.finding-detail__status-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    max-width: 240px;
}

/* Generic tag */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid transparent;
    white-space: nowrap;
}
.tag code {
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    font-size: 0.95em;
}
.tag--critical {
    background: #fef2f2;
    color: var(--severity-critical);
    border-color: #fecaca;
}
.tag--warning {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}
.tag--info {
    background: rgba(127, 46, 255, 0.08);
    color: #5a1fb8;
    border-color: rgba(127, 46, 255, 0.20);
}
.tag--neutral {
    background: #f1f5f9;
    color: var(--text-muted);
    border-color: var(--border);
}
.tag--muted {
    background: transparent;
    color: var(--text-muted);
    border-color: var(--border);
}
.tag--ok {
    background: #f0fdf4;
    color: #15803d;
    border-color: #bbf7d0;
}

/* Generic per-row severity badge (used in every finding table) */
.severity-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    border: 1px solid transparent;
}
.severity-tag::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
.severity-tag--critical {
    background: #fef2f2;
    color: var(--severity-critical);
    border-color: #fecaca;
}
.severity-tag--warning {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}
.severity-tag--suggestion {
    background: #f5f3ff;
    color: var(--severity-suggestion);
    border-color: #ddd6fe;
}
.severity-tag--ok {
    background: #f0fdf4;
    color: #15803d;
    border-color: #bbf7d0;
}

/* Issues / All / Passed segmented filter on the tuning category page */
.checks-filter {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 7px;
    overflow: hidden;
    background: var(--bg);
}
.checks-filter__btn {
    appearance: none;
    border: none;
    border-right: 1px solid var(--border);
    background: transparent;
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.checks-filter__btn:last-child { border-right: none; }
.checks-filter__btn:hover { color: var(--text); }
.checks-filter__btn--active {
    background: var(--card-bg);
    color: var(--primary);
}
.checks-filter__count {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--card-bg);
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
}
.checks-filter__btn--active .checks-filter__count {
    background: var(--primary);
    color: #fff;
}
.finding-detail__row--passed td { color: var(--text-muted); }
.finding-detail__row--passed code { color: var(--text); }
.finding-detail__col-sev {
    width: 1%;
    white-space: nowrap;
}

/* Generic white card section reused on the parameter detail page */
.finding-detail__section {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.05);
    padding: 1.3rem 1.4rem;
}
.finding-detail__section > h3:first-child {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}

/* Vertical marker legend hint on the metric chart */
.finding-detail__chart-legend {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}
.finding-detail__chart-legend::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 14px;
    border-left: 2px dashed #7F2EFF;
}

/* SQL fix cell */
.finding-detail__fix-cell {
    min-width: 320px;
    max-width: 480px;
}
.finding-detail__sql {
    position: relative;
    background: #0f0a1a;
    border-radius: 8px;
    border: 1px solid rgba(127, 46, 255, 0.25);
    overflow: hidden;
}
.finding-detail__sql pre {
    margin: 0;
    padding: 0.7rem 3.4rem 0.7rem 0.85rem;
    max-height: 12rem;
    overflow-y: auto;
}
.finding-detail__sql code {
    font-family: var(--mono);
    font-size: 0.78rem;
    line-height: 1.5;
    background: transparent !important;
    color: #f7f4fb !important;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    padding: 0 !important;
}
.finding-detail__copy {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    background: rgba(127, 46, 255, 0.15);
    color: #f7f4fb;
    border: 1px solid rgba(127, 46, 255, 0.35);
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.finding-detail__copy:hover {
    background: linear-gradient(135deg, #7F2EFF 0%, #F447AE 100%);
    border-color: transparent;
    color: #ffffff;
}
.finding-detail__copy--done {
    background: rgba(34, 197, 94, 0.25);
    border-color: rgba(34, 197, 94, 0.45);
    color: #d1fae5;
}

.finding-detail__muted {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-style: italic;
}

/* Empty state */
.finding-detail__empty {
    text-align: center;
    padding: 3.5rem 2rem;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.05);
}
.finding-detail__empty-icon {
    font-size: 2.5rem;
    color: #22c55e;
    margin-bottom: 0.6rem;
}
.finding-detail__empty h2 {
    font-size: 1.15rem;
    margin: 0 0 0.4rem;
    color: var(--text);
}
.finding-detail__empty p {
    margin: 0 auto;
    max-width: 50ch;
    color: var(--text-muted);
    font-size: 0.92rem;
}

@media (max-width: 768px) {
    .finding-detail__hero-body { padding: 1.2rem 1rem; }
    .finding-detail__title { font-size: 1.25rem; }
    .finding-detail__panel-header { padding: 0.85rem 1rem; }
    .finding-detail__fix-cell { min-width: 240px; }
    .finding-detail__status-stack { max-width: none; }
}

/* Affected indexes - one line per row.
   The full statement, the definition and the reasoning live on the index page; the list
   exists to rank and pick. Keeping every row a single line is what makes the column
   scannable, so no cell here is allowed to wrap. */
.finding-detail__table--indexes {
    table-layout: auto;
}
.finding-detail__table--indexes th,
.finding-detail__table--indexes td {
    white-space: nowrap;
}
/* Every column sizes to its content except Problem, which absorbs the slack. */
.finding-detail__table--indexes th:not(:nth-child(4)),
.finding-detail__table--indexes td:not(:nth-child(4)) {
    width: 1%;
}
.finding-detail__table--indexes th:nth-child(4),
.finding-detail__table--indexes td:nth-child(4) {
    width: auto;
    white-space: normal;
    min-width: 14rem;
}
.finding-detail__col-fix {
    width: 1%;
    text-align: right;
}
.finding-detail__object-link {
    color: inherit;
    text-decoration: none;
}
.finding-detail__object-link:hover code,
.finding-detail__object-link:focus-visible code {
    text-decoration: underline;
}
.finding-detail__tag-row {
    display: flex;
    gap: 0.3rem;
    flex-wrap: nowrap;
}

/* Batch select + bulk-copy action bar */
.finding-detail__col-select {
    width: 40px;
    text-align: center;
    white-space: nowrap;
}
.finding-detail__col-select input {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #7f2eff;
    vertical-align: middle;
}

.finding-detail__toolbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem 0;
}
.finding-detail__filter-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.finding-detail__batchbar {
    position: sticky;
    bottom: 1rem;
    z-index: 5;
    margin: 1rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 0.5rem 0.6rem 0.95rem;
    background: #0f0a1a;
    color: #f7f4fb;
    border: 1px solid rgba(127, 46, 255, 0.4);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15, 10, 26, 0.4);
}
.finding-detail__batchbar[hidden] { display: none; }
.finding-detail__batchbar-count { font-size: 0.85rem; color: #c3b3d8; }
.finding-detail__batchbar-count strong { font-size: 1rem; color: #f7f4fb; }
.finding-detail__batchbar-copy {
    margin-left: auto;
    padding: 0.45rem 0.95rem;
    background: linear-gradient(135deg, #7F2EFF 0%, #F447AE 100%);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: filter 0.15s;
}
.finding-detail__batchbar-copy:hover { filter: brightness(1.08); }
.finding-detail__batchbar-copy--done { background: rgba(34, 197, 94, 0.85); }
.finding-detail__batchbar-clear {
    padding: 0.45rem 0.75rem;
    background: transparent;
    color: #b9a6cc;
    border: 1px solid rgba(127, 46, 255, 0.35);
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
}
.finding-detail__batchbar-clear:hover {
    color: #f7f4fb;
    border-color: rgba(127, 46, 255, 0.6);
}

/* ---------------------------------------------------------------------------
   Index observation page (level 3)

   Reuses the finding-detail shell - hero, panels, SQL block, copy button - so a
   reader who arrives here from the settings side of the product recognises the
   page immediately. Only the pieces with no equivalent elsewhere are new.

   The page itself takes the full width of that shell, exactly like the setting
   detail page a reader reaches from the settings side - one level of the
   hierarchy looks like one level. Only the map below is narrowed, because it is
   a diagram rather than a column of text: see `.index-map` further down.
   --------------------------------------------------------------------------- */

/* The `object-detail__` twin of a rule below is the SHARED structure of an object
   detail page - notice, card body, action block, fact grid, subheader, back link.
   The index page keeps its own names; the replication-slot page uses the shared
   ones. Same declarations, one place, so the two levels-3 cannot drift apart. */
.index-detail__notice,
.object-detail__notice {
    margin: 0 0 1.25rem;
    padding: 0.85rem 1.1rem;
    border: 1px solid rgba(217, 119, 6, 0.35);
    border-radius: 12px;
    background: rgba(217, 119, 6, 0.08);
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.55;
}

.index-detail__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.index-detail__card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.05);
}
.index-detail__card-header {
    margin: 0;
    padding: 0.85rem 1.15rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.index-detail__card-body,
.object-detail__card-body {
    padding: 1.15rem;
    font-size: 0.94rem;
    line-height: 1.6;
}
.index-detail__card-body p,
.object-detail__card-body p {
    margin: 0 0 0.75rem;
}
.index-detail__card-body p:last-child,
.object-detail__card-body p:last-child {
    margin-bottom: 0;
}

.index-detail__action,
.object-detail__action {
    padding: 1.15rem;
}
.index-detail__action-where,
.object-detail__action-where {
    margin: 0 0 0.75rem;
    font-size: 0.94rem;
    line-height: 1.6;
}
.index-detail__action-note,
.object-detail__action-note {
    margin: 0.75rem 0 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.index-detail__facts,
.object-detail__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    background: var(--border);
    border-bottom: 1px solid var(--border);
}
.index-detail__fact,
.object-detail__fact {
    background: #ffffff;
    padding: 1rem 1.15rem;
}
.index-detail__fact dt,
.object-detail__fact dt {
    margin: 0 0 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.index-detail__fact dd,
.object-detail__fact dd {
    margin: 0;
    font-size: 1.05rem;
}

.index-detail__definition,
.index-detail__flags {
    padding: 1.15rem;
    border-top: 1px solid var(--border);
}
.index-detail__subheader,
.object-detail__subheader {
    margin: 0 0 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.index-detail__flag-list {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--text-muted);
}

.index-detail__undo {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border);
}

.index-detail__back,
.object-detail__back {
    margin: 1.25rem 0 0;
    font-size: 0.9rem;
}

/* ---------------------------------------------------------------------------
   Index map (level 3, top of the flagged-index page)

   The parent table as a box, and under it the indexes this finding is about,
   in the one-line shape psql prints. Boxes and rules only: every line here is
   a border on an element that grows with its own text, so the map reflows,
   survives a text-spacing override, prints, and copies as text. Nothing is
   sized by bytes - an unmeasured object must never render as a small one.

   This is the one panel on the page that does not take the full width. It is a
   diagram of a containment - a table with its indexes under it - and a diagram
   read left to right across a whole wide screen stops reading as one shape:
   the name of an object and the measurement belonging to it drift apart until
   nothing connects them. The other panels are text and tables and keep the
   page's own width.
   --------------------------------------------------------------------------- */

.index-map {
    max-width: 60rem;
}

.index-map__scope {
    font-size: 0.82rem;
    color: var(--text-muted);
}
.index-map__scope code {
    font-family: var(--mono);
    font-size: 0.86em;
    background: rgba(127, 46, 255, 0.07);
    color: #5a1fb8;
    padding: 0.06em 0.32em;
    border-radius: 4px;
}

.index-map__body { padding: 1.25rem 1.3rem 1.1rem; }

.index-map__table {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 1rem;
    padding: 0.85rem 1.05rem;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-left: 3px solid #7F2EFF;
    border-radius: 10px;
}
.index-map__kind {
    flex: 0 0 100%;
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.index-map__id {
    font-family: var(--mono);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    word-break: break-all;
}
.index-map__where { font-size: 0.82rem; color: var(--text-muted); }
.index-map__where code {
    font-family: var(--mono);
    font-size: 0.86em;
    background: rgba(127, 46, 255, 0.07);
    color: #5a1fb8;
    padding: 0.06em 0.32em;
    border-radius: 4px;
}
/* The measurement is meta ABOUT the object named on the line above it, so it sits on
   its own line under that name. Pinning it to the right edge instead opened a gap as
   wide as the row whenever the definition was short - and a definition is short exactly
   when the index is a simple one, which is the common case. A line break costs nothing
   and holds at every width and every definition length. */
.index-map__measure {
    flex: 0 0 100%;
    font-size: 0.85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.index-map__measure-note {
    font-size: 0.82em;
    font-weight: 400;
    color: var(--text-muted);
    font-variant-numeric: normal;
}
/* Each note is a separate fact about the same number, so it is separated rather than
   run together with the one before it. The mark is generated, so it never lands in
   copied text, and it is never printed before the first item on the line. */
.index-map__measure-note::before,
.index-map__size-note::before {
    content: "\00b7";
    margin: 0 0.4rem;
    color: var(--text-muted);
    opacity: 0.7;
}

.index-map__rail {
    position: relative;
    padding-left: 1.3rem;
}
/* The rail stops at the last elbow rather than running past it, and it is drawn in
   segments to stay that way: the label carries the top of the line, and each index
   carries the piece from the box above it down to its own elbow. One line over the
   whole rail would have to know the height of the last box, which changes with what
   that box contains. */
.index-map__rail-label {
    margin: 0;
    border-left: 1px solid #cbd5e1;
    padding: 0.55rem 0 0.5rem 1.45rem;
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--text-muted);
}

.index-map__item {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.7rem;
    margin: 0 0 0.55rem 1.45rem;
    padding: 0.65rem 0.9rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
}
/* The elbow meets the line the index is NAMED on, which is the first content line of
   the box - the measurement sits below it and the role label above it. */
.index-map__item::before {
    content: "";
    position: absolute;
    left: -1.45rem;
    top: 2.75rem;
    width: 1.45rem;
    border-top: 1px solid #cbd5e1;
}
/* Each index paints the rail alongside itself and the gap above it, so the line is
   continuous however tall the boxes grow. The last one stops at its own elbow, which
   is what keeps the rail from running past the end of the tree. */
.index-map__item::after {
    content: "";
    position: absolute;
    left: -1.45rem;
    top: -0.6rem;
    bottom: -0.55rem;
    border-left: 1px solid #cbd5e1;
}
.index-map__item:last-child::after {
    bottom: auto;
    height: 3.35rem;
}
.index-map__item--subject {
    border-color: rgba(127, 46, 255, 0.45);
    box-shadow: 0 0 0 3px rgba(127, 46, 255, 0.07);
}
.index-map__item--peer { border-color: #bbf7d0; }
.index-map__role {
    flex: 0 0 100%;
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.index-map__name {
    font-family: var(--mono);
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--text);
    word-break: break-all;
}
.index-map__def {
    font-family: var(--mono);
    font-size: 0.85rem;
    color: #475569;
    word-break: break-word;
}
.index-map__size {
    flex: 0 0 100%;
    font-size: 0.85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.index-map__size-note {
    font-size: 0.82em;
    font-weight: 400;
    color: var(--text-muted);
    font-variant-numeric: normal;
}
/* "Not measured yet" is the whole line, not a note appended to a number, so it keeps
   the muted styling it carries everywhere else and gains no separator. */
.index-map__size .finding-detail__muted,
.index-map__measure .finding-detail__muted {
    font-weight: 400;
}

.index-map__note {
    margin: 0.6rem 0 0;
    padding-left: 1.3rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.55;
}
.index-map__note--scope { margin-top: 0.35rem; }

/* An object name inside a sentence, printed the way it is printed everywhere
   else on the page so the prose and the map are visibly about one object. */
.index-detail__card-body code.ident,
.object-detail__card-body code.ident,
.index-map__note code.ident,
.finding-detail__panel code.ident {
    font-family: var(--mono);
    font-size: 0.86em;
    background: rgba(127, 46, 255, 0.07);
    color: #5a1fb8;
    padding: 0.08em 0.34em;
    border-radius: 4px;
    word-break: break-all;
}