/* TTM status page + status admin — one stylesheet, shared by both pages.

   Every colour, radius, shadow, type size and control measurement below is ported from
   frontend_v2 (branch WCAG: src/index.css, tailwind.config.ts, components/ui/buttonVariants.ts,
   badgeVariants.ts, card.tsx, input.tsx, table.tsx, navbar/navbarControls.ts, Footer.tsx), so the
   status page reads as a page of the TTM site and inherits its WCAG 2.2 AA contract:
   - action fills that carry text are `--primary` (cyan-800) with white text, 5.8:1; coral is the
     highlight (focus ring, badges with navy ink), never a fill under white text;
   - text is never dimmed with alpha; muted text is `--muted-foreground` (9.9:1 on white);
   - every control is 40px tall (2.5rem), 44px on touch viewports where it stands alone;
   - keyboard focus is the 2px `--ring` outline with a 2px offset, hidden only under the pointer;
   - state is never colour alone: pills carry words, the history bars carry a text summary and
     hatching for disruption days, the overall banner carries an icon and a sentence.
   The state palette (operational/maintenance/degraded/partial/major/unknown) is this page's own,
   built from the brand ramps (teal, cyan, gold, coral, destructive red, navy); the ratios in the
   comments were measured and are asserted by tests/test_brand_tokens.py. */

/* ---- Inter, self-hosted (SIL OFL 1.1, fonts/LICENSE-Inter.txt). The site's CSP allows nothing
   but its own files, and the status page must render when third parties do not. Variable
   weight 400..700 with the optical-size axis, latin + latin-ext, like index.html requests. ---- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-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: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-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;
}

/* ---- Tokens (frontend_v2 index.css :root, light) ---- */
:root {
  color-scheme: light;
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* Fluid type scale */
  --fs-2xs: clamp(0.6875rem, 0.65rem + 0.2vw, 0.75rem);
  --fs-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --fs-sm: clamp(0.8125rem, 0.78rem + 0.3vw, 0.9375rem);
  --fs-base: clamp(0.9375rem, 0.88rem + 0.3vw, 1.0625rem);
  --fs-lg: clamp(1.0625rem, 0.98rem + 0.45vw, 1.25rem);
  --fs-xl: clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem);
  --fs-2xl: clamp(1.375rem, 1.18rem + 1vw, 1.875rem);
  --fs-3xl: clamp(1.625rem, 1.32rem + 1.5vw, 2.5rem);
  --fs-display: clamp(2rem, 1.45rem + 2.8vw, 3.75rem);

  --background: 195 38% 92%;        /* #DFECF4 */
  --foreground: 222 47% 11%;        /* navy text */
  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;
  --primary: 194.4 62.6% 32.5%;     /* cyan-800 #1F6E87 — white text 5.8:1 */
  --primary-foreground: 0 0% 100%;
  --primary-hover: 195 64.6% 25.5%; /* cyan-900 #17566B */
  --secondary: 195 38% 92%;
  --secondary-foreground: 222 47% 11%;
  --muted: 195 38% 86%;
  --muted-foreground: 215 25% 28%;  /* #364459 — 9.9:1 on white, 8.2:1 on the pale ground */
  --accent: 35 95% 62%;             /* gold #FBB042, navy ink */
  --accent-foreground: 222 47% 11%;
  --destructive: 0 72% 51%;         /* #DC2828 — 4.8:1 under white text */
  --destructive-foreground: 210 40% 98%;
  --border: 215 16% 86%;
  --input: 222 15% 55%;             /* #7B859D field edge — 3.7:1 on white, 3.1 on the pale ground */
  --ring: 6 90% 67%;                /* brand coral focus ring, both themes (frontend decision) */
  --radius: 0.5rem;
  --radius-surface: calc(var(--radius) + 0.25rem);

  --app-chrome-bg: #ffffff;
  --app-chrome-border: rgb(9 23 71 / 0.1);
  --hairline: hsl(0 5% 93%);        /* the `border-gray-200` hairline of light mode */

  --ttm-dark: #ffffff;              /* page ground start */
  --ttm-darkblue: #dfecf4;          /* page ground end */
  --ttm-light: #1a1f2c;             /* ink */
  --ttm-accent: #f76c5e;            /* coral highlight */
  --ttm-emphasis: #091747;          /* strongest ink: 17:1 on white */
  --ttm-action: #1f6e87;            /* links and hover text: 5.8:1 white, 4.8:1 pale */
  --ttm-highlight: #207c98;         /* large-heading highlight only */
  --ttm-navy-900: #0f121a;
  --ttm-navy-800: #1a1f2c;
  --ttm-navy-100: #e5e7ec;
  --ttm-navy-700: #2a3046;
  --ttm-secondary: #dfecf4;
  --ttm-secondary-200: #cfe6f2;
  --ttm-cyan: #2eaed5;
  --ttm-cyan-700: #0085ac;
  --ttm-cyan-800: #1f6e87;
  --ttm-lightblue: #09dffd;
  --ttm-darknavy: #091747;

  --ttm-shadow-surface: 0 1px 2px 0 rgb(15 23 42 / 0.06), 0 2px 8px -2px rgb(15 23 42 / 0.08), 0 0 0 1px rgb(15 23 42 / 0.04);
  --ttm-shadow-primary-button: 0 14px 36px -10px rgb(15 23 42 / 0.3), 0 6px 16px -8px rgb(15 23 42 / 0.2), 0 2px 6px -2px rgb(247 108 94 / 0.18);
  --ttm-shadow-primary-button-hover: 0 18px 44px -10px rgb(15 23 42 / 0.36), 0 8px 20px -8px rgb(15 23 42 / 0.22), 0 3px 8px -2px rgb(247 108 94 / 0.26);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.035);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.07), 0 4px 6px -4px rgb(0 0 0 / 0.05);

  /* State palette, light. ink = text on fill or on a white card; bar = the history graphic.
     Measured on white / on the fill: operational 6.3 / 5.7, maintenance 5.8 / 5.3,
     degraded 5.5 / 5.2, partial 5.9 / 5.4, major 6.5 / 5.9, unknown 6.9 / 6.4. Bars on white:
     3.3, 4.0, 3.7, 3.9, 4.8 (unknown is the empty track, 1.5). */
  --state-operational-ink: #0f6b6b;  --state-operational-fill: #e5f8f8;  --state-operational-bar: #189d9d;
  --state-maintenance-ink: #1f6e87;  --state-maintenance-fill: #e6f7ff;  --state-maintenance-bar: #1a8aad;
  --state-degraded-ink: #8e5f18;     --state-degraded-fill: #fef8e8;     --state-degraded-bar: #b37920;
  --state-partial_outage-ink: #b23a2e; --state-partial_outage-fill: #fef2f1; --state-partial_outage-bar: #e04e3f;
  --state-major_outage-ink: #b91c1c; --state-major_outage-fill: #fef2f2; --state-major_outage-bar: #dc2626;
  --state-unknown-ink: #4d5a75;      --state-unknown-fill: #f5f6f8;      --state-unknown-bar: #ccd0da;

  --measure: 68rem;
}

