/* ==========================================================================
   Satcore SmokePing — public pages (dashboard + target detail)
   Page-specific pieces on top of base.css; tokens and components come from
   there.

   Index
   --------------------------------------------------------------------------
   Shared ........ .c-muted
   Dashboard ..... .dash-head .dash-stats .dash-updated .dash-banner
                   .dash-toolbar .dash-search .dash-count .dash-results
                   .dash-section .dash-issues .dash-empty
   Target cards .. .tgrid .tcard .tcard-head .tcard-id .tcard-name
                   .tcard-status .tcard-value .tcard-note .tcard-stats
   Target table .. .dash-table-card .dash-table .trow-target .trow-name
                   .trow-place .trow-dot .trow-value .col-target .col-status
                   .col-latency .col-loss .col-jitter .col-minmax .col-spark
   Target head ... .tgt-head .tgt-heading .tgt-group .tgt-title-row
                   .tgt-title .tgt-status .tgt-live .tgt-meta .tgt-desc
                   .tgt-err .tgt-banner .tgt-stats .stat.tone-amber|red
   Chart card .... .chart-card .chart-head .chart-titles .chart-sub
                   .chart-controls .chart-custom .chart-zoom .chart-wrap
                   .chart-host (uPlot overrides) .chart-overlay .chart-busy
                   .chart-marker .chart-tip extras .chart-foot
                   .chart-legend .chart-summary .chart-help
   MTR card ...... .mtr-card .mtr-status .mtr-tabs .mtr-controls .mtr-nav
                   .mtr-time .mtr-body .mtr-table .mtr-host .mtr-silent
                   .mtr-masked .mtr-hints .hint-warn .mtr-note .mtr-foot
   Routes card ... .routes-card .route-list .route-btn .route-hop
   ========================================================================== */

/* ── Shared ──────────────────────────────────────────────────────────────── */
/* fmt.lossTone() returns c-muted; base.css only ships .muted. */
.c-muted { color: var(--muted) !important; }

/* Segmented controls scroll with a hidden scrollbar; util.fadeEdges() marks
   the clipped edge(s) so they fade out. */
