/* ============================================================================
   PathoMap Dashboard — brand stylesheet
   ----------------------------------------------------------------------------
   Implements docs/brand-guidelines.md. Values mirror assets/design-tokens.css;
   when the two disagree, the guideline wins and this file is the bug.

   Fonts are self-hosted in assets/fonts/ so the dashboard renders correctly
   offline. Nothing here blocks on a CDN.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts --- */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('fonts/PlusJakartaSans-Variable.ttf') format('truetype-variations'),
         url('fonts/PlusJakartaSans-Variable.ttf') format('truetype');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('fonts/JetBrainsMono-Variable.ttf') format('truetype-variations'),
         url('fonts/JetBrainsMono-Variable.ttf') format('truetype');
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}

/* ---------------------------------------------------------------- tokens -- */
:root {
    /* brand */
    --pm-navy: #11223E;
    --pm-ink: #0B1528;
    --pm-slate: #254B7C;
    --pm-teal: #166D74;
    --pm-teal-bright: #1F9A9C;
    --pm-teal-deep: #0F5257;
    --pm-orange: #EF6D2F;
    --pm-coral: #E44D2E;
    --pm-amber: #F79B2E;

    /* surfaces */
    --pm-surface-page: #F8FAFC;
    --pm-surface-raised: #FFFFFF;
    --pm-surface-sunken: #F1F5F9;
    --pm-surface-inverse: #11223E;
    --pm-surface-accent-soft: #FDECE7;

    /* text */
    --pm-text-primary: #11223E;
    --pm-text-body: #334155;
    --pm-text-muted: #64748B;
    --pm-text-subtle: #94A3B8;
    --pm-text-inverse: #F8FAFC;
    --pm-text-link: #166D74;
    --pm-text-link-hover: #0F5257;

    /* lines */
    --pm-border-subtle: #E2E8F0;
    --pm-border-default: #CBD5E1;
    --pm-border-strong: #94A3B8;

    /* clinical status (never the brand accent) */
    --pm-status-pathogenic-fg: #A33218;
    --pm-status-pathogenic-bg: #FDECE7;
    --pm-status-pathogenic-border: #F0C4B6;
    --pm-status-uncertain-fg: #7A5000;
    --pm-status-uncertain-bg: #FDF3E0;
    --pm-status-uncertain-border: #EBCF9B;
    --pm-status-benign-fg: #1F6A4A;
    --pm-status-benign-bg: #E8F3EE;
    --pm-status-benign-border: #B7D6C6;
    --pm-status-unknown-fg: #475569;
    --pm-status-unknown-bg: #F1F5F9;
    --pm-status-unknown-border: #D6DEE8;
    --pm-status-info-fg: #1B4F72;
    --pm-status-info-bg: #EAF2F6;
    --pm-status-info-border: #C3DCEA;

    /* Bootstrap overrides */
    --bs-primary: #166D74;
    --bs-body-bg: #F8FAFC;
    --bs-body-color: #334155;
    --bs-border-color: #E2E8F0;

    /* type */
    --pm-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --pm-font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Consolas, monospace;

    /* geometry */
    --pm-radius-sm: 6px;
    --pm-radius-md: 10px;
    --pm-radius-lg: 14px;
    --pm-radius-xl: 18px;
    --pm-shadow-sm: 0 1px 2px rgba(17, 34, 62, 0.06);
    --pm-shadow-md: 0 4px 20px rgba(17, 34, 62, 0.06);
    --pm-shadow-lg: 0 12px 40px rgba(17, 34, 62, 0.10);

    /* legacy aliases kept for any inline style that still refers to them */
    --primary-color: #166D74;
    --success-color: #1F6A4A;
    --danger-color: #A33218;
    --warning-color: #7A5000;
    --info-color: #166D74;
    --light-bg: #FFFFFF;
    --card-bg: #FFFFFF;
    --border-color: #E2E8F0;
    --text-primary: #11223E;
    --text-secondary: #64748B;
    --hover-bg: #F8FAFC;
    --accent-blue: #166D74;
    --accent-green: #1F6A4A;
    --accent-red: #A33218;
}

/* ------------------------------------------------------------------ base -- */
body {
    font-family: var(--pm-font-sans) !important;
    background: var(--pm-surface-page) !important;
    color: var(--pm-text-body) !important;
    font-size: 15px;
    line-height: 1.6;
    overflow-x: hidden;
    padding-bottom: 46px;          /* clearance for the fixed bottom bar */
    -webkit-font-smoothing: antialiased;
}

.container-fluid {
    background-color: var(--pm-surface-page);
    max-width: 1240px;
    padding-left: 28px;
    padding-right: 28px;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--pm-text-primary);
    letter-spacing: -0.02em;
    font-weight: 700 !important;
}

