/* apisky.net/status. Rendered by the status checker, not deployed with the site, so it cannot
   link the site's fingerprinted stylesheet: these are the same tokens, kept in step by hand.
   Fonts come from the site's own immutable /fonts paths. */

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-var.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --ground: #0a0c10;
  --layer-1: #11141a;
  --layer-2: #171b23;
  --rule: rgba(255, 255, 255, .08);
  --rule-2: rgba(255, 255, 255, .14);
  --ink: #e7ecf3;
  --ink-2: #a3adbd;
  --muted: #7c8899;
  --accent: #4dd4e8;
  --accent-2: #2aa6ba;
  --on-accent: #04171c;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --wide: 880px;
  --radius: 14px;

  /* Status levels. Separate from the brand accent; each passes 4.5:1 as text on --layer-1. */
  --s-operational: #3ccf91;
  --s-maintenance: #7fb0ff;
  --s-degraded: #e8c547;
  --s-partial: #f39a52;
  --s-major: #f26b6b;
  --s-none: #262b35;
}

* { box-sizing: border-box; }
html { background: var(--ground); }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: .2px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-2); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { color: var(--ink); line-height: 1.2; letter-spacing: -.02em; font-weight: 650; margin: 0; }
p { margin: 0; }

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 1.25rem; }

header.site { border-bottom: 1px solid var(--rule); }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .85rem; padding-bottom: .85rem; }
.logo { display: inline-flex; align-items: center; gap: .55rem; font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.logo .mark {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: linear-gradient(145deg, var(--accent), var(--accent-2));
  color: var(--on-accent); font-family: var(--mono); font-size: .68rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.logo .word b { color: var(--accent); font-weight: inherit; }
/* The logo goes home, as it does on the site; the Status label beside it is the status page. */
header.site .brand { display: inline-flex; align-items: center; gap: .9rem; }
header.site .tag { font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
header.site .tag:hover { color: var(--accent); }
header.site .tag:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
header.site nav a { color: var(--ink-2); text-decoration: none; font-size: .9rem; }
header.site nav a:hover { color: var(--accent); }

/* main is also .wrap, whose padding shorthand would otherwise zero the top and bottom. */
main.wrap { padding-top: 2.5rem; padding-bottom: 3rem; display: flex; flex-direction: column; gap: 2.5rem; }

/* The one thing a visitor came for, so it is the only lifted surface on the page. */
.banner {
  display: flex; align-items: center; gap: .9rem;
  padding: 1.25rem 1.4rem; border-radius: var(--radius);
  background: var(--layer-2); border: 1px solid var(--rule-2);
}
.banner .headline { font-size: 1.35rem; margin: 0; color: var(--ink); line-height: 1.2; letter-spacing: -.02em; font-weight: 650; }
.banner .meta { margin-top: .2rem; font-size: .85rem; color: var(--muted); }

.dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--s-operational); }
.banner .dot { width: 16px; height: 16px; box-shadow: 0 0 0 5px rgba(60, 207, 145, .14); }
.lvl-maintenance .dot, .dot.lvl-maintenance { background: var(--s-maintenance); }
.lvl-degraded .dot, .dot.lvl-degraded { background: var(--s-degraded); }
.lvl-partial .dot, .dot.lvl-partial { background: var(--s-partial); }
.lvl-major .dot, .dot.lvl-major { background: var(--s-major); }
.banner.lvl-maintenance .dot { box-shadow: 0 0 0 5px rgba(127, 176, 255, .16); }
.banner.lvl-degraded .dot { box-shadow: 0 0 0 5px rgba(232, 197, 71, .16); }
.banner.lvl-partial .dot { box-shadow: 0 0 0 5px rgba(243, 154, 82, .16); }
.banner.lvl-major .dot { box-shadow: 0 0 0 5px rgba(242, 107, 107, .18); }

section > h2 { font-size: .78rem; font-family: var(--mono); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .9rem; }

/* Active incidents */
.incident { padding: 1.1rem 0; border-top: 1px solid var(--rule); }
.incident:first-of-type { border-top: 0; padding-top: 0; }
.incident h3 { font-size: 1.05rem; display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.incident .affects { margin-top: .25rem; font-size: .85rem; color: var(--muted); }
.pill { font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 999px; border: 1px solid currentColor; }
.pill.st-investigating { color: var(--s-major); }
.pill.st-identified { color: var(--s-partial); }
.pill.st-monitoring { color: var(--s-degraded); }
.pill.st-resolved { color: var(--s-operational); }
.pill.st-scheduled, .pill.st-in_progress { color: var(--s-maintenance); }
.pill.st-verifying { color: var(--s-degraded); }
.pill.st-completed { color: var(--s-operational); }
.updates { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.updates li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1rem; font-size: .93rem; }
.updates time { font-family: var(--mono); font-size: .78rem; color: var(--muted); padding-top: .15rem; font-variant-numeric: tabular-nums; }
.updates strong { color: var(--ink); font-weight: 600; margin-right: .35rem; }
.incident .vendor { margin-top: .6rem; font-size: .85rem; }

/* Components */
.components { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--layer-1); }
.comp { padding: 1rem 1.2rem; border-top: 1px solid var(--rule); }
.comp:first-child { border-top: 0; }
.comp.child { padding-left: 2.4rem; background: rgba(255, 255, 255, .012); }
.comp .head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.comp .name { color: var(--ink); font-weight: 600; }
.comp.child .name { font-weight: 500; }
.comp .desc { font-size: .83rem; color: var(--muted); margin-top: .1rem; }
.comp .state { font-size: .85rem; white-space: nowrap; color: var(--s-operational); }
.comp .state.lvl-maintenance { color: var(--s-maintenance); }
.comp .state.lvl-degraded { color: var(--s-degraded); }
.comp .state.lvl-partial { color: var(--s-partial); }
.comp .state.lvl-major { color: var(--s-major); }

.bars { display: flex; gap: 2px; margin-top: .7rem; height: 30px; }
/* Each bar is a focusable day; its colour is drawn by ::before so dimming it never dims the card. */
.bars > span { --bar: var(--s-operational); position: relative; flex: 1 1 0; min-width: 2px; border-radius: 2px; cursor: default; }
.bars > span::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--bar); opacity: .85; }
.bars > span:hover::before, .bars > span:focus::before { opacity: 1; }
.bars > span:focus { outline: none; }
.bars > span:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bars .b-none { --bar: var(--s-none); }
.bars .b-none::before { opacity: 1; }
.bars .b-maintenance { --bar: var(--s-maintenance); }
.bars .b-degraded { --bar: var(--s-degraded); }
.bars .b-partial { --bar: var(--s-partial); }
.bars .b-major { --bar: var(--s-major); }

