/* ==========================================================================
   Status v2 (/status/v2) — built on Skynet UI (https://skynetui.com)

   Page-local layout only. Components come from skynet-ui.css, palettes from
   themes-v2.css, and every colour below is a Skynet UI token so the page
   follows whichever of the twelve palettes the reader picked.

   THE CHARTS' COLOURS ARE MEASURED, NOT PICKED. --sk-success / --sk-warning /
   --sk-danger clear 3:1 against both --sk-surface and --sk-bg in all twelve
   palettes (worst case 4.03:1, crimson-light danger on background), which is
   the floor a chart mark has to meet. What they do NOT clear is each other:
   green against red is ΔE 6.5 under deuteranopia on the dark palettes, and on
   the light ones amber against red is ΔE 9.9 under *normal* vision. So no mark
   on this page is distinguished by colour alone — see .sv2-day below.
   ========================================================================== */

/* Skynet UI declares `.hidden` before its component display rules, and every
   `display` rule in this file is a class selector — which ties with `[hidden]`
   on specificity and then wins on order. Both guards, up front. */
.sv2 .hidden { display: none !important; }
.sv2 [hidden] { display: none !important; }

.sv2-main { padding-bottom: 4rem; }

/* ---------- the one rule that makes this page fit a phone ------------------
   A grid or flex ITEM defaults to `min-width: auto`, which is its MIN-CONTENT
   width — not zero. The uptime strip's ninety 4px columns come to ~450px of
   min-content and the daily table to ~510px, so every grid track holding them
   was sized 455px wide inside a 320px card. The card is `overflow: hidden`
   (Skynet UI's own `.sk-card` is, and so is `.sv2-card-flush`), so that width
   was not scrolled, it was CLIPPED: a third of every service card was cut off
   the right edge of the screen with no way to reach it.

   And it is invisible to the usual check. `documentElement.scrollWidth` equals
   `clientWidth` the whole time, because the overflow never reaches the
   document — it is swallowed by a card two levels down. The page measured as
   "no horizontal scroll" at every width while showing two thirds of itself.
   Measure the gap between an element and its clipping ancestor, not the
   document's scroll width.

   Every item of every grid and flex container on this page is therefore free
   to shrink, and the two things that really are wider than a phone — the strip
   and the table — carry their own `overflow-x: auto` and scroll inside it. */
.sv2-service-body > *,
.sv2-services > *,
.sv2-hero > *,
.sv2-windows > *,
.sv2-incident-list > *,
.sv2-incident-head > *,
.sv2-service-head > *,
.sv2-board-head > *,
.sv2-figcap > *,
.sv2-meter > * {
  min-width: 0;
}

/* Off-screen until focused, then a real button on a real surface. The
   homepage's version of this was 2.2:1 in dark before the theme audit found
   it, so this one wears tokens rather than a hardcoded pair. */
.sv2-skip {
  position: absolute;
  left: -9999px;
  z-index: 10001;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  /* The button treatment applies even off-screen, on purpose. Left to the
     framework's link colour the unfocused link measures 3.47:1 on the dark
     palettes — and the theme audit measures it whether it is on screen or
     not, which is how this was caught. White on --sk-primary is the one
     pairing themeRegistry guarantees at 4.5:1 in all twelve palettes. */
  background: var(--sk-primary);
  color: #fff;
  font-weight: 600;
}
.sv2-skip:focus {
  left: 1rem;
  top: calc(var(--skv2-h, 60px) + 0.5rem);
}

/* ---------- the headline -------------------------------------------------- */
.sv2-hero {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  margin: 1.75rem 0 1.25rem;
  padding: 1.5rem;
  border: 1px solid var(--sk-border);
  border-radius: 16px;
  background: var(--sk-surface);
}
@media (min-width: 860px) {
  .sv2-hero { grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; }
}
/* The state tints the card's left edge — a fourth channel behind the icon and
   the words, never instead of them. */
.sv2-hero[data-state="success"] { border-left: 4px solid var(--sk-success); }
.sv2-hero[data-state="warning"] { border-left: 4px solid var(--sk-warning); }
.sv2-hero[data-state="danger"]  { border-left: 4px solid var(--sk-danger); }
.sv2-hero[data-state="quiet"]   { border-left: 4px solid var(--sk-border-2); }