h1 { font-size: 32px; font-weight: 800 !important; line-height: 1.15; }
h2 { font-size: 24px; letter-spacing: -0.015em; }
h3 { font-size: 19px; letter-spacing: -0.01em; }
h4 { font-size: 17px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }

p, li, .lead { color: var(--pm-text-body); }
.lead { font-size: 17px; font-weight: 400; }

label {
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0;
    margin-bottom: 6px !important;
    display: block;
    color: var(--pm-text-primary);
}

hr {
    border-color: var(--pm-border-subtle) !important;
    opacity: 1 !important;
    margin: 24px 0 !important;
}

a {
    color: var(--pm-text-link);
    text-decoration: none;
}

a:hover {
    color: var(--pm-text-link-hover);
    text-decoration: underline;
}

.text-muted { color: var(--pm-text-muted) !important; }
.text-primary { color: var(--pm-text-link) !important; }
.text-success { color: var(--pm-status-benign-fg) !important; }
.text-danger { color: var(--pm-status-pathogenic-fg) !important; }
.text-warning { color: var(--pm-status-uncertain-fg) !important; }
.text-secondary { color: var(--pm-text-muted) !important; }

.text-gradient { color: var(--pm-text-link); }

/* Focus is a visible teal ring on every surface (WCAG 2.4.7). */
:focus-visible {
    outline: 2px solid var(--pm-teal-bright);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- header -- */
/* The lockup appears once, at 32–40 px, top-left. The page title states the
   task; the logo already carries the name. */
.pm-brandbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--pm-border-subtle);
}

.pm-brandbar__logo {
    height: 36px;
    width: auto;
    display: block;
}

.pm-brandbar__descriptor {
    font-family: var(--pm-font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pm-text-muted);
    border-left: 1px solid var(--pm-border-subtle);
    padding-left: 16px;
    margin-left: 2px;
    line-height: 1.4;
}

.pm-brandbar__spacer { flex: 1; }

.pm-brandbar__meta {
    font-family: var(--pm-font-mono);
    font-size: 11px;
    color: var(--pm-text-muted);
    background: var(--pm-surface-sunken);
    border: 1px solid var(--pm-border-subtle);
    border-radius: 999px;
    padding: 4px 10px;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .pm-brandbar__descriptor { display: none; }
}

/* The old centred hero block, kept for the page title row. */
.pm-pagetitle {
    margin: 0 0 22px;
    text-align: left;
}

.pm-pagetitle h1 {
    margin: 0 0 4px;
    font-size: 30px;
    letter-spacing: -0.025em;
}

.pm-pagetitle p {
    margin: 0;
    font-size: 14px;
    color: var(--pm-text-muted);
}

/* ----------------------------------------------------------------- cards -- */
.card {
    background: var(--pm-surface-raised) !important;
    border: 1px solid var(--pm-border-subtle) !important;
    border-radius: var(--pm-radius-lg) !important;
    box-shadow: var(--pm-shadow-sm) !important;
    transition: box-shadow 180ms cubic-bezier(0.2, 0, 0, 1);
}

.card:hover {
    transform: none;
    box-shadow: var(--pm-shadow-md) !important;
}

.card-body {
    padding: 20px !important;
}

.card-header {
    background: var(--pm-surface-raised) !important;
    border-bottom: 1px solid var(--pm-border-subtle) !important;
    border-radius: var(--pm-radius-lg) var(--pm-radius-lg) 0 0 !important;
    padding: 14px 20px !important;
    font-weight: 700;
}

.card-header h5,
.card-header h6 {
    margin-bottom: 0;
    font-size: 15px;
    font-weight: 700 !important;
}

.shadow-sm { box-shadow: var(--pm-shadow-sm) !important; }

/* Border helpers keep Bootstrap's names but use brand values. */
.border-primary { border-color: var(--pm-teal) !important; border-width: 1px !important; }
.border-success { border-color: var(--pm-status-benign-border) !important; border-width: 1px !important; }
.border-danger  { border-color: var(--pm-status-pathogenic-border) !important; border-width: 1px !important; }
.border-warning { border-color: var(--pm-status-uncertain-border) !important; border-width: 1px !important; }

.bg-white { background-color: var(--pm-surface-raised) !important; }
.bg-light  { background-color: var(--pm-surface-sunken) !important; }

/* --------------------------------------------------------------- buttons -- */
/* Bootstrap's semantic names do not match the brand's. Mapping:
     .btn-primary, #btn-start  → the single teal CTA on a view
     .btn-success              → navy secondary (a confirming action)
     .btn-secondary            → navy outline
     .btn-danger               → pathogenic outline
     .btn-warning              → uncertain fill
     .btn-link                 → teal text
   One teal CTA per view. Orange is the logo's colour, never a button's, so an
   action can never be mistaken for brand decoration or for a data flag. */
