/* ═══════════════════════════════════════════════════════════════════
   AML Transaction Monitoring — Clean Light Design System
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* The slate greys most neutrals are drawn in (Tailwind's slate scale). They were written
       out as hex about 700 times across the stylesheets; a rule names the step it wants, and
       the semantic tokens below are defined on them (roadmap R2.27). */
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;

    /* Core Palette — Clean White / Modern Fintech Light System */
    --bg-primary: var(--slate-50);
    --bg-secondary: #ffffff;
    --bg-tertiary: var(--slate-100);
    --bg-card: #ffffff;
    --bg-glass: rgba(255, 255, 255, 0.9);
    --bg-hover: rgba(var(--accent-primary-rgb), 0.05);

    /* Borders */
    --border-primary: var(--slate-200);
    --border-secondary: var(--slate-300);
    --border-accent: rgba(var(--accent-primary-rgb), 0.3);
    --border-color: var(--border-primary);

    /* Text */
    --text-primary: var(--slate-900);
    --text-secondary: var(--slate-600);
    --text-tertiary: var(--slate-500);
    --text-accent: var(--accent-azure);
    --text-muted: var(--slate-500);

    /* Primary theme: colours supplied by the user.
       Change these base tokens to recolour actions, selections and focus states. */
    --accent-primary: #074B63;
    --accent-primary-rgb: 7, 75, 99;
    --accent-primary-bright: var(--accent-primary);
    --accent-primary-dark: #052432;
    --accent-primary-deep: var(--accent-primary-dark);
    --nav-tone-dark: var(--accent-primary-dark);
    --nav-tone-middle: var(--accent-primary);
    --nav-tone-light: #116780;
    --accent-primary-50: color-mix(in srgb, var(--accent-primary) 5%, white);
    --accent-primary-100: color-mix(in srgb, var(--accent-primary) 10%, white);
    --accent-primary-200: color-mix(in srgb, var(--accent-primary) 22%, white);
    --accent-primary-300: color-mix(in srgb, var(--accent-primary) 38%, white);
    --accent-primary-400: color-mix(in srgb, var(--accent-primary) 65%, white);

    /* Compatibility aliases for existing shared styles. */
    --accent-azure: var(--accent-primary);
    --accent-azure-bright: var(--accent-primary-dark);
    --accent-blue: var(--accent-primary-bright);
    --accent-blue-glow: rgba(var(--accent-primary-rgb), 0.15);
    --accent-indigo: var(--accent-primary);
    --accent-cyan: #0891b2;
    --accent-emerald: #059669;
    --accent-amber: #d97706;
    --accent-orange: #ea580c;
    --accent-red: #dc2626;
    --accent-rose: #e11d48;
    --accent-violet: #7c3aed;

    /* Status Colors */
    --status-new: #d97706;
    --status-investigating: #0284c7;
    --status-escalated: #ea580c;
    --status-closed: #059669;
    --status-sar: #dc2626;

    /* Priority Colors */
    --priority-critical: #dc2626;
    --priority-high: #ea580c;
    --priority-medium: #d97706;
    --priority-low: #059669;

    /* Type scale.
       Seven steps, shared by both stylesheets. Model Studio had grown
       twenty-seven distinct pixel sizes between 8px and 34px — fourteen of them
       under 15px, where nobody can tell 11px from 11.5px. That is a continuum,
       not a scale. Absolute units because the two stylesheets disagreed about
       what a rem was worth. */
    --fs-display: 34px;     /* the title of the page that opens the app */
    --fs-title: 22px;       /* the name of a stage or a record */
    --fs-heading: 18px;     /* a section of a page */
    --fs-subheading: 15px;  /* a group inside a section */
    --fs-body: 13px;        /* running text, table cells, controls */
    --fs-small: 12px;       /* secondary text beneath something else */
    --fs-micro: 10.5px;     /* eyebrows, table headers, chips */

    /* A bare `monospace` is Courier in most browsers, and it made every path and
       identifier look like a typewriter beside Inter. The system's own code face. */
    --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

    /* Control heights. Three, so a row of buttons lines up without being
       measured: compact for toolbars, default for most things, large for the
       one action a page is about. */
    --control-sm: 28px;
    --control-md: 32px;
    --control-lg: 36px;

    /* Sizing */
    /* The two navigation rows are deliberately different heights: the primary bar
       is the taller of the two so the sub-navigation reads as subordinate to it
       rather than as a second bar of equal standing. */
    --header-height: 56px;
    --subnav-height: 48px;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-ctl: 8px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03);
    --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 12px 30px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.04);
    --shadow-glow: 0 0 20px rgba(var(--accent-primary-rgb), 0.12);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Borders and surfaces, named so the five near-identical greys that had
       accumulated (#e2e8f0, #e6ecf4, #e8edf5, #dbe4ef, #e3e9f3) collapse to one
       decision. --border-primary above is the line; these are the surfaces. */
    --surface-sunken: var(--slate-50);
    --surface-raised: #ffffff;
}

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

/* The app is dense by design, but at 14px the secondary copy — panel blurbs,
   captions, chip labels — sat under 11px and was hard to read. */
html {
    font-size: 15px;
}

/* Global Custom Scrollbars */
html, body, .main-content, .modal, textarea, select, pre, .nav-menu, .panel-body {
    --scrollbar-thumb: rgba(15, 23, 42, 0.18);
    --scrollbar-track: transparent;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    scrollbar-width: thin;
}

@supports not (scrollbar-color: auto) {
    html::-webkit-scrollbar, body::-webkit-scrollbar, .main-content::-webkit-scrollbar, .modal::-webkit-scrollbar, textarea::-webkit-scrollbar, select::-webkit-scrollbar, pre::-webkit-scrollbar, .nav-menu::-webkit-scrollbar, .panel-body::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, .main-content::-webkit-scrollbar-thumb, .modal::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb, select::-webkit-scrollbar-thumb, pre::-webkit-scrollbar-thumb, .nav-menu::-webkit-scrollbar-thumb, .panel-body::-webkit-scrollbar-thumb {
        background: var(--scrollbar-thumb);
        border-radius: 3px;
    }
    html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, .main-content::-webkit-scrollbar-track, .modal::-webkit-scrollbar-track, textarea::-webkit-scrollbar-track, select::-webkit-scrollbar-track, pre::-webkit-scrollbar-track, .nav-menu::-webkit-scrollbar-track, .panel-body::-webkit-scrollbar-track {
        background: var(--scrollbar-track);
    }
}

code, kbd, samp, pre { font-family: var(--font-mono); }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--slate-50);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ─── Application header ──────────────────────────────────────────── */
.app-header {
    position: sticky;
    top: 0;
    z-index: 200;
    height: var(--header-height);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 18px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0;
}

.app-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
}

.app-header .logo {
    gap: 10px;
}

.app-header .logo-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    box-shadow: 0 0 12px rgba(var(--accent-primary-rgb), 0.22);
}

.app-header .logo-icon svg {
    width: 15px;
    height: 15px;
}

.app-header .logo-title {
    font-size: 1.5rem;
    line-height: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.app-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-left: auto;
    padding: 0;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

.app-nav-toggle svg {
    width: 18px;
    height: 18px;
}

.app-nav-toggle:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.app-nav {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-self: stretch;
}

.app-header-status {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.app-header-status .system-time {
    margin-top: 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: var(--accent-azure);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(var(--accent-primary-rgb), 0.3);
}

.logo-icon svg {
    width: 20px;
    height: 20px;
    color: white;
}

.logo-title {
    display: block;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.nav-menu {
    list-style: none;
    display: flex;
    align-items: stretch;
    height: 100%;
    gap: 2px;
    margin: 0;
    padding: 0;
    min-height: 0;
}

.nav-item {
    margin: 0;
    height: 100%;
}

.nav-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin: 0;
    width: 150px;
    padding: 0 13px;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    font-weight: 550;
    font-size: 0.98rem;
    letter-spacing: 0.01em;
    position: relative;
    white-space: nowrap;
}

.nav-item a:hover {
    color: var(--text-primary);
    background: transparent;
}

.nav-item.is-disabled a {
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.55;
}

.nav-item.is-disabled a:hover {
    color: var(--text-muted);
    background: transparent;
}

.nav-item.active a {
    color: var(--accent-blue);
    background: transparent;
    border-radius: 0;
    border-bottom-color: var(--accent-blue);
    font-weight: 650;
}

.nav-item.active a::before {
    display: none;
}

.nav-item svg {
    display: none;
}

.system-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-emerald);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.system-time {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
}

/* Shared navigation theme: parent, selected parent and child bar. */
.app-header {
    background: var(--accent-primary-dark);
    border-bottom-color: var(--accent-primary);
}
.app-header .logo-title,
.app-header .system-status,
.app-header .system-time,
.app-header .app-nav-toggle {
    color: #fff;
}
.app-header .nav-item a { color: rgba(255, 255, 255, .8); }
.app-header .nav-item a:hover,
.app-header .nav-item.active a {
    color: #fff;
    background: var(--accent-primary);
    border-bottom-color: transparent;
}
.app-header .nav-item.is-disabled a { opacity: .55; background: transparent; }
.app-header .app-nav-toggle:hover { background: var(--accent-primary); }

/* ─── Main Content ────────────────────────────────────────────────── */
.main-content {
    margin-left: 0;
    flex: 1;
    width: 100%;
    min-height: calc(100vh - var(--header-height));
    padding: 24px 28px;
    background: var(--bg-primary);
    min-width: 0;
    max-width: 100%;
    /* `clip` rather than `hidden`: both stop sideways overflow, but `hidden` makes
       this a scroll container, which would anchor any sticky descendant here instead
       of to the viewport and stop the sub-navigation pinning. */
    overflow-x: clip;
}

/* ─── Page Header ─────────────────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
    min-width: 0;
}

/* Keep generated page content inside the available shell width. */
#page-content,
#page-content > * {
    min-width: 0;
    max-width: 100%;
}

.page-header > * {
    min-width: 0;
}

.page-header h1 {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.page-header h1 small {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--text-tertiary);
    margin-top: 2px;
    letter-spacing: 0;
}

/* ─── Cards ───────────────────────────────────────────────────────── */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

.card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--accent-primary-rgb), 0.25);
    box-shadow: var(--shadow-md);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

/* A card's title is a heading, not an eyebrow. Set in caps at 12px it read as a
   label on a form, and it put this half of the app in a different voice from
   Model Studio, where sections are named in sentence case at a size you can
   actually see. Caps are kept for eyebrows and table headers, which are labels. */
