/* ============================================================================
 * Sonde design system — tokens, typography, and component overrides on top of
 * Bootstrap 5. One source of truth; templates should rely on these classes.
 * ============================================================================ */

/* ——— Tokens ———
 * Cobalt × Lime direction: cool neutral gray, heavy grotesk display, lime accent.
 * Lime is brand and may only be used as a highlighter/chip background carrying
 * near-black text — never as text-on-bg. Deep green (--up) is reserved for
 * positive data and is visually distinct from the lime accent.
 */
:root {
    --bg: #f3f3f3;
    --bg2: #e8e8e6;
    --panel: #fbfcf7;
    --paper: #ffffff;
    --ink: #0d1410;
    --ink2: #2a322c;
    --dim: #6a746a;
    --faint: #a0a89e;
    --line: rgba(13, 20, 16, 0.08);
    --line-strong: rgba(13, 20, 16, 0.16);
    --accent: #7ee03c;
    --accent-ink: #0d1410;
    --accent-soft: rgba(126, 224, 60, 0.16);
    --accent-line: rgba(126, 224, 60, 0.45);
    /* Backward-compatible aliases — templates referencing the old brand tokens
       still resolve; they now point at the new palette. */
    --brand-navy: var(--ink);
    --brand-navy-hover: #000000;
    --brand-teal: #1f7d4e;
    --brand-mint: #7ee03c;
    --brand-mint-soft: rgba(126, 224, 60, 0.18);
    /* Positive data: deep green — distinct from the lime brand accent. */
    --up: #1f7d4e;
    --up-soft: rgba(31, 125, 78, 0.14);
    --down: #c8473a;
    --down-soft: rgba(200, 71, 58, 0.14);
    --warn: #a6791f;
    --warn-soft: rgba(242, 210, 117, 0.22);
    /* Caution register — issue #115 / Sonde Beta Treatments handoff.
       One amber meaning: beta features, data caveats, image-sourced
       filings, report actions. Hairline + mono only — never as a fill. */
    --caution: #a06a1c;
    --caution-soft: rgba(160, 106, 28, 0.08);
    --caution-line: rgba(160, 106, 28, 0.30);
    --display: 'Space Grotesk', 'Inter Tight', -apple-system, sans-serif;
    --sans: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
    /* Alias kept so templates referencing the old serif token still resolve.
       The new design has no serif — these usages now render as heavy grotesk. */
    --serif: var(--display);

    /* Bootstrap overrides */
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--ink);
    --bs-body-font-family: var(--sans);
    --bs-body-font-size: 14px;
    --bs-body-line-height: 1.45;
    --bs-primary: var(--ink);
    --bs-primary-rgb: 13, 20, 16;
    --bs-link-color: var(--ink);
    --bs-link-hover-color: var(--ink);
    --bs-border-color: var(--line);
}

body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

/* ——— Typography ——— */
h1, .h1 {
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: -1.4px;
    line-height: 1.05;
    color: var(--ink);
}
h2, .h2, h3, .h3 {
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: -0.8px;
    line-height: 1.1;
    color: var(--ink);
}
h4, .h4, h5, .h5, h6, .h6 {
    font-family: var(--display);
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--ink);
}
code, .font-mono, .mono {
    font-family: var(--mono);
}

/* ——— Nav ——— */
.navbar {
    background: var(--bg);
    backdrop-filter: none;
    border-bottom: 1px solid var(--line);
    padding: 0.5rem 0;
}
.navbar-brand {
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: -0.8px;
    font-size: 1.35rem;
    color: var(--ink) !important;
}
/* Brand mark — tilted lime square inside a rounded ink tile, with wordmark. */
.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.brand-tile {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.brand-tile-inner {
    width: 12px;
    height: 12px;
    background: var(--accent);
    transform: rotate(45deg);
    border-radius: 1px;
    display: inline-block;
}
.brand-word {
    line-height: 1;
}
.navbar-nav .nav-link {
    font-weight: 500;
    font-size: 13px;
    color: var(--dim) !important;
    padding-bottom: 3px;
    position: relative;
}
.navbar-nav .nav-link:hover {
    color: var(--ink) !important;
}
.navbar-nav .nav-link.active {
    color: var(--ink) !important;
    font-weight: 600;
    border-bottom: 3px solid var(--accent);
}
.navbar .form-control {
    border-radius: 8px;
    border: 1px solid var(--line-strong);
    background: var(--panel);
    font-size: 13px;
}
.navbar .form-control:focus {
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(22, 22, 15, 0.05);
}
.navbar .btn {
    border-radius: 8px;
}

/* ——— Buttons ——— */
.btn {
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
}
.btn-primary {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--bg);
    box-shadow: none;
}
.btn-primary:hover,
.btn-primary:focus {
    background: #000000;
    border-color: #000000;
    color: var(--bg);
    box-shadow: none;
}
/* Lime accent button — solid lime fill with near-black text.
   Use sparingly for primary marketing/CTA moments; never as plain hyperlink color. */
