/* Status page (ticket STATUS1): colors, background, nav and footer from /components/site.css (site shell); this file styles the middle only.
   One theme for light and dark schemes, like every page on the site (site.css, Hugo 10-16). Three type sizes: 28 headline, 16 rows, 15 small lines (15 is also the shell button, so the first screen has 4 sizes with the nav brand 20) */
:root{
  --display:"Geist",system-ui,-apple-system,"PingFang TC","Noto Sans TC",sans-serif;
  --st-ok:#30D158; --st-slow:#FFD666; --st-partial:#FF9F0A; --st-outage:#FF6B5E; --st-none:rgba(255,255,255,.14);
}
.status{max-width:880px;padding-block:48px 120px;display:flex;flex-direction:column;gap:24px}
.status .glass{border-radius:20px}

/* the banner: one dot, one line, the time on the right; the admin's note under it when there is one */
.banner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:16px;row-gap:8px;padding:28px 32px}
.banner .dot{width:14px;height:14px;border-radius:50%;background:var(--st-none);box-shadow:0 0 0 6px color-mix(in srgb,var(--st-none) 30%,transparent)}
.banner h1{margin:0;font-size:28px;font-weight:600;letter-spacing:-0.03em;line-height:1.2}
.banner .when{grid-column:3;grid-row:1;font:15px var(--mono);color:var(--ink-3);white-space:nowrap}
.banner .note{grid-column:2 / 4;font-size:16px;color:var(--ink)}
.status[data-state="ok"] .banner .dot{background:var(--st-ok);box-shadow:0 0 0 6px color-mix(in srgb,var(--st-ok) 22%,transparent)}
.status[data-state="slow"] .banner .dot{background:var(--st-slow);box-shadow:0 0 0 6px color-mix(in srgb,var(--st-slow) 22%,transparent)}
.status[data-state="partial"] .banner .dot{background:var(--st-partial);box-shadow:0 0 0 6px color-mix(in srgb,var(--st-partial) 22%,transparent)}
.status[data-state="outage"] .banner .dot{background:var(--st-outage);box-shadow:0 0 0 6px color-mix(in srgb,var(--st-outage) 22%,transparent)}

/* one row per component: name and provider left, state right; the 90 day bar; then 90 days ago, uptime, today */
.list{list-style:none;margin:0;padding:8px 32px}
.row{display:flex;flex-direction:column;gap:12px;padding-block:24px}
.row+.row{border-top:1px solid var(--line)}
.top{display:flex;align-items:baseline;gap:12px;font-size:16px;line-height:1.4}
.name{color:var(--ink);font-weight:500}
.via{color:var(--ink-3)}
.state{margin-left:auto;font-weight:500;white-space:nowrap}
.state[data-s="ok"]{color:var(--st-ok)}
.state[data-s="slow"]{color:var(--st-slow)}
.state[data-s="partial"]{color:var(--st-partial)}
.state[data-s="outage"]{color:var(--st-outage)}
.state[data-s="none"]{color:var(--ink-3)}
.bars{display:grid;grid-template-columns:repeat(var(--n,90),minmax(0,1fr));gap:3px;height:32px}
.bars i{display:block;border-radius:2px;background:var(--st-none)}
.bars i[data-s="ok"]{background:var(--st-ok)}
.bars i[data-s="slow"]{background:var(--st-slow)}
.bars i[data-s="partial"]{background:var(--st-partial)}
.bars i[data-s="outage"]{background:var(--st-outage)}
.foot{display:grid;grid-template-columns:1fr auto 1fr;font:15px var(--mono);color:var(--ink-3)}
.foot .up{color:var(--ink-2)}
.foot .to{text-align:right}

@media (max-width:760px){
  .status{padding-block:24px 96px;gap:16px}
  .banner{padding:24px;grid-template-columns:auto 1fr}
  .banner .when{grid-column:2;grid-row:2}
  .banner .note{grid-column:2}
  .list{padding:4px 24px}
  .top{flex-wrap:wrap;row-gap:4px}
  .via{order:3;flex-basis:100%}
  .bars{gap:2px}
}