/* v3 service-detail page: follows docs/redesign/reference/ServiceDetail.dc.html. */
.status-detail-page {
  width: 100%;
}
.status-hero {
  display: flex;
  align-items: flex-start;
  gap: 1.125rem;
  padding: 1.625rem 0 0.5rem;
}
.status-hero-logo {
  width: 52px;
  height: 52px;
  margin-top: 0.15rem;
}
.status-hero-logo .service-initial {
  font-size: 1.7rem;
  color: var(--mut);
}
.status-hero-body { min-width: 0; }
.status-hero h1 {
  margin: 0 0 0.625rem;
  font-size: clamp(1.625rem, 4vw, 2.375rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.localized-context-link {
  margin: 0 0 0.85rem;
  font-size: 0.875rem;
  line-height: 1.45;
}
.localized-context-link a {
  color: var(--mut);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}
.localized-context-link a:hover { color: var(--ink); }
.localized-context-link a:focus-visible {
  color: var(--ink);
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.status-hero .meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.85rem 0 0;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.75rem;
}
.status-hero .meta a {
  color: var(--mut);
  text-decoration: none;
}
.status-hero .meta a:hover,
.status-hero .meta a:focus-visible {
  color: var(--ink);
  text-decoration: underline;
}
.status-detail-page .region-grid-section,
.status-detail-page .status-timeline,
.status-detail-page .where-checked,
.status-detail-page .past-incidents,
.status-detail-page .related-services {
  margin: 2.5rem 0 0;
}
.status-detail-page .region-grid-section > h2,
.status-detail-page .status-timeline > h2,
.status-detail-page .where-checked > h2,
.status-detail-page .past-incidents > h2,
.status-detail-page .related-services > h2 {
  margin: 0 0 0.875rem;
  color: var(--mut);
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
}
/* Status-page sub-answer line: sits directly under the question-shaped
   H1 ("Is X down?") and answers in plain text. Tints just the leading
   word with the verdict accent so the binary answer reads first; the
   verdict banner below still carries pill + icon + label, so color is
   supplementary, not the sole signal (DESIGN.md §8). */
.status-answer {
  margin: 0 0 0.25rem;
  color: var(--ink);
  max-width: 62ch;
  font-size: 1.0625rem;
  line-height: 1.45;
}
.status-answer .answer-lead { font-weight: 700; }
.status-answer.answer-up .answer-lead { color: var(--good); }
.status-answer.answer-degraded .answer-lead { color: var(--slow); }
.status-answer.answer-dns .answer-lead { color: var(--slow); }
.status-answer.answer-down .answer-lead { color: var(--down); }
.status-answer.answer-unknown .answer-lead { color: var(--mut); }
@media (max-width: 520px) {
  .status-hero {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    column-gap: 1.125rem;
    row-gap: 0;
  }
  .status-hero-body { display: contents; }
  .status-hero h1 {
    grid-column: 2;
    overflow-wrap: anywhere;
  }
  .status-hero .status-answer,
  .status-hero .meta { grid-column: 1 / -1; }
  .status-hero .localized-context-link { grid-column: 1 / -1; }
}
.where-checked-note { margin: -0.35rem 0 0.85rem; }
.where-checked-summary {
  margin-bottom: 0.35rem;
  font-weight: 700;
}
.where-checked-summary + .where-checked-note { margin-top: 0; }
.where-checked-summary.is-blocked { color: var(--good); }
.where-checked-summary.is-error,
.where-checked-summary.is-unknown { color: var(--down); }
.where-checked-response-time {
  margin: -0.35rem 0 0.85rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.where-checked-response-time.is-slow { color: var(--slow); }
.where-checked-list {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  background: transparent;
}
.where-checked-list-extra { margin-top: 0.5rem; }
.where-checked-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--line);
}
.where-checked-row:first-child { border-top: 0; }
.where-checked-extra {
  margin-top: 0.85rem;
}
.where-checked-extra summary {
  cursor: pointer;
  color: var(--mut);
  font-weight: 600;
}
.where-checked-extra summary:hover,
.where-checked-extra summary:focus-visible {
  color: var(--ink);
}
.where-checked-extra summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.where-checked-extra-note {
  margin: 0.65rem 0 0;
}
.where-checked-city {
  min-width: 0;
  font-weight: 500;
}
.where-checked-region {
  display: inline-block;
  margin-left: 0.45rem;
  color: var(--mut);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}
.where-checked-network {
  display: inline-block;
  margin-left: 0.45rem;
  color: var(--mut);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}
.where-checked-result {
  flex: 0 0 auto;
  color: var(--mut);
  font-family: var(--mono);
  font-size: 0.8125rem;
  text-align: right;
}
.where-checked-result.is-ok { color: var(--good); }
.where-checked-result.is-blocked { color: var(--good); }
.where-checked-result.is-error,
.where-checked-result.is-unknown { color: var(--down); }
@media (max-width: 520px) {
  .where-checked-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }
  .where-checked-result { text-align: left; }
}