.btn-accent {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
    font-weight: 700;
}
.btn-accent:hover,
.btn-accent:focus {
    background: #6dd02d;
    border-color: #6dd02d;
    color: var(--accent-ink);
}
.btn-outline-secondary {
    border-radius: 10px;
    border-color: var(--line-strong);
    color: var(--ink);
    background: var(--panel);
}
.btn-outline-secondary:hover {
    border-color: var(--ink);
    background: var(--panel);
    color: var(--ink);
}
.btn-light {
    background: var(--panel);
    border: 1px solid var(--line-strong);
    color: var(--ink);
}

/* ——— Cards ——— */
.card {
    margin-bottom: 20px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--panel);
    box-shadow: none;
}
.card-header {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 13px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    border-radius: 12px 12px 0 0;
    color: var(--ink);
}

/* ——— Tables ——— */
.table {
    margin-bottom: 0;
    color: var(--ink);
}
.table > thead {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--faint);
}
.table > thead th {
    font-weight: 500;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 12px 16px;
    white-space: nowrap;
}
.table > tbody > tr > td {
    padding: 14px 16px;
    border-top: 1px solid var(--line);
    vertical-align: middle;
}
.table-striped > tbody > tr:nth-of-type(odd) {
    --bs-table-accent-bg: var(--bg);
}
.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--bg2);
}
.table-responsive {
    overflow-x: auto;
}

/* ——— Search form ——— */
.search-form {
    max-width: 640px;
    margin: 0 auto;
}

/* ——— Company header — editorial hero ——— */
.company-header {
    background: transparent;
    padding: 8px 0 20px;
    margin-bottom: 20px;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--line);
    box-shadow: none;
}
.company-header h1 {
    font-family: var(--display);
    font-weight: 700;
    font-size: 44px;
    letter-spacing: -1.6px;
    line-height: 1.02;
    color: var(--ink);
}

/* ——— Tabs ——— */
.nav-tabs {
    margin-bottom: 20px;
    border-bottom: 1px solid var(--line);
}
.nav-tabs .nav-link {
    border: none;
    color: var(--dim);
    font-weight: 500;
    font-size: 13px;
    padding: 0.75rem 1.25rem;
}
.nav-tabs .nav-link:hover {
    color: var(--ink);
}
.nav-tabs .nav-link.active {
    color: var(--ink);
    font-weight: 600;
    border-bottom: 3px solid var(--accent);
    background-color: transparent;
}

/* ———— Badges & pills ————
 * Two structural flavours:
 *   Status (default .badge)      — sans, capitalize, soft-filled. Lifecycle states.
 *   Stage / Signal (.pill-*)     — mono UPPERCASE, outlined + tinted. Funding stages, activity.
 * Tone modifiers: .tone-up/-down/-accent/-warn/-neutral/-faint
 */

/* Status (default) — Bootstrap bg-* variants are re-mapped to Sonde tones */
.badge,
.chip {
    border-radius: 3px;
    font-family: var(--sans);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.3px;
    text-transform: capitalize;
    padding: 0.28rem 0.55rem;
    display: inline-flex;
    align-items: center;
}
.badge.bg-success {
    background-color: var(--up-soft) !important;
    color: var(--up) !important;
}
.badge.bg-danger {
    background-color: var(--down-soft) !important;
    color: var(--down) !important;
}
.badge.bg-secondary {
    background-color: rgba(22, 22, 15, 0.06) !important;
    color: var(--dim) !important;
}
.badge.bg-warning {
    background-color: var(--warn-soft) !important;
    color: var(--warn) !important;
}
/* Lime accent surfaces: dark text on lime — never lime text on light bg. */
.badge.bg-info {
    background-color: var(--accent) !important;
    color: var(--accent-ink) !important;
    font-weight: 700;
}
.badge.bg-primary {
    background-color: var(--accent) !important;
    color: var(--accent-ink) !important;
    font-weight: 700;
}
.badge.bg-light.text-dark,
.badge.bg-light {
    background-color: var(--panel) !important;
    color: var(--dim) !important;
    border: 1px solid var(--line);
}
.badge-teal-soft {
    background-color: var(--up-soft);
    color: var(--up);
}
.badge-outline-teal {
    background-color: var(--panel);
    color: var(--dim);
    border: 1px solid var(--line-strong);
    font-weight: 400;
}