.card-title {
    font-size: var(--fs-subheading);
    font-weight: 650;
    color: var(--text-primary);
    letter-spacing: -0.012em;
}

/* ─── KPI Grid ────────────────────────────────────────────────────── */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.kpi-card {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

.kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: rgba(var(--accent-primary-rgb), 0.25);
}

/* The label on a figure is a label, so it stays in caps — at the one micro size
   the whole app uses for eyebrows, table headers and chips. */
.kpi-label {
    font-size: var(--fs-micro);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    margin-bottom: 8px;
}

.kpi-value {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    line-height: 1;
}

.kpi-sub {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-top: 6px;
}

/* ─── Tables ──────────────────────────────────────────────────────── */
.data-table-wrap {
    overflow-x: auto;
    max-width: 100%;
    min-width: 0;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

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

.data-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--slate-50);
    border-bottom: 1px solid var(--border-primary);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: color var(--transition-fast);
}

.data-table th:hover {
    color: var(--text-primary);
}

.data-table th.sortable-col::after {
    content: "↕";
    margin-left: 6px;
    font-size: 0.68rem;
    color: var(--text-tertiary);
}

.data-table th.sortable-col.sorted-asc::after {
    content: "↑";
    color: var(--accent-blue);
}

.data-table th.sortable-col.sorted-desc::after {
    content: "↓";
    color: var(--accent-blue);
}

.data-table td {
    padding: 12px 16px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-primary);
    white-space: nowrap;
}

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

.data-table tr {
    transition: background var(--transition-fast);
    cursor: pointer;
}

.data-table tr:nth-child(even) {
    background: #fafbfc;
}

.data-table tr:hover {
    background: rgba(var(--accent-primary-rgb), 0.04);
}

.tx-counterparty-link {
    color: var(--accent-blue);
    text-decoration: underline;
    font-weight: 600;
}

.tx-counterparty-link:hover,
.tx-counterparty-link:focus {
    color: var(--accent-indigo);
    text-decoration: underline;
}

/* ─── Badges & Tags ───────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Person or business, beside the name. Quiet: it describes the record rather
   than flagging it. */
.entity-type {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-tertiary);
    font-size: var(--fs-small);
    font-weight: 600;
    white-space: nowrap;
}

.entity-type svg { width: 12px; height: 12px; opacity: 0.8; }

/* The absence of a finding. A badge is for something worth looking at; when every
   cell in a screening column carries one, the row that matters stops standing out. */
.cell-nil {
    color: var(--text-tertiary);
    font-size: var(--fs-small);
    font-weight: 500;
}

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

.badge-high {
    background: #fff7ed;
    color: #ea580c;
    border: 1px solid #fed7aa;
}

.badge-medium {
    background: #fefce8;
    color: #d97706;
    border: 1px solid #fef08a;
}

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

.badge-new {
    background: #fefce8;
    color: #d97706;
    border: 1px solid #fef08a;
}

.badge-investigating {
    background: #f0f9ff;
    color: #0284c7;
    border: 1px solid #bae6fd;
}

.badge-escalated {
    background: #fff7ed;
    color: #ea580c;
    border: 1px solid #fed7aa;
}

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

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

.typology-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--accent-primary-50);
    color: var(--accent-primary);
    border: 1px solid var(--accent-primary-200);
}

/* ─── Risk Score Gauge ────────────────────────────────────────────── */
.risk-score {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.risk-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.risk-critical .risk-dot {
    background: var(--priority-critical);
    box-shadow: 0 0 6px rgba(220, 38, 38, 0.4);
}

.risk-high .risk-dot {
    background: var(--priority-high);
    box-shadow: 0 0 6px rgba(234, 88, 12, 0.4);
}

.risk-medium .risk-dot {
    background: var(--priority-medium);
    box-shadow: 0 0 6px rgba(217, 119, 6, 0.4);
}

.risk-low .risk-dot {
    background: var(--priority-low);
    box-shadow: 0 0 6px rgba(5, 150, 105, 0.4);
}

/* ─── Buttons ─────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--control-lg);
    padding: 0 18px;
    border-radius: var(--radius-ctl);
    font-size: var(--fs-body);
    font-weight: 650;
    font-family: inherit;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast),
                color var(--transition-fast), box-shadow var(--transition-fast);
    white-space: nowrap;
    user-select: none;
}

/* Pressed, not bounced. Buttons elsewhere in the app settle by a pixel; scaling
   the whole control was a second motion language for the same gesture. */
.btn:active:not(:disabled) {
    transform: translateY(1px);
}

/* Disabled actions must read as unavailable, including buttons with inline
   danger styling (for example Reset dataset). */
.btn:disabled,
.btn[aria-disabled="true"] {
    background: #e5e7eb !important;
    background-image: none !important;
    color: #9ca3af !important;
    border-color: #d1d5db !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 0.75;
    transform: none !important;
}

.btn:disabled:hover,
.btn[aria-disabled="true"]:hover {
    background: #e5e7eb !important;
    color: #9ca3af !important;
    border-color: #d1d5db !important;
    transform: none !important;
}

.btn-primary {
    background: var(--accent-indigo);
    color: #fff;
    box-shadow: 0 1px 2px rgba(var(--accent-primary-rgb), 0.24);
    border-color: transparent;
}

.btn-primary:hover:not(:disabled) {
    background: var(--accent-primary-dark);
    box-shadow: 0 2px 6px rgba(var(--accent-primary-rgb), 0.30);
}

.btn-secondary {
    background: #ffffff;
    color: var(--text-secondary);
    border-color: var(--border-secondary);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.btn-secondary:hover {
    background: var(--surface-sunken);
    color: var(--text-primary);
    border-color: var(--border-secondary);
}

.btn-danger {
    background: var(--accent-red);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(220, 38, 38, 0.24);
}

.btn-danger:hover:not(:disabled) {
    background: #b91c1c;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.30);
}

.btn-cancel-generation {
    background: #dc2626 !important;
    color: #fff !important;
    border-color: #b91c1c !important;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25) !important;
}

.btn-cancel-generation:hover {
    background: #b91c1c !important;
    color: #fff !important;
    border-color: #991b1b !important;
}

.btn-success {
    background: #f0fdf4;
    color: #16a34a;
    border-color: #bbf7d0;
}

.btn-success:hover {
    background: #dcfce7;
    border-color: #86efac;
}

.btn-sm {
    height: var(--control-sm);
    padding: 0 12px;
    font-size: var(--fs-small);
}

.btn-md {
    height: var(--control-md);
    padding: 0 14px;
}

.btn-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ─── Forms ───────────────────────────────────────────────────────── */
.form-group {
    margin-bottom: 16px;
}

.form-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.form-control {
    width: 100%;
    padding: 9px 14px;
    background: #ffffff;
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.85rem;
    transition: all var(--transition-fast);
}

.form-control:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px var(--accent-blue-glow);
}

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

/* ─── Shared field box ────────────────────────────────────────────────
   `.input` is the dense field class used across Model Studio, the Population Lab and
   Settings, and it had no definition anywhere: the reset above zeroes padding on every
   element, nothing put it back, and the border was left to the browser. Every one of
   these fields was rendering as native 2px-inset chrome with its text against the edge.
   Component rules that set their own height or padding are more specific and still win
   — this is the floor they build on, not a cage. */
.input {
    padding: 7px 10px;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input::placeholder {
    color: var(--slate-400);
}

.input:hover:not(:disabled):not([readonly]) {
    border-color: var(--border-secondary);
}

.input:focus,
.input:focus-visible {
    outline: none;
    border-color: var(--accent-indigo);
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.14);
}

/* A <fieldset disabled> is how the Studio makes a locked version read-only, so this is
   the state an analyst sees on anything already simulated. */
.input:disabled {
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    cursor: not-allowed;
}

/* Native select chrome is the most obviously dated part and the widest: one chevron,
   drawn the same way `.form-control` draws its own. */
select.input {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 26px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    cursor: pointer;
}

select.input:disabled {
    cursor: not-allowed;
}

textarea.input {
    line-height: 1.5;
    resize: vertical;
}

/* ─── Filters Bar ─────────────────────────────────────────────────── */
.filters-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    max-width: 100%;
    min-width: 0;
}

/* Keep long KYC filters and wide tables inside the available viewport. */
.filters-bar > .search-input {
    min-width: 0;
    max-width: 100%;
}
.filters-bar > .search-input {
    flex: 1 1 300px !important;
}

.filters-bar > .search-input input {
    flex: 1 1 180px !important;
    min-width: 0;
    max-width: 100%;
}
.card {
    min-width: 0;
    max-width: 100%;
}

.search-input {
    flex: 1;
    min-width: 200px;
    position: relative;
}

.search-input input {
    width: 100%;
    padding: 9px 14px 9px 38px;
    background: #ffffff;
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.85rem;
    transition: all var(--transition-fast);
}

.search-input input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px var(--accent-blue-glow);
}

.search-input::before {
    content: '⌕';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: 1.1rem;
}

.filter-select {
    padding: 9px 32px 9px 14px;
    background-color: #ffffff;
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.85rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.filter-select:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px var(--accent-blue-glow);
}

/* ─── Pagination ──────────────────────────────────────────────────── */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 16px;
}

.pagination button {
    padding: 6px 12px;
    border: 1px solid var(--border-secondary);
    background: #ffffff;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.pagination button:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-secondary);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.pagination button.active {
    background: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
    box-shadow: 0 2px 6px rgba(var(--accent-primary-rgb), 0.35);
}

.pagination button:disabled {
    opacity: 0.4;
    cursor: default;
}

.pagination-info {
    font-size: 0.78rem;
    color: var(--text-tertiary);
    margin: 0 12px;
}

/* Said plainly rather than coloured as a warning: the evidence being trimmed is normal
   for a busy entity, but an analyst recording a verdict has to know it happened. */
