:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#e8e9ec;background:#111416;font-synthesis:none;--surface:#191d20;--border:#2c3236;--muted:#919ba3;--accent:#c4ed89}*{box-sizing:border-box}body{margin:0}aside{position:fixed;width:236px;height:100vh;border-right:1px solid var(--border);padding:36px 24px;display:flex;flex-direction:column;background:var(--surface)}a{color:inherit;text-decoration:none}.brand{font-size:28px;display:flex;gap:10px;align-items:center;font-weight:700;letter-spacing:-1.4px}.brand-dot,h1 span{color:var(--accent)}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.7px;color:var(--muted)}aside>.eyebrow{margin:65px 12px 18px}nav{display:grid;gap:8px}nav a{padding:14px 12px;border-radius:8px;color:var(--muted);font-size:13px}.active{background:#c4ed8910;color:var(--accent)}.aside-bottom{margin-top:auto;font-size:12px;color:var(--muted)}.aside-bottom small{font-size:11px}.pill{font-size:9px;letter-spacing:1px;border:1px solid var(--border);padding:6px 9px;border-radius:5px}main{margin-left:236px;padding:0 48px;max-width:1600px}header{height:86px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);font-size:12px;color:var(--muted)}header strong{color:#e8e9ec;font-weight:500}.slash{margin:0 16px;color:#525d64}.header-actions{display:flex;align-items:center;gap:18px}button{cursor:pointer;font:inherit}.quiet{background:transparent;color:inherit;border:1px solid var(--border);border-radius:7px;padding:9px 13px;font-size:12px}.quiet:hover{border-color:var(--muted)}.intro{display:flex;justify-content:space-between;align-items:center;padding:54px 0 34px}.intro .eyebrow{color:var(--accent)}h1{font-size:clamp(36px,4vw,57px);font-weight:500;letter-spacing:-2.8px;line-height:1.08;margin:18px 0}p{font-size:13px;line-height:1.8;color:var(--muted)}.orbit{height:196px;width:196px;border:1px solid #c4ed8920;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-right:35px;background:radial-gradient(circle,#c4ed8912,transparent 68%)}.orbit div{font-size:90px;color:var(--accent);line-height:1}.orbit span{font-size:8px;letter-spacing:2px;margin-top:15px;color:var(--muted)}.notice{border:1px solid var(--border);background:var(--surface);padding:13px 17px;border-radius:8px;color:var(--muted);font-size:12px}.notice.error{border-color:#b67a65;color:#ffbda7}.stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--border);border-radius:10px;margin:24px 0 43px;background:var(--surface)}.stats article{padding:24px;border-right:1px solid var(--border);display:grid;gap:10px}.stats article:last-child{border:0}.stats span{font-size:9px;letter-spacing:1.5px;color:var(--muted)}.stats strong{font-size:31px;font-weight:500;letter-spacing:-1px}.stats small{color:var(--muted);font-size:10px}h2{font-size:23px;font-weight:500;letter-spacing:-.6px;margin:10px 0}.section-heading p{margin:6px 0 23px}.products{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.product{border:1px solid var(--border);background:var(--surface);border-radius:11px;padding:24px;position:relative}.product:nth-child(2){border-color:#c4ed8960}.product-icon{color:var(--accent);font-size:32px}.product .eyebrow{margin-top:22px;font-size:9px}.product h3{font-size:18px;letter-spacing:-.4px;font-weight:500;margin:9px 0}.product p{font-size:12px;min-height:44px}.price{font-size:28px;letter-spacing:-1px;margin:23px 0 20px}.price small{font-size:11px;letter-spacing:0;color:var(--muted)}.buy{width:100%;border:0;background:var(--accent);color:#1b2513;font-size:12px;font-weight:600;padding:12px;border-radius:7px;display:flex;justify-content:space-between}.buy:disabled{opacity:.4;cursor:wait}.table-heading{display:flex;justify-content:space-between;align-items:center;margin:44px 0 19px}.table-wrap{border:1px solid var(--border);border-radius:9px;overflow:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:12px;white-space:nowrap}th{color:var(--muted);font-size:9px;letter-spacing:1px;padding:15px 20px;font-weight:500;background:var(--surface)}td{padding:19px 20px;border-top:1px solid var(--border)}.status{color:var(--accent);font-size:10px;background:#c4ed8910;padding:5px 9px;border-radius:20px}.empty{padding:35px;color:var(--muted);font-size:12px;text-align:center;grid-column:1/-1}footer{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;padding:34px 0}.light{color:#202925;background:#f4f5f1;--surface:#fff;--border:#dce0d9;--muted:#626d65;--accent:#426d22}.light header strong{color:#202925}.light .buy{background:#d5edb3}.light .notice.error{color:#943f29}@media(max-width:1000px){aside{width:185px;padding:30px 16px}main{margin-left:185px;padding:0 25px}.orbit{display:none}.product{padding:18px}}@media(max-width:700px){aside{position:static;width:auto;height:auto;padding:18px 22px;border-bottom:1px solid var(--border)}aside>.eyebrow,aside nav,.aside-bottom{display:none}.brand{font-size:23px}main{margin:0;padding:0 20px}header{height:70px}.header-actions{gap:8px}header>span{display:none}.intro{padding:35px 0 24px}h1{font-size:43px}.products{grid-template-columns:1fr}.stats article{padding:15px 10px}.stats strong{font-size:25px}.stats small{line-height:1.5}.stats span{font-size:8px;letter-spacing:.7px}footer{gap:20px;line-height:1.8}footer span:last-child{text-align:right}}

