@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/inter-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/inter-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/inter-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/inter-latin-700-normal.woff2) format('woff2'); }

/* The platform dashboard's theme (platform/dashboard/src/theme.ts): portal colours, Inter, 8px radius, no shadows. */
:root {
  --primary: #3459b5;
  --wash: #eef2fb;
  --bg: #f3f5f8;
  --paper: #ffffff;
  --text: #202b3b;
  --text-2: #637084;
  --muted: #8a94a6;
  --divider: #e3e7ee;
  --axis: #d5dae2;
  --hover: rgba(32, 43, 59, 0.045);
  --good: #0a8a0a;
  --warning: #a15c00;
  --critical: #c23232;
  --good-bg: rgba(10, 138, 10, 0.08);
  --warning-bg: rgba(161, 92, 0, 0.08);
  --critical-bg: rgba(194, 50, 50, 0.08);
  --unknown-bg: rgba(138, 148, 166, 0.14);
  --good-on-dark: #5fd35f;
  --warning-on-dark: #f2b04a;
  --critical-on-dark: #f27b7b;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 13px/1.5 Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { display: block; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.noscript { margin: 72px 16px; text-align: center; color: var(--text-2); }

.s-operational { --c: var(--good); --c-bg: var(--good-bg); --c-dark: var(--good-on-dark); }
.s-degraded { --c: var(--warning); --c-bg: var(--warning-bg); --c-dark: var(--warning-on-dark); }
.s-outage { --c: var(--critical); --c-bg: var(--critical-bg); --c-dark: var(--critical-on-dark); }
.k-incident { --c: var(--critical); --c-bg: var(--critical-bg); }
.k-maintenance { --c: var(--primary); --c-bg: rgba(52, 89, 181, 0.1); }
.k-info { --c: var(--text-2); --c-bg: var(--unknown-bg); }
.s-unknown, .s-none { --c: var(--muted); --c-bg: var(--unknown-bg); --c-dark: #b4bccb; }

/* Top bar: white, 48px, hairline below, the logo and the product name. */
.appbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px; background: var(--paper); border-bottom: 1px solid var(--divider); }
.appbar img { width: 24px; height: 24px; border-radius: 6px; }
.brand { font-weight: 700; font-size: 14px; letter-spacing: -0.01em; white-space: nowrap; }
.crumb { font-weight: 500; font-size: 13.5px; color: var(--text-2); padding-left: 4px; }

.page { max-width: 1000px; margin: 0 auto; padding: 16px 16px 48px; display: flex; flex-direction: column; gap: 16px; transition: opacity 160ms; }
.toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; min-height: 32px; }
.legend { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; }
.key { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--text-2); cursor: help; }
.key svg { color: var(--c); }

.seg { display: inline-flex; border: 1px solid var(--divider); border-radius: 6px; background: var(--paper); overflow: hidden; }
.seg button { padding: 3px 12px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.seg button + button { border-left: 1px solid var(--divider); }
.seg button:hover { background: var(--hover); }
.seg button[aria-pressed='true'] { background: rgba(52, 89, 181, 0.08); color: var(--primary); }
button:focus-visible, [tabindex]:focus-visible, dialog:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Tiles: a label with its icon, one big number. */
.tiles { display: flex; flex-wrap: wrap; gap: 16px; }
.tile { flex: 1 1 220px; min-width: 0; padding: 16px; background: var(--paper); border: 1px solid var(--divider); border-radius: 8px; }
.label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--text-2); cursor: help; }
.big { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.big svg { color: var(--c); }
.status-word { display: inline-flex; align-items: center; gap: 10px; }
.big.num { font-variant-numeric: tabular-nums; }
.sub { font-size: 12.5px; color: var(--text-2); }

/* Panels: a 40px header with icon, title and definition, then rows. */
.panel { min-width: 0; background: var(--paper); border: 1px solid var(--divider); border-radius: 8px; overflow: hidden; }
.panel-head { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--divider); }
.panel-head.closed { border-bottom-color: transparent; }
.panel-toggle { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; min-height: 40px; text-align: left; user-select: none; }
.panel-toggle .caret { display: flex; color: var(--muted); transition: transform 160ms; transform: rotate(90deg); }
.panel-head.closed .caret { transform: none; }
.panel-toggle .glyph { display: flex; color: var(--text-2); }
.panel-title { margin: 0; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: help; }
.panel-meta { font-size: 12px; color: var(--muted); white-space: nowrap; }
.grow { flex: 1; }
.panel-action { font-size: 12.5px; font-weight: 600; color: var(--primary); display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; }
.panel-action:hover { background: var(--wash); }