.occurrence-truncated {
    padding: 9px 12px;
    border: 1px solid var(--border-subtle, var(--slate-200));
    border-left: 3px solid var(--accent-amber, #d97706);
    border-radius: 8px;
    background: var(--bg-elevated, #fff);
    color: var(--text-muted, var(--slate-500));
    font-size: 0.82rem;
    line-height: 1.5;
}

.occurrence-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 10px;
    width: 100%;
    min-width: 0;
}

.occurrence-pager-status {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.occurrence-pager-controls {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 4px;
}

.occurrence-pager-controls button {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 6px 10px;
    border: 1px solid var(--border-secondary);
    background: #ffffff;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.78rem;
    line-height: 1;
    cursor: pointer;
}

.occurrence-pager-controls button:hover:not(:disabled) {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.occurrence-pager-controls button:disabled {
    opacity: 0.4;
    cursor: default;
}

.occurrence-pager-page {
    min-width: 4.75rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
    padding: 0 4px;
}

.occurrence-table-wrap {
    overflow-x: auto;
    max-width: 100%;
}

.occurrence-tx-table {
    table-layout: fixed;
    width: 100%;
    min-width: 0;
}

.occurrence-tx-table th:nth-child(1) { width: 26%; }
.occurrence-tx-table th:nth-child(2) { width: 32%; }
.occurrence-tx-table th:nth-child(3) { width: 20%; }
.occurrence-tx-table th:nth-child(4) { width: 22%; }

.occurrence-tx-table.data-table th,
.occurrence-tx-table.data-table td {
    padding: 8px 8px;
    vertical-align: top;
    overflow: hidden;
}

.occurrence-tx-table.data-table td {
    white-space: normal;
}

.occurrence-tx-when {
    white-space: normal;
}

.occurrence-tx-day,
.occurrence-tx-time {
    display: block;
}

.occurrence-tx-time {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.occurrence-tx-ref {
    font-family: monospace;
    font-size: 0.74rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.occurrence-tx-type {
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.occurrence-tx-cp {
    overflow: hidden;
    text-overflow: ellipsis;
}

.occurrence-tx-amount {
    text-align: right;
    font-weight: 700;
}

.occurrence-tx-figure {
    display: block;
    white-space: nowrap;
}

.occurrence-tx-amount .badge {
    display: inline-block;
    margin-left: 0;
    margin-top: 4px;
    vertical-align: middle;
}

/* ─── Alert detail ────────────────────────────────────────────────────
   A centred screen rather than a side drawer: an alert is a case file — a
   gauge, four tabs and a transaction table — and 600px of column forced every
   table inside it to scroll sideways. The same markup renders full-page at
   #alert-<id>, which is what the Expand button opens in a new tab.
   ─────────────────────────────────────────────────────────────────── */
.detail-panel {
    position: fixed;
    /* Hangs below the app header rather than centring over it: the main menu stays
       readable, and the screen always opens from the same edge whatever its height. */
    top: calc(var(--header-height) + 14px);
    left: 50%;
    /* Percentages on a fixed element resolve against the viewport without its
       scrollbars; vw includes them, which ate the side gutter whenever one appeared. */
    width: min(1120px, calc(100% - 56px));
    max-height: calc(100% - var(--header-height) - 28px);
    transform: translateX(-50%) scale(0.98);
    background: #ffffff;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    z-index: 200;
    overflow-y: auto;
    opacity: 0;
    box-shadow: var(--shadow-lg);
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.detail-panel.open {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

.detail-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 190;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
}

.detail-panel-overlay.open {
    opacity: 1;
    visibility: visible;
}

.panel-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 10;
}

.panel-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.panel-expand,
a.panel-expand:link,
a.panel-expand:visited {
    display: inline-flex;
    text-decoration: none;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.panel-expand:hover,
a.panel-expand:hover {
    background: var(--accent-primary-50);
    border-color: var(--border-accent);
    color: var(--accent-indigo);
    text-decoration: none;
}

.panel-close {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-primary);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.panel-close:hover {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
    transform: scale(1.05);
}

.panel-body {
    padding: 22px;
}

/* The full-page view: the same header and body, in the page flow rather than
   over it, so the browser's own back button and tab chrome apply. */
/* #page-content > * caps its children at 100%, and an id beats a class — so the page
   view states its own measure with the same reach. */
#page-content > .alert-page {
    max-width: 1180px;
    margin: 0 auto;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    background: #ffffff;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.alert-page .panel-header { border-radius: 0; }
.alert-page .panel-body { padding: 24px; }

@media (max-width: 900px) {
    .detail-panel {
        width: calc(100% - 24px);
        top: calc(var(--header-height) + 8px);
        max-height: calc(100% - var(--header-height) - 16px);
    }
    .panel-header { padding: 14px 16px; }
    .panel-body { padding: 16px; }
    .panel-expand span { display: none; }
}

/* ─── Tabs ────────────────────────────────────────────────────────── */
.tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--border-primary);
    margin-bottom: 20px;
}

.tab-btn {
    padding: 10px 18px;
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all var(--transition-fast);
    margin-bottom: -1px;
}

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

.tab-btn.active {
    color: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
}

/* ─── Page sub-nav (module name, then submenu, flush under the app header) ────
   Shared by Model Studio, Population Lab and Settings so every tab opens with the
   same bar. Three columns rather than a flex row: the submenu is centred on the
   bar itself, so it lines up under the main nav instead of drifting with the
   width of the title beside it. The bar is shorter than the app header above it,
   so the two rows read as parent and child. */
.page-subnav {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) auto minmax(140px, 1fr);
    align-items: stretch;
    gap: 0 16px;
    height: var(--subnav-height);
    padding: 0 28px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-primary);
}

/* Only the in-page shells sit inside .main-content's padding and need to bleed
   back out of it; the Model Studio host already renders full-bleed.

   These shells scroll the document, so without this their sub-navigation scrolls
   away while Model Studio's stays put — its page does not scroll at all, the canvas
   scrolls inside it. Pinning below the app header makes the three tabs behave the
   same way. */
.admin-page-shell > .page-subnav {
    margin: -24px -28px 24px;
    position: sticky;
    top: var(--header-height);
    z-index: 120;
}

.page-subnav-title {
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    white-space: nowrap;
    min-width: 0;
}

/* The centre column is sized by its content, so once the tab row is wider than the
   space between the two side columns it overflows in both directions and runs
   under the page title — visible on Model Studio, whose row carries six stages.
   The title is the thing to give up: the primary navigation above already says
   which section you are in, and it says so on every page. */
@media (max-width: 1080px) {
    .page-subnav { grid-template-columns: minmax(0, 1fr); padding: 0 16px; }
    .page-subnav-title { display: none; }
    .page-subnav .tabs {
        grid-column: 1;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .page-subnav .tabs::-webkit-scrollbar { display: none; }
}

.page-subnav .tabs {
    grid-column: 2;
    justify-self: center;
    border-bottom: none;
    margin-bottom: 0;
}

/* Every submenu item gets the same width — equal columns that all take the size
   of the widest label — so the row reads as one symmetrical block instead of
   each item hugging its own text. Sized from content, so adding or renaming an
   item keeps the row even without a hand-tuned width. */
.page-subnav .tabs,
.page-subnav .build-steps {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    gap: 2px;
}

.page-subnav .tab-btn,
.page-subnav .build-step,
.page-subnav .build-step button {
    width: 100%;
    justify-content: center;
}

/* Anything after the submenu (a Refresh action, say) trails in the last column. */
.page-subnav > :nth-child(3) {
    grid-column: 3;
    align-self: center;
    justify-self: end;
}

.page-subnav .tab-btn {
    display: flex;
    align-items: center;
    height: 100%;
    margin-bottom: 0;
    /* Same inset as .nav-item a, so the two rows sit on the same rhythm. */
    padding: 0 13px;
    position: relative;
}

/* The same mark as the primary nav: a 2px rule under the full width of the tab.
   A shorter, inset rule read as a different kind of control rather than a quieter
   one; the smaller type already carries the hierarchy. */
.page-subnav .tab-btn.active {
    color: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
}

/* Apply the same child-bar palette to tabs and Model Studio stages. */
.page-subnav {
    background: var(--accent-primary);
    border-bottom-color: var(--accent-primary-dark);
}
.page-subnav-title,
.page-subnav .tab-btn,
.page-subnav .build-step button { color: rgba(255, 255, 255, .8); }
.page-subnav .tab-btn:hover,
.page-subnav .build-step button:hover:not(:disabled) {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}
.page-subnav .tab-btn.active,
.page-subnav .build-step.is-current button,
.page-subnav .build-step.is-current button:hover:not(:disabled) {
    color: #fff;
    background: var(--accent-primary-dark);
    border-bottom-color: #fff;
}
.page-subnav .build-step.is-cycle { background: rgba(255, 255, 255, .05); }
.page-subnav .build-step.is-cycle.is-current { background: var(--accent-primary-dark); }

/* Navigation buttons have square edges throughout. */
.app-header .nav-item a,
.page-subnav .tab-btn,
.page-subnav .build-step button {
    border: 0;
    border-radius: 0;
}
.app-header .nav-item:first-child a,
.page-subnav .tab-btn:first-child,
.page-subnav .build-step:first-child button { border-radius: 0; }
.app-header .nav-item:last-child a,
.page-subnav .tab-btn:last-child,
.page-subnav .build-step:last-child button { border-radius: 0; }
.page-subnav .build-step.is-cycle,
.page-subnav .build-step.is-cycle.is-current {
    background: transparent;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}
.page-subnav .build-step button:disabled,
.app-header .nav-item.is-disabled a {
    color: #c3d6dd;
    opacity: 1;
    background: rgba(255, 255, 255, .06);
}

.page-subnav-blurb {
    margin: -8px 0 20px;
    color: var(--text-secondary);
    font-size: var(--fs-body);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* ─── Info Grid ───────────────────────────────────────────────────── */
.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.info-item {
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-primary);
}

.info-item-label {
    font-size: 0.68rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: 4px;
}

.info-item-value {
    font-size: 0.88rem;
    color: var(--text-primary);
    font-weight: 500;
}

.info-item-full {
    grid-column: 1 / -1;
}

/* ─── Transaction List (compact) ──────────────────────────────────── */
.tx-list {
    max-height: 400px;
    overflow-y: auto;
}

.tx-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-primary);
}

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

.tx-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.tx-icon.credit {
    background: rgba(16, 185, 129, 0.12);
    color: var(--accent-emerald);
}

.tx-icon.debit {
    background: rgba(239, 68, 68, 0.12);
    color: var(--accent-red);
}

.tx-details {
    flex: 1;
    min-width: 0;
}

.tx-desc {
    font-size: 0.82rem;
    color: var(--text-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tx-meta {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    margin-top: 1px;
}

.tx-amount {
    font-weight: 700;
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tx-amount.credit {
    color: var(--accent-emerald);
}

.tx-amount.debit {
    color: var(--accent-red);
}

/* ─── Modal ───────────────────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
}

/* ─── Charts Container ────────────────────────────────────────────── */
.chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.chart-card {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.chart-canvas-wrap {
    position: relative;
    width: 100%;
    height: 220px;
}

.chart-canvas-wrap canvas {
    width: 100%;
    height: 100%;
}

/* ─── Population Lab / Settings layout ───────────────────────────── */
.admin-page-shell {
    width: 100%;
    max-width: none;
    margin: 0;
}

.settings-page {
    max-width: 960px;
}

.settings-page .lab-overview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Four across down to a small laptop: three below 1400px left Injected typologies
   alone on a second row at 1366px. */
.lab-overview-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.admin-generation-section {
    margin-top: 16px !important;
}

.admin-day1-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px;
    align-items: stretch;
}

.admin-day1-grid > .admin-config-panel {
    min-width: 0;
    height: auto;
}

.admin-day1-card {
    width: 100%;
}

.admin-population-card {
    width: 100%;
}

.admin-day1-card .admin-inline-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-population-card #population-config-fieldset {
    min-width: 0;
}

.admin-typology-management-card .card-header {
    align-items: flex-start;
}

/* ═══════════════════════════════════════════════════════════════════
   Population Lab — behaviour configuration
   A preset is a choice, so it is offered as a choice; the parameters it
   governs sit in one panel underneath that names the preset in force.
   ═══════════════════════════════════════════════════════════════════ */

.pop-info-btn {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid var(--border-secondary);
    background: var(--bg-secondary);
    color: var(--text-tertiary);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.pop-info-btn:hover {
    color: var(--accent-blue);
    border-color: var(--border-accent);
}

.pop-mode-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.pop-mode-card {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 12px;
    text-align: left;
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    background: var(--bg-secondary);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.pop-mode-card:hover { border-color: var(--border-secondary); }

.pop-mode-card.is-active {
    border-color: var(--accent-primary-bright);
    background: var(--accent-primary-50);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.pop-mode-card:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

.pop-mode-marker {
    flex: none;
    width: 15px;
    height: 15px;
    margin-top: 1px;
    border-radius: 50%;
    border: 1.5px solid var(--border-secondary);
    background: var(--bg-secondary);
    position: relative;
}

.pop-mode-card.is-active .pop-mode-marker {
    border-color: var(--accent-indigo);
}

.pop-mode-card.is-active .pop-mode-marker::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--accent-indigo);
}

.pop-mode-name {
    display: block;
    font-size: 0.8rem;
    font-weight: 650;
    color: var(--text-primary);
}

.pop-mode-desc {
    display: block;
    margin-top: 3px;
    font-size: 0.73rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.pop-params {
    margin-top: 12px;
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    background: var(--bg-secondary);
    overflow: hidden;
}

.pop-params-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 12px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-primary);
}

.pop-params-state {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.77rem;
    color: var(--text-secondary);
}

.pop-params-state strong { color: var(--text-primary); }
.pop-params-icon { font-size: 0.72rem; opacity: 0.75; }
.pop-params-actions { display: flex; gap: 8px; }
/* .btn sets display, which would otherwise defeat the hidden attribute. */
.pop-params-actions [hidden] { display: none; }

.pop-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 11px 12px;
    border-bottom: 1px solid var(--border-primary);
}

.pop-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bg-tertiary);
    font-size: 0.72rem;
}

.pop-chip-label { color: var(--text-muted); }
.pop-chip-value { color: var(--text-primary); font-weight: 650; }

.pop-fieldset {
    border: 0;
    margin: 0;
    padding: 0 12px;
    min-width: 0;
}

.pop-group { border-top: 1px solid var(--border-primary); }
.pop-group:first-of-type { border-top: 0; }

.pop-group-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 2px;
    cursor: pointer;
    list-style: none;
}

