/* ============================================================
   ThunderPhone public status page — "Air" design system tokens
   (ported from landing/src/app/handoff-design-system/air.css).
   Status palette validated with the dataviz palette validator:
   operational / degraded / down pass lightness, chroma, CVD
   separation (worst pair ΔE 8.5 deutan) and 3:1 on the ground.
   Status is never color-alone: every dot ships with its word,
   every bar carries a tooltip + aria-label.
   ============================================================ */

:root{
  /* surfaces + ink */
  --ground:#FDFCFB;
  --panel:#F6F4F0;
  --ink:#0B0A08;
  --ink-2:#26241F;
  --muted:#5C5A55;
  --faint:#8B8880;
  --hairline:#E8E6E2;
  --hairline-2:#D9D6D0;

  /* status palette (do not substitute) */
  --op:#1B7F5C;
  --deg:#B08300;
  --down:#8F3D1D;
  --nodata:#DAD7D1;
  /* text-safe variant of amber (palette amber is 3.36:1 — fine for
     marks, short of 4.5:1 for small text) */
  --deg-text:#8A6700;

  --op-rgb:27,127,92;
  --deg-rgb:176,131,0;
  --down-rgb:143,61,29;
  --nodata-rgb:218,215,209;

  --sans:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --wrap:1216px;
  --pad:48px;
  --t:120ms ease;
}

*,*::before,*::after{box-sizing:border-box}

/* class-level display rules must never beat the hidden attribute */
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font:400 16px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}

p{margin:0}
ul{margin:0;padding:0;list-style:none}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--pad);
}

.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

.micro{
  font-family:var(--mono);
  font-size:11px;
  line-height:1.2;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:2px}

.skip-link{
  position:absolute;left:-9999px;top:0;
  background:var(--ink);color:var(--ground);
  padding:10px 14px;font-family:var(--mono);font-size:12px;z-index:50;
}
.skip-link:focus{left:8px;top:8px}

/* ---------- header ---------- */

.site-head{border-bottom:1px solid var(--hairline)}

.head-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:76px;
  padding-top:16px;
  padding-bottom:16px;
  flex-wrap:wrap;
}

.brand{display:flex;align-items:baseline;gap:10px}
.wordmark{font-weight:600;font-size:19px;letter-spacing:-.01em}
.brand-tag{color:var(--faint);position:relative;top:-1px}

.head-right{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 13px 7px 11px;
  border:1px solid var(--hairline-2);
  border-radius:999px;
  background:var(--panel);
  color:var(--ink-2);
  font-size:14px;
  font-weight:500;
  line-height:1;
}
.pill--up{background:rgba(var(--op-rgb),.08);border-color:rgba(var(--op-rgb),.22)}
.pill--degraded{background:rgba(var(--deg-rgb),.08);border-color:rgba(var(--deg-rgb),.24)}
.pill--down{background:rgba(var(--down-rgb),.08);border-color:rgba(var(--down-rgb),.22)}
.pill--nodata{background:var(--panel);border-color:var(--hairline-2)}

.last-checked{color:var(--faint);white-space:nowrap}

/* ---------- status dot + word ---------- */

.dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--nodata);
  flex:0 0 auto;
  display:inline-block;
}
.dot--up{background:var(--op)}
.dot--degraded{background:var(--deg)}
.dot--down{background:var(--down)}
.dot--nodata{background:var(--nodata);box-shadow:inset 0 0 0 1px var(--hairline-2)}

.status-word{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:500;
  white-space:nowrap;
}
.sw--up{color:var(--op)}
.sw--degraded{color:var(--deg-text)}
.sw--down{color:var(--down)}
.sw--nodata{color:var(--muted)}

/* ---------- banners ---------- */

.banner-slot:empty{display:none}

.banner{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:20px;
  padding:11px 14px;
  border:1px solid rgba(var(--deg-rgb),.30);
  background:rgba(var(--deg-rgb),.09);
  border-radius:3px;
  font-size:14px;
  color:var(--ink-2);
}
.banner--error{
  border-color:rgba(var(--down-rgb),.30);
  background:rgba(var(--down-rgb),.07);
}

/* ---------- stat tiles ---------- */

.tiles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:32px 0 44px;
}

.tile{
  border:1px solid var(--hairline);
  background:var(--panel);
  border-radius:3px;
  padding:18px 20px 20px;
  min-width:0;
}
.tile-label{color:var(--faint)}
.tile-value{
  margin-top:12px;
  font-size:38px;
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--ink);
}
.tile-sub{
  margin-top:8px;
  font-size:13px;
  color:var(--muted);
  overflow-wrap:anywhere;
}

/* ---------- section heads ---------- */

.section-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 18px;
  font-weight:400;
}
.section-head .micro{color:var(--muted);white-space:nowrap}
.section-head .rule{flex:1 1 auto;height:1px;background:var(--hairline)}

.group{margin-bottom:44px}

/* ---------- component rows ---------- */

.component{
  border-top:1px solid var(--hairline);
  padding:18px 0 20px;
}
.component:last-child{border-bottom:1px solid var(--hairline)}

.comp-head{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:0;
  border:0;
  background:none;
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
}

.chev{
  flex:0 0 auto;
  width:12px;height:12px;
  color:var(--faint);
  transition:transform var(--t),color var(--t);
}
.comp-head:hover .chev{color:var(--muted)}
.comp-head[aria-expanded="true"] .chev{transform:rotate(90deg)}