.sv2-hero-state { display: flex; gap: 1rem; align-items: flex-start; min-width: 0; }
.sv2-hero-icon { flex: none; font-size: 1.75rem; line-height: 1.2; }
.sv2-hero[data-state="success"] .sv2-hero-icon { color: var(--sk-success); }
.sv2-hero[data-state="warning"] .sv2-hero-icon { color: var(--sk-warning); }
.sv2-hero[data-state="danger"]  .sv2-hero-icon { color: var(--sk-danger); }
.sv2-hero[data-state="quiet"]   .sv2-hero-icon { color: var(--sk-muted); }

.sv2-hero-title {
  margin: 0 0 0.35rem;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.sv2-hero-sub { margin: 0 0 0.35rem; color: var(--sk-text-2); line-height: 1.5; }
.sv2-hero-when { margin: 0; color: var(--sk-muted); font-size: 0.85rem; }
.sv2-hero-when a { color: var(--sk-primary-text); text-decoration: underline; }

/* The one hero figure on the page. Proportional figures on purpose —
   tabular-nums gives every digit the width of a zero and makes a number this
   size read loose. */
.sv2-hero-figure { margin: 0; text-align: left; }
@media (min-width: 860px) { .sv2-hero-figure { text-align: right; } }
.sv2-hero-number {
  font-size: clamp(2.75rem, 2rem + 3vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--sk-text);
}
.sv2-hero-caption { margin: 0.4rem 0 0; color: var(--sk-text-2); font-size: 0.9rem; line-height: 1.4; }
.sv2-hero-caption-sub { color: var(--sk-muted); font-size: 0.8rem; }

.sv2-alert { display: flex; gap: 0.6rem; align-items: flex-start; margin-bottom: 1.25rem; }

/* ---------- sections ------------------------------------------------------ */
.sv2-section { margin: 2rem 0; }
.sv2-h2 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.9rem;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}
.sv2-h2 i { color: var(--sk-primary-text); font-size: 0.95em; }
.sv2-cat {
  margin: 1.6rem 0 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sk-muted);
}
.sv2-services { display: grid; gap: 1rem; }
.sv2-card-flush { overflow: hidden; }
.sv2-empty { border: 1px dashed var(--sk-border-2); border-radius: 14px; padding: 2rem 1rem; }

/* ---------- the legend ---------------------------------------------------- */
.sv2-board-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
}
.sv2-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin: 0 0 0.9rem;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  color: var(--sk-text-2);
}
.sv2-legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
.sv2-key-note { color: var(--sk-muted); }
/* A legend swatch mirrors its mark: these marks are filled rects, so is this. */
.sv2-key { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.sv2-key-up { background: var(--sk-success); }
.sv2-key-degraded { background: var(--sk-warning); }
.sv2-key-down { background: var(--sk-danger); }
.sv2-key-none { background: var(--sk-surface-2); border: 1px solid var(--sk-border-2); }

/* ---------- one service --------------------------------------------------- */
/* The anchor a link into the board lands on, clear of the fixed header. */
.sv2-service { scroll-margin-top: calc(var(--skv2-h, 60px) + 1rem); }
.sv2-service-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  align-items: flex-start;
  justify-content: space-between;
}
.sv2-service-id { min-width: 0; }
.sv2-service-name { margin: 0; font-size: 1.02rem; letter-spacing: -0.01em; }
.sv2-service-desc { margin: 0.2rem 0 0; color: var(--sk-muted); font-size: 0.85rem; }
.sv2-service-now { text-align: left; }
@media (min-width: 700px) { .sv2-service-now { text-align: right; } }
.sv2-service-meta { margin: 0.3rem 0 0; color: var(--sk-muted); font-size: 0.8rem; }
.sv2-ms { font-variant-numeric: tabular-nums; color: var(--sk-text-2); }
.sv2-pill { display: inline-flex; align-items: center; gap: 0.35rem; }
.sv2-pill-quiet { background: var(--sk-surface-2); color: var(--sk-text-2); border: 1px solid var(--sk-border-2); }
.sv2-service-body { display: grid; gap: 1.35rem; }

/* ---------- the four windows ---------------------------------------------- */
.sv2-windows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.75rem;
  margin: 0;
}
.sv2-window {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--sk-border);
  border-radius: 10px;
  background: var(--sk-surface-2);
}
.sv2-window dt { margin: 0; }
.sv2-window-value {
  margin: 0.1rem 0 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--sk-text);
}
.sv2-window-sub { margin: 0.15rem 0 0; color: var(--sk-muted); font-size: 0.72rem; }
.sv2-none { margin: 0; color: var(--sk-muted); font-size: 0.85rem; }

