/* ============================================================
   AOL Status — Keyword Design System
   KEYWORD_VERSION: 0.3.0

   Manual, unversioned-at-runtime snapshot of the tokens from
   @aol/keyword 0.3.0 (packages/ui/src/styles/globals.css). This page
   has no build step and does not import the package, so these tokens
   are copied by hand and kept faithful to the version marker above.
   When bumping @aol/keyword, re-reconcile this file and the marker.

   Enforcement rule: nothing in this file may use a raw magic number
   for size, space, radius, weight, tracking or motion. Every such
   value must reference a token defined in the scales below.
   ============================================================ */

@font-face {
  font-family: "Matter";
  src: url("https://s.aolcdn.com/membership/aol/fonts/matter/Matter-VF.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Type */
  --font-sans: "Matter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: var(--font-sans);

  /* Type scale — @aol/keyword 0.3.0 (line-height + tracking baked per step) */
  --text-xs: 0.75rem;
  --text-xs--line-height: 1.3333;
  --text-sm: 0.875rem;
  --text-sm--line-height: 1.4286;
  --text-base: 1rem;
  --text-base--line-height: 1.5;
  --text-lg: 1.125rem;
  --text-lg--line-height: 1.5556;
  --text-xl: 1.25rem;
  --text-xl--line-height: 1.4;
  --text-2xl: 1.5rem;
  --text-2xl--line-height: 1.3333;
  --text-2xl--letter-spacing: -0.0125em;
  --text-3xl: 1.875rem;
  --text-3xl--line-height: 1.2;
  --text-3xl--letter-spacing: -0.02em;
  --text-4xl: 2.25rem;
  --text-4xl--line-height: 1.1111;
  --text-4xl--letter-spacing: -0.025em;

  /* Font weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;

  /* Tracking for uppercase micro-labels (page-level, not a type-scale step) */
  --tracking-label: 0.05em;

  /* Spacing ramp (Tailwind/DS 4px grid) */
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-2-5: 0.625rem;
  --space-3: 0.75rem;
  --space-3-5: 0.875rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-14: 3.5rem;
  --space-16: 4rem;

  /* Control sizing */
  --size-dot: 0.5rem;
  --size-icon-md: 1.35rem;
  --size-icon-lg: 2rem;
  --size-avatar: 2.5rem;
  --size-avatar-lg: 4rem;
  --logo-height: 1.5rem;
  --logo-height-sm: 1.25rem;
  --measure: 52ch;

  /* Container widths */
  --container: 48rem;
  --container-wide: 64rem;

  /* Radius ramp — @aol/keyword 0.3.0 (multiplicative from --radius) */
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);
  --radius-pill: 999px;
  --radius-round: 50%;

  /* Motion */
  --duration-fast: 0.12s;
  --ease-standard: ease;

  /* Elevation ink (L C H, no alpha) */
  --shadow-color: 0.262 0.008 18;

  /* Surfaces — recessed → raised */
  --surface-sunken: oklch(0.965 0.003 105);
  --surface-base: oklch(0.98 0.003 105);
  --surface-raised: oklch(0.993 0.002 105);
  --surface-overlay: oklch(1 0 0);

  /* Ink + roles */
  --foreground: oklch(0.262 0.008 18);
  --background: var(--surface-base);
  --card: var(--surface-raised);
  --card-foreground: var(--foreground);
  --popover: var(--surface-overlay);
  --popover-foreground: var(--foreground);
  --primary: oklch(0.454 0.2 264);
  --primary-foreground: oklch(0.97 0.014 254.604);
  --secondary: oklch(0.921 0.005 105);
  --secondary-foreground: var(--foreground);
  --muted: oklch(0.94 0.004 105);
  --muted-foreground: oklch(0.5 0.01 18);
  --accent: oklch(0.925 0.006 105);
  --accent-foreground: var(--foreground);
  --destructive: oklch(0.595 0.199 36);
  --tag: oklch(0.88 0.173 93);
  --tag-foreground: oklch(0.262 0.008 18);
  --border: oklch(0.9 0.005 105);
  --input: oklch(0.9 0.005 105);
  --ring: var(--primary);

  /* Data-viz / brand accents */
  --chart-1: #ffd326;
  --chart-2: #80c4f9;
  --chart-3: #2d9df3;
  --chart-4: #1847c3;
  --chart-5: #042044;

  /* Status semantics (mapped onto the system palette) */
  --operational: oklch(0.6 0.18 145);
  --degraded: oklch(0.79 0.16 85);
  --partial: oklch(0.68 0.2 45);
  --major: var(--destructive);
  --maintenance: var(--primary);

  /* Elevation ramp */
  --shadow-2xs: 0 1px 2px 0 oklch(var(--shadow-color) / 0.05);
  --shadow-xs: 0 1px 2px -1px oklch(var(--shadow-color) / 0.06), 0 1px 3px 0 oklch(var(--shadow-color) / 0.04);
  --shadow-sm: 0 2px 4px -2px oklch(var(--shadow-color) / 0.06), 0 4px 8px -2px oklch(var(--shadow-color) / 0.05);
  --shadow-md: 0 4px 8px -3px oklch(var(--shadow-color) / 0.07), 0 8px 16px -4px oklch(var(--shadow-color) / 0.06);
  --shadow-lg: 0 8px 16px -4px oklch(var(--shadow-color) / 0.08), 0 16px 32px -8px oklch(var(--shadow-color) / 0.07);
  --shadow-xl: 0 12px 24px -6px oklch(var(--shadow-color) / 0.10), 0 24px 48px -12px oklch(var(--shadow-color) / 0.08);
  --shadow-2xl: 0 24px 48px -12px oklch(var(--shadow-color) / 0.16), 0 48px 80px -16px oklch(var(--shadow-color) / 0.12);

  /* Overlay ink (hover on the brand bar) */
  --overlay-ink: oklch(0 0 0 / 0.1);
}

