/* status.ciphera.net — the whole stylesheet.
 *
 * Hand-written rather than generated, because this service has no build step and
 * no node_modules by design. Every value below is the RESOLVED output of the
 * Tailwind utility the approved plate used, measured against help-frontend's
 * shipped bundle (tailwindcss 4.3.0, base spacing 0.25rem) — not re-guessed.
 * Where a line reproduces a utility, the utility is named so the two can be
 * compared without running anything.
 *
 * 🔴 THE PALETTE IS FACET'S, COPIED AS LITERALS. This page cannot import
 * @ciphera-net/facet: it is a Go binary with no JavaScript toolchain, which is
 * the point (see cmd/server/main.go). So the tokens are duplicated here, which
 * is a real cost — if Facet's palette moves, this file does not. That is
 * accepted deliberately: the alternative is a Next.js app on Magic Containers,
 * and the estate has been bitten twice by that shape (stale-404s, chunk
 * mismatches). Nineteen hex values that change roughly never are the cheaper
 * risk. Source of truth: UI/facet/packages/facet/src/styles/facet.css and
 * Help/help-frontend/styles/globals.css.
 */

/* ⚠️ SELF-HOSTED, NOT GOOGLE FONTS. The estate's sovereignty rule is zero US
 * companies in the critical path, and the critical path of THIS page is the one
 * that matters most — it is what people read when the rest is broken. A
 * render-blocking request to fonts.gstatic.com would put a US CDN in front of
 * the outage page. The file is embedded in the binary (web/static), served from
 * this origin, and licensed SIL OFL 1.1 (see GEIST-LICENSE.txt).
 *
 * One variable file covers 100–900, so the three weights this page uses (400,
 * 500, 600) cost one request between them. */