/* Stage / Signal pills — mono UPPERCASE, outlined + tinted */
.pill-stage,
.pill-signal {
    display: inline-flex;
    align-items: center;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 3px;
    border: 1px solid transparent;
    background: transparent;
}
.pill-stage.tone-up,
.pill-signal.tone-up {
    color: var(--up);
    border-color: rgba(86, 172, 162, 0.4);
    background: var(--up-soft);
}
.pill-stage.tone-accent,
.pill-signal.tone-accent {
    color: var(--accent-ink);
    border-color: var(--accent-line);
    background: var(--accent);
    font-weight: 700;
}
.pill-stage.tone-warn,
.pill-signal.tone-warn {
    color: var(--warn);
    border-color: rgba(242, 210, 117, 0.55);
    background: var(--warn-soft);
}
.pill-stage.tone-down,
.pill-signal.tone-down {
    color: var(--down);
    border-color: rgba(176, 58, 40, 0.3);
    background: var(--down-soft);
}
.pill-stage.tone-neutral,
.pill-signal.tone-neutral {
    color: var(--dim);
    border-color: var(--line-strong);
    background: transparent;
}
.pill-stage.tone-faint,
.pill-signal.tone-faint {
    color: var(--faint);
    border-color: var(--line);
    background: transparent;
}

/* ──────────────────────────────────────────────────────────────────────
 * Beta + data-caveat treatments (issue #115).
 *
 * Per the Sonde Beta Treatments handoff, beta and data caveats share ONE
 * amber register that is always hairline + mono on the page background —
 * never a flood fill. Five locked components:
 *   A2  .beta-inline       title-level "● in beta" marker
 *   B1  .data-notes-strip  page-level hairline strip for data caveats
 *   C1  .is-beta           dotted-underline modifier on existing pills/values
 *       .beta-key          one-line key explaining which signals are beta
 *   E1  .pill-source       source-of-truth pill (Digital / Image / Failed)
 *   F1  .flag-btn          row-level "Report this filing" icon button
 *       .report-ghost-btn  page-level "Report bad data on this company"
 * ────────────────────────────────────────────────────────────────────── */

/* Single explanatory key line beneath the company hero badges. The
   `BETA:` prefix is the only marker — quiet but readable.
   `flex-basis: 100%` forces it onto its own row inside .hero-pills,
   which is a flex-wrap container that would otherwise pull it up next
   to the badges. */
.beta-key {
    flex-basis: 100%;
    font-family: var(--sans);
    font-size: 11.5px;
    color: var(--dim);
    line-height: 1.5;
    margin-top: 8px;
}
.beta-key-label {
    font-family: var(--mono);
    color: var(--caution);
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 10px;
    margin-right: 4px;
}

/* Founders row in the company hero. Forced onto its own line inside the
   .hero-pills flex-wrap container so "Founders:" aligns with the founder
   pills below the activity/stage pills, rather than running on next to
   them (and so the "Founders:" label baseline doesn't fight the pill
   geometry). */
.hero-founders {
    flex-basis: 100%;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* A2 — Title-level beta marker. Reads as metadata next to an H1, not a
   pill. Tiny amber dot + mono "in beta". */
.beta-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--caution);
    letter-spacing: 0.4px;
    margin-left: 8px;
    vertical-align: middle;
    cursor: help;
}
.beta-inline::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--caution);
    flex-shrink: 0;
}

/* B1 — Page-level data caveats. One thin amber strip on the page
   background, no fill. Mono label on the left, body notes on the right. */
.data-notes-strip {
    border-top: 1px solid var(--caution-line);
    border-bottom: 1px solid var(--caution-line);
    background: transparent;
    padding: 10px 0;
    margin: 14px 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 22px;
    align-items: baseline;
}
.data-notes-strip .data-notes-label {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--caution);
    white-space: nowrap;
}
.data-notes-strip .data-notes-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 6px 22px;
}
.data-notes-strip .data-note {
    font-size: 12px;
    color: var(--ink2);
    line-height: 1.4;
}

/* B2 — Indicative-value notice. One step up from .data-notes-strip:
   still hairline + amber, but with a soft tint and larger body text so
   it reads as a clear caveat rather than a metadata strip. Used where
   we surface estimated share values (shareholders history, portfolio
   results). Issue #170. */
.value-estimate-notice {
    border: 1px solid var(--caution-line);
    background: var(--caution-soft);
    border-radius: 10px;
    padding: 14px 18px;
    margin: 14px 0 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.value-estimate-notice .ven-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}
.value-estimate-notice .ven-label {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--caution);
    white-space: nowrap;
}
.value-estimate-notice .ven-title {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.1px;
    line-height: 1.35;
}
.value-estimate-notice .ven-body {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ink2);
}
.value-estimate-notice .ven-body a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--caution-line);
    text-underline-offset: 2px;
}
.value-estimate-notice .ven-body a:hover {
    text-decoration-color: var(--caution);
}