/* Light-only: the Keyword dark theme (.dark) is intentionally omitted so this
   page always renders light, matching the rest of AOL. */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

@media (min-width: 48rem) {
  html {
    font-size: 115%;
  }
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  background: var(--background);
  color: var(--foreground);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background-color: var(--tag);
  color: var(--tag-foreground);
}

/* Headings — font-heading + semibold, tracking comes from the type step. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-semibold);
  color: var(--foreground);
  text-wrap: balance;
}

a {
  color: inherit;
}

/* ============================================================
   Navbar — brand variant (bg-tag / tag-foreground)
   ============================================================ */
.navbar {
  width: 100%;
  background: var(--tag);
  color: var(--tag-foreground);
}

.navbar-inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
}

.navbar-brand {
  display: flex;
  align-items: baseline;
  gap: var(--space-2-5);
  min-width: 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  color: var(--tag-foreground);
  text-decoration: none;
}

/* Product label sitting next to the AOL wordmark, sharing its baseline. */
.brand-label {
  font-size: var(--text-2xl);
  letter-spacing: var(--text-2xl--letter-spacing);
  line-height: 1;
  font-weight: var(--font-semibold);
  color: var(--tag-foreground);
}

/* Single-source logo: the favicon.svg file referenced as an <img>, never
   inlined. The mark is dark, which suits the always-yellow navbar; the footer
   inverts it in dark mode (see below). */
.logo {
  display: block;
  width: auto;
}

.brand .logo {
  height: var(--logo-height);
}

.navbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.navbar-link {
  display: none;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-decoration: none;
  color: var(--tag-foreground);
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.navbar-link:hover {
  background: var(--overlay-ink);
}

/* Focus ring (matches the DS ring token + 2px offset) */
.brand:focus-visible,
.navbar-link:focus-visible,
.footer-link:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (min-width: 48rem) {
  .navbar-link { display: inline-flex; }
}

/* ============================================================
   Sub-bar — always-visible availability line + last-updated
   ============================================================ */
.subbar {
  width: 100%;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border);
}

.subbar-inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-6);
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}

.subbar-updated {
  white-space: nowrap;
}

/* ============================================================
   Page layout
   ============================================================ */
.page {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-4) var(--space-6) var(--space-16);
}

/* ============================================================
   Card primitive (rounded-xl, border, shadow-sm) — matches the
   Keyword <Card> component: bordered surface, soft elevation.
   ============================================================ */
.card {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
}

/* ============================================================
   Overall status banner
   ============================================================ */
.overall {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  padding: var(--space-10) var(--space-6);
  margin-bottom: var(--space-6);
}

.overall.loading { opacity: 0.55; }

.overall-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-avatar-lg);
  height: var(--size-avatar-lg);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  background: color-mix(in oklch, var(--muted-foreground) 15%, transparent);
  color: var(--muted-foreground);
}

.overall-icon svg { width: var(--size-icon-lg); height: var(--size-icon-lg); }
.overall-icon i { font-size: var(--size-icon-lg); line-height: 1; }

.overall[data-status="operational"] .overall-icon { background: color-mix(in oklch, var(--operational) 15%, transparent); color: var(--operational); }
.overall[data-status="maintenance"] .overall-icon { background: color-mix(in oklch, var(--maintenance) 15%, transparent); color: var(--maintenance); }
.overall[data-status="degraded"] .overall-icon { background: color-mix(in oklch, var(--degraded) 18%, transparent); color: var(--degraded); }
.overall[data-status="partial"] .overall-icon { background: color-mix(in oklch, var(--partial) 15%, transparent); color: var(--partial); }
.overall[data-status="major"] .overall-icon { background: color-mix(in oklch, var(--major) 15%, transparent); color: var(--major); }