/* ---- Tokens (frontend_v2 .dark-mode) ---- */
:root.dark-mode {
  color-scheme: dark;
  --background: 222 47% 11%;
  --foreground: 0 0% 98%;
  --card: 222 47% 11%;
  --card-foreground: 0 0% 98%;
  --primary: 194 65.2% 36.1%;       /* #207C98 — white text 4.8:1 */
  --primary-foreground: 0 0% 100%;
  --primary-hover: 194.4 62.6% 32.5%;
  --secondary: 222 30% 18%;
  --secondary-foreground: 0 0% 98%;
  --muted: 222 30% 18%;
  --muted-foreground: 240 5% 64.9%; /* 7.0:1 on navy */
  --accent: 35 95% 62%;
  --accent-foreground: 222 47% 11%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --border: 222 15% 22%;
  --input: 222 15% 45%;             /* #626C84 — 3.4:1 on navy */
  --ring: 6 90% 67%;                /* 6.3:1 on navy */

  --app-chrome-bg: #1a1f2c;
  --app-chrome-border: rgb(255 255 255 / 0.08);
  --hairline: rgb(255 255 255 / 0.09);

  --ttm-dark: #1a1f2c;
  --ttm-darkblue: #0f172a;
  --ttm-light: #e9e9ff;
  --ttm-accent: #f76c5e;
  --ttm-emphasis: #ffffff;
  --ttm-action: #2eaed5;            /* 6.9:1 on navy */

  --ttm-shadow-surface: none;
  --ttm-shadow-primary-button: 0 16px 42px -12px rgb(0 0 0 / 0.55), 0 8px 22px -10px rgb(0 0 0 / 0.35), 0 2px 8px -2px rgb(247 108 94 / 0.22);
  --ttm-shadow-primary-button-hover: 0 20px 50px -12px rgb(0 0 0 / 0.6), 0 10px 26px -10px rgb(247 108 94 / 0.28), 0 3px 10px -2px rgb(247 108 94 / 0.2);

  /* State palette, dark: ink 300-step of each ramp (7:1 and up on navy), fill = ink at 14% over
     the page, bar = the brand step. Measured ink on fill: 7.7, 7.7, 8.9, 7.0, 7.2, 5.9. */
  --state-operational-ink: #66d6d6;  --state-operational-fill: #1b3241;  --state-operational-bar: #20cfcf;
  --state-maintenance-ink: #66d1ff;  --state-maintenance-fill: #1b3147;  --state-maintenance-bar: #4cc2ff;
  --state-degraded-ink: #fbd073;     --state-degraded-fill: #303133;     --state-degraded-bar: #fbb042;
  --state-partial_outage-ink: #f8a49b; --state-partial_outage-fill: #302b39; --state-partial_outage-bar: #f47265;
  --state-major_outage-ink: #fca5a5; --state-major_outage-fill: #302b3a; --state-major_outage-bar: #ef4444;
  --state-unknown-ink: #9fa7b9;      --state-unknown-fill: #232b3d;      --state-unknown-bar: #4d5a75;
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; border-color: hsl(var(--border)); }
html {
  font-size: clamp(15px, 0.875rem + 0.25vw, 18px);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  overflow-x: clip;
}
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Inter", var(--font-sans);
  font-optical-sizing: auto;
  font-size: var(--fs-base);
  line-height: 1.55;
  color: hsl(var(--foreground));
  background: linear-gradient(to bottom right, var(--ttm-dark), var(--ttm-darkblue));
  overflow-x: clip;
  display: flex;
  flex-direction: column;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; text-wrap: balance; }