/* SPEC §2.1 per-region verdict grid on /status/<slug>. DESIGN.md §3
   forbids full-card status tints at grid density — tiles read
   state from a 9px pill + a colored border, never a washed surface.
   Continent label is uppercase-micro per the table-header rhythm so
   the verdict line carries the visual weight. */
.region-grid-note {
  margin: -0.35rem 0 0.8rem;
}
.region-grid {
  display: grid;
  gap: 0.625rem;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
}
.region-tile {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.8125rem 0.875rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.region-tile.is-your-area {
  border-color: var(--line2);
}
.region-tile.is-your-area.status-up {
  border-color: var(--good);
}
.region-tile.is-your-area.status-degraded,
.region-tile.is-your-area.status-dns {
  border-color: var(--slow);
}
.region-tile.is-your-area.status-down {
  border-color: var(--down);
}
.region-tile.is-your-area.status-unknown,
.region-tile.is-your-area.status-coverage-gap {
  border-color: var(--line2);
}
.region-tile-head {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.region-tile-your-area {
  flex: 0 0 auto;
  color: var(--mut);
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0;
}
.region-tile.status-up .region-tile-your-area {
  color: var(--good);
}
.region-tile.status-degraded .region-tile-your-area,
.region-tile.status-dns .region-tile-your-area {
  color: var(--slow);
}
.region-tile.status-down .region-tile-your-area {
  color: var(--down);
}
.region-tile.status-unknown .region-tile-your-area,
.region-tile.status-coverage-gap .region-tile-your-area {
  color: var(--mut);
}
.region-tile-verdict {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--mut);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.region-tile.status-unknown .region-tile-verdict {
  color: var(--mut);
  font-weight: 500;
}
/* DETECTDOWN-167: a region with no testing location available this cycle
   is a coverage gap, not a service no-data state. A dashed border + hollow
   dot reads as "structurally absent" rather than the solid-border "we have
   no reading" of .status-unknown, so the tile can't be misread as the
   service having returned nothing. Stays full-width like every other tile
   (DETECTDOWN-75). */
.region-tile.status-coverage-gap {
  border-style: dashed;
  border-color: var(--line);
}
.region-tile.status-coverage-gap .region-tile-verdict {
  color: var(--mut);
  font-weight: 500;
}
.pill.coverage-gap {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--bar-dim);
}

/* Uptime tick-bar strips for the status page incident timeline
   (SPEC §2.2 + DETECTDOWN-51, DESIGN.md §4.7). Two strips sit under
   one <h2>: the 24h strip answers "is it down right now?", the 7-day
   strip answers "is this a repeat outage?". Sub-headers ride the
   uppercase-micro register used by table headers and region-tile
   heads (DESIGN.md §2.2) so they read as labels, not section
   titles competing with the <h2>; the uptime figure right-aligns on
   the same line. */
.status-timeline-panel {
  padding: 1.125rem 1.125rem 0.875rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.status-timeline-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.status-timeline-pct {
  margin: 0;
  color: var(--ink);
}
.status-timeline-pct strong {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.status-timeline-pct span {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}
.status-timeline-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 0.125rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
}
.status-timeline-toggle[hidden] {
  display: none;
}
.status-timeline-toggle-button {
  min-width: 2.4rem;
  min-height: 1.75rem;
  padding: 0.25rem 0.55rem;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--mut);
  font: 600 0.75rem/1 var(--sans);
  cursor: pointer;
}
.status-timeline-toggle-button[aria-pressed="true"] {
  background: var(--raise);
  color: var(--ink);
}
.status-timeline-toggle-button:hover {
  color: var(--ink);
}
.status-timeline-toggle-button:focus-visible,
.status-timeline-cell:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.status-timeline-chart {
  margin-top: 0.85rem;
}
.status-timeline-chart[hidden] {
  display: none;
}
.status-timeline-overflow-cue {
  margin: 0 0 0.5rem;
  color: var(--mut);
  font-family: var(--mono);
  font-size: 0.6875rem;
}
.status-timeline-overflow-cue[hidden] {
  display: none;
}
.status-timeline-viewport {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-color: var(--faint) var(--raise);
  scrollbar-width: auto;
}
.status-timeline-viewport::-webkit-scrollbar {
  height: 10px;
}
.status-timeline-viewport::-webkit-scrollbar-track {
  background: var(--raise);
  border-radius: 5px;
}
.status-timeline-viewport::-webkit-scrollbar-thumb {
  background: var(--faint);
  border: 2px solid var(--raise);
  border-radius: 5px;
}
.status-timeline-track {
  width: max-content;
  min-width: 100%;
}
.status-timeline-cells {
  --status-timeline-cell-height: 2.875rem;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 2px;
}
.status-timeline-cells[data-status-timeline-cells-range="7d"] {
  --status-timeline-cell-height: 2.125rem;
}
.status-timeline-cell {
  --status-cell-color: var(--bar-dim);
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: var(--status-timeline-cell-height);
  aspect-ratio: 13 / 18;
  padding: 0;
  border: 0;
  border-radius: 1px;
  background: var(--bar-dim);
  cursor: pointer;
}
.status-timeline-cell.status-up {
  --status-cell-color: var(--bar-up);
  background: var(--bar-up);
}
.status-timeline-cell.status-degraded,
.status-timeline-cell.status-dns {
  --status-cell-color: var(--slow);
  background: var(--slow);
}
.status-timeline-cell.status-down {
  --status-cell-color: var(--down);
  background: var(--down);
}
.status-timeline-cell.status-nodata {
  --status-cell-color: var(--bar-dim);
  background: var(--bar-dim);
  opacity: 0.55;
}
.status-timeline-cell:hover,
.status-timeline-cell.is-selected {
  background: var(--status-cell-color);
}
.status-timeline-cell:hover {
  box-shadow: inset 0 0 0 1px var(--ink);
}
.status-timeline-cell.is-selected {
  box-shadow: inset 0 0 0 2px var(--bg), inset 0 0 0 3px var(--ink);
}
.status-timeline-cell.status-nodata.is-selected,
.status-timeline-cell.status-nodata:hover {
  opacity: 1;
}
@media (forced-colors: active) {
  .status-timeline-overflow-cue {
    color: CanvasText;
  }
  .status-timeline-cell.is-selected {
    outline: 2px solid ButtonText;
    outline-offset: -3px;
  }
  .status-timeline-cell:focus-visible {
    outline-color: Highlight;
    outline-offset: 2px;
  }
}
.status-timeline-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.6875rem;
}
.status-timeline-barinfo {
  margin: 0.875rem 0 0;
  padding: 0.8125rem 0.9375rem;
  min-height: 1.45rem;
  color: var(--mut);
  background: var(--raise);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: 0.875rem;
}
.status-timeline-note {
  margin: 0.5rem 0 0;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.6875rem;
}
.status-timeline-note[hidden] {
  display: none;
}
.status-timeline.status-timeline-enhanced h3.status-timeline-subhead,
.status-timeline.status-timeline-enhanced h3.status-timeline-subhead + .status-timeline-note,
.status-timeline.status-timeline-enhanced .status-timeline-strip {
  display: none;
}
.status-timeline h3.status-timeline-subhead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 1.2rem 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mut);
}
.status-timeline h3.status-timeline-subhead:first-of-type {
  margin-top: 0.1rem;
}
.status-timeline-uptime { font-variant-numeric: tabular-nums; }
.status-timeline-strip {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.status-timeline-strip .tickbar {
  display: block;
  width: 100%;
  height: 46px;
}
.status-timeline-strip .tickbar-empty {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--bar-dim) 38%, transparent) 0 6px, transparent 6px 14px);
  border-radius: var(--r);
}
/* DESIGN.md §4.7: categorical color, full-height ticks. Healthy green
   is slightly translucent so a clean week recedes and an incident bar
   pops; missing hours are --bar-dim at low alpha — visibly distinct
   from healthy, never green, never counted in the uptime figure. */
