/* Tokens mirror aim-web/client/app/globals.css (shadcn new-york, neutral base). */
@font-face {
  font-family:Inter;
  src:url(/fonts/Inter-latin.woff2) format('woff2');
  font-weight:100 900;
  font-display:swap;
}
@font-face {
  font-family:'Inter Tight';
  src:url(/fonts/InterTight-latin.woff2) format('woff2');
  font-weight:100 900;
  font-display:swap;
}
:root {
  color-scheme:light;
  --background:#fff;
  --background-two:#fdfdfd;
  --foreground:#0a0a0a;
  --card:#fff;
  --muted:#f5f5f5;
  --muted-foreground:#737373;
  --border:#e5e5e5;
  --ring:#a1a1a1;
  --primary:#2563eb;
  --primary-foreground:#fff;
  --neutral-300:#d4d4d4;
  --neutral-500:#737373;
  --neutral-600:#525252;
  --emerald-50:#ecfdf5;
  --emerald-100:#d0fae5;
  --emerald-500:#00bc7d;
  --emerald-700:#007a55;
  --amber-50:#fffbeb;
  --amber-100:#fef3c6;
  --amber-400:#ffb900;
  --amber-700:#bb4d00;
  --red-50:#fef2f2;
  --red-100:#ffe2e2;
  --red-500:#fb2c36;
  --red-700:#c10007;
  --radius:.7rem;
  --radius-sm:calc(var(--radius) - 2px);
  --shadow-xs:0 1px 2px 0 rgb(0 0 0 / .05);
  --font-sans:Inter,system-ui,-apple-system,sans-serif;
  --font-display:'Inter Tight',Inter,system-ui,-apple-system,sans-serif;
  --gutter:16px;
  font-family:var(--font-sans);
  font-synthesis:none;
}
* {
  box-sizing:border-box;
}
html {
  -webkit-text-size-adjust:100%;
}
body {
  margin:0;
  min-height:100vh;
  background:var(--background-two);
  color:var(--foreground);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button,select,a,summary {
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
button,select {
  font:inherit;
  color:inherit;
}
button {
  cursor:pointer;
}
a {
  color:inherit;
  text-decoration:none;
}
:focus-visible {
  outline:2px solid var(--ring);
  outline-offset:2px;
}
svg {
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
h1,h2,h3,p {
  margin:0;
}
.wrap {
  width:100%;
  max-width:880px;
  margin:0 auto;
  padding-left:max(var(--gutter),env(safe-area-inset-left));
  padding-right:max(var(--gutter),env(safe-area-inset-right));
}
.card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-xs);
}

/* Buttons (aim-web components/ui/button.tsx) */
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:36px;
  padding:0 14px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  font-size:14px;
  font-weight:500;
  white-space:nowrap;
  transition:background-color .15s,color .15s;
}
.button svg {
  width:16px;
  height:16px;
}
.button-primary {
  background:var(--primary);
  color:var(--primary-foreground);
}
.button-primary:hover {
  background:rgb(37 99 235 / .9);
}
.button-outline {
  background:var(--background);
  border-color:var(--border);
}
.button-outline:hover {
  background:var(--muted);
}
.button-sm {
  height:32px;
  padding:0 12px;
  font-size:12px;
}
.button:disabled {
  opacity:.5;
  pointer-events:none;
}

/* Top bar (aim-web dashboard-header.tsx) */
.topbar {
  position:sticky;
  top:0;
  z-index:10;
  padding-top:env(safe-area-inset-top);
  background:rgb(253 253 253 / .85);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border);
}
.topbar-inner {
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
}
.brand img {
  width:64px;
  height:auto;
}