p { margin: 0; }
a { color: var(--ttm-action); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; }
[hidden] { display: none !important; }
.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; }
.tabular { font-variant-numeric: tabular-nums; }

/* Keyboard focus: the frontend's one ring, hidden under the pointer by the modality stamp. */
:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
html[data-input-modality="pointer"] :focus-visible:not(input, textarea, select) { outline: none; }

/* Skip link: the first tab stop, visible only while focused (Common/a11y/SkipLink). */
.skip-link { position: absolute; left: -9999px; top: 1rem; z-index: 200; padding: 0.5rem 1rem; border-radius: calc(var(--radius) - 2px); background: var(--ttm-dark); color: var(--ttm-light); font-size: 0.875rem; font-weight: 500; text-decoration: none; box-shadow: var(--shadow-lg); }
.skip-link:focus { left: 1rem; outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- Layout ---- */
.container { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px) { .container { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .container { padding-inline: 2rem; } }
main { flex: 1 0 auto; padding-block: 1.5rem 3rem; }
@media (min-width: 768px) { main { padding-block: 2rem 4rem; } }
.stack > * + * { margin-top: 1.5rem; }
.section-title { font-size: var(--fs-xl); margin-bottom: 0.25rem; }
.section-lede { color: hsl(var(--muted-foreground)); font-size: var(--fs-sm); margin-bottom: 1rem; }
.meta { color: hsl(var(--muted-foreground)); font-size: var(--fs-sm); }

/* ---- Header: the app chrome (navbarControls.ts) ---- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--app-chrome-border);
  background: color-mix(in srgb, var(--app-chrome-bg) 88%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
@supports not (color-mix(in srgb, red 50%, blue)) { .site-header { background: var(--app-chrome-bg); } }
/* Brand and cluster share the first row at every width; the links take a second row until the
   desktop breakpoint seats them between the two (explicit placement, so DOM order never matters). */
.site-header .bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.75rem 1rem; min-height: 4.5rem; }
.brand { display: block; height: 3.75rem; width: 11rem; flex-shrink: 0; overflow: hidden; border-radius: var(--radius); justify-self: start; grid-row: 1; grid-column: 1; }
@media (min-width: 640px) { .brand { width: 12rem; } }
.brand img { height: 100%; width: 100%; object-fit: cover; object-position: center; transform: scale(1.12); transform-origin: center; }
.logo-dark { display: none; }
.dark-mode .logo-light { display: none; }
.dark-mode .logo-dark { display: block; }
.header-title { display: inline-flex; align-items: center; gap: 0.75rem; font-size: var(--fs-sm); font-weight: 600; color: var(--ttm-emphasis); white-space: nowrap; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; grid-row: 2; grid-column: 1 / -1; padding-bottom: 0.5rem; margin-left: -0.75rem; }
.site-nav a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 0.75rem; border-radius: var(--radius-surface); font-size: 0.875rem; font-weight: 500; color: var(--ttm-light); text-decoration: none; text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color 0.15s; }
.site-nav a:hover { color: var(--ttm-cyan-800); text-decoration: underline; text-decoration-color: var(--ttm-cyan); }
.dark-mode .site-nav a:hover { color: var(--ttm-cyan); }
.site-nav a[aria-current="page"] { color: var(--ttm-cyan-800); text-decoration: underline; text-decoration-color: var(--ttm-cyan); }
.dark-mode .site-nav a[aria-current="page"] { color: var(--ttm-cyan); }
.cluster { display: flex; align-items: center; gap: 0.5rem; justify-self: end; grid-row: 1; grid-column: 2; }
@media (min-width: 1024px) {
  .site-header .bar { grid-template-columns: minmax(12rem, 1fr) auto minmax(12rem, 1fr); }
  .site-nav { grid-row: 1; grid-column: 2; justify-self: center; padding-bottom: 0; margin-left: 0; }
  .cluster { grid-column: 3; }
}
.seam { height: 1.25rem; width: 1px; flex-shrink: 0; background: var(--app-chrome-border); }