.btn {
    border-radius: var(--pm-radius-md) !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    border: 1px solid transparent !important;
    transition: background-color 120ms cubic-bezier(0.2, 0, 0, 1),
                border-color 120ms cubic-bezier(0.2, 0, 0, 1),
                color 120ms cubic-bezier(0.2, 0, 0, 1);
}

.btn:focus-visible { box-shadow: none !important; }

.btn-primary,
#btn-start {
    background: var(--pm-teal) !important;
    border-color: var(--pm-teal) !important;
    color: var(--pm-text-inverse) !important;
}

.btn-primary:hover,
.btn-primary:focus,
#btn-start:hover,
#btn-start:focus {
    background: var(--pm-teal-deep) !important;
    border-color: var(--pm-teal-deep) !important;
    color: var(--pm-text-inverse) !important;
    transform: none;
}

.btn-success {
    background: var(--pm-navy) !important;
    border-color: var(--pm-navy) !important;
    color: var(--pm-text-inverse) !important;
}

.btn-success:hover,
.btn-success:focus {
    background: var(--pm-slate) !important;
    border-color: var(--pm-slate) !important;
    color: var(--pm-text-inverse) !important;
    transform: none;
}

.btn-secondary {
    background: transparent !important;
    border-color: var(--pm-border-default) !important;
    color: var(--pm-text-primary) !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background: var(--pm-surface-sunken) !important;
    border-color: var(--pm-border-strong) !important;
    color: var(--pm-text-primary) !important;
    transform: none;
}

.btn-danger {
    background: transparent !important;
    border-color: var(--pm-status-pathogenic-border) !important;
    color: var(--pm-status-pathogenic-fg) !important;
}

.btn-danger:hover,
.btn-danger:focus {
    background: var(--pm-status-pathogenic-bg) !important;
    border-color: var(--pm-status-pathogenic-fg) !important;
    color: var(--pm-status-pathogenic-fg) !important;
    transform: none;
}

.btn-warning {
    background: var(--pm-status-uncertain-bg) !important;
    border-color: var(--pm-status-uncertain-border) !important;
    color: var(--pm-status-uncertain-fg) !important;
}

.btn-warning:hover,
.btn-warning:focus {
    background: var(--pm-status-uncertain-border) !important;
    color: var(--pm-status-uncertain-fg) !important;
    transform: none;
}

.btn-link {
    color: var(--pm-text-link) !important;
    text-decoration: none !important;
}

.btn-link:hover {
    color: var(--pm-text-link-hover) !important;
    text-decoration: underline !important;
}

.btn:disabled,
.btn.disabled,
.btn-primary:disabled,
#btn-start:disabled {
    background: var(--pm-surface-sunken) !important;
    border-color: var(--pm-border-subtle) !important;
    color: var(--pm-text-subtle) !important;
    opacity: 1 !important;
    cursor: not-allowed;
    box-shadow: none !important;
}

/* Outline variants are the most common button in the results tabs. */
.btn-outline-primary {
    background: transparent !important;
    border-color: var(--pm-teal) !important;
    color: var(--pm-teal) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: rgba(22, 109, 116, 0.08) !important;
    border-color: var(--pm-teal-deep) !important;
    color: var(--pm-teal-deep) !important;
}

.btn-outline-secondary {
    background: transparent !important;
    border-color: var(--pm-border-default) !important;
    color: var(--pm-text-primary) !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background: var(--pm-surface-sunken) !important;
    border-color: var(--pm-border-strong) !important;
    color: var(--pm-text-primary) !important;
}

.btn-outline-danger {
    background: transparent !important;
    border-color: var(--pm-status-pathogenic-border) !important;
    color: var(--pm-status-pathogenic-fg) !important;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background: var(--pm-status-pathogenic-bg) !important;
    border-color: var(--pm-status-pathogenic-fg) !important;
    color: var(--pm-status-pathogenic-fg) !important;
}

.btn-outline-success {
    background: transparent !important;
    border-color: var(--pm-status-benign-border) !important;
    color: var(--pm-status-benign-fg) !important;
}

.btn-outline-success:hover,
.btn-outline-success:focus {
    background: var(--pm-status-benign-bg) !important;
    color: var(--pm-status-benign-fg) !important;
}

.btn-outline-info {
    background: transparent !important;
    border-color: var(--pm-status-info-border) !important;
    color: var(--pm-status-info-fg) !important;
}

.btn-outline-info:hover,
.btn-outline-info:focus {
    background: var(--pm-status-info-bg) !important;
    color: var(--pm-status-info-fg) !important;
}

.btn-outline-warning {
    background: transparent !important;
    border-color: var(--pm-status-uncertain-border) !important;
    color: var(--pm-status-uncertain-fg) !important;
}