/* E1 — Filing source pills. Digital is the unmarked default (neutral
   hairline); Image gets the amber/caution treatment; Failed stays red;
   Pending uses the faint hairline. All hairline-only, no fills. */
.pill-source {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 3px;
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--dim);
    cursor: help;
    vertical-align: middle;
}
.pill-source .pill-icon {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
}
.pill-source.is-image {
    color: var(--caution);
    border-color: var(--caution-line);
}
.pill-source.is-failed {
    color: var(--down);
    border-color: rgba(200, 71, 58, 0.35);
}
.pill-source.is-pending {
    color: var(--faint);
    border-color: var(--line);
}

/* F1 — Row-level "Report this filing" icon button. Padding mirrors
   `.al-row .pdf-link` / `.fi-doc` (3px 8px, 4px radius) so the two
   buttons share the same height and rounding when they sit side-by-side
   in a row's action cell. */
.flag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid var(--line);
    color: var(--dim);
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    transition: color 0.12s ease, border-color 0.12s ease;
}
.flag-btn:hover,
.flag-btn:focus {
    color: var(--caution);
    border-color: var(--caution-line);
    outline: none;
}
.flag-btn .flag-icon {
    width: 12px;
    height: 12px;
}

/* Action-cell wrapper — right-aligned inline-flex holding PDF + .flag-btn
   side by side. Used in .al-row, .sh-details, and filings tables. */
.row-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-self: end;
    white-space: nowrap;
}

/* F1 — Page-level "Report bad data on this company" ghost button. Same
   amber/caution register as .flag-btn so the row and page actions read
   as one family at two scopes. */
.report-ghost-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sans);
    font-size: 11.5px;
    color: var(--caution);
    font-weight: 600;
    border: 1px solid var(--caution-line);
    padding: 5px 11px;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
}
.report-ghost-btn:hover,
.report-ghost-btn:focus {
    color: var(--caution);
    background: var(--caution-soft);
    outline: none;
}
.report-ghost-btn .flag-icon {
    width: 11px;
    height: 11px;
}

/* ——— Percentage bar ——— */
.percentage-bar {
    height: 18px;
    background: var(--up);
    border-radius: 4px;
}

/* ——— Rows ——— */
.shareholder-row:hover {
    background-color: var(--bg2);
}

/* ——— Flash ——— */
.flash-messages {
    margin-top: 20px;
}

/* ——— Footer ——— */
footer {
    box-shadow: none;
    border-top: 1px solid var(--line);
    background: var(--bg) !important;
    font-size: 12px;
    color: var(--dim);
}

/* ——— Stat cards ——— */
.stat-cards .card {
    margin-bottom: 0;
}
.stat-cards .card-body {
    padding: 1.1rem 1.25rem;
}

/* ——— Links ——— */
a {
    color: inherit;
}
a:hover {
    color: var(--ink);
}

/* ——— Form controls ——— */
.form-control,
.form-select {
    background: var(--panel);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 13px;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(22, 22, 15, 0.05);
}

/* ============================================================================
 * DETAIL-PAGE PATTERNS (company_detail, and usable by future detail pages)
 * ============================================================================ */

/* ——— Breadcrumb ——— */
.crumbs {
    font-size: 12px;
    color: var(--dim);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.crumbs a {
    color: var(--dim);
    cursor: pointer;
    text-decoration: none;
}
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { color: var(--faint); }
.crumbs .cur { color: var(--ink); }

/* ——— Editorial hero ——— */
.hero {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 20px;
    align-items: flex-start;
    padding: 8px 0 20px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 0;
}
.hero-avatar {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    background: var(--ink);
    border: 1px solid var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--display);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--accent);
    line-height: 1;
}
.hero-title {
    font-family: var(--display);
    font-weight: 700;
    font-size: 46px;
    letter-spacing: -1.8px;
    margin: 0 0 6px;
    line-height: 1.02;
    color: var(--ink);
}
.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    font-size: 13px;
    color: var(--dim);
}
.hero-meta .num {
    font-family: var(--mono);
    font-size: 12px;
    background: var(--accent-soft);
    border: 1px solid transparent;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    color: var(--ink);
    font-weight: 600;
}
.hero-meta .dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--faint);
    display: inline-block;
}
.hero-meta b {
    color: var(--ink2);
    font-weight: 500;
}
.hero-meta a {
    color: var(--dim);
    text-decoration: underline;
    text-decoration-color: var(--line);
    text-underline-offset: 3px;
    cursor: pointer;
}
.hero-meta a:hover {
    color: var(--ink);
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
}
.hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    align-items: center;
}