/* ---------- the figures --------------------------------------------------- */
.sv2-fig { margin: 0; }
.sv2-fig-plot { margin-top: 0.25rem; }
.sv2-figcap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.6rem;
  align-items: baseline;
  margin-bottom: 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sk-text-2);
}
.sv2-figcap-note { font-weight: 400; color: var(--sk-muted); }
.sv2-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 0.35rem;
  color: var(--sk-muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- the uptime strip ---------------------------------------------- *
   Ninety columns, each one a stack. The height of the green base IS the day's
   uptime, failures stack downward from the top, and the three colours only
   ever agree with a position and a size the reader can see without them.
   Every status page ships this as a row of flat coloured tiles; those are
   unreadable under deuteranopia and nearly unreadable in light mode.         */
.sv2-strip {
  display: flex;
  gap: 2px;
  height: 46px;
  padding: 2px;
  border-radius: 8px;
  background: var(--sk-surface-2);
  border: 1px solid var(--sk-border);
}

/* Ninety columns in a phone's 288px of card is 0.4px of paint per day once the
   gaps are paid for — measured, not guessed. The strip keeps a real minimum
   column and the whole track scrolls sideways instead, which is the one thing
   on this page allowed to be wider than the screen; status-v2.js parks it at
   today. Wide enough, `flex-grow` takes over and nothing scrolls.

   The AXIS IS INSIDE THE TRACK, not pinned to the card. Parked at today with
   the axis outside, "90 days ago" would sit under whatever day happened to be
   at the left edge — a caption naming the wrong date. In here each label stays
   attached to its own end of the data. */
.sv2-strip-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.sv2-strip-track { width: max-content; min-width: 100%; }
.sv2-strip-track .sv2-strip,
.sv2-strip-track .sv2-axis { width: 100%; }
@media (max-width: 900px) { .sv2-strip { gap: 1px; } }
.sv2-strip:focus-visible { outline: 2px solid var(--sk-primary); outline-offset: 2px; }
.sv2-day {
  position: relative;
  display: flex;
  flex-direction: column;
  /* The 2px surface gap the marks spec asks for, between stacked segments —
     and flex-grow does the sizing, so the gaps come out of the column's height
     rather than out of the numbers. */
  gap: 2px;
  flex: 1 0 4px;
  border-radius: 3px;
}
.sv2-seg { display: block; border-radius: 2px; min-height: 1px; }
.sv2-seg-up { background: var(--sk-success); }
.sv2-seg-degraded { background: var(--sk-warning); }
.sv2-seg-down { background: var(--sk-danger); }
/* A day with no checks is an empty track, not a good day. */
.sv2-day[data-state="none"] { background: repeating-linear-gradient(45deg, var(--sk-border) 0 2px, transparent 2px 5px); }
/* A single failure among thousands of checks is too small to draw to scale and
   is NOT rounded up to something visible — it gets a notch instead, so the day
   is findable without the column claiming a number that is not true. */
.sv2-day.is-blip::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: 2px;
  background: var(--sk-danger);
}
.sv2-day.is-on { outline: 2px solid var(--sk-text); outline-offset: 1px; border-radius: 4px; }
.sv2-readout {
  margin: 0.4rem 0 0;
  min-height: 1.2em;
  color: var(--sk-text-2);
  font-size: 0.78rem;
}

/* ---------- the response plot --------------------------------------------- */
.sv2-plot {
  position: relative;
  height: 120px;
  padding-left: 2.6rem;
  border-bottom: 1px solid var(--sk-border-2);
}
.sv2-plot-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sv2-plot-area { fill: var(--sk-primary); fill-opacity: 0.1; stroke: none; }
.sv2-plot-line { fill: none; stroke: var(--sk-primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

.sv2-plot-ticks { position: absolute; inset: 0 0 0 2.6rem; pointer-events: none; }
.sv2-tick { position: absolute; left: 0; right: 0; transform: translateY(-50%); }
/* Solid hairlines, one step off the surface. Dashed reads as a threshold. */
.sv2-tick-rule { display: block; height: 1px; background: var(--sk-border); }
.sv2-tick-label {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  padding-right: 0.4rem;
  font-size: 0.68rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--sk-muted);
  white-space: nowrap;
}

/* Dots live in HTML, not in the SVG: preserveAspectRatio="none" would draw an
   <circle> as an ellipse whose eccentricity is the card's width. */
.sv2-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: 0 0 -4.5px -4.5px;
  border-radius: 50%;
  background: var(--sk-primary);
  /* The 2px surface ring, so the marker stays legible over the line. */
  box-shadow: 0 0 0 2px var(--sk-surface);
}
.sv2-dot-end { left: 100%; }
/* A day whose neighbours have no data has no line to sit on, so it is drawn
   as a point rather than dropped. */