/* Summary */
.hero {
  margin-top:20px;
  padding:28px 20px 16px;
  text-align:center;
}
.hero-icon {
  width:48px;
  height:48px;
  margin:0 auto 16px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  background:var(--neutral-500);
  box-shadow:0 0 0 6px var(--muted);
}
.hero-icon svg {
  width:24px;
  height:24px;
  stroke-width:2.5;
}
.hero h1 {
  font-family:var(--font-display);
  font-size:24px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:-.025em;
  text-wrap:balance;
}
.hero p {
  margin:8px auto 0;
  max-width:420px;
  font-size:14px;
  color:var(--muted-foreground);
  text-wrap:pretty;
}
.hero-meta {
  margin-top:16px;
}
.pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:var(--muted);
  font-size:12px;
  font-weight:500;
  color:var(--neutral-600);
}
.hero[data-status=operational] .hero-icon {
  background:var(--emerald-500);
  box-shadow:0 0 0 6px var(--emerald-50);
}
.hero[data-status=operational] .pill {
  background:var(--emerald-50);
  color:var(--emerald-700);
}
.hero[data-status=degraded] .hero-icon {
  background:var(--amber-400);
  box-shadow:0 0 0 6px var(--amber-50);
}
.hero[data-status=degraded] .pill {
  background:var(--amber-50);
  color:var(--amber-700);
}
.hero[data-status=outage] .hero-icon {
  background:var(--red-500);
  box-shadow:0 0 0 6px var(--red-50);
}
.hero[data-status=outage] .pill {
  background:var(--red-50);
  color:var(--red-700);
}
.update-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:24px -4px 0;
  padding-top:12px;
  border-top:1px solid var(--border);
  font-size:12px;
  color:var(--muted-foreground);
  text-align:left;
}
.live {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.live-dot {
  flex-shrink:0;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--emerald-500);
  box-shadow:0 0 0 3px var(--emerald-50);
}
#refresh {
  min-height:36px;
}

/* Sections */
.section {
  margin-top:32px;
}
.section-heading {
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:12px;
}
h2 {
  font-family:var(--font-display);
  font-size:18px;
  font-weight:600;
  letter-spacing:-.025em;
}
.section-heading p {
  margin-top:2px;
  font-size:14px;
  color:var(--muted-foreground);
}
.segmented {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:3px;
  background:var(--muted);
  border-radius:var(--radius-sm);
}
.segmented button {
  min-height:36px;
  border:0;
  border-radius:calc(var(--radius-sm) - 3px);
  background:none;
  font-size:13px;
  font-weight:500;
  color:var(--muted-foreground);
}
.segmented button[aria-pressed=true] {
  background:var(--background);
  color:var(--foreground);
  box-shadow:var(--shadow-xs);
}

/* Services */
.service-list {
  overflow:hidden;
}
.service {
  padding:16px;
}
.service+.service {
  border-top:1px solid var(--border);
}
.service-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.service-identity {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.service-name {
  min-width:0;
}
.service-icon {
  flex-shrink:0;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--background-two);
  color:var(--neutral-600);
}
.service-icon svg {
  width:20px;
  height:20px;
  stroke-width:1.75;
}
.service h3 {
  font-size:15px;
  font-weight:600;
}
.service-description {
  font-size:13px;
  color:var(--muted-foreground);
}
.badge {
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:500;
  white-space:nowrap;
  color:var(--emerald-700);
  background:var(--emerald-50);
  box-shadow:inset 0 0 0 1px var(--emerald-100);
}
.badge i {
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
}
.badge.operational i {
  background:var(--emerald-500);
}
.badge.degraded {
  color:var(--amber-700);
  background:var(--amber-50);
  box-shadow:inset 0 0 0 1px var(--amber-100);
}
.badge.outage {
  color:var(--red-700);
  background:var(--red-50);
  box-shadow:inset 0 0 0 1px var(--red-100);
}
.badge.unknown {
  color:var(--neutral-600);
  background:var(--muted);
  box-shadow:inset 0 0 0 1px var(--border);
}
.history-top {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  margin:16px 0 8px;
  font-size:12px;
  color:var(--muted-foreground);
}
.uptime strong {
  color:var(--foreground);
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.history-bars {
  display:flex;
  gap:2px;
  height:36px;
  touch-action:pan-y;
  cursor:crosshair;
}
.bar {
  flex:1;
  min-width:0;
  border-radius:2px;
  background:#e5e5e5;
}
.bar.operational {
  background:var(--emerald-500);
}
.bar.degraded {
  background:var(--amber-400);
}
.bar.outage {
  background:var(--red-500);
}
.history-bars.scrubbing .bar:not(.active) {
  opacity:.45;
}
.history-bottom {
  display:flex;
  justify-content:space-between;
  gap:8px;
  min-height:20px;
  margin-top:6px;
  font-size:12px;
  color:var(--muted-foreground);
}
.history-detail {
  width:100%;
  text-align:center;
  color:var(--foreground);
  font-weight:500;
}
.check-details {
  margin:12px -16px -16px;
  border-top:1px solid var(--border);
}
.check-details summary {
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:48px;
  padding:0 16px;
  font-size:13px;
  font-weight:500;
  color:var(--neutral-600);
  cursor:pointer;
}
.check-details summary::-webkit-details-marker {
  display:none;
}
.check-details summary svg {
  width:16px;
  height:16px;
  transition:transform .2s;
}
.check-details[open] summary svg {
  transform:rotate(180deg);
}
.check-list {
  list-style:none;
  margin:0;
  padding:0 16px 8px;
}
.check-list li {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:48px;
  font-size:14px;
}
.check-list li+li {
  border-top:1px solid var(--muted);
}
.check-value {
  display:flex;
  align-items:center;
  gap:10px;
}
.check-latency {
  font-size:12px;
  color:var(--muted-foreground);
  font-variant-numeric:tabular-nums;
}
.legend {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 16px;
  margin-top:12px;
  font-size:12px;
  color:var(--muted-foreground);
}
.legend>span {
  display:flex;
  align-items:center;
  gap:6px;
}
.key {
  width:8px;
  height:8px;
  border-radius:2px;
  background:#e5e5e5;
}
.key.operational {
  background:var(--emerald-500);
}
.key.degraded {
  background:var(--amber-400);
}
.key.outage {
  background:var(--red-500);
}
.utc-label {
  margin-left:auto;
}

/* Incidents */
.select-wrap select {
  width:100%;
  height:40px;
  padding:0 36px 0 12px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--background) url(/assets/chevron-down.svg) no-repeat right 12px center/16px;
  font-size:16px;
  -webkit-appearance:none;
  appearance:none;
  cursor:pointer;
}
.empty-state {
  padding:32px 20px;
  text-align:center;
}
.empty-icon {
  width:40px;
  height:40px;
  margin:0 auto 12px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--emerald-50);
  color:var(--emerald-700);
}
.empty-icon svg {
  width:20px;
  height:20px;
}
.empty-state h3 {
  font-size:15px;
  font-weight:600;
}
.empty-state p {
  margin-top:4px;
  font-size:14px;
  color:var(--muted-foreground);
}
.incident {
  padding:16px;
  margin-bottom:12px;
}
.incident-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.incident time {
  font-size:12px;
  color:var(--muted-foreground);
}
.incident h3 {
  margin-top:8px;
  font-size:15px;
  font-weight:600;
}
.incident p {
  margin-top:4px;
  font-size:14px;
  color:var(--muted-foreground);
}
.badge.incident-status {
  text-transform:capitalize;
}

