*{box-sizing:border-box;margin:0;padding:0}
/* Palette follows the mintbot.ai site (website/src/index.html.j2). */
:root{
  --bg:#07100c;
  --bg-soft:#0b1a14;
  --surface:#0d1913;
  --surface-hi:#13241c;
  --border:#182a21;
  --border-hi:#25402f;
  --text:#e9f6ef;
  --muted:#7f978c;
  --accent:#17dc94;
  --good:#17dc94;
  --bad:#ff6b6b;
  --warn:#ffc857;
  --gap:#1e3229;
}
html{scroll-behavior:smooth}
body{
  background:radial-gradient(ellipse 70% 360px at 50% -80px,#0f2a1f 0%,transparent 100%) no-repeat,var(--bg);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* top bar: the mintbot logo with "Status" beside it, the language picker at
   the other end */
.topbar{
  max-width:880px;
  margin:0 auto;
  padding:18px 24px 4px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.brand{display:inline-flex;align-items:center}
.brand img{height:32px;width:auto;display:block;margin-inline-start:-6px}

.page{
  max-width:880px;
  margin:0 auto;
  padding:12px 24px 28px;
}
@media (max-width:719px){
  .topbar{padding:12px 12px 2px}
  .brand img{height:28px}
  .page{padding:8px 10px 20px}
}

/* hero — the meerkat beside the overall status, tinted by it (green / red /
   neutral). Compact (Mart, 2026-10-19): the photo is a thumbnail beside the
   headline, so the status word is the first thing on screen; from 720px up
   it widens a little, keeping its aspect. */
.hero{
  display:grid;
  grid-template-columns:76px 1fr;
  gap:14px;
  align-items:center;
  padding:10px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  margin-bottom:16px;
}
.hero-ok{
  border-color:rgba(23,220,148,.30);
  background:linear-gradient(120deg,rgba(23,220,148,.16),rgba(23,220,148,.04) 60%),var(--surface);
}
.hero-bad{
  border-color:rgba(255,107,107,.38);
  background:linear-gradient(120deg,rgba(255,107,107,.18),rgba(255,107,107,.04) 60%),var(--surface);
}
@media (min-width:720px){
  .hero{grid-template-columns:184px 1fr;gap:26px;padding-block:12px;padding-inline:12px 28px;border-radius:18px}
}
.hero-photo img{
  width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:cover;
  display:block;
  border-radius:11px;
  background:#000;
}
@media (min-width:720px){
  .hero-photo img{aspect-ratio:3/2;border-radius:12px}
}
.hero-text h1{
  font-size:19px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:-0.015em;
  margin-bottom:4px;
  overflow-wrap:anywhere;
}
.hero-text h1 .dot{
  width:12px;height:12px;
  margin-inline-end:10px;
  vertical-align:0.12em;
}
@media (min-width:480px){.hero-text h1{font-size:23px}}
@media (min-width:720px){.hero-text h1{font-size:28px;margin-bottom:6px}}
.hero-sub{color:var(--muted);font-size:13px;line-height:1.5;max-width:56ch}
@media (min-width:480px){.hero-sub{font-size:14px}}

/* status dot */
.dot{
  display:inline-block;
  flex:none;
  width:10px;height:10px;
  border-radius:50%;
  background:var(--muted);
}
.dot-ok{background:var(--good);box-shadow:0 0 0 3px rgba(23,220,148,.18)}
.dot-bad{background:var(--bad);box-shadow:0 0 0 3px rgba(255,107,107,.20)}
.dot-unknown{background:var(--muted)}
.dot-warn{background:var(--warn);box-shadow:0 0 0 3px rgba(255,200,87,.18)}
/* While all is well the headline's dot breathes — a slow ring, the page's
   one moving part; still for visitors who ask for less motion. */
.hero-ok h1 .dot{animation:breathe 2.8s ease-out infinite}
@keyframes breathe{
  0%{box-shadow:0 0 0 0 rgba(23,220,148,.5)}
  70%,100%{box-shadow:0 0 0 9px rgba(23,220,148,0)}
}
@media (prefers-reduced-motion:reduce){.hero-ok h1 .dot{animation:none}}

/* The agent-fleet row reuses the .svc styling below so it reads as one more
   service — only the status word differs. It shows just a coarse health word
   + a rounded %, never a count or an individual agent. Its strip is coloured
   by the fleet *health word* (green healthy / amber degraded / gap when
   blind) rather than URL-reachability — still no counts or agent. */

/* services — one panel, a row per service. Deliberately no opacity
   transition on .services: live updates morph the rows node by node
   (index.html), and a dim-and-swap at the 10 s probe cadence read as a
   constant blink. */
.services{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
}
/* One time axis above all the strips: they span the same week, so a pair of
   labels under every row was most of its height. */
.strip-axis{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 20px 0;
  font-size:11px;
  font-weight:600;
  color:var(--muted);
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.axis-line{flex:1;height:1px;background:var(--border-hi)}
.svc{padding:14px 20px 16px}
.svc + .svc{border-top:1px solid var(--border)}
@media (max-width:719px){
  .strip-axis{padding:12px 14px 0}
  .svc{padding:12px 14px 14px}
}
.svc-row{
  display:flex;align-items:center;gap:4px 10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
/* Name, then the address the service answers on — the same two parts on
   every row. */
.svc-name{
  flex:1 1 auto;
  min-width:0;
  font-size:15px;
  font-weight:600;
  line-height:1.35;
}
.svc-name a{color:inherit}
.svc-name a:hover{text-decoration:none}
.svc-name a:hover .svc-label{text-decoration:underline;text-underline-offset:3px}
.svc-host{
  margin-inline-start:6px;
  font-size:13px;
  font-weight:400;
  color:var(--muted);
  white-space:nowrap;
}
.svc-name a:hover .svc-host{color:var(--accent)}
/* Uptime, and the status only when it is not plain "operational" — the
   green dot already says that (and carries it for screen readers). */
.svc-meta{
  display:flex;align-items:baseline;gap:4px 10px;flex-wrap:wrap;
  margin-inline-start:auto;
  font-size:13px;
  font-variant-numeric:tabular-nums;
}
.svc-uptime{color:var(--muted)}
.svc-status{color:var(--muted)}
.svc-bad .svc-status,.svc-bad .svc-uptime{color:var(--bad)}
.svc-warn .svc-status{color:var(--warn)}

/* history strip — one tall bar per slot (db.WINDOW_S / BUCKETS: 84 × 2 h),
   set apart like the day bars on status.claude.com. The gaps narrow with the
   screen, so a bar never thins to a hairline. */
.svc-strip{
  display:flex;
  gap:3px;
  height:34px;
}
@media (max-width:719px){.svc-strip{gap:2px;height:30px}}
@media (max-width:479px){.svc-strip{gap:1px;height:28px}}
.svc-strip .slot{
  flex:1 1 0;
  min-width:0;
  height:100%;
  border-radius:2px;
  cursor:default;
  outline:none;
  transition:filter .12s ease;
}
@media (max-width:479px){.svc-strip .slot{border-radius:1px}}
.svc-strip .slot:hover,
.svc-strip .slot:focus-visible{filter:brightness(1.3)}
.svc-strip .slot:focus-visible{box-shadow:0 0 0 2px var(--text)}
.slot-ok{background:var(--good)}
.slot-bad{background:var(--bad)}
.slot-mixed{background:var(--warn)}
.slot-warn{background:var(--warn)}
.slot-gap{background:var(--gap)}
/* per-slot tooltip */
.slot-tip{
  position:absolute;
  z-index:1100;
  background:var(--surface-hi);
  border:1px solid var(--border-hi);
  color:var(--text);
  border-radius:10px;
  padding:10px 12px;
  font-size:12px;
  line-height:1.5;
  box-shadow:0 10px 28px rgba(0,0,0,0.55);
  pointer-events:none;
  max-width:min(280px,calc(100vw - 16px));
  word-wrap:break-word;
  overflow-wrap:break-word;
}
.slot-tip[hidden]{display:none}
.slot-tip .tip-range{
  font-weight:600;
  color:var(--text);
  margin-bottom:2px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.slot-tip .tip-line{color:var(--muted)}
.slot-tip .tip-ok{color:var(--good)}
.slot-tip .tip-bad{color:var(--bad)}
.slot-tip .tip-mixed{color:var(--warn)}
.slot-tip .tip-gap{color:var(--muted)}

/* footer */
.foot{
  margin-top:18px;
  color:var(--muted);
  font-size:13px;
  text-align:center;
}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--accent);text-decoration:none}

/* dev banner — matches the mintbot.dev site env-banner */
.dev-banner{
  width:100%;
  background:#c0392b;
  color:#fff;
  font:600 14px/1.4 system-ui,-apple-system,'Segoe UI',sans-serif;
  text-align:center;
  padding:10px 16px;
  position:sticky;
  top:0;
  z-index:1000;
  border-bottom:1px solid #8a2a1f;
}
.dev-banner-link{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:2px;
}
.dev-banner-link:hover{
  text-decoration:none;
}

/* language picker — the shared flat trigger (flag + chevron) with full native
   names in the menu, identical to the other mintbot surfaces; base rules come
   from assets/css/lang_picker.css, inlined by base.html BEFORE this file. It
   sits at the end of the top bar with no frame at all (Mart, 2026-10-22):
   no button box, no ring around the flag. The menu opens from the picker's
   outer edge into the page, on either side in RTL. */
.lang-picker{--lang-opt-hover-bg:rgba(23,220,148,.10)}
.lang-picker-btn .flag{box-shadow:none;border-radius:3px}
[dir="rtl"] .lang-menu{right:auto;left:0}