/* ——— At-a-glance strip ——— */
.glance {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    border-bottom: 1px solid var(--line);
    margin-bottom: 24px;
}
.glance .cell {
    padding: 16px 20px 18px;
    border-right: 1px solid var(--line);
}
.glance .cell:last-child { border-right: none; }
.glance .lbl {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 6px;
}
.glance .val {
    font-family: var(--mono);
    font-size: 22px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.5px;
    line-height: 1.1;
}
.glance .val.serif {
    font-family: var(--display);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -0.8px;
}
.glance .val.empty {
    color: var(--faint);
    font-weight: 400;
}
.glance .sub {
    font-size: 11px;
    color: var(--dim);
    margin-top: 3px;
}
@media (max-width: 1080px) {
    .glance { grid-template-columns: repeat(2, 1fr); }
    .glance .cell { border-right: none; border-bottom: 1px solid var(--line); }
    .hero { grid-template-columns: 60px 1fr; }
    .hero-title { font-size: 34px; }
    .hero-avatar { width: 60px; height: 60px; font-size: 30px; }
}

/* ——— Sonde card (self-contained panel) ——— */
.s-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 16px;
}
.s-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--line);
    gap: 12px;
}
.s-card-title {
    font-family: var(--display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.4px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    margin: 0;
}
.card-meta {
    font-size: 11px;
    color: var(--dim);
    font-family: var(--mono);
}
.card-link {
    font-size: 12px;
    color: var(--dim);
    cursor: pointer;
    display: inline-flex;
    gap: 3px;
    align-items: center;
    text-decoration: none;
}
.card-link:hover { color: var(--ink); }

/* ——— Key-value grid ——— */
.kv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 28px;
}
.kv .k {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 4px;
}
.kv .v {
    font-size: 13px;
    color: var(--ink);
    line-height: 1.4;
}
.kv .v.mono {
    font-family: var(--mono);
    font-size: 12px;
}
.kv .v.empty {
    color: var(--faint);
}

/* ——— Sonde data table (lighter than Bootstrap's) ——— */
table.sonde-tbl {
    width: 100%;
    border-collapse: collapse;
}
.sonde-tbl th {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--faint);
    font-weight: 500;
    text-align: left;
    padding: 8px 8px 10px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.sonde-tbl th.num { text-align: right; }
.sonde-tbl td {
    padding: 12px 8px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    vertical-align: middle;
    color: var(--ink);
}
.sonde-tbl tbody tr:first-child td { border-top: none; }
.sonde-tbl tbody tr:hover { background: var(--bg2); }
.sonde-tbl td.num {
    text-align: right;
    font-family: var(--mono);
    font-size: 12px;
    white-space: nowrap;
}
.sonde-tbl td.date {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--dim);
    white-space: nowrap;
}

/* ——— Card hero (big stats row inside a card) ——— */
.card-hero {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--line);
}
.card-hero-stat .lbl {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 4px;
}
.card-hero-stat .v {
    font-family: var(--display);
    font-weight: 700;
    font-size: 30px;
    letter-spacing: -1.2px;
    line-height: 1;
    color: var(--ink);
}
.card-hero-stat .v.empty {
    color: var(--faint);
    font-weight: 500;
    font-family: var(--sans);
    font-size: 22px;
}
.card-hero-stat .sub {
    font-size: 11px;
    color: var(--dim);
    margin-top: 6px;
    font-family: var(--mono);
}
.card-hero.two-col {
    grid-template-columns: 1fr 1fr;
    row-gap: 22px;
}
@media (max-width: 900px) {
    .card-hero { grid-template-columns: 1fr; gap: 14px; }
    .card-hero.two-col { grid-template-columns: 1fr; }
}

/* ——— Vertical timeline ——— */
.tl {
    padding: 0;
    margin: 0;
    list-style: none;
}
.tl li {
    display: grid;
    grid-template-columns: 112px 20px 1fr auto;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 0;
    border-top: 1px solid var(--line);
    position: relative;
}
.tl li:first-child { border-top: none; }
.tl .date {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--dim);
    padding-top: 3px;
    letter-spacing: 0.3px;
    line-height: 1.55;
}
.tl .date .end {
    display: block;
    color: var(--faint);
}
.tl .node {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--panel);
    border: 2px solid var(--ink);
    margin-top: 6px;
    justify-self: center;
    position: relative;
}
.tl .node::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: calc(100% + 16px);
    background: var(--line);
    z-index: -1;
}
.tl li:last-child .node::before { display: none; }
.tl .node.accent { border-color: var(--accent); background: var(--accent); }
.tl .node.up { border-color: var(--up); }
.tl .node.warn { border-color: var(--warn); }
.tl .body .t {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 2px;
    line-height: 1.35;
}
.tl .body .t .lead {
    color: var(--dim);
    font-weight: 400;
    font-size: 12px;
    margin-left: 4px;
}
.tl .body .sub {
    font-size: 11px;
    color: var(--dim);
    line-height: 1.4;
}
.tl .amt {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    padding-top: 3px;
}
.tl .amt.up { color: var(--up); }
.tl .amt.minor { color: var(--dim); font-weight: 400; }