.pop-group-summary::-webkit-details-marker { display: none; }

.pop-group-summary::before {
    content: '';
    flex: none;
    width: 7px;
    height: 7px;
    margin-left: 2px;
    border-right: 1.5px solid var(--text-tertiary);
    border-bottom: 1.5px solid var(--text-tertiary);
    transform: rotate(-45deg);
    transition: transform var(--transition-fast);
}

.pop-group[open] > .pop-group-summary::before { transform: rotate(45deg); }

.pop-group-heading { flex: 1; min-width: 0; }
.pop-group-title { display: block; font-size: 0.82rem; font-weight: 650; color: var(--text-primary); }
.pop-group-blurb { display: block; margin-top: 2px; font-size: 0.73rem; color: var(--text-muted); }

.pop-group-count {
    flex: none;
    font-size: 0.68rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.pop-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 14px;
    padding: 2px 0 16px 19px;
}

.pop-field label {
    display: block;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.pop-field .input { width: 100%; }
.pop-field.is-gated-off { opacity: 0.45; }

.pop-field-help {
    margin-top: 5px;
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.pop-field input:invalid { border-color: var(--accent-amber); }

/* A locked panel still has to be readable — it is the record of what the
   selected preset does, not a form waiting to be filled in. */
.pop-fieldset:disabled .pop-field .input,
.pop-fieldset:disabled .pop-switch {
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    cursor: default;
}

.pop-fieldset:disabled .pop-switch { opacity: 0.7; }

.pop-switch {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 12px;
    border: 1px solid var(--border-primary);
    border-radius: 9px;
    background: var(--bg-tertiary);
    cursor: pointer;
}

.pop-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.pop-switch-track {
    flex: none;
    position: relative;
    width: 34px;
    height: 20px;
    margin-top: 1px;
    border-radius: 999px;
    background: var(--border-secondary);
    transition: background var(--transition-fast);
}

.pop-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.3);
    transition: transform var(--transition-fast);
}

.pop-switch input:checked + .pop-switch-track { background: var(--accent-indigo); }
.pop-switch input:checked + .pop-switch-track .pop-switch-thumb { transform: translateX(14px); }

.pop-switch input:focus-visible + .pop-switch-track {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

.pop-switch-text strong { display: block; font-size: 0.8rem; color: var(--text-primary); }
.pop-switch-text span { display: block; margin-top: 2px; font-size: 0.73rem; line-height: 1.45; color: var(--text-muted); }

.pop-save-status {
    padding: 10px 12px;
    border-top: 1px solid var(--border-primary);
    background: var(--bg-tertiary);
    font-size: 0.73rem;
    color: var(--text-muted);
}

/* The customer mix decides who is in the book rather than how they behave, so
   it belongs with generation and is never locked by a behaviour preset. */
.pop-composition {
    margin-top: 14px;
    padding: 12px 13px 13px;
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    min-width: 0;
}

.pop-composition-legend {
    padding: 0 6px;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.pop-composition-blurb {
    margin: 0 0 12px;
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.pop-composition .pop-field-grid { padding: 0; }

.pop-info-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    padding: 20px;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
}

.pop-info-panel {
    width: 100%;
    max-width: 760px;
    max-height: 82vh;
    overflow-y: auto;
    padding: 18px;
    border: 1px solid var(--border-primary);
    border-radius: 14px;
    background: var(--bg-card);
    box-shadow: var(--shadow-lg);
}

.pop-info-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.pop-info-head h3 { margin: 0; font-size: 1rem; }

.pop-info-panel p {
    margin-top: 9px;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.pop-info-panel p strong { color: var(--text-primary); }

/* ═══════════════════════════════════════════════════════════════════
   Population Lab — typology ingestion
   Two ways to inject the same thing, each in its own panel, with one
   footer that says what is about to happen.
   ═══════════════════════════════════════════════════════════════════ */

.ti-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.ti-budget {
    flex: none;
    text-align: right;
    padding: 7px 11px;
    border: 1px solid var(--border-primary);
    border-radius: 9px;
    background: var(--bg-tertiary);
}

.ti-budget-value { display: block; font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }
.ti-budget-label { display: block; max-width: 180px; font-size: 0.74rem; line-height: 1.35; color: var(--text-muted); }

.ti-panel {
    margin-top: 14px;
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    overflow: hidden;
}

.ti-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 13px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-primary);
}

/* The heading column takes the row; the blurb wrapped after forty characters
   while half the header sat empty. */
.ti-panel-head > div:first-child { flex: 1 1 auto; min-width: 0; }

.ti-panel-title { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }

.ti-panel-blurb {
    margin: 4px 0 0;
    max-width: 104ch;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* The scheme catalogue is governed by figures the server has to measure across the
   whole book. Until they land the card is dimmed and inert rather than hidden, so
   the layout does not jump when it fills in, and nothing here can be clicked while
   the budget behind it is still unknown. */
.admin-typology-management-card.is-awaiting-library .ti-panel,
.admin-typology-management-card.is-awaiting-library .ti-budget,
.admin-typology-management-card.is-awaiting-library .ti-footer {
    opacity: .6;
    pointer-events: none;
}
.admin-typology-management-card.is-awaiting-library .ti-scheme-list {
    grid-template-columns: 1fr;
    min-height: 96px;
    place-content: center;
}
.ti-loading-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.ti-loading-note.is-failed { color: var(--accent-amber); pointer-events: auto; }

.ti-history { flex: none; font-size: 0.78rem; color: var(--text-muted); text-align: right; }
.ti-history.is-blocked { color: var(--accent-amber); }

.ti-scheme-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px; padding: 13px; }

.ti-scheme {
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    background: var(--bg-secondary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.ti-scheme.is-selected {
    border-color: var(--accent-primary-bright);
    box-shadow: 0 0 0 1px rgba(var(--accent-primary-rgb), 0.22);
}

.ti-scheme.is-unavailable { opacity: 0.6; }

.ti-scheme > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    cursor: pointer;
    list-style: none;
}

.ti-scheme > summary::-webkit-details-marker { display: none; }
.ti-case-toggle { flex: none; width: 17px; height: 17px; margin: 0 0 0 2px; cursor: pointer; accent-color: var(--accent-blue); }
.ti-case-toggle:disabled { cursor: not-allowed; }

.ti-scheme > summary::before {
    content: '';
    flex: none;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--text-tertiary);
    border-bottom: 1.5px solid var(--text-tertiary);
    transform: rotate(-45deg);
    transition: transform var(--transition-fast);
}

.ti-scheme[open] > summary::before { transform: rotate(45deg); }

.ti-scheme-summary { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ti-scheme-title { font-size: 0.88rem; font-weight: 650; color: var(--text-primary); }
.ti-scheme-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.ti-real-case-name { font-size: 0.78rem; font-weight: 650; color: var(--accent-blue); margin-right: 5px; }

.ti-scheme-status { flex: none; display: flex; align-items: center; gap: 8px; }

.ti-case-info {
    flex: none;
    width: 24px;
    height: 24px;
    border: 1px solid var(--border-primary);
    border-radius: 50%;
    background: var(--bg-tertiary);
    color: var(--accent-blue);
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
}
.ti-case-info:hover, .ti-case-info:focus-visible { border-color: var(--accent-blue); }
.ti-case-reference {
    margin-bottom: 12px;
    padding: 11px 12px;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    background: var(--bg-tertiary);
    font-size: 0.83rem;
    line-height: 1.5;
}
.ti-case-reference p { margin: 5px 0 0; }

.ti-scheme-picked {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--accent-primary-50);
    color: var(--accent-primary-dark);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.ti-fit { font-size: 0.76rem; color: var(--text-muted); white-space: nowrap; }
.ti-fit.is-none { color: var(--accent-amber); }

.ti-scheme-body { padding: 11px 12px 12px; border-top: 1px solid var(--border-primary); }
.ti-scheme-premise { margin: 0; font-size: 0.78rem; line-height: 1.5; color: var(--text-secondary); }
.ti-scheme-note { margin: 6px 0 0; font-size: 0.82rem; line-height: 1.45; color: var(--text-muted); }
.ti-scheme-note strong { color: var(--text-secondary); }

.ti-scheme-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-primary);
}