/* The day's card, above its bar. Anchored left for the oldest third, centred for the middle and
   right for the newest, so it never runs off the edge of the page. */
.bars .tip {
  display: none; position: absolute; z-index: 5; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 250px; min-width: 170px; padding: .6rem .75rem;
  flex-direction: column; gap: .2rem;
  background: var(--layer-2); border: 1px solid var(--rule-2); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
  font-size: .8rem; line-height: 1.4; color: var(--ink-2); text-align: left; pointer-events: none;
}
.bars > span:hover .tip, .bars > span:focus .tip { display: flex; }
.bars > span:nth-child(-n+30) .tip { left: 0; transform: none; }
.bars > span:nth-child(n+61) .tip { left: auto; right: 0; transform: none; }
.tip-date { color: var(--ink); font-weight: 600; }
.tip-pct { color: var(--ink); font-variant-numeric: tabular-nums; }
.tip-line { display: flex; align-items: center; gap: .45rem; font-variant-numeric: tabular-nums; }
.tip-line::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--s-operational); }
.tip-line.tip-maintenance::before { background: var(--s-maintenance); }
.tip-line.tip-degraded::before { background: var(--s-degraded); }
.tip-line.tip-partial::before { background: var(--s-partial); }
.tip-line.tip-major::before { background: var(--s-major); }
.tip-inc { border-top: 1px solid var(--rule); padding-top: .3rem; margin-top: .15rem; color: var(--ink-2); }
.tip-inc + .tip-inc { border-top: 0; padding-top: 0; margin-top: 0; }
.tip-more { color: var(--muted); }
.comp.child .bars { height: 20px; }
.axis { display: flex; justify-content: space-between; gap: 1rem; margin-top: .35rem; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* History page */
h1 + .sub, .sub { margin-top: .3rem; color: var(--muted); }

/* Past incidents */
.day { padding: .9rem 0; border-top: 1px solid var(--rule); }
.day:first-of-type { border-top: 0; padding-top: 0; }
.day h3 { font-size: .95rem; font-weight: 600; }
.day .none { font-size: .9rem; color: var(--muted); margin-top: .25rem; }
.day ul { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.day li { font-size: .93rem; }
.day li .when { display: block; font-size: .8rem; color: var(--muted); }
.more { margin-top: 1rem; font-size: .9rem; }

footer.site { border-top: 1px solid var(--rule); }
footer.site .wrap { padding-top: 1.25rem; padding-bottom: 2rem; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .83rem; color: var(--muted); }
footer.site a { color: var(--ink-2); }

.axis .d30 { display: none; }

/* A phone shows the last 30 days, as GitHub does: 90 bars at that width are too thin to read. */
@media (max-width: 640px) {
  .updates li { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .comp.child { padding-left: 1.6rem; }
  .bars > span:nth-child(-n+60) { display: none; }
  /* Only the last 30 show: re-anchor the cards across those. */
  .bars > span:nth-child(n+61) .tip { left: 50%; right: auto; transform: translateX(-50%); }
  .bars > span:nth-child(n+61):nth-child(-n+70) .tip { left: 0; transform: none; }
  .bars > span:nth-child(n+81) .tip { left: auto; right: 0; transform: none; }
  .bars .tip { max-width: 220px; }
  .axis .d90 { display: none; }
  .axis .d30 { display: inline; }
  .banner .headline { font-size: 1.15rem; }
}
/* The crew (see crew() in render.mjs). CSS only: the CSP allows no scripts. */
.banner .crew { margin-left: auto; width: 220px; height: 112px; flex: none; }
.crew .float { animation: crew-float 4.5s ease-in-out infinite; }
.crew .f2 { animation-delay: -1.5s; }
.crew .f3 { animation-delay: -3s; }
.crew .gear { transform-box: fill-box; transform-origin: center; }
.crew .gear-a { animation: crew-spin 9s linear infinite; }
.crew .gear-b { animation: crew-spin 6s linear infinite reverse; }
.crew .wrench { transform-box: fill-box; transform-origin: 20% 80%; animation: crew-wrench .9s ease-in-out infinite; }
.crew .sweat { animation: crew-sweat 2.2s ease-in infinite; }
/* The worse it is, the harder the crew works. */
.crew-degraded .gear-a { animation-duration: 4s; }
.crew-degraded .gear-b { animation-duration: 2.7s; }
.crew-partial .gear-a, .crew-major .gear-a { animation-duration: 2.2s; }
.crew-partial .gear-b, .crew-major .gear-b { animation-duration: 1.4s; }
.crew-partial .float, .crew-major .float { animation-duration: 1.8s; }
.crew-major .wrench { animation-duration: .6s; }
/* Weather */
.crew .sun-rays { transform-box: fill-box; transform-origin: center; animation: crew-spin 24s linear infinite; }
.crew .drop { animation: crew-rain 1.1s linear infinite; opacity: 0; }
.crew .d2 { animation-delay: -.35s; }
.crew .d3 { animation-delay: -.7s; }
.crew .d4 { animation-delay: -.9s; }
.crew-degraded .drop { animation-duration: 1.6s; }
.crew-major .drop { animation-duration: .75s; }
.crew .bolt { animation: crew-bolt 2.6s steps(1, end) infinite; }
@keyframes crew-rain { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }
@keyframes crew-bolt { 0%, 62%, 70%, 100% { opacity: 0; } 64%, 68%, 74% { opacity: 1; } }

@keyframes crew-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes crew-spin { to { transform: rotate(360deg); } }
@keyframes crew-wrench { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(16deg); } }
@keyframes crew-sweat { 0% { opacity: 0; transform: translateY(0); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(10px); } }

@media (max-width: 640px) {
  .banner .crew { width: 118px; height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .crew * { animation: none !important; }
}

/* Preview only (bin/preview.mjs demo): every banner state stacked for review. */
.gallery { display: flex; flex-direction: column; gap: .9rem; }