.sv2-dot-lone { background: var(--sk-primary); }
.sv2-dot-label {
  position: absolute;
  right: 0;
  transform: translate(0, 50%);
  margin-bottom: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sk-text-2);
  background: var(--sk-surface);
  padding: 0 0.2rem;
  border-radius: 4px;
  pointer-events: none;
}
.sv2-crosshair {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--sk-border-2);
  pointer-events: none;
}
.sv2-tip {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  padding: 0.3rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--sk-border-2);
  background: var(--sk-surface);
  color: var(--sk-text);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}
.sv2-tip b { color: var(--sk-text); }
.sv2-tip span { color: var(--sk-muted); font-weight: 400; }

/* ---------- the accessible twin ------------------------------------------- */
.sv2-details { border-top: 1px solid var(--sk-border); padding-top: 0.75rem; }
.sv2-summary {
  cursor: pointer;
  color: var(--sk-text-2);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.35rem 0;
}
.sv2-summary:focus-visible { outline: 2px solid var(--sk-primary); outline-offset: 2px; border-radius: 6px; }
.sv2-table-wrap { overflow-x: auto; margin-top: 0.6rem; max-height: 360px; overflow-y: auto; }
.sv2-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.sv2-table-cap { text-align: left; color: var(--sk-muted); font-size: 0.75rem; padding-bottom: 0.4rem; }
.sv2-table th,
.sv2-table td { padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--sk-border); text-align: right; white-space: nowrap; }
.sv2-table thead th { position: sticky; top: 0; background: var(--sk-surface); color: var(--sk-muted); font-weight: 600; z-index: 1; }
.sv2-table th:first-child,
.sv2-table thead th:first-child { text-align: left; }
/* Columns of numbers DO get tabular figures — this is the one place they align. */
.sv2-table td { font-variant-numeric: tabular-nums; color: var(--sk-text-2); }
.sv2-table tbody th { color: var(--sk-text); font-weight: 500; }

/* ---------- incidents ----------------------------------------------------- */
.sv2-incident-list { display: grid; gap: 0; }
.sv2-incident { padding: 1rem 0; border-bottom: 1px solid var(--sk-border); }
.sv2-incident:first-child { padding-top: 0; }
.sv2-incident:last-child { padding-bottom: 0; border-bottom: 0; }
.sv2-incident-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  align-items: baseline;
  justify-content: space-between;
}
.sv2-incident-title { margin: 0; font-size: 0.98rem; }
.sv2-incident-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.sv2-incident-service { color: var(--sk-muted); font-size: 0.8rem; }
.sv2-incident-body { margin: 0.5rem 0 0; color: var(--sk-text-2); line-height: 1.55; font-size: 0.9rem; }
.sv2-incident-when { margin: 0.4rem 0 0; color: var(--sk-muted); font-size: 0.78rem; }

/* ---------- maintenance meter --------------------------------------------- */
.sv2-meter { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.6rem; }
.sv2-meter-track {
  flex: 1 1 auto;
  height: 8px;
  border-radius: 999px;
  /* Lighter step of the fill's own ramp, so the state reads across the bar. */
  background: var(--sk-primary-soft);
  overflow: hidden;
}
.sv2-meter-fill { height: 100%; background: var(--sk-primary); border-radius: 999px; }
.sv2-meter-value { color: var(--sk-text-2); font-size: 0.76rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

.sv2-totop { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; }

/* ---------- touch --------------------------------------------------------- *
   Skynet UI sizes for a mouse. Below 16px iOS zooms the page on focus, and a
   sub-44px target is a miss on a phone.                                      */
@media (pointer: coarse) {
  .sv2-summary { min-height: 44px; display: flex; align-items: center; }
  .sv2-strip { height: 54px; }
}

/* The strip's own hover lift is the only motion here, and it goes with the
   reader's setting like everything else on the v2 pages. */
@media (prefers-reduced-motion: no-preference) {
  .sv2-day { transition: transform 120ms ease; }
  .sv2-day.is-on { transform: scaleY(1.04); }
}