.ti-scheme-controls label { display: block; font-size: 0.72rem; color: var(--text-muted); }
.ti-scheme-controls .input { width: 100%; margin-top: 4px; }

.ti-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 14px;
    padding: 13px;
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    background: var(--bg-tertiary);
}

/* The action follows the list rather than waiting at the end of it: the button was
   four screens below the top of the page, with the selection it acts on scrolled
   out of sight above it. */
.ti-footer.is-sticky {
    position: sticky;
    bottom: 12px;
    z-index: 40;
    box-shadow: var(--shadow-md);
    background: var(--bg-secondary);
}

.ti-footer-state {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

/* The cap is spent here, so it is counted here rather than only in the header. */
.ti-budget-live {
    font-size: 0.74rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.ti-budget-live.is-over {
    color: #ef4444;
    font-weight: 650;
}

.ti-panel-aside {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.ti-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.84rem;
    color: var(--text-secondary);
    white-space: nowrap;
    cursor: pointer;
}

.ti-scheme-empty {
    margin: 10px 2px 0;
}

/* Destructive on its own, not shoulder to shoulder with the button that builds. */
/* ─── The confirmation dialog ─────────────────────────────────────────
   Every destructive action in the app resolves here: Reset Studio, Reset
   dataset, deleting a model. It used to be written inline in index.html, so the
   dialog carrying the most weight was the one piece of the interface no design
   decision reached. */
.confirm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(6px);
}

.confirm-overlay.open { display: flex; }

.confirm-dialog {
    width: min(420px, 100%);
    padding: 24px;
    border: 1px solid #fecaca;
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: 0 28px 75px rgba(15, 23, 42, 0.30);
    animation: slideUp 0.22s ease-out;
}

.confirm-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-bottom: 14px;
    border-radius: var(--radius-md);
    background: #fef2f2;
    color: var(--accent-red);
}

.confirm-icon svg { width: 19px; height: 19px; }

.confirm-dialog h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.014em;
}

.confirm-dialog p {
    margin: 8px 0 22px;
    color: var(--text-tertiary);
    font-size: var(--fs-small);
    line-height: 1.55;
}

.confirm-dialog footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

@media (prefers-reduced-motion: reduce) {
    .confirm-dialog { animation: none; }
}

/* ─── Population library ──────────────────────────────────────────────
   A table, because a list of books is a list of rows: the eye compares sizes and
   dates down a column, and six of them fit where two cards did. Saving is the
   thing somebody does *to* this panel, so it reads as a panel of its own rather
   than as a caption above the list. */
.pop-save-panel {
    margin: 4px 0 16px;
    padding: 14px 16px;
    border: 1px solid var(--border-accent, var(--accent-primary-200));
    border-radius: 12px;
    background: var(--accent-soft, var(--accent-primary-50));
}
.pop-save-head h4 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}
.pop-save-head p {
    margin: 3px 0 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.pop-save-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto;
    align-items: end;
    gap: 12px;
    margin-top: 12px;
}
.pop-save-row label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-muted);
}
.pop-save-row .input { background: var(--bg-secondary); }

.pop-bundle-table-wrap { margin-top: 14px; }
.pop-bundle-table td { padding: 10px 14px; vertical-align: middle; }
.pop-bundle-table th { padding: 9px 14px; cursor: default; }
.pop-bundle-table th:hover { color: var(--text-tertiary); }

/* Scoped to the table because .data-table td sets nowrap and outranks a bare class:
   unscoped, a long description ran straight across Contents, Book and Period. */
.pop-bundle-table .pop-cell-name { white-space: normal; min-width: 220px; max-width: 46ch; }
.pop-bundle-title { display: block; font-size: 0.88rem; font-weight: 700; color: var(--text-primary); overflow-wrap: anywhere; }
/* A classroom book's description runs to a paragraph; three lines keep the row a row,
   and the full text is on the title attribute. */
.pop-bundle-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin-top: 2px;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}
.pop-cell-book { font-size: 0.8rem; color: var(--text-secondary); }
.pop-cell-sub { font-size: 0.76rem; color: var(--text-muted); }
.pop-cell-actions { text-align: right; }
.pop-cell-actions .btn { margin-left: 5px; text-decoration: none; }

.pop-bundle-facets { display: flex; flex-wrap: wrap; gap: 4px; max-width: 30ch; }
.pop-facet {
    padding: 2px 8px;
    border: 1px solid var(--border-primary);
    border-radius: 999px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}
/* Planted laundering, deliberate oddity and a training book are the three things
   somebody picks a population for, so each one is named rather than counted. */
.pop-facet.is-truth { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.pop-facet.is-odd { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.pop-facet.is-training { border-color: #c7d2fe; background: #eef2ff; color: #3730a3; }

.pop-import-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border-primary);
}
.pop-import-row label.btn { margin: 0; cursor: pointer; }

@media (max-width: 1100px) {
    .pop-save-row { grid-template-columns: 1fr; }
    .pop-bundle-table .pop-cell-book:nth-of-type(4) { display: none; }
}

/* The population switch in Explore, and the banner that says which book is on
   screen. Both books number their customers from one, so a reader who followed a
   link needs telling which one they are looking at. */
.kyc-population-switch {
    display: inline-flex;
    gap: 2px;
    margin: 0 0 14px;
    padding: 3px;
    border-radius: 10px;
    background: var(--bg-tertiary);
}

.kyc-population-btn {
    padding: 6px 14px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.kyc-population-btn:hover { color: var(--text-primary); }
.kyc-population-btn.is-active {
    background: var(--bg-secondary);
    color: var(--accent-blue);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.kyc-training-banner {
    margin: 0 0 16px;
    padding: 11px 14px;
    border: 1px solid #c7d2fe;
    border-left: 3px solid var(--accent-blue);
    border-radius: 10px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 0.84rem;
    line-height: 1.5;
}

/* ─── Training population ─────────────────────────────────────────────
   A second book, so it reads as a sibling of the dataset card rather than a
   setting inside it: same card shape, its own figures, and a badge when one
   exists. Design: docs/TRAINING_POPULATION_DESIGN.md */
.admin-training-pop-card .card-header { align-items: flex-start; gap: 16px; }
.admin-training-pop-card .admin-panel-subtitle { max-width: 104ch; }

.training-pop-badge {
    flex: none;
    padding: 3px 10px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: 0.72rem;
    font-weight: 700;
}

.training-pop-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin: 4px 0 14px;
}

.training-pop-figure {
    padding: 11px 13px;
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    background: var(--bg-tertiary);
}

.training-pop-value { display: block; font-size: 1.2rem; font-weight: 700; color: var(--text-primary); }
.training-pop-label { display: block; margin-top: 3px; font-size: 0.76rem; line-height: 1.4; color: var(--text-muted); }

.training-pop-stale {
    margin: 0 0 14px;
    padding: 11px 13px;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #fffbeb;
    color: #92400e;
    font-size: 0.82rem;
    line-height: 1.5;
}
.training-pop-stale ul { margin: 5px 0 5px 18px; }

.training-pop-scoped {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    font-size: 0.84rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.training-pop-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent-blue);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.training-pop-link:hover { color: var(--accent-indigo); }

.training-pop-notes {
    margin: 8px 0 0 18px;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.admin-training-pop-card .admin-inline-form-grid label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.76rem;
    color: var(--text-muted);
}

/* ─── Irreversible actions ────────────────────────────────────────────
   One pattern for the whole app. A red-bordered panel with a red button shouts
   at a reader who is not doing anything dangerous yet, and the app had four
   different ways of shouting. The trigger is quiet and sits at the foot of the
   page it belongs to; the weight, the red and the warning live in the
   confirmation dialog, where the decision is actually made. */
.danger-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid var(--border-primary);
}

.danger-footer p {
    margin: 0;
    max-width: 88ch;
    color: var(--text-tertiary);
    font-size: var(--fs-small);
    line-height: 1.55;
}

@media (max-width: 760px) {
    .danger-footer { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* The ingestion progress bar sits with the selection summary it is acting on. */
.ti-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.ti-progress .simulation-method-progress-track { flex: 1; }

.ti-progress-msg {
    margin-top: 5px;
    font-size: 0.74rem;
    color: var(--text-muted);
}

.ti-selection { font-size: 0.8rem; color: var(--text-primary); }
.ti-selection strong { font-weight: 700; }
.ti-selection.is-empty { color: var(--text-muted); }

@media (max-width: 1100px) {
    .pop-mode-group { grid-template-columns: 1fr; }
    .ti-scheme-list { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .ti-header,
    .ti-panel-head { flex-direction: column; align-items: stretch; }
    .ti-budget { text-align: left; }
    .ti-budget-label { max-width: none; }
    .ti-history { text-align: left; }
    .ti-panel-aside { align-items: flex-start; }
    .ti-scheme-controls { grid-template-columns: 1fr; }
    .ti-footer { flex-direction: column; align-items: stretch; }
}

@media (max-width: 640px) {
    .pop-field-grid { grid-template-columns: 1fr; padding-left: 0; }
}

@media (max-width: 1024px) {
    .lab-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .lab-overview-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .admin-day1-card .admin-inline-form-grid { grid-template-columns: 1fr; }
}

.admin-config-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.admin-config-panel {
    padding: 12px;
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    background: var(--bg-secondary);
}

.admin-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.admin-panel-title {
    font-size: var(--fs-body);
    font-weight: 700;
    letter-spacing: -0.008em;
    color: var(--text-primary);
}

.admin-panel-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.admin-panel-note {
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.admin-fx-table-wrap {
    overflow: auto;
    max-height: 420px;
    border: 1px solid var(--border-primary);
    border-radius: 10px;
}

.admin-fx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.admin-fx-table th,
.admin-fx-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-primary);
    white-space: nowrap;
}

.admin-fx-table th {
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.admin-fx-table input {
    width: 120px;
}

.admin-fx-inbook {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--accent-cyan);
}

.admin-inline-form-grid {
    display: grid;
    /* Both forms that use it hold three fields (customers, start and end date). Four
       columns left an empty one, and the two below 1400px left End date alone. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.admin-action-row {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 1024px) {
    .admin-config-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .main-content { padding: 18px 14px; }
    /* Too narrow for three columns — the title stacks above the submenu, which
       then scrolls sideways rather than centring itself off both edges. */
    .page-subnav {
        height: auto;
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 10px 14px;
    }
    .admin-page-shell > .page-subnav { margin: -18px -14px 18px; }
    .page-subnav .tabs, .page-subnav .build-stagebar {
        grid-column: 1;
        justify-self: stretch;
        justify-content: flex-start;
        max-width: 100%;
        overflow-x: auto;
    }
    /* Centring an overflowing row puts its first items past the left edge, where
       scrolling cannot reach them. */
    .page-subnav .build-steps { justify-content: flex-start; }
    /* Equal columns would divide the narrow viewport and clip the labels, so here
       items keep their natural width and the row scrolls instead. */
    .page-subnav .tabs,
    .page-subnav .build-steps { grid-auto-columns: max-content; }
    .page-subnav .tabs, .page-subnav .tab-btn, .page-subnav .build-step button { height: auto; }
    .page-subnav > :nth-child(3) { grid-column: 1; justify-self: end; }
    .filters-bar > .search-input { flex-basis: 100% !important; }
    .filters-bar > .search-input input { flex-basis: 100% !important; width: 100% !important; }
    .data-table { min-width: 900px; }
}

@media (max-width: 640px) {
    .admin-inline-form-grid {
        grid-template-columns: 1fr;
    }
}

/* ─── Toast ───────────────────────────────────────────────────────── */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* A modal panel spans nearly the whole width and ends at the foot of the window, where its
   buttons are ("Close — False positive" in a case), so a toast in the corner covered them.
   While one is open, toasts drop from the top centre instead: over the header band and the
   panel's title, which hold no button there (the close button is at the panel's right). */
body:has([aria-modal="true"]) .toast-container {
    top: 8px;
    bottom: auto;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
}

.toast {
    padding: 12px 20px;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
    min-width: 300px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1px solid var(--border-primary);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.06);
    animation: slideInRight 0.3s ease, fadeOut 0.3s ease 3.7s;
    animation-fill-mode: forwards;
}

/* A toast that waits to be read: wider, wrapping, and dismissed by clicking it. */
.toast.is-sticky {
    max-width: min(640px, 92vw);
    white-space: normal;
    line-height: 1.5;
    cursor: pointer;
}

.toast-success {
    border-left: 4px solid var(--accent-emerald);
}

.toast-error {
    border-left: 4px solid var(--accent-red);
}

.toast-info {
    border-left: 4px solid var(--accent-blue);
}

.toast-warning {
    border-left: 4px solid var(--accent-amber);
}

/* ─── Spinner ─────────────────────────────────────────────────────── */
.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(var(--accent-primary-rgb), 0.2);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

.btn .spinner,
.btn-primary .spinner {
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
}

.spinner-lg {
    width: 40px;
    height: 40px;
    border-width: 3px;
}

.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
    color: var(--text-tertiary);
    font-size: 0.88rem;
}

