/* status.opteno.app
 *
 * Deliberately the marketing site's design language, not a new one: the same
 * system font stack (apps/site loads no webfont at all), the same #020817 ink,
 * #e2e8f0 hairlines, #64748b muted text, 8px card radius and near-flat shadow.
 * The three-stop logo gradient appears only where the logo's own gradient
 * belongs -- in the mark and in the rule under the header.
 *
 * Light only, matching the marketing site's `color-scheme: light`.
 */

:root {
  color-scheme: light;

  --ink: #020817;
  --muted: #64748b;
  --border: #e2e8f0;
  --card: #ffffff;
  --ground: #f7f8fa;
  --primary: #3829e0;
  /* #64748b is the site's muted, and it clears AA on white cards (4.76:1).
     On the #f7f8fa page ground it drops to 4.48:1, just under. Text that sits
     directly on the ground uses this slightly darker step instead (4.73:1). */
  --muted-on-ground: #60708a;

  /* The marketing site's own status triples (surface / border / foreground).
     Every one of these foregrounds clears 7:1 on its own surface. */
  --ok-bg: #ecfdf5;      --ok-br: #6ee7b7;      --ok-fg: #065f46;
  --warn-bg: #fef3c7;    --warn-br: #fcd34d;    --warn-fg: #713f12;
  --bad-bg: #fef2f2;     --bad-br: #fca5a5;     --bad-fg: #b91c1c;
  --info-bg: #eff6ff;    --info-br: #93c5fd;    --info-fg: #1d4ed8;
  --none-bg: #f1f0f5;    --none-br: #cbd5e1;    --none-fg: #475569;

  --brand-gradient: linear-gradient(135deg, #005BEC 0%, #4B2FCE 52%, #6E37B2 100%);
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --radius: 8px;
  --container: 920px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue",
    "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  line-height: 1.5;
}

.tabular { font-variant-numeric: tabular-nums; }

a { color: var(--primary); }
a:hover { color: #2a1fb0; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 16px; top: -48px; z-index: 100;
  background: #fff; color: var(--ink); padding: 10px 16px;
  border: 1px solid var(--border); border-radius: 6px; font-size: 14px;
  text-decoration: none; transition: top 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.skip:focus { top: 12px; }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .wrap { padding: 0 24px; } }
@media (min-width: 1024px) { .wrap { padding: 0 32px; } }

/* ---------- header ---------- */

.site-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.site-header .rule { height: 3px; background: var(--brand-gradient); }
.site-header .row {
  height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo svg { display: block; flex: none; }
.logo .word { font-size: 24px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.25; }
.logo .sub {
  font-size: 13px; font-weight: 500; color: var(--muted);
  border-left: 1px solid var(--border); padding-left: 10px; margin-left: 2px;
}
.header-link { font-size: 14px; text-decoration: none; color: var(--muted); white-space: nowrap; }
.header-link:hover { color: var(--ink); }
@media (max-width: 520px) { .logo .sub { display: none; } }

/* ---------- overall banner ---------- */

main { padding: 40px 0 64px; }
@media (min-width: 768px) { main { padding: 56px 0 80px; } }

.banner {
  border: 1px solid; border-radius: var(--radius); padding: 24px;
  box-shadow: var(--shadow-xs); display: flex; gap: 16px; align-items: flex-start;
}
.banner .glyph { flex: none; width: 28px; height: 28px; margin-top: 2px; }
.banner h1 { margin: 0; font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -0.025em; }
@media (min-width: 768px) { .banner h1 { font-size: 30px; } }
.banner p { margin: 6px 0 0; font-size: 14px; line-height: 1.625; }

.banner.is-operational { background: var(--ok-bg);   border-color: var(--ok-br);   color: var(--ok-fg); }
.banner.is-degraded    { background: var(--warn-bg); border-color: var(--warn-br); color: var(--warn-fg); }
.banner.is-outage      { background: var(--bad-bg);  border-color: var(--bad-br);  color: var(--bad-fg); }
.banner.is-unknown     { background: var(--none-bg); border-color: var(--none-br); color: var(--none-fg); }

/* Built by status.js, and only when the page is genuinely stale -- it is not in
   the served HTML at all, so a reader with no CSS never meets an empty warning.
   With JavaScript off the reader still gets the absolute check time in the
   banner, which is why that time is printed in full rather than as "2 min ago". */
.stale {
  margin-top: 16px; padding: 14px 16px; font-size: 14px; line-height: 1.625;
  background: var(--warn-bg); border: 1px solid var(--warn-br); color: var(--warn-fg);
  border-radius: var(--radius);
}

/* ---------- component groups ---------- */

.group { margin-top: 32px; }
.group > h2 {
  margin: 0 0 4px; font-size: 14px; font-weight: 600; letter-spacing: 0.025em;
  text-transform: uppercase; color: var(--muted-on-ground);
}
.group > .group-note {
  margin: 0 0 12px; font-size: 14px; color: var(--muted-on-ground); line-height: 1.625;
}

.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-xs); overflow: hidden;
}
.component { padding: 20px 24px; border-top: 1px solid var(--border); }
.component:first-child { border-top: 0; }