/* ——— Sidebar key-value list ——— */
.side-kv {
    display: grid;
    gap: 10px;
}
.side-kv .skv-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    gap: 10px;
    align-items: baseline;
}
.side-kv .k {
    color: var(--dim);
    flex-shrink: 0;
}
.side-kv .v {
    color: var(--ink);
    text-align: right;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
}
.side-kv .v.up { color: var(--up); }
.side-kv .v.plain {
    font-family: var(--sans);
    font-weight: 400;
}

/* ——— Two-column main layout for detail pages ——— */
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    margin-top: 8px;
}
@media (max-width: 1080px) {
    .detail-grid { grid-template-columns: 1fr; }
}

/* ——— Allotment rows ———
   Last column widened from 56px to 110px to fit "PDF ↗" + the new
   .flag-btn report icon side by side without compression (issue #115). */
.al-header,
.al-row {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr) 110px 140px 110px;
    gap: 16px;
    align-items: center;
}
.al-header {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--faint);
    font-weight: 500;
    padding: 8px 0 10px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 2px;
}
.al-header .num { text-align: right; }
.al-row {
    padding: 12px 0;
    border-top: 1px solid var(--line);
}
.al-row:first-of-type { border-top: none; }
.al-row.warn {
    background: linear-gradient(90deg, rgba(242, 210, 117, 0.15), transparent 70%);
    border-radius: 6px;
    padding: 12px 10px;
    margin: 0 -10px;
}
.al-row .date {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--dim);
    line-height: 1.45;
}
.al-row .date .filed {
    display: block;
    color: var(--faint);
    font-size: 10px;
    margin-top: 2px;
}
.al-row .lbl {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.al-row .lbl .cls {
    display: inline-block;
    font-family: var(--mono);
    font-size: 10px;
    background: var(--bg2);
    padding: 2px 7px;
    border-radius: 3px;
    color: var(--ink2);
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: none;
}
.al-row .lbl .flag {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--warn);
    font-weight: 500;
}
.al-row .sub {
    font-size: 11px;
    color: var(--dim);
    margin-top: 3px;
}
.al-row .shares {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--dim);
    text-align: right;
}
.al-row .amt-cell {
    text-align: right;
}
.al-row .amt {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}
.al-row .amt.empty {
    color: var(--faint);
    font-weight: 400;
}
.al-row .amt-was {
    color: var(--dim);
    text-decoration: line-through;
    font-weight: 400;
    font-size: 11px;
    display: block;
    margin-top: 2px;
    font-family: var(--mono);
}
.al-row .pdf-link {
    color: var(--dim);
    font-size: 11px;
    font-family: var(--mono);
    border: 1px solid var(--line);
    padding: 3px 8px;
    border-radius: 4px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    justify-self: end;
}
.al-row .pdf-link:hover {
    color: var(--ink);
    border-color: var(--ink);
    background: var(--accent-soft);
}

/* Hidden state for share-class filter */
.al-row.filtered-out { display: none; }

/* ——— Filings tab ——— */
.fi-type {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.8px;
    background: var(--accent-soft);
    padding: 2px 7px;
    border-radius: 4px;
    color: var(--ink);
    font-weight: 500;
    display: inline-block;
    white-space: nowrap;
}
.fi-doc {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    white-space: nowrap;
}
.fi-doc:hover { color: var(--ink); text-decoration-color: var(--ink); }
/* Hidden state for client-side type filter / search */
tr.filtered-out { display: none; }

/* ——— Person name cell (avatar + name) ——— */
.p-name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.p-init {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--ink);
    border: 1px solid var(--line);
}
.p-n {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
}
.p-sub {
    font-size: 11px;
    color: var(--dim);
    margin-top: 2px;
}

/* ——— Progress bar (shareholdings) ——— */
.bar {
    height: 6px;
    background: var(--bg2);
    border-radius: 3px;
    overflow: hidden;
    min-width: 80px;
}
.bar > span {
    display: block;
    height: 100%;
    background: var(--up);
    border-radius: 3px;
}

/* ——— Collapsible details (shareholder history panels) ——— */
.sh-details {
    border-top: 1px solid var(--line);
}
.sh-details:first-of-type { border-top: none; }
.sh-details summary {
    cursor: pointer;
    padding: 14px 2px;
    display: flex;
    align-items: center;
    gap: 12px;
    list-style: none;
    user-select: none;
}
.sh-details summary::-webkit-details-marker { display: none; }
.sh-details summary::before {
    content: '▸';
    color: var(--faint);
    font-size: 11px;
    display: inline-block;
    width: 12px;
    transition: transform 0.15s;
}
.sh-details[open] > summary::before { transform: rotate(90deg); }
.sh-details summary .date {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink);
    font-weight: 500;
}
.sh-details summary .meta {
    font-size: 12px;
    color: var(--dim);
    font-family: var(--mono);
    margin-left: auto;
    display: flex;
    gap: 14px;
    align-items: center;
}
.sh-details summary:hover .date { color: var(--ink); }
.sh-details .body {
    padding: 2px 0 16px;
}