.seg.fade-end {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
}
.seg.fade-start {
  -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(270deg, #000 calc(100% - 48px), transparent);
}
.seg.fade-start.fade-end {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

/* ── Dashboard ───────────────────────────────────────────────────────────── */
.dash-head .page-title { max-width: 20ch; }
.dash-head .eyebrow svg { width: 18px; height: 18px; }

.dash-stats { --stat-min: 168px; }
.dash-stats .stat-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-stats .has-issues .stat-sub { color: var(--text); }
.dash-updated .stat-num .unit { margin-left: 0.1em; }
.dash-updated.is-stale .stat-num { color: var(--amber); }

.dash-banner:empty,
.dash-empty:empty { display: none; }

.dash-toolbar { display: grid; gap: 0.75rem; min-width: 0; }
.dash-toolbar > .toolbar { gap: 0.65rem 0.75rem; }
.toolbar .dash-search { flex: 1 1 16rem; max-width: 26rem; }
.dash-toolbar .select { width: auto; min-width: 11.5rem; }
.dash-count {
  margin-left: auto;
  font-size: 0.82rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.dash-count:empty { display: none; }

.dash-results { display: grid; gap: clamp(1.9rem, 3.4vw, 2.6rem); min-width: 0; }
.dash-section { gap: 0.95rem; }
/* Issue pills wrap below the title on narrow screens instead of squeezing it. */
.dash-section .section-head { flex-wrap: wrap; row-gap: 0.5rem; }
.dash-section .section-head .kicker { overflow-wrap: normal; }
.dash-issues { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; flex-shrink: 0; margin-left: auto; }
.dash-issues:empty { display: none; }
.dash-issues .pill { height: 22px; padding: 0 0.55rem 0 0.5rem; font-size: 0.72rem; }

/* ── Target cards ────────────────────────────────────────────────────────── */
.tgrid { --min: 270px; gap: 0.9rem; }

.tcard {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.05rem 1.15rem 1rem;
  /* 1000+ cards: skip layout and paint for the ones far off-screen. */
  content-visibility: auto;
  contain-intrinsic-size: auto 192px;
}
.tcard.st-warn { border-color: color-mix(in srgb, var(--amber) 28%, var(--line)); }
.tcard.st-down { border-color: color-mix(in srgb, var(--red) 34%, var(--line)); }
.tcard.st-warn:hover,
.tcard.st-down:hover { border-color: rgba(201, 151, 98, 0.32); }

.tcard-head { display: flex; align-items: flex-start; gap: 0.6rem; min-width: 0; }
/* centred on the first line of the name (1.02rem × 1.35) */
.tcard-head > .flag { margin-top: calc((1.377rem - var(--flag-h, 15px)) / 2); }
.tcard-id { flex: 1 1 auto; min-width: 0; }
.tcard-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--heading);
  transition: color 0.2s ease;
}
.tcard:hover .tcard-name { color: var(--gold-soft); }
.tcard-status {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  min-height: 1.35rem;
}
.tcard-status > .dot { width: 9px; height: 9px; }
.tcard-status .pill { height: 22px; padding: 0 0.55rem 0 0.5rem; font-size: 0.72rem; }

.tcard-value {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}
.tcard-value .stat-num { font-size: 1.9rem; }
.tcard.st-down .tcard-value .stat-num,
.tcard.st-unknown .tcard-value .stat-num { color: var(--muted); }
.tcard-note {
  min-width: 0;
  overflow: hidden;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tcard .spark-canvas { --spark-h: 44px; }

.tcard-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}
.tcard-stats > div { min-width: 0; }
.tcard-stats dt,
.tcard-stats dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcard-stats dt {
  font-size: 0.63rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.tcard-stats dd {
  margin-top: 0.2rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--heading);
  font-variant-numeric: tabular-nums;
}

/* ── Target table (list view) ────────────────────────────────────────────── */
/* Fixed layout with set column widths: the tables of all groups line up,
   and columns drop out by priority as the screen narrows (see Responsive). */
.dash-table-card { content-visibility: auto; contain-intrinsic-size: auto 560px; }
.dash-table { table-layout: fixed; }
.dash-table td { padding-top: 0.6rem; padding-bottom: 0.6rem; }
.dash-table .col-status { width: 9rem; }
.dash-table .col-latency { width: 8rem; }
.dash-table .col-loss { width: 7rem; }
.dash-table .col-jitter { width: 6.75rem; }
.dash-table .col-minmax { width: 8.5rem; }
.dash-table .col-spark { width: 12rem; }
.trow-target { overflow: hidden; }
.trow-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font-weight: 600;
  color: var(--heading);
}
.trow-name > a {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.dash-table tr.is-link:hover .trow-name > a { color: var(--gold-soft); }
.trow-name > .flag { --flag-h: 14px; }
.trow-place { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow-dot { display: none; }
.trow-value { font-weight: 600; }
.dash-table .col-status { white-space: nowrap; }
.dash-table .col-status .pill { height: 24px; font-size: 0.76rem; }
.dash-table .spark-canvas { --spark-h: 30px; }

/* ── Target page: head ───────────────────────────────────────────────────── */
.tgt-head { gap: 0.55rem; }
.tgt-head > .back-link { margin-bottom: 0.4rem; }
.tgt-head .page-head-row { align-items: flex-end; }
.tgt-heading { display: grid; gap: 0.5rem; min-width: 0; }
.tgt-group { font-size: 0.98rem; }
.tgt-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; min-width: 0; }
.tgt-title { display: flex; align-items: center; gap: 0.55rem; min-width: 0; overflow-wrap: anywhere; }
.tgt-title > .flag { --flag-h: 0.6em; border-radius: 3px; }
.tgt-status { display: inline-flex; }
.tgt-live { padding-bottom: 0.35rem; }
.tgt-meta { margin-top: 0.2rem; }
.tgt-desc { max-width: 52rem; font-size: 0.95rem; color: var(--text); }
.tgt-err:empty,
.tgt-banner:empty { display: none; }
.tgt-err { width: 100%; max-width: 52rem; margin-top: 0.4rem; }

.tgt-stats { --stat-min: 158px; }
/* Min / max holds two values: smaller, and allowed to wrap after the slash
   so it never runs out of its tile. */
.stat-pair .stat-num { font-size: clamp(1.25rem, 1.75vw, 1.7rem); white-space: normal; }
.stat.tone-amber .stat-num { color: var(--amber); }
.stat.tone-red .stat-num { color: var(--red); }

/* ── Chart card ──────────────────────────────────────────────────────────── */
.chart-card { display: grid; gap: 1rem; }
.chart-card:hover { border-color: var(--line); }
.chart-card > .card-head { align-items: flex-start; margin-bottom: 0; }
.chart-titles { display: grid; gap: 0.3rem; min-width: 0; }
.chart-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.75rem; font-variant-numeric: tabular-nums; }
.chart-sub .live { font-size: inherit; font-weight: 600; color: var(--green); }
.chart-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-width: 0; max-width: 100%; }
.chart-custom-btn.is-active { border-color: var(--gold-a35); color: var(--gold-soft); }