.component-head {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: 8px 16px;
}
.component-head > div { flex: 1 1 200px; min-width: 0; }
.component-name { font-size: 16px; font-weight: 600; margin: 0; letter-spacing: -0.025em; }
.component-desc {
  margin: 2px 0 0; font-size: 14px; color: var(--muted); line-height: 1.5;
  overflow-wrap: break-word;
}

.pill {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; padding: 5px 12px 5px 10px;
  border-radius: 9999px; border: 1px solid; white-space: nowrap;
}
.pill .dot { width: 8px; height: 8px; border-radius: 9999px; background: currentColor; flex: none; }
.pill.is-operational { background: var(--ok-bg);   border-color: var(--ok-br);   color: var(--ok-fg); }
.pill.is-degraded    { background: var(--warn-bg); border-color: var(--warn-br); color: var(--warn-fg); }
.pill.is-outage      { background: var(--bad-bg);  border-color: var(--bad-br);  color: var(--bad-fg); }
.pill.is-unknown     { background: var(--none-bg); border-color: var(--none-br); color: var(--none-fg); }

/* Shapes differ per state as well as colour, so the rows do not rely on hue.
   Square = degraded, triangle-ish = outage, circle = operational. */
.pill.is-degraded .dot { border-radius: 2px; }
.pill.is-outage .dot { border-radius: 2px; transform: rotate(45deg); }
.pill.is-unknown .dot { background: transparent; border: 2px solid currentColor; }

/* ---------- history strip ---------- */

.history { margin-top: 14px; }
.bars { display: flex; gap: 2px; height: 32px; align-items: stretch; }
.bar { flex: 1 1 0; min-width: 0; border-radius: 2px; background: var(--none-bg); }
.bar.d-operational { background: #10b981; }
.bar.d-degraded    { background: #f59e0b; }
.bar.d-outage      { background: #ef4444; }
.bar.d-unknown     { background: #e2e0e7; }
.bar.d-nodata      { background: #eceaf0; }

/* Older days drop off first on narrow screens rather than squeezing to
   sub-pixel slivers that no longer read as anything. */
@media (max-width: 767px) { .bar:nth-child(-n+60) { display: none; } }
@media (max-width: 419px) { .bar:nth-child(-n+75) { display: none; } }

.bar-legend {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px;
  margin-top: 8px; font-size: 12px; color: var(--muted);
}
.bar-legend .mid { text-align: center; }

/* On a phone the three legend parts do not fit on one line, and forcing them
   to try pushes the whole page into a horizontal scroll. The uptime figure
   drops to its own line instead. */
@media (max-width: 639px) {
  .bar-legend .mid { flex: 1 0 100%; order: 3; text-align: left; }
}

/* ---------- notes, incidents, footer ---------- */

.note {
  margin-top: 28px; padding: 18px 20px; font-size: 14px; line-height: 1.625;
  color: var(--muted); background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-xs);
}
.note h2 { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.note p { margin: 0 0 8px; }
.note p:last-child { margin-bottom: 0; }
.note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 13px; background: var(--ground); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px;
}

.section-title { margin: 48px 0 12px; font-size: 20px; font-weight: 700; letter-spacing: -0.025em; }

.incident { padding: 20px 24px; border-top: 1px solid var(--border); }
.incident:first-child { border-top: 0; }
.incident h3 { margin: 0; font-size: 16px; font-weight: 600; }
.incident .when { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.incident .update { margin: 12px 0 0; font-size: 14px; line-height: 1.625; }
.incident .update .label { font-weight: 600; }
.empty { padding: 24px; font-size: 14px; color: var(--muted); line-height: 1.625; }

.site-footer {
  border-top: 1px solid var(--border); background: #fff; padding: 28px 0;
  font-size: 14px; color: var(--muted);
}
.site-footer .row { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.site-footer .links { display: flex; flex-wrap: wrap; gap: 8px 24px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}