.btn-sm { padding: 6px 14px !important; font-size: 13px !important; }
.btn-lg { padding: 12px 26px !important; font-size: 15px !important; }

/* Drop the hover lift: elevation is for layering, not emphasis. */
.btn:hover { transform: none; box-shadow: none; }

/* ---------------------------------------------------------------- inputs -- */
.form-control,
.form-select,
.Select-control {
    background-color: var(--pm-surface-raised) !important;
    border: 1px solid var(--pm-border-default) !important;
    border-radius: var(--pm-radius-sm) !important;
    color: var(--pm-text-primary) !important;
    font-family: var(--pm-font-sans) !important;
    font-size: 14px !important;
    padding: 9px 12px !important;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.form-control:focus,
.form-select:focus,
.Select-control:focus,
.Select-control.is-focused {
    border-color: var(--pm-teal-bright) !important;
    box-shadow: 0 0 0 3px rgba(31, 154, 156, 0.18) !important;
    outline: none !important;
}

.form-control::placeholder { color: var(--pm-text-subtle) !important; }

.Select-menu-outer {
    background-color: var(--pm-surface-raised) !important;
    border: 1px solid var(--pm-border-default) !important;
    border-radius: var(--pm-radius-sm) !important;
    box-shadow: var(--pm-shadow-lg);
}

.Select-option {
    background-color: var(--pm-surface-raised) !important;
    color: var(--pm-text-body) !important;
    padding: 10px 12px !important;
}

.Select-option:hover { background: var(--pm-surface-sunken) !important; color: var(--pm-text-primary) !important; }
.Select-option.is-selected { background: var(--pm-teal) !important; color: #fff !important; }
.Select-value-label { color: var(--pm-text-primary) !important; }
.Select-placeholder { color: var(--pm-text-subtle) !important; }

/* ----------------------------------------------------------------- tabs -- */
.nav-tabs {
    border-bottom: 1px solid var(--pm-border-subtle);
    gap: 4px;
}

.nav-tabs .nav-link {
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    color: var(--pm-text-muted) !important;
    font-weight: 600;
    font-size: 13.5px;
    padding: 9px 14px;
    background: transparent !important;
}

.nav-tabs .nav-link:hover {
    color: var(--pm-text-primary) !important;
    border-bottom-color: var(--pm-border-default) !important;
}

.nav-tabs .nav-link.active {
    color: var(--pm-teal-deep) !important;
    border-bottom-color: var(--pm-teal) !important;
    background: transparent !important;
}

.tab-content { padding-top: 16px; }

/* --------------------------------------------------------------- tables -- */
.dash-table-container {
    border: 1px solid var(--pm-border-subtle) !important;
    border-radius: var(--pm-radius-md) !important;
    overflow: hidden;
    box-shadow: none !important;
}

.dash-spreadsheet {
    font-family: var(--pm-font-mono) !important;
    font-size: 12.5px !important;
}

.dash-spreadsheet-container { max-height: 600px; overflow-y: auto; }

/* Header cells: mono, lowercase labels, white on brand navy. */
.dash-spreadsheet .dash-header {
    font-family: var(--pm-font-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.03em !important;
    text-transform: none;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td {
    cursor: pointer !important;
    position: relative !important;
    border-bottom: 1px solid var(--pm-border-subtle) !important;
}

/* Hover is a tint, never a hue change. */
.dash-spreadsheet td:hover {
    background-color: rgba(31, 154, 156, 0.08) !important;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td:active {
    background-color: rgba(31, 154, 156, 0.16) !important;
}

.dash-spreadsheet-container::-webkit-scrollbar { width: 10px; height: 10px; }
.dash-spreadsheet-container::-webkit-scrollbar-track { background: var(--pm-surface-sunken); border-radius: 5px; }
.dash-spreadsheet-container::-webkit-scrollbar-thumb { background: var(--pm-border-default); border-radius: 5px; }
.dash-spreadsheet-container::-webkit-scrollbar-thumb:hover { background: var(--pm-border-strong); }

@keyframes copySuccess {
    0%   { background-color: rgba(31, 154, 156, 0.28); }
    100% { background-color: transparent; }
}

.cell-copied { animation: copySuccess 0.6s ease; }

/* -------------------------------------------------------------- tooltip -- */
/* Fixed to the viewport so long values are never clipped by the scrolling
   table container. assets/datatable-tooltip.js keeps the position in sync
   with the hovered cell. */
.dash-table-tooltip {
    background-color: var(--pm-navy) !important;
    color: var(--pm-text-inverse) !important;
    border: 1px solid var(--pm-slate) !important;
    border-radius: var(--pm-radius-sm) !important;
    padding: 10px 14px !important;
    font-family: var(--pm-font-mono) !important;
    font-size: 12px !important;
    max-width: min(480px, 90vw) !important;
    max-height: min(60vh, 400px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    word-wrap: break-word !important;
    white-space: normal !important;
    position: fixed !important;
    left: 0;
    top: 0;
    z-index: 999999 !important;
    box-shadow: var(--pm-shadow-lg) !important;
    pointer-events: none !important;
}

/* A transform on the results card would become the containing block for the
   fixed-positioned tooltip and break its viewport placement, so disable the
   hover lift inside the results area only. */
#results-section .card:hover,
#results-section .card:focus-within {
    transform: none !important;
}

/* ---------------------------------------------------------------- alerts -- */
/* Bootstrap alert colours replaced with the clinical status palette. These
   mark data, not brand, so they stay distinct from the orange accent. */
.alert {
    border-radius: var(--pm-radius-md) !important;
    border-width: 1px !important;
    font-size: 13.5px;
}

.alert-info {
    background: var(--pm-status-info-bg) !important;
    border-color: var(--pm-status-info-border) !important;
    color: var(--pm-status-info-fg) !important;
}

.alert-success {
    background: var(--pm-status-benign-bg) !important;
    border-color: var(--pm-status-benign-border) !important;
    color: var(--pm-status-benign-fg) !important;
}

.alert-warning {
    background: var(--pm-status-uncertain-bg) !important;
    border-color: var(--pm-status-uncertain-border) !important;
    color: var(--pm-status-uncertain-fg) !important;
}

.alert-danger {
    background: var(--pm-status-pathogenic-bg) !important;
    border-color: var(--pm-status-pathogenic-border) !important;
    color: var(--pm-status-pathogenic-fg) !important;
}

.alert-secondary {
    background: var(--pm-status-unknown-bg) !important;
    border-color: var(--pm-status-unknown-border) !important;
    color: var(--pm-status-unknown-fg) !important;
}

/* --------------------------------------------------------------- badges --- */
.badge {
    font-family: var(--pm-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
    border-radius: 999px;
    padding: 4px 10px;
}

/* ------------------------------------------------------------ progress ---- */
.progress {
    background: var(--pm-surface-sunken) !important;
    border-radius: 999px !important;
    height: 10px !important;
}

.progress-bar {
    background: var(--pm-teal) !important;
    border-radius: 999px !important;
}

/* The brand sets a 10px hairline for inline meters. The run meter is the
   page's only activity indicator, so it gets the full card width and real
   height; scoped by class so the inline meters stay hairlines. */
.pm-run-progress {
    width: 100% !important;
    height: 22px !important;
    background: var(--pm-surface-sunken) !important;
    border-radius: 999px !important;
}

.pm-run-progress .progress-bar {
    height: 100%;
    border-radius: 999px !important;
    font-size: 12px;
    font-weight: 600;
}

.pm-log {
    height: 250px;
    overflow-y: auto;
    background: var(--pm-surface-page);
    color: var(--pm-text-primary);
    font-family: var(--pm-font-mono);
    font-size: 12.5px;
    line-height: 1.6;
    padding: 12px 14px;
    border-radius: var(--pm-radius-sm);
    border: 1px solid var(--pm-border-subtle);
    /* Keep log glyphs literal: no coding ligatures hiding -> or != */
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0, "calt" 0;
}

/* ------------------------------------------------- validation flag callout -- */
/* A row whose status changes how it must be read (residue renumbering,
   reconciled coordinates) is stated in body type above the table, not left
   for the reader to find inside a cell. */
.pm-flagcallout {
    border: 2px solid var(--pm-orange);
    border-left-width: 8px;
    border-radius: var(--pm-radius-md);
    background: #FFF7F2;
    padding: 16px 20px;
}

.pm-flagcallout__title {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--pm-orange);
}

.pm-flagrow + .pm-flagrow {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #F3D8C9;
}

.pm-flagrow__head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--pm-navy);
}

.pm-flagrow__id {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.pm-flagrow__text {
    margin: 6px 0 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--pm-ink);
}

/* --------------------------------------------------------------- charts --- */
.js-plotly-plot { border-radius: var(--pm-radius-md); overflow: hidden; }
.card:has(.js-plotly-plot) { background: var(--pm-surface-raised) !important; }
.card-body h2 { font-size: 2.25rem; font-weight: 800; margin-bottom: 0.25rem; color: var(--pm-text-primary); }

/* ------------------------------------------------------------- bottom bar - */
.pathomap-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    background: var(--pm-navy);
    color: #E2E8F0;
    border-top: 1px solid var(--pm-slate);
    padding: 8px 18px;
    font-size: 12px;
    font-family: var(--pm-font-mono);
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    box-shadow: 0 -2px 10px rgba(17, 34, 62, 0.18);
}

.pathomap-bottom-bar .bar-sep { opacity: 0.35; user-select: none; margin: 0 2px; }
.pathomap-bottom-bar .bar-item { display: inline-flex; align-items: center; white-space: nowrap; }
.pathomap-bottom-bar .fas,
.pathomap-bottom-bar .far { margin-right: 5px; opacity: 0.85; }
.pathomap-bottom-bar .bar-version { color: #7DD3FC; font-weight: 600; letter-spacing: 0.02em; }

.pathomap-bottom-bar code {
    color: #7DD3FC;
    background: rgba(255, 255, 255, 0.08);
    padding: 1px 6px;
    border-radius: var(--pm-radius-sm);
}

/* ------------------------------------------------------------- home page -- */
/* The home page is a three-beat sequence: what this is, get variants in, run.
   Everything below supports that order and nothing competes with it. */

.pm-hero {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 40px;
    align-items: center;
    padding: 28px 0 34px;
    border-bottom: 1px solid var(--pm-border-subtle);
    margin-bottom: 24px;
}

.pm-hero__art {
    padding: 4px;
}

.pm-hero__art img {
    height: 128px;
    width: auto;
    display: block;
}

.pm-hero__eyebrow {
    font-family: var(--pm-font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pm-teal);
    margin: 0 0 8px;
}

.pm-hero__title {
    font-size: 34px;
    line-height: 1.12;
    letter-spacing: -0.025em;
    font-weight: 800 !important;
    margin: 0 0 10px;
    max-width: 22ch;
}

.pm-hero__lede {
    font-size: 16px;
    line-height: 1.6;
    color: var(--pm-text-body);
    margin: 0 0 14px;
    max-width: 62ch;
}

.pm-hero__promise {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--pm-surface-sunken);
    border: 1px solid var(--pm-border-subtle);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pm-teal-deep);
}

.pm-hero__promise .fas {
    margin-right: 0;
    font-size: 11px;
}

@media (max-width: 900px) {
    .pm-hero {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-top: 20px;
    }
    .pm-hero__art img { height: 96px; }
    .pm-hero__title { font-size: 27px; }
}

/* Step framing: the number is the sequence, not decoration. */
.pm-step .card-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pm-step__num {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--pm-navy);
    color: var(--pm-text-inverse);
    font-family: var(--pm-font-mono);
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.pm-step__title {
    font-size: 15px;
    font-weight: 700 !important;
    margin: 0;
}

.pm-step__hint {
    font-size: 12.5px;
    color: var(--pm-text-muted);
    margin: 0 0 0 auto;
    text-align: right;
}

@media (max-width: 720px) {
    .pm-step__hint { display: none; }
}

/* Segmented control replaces the underline tabs on the input card: three ways
   to do one thing, so they read as one control, not three destinations. */
.pm-seg .nav-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    margin-bottom: 18px;
    background: var(--pm-surface-sunken);
    border: 1px solid var(--pm-border-subtle);
    border-radius: 999px;
}