.chart-custom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
  padding: 0.95rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.22);
}
.chart-custom .field { flex: 1 1 12.5rem; max-width: 16rem; }
.chart-custom-actions { display: flex; gap: 0.5rem; }
.chart-custom .field-error { flex-basis: 100%; }

.chart-zoom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.7rem;
  padding: 0.5rem 0.55rem 0.5rem 0.9rem;
  border: 1px solid var(--gold-a20);
  border-radius: 12px;
  background: var(--gold-a10);
  font-size: 0.86rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.chart-zoom > svg { width: 16px; height: 16px; color: var(--gold); }
.chart-zoom-label { font-weight: 600; color: var(--gold-soft); }
.chart-zoom .btn { margin-left: auto; }

.chart-wrap { position: relative; min-width: 0; }
.chart-host { min-height: 240px; transition: opacity 0.2s ease; }
.chart-wrap.is-loading .chart-host { opacity: 0.55; }
.chart-busy { position: absolute; top: 0.25rem; right: 3.5rem; color: var(--gold); }
.chart-overlay {
  position: absolute;
  inset: 0 0 44px;
  display: grid;
  place-items: center;
  padding: 1rem;
  pointer-events: none;
}
.chart-overlay .alert { max-width: 32rem; pointer-events: auto; }
.chart-empty {
  display: grid;
  gap: 0.3rem;
  max-width: 26rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(19, 10, 15, 0.86);
  text-align: center;
}
.chart-empty .empty-title { font-size: 1rem; }
.chart-empty .empty-text { font-size: 0.85rem; }