/* ============================================================================
 * HOME / WORKBENCH
 * ============================================================================ */

.home-hero {
    padding: 40px 0 32px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 28px;
    text-align: center;
}
.home-hero h1 {
    font-family: var(--display);
    font-weight: 700;
    font-size: 64px;
    letter-spacing: -2.6px;
    line-height: 0.98;
    margin: 0 0 14px;
    color: var(--ink);
}
.home-hero .home-sub {
    font-size: 16px;
    color: var(--dim);
    margin: 0 auto 26px;
    max-width: 560px;
}
.home-search {
    display: flex;
    gap: 8px;
    max-width: 620px;
    margin: 0 auto 16px;
    align-items: center;
}
.home-search input[type="search"] {
    flex: 1;
    padding: 13px 16px;
    font-size: 15px;
    font-family: var(--sans);
    background: var(--panel);
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    outline: none;
    transition: border 0.12s, box-shadow 0.12s;
}
.home-search input[type="search"]:focus {
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(22, 22, 15, 0.05);
}
.home-search button {
    padding: 13px 26px;
    background: var(--accent);
    color: var(--accent-ink);
    border: 1px solid var(--accent);
    border-radius: 10px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.home-search button:hover { background: #6dd02d; border-color: #6dd02d; }
.ambient-stats {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--faint);
    letter-spacing: 0.3px;
}
.ambient-stats b {
    color: var(--ink);
    font-weight: 600;
}

.home-modules {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}
@media (max-width: 1080px) {
    .home-modules { grid-template-columns: 1fr; }
}

.home-list {
    display: flex;
    flex-direction: column;
}
.home-list-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
}
.home-list-row:first-child { border-top: none; }
.home-list-row:hover { background: var(--bg2); margin: 0 -10px; padding: 10px 10px; border-radius: 6px; }
.home-list-row:hover + .home-list-row { border-top-color: transparent; }
.home-list-row .hl-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.home-list-row:hover .hl-name { color: var(--ink); }
.home-list-row .hl-sub {
    font-size: 11px;
    color: var(--dim);
    margin-top: 2px;
    font-family: var(--mono);
    letter-spacing: 0.2px;
}
.home-list-row .hl-right {
    text-align: right;
    font-family: var(--mono);
    white-space: nowrap;
}
.home-list-row .hl-right .v {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}
.home-list-row .hl-right .v.up { color: var(--up); }
.home-list-row .hl-right .v.down { color: var(--down); }
.home-list-row .hl-right .sub {
    font-size: 10px;
    color: var(--faint);
    margin-top: 2px;
    letter-spacing: 0.3px;
}
.home-list-empty {
    font-size: 12px;
    color: var(--faint);
    text-align: center;
    padding: 28px 8px;
}

/* ============================================================================
 * COMPANIES LIST PAGE
 * ============================================================================ */

.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.page-head h1 {
    font-family: var(--display);
    font-weight: 700;
    font-size: 42px;
    letter-spacing: -1.6px;
    line-height: 1.02;
    margin: 0 0 6px;
    color: var(--ink);
}
.page-head .sub {
    font-size: 14px;
    color: var(--dim);
    margin: 0;
    max-width: 640px;
}
.page-head .sub b {
    color: var(--ink);
    font-weight: 500;
    font-family: var(--mono);
    font-size: 13px;
}
.page-stats {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}
.page-stats .stat { text-align: right; }
.page-stats .stat .lbl {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 3px;
}
.page-stats .stat .val {
    font-family: var(--mono);
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
}
.page-stats .stat .val.empty {
    color: var(--faint);
    font-weight: 400;
}

/* Active filter chips */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 4px 0 16px;
    margin-bottom: 16px;
    border-bottom: 1px dashed var(--line);
}
.filter-bar .lbl {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--faint);
    margin-right: 4px;
}
.filter-bar .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
    background: var(--panel);
    border: 1px solid var(--line);
    padding: 5px 11px;
    border-radius: 999px;
}
.filter-bar .chip.accent {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: transparent;
    font-weight: 600;
}
.filter-bar .chip a {
    color: var(--faint);
    text-decoration: none;
    font-weight: 400;
    margin-left: 2px;
    line-height: 1;
}
.filter-bar .chip a:hover { color: var(--ink); }
.filter-bar .clear-all {
    margin-left: auto;
    font-size: 12px;
    color: var(--dim);
    text-decoration: underline;
    text-decoration-color: var(--line);
    text-underline-offset: 3px;
}
.filter-bar .clear-all:hover {
    color: var(--ink);
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
}