/* ─── Animations ──────────────────────────────────────────────────── */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes slideUp {
    from {
        transform: translateY(10px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-in {
    animation: slideUp 0.4s ease both;
}

/* ─── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .app-nav-toggle {
        display: inline-flex;
    }

    .app-nav {
        display: none;
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        z-index: 210;
        justify-content: stretch;
        padding: 8px 12px 12px;
        background: var(--accent-primary-dark);
        border-bottom: 1px solid var(--border-primary);
        box-shadow: var(--shadow-md);
    }

    .app-header.is-nav-open .app-nav {
        display: block;
    }

    .nav-menu {
        flex-direction: column;
        align-items: stretch;
    }

    .nav-item a {
        height: 40px;
        border-radius: 8px;
        border-bottom-color: transparent;
    }

    .nav-item.active a::before {
        display: none;
    }

    .nav-item.active a {
        background: rgba(var(--accent-primary-rgb), 0.08);
        border-bottom-color: transparent;
    }

    .app-header-status .system-time {
        display: none;
    }

    .detail-panel {
        width: 100vw;
    }
}

/* ─── Batch Console ───────────────────────────────────────────────── */
.console-output {
    background: var(--slate-50);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: 16px;
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
    font-size: 0.78rem;
    color: #047857;
    max-height: 300px;
    overflow-y: auto;
    line-height: 1.6;
    white-space: pre-wrap;
}

.console-line {
    margin-bottom: 2px;
}

.console-line.error {
    color: #dc2626;
}

.console-line.warning {
    color: #d97706;
}

.console-line.info {
    color: #0284c7;
}

/* ─── Transaction Analysis ────────────────────────────────────────── */
.analysis-metric {
    text-align: center;
    padding: 12px 8px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-primary);
}

.analysis-metric-label {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-bottom: 6px;
}

.analysis-metric-val {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.analysis-metric-val.analysis-hot {
    color: var(--accent-red);
}

.analysis-metric-sub {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    margin-top: 4px;
}

/* ─── Utility ─────────────────────────────────────────────────────── */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.gap-8 {
    gap: 8px;
}

.gap-12 {
    gap: 12px;
}

.mb-8 {
    margin-bottom: 8px;
}

.mb-16 {
    margin-bottom: 16px;
}

.mt-16 {
    margin-top: 16px;
}

.text-sm {
    font-size: 0.78rem;
}

.text-muted {
    color: var(--text-tertiary);
}

.text-emerald {
    color: #6ee7b7;
}

.text-red {
    color: #fca5a5;
}

.w-full {
    width: 100%;
}

/* ─── Simulation UX Layout ───────────────────────────────────────── */
.simulation-method-progress-pct {
    font-size: 0.72rem;
    color: var(--text-muted);
    min-width: 36px;
    text-align: right;
}

.simulation-method-progress-track {
    height: 7px;
    border-radius: 999px;
    background: var(--slate-200);
    overflow: hidden;
}

.simulation-method-progress-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.35s ease;
}

.simulation-method-progress-fill.pending {
    background: var(--slate-400);
}

.simulation-method-progress-fill.running {
    background: var(--accent-primary-bright);
}

.simulation-method-progress-fill.done {
    background: #10b981;
}

.simulation-method-progress-fill.failed {
    background: #ef4444;
}

.simulation-method-progress-fill.indeterminate {
    width: 40%;
    background: linear-gradient(90deg, rgba(var(--accent-primary-rgb), 0.25) 0%, rgba(var(--accent-primary-rgb), 0.95) 45%, rgba(var(--accent-primary-rgb), 0.25) 100%);
    animation: simMethodIndeterminate 1.2s linear infinite;
}

@keyframes simMethodIndeterminate {
    0% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(260%);
    }
}

/* ─── Pre-go-live review (v2 Training) ────────────────────────────────────── */
.prego-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--text-secondary); font-size: 0.73rem; }
.prego-progress-bar { flex: 0 0 180px; height: 6px; border-radius: 999px; background: var(--bg-tertiary); overflow: hidden; }
.prego-progress-bar span { display: block; height: 100%; background: var(--accent-blue); }
.prego-empty { padding: 26px; border: 1px dashed var(--border-secondary); border-radius: var(--radius-md); color: var(--text-secondary); text-align: center; }
.prego-empty p { margin: 6px 0 0; font-size: 0.78rem; line-height: 1.55; }

/* ── KYC directory: toolbar, header filters and column chooser ──────────────
   Filters live in the table header rather than in a bar above it, so the
   control sits on the column it narrows and the header row stays the single
   place a reader looks to understand what the table is showing. */
.kyc-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.kyc-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 340px;
    max-width: 46vw;
}

.kyc-search-icon {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
    font-size: 1rem;
    pointer-events: none;
}

.kyc-search input {
    width: 100%;
    height: 38px;
    padding: 0 34px 0 32px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.86rem;
}

.kyc-search input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px var(--accent-blue-glow);
}

.kyc-search-clear {
    position: absolute;
    right: 8px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    padding: 4px;
}

.kyc-search-clear:hover { color: var(--text-primary); }

.kyc-toolbar-button {
    height: 38px;
}

/* Active filters as removable chips: what is narrowing the table is readable
   without opening each column menu. */
.kyc-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.kyc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--accent-blue);
    border-radius: 999px;
    background: var(--accent-blue-glow);
    color: var(--text-primary);
    font-size: 0.76rem;
    cursor: pointer;
}

.kyc-chip:hover { background: rgba(var(--accent-primary-rgb), 0.2); }
.kyc-chip-label { color: var(--text-muted); }
.kyc-chip-value { font-weight: 650; }

.kyc-chip-clear {
    border-style: dashed;
    border-color: var(--border-color);
    background: transparent;
    color: var(--text-muted);
}

/* Column headers carry their own filter control. */
.kyc-table th.kyc-th { padding: 0; }

.kyc-th-button {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

.kyc-th-button:hover { background: var(--bg-tertiary); }

.kyc-funnel { color: var(--text-muted); font-size: 0.7rem; }

.kyc-table th.kyc-th.is-filtered { box-shadow: inset 0 -2px 0 var(--accent-blue); }
.kyc-table th.kyc-th.is-filtered .kyc-funnel { color: var(--accent-blue); }

.kyc-name { display: flex; align-items: center; gap: 8px; }

.kyc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 42px 16px;
    color: var(--text-muted);
}