.comp-name{display:flex;align-items:baseline;gap:10px;min-width:0;flex:1 1 auto;flex-wrap:wrap}
.comp-label{font-weight:500;font-size:16px;letter-spacing:-.005em}
.comp-desc{font-size:13px;color:var(--muted);min-width:0}

.comp-right{
  display:flex;
  align-items:center;
  gap:16px;
  flex:0 0 auto;
  margin-left:auto;
}
.comp-uptime{font-size:14px;color:var(--ink);min-width:66px;text-align:right}

/* ---------- 90-day bar strip ---------- */

.strip{
  display:flex;
  align-items:stretch;
  gap:2px;
  height:32px;
  margin-top:14px;
}

.bar{
  flex:1 1 0;
  min-width:0;
  border-radius:2px;
  background:var(--nodata);
  cursor:default;
  transition:opacity var(--t);
}
.bar--up{background:var(--op)}
.bar--degraded{background:var(--deg)}
.bar--down{background:var(--down)}
.bar--nodata{background:var(--nodata)}
.bar:hover,.bar:focus-visible{opacity:.66}
.bar:focus-visible{outline:2px solid var(--ink);outline-offset:1px}

.strip-legend{
  display:flex;
  justify-content:space-between;
  margin-top:8px;
}
.strip-legend span{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--faint);
}

/* ---------- expanded panel ---------- */

.panel{
  margin-top:20px;
  padding:18px 20px 20px;
  border:1px solid var(--hairline);
  background:var(--panel);
  border-radius:3px;
}
.panel[hidden]{display:none}
.panel-in{animation:fade var(--t) both}
@keyframes fade{from{opacity:0}to{opacity:1}}

.panel-grid{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,2fr);
  gap:28px;
}

.spark-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
.spark-head .micro{color:var(--faint)}
.spark-host{position:relative;min-height:88px}
.spark-host svg{display:block;width:100%;height:auto;overflow:visible}
.spark-axis{display:flex;justify-content:space-between;margin-top:4px}
.spark-axis span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.spark-empty{font-size:13px;color:var(--muted);padding:24px 0}

.panel-events .micro{color:var(--faint);display:block;margin-bottom:10px}

/* ---------- events ---------- */

.events-section{margin-bottom:56px}

.event-list{border-top:1px solid var(--hairline)}
.panel-events .event-list{border-top:0}

.event{
  display:grid;
  grid-template-columns:150px minmax(0,1fr) auto auto;
  align-items:baseline;
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--hairline);
  font-size:14px;
}
.panel-events .event{
  grid-template-columns:auto minmax(0,1fr);
  gap:2px 12px;
  border-bottom:0;
  padding:10px 0;
  border-top:1px solid var(--hairline);
}
.panel-events .event:first-child{border-top:0;padding-top:0}
.panel-events .ev-dur{text-align:right}
.panel-events .ev-time{grid-column:1/-1;white-space:normal}

.ev-status{display:flex;align-items:center;gap:8px}
.ev-comp{font-weight:500;min-width:0;overflow-wrap:anywhere}
.ev-time{font-size:13px;color:var(--muted);white-space:nowrap}
.ev-dur{font-size:13px;color:var(--ink);white-space:nowrap;min-width:64px;text-align:right}
.ev-empty{padding:16px 0;font-size:14px;color:var(--muted);border-bottom:1px solid var(--hairline)}
.panel-events .ev-empty{border-bottom:0;padding:6px 0}

/* ---------- tooltip ---------- */

.tip{
  position:absolute;
  z-index:60;
  max-width:260px;
  padding:7px 9px;
  background:var(--ink);
  color:#FDFCFB;
  border-radius:3px;
  font-family:var(--mono);
  font-size:11.5px;
  line-height:1.45;
  letter-spacing:.01em;
  pointer-events:none;
  font-variant-numeric:tabular-nums;
}
.tip[hidden]{display:none}
.tip b{font-weight:500;display:block}
.tip .tip-sub{color:#CFCCC6}

/* ---------- footer ---------- */

.site-foot{border-top:1px solid var(--hairline);background:var(--panel)}
.foot-inner{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  padding-top:24px;
  padding-bottom:32px;
  flex-wrap:wrap;
}
.foot-note{font-size:13px;color:var(--muted);max-width:70ch}
.foot-copy{color:var(--faint)}

/* ---------- responsive ---------- */

@media (max-width:900px){
  .tiles{grid-template-columns:1fr;gap:12px}
  .tile-value{font-size:32px}
  .panel-grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .event{grid-template-columns:auto 1fr;gap:6px 14px}
  .event .ev-time{grid-column:1/-1}
  .event .ev-dur{text-align:left;min-width:0}
}

@media (max-width:640px){
  :root{--pad:24px}
  .head-inner{min-height:0;gap:12px}
  .head-right{width:100%;justify-content:space-between;gap:10px}
  .strip{gap:1px;height:28px}
  .comp-head{flex-wrap:wrap}
  .comp-right{width:100%;margin-left:20px;justify-content:space-between}
  .comp-uptime{text-align:left}
  .comp-name{flex-basis:calc(100% - 44px)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:0ms !important;
    animation-duration:0ms !important;
    animation-iteration-count:1 !important;
  }
}