/* uPlot (vendor/uPlot.min.css) in the dark theme */
.chart-host .uplot { width: 100%; font-family: var(--font-body); line-height: 1.4; }
.chart-host .u-over { cursor: crosshair; }
.chart-host .u-select {
  background: rgba(201, 151, 98, 0.14);
  box-shadow: inset 1px 0 0 rgba(201, 151, 98, 0.6), inset -1px 0 0 rgba(201, 151, 98, 0.6);
}
.chart-host .u-hz .u-cursor-x { border-right: 1px dashed rgba(226, 189, 143, 0.45); }
.chart-marker {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: #f3d6ae;
  box-shadow: 0 0 0 3px rgba(243, 214, 174, 0.22);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  will-change: transform;
}
.chart-marker.is-visible { opacity: 1; }
.chart-tip .swatch { width: 10px; height: 10px; }
.chart-tip .sw-med { --sw: #f3d6ae; height: 2px; box-shadow: none; }
.chart-tip .sw-minmax { --sw: rgba(201, 151, 98, 0.22); }
.chart-tip .sw-iqr { --sw: rgba(201, 151, 98, 0.55); }
.chart-tip .sw-loss { --sw: rgba(226, 99, 111, 0.85); }
.chart-tip .sw-none { visibility: hidden; }
.chart-tip-none,
.chart-tip-hint { margin-top: 0.3rem; font-size: 0.76rem; color: var(--muted); }
.chart-tip-hint { padding-top: 0.4rem; border-top: 1px solid var(--line); color: var(--gold); }

.chart-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.25rem; }
.chart-legend { gap: 0.45rem 1.15rem; }
.chart-legend .legend-item { cursor: help; }
.chart-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.chart-sum { min-width: 0; }
.chart-sum dt {
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.chart-sum dd {
  margin-top: 0.1rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--heading);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.chart-help { margin-top: -0.2rem; }

/* ── MTR card ────────────────────────────────────────────────────────────── */
.mtr-card:hover { border-color: var(--line); }
.mtr-card > .card-head { align-items: flex-start; margin-bottom: 0.4rem; }
.mtr-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.75rem;
  min-height: 26px;
  font-size: 0.86rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.mtr-status .spinner { width: 14px; height: 14px; color: var(--gold); }
.mtr-when { font-weight: 600; color: var(--heading); }
.mtr-tabs { margin: 0 var(--card-pad); }
.mtr-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.75rem;
  padding: 0.95rem var(--card-pad) 0;
}
.mtr-nav { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
/* Wide enough for the longest native format ("10/07/2026, 08:38:30 PM");
   one width for every window so the controls do not jump. */
.mtr-time { flex: 0 1 16.75rem; width: 16.75rem; min-width: 0; font-variant-numeric: tabular-nums; }
.mtr-controls > .btn-outline { margin-left: auto; }
.mtr-body { min-width: 0; padding-top: 0.95rem; transition: opacity 0.2s ease; }
.mtr-body.is-loading { opacity: 0.6; }
.mtr-body .empty { padding-block: 2.25rem; }
.mtr-table { --table-min: 800px; }
.mtr-table td { vertical-align: top; }
.mtr-table td.num { padding-top: 0.6rem; }
.mtr-ttl { font-weight: 600; color: var(--muted) !important; }
.mtr-hostcell { min-width: 16rem; max-width: 30rem; }
.mtr-host { min-width: 0; }
.mtr-host + .mtr-host,
.mtr-host + .sub { margin-top: 0.4rem; }
.mtr-host-main { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; min-width: 0; }
.mtr-host-name {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  font-weight: 500;
  color: var(--heading);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mtr-host-alt .mtr-host-name { font-size: 0.86rem; font-weight: 400; color: var(--text); }
.mtr-host .as-badge { max-width: 15rem; }
.mtr-silent {
  font-style: italic;
  color: var(--muted);
  cursor: help;
  text-decoration: underline dotted rgba(255, 236, 222, 0.3);
  text-underline-offset: 3px;
}
.mtr-table tr.is-silent td { color: var(--muted); }
/* The destination's address is private (SPEC 13.2): "***" with a tooltip. */
.mtr-masked {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--heading);
  cursor: help;
  text-decoration: underline dotted rgba(255, 236, 222, 0.3);
  text-underline-offset: 3px;
}
.mtr-hints { display: grid; gap: 0.5rem; padding: 0.95rem var(--card-pad) 0; }
.hint-warn svg { color: var(--amber); }
/* Methodology footnote under every report, quieter than the hints above it. */
.mtr-note { font-size: 0.78rem; line-height: 1.45; }
.mtr-note svg { width: 14px; height: 14px; margin-top: 0.1rem; color: var(--muted); }
.mtr-error { padding: 0 var(--card-pad); }
.card-flush > .card-foot.mtr-foot { margin-top: 0.95rem; }
.mtr-probes { color: var(--muted); }

/* ── Routes card ─────────────────────────────────────────────────────────── */
.routes-card:hover { border-color: var(--line); }
.routes-card > .card-head { align-items: flex-start; }
.routes-head-meta { display: inline-flex; align-items: center; gap: 0.5rem; }
.routes-busy .spinner { width: 14px; height: 14px; color: var(--gold); }
.route-list {
  display: grid;
  max-height: 32rem;
  margin: 0 calc(var(--card-pad) * -1) calc(var(--card-pad) * -0.5);
  padding: 0 var(--card-pad);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.route-item + .route-item { border-top: 1px solid var(--line); }
.route-btn {
  display: grid;
  gap: 0.45rem;
  width: calc(100% + 1.5rem);
  margin: 0 -0.75rem;
  padding: 0.85rem 0.75rem;
  border: 0;
  border-radius: 10px;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.route-btn:hover { background: rgba(255, 255, 255, 0.03); }
.route-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; }
.route-time { font-weight: 600; color: var(--heading); font-variant-numeric: tabular-nums; }
.route-summary { font-size: 0.85rem; color: var(--muted); }
.route-go { width: 16px; height: 16px; margin-left: auto; color: var(--muted); transition: transform 0.2s var(--ease-out), color 0.2s ease; }
.route-btn:hover .route-go { color: var(--gold); transform: translateX(2px); }
.route-hops { display: grid; gap: 0.3rem; }
.route-hop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.55rem; min-width: 0; font-size: 0.84rem; }
.route-ttl { min-width: 2.1rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.route-addr { min-width: 0; overflow-wrap: anywhere; }
.route-addr.is-empty { font-family: var(--font-body); font-style: italic; }
/* The destination is shown by the target's name, not its address. */
.route-addr.is-masked { font-family: var(--font-body); font-weight: 600; cursor: help; }
.mtr-dest { cursor: help; }
.route-arrow { color: var(--muted); }
.routes-note { padding-top: 0.75rem; font-size: 0.82rem; color: var(--muted); }
.routes-empty { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.2rem 0 0.1rem; }
.routes-empty > svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 0.1rem; color: var(--green); }
.routes-empty-title { font-weight: 600; color: var(--heading); }
.routes-empty-text { font-size: 0.86rem; color: var(--muted); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
/* List view: jitter and min/max go first, then the status pill (a dot next
   to the name takes over), then the sparkline. */
@media (max-width: 1180px) {
  .dash-table .col-jitter,
  .dash-table .col-minmax { display: none; }
  .dash-table .col-spark { width: 10.5rem; }
}
@media (max-width: 960px) {
  .dash-table .col-status { display: none; }
  .trow-dot { display: inline-flex; }
  .dash-table .col-latency { width: 6.75rem; }
  .dash-table .col-loss { width: 6rem; }
  .dash-table .col-spark { width: 8.5rem; }
}
@media (max-width: 560px) {
  .dash-table .col-spark { display: none; }
  .dash-table .col-latency { width: 5.9rem; }
  .dash-table .col-loss { width: 5.1rem; }
  .dash-table th:not(:first-child),
  .dash-table td:not(:first-child) { padding-left: 0.5rem; }
  .dash-table thead th,
  .dash-table thead .num { white-space: normal; vertical-align: bottom; }
}
@media (max-width: 720px) {
  .toolbar .dash-search { flex-basis: 100%; max-width: none; }
  .dash-toolbar .toolbar-group { flex: 1 1 100%; }
  .dash-toolbar .select { flex: 1 1 auto; min-width: 0; }
  .dash-count { margin-left: 0; }
  .tcard-value .stat-num { font-size: 1.75rem; }

  .tgt-head .page-head-row { align-items: flex-start; }
  .tgt-live { padding-bottom: 0; }
  .chart-controls { width: 100%; }
  .chart-controls > .seg { flex: 1 1 auto; }
  .chart-busy { right: 0.5rem; }
  .chart-summary { gap: 0.7rem 1.4rem; }
  .mtr-controls > .btn-outline { margin-left: 0; }
  .route-btn { width: calc(100% + 1rem); margin: 0 -0.5rem; padding-inline: 0.5rem; }
}
@media (max-width: 560px) {
  /* five tiles in two columns: the clock takes the last row on its own */
  .dash-stats .dash-updated { grid-column: 1 / -1; }
}