/* One floating panel serves every menu, positioned under whatever opened it. */
.kyc-menu {
    position: absolute;
    z-index: 1200;
    min-width: 232px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
}

.kyc-menu-title {
    padding: 8px 10px 6px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.kyc-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
}

.kyc-menu-item:hover { background: var(--bg-tertiary); }
.kyc-menu-item.is-selected { color: var(--accent-blue); font-weight: 650; }
.kyc-menu-check input { accent-color: var(--accent-blue); }
.kyc-menu-loading { padding: 10px; font-size: 0.8rem; color: var(--text-muted); }

.kyc-menu-reset {
    margin-top: 4px;
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 8px 8px;
    color: var(--text-muted);
}

/* Multi-select menus: a header can carry several values, so the menu shows a
   count and a clear link and stays open while values are picked. */
.kyc-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px 6px;
}

.kyc-menu-head .kyc-menu-title { padding: 0; }

.kyc-menu-link {
    border: 0;
    background: transparent;
    color: var(--accent-blue);
    font-size: 0.74rem;
    cursor: pointer;
    padding: 0;
}

.kyc-menu-link[disabled] { color: var(--text-muted); cursor: default; }

.kyc-menu-foot {
    margin-top: 4px;
    padding: 8px 10px 4px;
    border-top: 1px solid var(--border-color);
    font-size: 0.72rem;
    color: var(--text-muted);
}

.kyc-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent-blue);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
}