.overall-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.overall-title {
  font-size: var(--text-3xl);
  line-height: var(--text-3xl--line-height);
  letter-spacing: var(--text-3xl--letter-spacing);
  font-weight: var(--font-semibold);
}

.overall-meta {
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  color: var(--muted-foreground);
}

/* ============================================================
   Section headings
   ============================================================ */
.section-title {
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-3-5);
}

.section { margin-bottom: var(--space-10); }
.section:last-child { margin-bottom: 0; }
/* When the trailing section (e.g. Incidents) is hidden, drop the gap it leaves. */
.section:has(+ .section[hidden]) { margin-bottom: 0; }

/* ============================================================
   Components list — hairline-separated rows in one card
   ============================================================ */
.components {
  overflow: hidden;
  padding: 0;
}

.component {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
}

.component + .component {
  border-top: 1px solid var(--border);
}

.component-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.component-name {
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
}

.component-note {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--muted-foreground);
  max-width: var(--measure);
}

/* ============================================================
   Status badge (rounded-md bordered chip, matches Keyword <Badge>) + dot
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  height: var(--space-6);
  padding: 0 var(--space-2-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  white-space: nowrap;
  background: var(--muted);
  color: var(--muted-foreground);
}

.dot {
  width: var(--size-dot);
  height: var(--size-dot);
  border-radius: var(--radius-round);
  flex-shrink: 0;
  background: currentColor;
}

.badge i {
  font-size: 0.95rem;
  line-height: 1;
  flex-shrink: 0;
}

.badge[data-status="operational"] { background: color-mix(in oklch, var(--operational) 14%, transparent); border-color: color-mix(in oklch, var(--operational) 30%, transparent); color: var(--operational); }
.badge[data-status="degraded"]    { background: color-mix(in oklch, var(--degraded) 20%, transparent);    border-color: color-mix(in oklch, var(--degraded) 32%, transparent);    color: color-mix(in oklch, var(--degraded), black 18%); }
.badge[data-status="partial"]     { background: color-mix(in oklch, var(--partial) 15%, transparent);     border-color: color-mix(in oklch, var(--partial) 30%, transparent);     color: var(--partial); }
.badge[data-status="major"]       { background: color-mix(in oklch, var(--major) 14%, transparent);       border-color: color-mix(in oklch, var(--major) 30%, transparent);       color: var(--major); }
.badge[data-status="maintenance"] { background: color-mix(in oklch, var(--maintenance) 14%, transparent); border-color: color-mix(in oklch, var(--maintenance) 30%, transparent); color: var(--maintenance); }

/* ============================================================
   Incidents
   ============================================================ */
.incident {
  padding: var(--space-5) var(--space-6);
}

.incident + .incident { margin-top: var(--space-3); }

.incident-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}

.incident-title {
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
}

.incident-badge {
  display: inline-flex;
  align-items: center;
  height: var(--space-6);
  padding: 0 var(--space-2-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

.incident-badge[data-status="investigating"] { background: color-mix(in oklch, var(--major) 14%, transparent); border-color: color-mix(in oklch, var(--major) 30%, transparent); color: var(--major); }
.incident-badge[data-status="identified"]    { background: color-mix(in oklch, var(--partial) 15%, transparent); border-color: color-mix(in oklch, var(--partial) 30%, transparent); color: var(--partial); }
.incident-badge[data-status="monitoring"]    { background: color-mix(in oklch, var(--degraded) 20%, transparent); border-color: color-mix(in oklch, var(--degraded) 32%, transparent); color: color-mix(in oklch, var(--degraded), black 18%); }
.incident-badge[data-status="resolved"]      { background: color-mix(in oklch, var(--operational) 14%, transparent); border-color: color-mix(in oklch, var(--operational) 30%, transparent); color: var(--operational); }

.incident-message {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--muted-foreground);
}

.incident-time {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  margin-top: var(--space-2-5);
}

.empty {
  padding: var(--space-7) var(--space-6);
  text-align: center;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}

/* ============================================================
   Footer — sunken surface
   ============================================================ */
.site-footer {
  flex-shrink: 0;
  width: 100%;
  border-top: 1px solid var(--border);
  background: var(--surface-sunken);
  color: var(--foreground);
}

.site-footer-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-6);
}

@media (min-width: 40rem) {
  .site-footer-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.footer-brand {
  display: flex;
  align-items: center;
  color: var(--foreground);
}

.footer-brand .logo {
  height: var(--logo-height-sm);
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.footer-link {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

.footer-link:hover,
.footer-link:focus-visible {
  color: var(--foreground);
}

.site-footer-bottom {
  max-width: var(--container);
  margin: 0 auto;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}

@media (min-width: 40rem) {
  .site-footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.footer-meta {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}