.tickbar .tick-up { fill: var(--bar-up); fill-opacity: 1; }
.tickbar .tick-degraded { fill: var(--slow); }
.tickbar .tick-dns { fill: var(--slow); }
.tickbar .tick-down { fill: var(--down); }
.tickbar .tick-missing { fill: var(--bar-dim); fill-opacity: 0.38; }

@media (max-width: 720px) {
  .status-timeline-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.65rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .status-timeline-cell,
  .status-timeline-toggle-button {
    transition: none;
  }
}

/* DETECTDOWN-133 — "Related services" cross-link module on /status/<slug>.
   Reuses the .now-card anatomy (logo box + name + verdict pill, whole
   card links into /status/<slug>) but lays the siblings out as a compact
   responsive grid rather than the single-column incident stack: these are
   peer browse links, not a ranked incident feed, so the denser grid reads
   right. A sibling with no cached verdict renders the muted "—"
   placeholder below — honest "not measured yet", never a fake "Up". */
.related-services { margin: 0 0 2rem; }
.related-services h2 { margin: 0 0 0.35rem; }
.related-list {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.related-services .now-card-body { flex: 1; }
.related-services .now-card-headline {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  row-gap: 0.2rem;
}
.related-services .now-card-name { flex: 0 0 100%; min-width: 0; }
.related-services .now-card-verdict { white-space: nowrap; }
.related-no-data { color: var(--mut); }

@media (max-width: 520px) {
  .related-list { gap: 0.375rem; }
  .related-services .now-card {
    min-height: 44px;
    padding: 0.625rem 0.75rem;
    gap: 0.625rem;
  }
  .related-services .now-card-headline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 0.4rem;
    row-gap: 0.15rem;
  }
  .related-services .now-card-name {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .related-services .now-card-verdict {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}