.kyc-empty-reason {
    max-width: 46ch;
    text-align: center;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

/* Settings: reference currencies are available but not in the way. */
.admin-fx-more { margin-top: 14px; }

.admin-fx-more > summary {
    cursor: pointer;
    padding: 8px 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.admin-fx-more > summary:hover { color: var(--text-primary); }

/* ─── Alert risk panel ─────────────────────────────────────────────── */
/* Replaces the dial. The score is shown on the banded scale it is judged
   against, split into the floor a match earns and the evidence above it. */
.risk-panel {
    margin-bottom: 20px;
    padding: 16px 16px 14px;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
}

.risk-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.risk-panel-score {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.risk-panel-value {
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.risk-panel-caption {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.risk-panel-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.risk-scale-track {
    position: relative;
    height: 12px;
    border-radius: 999px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    overflow: visible;
}

.risk-scale-track.is-unscored {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 6px 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.risk-scale-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}

.risk-scale-fill.is-base {
    border-radius: 999px 0 0 999px;
    background: var(--accent-blue, var(--accent-primary-bright));
    opacity: 0.45;
}

.risk-scale-fill.is-earned {
    background: linear-gradient(90deg, var(--accent-blue, var(--accent-primary-bright)), var(--accent-amber, #f59e0b));
}

.risk-scale-tick {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 0;
}

.risk-scale-tick-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border-primary);
}

.risk-scale-tick-label {
    position: absolute;
    top: 100%;
    transform: translateX(-50%);
    margin-top: 4px;
    font-size: 0.66rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.risk-scale-marker {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: var(--text-primary);
    border: 2px solid var(--bg-tertiary);
    box-shadow: 0 0 0 1px var(--border-primary);
}

.risk-scale-legend {
    display: flex;
    justify-content: space-between;
    margin-top: 18px;
    font-size: 0.66rem;
    color: var(--text-muted);
}

.risk-split {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.risk-split-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.risk-split-item strong {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.risk-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}

.risk-swatch.is-base {
    background: var(--accent-blue, var(--accent-primary-bright));
    opacity: 0.45;
}

.risk-swatch.is-earned {
    background: linear-gradient(90deg, var(--accent-blue, var(--accent-primary-bright)), var(--accent-amber, #f59e0b));
}

.risk-evidence {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-primary);
}

.risk-evidence-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.risk-evidence-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.risk-evidence-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(90px, 140px);
    grid-template-areas:
        'head meter'
        'detail strength';
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
}

.risk-evidence-head {
    grid-area: head;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.risk-evidence-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.risk-evidence-tag {
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--text-muted);
    border: 1px solid var(--border-primary);
    white-space: nowrap;
}

.risk-evidence-detail {
    grid-area: detail;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.risk-evidence-detail strong {
    color: var(--text-primary);
}

.risk-evidence-arrow {
    margin: 0 4px;
    color: var(--text-muted);
}

.risk-evidence-multiple {
    margin-left: 6px;
    font-size: 0.74rem;
    color: var(--text-muted);
}

.risk-evidence-meter {
    grid-area: meter;
    height: 6px;
    border-radius: 999px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    overflow: hidden;
}

.risk-evidence-meter-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-blue, var(--accent-primary-bright)), var(--accent-amber, #f59e0b));
}

.risk-evidence-strength {
    grid-area: strength;
    font-size: 0.72rem;
    color: var(--text-muted);
    text-align: right;
}

/* A below-the-line alert is not the rule's own; said before the score is read. */
.btl-alert-notice {
    display: grid;
    gap: 4px;
    margin: 0 0 18px;
    padding: 10px 12px;
    border: 1px solid rgba(217, 119, 6, 0.35);
    border-left: 3px solid var(--accent-amber, #d97706);
    border-radius: 8px;
    background: rgba(217, 119, 6, 0.07);
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.btl-alert-notice strong {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-amber, #d97706);
}

/* What the AI assessment read, inside its reading: each pack as a table, then the
   instructions and the message exactly as sent. */
.ai-shown {
    margin-top: 9px;
    font-size: 0.76rem;
    color: var(--text-secondary);
}

.ai-shown > summary,
.ai-shown-exact > summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--text-primary);
}

.ai-shown-body {
    display: grid;
    gap: 10px;
    margin-top: 8px;
}

.ai-shown-meta,
.ai-shown-note,
.ai-shown-guidance {
    margin: 0;
    line-height: 1.5;
}

/* A policy is paragraphs and lists; shown as one run-on line it is not what was sent. */
.ai-shown-guidance {
    white-space: pre-wrap;
    max-height: 320px;
    overflow: auto;
}

.ai-shown-note,
.ai-shown-empty {
    color: var(--text-muted);
}

.ai-shown-section h5 {
    margin: 0 0 4px;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.ai-shown-section h5 span {
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.ai-shown-scroll {
    max-width: 100%;
    overflow-x: auto;
}

.ai-shown-fields,
.ai-shown-rows {
    width: 100%;
    border-collapse: collapse;
}

.ai-shown-fields th,
.ai-shown-fields td,
.ai-shown-rows th,
.ai-shown-rows td {
    padding: 2px 8px 2px 0;
    text-align: left;
    vertical-align: top;
}

.ai-shown-fields th {
    width: 36%;
    font-weight: 600;
}

.ai-shown-rows th {
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 1px solid var(--border-primary);
}

.ai-shown-exact h6 {
    margin: 8px 0 4px;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.ai-shown-exact pre {
    max-height: 320px;
    margin: 0;
    padding: 8px 10px;
    overflow: auto;
    border-radius: 6px;
    background: var(--bg-tertiary);
    font-size: 0.72rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.risk-evidence-missing {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--border-primary);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-muted);
}

@media (max-width: 560px) {
    .risk-evidence-row {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: 'head' 'detail' 'meter' 'strength';
    }

    .risk-evidence-strength {
        text-align: left;
    }
}

/* ─── Risk scoring policy (Settings) ───────────────────────────────── */
/* A field that has drifted from the shipped default says so under itself, without
   competing with the value it annotates. */
.risk-policy-default {
    flex: 1 0 100%;
    order: 3;
    margin: -4px 0 4px;
    font-size: 0.72rem;
    color: var(--text-muted);
    text-align: right;
}

.risk-policy-default[hidden] {
    display: none;
}

/* What the floors beside it would do to the alerts the lab is holding. */
.risk-policy-impact-list {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.risk-policy-impact-list li {
    display: grid;
    grid-template-columns: 1fr auto 42px;
    align-items: baseline;
    gap: 8px;
    padding: 3px 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-primary);
}

.risk-policy-impact-list li:last-child {
    border-bottom: none;
}

.risk-policy-impact-list li span:nth-child(2) {
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.risk-policy-impact-list small {
    color: var(--text-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Both navigation rows share the viewport centre and tab width. */
@media (min-width: 901px) {
    .app-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }
    .app-nav { grid-column: 2; }
    .app-header-status { justify-self: end; }
    .page-subnav .tabs { grid-auto-columns: 150px; }
}

/* Three-tone navigation hierarchy. */
.app-header { background: var(--nav-tone-dark); }
.app-header .nav-item a { background: var(--nav-tone-middle); }
.app-header .nav-item a:hover,
.app-header .nav-item.active a { background: var(--nav-tone-light); }
.page-subnav { background: var(--nav-tone-light); }
.page-subnav .tab-btn,
.page-subnav .build-step button,
.page-subnav .build-step button:disabled { background: var(--nav-tone-light); }
.page-subnav .tab-btn:hover,
.page-subnav .tab-btn.active,
.page-subnav .build-step button:hover:not(:disabled),
.page-subnav .build-step.is-current button,
.page-subnav .build-step.is-current button:hover:not(:disabled) {
    background: var(--nav-tone-light);
    color: #fff;
}
.page-subnav .tab-btn.active,
.page-subnav .build-step.is-current button { box-shadow: inset 0 -2px 0 rgba(255,255,255,.65); }

/* Reached/completed states must retain the navigation palette. */
.page-subnav .build-step.is-reached button,
.page-subnav .build-step.is-done button { color: rgba(255, 255, 255, .8); }
.page-subnav .build-step.is-current button { color: #fff; }
.page-subnav .build-step.is-state-stale .build-step-label { color: inherit; }

/* The primary navigation already names the current section. */
.page-subnav-title { display: none; }

/* Full-width colour bands include the reserved document scrollbar gutter. */
.app-header,
.page-subnav {
    width: 100vw;
    box-sizing: border-box;
}

/* The document scrolls without a native reserved track beside the colour bands.
   Studio's internal scrolling panels retain their visible scrollbars. */
html { scrollbar-width: none; }
html::-webkit-scrollbar { width: 0; height: 0; }

.document-scroll-thumb {
    position: fixed;
    right: 2px;
    width: 7px;
    border-radius: 8px;
    background: rgba(100, 116, 139, .55);
    z-index: 250;
    opacity: 0;
    transition: opacity .25s;
    cursor: grab;
    touch-action: none;
}
.document-scroll-thumb.is-visible,
.document-scroll-thumb:hover { opacity: 1; }
.document-scroll-thumb:active { cursor: grabbing; }
.document-scroll-thumb[hidden] { display: none; }

/* Align the disclosure indicator with the occurrence title. */
[data-occurrence-card] > summary {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    list-style: none;
}
[data-occurrence-card] > summary::-webkit-details-marker { display: none; }
[data-occurrence-card] > summary::before {
    content: '▸';
    flex: none;
    line-height: 1.4;
    color: var(--text-primary);
}
[data-occurrence-card][open] > summary::before { content: '▾'; }
[data-occurrence-card] > summary > div { flex: 1; min-width: 0; }

#customer-profile-modal .panel-header .btn { height: 32px; display: inline-flex; align-items: center; }

/* Customer composition: percentages stay readable while the sliders move. */
.pop-composition .pop-slider-card {
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
}
.pop-slider-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-bottom: 16px;
}
.pop-slider-heading label { margin: 0; }
.pop-slider-value {
    color: var(--accent-primary, #0b5268);
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.pop-range {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    height: 8px;
    margin: 10px 0 12px;
    border-radius: 999px;
    cursor: pointer;
    background: linear-gradient(to right, #0b6076 0%, #0b6076 var(--pop-slider-position), var(--border-color) var(--pop-slider-position), var(--border-color) 100%);
}
.pop-range-mix {
    background: linear-gradient(to right, #0b6076 0%, #0b6076 var(--pop-slider-position), #8b73bd var(--pop-slider-position), #8b73bd 100%);
}
.pop-range::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 3px solid #0b6076;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px #0002;
}
.pop-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 3px solid #0b6076;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px #0002;
}
.pop-range:focus-visible { outline: 3px solid #69b7cb; outline-offset: 5px; }
.pop-slider-scale {
    display: flex;
    justify-content: space-between;
    color: var(--text-muted);
    font-size: 0.66rem;
    margin-bottom: 12px;
}

/* ─── Settings ───────────────────────────────────────────────────────────
   One column on every tab, styled below; the strictness classes are shared with Model
   Studio's Configure panel (model-builder.css). */
.settings-card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 12px 20px;
    border-top: 1px solid var(--border-primary);
    background: var(--bg-primary);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.settings-rows.is-padded { padding: 20px; }
.settings-rows.is-padded > .settings-card-footer { margin: 20px -20px -20px; }
/* One button size in every footer. */
.settings-card-footer .btn { height: var(--control-sm); padding: 0 12px; font-size: var(--fs-small); }
.settings-fx-add { margin-top: 14px; flex-wrap: wrap; }
.settings-number { width: 90px; text-align: right; font-variant-numeric: tabular-nums; }
.settings-row .risk-policy-default { flex: 0 1 auto; order: 0; margin: 0; text-align: left; }

/* Beneath a group's card, what its values would do and what they mean: read, not set. */
.settings-info {
    margin-top: 12px;
    padding: 16px 20px;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    background: var(--bg-primary);
}
.settings-info-title { margin: 0 0 4px; font-size: var(--fs-body); font-weight: 650; color: var(--text-primary); }
.settings-info .strictness-note:first-of-type { margin-top: 0; }
.settings-info .strictness-level-list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 20px; margin-top: 12px; }
.settings-group-foot { margin: 10px 0 0; font-size: var(--fs-small); line-height: 1.5; color: var(--text-muted); }

/* Every tab, laid out as settings pages usually are: one column of capped width,
   a heading and a line above each group, and in each group's card one row per setting, its
   label and a short note on the left and its value or control beside them (or, for an action,
   its explanation on the left and its button at the right edge). Every value starts at one x
   and every action button ends at one x, whatever a row holds. What can be changed comes first. */
.settings-stack { max-width: 960px; margin: 0 auto; }
.settings-group { margin-top: 28px; }
.settings-group-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 16px;
    margin: 0 0 10px;
}
.settings-group-head > :not(.settings-group-title, .settings-group-tag) { grid-column: 1 / -1; }
.settings-group-tag { font-size: var(--fs-small); color: var(--text-muted); }
.settings-group-title {
    margin: 0;
    font-size: var(--fs-subheading);
    font-weight: 650;
    letter-spacing: -0.012em;
    color: var(--text-primary);
}
.settings-group-blurb { margin: 3px 0 0; max-width: 760px; line-height: 1.5; font-size: var(--fs-body); color: var(--text-secondary); }
.settings-rows {
    margin: 0;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}
.settings-row {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 4px 24px;
    align-items: baseline;
    padding: 12px 20px;
    border-top: 1px solid var(--border-primary);
}
.settings-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    padding: 14px 20px;
    border-top: 1px solid var(--border-primary);
}
.settings-rows > :first-child { border-top: none; }
.settings-row dt { font-size: var(--fs-body); font-weight: 600; color: var(--text-primary); }
.settings-row-note {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-small);
    font-weight: 400;
    line-height: 1.45;
    color: var(--text-muted);
}
.settings-row-note.is-good { color: #047857; }
.settings-row-note.is-warning { color: #b45309; }
.settings-row dd {
    margin: 0;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    font-size: var(--fs-body);
    color: var(--text-primary);
    overflow-wrap: anywhere;
}
.settings-row dd.is-good { color: #047857; }
.settings-row dd.is-warning { color: #b45309; }
.settings-row-meta { font-size: var(--fs-small); color: var(--text-muted); }
.settings-row-meta.is-below { flex-basis: 100%; margin-top: -4px; }
.settings-action b { display: block; font-size: var(--fs-body); font-weight: 600; color: var(--text-primary); }
.settings-action span {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-small);
    line-height: 1.45;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}
.settings-action > .btn-danger { min-width: 128px; justify-content: center; }
.settings-action-buttons { display: flex; gap: 6px; white-space: nowrap; }
.settings-backup-delete { color: var(--accent-red); }
.settings-rows-empty { margin: 0; padding: 14px 20px; font-size: var(--fs-body); color: var(--text-muted); }
.settings-ai-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.settings-ai-switch input {
    appearance: none; width: 34px; height: 20px; margin: 0; border-radius: 999px;
    background: var(--border-primary); position: relative; cursor: pointer; transition: background .15s;
}
.settings-ai-switch input::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .25); transition: left .15s;
}
.settings-ai-switch input:checked { background: #047857; }
.settings-ai-switch input:checked::after { left: 16px; }
.settings-ai-switch input:disabled { opacity: .5; cursor: not-allowed; }
.settings-ai-test { margin-left: 10px; vertical-align: middle; }
.settings-ai-timeout { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.settings-ai-timeout .input { width: 84px; height: var(--control-sm); padding: 4px 8px; font-size: var(--fs-body); }
.settings-row .settings-demo-password { width: 180px; height: var(--control-sm); padding: 4px 8px; font-size: var(--fs-body); }
/* Demo mode (backend/demo_mode.py): what it refuses stays on screen, greyed out and inert
   (App.applyDemoLock), with a sentence saying why on the larger sections. */
body.demo-mode .demo-lock:not([data-demo-note]),
body.demo-mode .demo-lock > :not(.demo-note) { opacity: .5; }
.demo-note {
    margin: 0 0 12px; padding: 8px 12px; border-radius: var(--radius-md);
    font-size: var(--fs-small); font-weight: 600; color: #92400e;
    background: #fef3c7; border: 1px solid #fcd34d;
}
/* Demo mode, in the header on every page: what is limited and how many AI requests are left. */
/* ─── Sign-in (js/auth.js) ───────────────────────────────────────────
   Shown instead of the app to a visitor the server has no session for: the
   header and the page stay out of sight, because nothing on them can load yet. */
body.is-signed-out .app-header,
body.is-signed-out .main-content { display: none; }

.signin-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
    background: var(--bg-primary);
}

.signin-card {
    display: flex;
    flex-direction: column;
    width: min(360px, 100%);
    padding: 32px;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
}

.signin-title {
    margin: 0;
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.014em;
}

.signin-lede {
    margin: 4px 0 24px;
    color: var(--text-tertiary);
}

.signin-card .input { margin-bottom: 16px; }

.signin-error {
    min-height: 18px;
    margin: -4px 0 12px;
    color: var(--accent-red);
    font-size: var(--fs-small);
}

.signin-submit { width: 100%; justify-content: center; }

.demo-badge {
    padding: 3px 10px; border-radius: 999px; font-size: var(--fs-small); font-weight: 600;
    color: #92400e; background: #fef3c7; border: 1px solid #fcd34d; white-space: nowrap;
}

/* Settings had drifted onto sizes of its own — 10 to 12px, in rem steps off the
   app's scale — so it read smaller and fainter than every other page, which run at
   13px. It is set on the scale here, scoped to the page because the strictness
   classes are shared with Model Studio's denser Configure panel. Running text is
   body size, the line beneath something is a step down, and table headers keep the
   micro caps every other table uses. */
.settings-page .text-sm,
.settings-page .admin-panel-note,
.settings-page .admin-fx-more > summary,
.settings-page .strictness-lede,
.settings-page .strictness-meaning,
.settings-page .strictness-note,
.settings-page .strictness-level-item,
.settings-page .strictness-grid .strictness-row-label,
.settings-page .strictness-number,
.settings-page .risk-policy-impact-list li,
.settings-page td { font-size: var(--fs-body); }
.settings-page small,
.settings-page .strictness-grid .strictness-row-label small,
.settings-page .strictness-col-head small,
.settings-page .risk-policy-impact-list small,
.settings-page .build-param-label,
.settings-page .strictness-level-code { font-size: var(--fs-small); }
.settings-page .strictness-col-head { font-size: var(--fs-body); font-weight: 650; }
.settings-page .admin-fx-inbook { font-size: var(--fs-micro); }
.settings-page code { font-size: var(--fs-small); }

@media (max-width: 760px) {
    .settings-row, .settings-action { grid-template-columns: minmax(0, 1fr); }
}

/* The Population Lab's warning about a job a previous server never finished (R2.20). */
.lab-unfinished-job { margin: 0 0 16px; padding: 12px 14px; border: 1px solid #fde68a; border-left: 4px solid #f59e0b; border-radius: 8px; background: #fffbeb; color: #92400e; font-size: 13px; line-height: 1.5; }
.lab-unfinished-job p { margin: 0 0 10px; overflow-wrap: anywhere; }