.pm-seg .nav-tabs .nav-link {
    border: 0 !important;
    border-radius: 999px !important;
    padding: 7px 16px !important;
    font-size: 13px;
    color: var(--pm-text-muted) !important;
    background: transparent !important;
    white-space: nowrap;
}

.pm-seg .nav-tabs .nav-link:hover {
    color: var(--pm-text-primary) !important;
    border-bottom-color: transparent !important;
}

.pm-seg .nav-tabs .nav-link.active {
    background: var(--pm-surface-raised) !important;
    color: var(--pm-text-primary) !important;
    box-shadow: var(--pm-shadow-sm);
    border-bottom-color: transparent !important;
}

.pm-seg .tab-content { padding-top: 0; }

@media (max-width: 620px) {
    .pm-seg .nav-tabs { display: flex; width: 100%; }
    .pm-seg .nav-tabs .nav-link { flex: 1; text-align: center; padding: 7px 8px !important; }
}

/* The drop zone is the page's main affordance; give it room and a hover. */
.pm-drop {
    width: 100%;
    min-height: 188px;
    border: 1.5px dashed var(--pm-border-default);
    border-radius: var(--pm-radius-md);
    background: var(--pm-surface-sunken);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 26px;
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.pm-drop:hover {
    border-color: var(--pm-teal);
    background: #EEF4F4;
}

.pm-drop__icon {
    font-size: 22px;
    color: var(--pm-teal);
    margin-bottom: 2px;
}

.pm-drop__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--pm-text-primary);
    margin: 0;
}