.row { padding: 12px 16px 14px; border-bottom: 1px solid var(--divider); }
.row:last-child { border-bottom: 0; }
.row-head { display: flex; align-items: center; gap: 10px; min-height: 28px; flex-wrap: wrap; }
.iconbox { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--wash); color: var(--primary); flex: none; }
.name { font-size: 13.5px; font-weight: 600; cursor: help; min-width: 0; }
.uptime { font-size: 13px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; cursor: help; min-width: 56px; text-align: right; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px; background: var(--c-bg); color: var(--c); font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: help; }

/* The strip: one bar per day, growing from the baseline. Taller is worse, so incidents show without colour too. */
.strip { display: flex; align-items: flex-end; height: 30px; margin-top: 4px; border-radius: 4px; }
.strip:focus-visible { outline-offset: 3px; }
.slot { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; padding: 0 1px; }
.slot:hover, .slot.active { background: var(--hover); }
.bar { width: 100%; max-width: 14px; border-radius: 4px 4px 0 0; background: var(--c); }
.bar.s-operational { height: 14px; }
.bar.s-degraded { height: 21px; }
.bar.s-outage { height: 28px; }
.bar.s-none { height: 6px; background: var(--axis); }
.slot:hover .bar, .slot.active .bar { filter: brightness(1.18); }

.empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 36px 16px; text-align: center; color: var(--text-2); }
.empty svg { color: var(--muted); margin-bottom: 4px; }
.empty strong { font-size: 13.5px; color: var(--text); font-weight: 600; }

.incident { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--divider); flex-wrap: wrap; }
.incident:last-child { border-bottom: 0; }
.incident .name { cursor: default; }
.notice { border-bottom: 1px solid var(--divider); }
.notice:last-child { border-bottom: 0; }
.notice .incident { border-bottom: 0; padding-bottom: 2px; }
.notice-body { margin: 0; padding: 0 16px 12px; font-size: 13.5px; line-height: 1.5; color: var(--text); white-space: pre-line; }
.service-chip { font-size: 12.5px; font-weight: 500; color: var(--text-2); cursor: help; }
.when { font-size: 12.5px; color: var(--text-2); white-space: nowrap; }

/* One tooltip for the page: dark, 12px, an arrow. Built from text nodes only. */
.tip { position: fixed; z-index: 20; left: 0; top: 0; max-width: 300px; padding: 6px 9px; border-radius: 4px; background: var(--text); color: #fff; font-size: 12px; line-height: 1.45; pointer-events: none; opacity: 0; transition: opacity 100ms; }
.tip.on { opacity: 1; }
.tip::after { content: ''; position: absolute; left: var(--arrow, 50%); margin-left: -5px; bottom: -4px; border: 5px solid transparent; border-bottom: 0; border-top-color: var(--text); }
.tip.below::after { bottom: auto; top: -4px; border: 5px solid transparent; border-top: 0; border-bottom-color: var(--text); }
.tip-value { font-size: 14px; font-weight: 600; }
.tip-day { color: rgba(255, 255, 255, 0.72); }
.tip-state { display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.tip-state svg { color: var(--c-dark); }

dialog { width: min(560px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 64px)); padding: 0; border: 1px solid var(--divider); border-radius: 8px; background: var(--paper); color: var(--text); }
dialog::backdrop { background: rgba(32, 43, 59, 0.32); }
dialog[open] { display: flex; flex-direction: column; }
.dialog-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--divider); }
.dialog-head h2 { margin: 0; font-size: 15px; font-weight: 600; flex: 1; }
.dialog-body { overflow: auto; }
.icon-button { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; color: var(--text-2); }
.icon-button:hover { background: var(--hover); }

@media (max-width: 640px) {
  .page { padding: 12px 12px 40px; gap: 12px; }
  .row { padding: 12px; }
  .big { font-size: 28px; }
  .crumb { display: none; }
  .row-head { display: grid; grid-template-columns: 24px 1fr auto; column-gap: 10px; row-gap: 6px; }
  .row-head .grow, .incident .grow { display: none; }
  .row-head .tag { grid-column: 2 / -1; justify-self: start; }
  .uptime { min-width: 0; }
  .when { flex-basis: 100%; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }