/* ============ status.lumin.pro (2026-10-09) ============
   Loaded after site.css, the public site's own stylesheet copied in by
   scripts/sync-assets.mjs, so the page shares /verify's nav, header, type,
   section titles and footer. Only what follows is new, and every value comes
   from site.css's tokens apart from the four state colours, which are the
   app's (the site has no green, amber or blue because nothing else needs them).

   The fonts are this site's own copies. On lumin.pro the same rules are printed
   inline by includes/fonts.php; here they are written out, with the same ranges
   (includes/data/fonts.php). */

@font-face { font-family: "Google Sans Flex"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/fonts/google-sans-flex-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Google Sans Flex"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/fonts/google-sans-flex-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 500 600; font-display: swap;
  src: url(/fonts/caveat-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 500 600; font-display: swap;
  src: url(/fonts/caveat-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* State colours: a strong one for dots and bars, a tint and an ink for panels. */
  --st-ok: #008236;       --st-ok-tint: #eaf6ee;    --st-ok-ink: #0d542b;
  --st-warn: #fe9a00;     --st-warn-tint: #fff4dc;  --st-warn-ink: #8a5100;
  --st-down: #fb2c36;     --st-down-tint: #ffe2e2;  --st-down-ink: #9f0712;
  --st-maint: #2b7fff;    --st-maint-tint: #dbeafe; --st-maint-ink: #193cb8;
  --st-none: var(--border-on-surface);
}

/* ---- Header ---- */
.st-head { padding-bottom: clamp(32px, 5vw, 56px); }
.st-title { display: flex; align-items: center; gap: 0.32em; max-width: none; }
.st-title .st-dot { width: 0.36em; height: 0.36em; }
.st-error { margin-top: 1em; }
.st-error[hidden] { display: none; }

/* The state dot, at any size: set width and height where it's used. */
.st-dot { display: inline-block; flex: 0 0 auto; border-radius: 50%; background: var(--st-none); }
.st-dot--operational { background: var(--st-ok); }
.st-dot--degraded { background: var(--st-warn); }
.st-dot--partial_outage, .st-dot--major_outage, .st-dot--outage { background: var(--st-down); }
.st-dot--maintenance { background: var(--st-maint); }

/* ---- Sections ---- */
.st-section { padding: clamp(40px, 6vw, 72px) 0 0; }
.st-section--last { padding-bottom: clamp(72px, 10vw, 136px); }
.st-section[hidden], .st-notices[hidden] { display: none; }
.st-section .section-title { max-width: none; }
.st-section .section-title + .st-list { margin-top: 28px; }
.st-sub { color: var(--text-dim); font-size: 16px; margin: 10px 0 28px; }
.st-empty { color: var(--text-dim); font-size: 16px; margin: 0; }
.st-days-short { display: none; }

/* ---- Active incidents and maintenance in progress ---- */
/* The /verify result panel, tinted by what it reports. */
.st-notices .wrap { display: grid; gap: 16px; }
.st-notice { padding: 20px 22px; border-radius: var(--radius-lg); background: var(--st-warn-tint); color: var(--st-warn-ink); }
.st-notice--maintenance { background: var(--st-maint-tint); color: var(--st-maint-ink); }
.st-notice h3 { font-size: 18px; font-weight: 600; margin: 0 0 4px; color: inherit; }
.st-notice .st-meta { color: inherit; opacity: .8; }
.st-notice .st-updates { margin-top: 14px; }
.st-notice .st-update + .st-update { border-top-color: color-mix(in srgb, currentColor 20%, transparent); }

.st-meta { font-size: 14px; color: var(--text-dim); margin: 0; }
.st-updates { display: grid; }
.st-update { padding: 12px 0 0; }
.st-update + .st-update { margin-top: 12px; border-top: 1px solid var(--border); }
.st-update p { margin: 0; font-size: 16px; line-height: 1.55; }
.st-update .st-meta { margin-top: 4px; }
.st-update strong { font-weight: 600; }

/* ---- Components ---- */
.st-components { border-top: 1px solid var(--text); }
.st-comp { padding: 22px 0 20px; border-bottom: 1px solid var(--border); }
.st-comp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.st-comp-name { font-size: 20px; font-weight: 500; margin: 0; }
.st-state { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text-dim); text-align: right; }
.st-state .st-dot { width: 10px; height: 10px; }

/* The uptime bar: one cell per day, oldest first. */
.st-bar { display: flex; gap: 2px; height: 34px; }
.st-cell {
  flex: 1 1 0; min-width: 0; border-radius: 3px; background: var(--st-none);
  border: 0; padding: 0; cursor: default; transition: opacity .15s;
}
.st-cell--operational { background: var(--st-ok); }
.st-cell--degraded { background: var(--st-warn); }
.st-cell--outage { background: var(--st-down); }
.st-cell--maintenance { background: var(--st-maint); }
.st-bar:hover .st-cell, .st-bar.is-picked .st-cell { opacity: .45; }
.st-bar .st-cell:hover, .st-bar .st-cell.is-picked { opacity: 1; }

/* Under the bar: "90 days ago · 99.98% uptime · Today", or the day picked. */
.st-axis { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 14px; color: var(--text-dim); min-height: 22px; }
.st-axis .st-rule { flex: 1 1 auto; height: 1px; background: var(--border); }
.st-axis .st-axis-mid { color: var(--text); white-space: nowrap; }
.st-axis > span { white-space: nowrap; }
.st-axis.is-picked > span { display: none; }
.st-axis > .st-axis-detail { display: none; color: var(--text); white-space: normal; }
.st-axis.is-picked > .st-axis-detail { display: block; }

.st-seal { margin: 14px 0 0; font-size: 15px; color: var(--text-dim); }
.st-seal a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; white-space: nowrap; }