/* The utility plate: 40px, the product's button radius, a 5% ink film, no border. */
.control {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: 2.5rem; min-width: 2.5rem; padding: 0 0.75rem; border: 0; border-radius: var(--radius-surface);
  background: color-mix(in srgb, var(--ttm-light) 5%, transparent); color: var(--ttm-light);
  font-size: 0.875rem; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}
.control:hover { background: color-mix(in srgb, var(--ttm-cyan-700) 12%, transparent); color: var(--ttm-cyan-700); }
.dark-mode .control { background: color-mix(in srgb, var(--ttm-light) 8%, transparent); }
.dark-mode .control:hover { background: color-mix(in srgb, var(--ttm-lightblue) 14%, transparent); color: var(--ttm-lightblue); }
.control svg { width: 1.125rem; height: 1.125rem; }
.icon-sun { display: none; }
.dark-mode .icon-sun { display: block; }
.dark-mode .icon-moon { display: none; }

/* Environment badge: coral highlight with navy ink (5.5:1), as the brand uses coral. */
.env-badge { display: inline-flex; align-items: center; height: 1.5rem; padding: 0 0.625rem; border-radius: 9999px; background: var(--ttm-accent); color: #1a1f2c; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

/* ---- Buttons (buttonVariants.ts) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; white-space: nowrap;
  height: 2.5rem; padding: 0 1rem; border: 1px solid transparent; border-radius: var(--radius-surface);
  font-size: 0.875rem; font-weight: 500; line-height: 1; text-decoration: none; cursor: pointer;
  transition: color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.btn:disabled { pointer-events: none; opacity: 0.5; }
.btn svg { width: 1rem; height: 1rem; flex-shrink: 0; pointer-events: none; }
.btn-primary { background: hsl(var(--primary)); color: #fff; box-shadow: var(--ttm-shadow-primary-button); }
.btn-primary:hover { background: hsl(var(--primary-hover)); box-shadow: var(--ttm-shadow-primary-button-hover); }
.btn-secondary { background: var(--ttm-secondary); color: var(--ttm-navy-900); box-shadow: var(--shadow-md); }
.btn-secondary:hover { background: var(--ttm-secondary-200); }
.dark-mode .btn-secondary { background: #334155; color: var(--ttm-light); }
.dark-mode .btn-secondary:hover { background: #475569; }
.btn-outline { border-color: var(--hairline); background: transparent; color: var(--ttm-navy-900); }
.btn-outline:hover { background: var(--ttm-secondary); }
.dark-mode .btn-outline { border-color: rgb(255 255 255 / 0.12); color: var(--ttm-light); }
.dark-mode .btn-outline:hover { background: #334155; }
.btn-ghost { background: transparent; color: var(--ttm-navy-900); }
.btn-ghost:hover { background: var(--ttm-navy-100); }
.dark-mode .btn-ghost { color: var(--ttm-light); }
.dark-mode .btn-ghost:hover { background: var(--ttm-navy-700); }
.btn-destructive { background: #dc2626; color: #fff; box-shadow: var(--shadow-sm); }
.btn-destructive:hover { background: #b91c1c; }
.btn-link { height: auto; padding: 0; border: 0; background: none; color: var(--ttm-action); text-underline-offset: 4px; }
.btn-link:hover { text-decoration: underline; }
.btn-sm { height: 2.25rem; padding: 0 0.75rem; }
.btn-lg { height: 2.75rem; padding: 0 2rem; }
.btn-icon { width: 2.5rem; padding: 0; }

/* ---- Badges (badgeVariants.ts) and state pills ---- */
.badge { display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 9999px; border: 1px solid transparent; padding: 0.125rem 0.625rem; font-size: 0.75rem; font-weight: 600; line-height: 1.25rem; white-space: nowrap; }
.badge-primary { background: hsl(var(--primary)); color: #fff; }
.badge-secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.badge-outline { border-color: hsl(var(--border)); color: hsl(var(--foreground)); }
.badge-lightblue { background: var(--ttm-lightblue); color: #0f121a; }
.badge-darknavy { background: var(--ttm-darknavy); color: #fff; }
.badge-coral { background: var(--ttm-accent); color: #1a1f2c; }
.badge-muted { background: hsl(var(--muted)); color: hsl(var(--foreground)); }

.pill { display: inline-flex; align-items: center; gap: 0.4rem; border-radius: 9999px; padding: 0.125rem 0.625rem 0.125rem 0.5rem; font-size: 0.75rem; font-weight: 600; line-height: 1.25rem; white-space: nowrap; background: var(--state-unknown-fill); color: var(--state-unknown-ink); }
.pill::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.pill.state-operational { background: var(--state-operational-fill); color: var(--state-operational-ink); }
.pill.state-maintenance { background: var(--state-maintenance-fill); color: var(--state-maintenance-ink); }
.pill.state-degraded { background: var(--state-degraded-fill); color: var(--state-degraded-ink); }
.pill.state-partial_outage { background: var(--state-partial_outage-fill); color: var(--state-partial_outage-ink); }
.pill.state-major_outage { background: var(--state-major_outage-fill); color: var(--state-major_outage-ink); }
.pill.state-unknown { background: var(--state-unknown-fill); color: var(--state-unknown-ink); }
.pill.state-ok { background: var(--state-operational-fill); color: var(--state-operational-ink); }
.pill.state-failed { background: var(--state-major_outage-fill); color: var(--state-major_outage-ink); }
.pill.state-warn, .pill.state-stale { background: var(--state-degraded-fill); color: var(--state-degraded-ink); }
.pill.state-off { background: var(--state-unknown-fill); color: var(--state-unknown-ink); }
.pill.state-info { background: var(--state-maintenance-fill); color: var(--state-maintenance-ink); }

/* ---- Cards (card.tsx + dashboardSurfaceCardClassName) ---- */
.card { background: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid var(--hairline); border-radius: var(--radius-surface); box-shadow: var(--ttm-shadow-surface); }
.dark-mode .card { background: var(--ttm-dark); }
.card-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; padding: 1.25rem 1.25rem 0; }
.card-title { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; }
.card-description { color: hsl(var(--muted-foreground)); font-size: var(--fs-sm); margin-top: 0.25rem; flex-basis: 100%; }
.card-content { padding: 1.25rem; }
.card-header + .card-content { padding-top: 0.75rem; }
.card-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 0 1.25rem 1.25rem; }
@media (min-width: 640px) { .card-header { padding: 1.5rem 1.5rem 0; } .card-content { padding: 1.5rem; } .card-footer { padding: 0 1.5rem 1.5rem; } }

/* ---- Tables (table.tsx) ---- */
.table-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-gutter: stable; }
.table-scroll-x::-webkit-scrollbar { height: 6px; }
.table-scroll-x::-webkit-scrollbar-thumb { background: rgb(156 163 175 / 0.35); border-radius: 3px; }
table.data { width: 100%; min-width: 100%; border-collapse: collapse; caption-side: bottom; font-size: var(--fs-sm); }
.data caption { margin-top: 1rem; color: hsl(var(--muted-foreground)); text-align: left; }
.data th { height: 3rem; padding: 0 1rem; text-align: left; vertical-align: middle; font-weight: 500; color: hsl(var(--muted-foreground)); border-bottom: 1px solid hsl(var(--border)); white-space: nowrap; }
.data td { padding: 0.75rem 1rem; vertical-align: middle; border-bottom: 1px solid hsl(var(--border)); }
.data tbody tr:last-child td { border-bottom: 0; }
.data tbody tr:hover { background: hsl(var(--muted) / 0.5); }
.data .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data .wrap { white-space: normal; }
.data td.tight, .data th.tight { width: 1%; white-space: nowrap; }
.data .col-wide { min-width: 12rem; }
.card > .table-scroll-x table.data { border-radius: var(--radius-surface); }
.card > .table-scroll-x .data th:first-child, .card > .table-scroll-x .data td:first-child { padding-left: 1.25rem; }
.card > .table-scroll-x .data th:last-child, .card > .table-scroll-x .data td:last-child { padding-right: 1.25rem; }
.empty { padding: 1.25rem; color: hsl(var(--muted-foreground)); font-size: var(--fs-sm); }

/* ---- Forms (input.tsx, label.tsx, checkbox) ---- */
.field { display: flex; flex-direction: column; min-width: 0; }
.label { display: block; font-size: 0.875rem; font-weight: 500; line-height: 1; margin-bottom: 0.5rem; }
.input, .select, .textarea {
  display: block; width: 100%; height: 2.5rem; padding: 0.5rem 0.75rem; border: 1px solid hsl(var(--input)); border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--background) / 0.6); color: hsl(var(--foreground)); font-size: 1rem; line-height: 1.4;
  transition: border-color 0.2s, box-shadow 0.2s;
}
@media (min-width: 768px) { .input, .select, .textarea { font-size: 0.875rem; } }
.input::placeholder, .textarea::placeholder { color: hsl(var(--muted-foreground)); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 1px hsl(var(--ring)); }
.input:disabled, .select:disabled, .textarea:disabled { cursor: not-allowed; opacity: 0.5; }
.textarea { height: auto; min-height: 5rem; resize: vertical; }
.select { appearance: none; -webkit-appearance: none; padding-right: 2.25rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23364459' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; }
.dark-mode .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.form-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.form-grid .span-2 { grid-column: span 2; }
@media (max-width: 639px) { .form-grid .span-2 { grid-column: auto; } }
.form-row + .form-row, .form-grid + .form-row, .form-row + .form-grid, .form-grid + .form-grid { margin-top: 1rem; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.25rem; }
.help { color: hsl(var(--muted-foreground)); font-size: var(--fs-xs); margin-top: 0.375rem; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; font-size: 0.875rem; font-weight: 500; line-height: 1; margin-bottom: 0.5rem; }
.check-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.check { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 0.75rem; border: 1px solid var(--hairline); border-radius: var(--radius-surface); font-size: 0.875rem; cursor: pointer; background: hsl(var(--card)); transition: border-color 0.15s, background-color 0.15s; }
.dark-mode .check { background: transparent; border-color: rgb(255 255 255 / 0.12); }
.check:hover { background: hsl(var(--muted) / 0.5); }
.check:has(:checked) { border-color: hsl(var(--primary)); background: hsl(var(--primary) / 0.08); }
.check input { width: 1rem; height: 1rem; margin: 0; accent-color: hsl(var(--primary)); }
@media (min-width: 768px) { .check { min-height: 2.25rem; } }

/* ---- Notices ---- */
.notice { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.875rem 1rem; border-radius: var(--radius-surface); border: 1px solid transparent; font-size: var(--fs-sm); }
.notice svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; margin-top: 0.1rem; }
.notice-ok { background: var(--state-operational-fill); color: var(--state-operational-ink); border-color: color-mix(in srgb, var(--state-operational-ink) 25%, transparent); }
.notice-error { background: var(--state-major_outage-fill); color: var(--state-major_outage-ink); border-color: color-mix(in srgb, var(--state-major_outage-ink) 25%, transparent); }
.notice-warn { background: var(--state-degraded-fill); color: var(--state-degraded-ink); border-color: color-mix(in srgb, var(--state-degraded-ink) 25%, transparent); }
.notice-info { background: var(--state-maintenance-fill); color: var(--state-maintenance-ink); border-color: color-mix(in srgb, var(--state-maintenance-ink) 25%, transparent); }