/* Release badge - deliberately high contrast: it is the first thing to check
   when asking whether a deployment actually rolled out. */
.release {
  font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .04em;
  padding: 6px 10px;
  border-radius: 999px;
  background: #16351f;
  color: #7ef0a6;
  border: 1px solid #2f6b40;
  white-space: nowrap;
}
body.light .release { background: #e6f7ec; color: #12693a; border-color: #9ad9b3; }

/* ---------------------------------------------------------------------------
   Deployment variant (blue / green).

   This is NOT the light/dark preference, and the distinction matters: dark mode
   is a choice the viewer makes and stores in localStorage, while the variant is
   a fact about WHICH DEPLOYED VERSION answered this particular request. It is
   therefore deliberately not toggleable and deliberately loud — the entire
   point is that a person can tell, at a glance and without kubectl, which
   ReplicaSet Traefik just routed them to.

   Everything keys off body[data-variant], set by app.js from /variant.json.
   Until that resolves the bar stays neutral, so a failed fetch reads as
   "unknown" rather than silently claiming blue.
--------------------------------------------------------------------------- */
.variant-bar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: baseline; gap: 14px;
  padding: 10px 26px;
  font: 600 12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  background: #2c3236; color: #919ba3;
  border-bottom: 2px solid #3a4247;
}
.variant-name { font-size: 15px; font-weight: 800; letter-spacing: .18em; }
.variant-detail { font-weight: 500; letter-spacing: .02em; opacity: .92; }