.pm-drop__hint {
    font-size: 12.5px;
    color: var(--pm-text-muted);
    margin: 0;
    text-align: center;
}

.pm-drop code {
    font-size: 12px;
}

/* Run bar: state on the left, the one action on the right. */
.pm-ready__bar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--pm-border-subtle);
}

.pm-ready__cache {
    font-size: 13px;
    color: var(--pm-text-muted);
    margin: 0;
}

.pm-ready__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

@media (max-width: 640px) {
    .pm-ready__actions { margin-left: 0; width: 100%; }
    .pm-ready__actions .btn { flex: 1; }
}

.pm-empty {
    padding: 10px 2px 2px;
}

.pm-drop__sample {
    font-size: 12.5px;
    color: var(--pm-text-muted);
    margin: 10px 0 0;
    text-align: center;
}

.pm-drop__sample a {
    color: var(--pm-text-link);
    font-weight: 600;
}

.pm-empty__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--pm-text-body);
    margin: 0 0 4px;
}

.pm-empty__body {
    font-size: 13px;
    color: var(--pm-text-muted);
    margin: 0;
    max-width: 60ch;
}

/* Evidence strip: answers "why bother" in the space that was previously blank. */
.pm-evidence {
    padding: 8px 0 4px;
    margin-bottom: 24px;
}