/* ---- Status page: the overall banner ---- */
.overall { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem; border-radius: var(--radius-surface); border: 1px solid transparent; background: hsl(var(--card)); box-shadow: var(--ttm-shadow-surface); }
@media (min-width: 640px) { .overall { padding: 1.5rem 1.75rem; align-items: center; } }
.overall .state-icon { width: 3rem; height: 3rem; flex-shrink: 0; border-radius: 9999px; display: grid; place-items: center; background: var(--state-unknown-ink); color: #fff; }
.overall .state-icon svg { width: 1.5rem; height: 1.5rem; }
.overall h1 { font-size: var(--fs-2xl); letter-spacing: -0.02em; }
.overall .meta { margin-top: 0.25rem; }
.overall.state-operational { background: var(--state-operational-fill); border-color: color-mix(in srgb, var(--state-operational-ink) 22%, transparent); }
.overall.state-maintenance { background: var(--state-maintenance-fill); border-color: color-mix(in srgb, var(--state-maintenance-ink) 22%, transparent); }
.overall.state-degraded { background: var(--state-degraded-fill); border-color: color-mix(in srgb, var(--state-degraded-ink) 22%, transparent); }
.overall.state-partial_outage { background: var(--state-partial_outage-fill); border-color: color-mix(in srgb, var(--state-partial_outage-ink) 22%, transparent); }
.overall.state-major_outage { background: var(--state-major_outage-fill); border-color: color-mix(in srgb, var(--state-major_outage-ink) 22%, transparent); }
.overall.state-unknown { background: var(--state-unknown-fill); border-color: color-mix(in srgb, var(--state-unknown-ink) 22%, transparent); }
.overall.state-operational .state-icon { background: var(--state-operational-ink); }
.overall.state-maintenance .state-icon { background: var(--state-maintenance-ink); }
.overall.state-degraded .state-icon { background: var(--state-degraded-ink); }
.overall.state-partial_outage .state-icon { background: var(--state-partial_outage-ink); }
.overall.state-major_outage .state-icon { background: var(--state-major_outage-ink); }
.dark-mode .overall .state-icon { color: #0f172a; }
.overall .state-icon svg { display: none; }
body[data-overall="operational"] .icon-operational, body[data-overall="maintenance"] .icon-maintenance, body[data-overall="degraded"] .icon-degraded,
body[data-overall="partial_outage"] .icon-partial_outage, body[data-overall="major_outage"] .icon-major_outage, body[data-overall="unknown"] .icon-unknown { display: block; }

/* Live indicator: a dot plus words. */
.indicator { display: inline-flex; align-items: center; gap: 0.4rem; }
.indicator::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--state-unknown-ink); flex-shrink: 0; }
.indicator-live::before { background: var(--state-operational-ink); }
.indicator-stale::before { background: var(--state-degraded-ink); }
.indicator-stale { color: var(--state-degraded-ink); }
.dark-mode .indicator-stale { color: var(--state-degraded-ink); }

