/* Centipod brand: the palette of centipod.io (config/brand.ts, app/globals.css), light and dark. */

/* Inter, as centipod.io uses it: Google Fonts' latin subset (v20, weights 100-900), served from this
   bucket so no visitor's address goes to a third party. Licence: inter-OFL.txt beside it (SIL OFL 1.1).
   unicode-range as in Google's own CSS for this file. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(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;
}
:root {
  --primary: #0F4C75; --accent: #D97642; --ink: #263238; --muted: #546E7A;
  --bg: #f9f9f9; --surface: #ffffff; --border: #e5e7eb; --link: #0F4C75;
  --hero-bg: #0F4C75; --hero-ink: #ffffff; --hero-muted: #cfe0ec;
  --up: #1f9d55; --degraded: #c78100; --down: #d0342c; --unknown: #8a919a;
  --warn-bg: #fdf0e7; --warn-ink: #8a3d17;
}
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #6fbde5; --accent: #ef9b65; --ink: #eef4f7; --muted: #b6c7d0;
    --bg: #0b1117; --surface: #111b24; --border: #2b3d49; --link: #7bc7eb;
    --hero-bg: #17232d; --hero-ink: #eef4f7; --hero-muted: #b6c7d0;
    --up: #3fbf74; --degraded: #e0a12a; --down: #ef5a50; --unknown: #8a919a;
    --warn-bg: #3a2414; --warn-ink: #f2b286;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.55 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  border-top: 4px solid var(--accent);
}
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.brandbar, main, .footer { max-width: 820px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.brandbar { display: flex; align-items: center; gap: 14px; padding-top: 20px; padding-bottom: 20px; }
.brand { display: inline-flex; }
.brand img { display: block; height: 32px; width: auto; }
.product { color: var(--muted); font-weight: 500; padding-left: 14px; border-left: 1px solid var(--border); }
.hero { background: var(--hero-bg); color: var(--hero-ink); border-radius: 12px; padding: 24px 24px 20px; margin-bottom: 20px; }
.hero h1 { margin: 0 0 4px; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; }
.hero .muted { color: var(--hero-muted); margin: 0; }
.banner { background: var(--warn-bg); color: var(--warn-ink); border-left: 4px solid var(--accent);
          border-radius: 8px; padding: 12px 14px; margin: 0 0 20px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); }
tbody tr:last-child td { border-bottom: 0; }
th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; }
td a { color: var(--ink); font-weight: 500; }
td a:hover { color: var(--link); }
.state { white-space: nowrap; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; }
.dot.up { background: var(--up); } .dot.degraded { background: var(--degraded); }
.dot.down { background: var(--down); } .dot.unknown { background: var(--unknown); }
.num, .mono { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, "Cascadia Code", "Fira Code", monospace; font-size: 0.88em; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; margin: 14px 0 0; }
.footer { display: flex; gap: 16px; color: var(--muted); font-size: 0.85rem; padding-top: 28px; padding-bottom: 32px; }
@media (max-width: 520px) {
  th:nth-child(4), td:nth-child(4) { display: none; }
  th, td { padding: 10px 12px; }
  .hero { padding: 20px 16px 16px; }
}