.note {
  display:flex;
  gap:10px;
  margin:24px 0 32px;
  color:var(--muted-foreground);
}
.note svg {
  flex-shrink:0;
  width:16px;
  height:16px;
  margin-top:2px;
}
.note p {
  font-size:13px;
}
.footer {
  border-top:1px solid var(--border);
  background:var(--background);
  padding-bottom:env(safe-area-inset-bottom);
}
.footer-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:64px;
  font-size:13px;
  color:var(--muted-foreground);
}
.footer-brand {
  display:flex;
  align-items:center;
  gap:10px;
}
.footer-brand img {
  width:40px;
  height:auto;
  opacity:.6;
}
.footer a {
  display:flex;
  align-items:center;
  gap:4px;
  min-height:44px;
}
.footer a svg {
  width:14px;
  height:14px;
}
.footer a:hover {
  color:var(--foreground);
}
.loading-services {
  padding:56px 20px;
  text-align:center;
  font-size:14px;
  color:var(--muted-foreground);
}
.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;
}
.noscript {
  padding:16px 0;
  color:var(--red-700);
}

@media (max-width:359px) {
  .footer-brand span {
    display:none;
  }
}

/* sm (40rem) and up */
@media (min-width:640px) {
  :root {
    --gutter:32px;
  }
  .hero {
    margin-top:32px;
    padding:40px 32px 20px;
  }
  .hero h1 {
    font-size:30px;
  }
  .hero p {
    font-size:15px;
  }
  .update-row {
    margin-left:-12px;
    margin-right:-12px;
  }
  .section {
    margin-top:48px;
  }
  .section-heading {
    flex-direction:row;
    align-items:flex-end;
    justify-content:space-between;
    margin-bottom:16px;
  }
  .segmented {
    display:flex;
  }
  .segmented button {
    min-height:30px;
    padding:0 12px;
    font-size:12px;
  }
  .select-wrap select {
    width:auto;
    height:36px;
    font-size:14px;
  }
  .service {
    padding:20px 24px;
  }
  .check-details {
    margin:16px -24px -20px;
  }
  .check-details summary,.check-list {
    padding-left:24px;
    padding-right:24px;
  }
  .history-bars {
    height:32px;
  }
  .history-bars.days-90 {
    gap:1px;
  }
  .incident {
    padding:20px 24px;
  }
}

@media (hover:hover) {
  .bar:hover {
    opacity:.75;
  }
}