.pm-evidence__title {
    font-family: var(--pm-font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pm-text-muted);
    margin: 0 0 14px;
}

.pm-evidence__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.pm-evidence__card {
    background: var(--pm-surface-raised);
    border: 1px solid var(--pm-border-subtle);
    border-radius: var(--pm-radius-md);
    padding: 16px;
}

.pm-evidence__label {
    font-size: 13px;
    font-weight: 700;
    color: var(--pm-text-primary);
    margin: 0 0 6px;
}

.pm-evidence__copy {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--pm-text-muted);
    margin: 0 0 10px;
}

.pm-evidence__sources {
    font-family: var(--pm-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.02em;
    color: var(--pm-teal);
    margin: 0;
    line-height: 1.5;
    min-height: 2.6em;   /* two lines, so the four cards share a baseline */
}

.pm-evidence__foot {
    font-size: 12px;
    color: var(--pm-text-subtle);
    margin: 12px 0 0;
}

@media (max-width: 1000px) {
    .pm-evidence__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .pm-evidence__grid { grid-template-columns: 1fr; }
}

/* Help sits after the work, as a quiet disclosure. */
.pm-help {
    border: 1px solid var(--pm-border-subtle) !important;
    border-radius: var(--pm-radius-lg) !important;
    box-shadow: none !important;
    background: transparent !important;
}

.pm-help .card-header {
    background: transparent !important;
    border-bottom: 0 !important;
    padding: 0 !important;
}

.pm-help__toggle {
    width: 100%;
    text-align: left !important;
    padding: 14px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--pm-text-muted) !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pm-help__toggle:hover { color: var(--pm-text-primary) !important; }

.pm-help .card-body {
    padding: 0 18px 18px !important;
    border-top: 1px solid var(--pm-border-subtle);
}

.pm-help h6 {
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pm-text-muted);
    margin-bottom: 8px;
}

.pm-help ul, .pm-help ol { padding-left: 18px; }
.pm-help li { margin-bottom: 4px; }

/* ------------------------------------------------- Bootstrap compatibility -- */
/* The dashboard uses dbc utility classes throughout. These rules translate the
   ones that are visible in the UI onto the brand palette, so no Bootstrap blue,
   amber, or green leaks into a screen (docs/brand-guidelines.md §11). */

/* Surfaces used as card headers / blocks */
.bg-primary { background-color: var(--pm-navy) !important; color: var(--pm-text-inverse) !important; }
.bg-secondary { background-color: var(--pm-slate) !important; color: var(--pm-text-inverse) !important; }
.bg-dark { background-color: var(--pm-ink) !important; color: var(--pm-text-inverse) !important; }
.bg-info { background-color: var(--pm-teal-deep) !important; color: var(--pm-text-inverse) !important; }
.bg-success { background-color: var(--pm-teal) !important; color: var(--pm-text-inverse) !important; }

/* Badges read as soft status chips, not solid alarm blocks. */
.badge.bg-primary { background-color: var(--pm-navy) !important; color: var(--pm-text-inverse) !important; }
.badge.bg-secondary { background-color: var(--pm-status-unknown-bg) !important; color: var(--pm-status-unknown-fg) !important; }
.badge.bg-info { background-color: var(--pm-status-info-bg) !important; color: var(--pm-status-info-fg) !important; }
.badge.bg-success { background-color: var(--pm-status-benign-bg) !important; color: var(--pm-status-benign-fg) !important; }
.badge.bg-warning { background-color: var(--pm-status-uncertain-bg) !important; color: var(--pm-status-uncertain-fg) !important; }
.badge.bg-danger { background-color: var(--pm-status-pathogenic-bg) !important; color: var(--pm-status-pathogenic-fg) !important; }
.badge.bg-light { background-color: var(--pm-surface-sunken) !important; color: var(--pm-text-muted) !important; }