/* ---- Response time ---- */
.st-chart { position: relative; }
.st-chart-figure { display: flex; align-items: baseline; gap: 8px 24px; flex-wrap: wrap; margin: 0 0 32px; }
.st-chart-figure .st-big { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; letter-spacing: -0.025em; font-weight: 500; }
.st-legend { display: flex; gap: 20px; font-size: 14px; color: var(--text-dim); }
.st-legend span { display: inline-flex; align-items: center; gap: 8px; }
.st-legend i { display: inline-block; width: 16px; height: 3px; border-radius: 2px; background: var(--text); }
.st-legend i.st-legend-max { height: 10px; background: var(--surface); border: 1px solid var(--border-on-surface); }
.st-plot { position: relative; height: 200px; border-bottom: 1px solid var(--text); }
.st-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.st-plot .st-grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.st-plot .st-max { fill: var(--surface); stroke: var(--border-on-surface); stroke-width: 1; vector-effect: non-scaling-stroke; }
.st-plot .st-avg { fill: none; stroke: var(--text); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.st-plot .st-cursor { stroke: var(--text-dim); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
/* Above the shading, on a white chip, so the slowest spikes never cover it. */
.st-ylabel { position: absolute; left: 0; z-index: 1; font-size: 12px; line-height: 1.4; color: var(--text-dim); background: var(--bg); padding: 0 6px 0 0; transform: translateY(-50%); pointer-events: none; }
.st-chart .st-axis { margin-top: 10px; }

/* ---- Check from your device ---- */
.st-device-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.st-device-actions .btn:disabled { opacity: .55; cursor: default; }
/* The /verify result panel: grey by default, tinted when it has news. */
.st-device-result { margin-top: 28px; padding: 20px 22px; border-radius: var(--radius-lg); background: var(--surface); }
.st-device-result[hidden] { display: none; }
.st-device-result--ok { background: var(--st-ok-tint); }
.st-device-result--ok .st-device-message { color: var(--st-ok-ink); }
.st-device-result--warn { background: var(--st-warn-tint); }
.st-device-result--warn .st-device-message { color: var(--st-warn-ink); }
.st-device-message { margin: 0 0 18px; font-size: 16px; line-height: 1.55; font-weight: 600; color: var(--text); }
.st-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; margin: 0; }
.st-facts dt { font-size: 14px; color: var(--text-dim); margin: 0 0 2px; }
.st-facts dd { margin: 0; font-size: 18px; font-weight: 500; color: var(--text); }

/* ---- Lists: maintenance and past incidents ---- */
.st-list { border-top: 1px solid var(--text); }
.st-group { padding: 22px 0; border-bottom: 1px solid var(--border); }
.st-group-day { font-size: 14px; color: var(--text-dim); margin: 0 0 10px; }
.st-item { margin: 0; }
.st-item + .st-item { margin-top: 14px; }
.st-item h3, .st-item .st-h { display: block; font-size: 18px; font-weight: 500; margin: 0 0 2px; }
.st-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.st-item summary::-webkit-details-marker { display: none; }
.st-item summary::after { content: "+"; color: var(--text-dim); font-size: 20px; line-height: 1; }
.st-item[open] summary::after { content: "\2212"; }
.st-item .st-updates { margin-top: 6px; }

/* ---- Responsive ---- */
/* Below 600px the bar keeps the last 30 days, so each cell stays tappable. */
@media (max-width: 600px) {
  .st-bar .st-cell:nth-child(-n+60) { display: none; }
  .st-days-long { display: none; }
  .st-days-short { display: inline; }
  .st-bar { gap: 3px; }
  .st-comp-head { flex-direction: column; gap: 6px; }
  .st-state { text-align: left; }
  .st-plot { height: 160px; }
  .st-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .st-cell { transition: none; }
}