@font-face {
  font-family: "Geist";
  src: url("/static/geist-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Facet dark palette — the only theme. Facet's README: "There is no light
   * theme. The base stylesheet defines a single :root block." */
  --background: #0a0a0a;
  --foreground: #f4f4f4;
  --card: #0f0f0f;
  --border: #1c1c1c;
  --muted-foreground: #8a8a8a;
  --success: #3ecf8e;  /* Facet `pos` */
  --error: #f8836b;    /* Facet `neg` */

  /* ⚠️ NOT A FACET TOKEN. Facet ships a two-state delta palette (pos/neg) and
   * has no amber. This is the exact value the approved mock used for a degraded
   * DAY, kept so the block row and the status word agree. help-frontend's own
   * --color-warning is #F59E0B (stock amber-500) and is NOT what was
   * screenshotted, so it is deliberately not used here. */
  --degraded: #d9a441;

  /* An unobserved day. Not a grey from the palette: it has to read as "nothing
   * here" against --card, which a solid grey at this size does not. */
  --block-none: rgba(255, 255, 255, 0.08);

  --sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ── chrome ────────────────────────────────────────────────────────────────
 * Minimal by intent. help-frontend's header carries a ⌘K search dialog, a
 * scroll-reactive border and a mobile drawer — all React state, none of it
 * reproducible without the client JavaScript this page refuses to ship. What is
 * kept is what the chrome is FOR: saying whose page this is and how to get
 * back. */
.chrome { border-bottom: 1px solid var(--border); }
.chrome-foot { border-bottom: 0; border-top: 1px solid var(--border); margin-top: 4rem; }
.chrome-inner {
  margin: 0 auto;
  max-width: 48rem;                 /* max-w-3xl, matching <main> */
  padding: 0 1.5rem;                /* px-6 */
  height: 4rem;                     /* h-16 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.brand { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; }
.brand-mark {
  width: 0.75rem; height: 0.75rem;
  background: var(--foreground);
  /* A filled square, not a logo file: one fewer asset to fetch, and it cannot
   * 404 on the page whose job is to work. */
  flex: none;
}
.brand-name { font-size: 1rem; font-weight: 600; color: var(--foreground); }
.brand-sep  { font-size: 1rem; color: var(--border); }
.brand-page { font-size: 1rem; font-weight: 600; color: var(--muted-foreground); }
.chrome-link { font-size: 0.875rem; color: var(--muted-foreground); text-decoration: none; }
.chrome-link:hover { color: var(--foreground); }

.foot-legal, .foot-links { font-size: 0.75rem; color: var(--muted-foreground); }
.foot-links a { margin-left: 1.25rem; text-decoration: none; }
.foot-links a:hover { color: var(--foreground); }

/* ── page ────────────────────────────────────────────────────────────────── */
main {
  margin: 0 auto;
  max-width: 48rem;                 /* max-w-3xl */
  padding: 4rem 1.5rem;             /* py-16 px-6 */
}

.eyebrow { margin: 0; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }

h1 {
  margin: 1rem 0 0;                 /* mt-4 */
  font-size: 1.875rem;              /* text-3xl */
  line-height: 2.25rem;
  font-weight: 600;                 /* font-semibold — never 700, Facet rule */
  letter-spacing: -0.025em;         /* tracking-tight */
  color: var(--foreground);
}
@media (min-width: 640px) { h1 { font-size: 2.25rem; line-height: 2.5rem; } }  /* sm:text-4xl */

.lede { margin: 0.75rem 0 0; font-size: 1rem; color: var(--muted-foreground); }

.panel { border: 1px solid var(--border); background: var(--card); }

.overall {
  margin: 2.5rem 0 3rem;            /* mt-10 mb-12 */
  padding: 0.875rem 1rem;           /* py-3.5 px-4 */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;                     /* gap-3 */
}
.overall-left { display: flex; align-items: center; gap: 0.75rem; }
.overall-text { font-size: 0.875rem; font-weight: 500; color: var(--foreground); }
.overall-time { font-size: 0.75rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

.unavailable { margin-top: 2.5rem; padding: 0.875rem 1rem; display: flex; align-items: center; gap: 0.75rem; }
.unavailable-text { font-size: 0.875rem; color: var(--muted-foreground); }

/* ── the status dot ──────────────────────────────────────────────────────── */
.dot {
  width: 0.5rem; height: 0.5rem;    /* h-2 w-2 */
  border-radius: 9999px;            /* --radius-full; the ONE exemption in
                                     * Facet's radius contract, which is 0 everywhere else */
  flex: none;
}
.dot-ok        { background: var(--success); }
.dot-degraded  { background: var(--degraded); }
.dot-outage    { background: var(--error); }
.dot-unknown   { background: var(--muted-foreground); }

/* ── groups and rows ─────────────────────────────────────────────────────── */
.group { margin-bottom: 2rem; }     /* mb-8 */
.group-head {
  margin-bottom: 0.75rem;           /* mb-3 */
  display: flex; align-items: center; justify-content: space-between;
}
.group-head h2 { margin: 0; font-size: 0.75rem; line-height: 1rem; font-weight: 400; color: var(--muted-foreground); }
.group-age { font-size: 0.75rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

.rows > .row + .row { border-top: 1px solid var(--border); }   /* divide-y divide-border */
.row { padding: 0.75rem 1rem; }                                 /* py-3 px-4 */

.row-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; }
.row-left { display: flex; align-items: flex-start; gap: 0.75rem; min-width: 0; }
.row-dot { margin-top: 0.25rem; }   /* mt-1 — optically centres an 8px dot on a 20px line */
.row-name { font-size: 0.875rem; font-weight: 500; color: var(--foreground); }

.row-word {
  flex: none;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.w-ok       { color: var(--success); }
.w-degraded { color: var(--degraded); }
.w-outage   { color: var(--error); }
.w-unknown  { color: var(--muted-foreground); }

/* ── the 90-day block row ────────────────────────────────────────────────── */
/* A grid rather than flex so every day is EXACTLY the same width at any
 * viewport: `1fr` columns divide the row, and `minmax(0, 1fr)` stops a block
 * refusing to shrink below its content box on narrow screens. The 2px gap is
 * what makes ninety blocks read as ninety days rather than as one bar. */
.bars {
  margin-top: 0.5rem;               /* mt-2 */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  column-gap: 2px;
}
.blk { height: 22px; border-radius: 1px; }
.blk-ok       { background: var(--success); }
.blk-degraded { background: var(--degraded); }
.blk-outage   { background: var(--error); }
.blk-none     { background: var(--block-none); }

.axis {
  margin-top: 0.25rem;              /* mt-1 */
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--muted-foreground);
}
.axis-mid { font-variant-numeric: tabular-nums; }

.empty { padding: 1.5rem 1rem; font-size: 0.875rem; color: var(--muted-foreground); }

.foot { margin-top: 2rem; font-size: 0.75rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

/* On a phone the 90-day row is ~3px per block. Still legible as a shape, which
 * is all it needs to be — the number under it carries the precision. */
@media (max-width: 420px) {
  .blk { height: 18px; }
  .bars { column-gap: 1px; }
}