/* Morechard status page.
   Brand tokens from docs/notebooklm/10-ui-ux-design-system.md: Grove Teal #00959c,
   Harvest Gold #e6b222, parchment #f9f7f2, DM Sans. Small teal text on white uses
   #006a70 (the High Contrast value) to clear WCAG AA. DM Sans is self-hosted so the
   page makes no third-party request. No JS. */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/dmsans-latin.woff2') format('woff2');
}
:root {
  --teal: #00959c; --teal-text: #006a70; --gold: #e6b222;
  --bg: #f9f7f2; --surface: #ffffff; --surface-alt: #f3f2ee; --border: #d3d1c7;
  --text: #1c1c1a; --muted: #5d5c58;
  --ok: #1e7a4a; --warn: #8a5a00; --bad: #a8232d; --maint: #2a5d8f;
}
@media (prefers-color-scheme: dark) {
  :root {
    --teal: #00959c; --teal-text: #5fd0d6; --gold: #e6b222;
    --bg: #1b2d2e; --surface: #243637; --surface-alt: #1e2e2f; --border: #3a5254;
    --text: #f9f7f2; --muted: #b6c9ca;
    --ok: #6fd39a; --warn: #f2c060; --bad: #ff8a93; --maint: #8fc1f0;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 'DM Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* Header: mark + lowercase light wordmark, exactly like the marketing site */
.top { display: flex; align-items: center; gap: 10px; padding: 18px 16px 14px; max-width: 760px; margin: 0 auto; border-bottom: 2px solid var(--teal); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand .mark { display: block; }
.wordmark { font-weight: 300; font-size: 1.35rem; letter-spacing: 0.06em; text-transform: lowercase; line-height: 1; color: var(--text); }
.sub { margin-left: auto; color: var(--muted); font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; }

main { max-width: 760px; margin: 0 auto; padding: 20px 16px 48px; }
footer { max-width: 760px; margin: 0 auto; padding: 16px; color: var(--muted); font-size: 14px; border-top: 1px solid var(--border); }
footer p { margin: 4px 0; }
a { color: var(--teal-text); }
h1 { margin: 0; font-size: 24px; font-weight: 600; }
h2 { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 32px 0 12px; }
h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; }

/* Overall banner: semantic colour for state, so health reads at a glance */
.banner { border-radius: 16px; padding: 20px 22px; color: #fff; background: var(--ok); }
.banner p { margin: 4px 0 0; opacity: .9; font-size: 14px; }
.b-maintenance { background: var(--maint); }
.b-degraded { background: var(--warn); }
.b-partial_outage, .b-major_outage { background: var(--bad); }
@media (prefers-color-scheme: dark) { .banner, .pill { color: #10201f; } }

.components ul { list-style: none; margin: 16px 0 0; padding: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; }
.components li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 16px; border-top: 1px solid var(--border); }
.components li:first-child { border-top: 0; }
.components .name { font-weight: 600; }
.components .desc { grid-column: 1; color: var(--muted); font-size: 13px; }
.components .state { grid-column: 2; grid-row: 1 / 3; align-self: center; font-weight: 600; font-size: 14px; }
.c-operational .state { color: var(--ok); }
.c-degraded .state { color: var(--warn); }
.c-partial_outage .state, .c-major_outage .state { color: var(--bad); }
.c-maintenance .state { color: var(--maint); }

.card { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--teal); border-radius: 14px; padding: 16px; margin: 0 0 12px; }
.card.maintenance { border-top-color: var(--gold); }
.meta { color: var(--muted); font-size: 14px; margin: 0 0 8px; }
.muted { color: var(--muted); }
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff; background: var(--muted); }
.s-investigating, .s-identified { background: var(--bad); }
.s-monitoring { background: var(--warn); }
.s-resolved, .s-complete { background: var(--ok); }
.s-scheduled, .s-in_progress { background: var(--maint); }
.s-cancelled { background: var(--muted); }
.eta-line { padding: 10px 12px; border-left: 4px solid var(--teal); background: var(--surface-alt); border-radius: 6px; }
.updates { list-style: none; padding: 0; margin: 12px 0 0; border-top: 1px solid var(--border); }
.updates li { padding: 10px 0; border-bottom: 1px solid var(--border); }
.updates p { margin: 4px 0 0; }
.eta { font-size: 13px; }
@media (max-width: 480px) { .components .state { grid-column: 1; grid-row: auto; } }