/* ---- Status page: component groups ---- */
.group .card-header { align-items: center; }
.group-summary { color: hsl(var(--muted-foreground)); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.component { padding: 1rem 0; border-top: 1px solid var(--hairline); }
.component:first-child { padding-top: 0; border-top: 0; }
.component:last-child { padding-bottom: 0; }
.component-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem 1rem; flex-wrap: wrap; }
.component-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; min-width: 0; }
.component-name .name { font-weight: 600; font-size: var(--fs-base); }
.component-name .description { color: hsl(var(--muted-foreground)); font-size: var(--fs-sm); }
.component-state { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.uptime { color: hsl(var(--muted-foreground)); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.history { display: flex; gap: 2px; margin-top: 0.75rem; height: 1.75rem; }
.history .day { flex: 1 1 0; min-width: 0; border-radius: 2px; background: var(--state-unknown-bar); }
.history .day.state-operational { background: var(--state-operational-bar); }
.history .day.state-maintenance { background: var(--state-maintenance-bar); }
/* Disruption days are hatched as well as coloured, so the bar reads without colour. */
.history .day.state-degraded { background: var(--state-degraded-bar) repeating-linear-gradient(135deg, rgb(255 255 255 / 0.45) 0 2px, transparent 2px 6px); }
.history .day.state-partial_outage { background: var(--state-partial_outage-bar) repeating-linear-gradient(135deg, rgb(255 255 255 / 0.45) 0 2px, transparent 2px 6px); }
.history .day.state-major_outage { background: var(--state-major_outage-bar) repeating-linear-gradient(45deg, rgb(255 255 255 / 0.5) 0 2px, transparent 2px 5px); }
.history-legend { display: flex; justify-content: space-between; gap: 1rem; color: hsl(var(--muted-foreground)); font-size: var(--fs-xs); margin-top: 0.375rem; }
@media (max-width: 600px) { .history { height: 1.25rem; gap: 1px; } }

/* ---- Incidents and maintenance ---- */
.incident, .window { padding: 1.25rem; border-left-width: 4px; }
.incident.impact-minor { border-left-color: var(--state-degraded-bar); }
.incident.impact-major { border-left-color: var(--state-partial_outage-bar); }
.incident.impact-critical { border-left-color: var(--state-major_outage-bar); }
.incident.resolved { border-left-color: var(--state-operational-bar); }
.window { border-left-color: var(--state-maintenance-bar); }
.incident-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.incident h3 { font-size: var(--fs-lg); }
.incident-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.incident-meta { color: hsl(var(--muted-foreground)); font-size: var(--fs-sm); margin-top: 0.375rem; }
.updates { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.625rem; }
.updates li { display: grid; grid-template-columns: auto 1fr; gap: 0.125rem 0.75rem; font-size: var(--fs-sm); }
.updates li time { grid-row: span 2; align-self: start; color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 9rem; }
.updates li .status { font-weight: 600; }
.updates li .body { color: hsl(var(--foreground)); }
@media (max-width: 639px) { .updates li { grid-template-columns: 1fr; } .updates li time { grid-row: auto; } }
.incident + .incident, .window + .window { margin-top: 1rem; }

/* ---- Subscribe + footer (Footer.tsx CompactFooter) ---- */
.subscribe .card-content { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.site-footer { border-top: 1px solid var(--app-chrome-border); background: color-mix(in srgb, var(--app-chrome-bg) 95%, transparent); padding: 1rem 0; margin-top: auto; }
.site-footer .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.25rem; }
.footer-brand { display: block; height: 3rem; width: 10rem; overflow: hidden; }
@media (min-width: 768px) { .footer-brand { height: 3.5rem; width: 12rem; } }
.footer-brand img { height: 100%; width: 100%; object-fit: cover; object-position: center; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.25rem 0.5rem; }
.footer-links .lead { color: hsl(var(--muted-foreground)); font-size: 0.75rem; font-weight: 500; white-space: nowrap; padding: 0 0.25rem; }
.footer-links a { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 0.5rem; border-radius: calc(var(--radius) - 2px); color: hsl(var(--muted-foreground)); font-size: 0.75rem; text-decoration: none; transition: color 0.15s; }
.footer-links a:hover { color: var(--ttm-action); text-decoration: underline; }
.site-footer .legal { border-top: 1px solid var(--app-chrome-border); margin-top: 1rem; padding-top: 0.75rem; text-align: center; color: hsl(var(--muted-foreground)); font-size: 0.75rem; }

/* ---- Admin page ---- */
body.admin { --measure: 76rem; }
.tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.tile { padding: 1.125rem 1.25rem; display: flex; flex-direction: column; gap: 0.25rem; }
.tile-label { color: hsl(var(--muted-foreground)); font-size: var(--fs-sm); font-weight: 500; }
.tile-value { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.tile-meta { color: hsl(var(--muted-foreground)); font-size: var(--fs-xs); }
.tile-actions { margin-top: 0.5rem; }
.state-counts { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.25rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.chip { display: inline-flex; align-items: center; border-radius: 9999px; border: 1px solid hsl(var(--border)); padding: 0.0625rem 0.5rem; font-size: 0.75rem; line-height: 1.25rem; white-space: nowrap; }
.kv { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.25rem; font-size: var(--fs-sm); }
.kv li { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: 0.75rem; }
.kv li span:first-child { color: hsl(var(--muted-foreground)); }
.kv li span:last-child { overflow-wrap: anywhere; }
details.disclosure { font-size: var(--fs-sm); }
details.disclosure summary { cursor: pointer; display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2rem; color: var(--ttm-action); font-weight: 500; list-style: none; border-radius: calc(var(--radius) - 2px); padding: 0 0.25rem; }
details.disclosure summary::-webkit-details-marker { display: none; }
details.disclosure summary::before { content: ""; width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s; margin-right: 0.125rem; }
details.disclosure[open] summary::before { transform: rotate(45deg); }
details.disclosure > :not(summary) { margin-top: 0.5rem; }
.two-col { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .two-col { grid-template-columns: 1fr 1fr; align-items: start; } }
.admin .incident, .admin .window { padding: 1.25rem; }
.inline-form { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--hairline); }
.service-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.25rem; font-size: var(--fs-sm); }
.service-list li { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; }
.service-list .name { font-weight: 500; min-width: 10rem; }
.transition-arrow { color: hsl(var(--muted-foreground)); padding: 0 0.25rem; }

/* ---- Forced colours (Windows High Contrast): keep the shapes that colour would otherwise carry. ---- */
@media (forced-colors: active) {
  .pill, .badge, .chip, .env-badge, .card, .btn { border: 1px solid; }
  .history .day { forced-color-adjust: none; }
  .overall .state-icon { border: 1px solid; }
}
.window-body { margin-top: 0.75rem; }