/* BLUE. */
body[data-variant="blue"] .variant-bar {
  background: linear-gradient(90deg, #0b3a6f, #1668c4);
  color: #eaf3ff; border-bottom-color: #4da3ff;
}
body[data-variant="blue"] { --accent: #5cb3ff; }
body[data-variant="blue"] .active { background: #5cb3ff14; }
body[data-variant="blue"] .orbit { border-color: #5cb3ff20; background: radial-gradient(circle,#5cb3ff12,transparent 68%); }
body[data-variant="blue"] .buy { background: #5cb3ff; color: #06233f; }
body[data-variant="blue"] .status { background: #5cb3ff14; }
body[data-variant="blue"] .product:nth-child(2) { border-color: #5cb3ff60; }
body[data-variant="blue"] .release { background: #0d2a4a; color: #8fccff; border-color: #2f6bab; }
body[data-variant="blue"].light { --accent: #12518f; }
body[data-variant="blue"].light .buy { background: #bcdcff; color: #0b3a6f; }
body[data-variant="blue"].light .release { background: #e6f0fb; color: #12518f; border-color: #9ac3e9; }

/* GREEN. */
body[data-variant="green"] .variant-bar {
  background: linear-gradient(90deg, #10492b, #1e9e5a);
  color: #eafff2; border-bottom-color: #4de89a;
}
body[data-variant="green"] { --accent: #4de89a; }
body[data-variant="green"] .active { background: #4de89a14; }
body[data-variant="green"] .orbit { border-color: #4de89a20; background: radial-gradient(circle,#4de89a12,transparent 68%); }
body[data-variant="green"] .buy { background: #4de89a; color: #05301c; }
body[data-variant="green"] .status { background: #4de89a14; }
body[data-variant="green"] .product:nth-child(2) { border-color: #4de89a60; }
body[data-variant="green"] .release { background: #0d3320; color: #86f0bb; border-color: #2f7b52; }
body[data-variant="green"].light { --accent: #12693a; }
body[data-variant="green"].light .buy { background: #b9f0d2; color: #10492b; }

/* The banner is sticky, so the fixed sidebar must start below it or the two
   overlap on first paint. */
aside { top: 0; }
@media (max-width: 700px) {
  .variant-bar { padding: 8px 18px; gap: 8px; flex-wrap: wrap; }
  .variant-detail { font-size: 10px; }
}

/* Multi-tenancy panel. The proof block is monospace and scrollable on purpose:
   it shows raw API output, and reformatting evidence to look tidy is how
   evidence stops being evidence. */
.tenant-bar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: 1rem 0; }
.tenant-bar label { font-size: .7rem; letter-spacing: .12em; opacity: .6; }
.tenant-bar select { background: var(--panel, #14161c); color: inherit; border: 1px solid rgba(128,128,128,.35);
  border-radius: 8px; padding: .45rem .6rem; font: inherit; }
.tenant-quota { font-size: .85rem; opacity: .75; }
.tenant-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tenant-actions input { flex: 1 1 14rem; background: var(--panel, #14161c); color: inherit;
  border: 1px solid rgba(128,128,128,.35); border-radius: 8px; padding: .5rem .7rem; font: inherit; }
.proof { margin-top: 1rem; padding: .9rem 1rem; border-radius: 10px; border: 1px solid rgba(128,128,128,.25);
  background: rgba(128,128,128,.08); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem; line-height: 1.5; white-space: pre-wrap; overflow-x: auto; max-height: 26rem; }
.proof:empty { display: none; }

/* ---------------------------------------------------------------------------
   Request journey.

   The colour of a stage encodes HOW ITS TIMING WAS ESTABLISHED, not just
   whether it happened. That distinction is the whole point of the page: a
   pipeline diagram that shows a confident number for a hop the browser cannot
   see is a drawing, not a measurement, and it teaches the wrong instinct.
   --------------------------------------------------------------------------- */
.journey-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: 1rem 0; }
.journey-status { font-size: .85rem; opacity: .75; }
.journey-trace { text-decoration: none; }

.journey-map { display: grid; gap: .55rem; margin: 1rem 0 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.hop { position: relative; border: 1px solid rgba(128,128,128,.28); border-radius: 12px;
  padding: .7rem .8rem; background: rgba(128,128,128,.06); transition: border-color .25s, background .25s, transform .25s; }
.hop .hop-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.hop .hop-name { font-weight: 650; font-size: .92rem; }
.hop .hop-dot { width: .55rem; height: .55rem; border-radius: 50%; background: rgba(128,128,128,.5); flex: none; }
.hop .hop-what { font-size: .74rem; opacity: .72; margin-top: .3rem; line-height: 1.45; }
.hop .hop-time { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; margin-top: .45rem; }
.hop .hop-kind { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; opacity: .6; margin-top: .3rem; }

.hop[data-state="active"] { border-color: #f0b429; background: rgba(240,180,41,.10); transform: translateY(-2px); }
.hop[data-state="active"] .hop-dot { background: #f0b429; animation: hop-pulse 1s ease-in-out infinite; }
.hop[data-state="done"] { border-color: #2fbf71; background: rgba(47,191,113,.09); }
.hop[data-state="done"] .hop-dot { background: #2fbf71; }
.hop[data-state="failed"] { border-color: #e5484d; background: rgba(229,72,77,.10); }
.hop[data-state="failed"] .hop-dot { background: #e5484d; }
@keyframes hop-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.k-measured { color: #2fbf71; } .k-server { color: #4c9aff; } .k-inferred { color: #b98cff; }
.hop[data-kind="measured"] .hop-kind { color: #2fbf71; }
.hop[data-kind="server"]   .hop-kind { color: #4c9aff; }
.hop[data-kind="inferred"] .hop-kind { color: #b98cff; }

.journey-columns { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.journey-h3 { font-size: .95rem; margin: 0 0 .5rem; }
.journey-h3 small { font-weight: 400; opacity: .6; }
.queue-grid { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.queue-cell { border: 1px solid rgba(128,128,128,.28); border-radius: 10px; padding: .6rem .7rem;
  background: rgba(128,128,128,.06); }
.queue-cell span { display: block; font-size: .66rem; letter-spacing: .09em; opacity: .62; text-transform: uppercase; }
.queue-cell strong { display: block; font-size: 1.3rem; margin-top: .25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.queue-cell.moved { border-color: #f0b429; }