/* Two-column layout */
.companies-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 28px;
    align-items: start;
}
@media (max-width: 991px) {
    .companies-layout { grid-template-columns: 1fr; }
}

/* Filters sidebar */
.filters-sidebar {
    position: sticky;
    top: 80px;
}
.filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--line);
}
.filters-head .title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}
.filters-head .reset {
    font-size: 12px;
    color: var(--dim);
    text-decoration: none;
}
.filters-head .reset:hover { color: var(--ink); }
.fg { margin-bottom: 18px; }
.fg .flbl {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 8px;
    display: block;
}
.fg input[type="text"],
.fg input[type="number"],
.fg select {
    width: 100%;
    padding: 8px 10px;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--ink);
    background: var(--panel);
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    outline: none;
    transition: border 0.12s, box-shadow 0.12s;
}
.fg input:focus,
.fg select:focus {
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(22, 22, 15, 0.05);
}
.fg .range {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 6px;
    align-items: center;
}
.fg .range .sep { color: var(--faint); font-size: 11px; }
.presets { display: flex; flex-wrap: wrap; gap: 5px; }
.preset {
    font-size: 11px;
    padding: 4px 9px;
    border-radius: 999px;
    background: transparent;
    color: var(--dim);
    border: 1px solid var(--line);
    font-family: var(--sans);
    text-decoration: none;
}
.preset:hover {
    border-color: var(--ink);
    color: var(--ink);
}
.preset.on {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}
.btn-apply {
    width: 100%;
    padding: 9px 14px;
    border: none;
    border-radius: 8px;
    background: var(--brand-navy);
    color: #fff;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 500;
}
.btn-apply:hover { background: var(--brand-navy-hover); }

/* Results toolbar */
.results-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.results-count {
    font-size: 13px;
    color: var(--dim);
    font-family: var(--mono);
}
.results-count b {
    color: var(--ink);
    font-weight: 600;
}
.toolbar-right { display: flex; gap: 8px; align-items: center; }
.toolbar-right .sort {
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    padding: 6px 28px 6px 12px;
    background: var(--panel);
    font-size: 12px;
    color: var(--ink);
    font-family: var(--sans);
    cursor: pointer;
}

/* Sonde results table */
.table-wrap {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}
table.results {
    width: 100%;
    border-collapse: collapse;
}
.results thead th {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--faint);
    font-weight: 500;
    text-align: left;
    padding: 12px 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.results thead th.num { text-align: right; }
.results tbody td {
    padding: 14px 16px;
    border-top: 1px solid var(--line);
    vertical-align: middle;
}
.results tbody tr:first-child td { border-top: none; }
.results tbody tr { transition: background 0.1s; }
.results tbody tr:hover { background: var(--bg2); }
.co-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 240px;
}
.co-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--ink);
    background: var(--bg2);
    border: 1px solid var(--line);
}
.co-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.25;
    text-decoration: none;
}
.co-name:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.co-num {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--faint);
    margin-top: 3px;
    letter-spacing: 0.5px;
}
.loc { font-size: 13px; color: var(--ink); }
.loc .region {
    color: var(--dim);
    font-size: 11px;
    margin-top: 2px;
}
.founded {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--dim);
}
.num-cell {
    text-align: right;
    font-family: var(--mono);
    white-space: nowrap;
}
.num-cell .val {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}
.num-cell .val.empty {
    color: var(--faint);
    font-weight: 400;
}
.status-signal-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}
.arr {
    color: var(--faint);
    font-size: 14px;
    text-align: center;
}
.results tbody tr:hover .arr { color: var(--ink); }
.results tbody tr:hover .co-name { color: var(--ink); }

/* Sonde pager */
.pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 22px;
    font-family: var(--mono);
}
.pager a,
.pager .ell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 12px;
    color: var(--dim);
    border: 1px solid transparent;
    text-decoration: none;
}
.pager a:hover {
    color: var(--ink);
    border-color: var(--line);
}
.pager .on {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
    font-weight: 600;
}
.pager .off {
    color: var(--faint);
    pointer-events: none;
}
.pager .step { padding: 0 14px; }

/* ——— Tab count chip ——— */
.nav-tabs .nav-link .tab-count {
    display: inline-block;
    margin-left: 6px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--faint);
    background: var(--bg2);
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 500;
    letter-spacing: 0.3px;
}
.nav-tabs .nav-link.active .tab-count {
    color: var(--accent-ink);
    background: var(--accent);
    font-weight: 700;
}