/* ── Page and header ────────────────────────────────────────────────────── */
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #0f172a;
    background: #f8fafc;
}
h1, h2, h3, h4 { color: #0f172a; font-weight: 700; }
/* The page's side gutters: the header block, the window summary, the heatmap row and each page's body. */
.page-top { padding: 20px 24px 0 24px; }
.page-band { padding: 0 24px; }
.page-body { padding: 0 24px 24px 24px; }
/* The header: one white bar with the logo, a big title with a short navy rule under it and the pages on the right
   (under the title when the window is too narrow for both), and one slim meta strip below: the window and the
   session's facts, each a caption over its value. The boxes' contents start at the same inset from their left
   edge (--header-inset), so the logo, the first fact of each line of facts and the slider line up. */
.app-header {
    --header-inset: 22px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    align-items: start;
    margin-bottom: 6px;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.app-header__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px;
                   padding: 22px var(--header-inset); background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; }
.app-header__brand { flex: 1 1 480px; display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.app-header__logo { width: 65px; height: 65px; flex: none; margin-top: 1px; }
.app-header__title { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: #0e3079; line-height: 1.15; }
.app-header__title::after { content: ""; display: block; width: 44px; height: 4px; margin-top: 8px; border-radius: 2px; background: #0e3079; }
.app-header__subtitle { margin-top: 8px; font-size: 14px; color: #64748b; }
.app-header__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* The page navigation: the pages as tabs as tall as the logo, the current one navy with a navy rule under it.
   Not filled like the option buttons, so the pages do not read as one more filter. */
.page-nav { display: inline-flex; flex-wrap: wrap; gap: 8px; min-height: 65px; box-sizing: border-box; }
.page-nav__page { display: flex; align-items: center; padding: 10px 14px 7px 14px; border-bottom: 3px solid transparent; font-size: 18px; font-weight: 600;
                  color: #64748b; text-decoration: none; transition: color 0.15s, border-color 0.15s; }
.page-nav__page:hover { color: #0f172a; border-bottom-color: #cbd5e1; border-bottom-width: 8px; }
.page-nav__page--current, .page-nav__page--current:hover { color: #0e3079; border-bottom-color: #0e3079; border-bottom-width: 8px;}
/* The link to subscribe to the alarms: a button after the pages, a line of its own under them on a small screen. */
.app-header__subscribe { margin-left: 8px; padding: 9px 16px; font-size: 14px; white-space: nowrap; }
.app-header__meta {
    grid-column: 1 / -1;
    display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px 0;
    padding: 10px 16px 10px 0; overflow: hidden;
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px;
}
/* The meta strip is a row of labelled facts (small caption over the value), divided by thin rules, and the
   button that reloads the list of windows at its far right. Every fact carries its rule on the left and the
   inset after it; the strip has no left padding and clips, so the fact that starts a line, wherever the facts
   wrap, has its rule cut off and its inset as the strip's padding. */
.app-header__meta-actions { margin-left: auto; display: flex; align-items: center; padding-left: var(--header-inset); }
.app-header__window, .app-header__chips { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; margin-left: -1px; }
.fact { display: inline-flex; flex-direction: column; gap: 2px; padding: 0 16px 0 var(--header-inset); border-left: 1px solid #e2e8f0; }
.fact__k { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; }
.fact__v { font-size: 13.5px; font-weight: 600; color: #1e293b; white-space: nowrap; }
.fact--main .fact__v { color: #0e3079; }
.fact__link { color: #0e3079; text-decoration: none; margin-right: 10px; border-bottom: 1px solid rgba(14, 48, 121, 0.35); }
.fact__link:hover { border-bottom-color: #0e3079; }
.app-header__history { grid-column: 1 / -1; padding: 25px var(--header-inset) 20px var(--header-inset); background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; }
.app-header__history-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin-bottom: 4px; }
.app-header__history-help { font-size: 12.5px; line-height: 1.45; color: #64748b; }
.app-header__history-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; clip-path: inset(-40px 0); }
.app-header__history-nav { display: flex; align-items: center; gap: 4px; }
/* Room on both sides for the first and last window dates, which centre on the rail's ends. */
.app-header__history-slider { flex: 1 1 320px; min-width: 240px; padding: 0 44px; }
/* The window label has its rule in the gap before it: beside the slider the rule shows, wrapped under the buttons
   it falls outside the row, which clips it, and the label lines up with the buttons. */
.app-header__history .history-window-label { position: relative; margin: 0; min-height: 0; padding: 0; border-left: 0; text-align: left; }
.app-header__history .history-window-label::before { content: ""; position: absolute; top: 0; bottom: 0; left: -7px; border-left: 1px solid #e2e8f0; }

/* The window slider (Dash 4 slider classes): a thicker rail, a navy handle with a soft ring on hover, the
   windows as small dots on the rail, the first and last window dates as labels. The label row names the
   selected window, so the slider's own index tooltip stays hidden. */
.app-header__history .dash-slider-root.has-marks { padding: 8px 0 24px 0; }
.app-header__history .dash-slider-track { height: 6px; background-color: #e2e8f0; }
.app-header__history .dash-slider-thumb {
    width: 18px; height: 18px; background-color: #0e3079; border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px #0e3079, 0 1px 3px rgba(15, 23, 42, 0.25);
}
.app-header__history .dash-slider-thumb:hover, .app-header__history .dash-slider-thumb:focus {
    transform: none; outline: none; background-color: #173f8e;
    box-shadow: 0 0 0 1px #173f8e, 0 0 0 6px rgba(14, 48, 121, 0.18);
}
.app-header__history .dash-slider-tooltip { display: none !important; }
.app-header__history .dash-slider-mark { font-size: 11px; color: #64748b; }
.app-header__history .dash-slider-mark-outside-selection { color: #94a3b8; }
.app-header__history .dash-slider-mark:before {
    width: 6px; height: 6px; border-radius: 3px; margin-bottom: 6px; background-color: #ffffff; border: 1px solid #94a3b8;
    box-sizing: border-box;
}
.btn {
    display: inline-block; padding: 7px 14px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; text-decoration: none; background: #ffffff; color: #334155; border: 1px solid #cbd5e1;
    transition: background 0.15s, border-color 0.15s;
}
.btn:hover { background: #f1f5f9; border-color: #94a3b8; }
.btn--primary { background: #0e3079; color: #ffffff; border-color: #0e3079; }
.btn--primary:hover { background: #173f8e; border-color: #173f8e; }
/* Under the title, the pages take the bar's width as three equal tabs, a long name on two lines. */
@media (max-width: 760px) {
    .app-header__actions { width: 100%; }
    .app-header__subscribe { margin-left: 0; }
    .page-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
    .page-nav__page { justify-content: center; text-align: center; line-height: 1.25; }
}

/* The heatmap card and the coverage card beside it; they wrap onto their own lines on narrow windows, and on a
   screen narrower than a card's minimum the card takes the full width. */
.heatmap-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; margin: 0 24px 12px 24px; }
.heatmap-card { flex: 3 1 560px; min-width: min(560px, 100%); }
.coverage-card { flex: 0 1 400px; min-width: min(320px, 100%); max-width: 440px; display: flex; flex-direction: column; }
/* Its title line shows only while the card is folded (on a small screen); open, the figure carries the title. */
.coverage-card__summary { display: none; }
.coverage-details:not([open]) .coverage-card__summary { display: list-item; }
@media (max-width: 760px) {
    .coverage-card { flex-basis: 100%; max-width: none; }
    .coverage-card__summary { display: list-item; }
    .coverage-details[open] .coverage-card__summary { margin-bottom: 8px; }
    .coverage-details[open] .faq-item__q::before { transform: rotate(90deg); }
}
/* The timelines' host and time menus: three across, stacked on a phone. */
.timeline-selectors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }

/* Responsive two-panel grid: stacked on ≤16-inch screens, side-by-side on larger.
   A 16-inch MacBook Pro sits at ~1440–1728 CSS px; external monitors start at 1920 px+. Stacked, a panel
   never grows wider than the screen. */
.summary-panels {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 28px;
    align-items: start;
}

/* History page: heatmap with the selected corridor's summary beside it (stacked on small screens); every
   corridor of the window in a table below. */
.panel-card {
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); margin-bottom: 6px; box-sizing: border-box;
}
.history-window-label { text-align: center; color: #334155; font-size: 14px; font-weight: 600; margin-top: 8px; min-height: 18px; }
/* Both cards take the height of the taller one. */
.history-page-grid { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.history-page-grid > .panel-card { margin-bottom: 0; }
.history-heatmap-col { flex: 2 1 0; min-width: min(560px, 100%); overflow-x: auto; }
.history-summary-col { flex: 1 1 0; min-width: min(340px, 100%); max-width: 560px; }
.history-page-grid + .panel-card { margin-top: 16px; }

@media (min-width: 1600px) {
    .summary-panels {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

/* Corridor summary (history page) */
.corridor-summary { background: #fff; }
.corridor-summary--empty { color: #64748b; font-size: 13px; }
.cs-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-weight: 700; font-size: 15px; color: #0f172a; }
.cs-arrow { color: #94a3b8; }
.cs-site { word-break: break-word; }
.cs-badge-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 6px 0; }
.cs-window { font-size: 12px; color: #64748b; }
.cs-help { font-size: 13px; color: #334155; margin-bottom: 10px; }
.cs-facts { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.cs-strip { display: flex; flex-wrap: wrap; gap: 3px; margin: 2px 0 6px 0; }
.cs-strip__cell { width: 18px; height: 18px; border-radius: 3px; border: 1px solid #cbd5e1; box-sizing: border-box; }
.cs-strip__cell--selected { outline: 2px solid #0891b2; outline-offset: 1px; }
.cs-caption { font-size: 12px; color: #64748b; margin-bottom: 10px; }
.cs-link { font-size: 13px; font-weight: 600; color: #2563eb; text-decoration: none; }
.cs-link:hover { text-decoration: underline; }

/* Prev / next / play buttons below the timeline slider */
.history-nav-btn {
    padding: 4px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #f8fafc;
    color: #334155;
    font-size: 15px;
    cursor: pointer;
    line-height: 1.4;
    transition: background 0.15s, border-color 0.15s;
}
.history-nav-btn:hover {
    background: #e2e8f0;
    border-color: #94a3b8;
}
.history-nav-btn--active,
.history-nav-btn--active:hover {
    background: #0e3079;
    border-color: #0e3079;
    color: #ffffff;
}
.history-nav-btn:active {
    background: #dbeafe;
    border-color: #3b82f6;
}
.history-play-btn {
    min-width: 64px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* ── Outcome badges (pair dropdown + elsewhere) ────────────────────────── */
.outcome-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 11px;
    margin-left: 10px;
    border: 1px solid;
    vertical-align: middle;
}
.outcome-badge--rlp { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.outcome-badge--ts  { background: #ffedd5; color: #9a3412; border-color: #fdba74; }
.outcome-badge--ro  { background: #f3e8ff; color: #6b21a8; border-color: #c084fc; }
.outcome-badge--po  { background: #e0e7ff; color: #3730a3; border-color: #a5b4fc; }
.outcome-badge--fw  { background: #1f2937; color: #f9fafb; border-color: #111827; }
.outcome-badge--uc  { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
/* Above the diagnostic summary of a tests-stopped corridor: what stopped and when, in the class's badge colours. */
.diag-stopped-note { background: #ffedd5; color: #9a3412; border: 1px solid #fdba74; border-radius: 4px;
                     padding: 8px 12px; margin-bottom: 12px; font-size: 14px; line-height: 1.45; }

/* ── Status chips (timestamp / destination / score in trace header) ─────── */
.status-chip {
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.status-chip--neutral { background: #f8fafc; color: #475569; border-color: #cbd5e1; }
.status-chip--good    { background: #ecfdf5; color: #166534; border-color: #86efac; }
.status-chip--bad     { background: #fef2f2; color: #991b1b; border-color: #fca5a5; }
.status-chip--warn    { background: #fff7ed; color: #9a3412; border-color: #fdba74; }
.status-chip__label { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.2; }
.status-chip__value { font-size: 12px; font-weight: 700; margin-top: 2px; line-height: 1.3; }
.status-chip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 6px;
    margin-bottom: 10px;
    align-items: stretch;
}

/* ── Perf metric cards ──────────────────────────────────────────────────── */
.perf-card {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    border-left: 4px solid #cbd5e1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.perf-card--good { border-left-color: #22c55e; }
.perf-card--bad  { border-left-color: #ef4444; }
.perf-card--warn { border-left-color: #f59e0b; }
.perf-card__label     { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #475569; line-height: 1.2; }
.perf-card__primary   { font-size: 20px; font-weight: 700; color: #0f172a; line-height: 1.1; }
.perf-card__secondary { font-size: 11px; line-height: 1.4; color: #475569; margin-top: 3px; }
/* The delay card's opposite direction: one line under the corridor's own, its value in bold */
.perf-card__reverse { font-size: 11px; line-height: 1.4; color: #475569; margin-top: 4px; padding-top: 4px; border-top: 1px dashed #e2e8f0; }
.perf-card__reverse-label { text-transform: uppercase; letter-spacing: 0.04em; font-size: 9px; font-weight: 600; }
.perf-card__reverse-value { font-weight: 700; color: #0f172a; font-size: 13px; }
.perf-card__reverse-value--bad { color: #b91c1c; }
.perf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 6px;
    margin-bottom: 10px;
    align-items: stretch;
}

/* ── Detail-grid (key/value metadata items) ─────────────────────────────── */
.detail-item {
    padding: 7px 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 6px;
    min-width: 0;
}
.detail-item__label { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #64748b; line-height: 1.2; margin-bottom: 2px; }
.detail-item__value { font-size: 11px; line-height: 1.35; color: #0f172a; word-break: break-word; }
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 6px;
    margin-bottom: 10px;
}
.metadata-footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
    align-items: start;
}
.metadata-section__title { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #334155; margin-bottom: 6px; }

/* ── Trace header subtitle ──────────────────────────────────────────────── */
.trace-header__subtitle {
    font-size: 12px;
    color: #475569;
    margin-bottom: 10px;
    min-height: 38px;
    display: flex;
    align-items: flex-start;
}

/* ── Path comparison layout ─────────────────────────────────────────────── */
.comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
    column-gap: 12px;
    row-gap: 0;
    align-items: stretch;
}
/* Each panel spans seven rows of the grid and lays its parts on them (subgrid): side by side, the two panels
   share the rows, so the chips, the cards, the hop tables and the footers line up and match in height. The
   parts carry their own bottom margins. Stacked (narrow), each panel takes its own seven rows. */
.comparison-panel {
    display: grid;
    grid-row: span 7;
    grid-template-rows: subgrid;
    row-gap: 0;
    min-width: 0;
    min-height: 0;
}
.perf-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.comparison-panel > .status-chip-grid,
.comparison-panel > .perf-grid { align-content: stretch; }
.comparison-panel > :last-child { margin-bottom: 12px; }   /* the space between the panels when stacked */
.comparison-status { margin-bottom: 10px; color: #475569; font-size: 12px; }

/* ── Scoring-key match / mismatch banner ────────────────────────────────── */
.match-banner {
    font-size: 11px;
    padding: 5px 10px;
    margin-bottom: 10px;
    border: 1px solid;
    border-radius: 6px;
    font-weight: 600;
}
.match-banner--match    { background: #dcfce7; border-color: #86efac; color: #166534; }
.match-banner--mismatch { background: #fef9c3; border-color: #fde047; color: #854d0e; }

.info-card__body    { font-size: 13px; line-height: 1.5; color: #0f172a; }

/* ── Help questions above the heatmap: collapsed by default ─────────────── */
.faq-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 6px;
    align-items: start;
}
@media (max-width: 1100px) {
    .faq-grid { grid-template-columns: 1fr; }
}
.faq-item { border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; padding: 8px 12px; }
.faq-item[open] { border-color: #bfdbfe; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); }
.faq-item__q { cursor: pointer; font-size: 14px; font-weight: 600; color: #1e293b; list-style: none; }
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::before { content: "▸"; display: inline-block; width: 14px; color: #64748b; transition: transform 0.15s; }
.faq-item[open] .faq-item__q::before { transform: rotate(90deg); }
.faq-item__a { margin-top: 8px; font-size: 13px; line-height: 1.55; color: #0f172a; }
.faq-list { margin: 0; padding-left: 18px; }
.faq-list li { margin-bottom: 4px; }
.faq-classes { list-style: none; margin: 0; padding: 0; }
.faq-classes li { margin-bottom: 5px; }
.faq-note { margin-top: 6px; color: #64748b; font-size: 12px; }
.faq-swatch {
    display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px;
    border: 1px solid #cbd5e1; border-radius: 3px;
}
.faq-swatch--hatched { background: repeating-linear-gradient(135deg, #94a3b8 0 1px, #f1f5f9 1px 4px); }

/* Loading message (the localization page builds every card before showing them). */
.loading-message {
    display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 16px;
    color: #475569; font-size: 14px; font-weight: 600;
}
.loading-spinner {
    width: 36px; height: 36px; border-radius: 50%;
    border: 4px solid #e2e8f0; border-top-color: #0e3079; animation: loading-spin 0.9s linear infinite;
}
@keyframes loading-spin { to { transform: rotate(360deg); } }

/* Localization panel heading: title left, link to the whole window right. */
.loc-heading {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
    margin: 28px 0 12px 0; padding-bottom: 10px; border-bottom: 1px solid #e2e8f0;
}
/* Its title: a caption like the header's facts, then the corridor's two ends as chips (they wrap on a phone). */
.loc-heading__title { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.loc-heading__k {
    font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #64748b;
}
.loc-heading__pair { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.loc-heading__site {
    font-size: 15px; font-weight: 600; color: #0f172a; background: #f1f5f9; border: 1px solid #e2e8f0;
    border-radius: 8px; padding: 4px 10px; overflow-wrap: anywhere;
}
.loc-heading__arrow { font-size: 16px; font-weight: 600; color: #64748b; }
.loc-heading__h { margin: 0; font-size: 18px; font-weight: 700; color: #0f172a; }

/* Localization cards: the title's size, and the facts table's markdown cells carry no paragraph margins. */
.loc-card__title { font-size: 18px; }
.loc-card__facts p { margin: 0; }
.loc-card__facts code { font-size: 13px; }

/* The heatmap's option buttons: a caption, then one on/off button per option (the page's .btn look). Dash 4
   renders each option as <label class="dash-options-list-option" aria-selected> holding a wrapper span with the
   radio input and a text span with our .seg-pill; the input is hidden and the label's aria-selected attribute
   drives the "on" look, so no :has() is needed. */
.seg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.seg-group { display: inline-flex; align-items: center; gap: 10px; }
.seg-caption { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #64748b;
               cursor: help; }
.seg { display: inline-flex; gap: 6px; }
.seg .dash-options-list-option { display: inline-flex; padding: 0; margin: 0; background: transparent; cursor: pointer;
                                 user-select: none; }
.seg .dash-options-list-option-wrapper { position: absolute; width: 0; height: 0; overflow: hidden; opacity: 0; }
.seg .seg-input { margin: 0; }
.seg .dash-options-list-option-text { display: inline-flex; }
.seg .seg-pill { display: inline-block; padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
                 background: #ffffff; color: #334155; border: 1px solid #cbd5e1; cursor: pointer; white-space: nowrap;
                 transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.seg .dash-options-list-option:hover .seg-pill { background: #f1f5f9; border-color: #94a3b8; }
/* "On" is the app's selection navy (#0e3079), kept apart from the heatmap's LPO indigo. */
.seg .dash-options-list-option[aria-selected="true"] .seg-pill { background: #0e3079; color: #ffffff; border-color: #0e3079; }
.seg .dash-options-list-option[aria-selected="true"]:hover .seg-pill { background: #173f8e; border-color: #173f8e; }
.seg .dash-options-list-option:focus-within .seg-pill { box-shadow: 0 0 0 2px rgba(14, 48, 121, 0.4); }

/* Sub-header of the localization and finding pages: the way back and the title on one line; the explanation
   folds away like the main page's questions. */
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 2px 0 12px 0; }
.page-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: #0f172a; }
.page-intro { margin-bottom: 6px; }
.page-intro .faq-item__a { color: #334155; }
/* In the title row the explanation is a small folded item on the right; opened, it drops over the page as a
   panel aligned to the row's right edge. */
.page-head .page-intro { position: relative; margin: 0 0 0 auto; padding: 6px 12px; }
.page-head .page-intro .faq-item__a {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(760px, calc(100vw - 64px));
    margin: 0; padding: 12px 14px; background: #ffffff; border: 1px solid #bfdbfe; border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}

/* The localization page's filters: a captioned multi-select each, always filling the row: four across, two by
   two on a narrow screen, stacked on a phone. The count of cards shown sits on the captions' line at the right. */
.loc-filters {
    position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px;
    margin: 0 0 14px 0; padding: 10px 14px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px;
}
.loc-filter { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.loc-filter__caption {
    font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #64748b;
}
.loc-filters__count { position: absolute; top: 9px; right: 14px; font-size: 12px; color: #475569; white-space: nowrap; }
@media (max-width: 1100px) { .loc-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .loc-filters { grid-template-columns: minmax(0, 1fr); } }

/* ── Phone ──────────────────────────────────────────────────────────────── */
/* Narrower gutters and padding, a smaller header and smaller page tabs, the facts without their dividing rules
   (they wrap onto lines of their own), the menus stacked, a card's permanent link under its title instead of beside
   it. The heatmaps, the path figures of the cards and the hop table keep the width they need (cells to tap, a
   drawing in proportion, most addresses on one line) and scroll sideways in their box. */
@media (max-width: 600px) {
    .page-top { padding: 14px 12px 0 12px; }
    .page-band { padding: 0 12px; }
    .page-body { padding: 0 12px 16px 12px; }
    .heatmap-row { gap: 12px; margin: 0 12px 12px 12px; }
    .panel-card { padding: 12px; }
    .app-header { --header-inset: 12px; }
    .app-header__bar { padding: 10px var(--header-inset); }
    .app-header__brand { gap: 10px; }
    .app-header__logo { width: 44px; height: 44px; }
    .app-header__title { font-size: 23px; }
    .app-header__subtitle { font-size: 13px; }
    .page-nav { gap: 4px; min-height: 0; }
    .page-nav__page { padding: 8px 6px 6px 6px; font-size: 14px; }
    .app-header__meta { padding: 10px 12px 10px 0; }
    .app-header__window, .app-header__chips { row-gap: 8px; }
    .fact { padding-right: 12px; }
    .fact__v { white-space: normal; }
    .app-header__meta-actions { margin-left: 0; padding-top: 4px; }
    .timeline-selectors { grid-template-columns: minmax(0, 1fr); }
    #triage-heatmap-graph, #history-heatmap-graph { min-width: 640px; }
    .loc-card__head { flex-wrap: wrap; }
    .loc-card__title { font-size: 15px; }
    .loc-card__figure { overflow-x: auto; }
    .loc-card__figure > div { min-width: 940px; }
    .hop-table { min-width: 560px; }
}