/* `text-dark` sits on the soft chips above; keep it readable. */
.badge.bg-warning.text-dark,
.badge.bg-info.text-dark,
.badge.bg-light.text-dark { color: inherit !important; }

/* Toggle switches and checkboxes */
.form-check-input:checked {
    background-color: var(--pm-teal) !important;
    border-color: var(--pm-teal) !important;
}

.form-check-input:focus {
    border-color: var(--pm-teal-bright) !important;
    box-shadow: 0 0 0 3px rgba(31, 154, 156, 0.18) !important;
}

/* The upload drop zone keeps its dashed affordance but in brand ink. Dash puts
   the inline `dashed` style on an anonymous child div, so match on the style
   attribute rather than an id. */
div[style*="dashed"] {
    border-color: var(--pm-border-default) !important;
    transition: border-color 120ms ease;
}

div[style*="dashed"]:hover {
    border-color: var(--pm-teal) !important;
}

#upload-csv {
    background: transparent;
    border-radius: var(--pm-radius-md) !important;
}

/* --------------------------------------------------------------- footer --- */
footer {
    padding-top: 24px;
    margin-top: 40px;
    color: var(--pm-text-muted);
    font-size: 12.5px;
}

footer a:hover { color: var(--pm-text-link) !important; }

.fas, .far, .fab { margin-right: 6px; }

/* Dash's own version badge, restyled and re-labelled by version-badge.js. */
.dash-debug-menu__version {
    display: inline-block !important;
    visibility: visible !important;
    padding: 2px 10px !important;
    margin: 6px !important;
    border-radius: 999px !important;
    background: rgba(22, 109, 116, 0.10) !important;
    color: var(--pm-teal) !important;
    font-family: var(--pm-font-mono) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}

.dash-debug-menu__version span { color: var(--pm-teal) !important; }

.dash-debug-menu__upgrade-tooltip,
.dash-debug-menu__upgrade-button { display: none !important; }

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 768px) {
    h1 { font-size: 26px; }
    .card-body h2 { font-size: 1.75rem; }
    .btn { width: 100%; margin-bottom: 8px; }
    .btn-sm { width: auto; }
    .pm-brandbar__logo { height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* ----------------------------------------------------------------- print -- */
@media print {
    .btn, .nav-tabs, footer, .pathomap-bottom-bar { display: none !important; }
    .card { break-inside: avoid; box-shadow: none !important; }
    body { padding-bottom: 0; background: #fff !important; }
}

/* ============================================================================
   Attribution hint tags ([provided] / [training]) inside AI validation text
   ----------------------------------------------------------------------------
   The pipeline (dashboard/app.py:_attributed_answer_children) emits these as
   attribute-less <abbr>[provided]</abbr> / <span>[training]</span> elements,
   because Dash 4.4.1 renders dcc.Markdown with react-markdown v4, whose
   naive-html plugin promotes attribute-less tags to REAL elements but dumps
   tags WITH attributes into a raw <span dangerouslySetInnerHTML> wrapper
   (empty element, visible text outside it). A title attribute is therefore
   impossible on the real element, so the hover hint is a pure-CSS ::after
   tooltip, one box per tag kind, shown on hover. The tag itself is styled
   readably (amber, semibold, dotted underline) instead of blending into the
   surrounding sentence. Scoped to the "attrib-md" class the pipeline puts on
   its dcc.Markdown wrapper, so nothing else in the app is affected. (An
   inline <style> emitted inside the markdown never reaches the DOM -- Dash
   4.4.1's renderer drops raw-HTML <style> blocks -- hence this global sheet.)
   ============================================================================ */
.attrib-md abbr,
.attrib-md span {
    position: relative;
    font-weight: 600;
    color: #b58900;
    text-decoration: underline dotted #b58900;
    text-underline-offset: 3px;
    cursor: help;
    background: rgba(181, 137, 0, 0.08);
    border-radius: 4px;
    padding: 0 4px;
}

.attrib-md abbr::after,
.attrib-md span::after {
    content: none;
    position: absolute;
    left: -8px;
    top: 1.5em;
    z-index: 1000;
    width: 260px;
    max-width: 85vw;
    background: #2c3e50;
    color: #ffffff;
    font-size: 12px;
    font-weight: 400;
    font-family: var(--pm-font-sans);
    line-height: 1.45;
    padding: 8px 10px;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    white-space: normal;
    text-align: left;
    text-decoration: none;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.attrib-md abbr:hover::after {
    content: "From the data shown in this validation: the row values, fetched evidence, deterministic checks, or verdict.";
    opacity: 1;
}

.attrib-md span:hover::after {
    content: "From the model's own training knowledge — not verified against this row's data. Treat with caution.";
    opacity: 1;
}
/* End of PathoMap brand stylesheet */