/* Selene Studio · Status (/status). Page styles on top of /site/site.css, drawn in Doop (frames "Status · …",
   x 31580): the state right now, the bars' card (the Lab's uptime-bars, which /site/status/faixas.js draws
   in it), the recent incidents and how we check, and the phone layout below 960 px. The page ends at the
   footer, without the waitlist call. */

/* Without the closing call, the footer starts at the horizon line itself. */
.rd-linha{border-top:1px solid var(--border)}

/* Page top: the same paper, with a soft light behind the title. */
:root{--st-luz:radial-gradient(40% 560px at 20% 0,#fff 0%,rgb(255 255 255 / 0) 100%),radial-gradient(70% 420px at 50% -60px,rgb(37 88 232 / .07) 0%,rgb(37 88 232 / 0) 100%)}
html.dark{--st-luz:radial-gradient(40% 560px at 20% 0,rgb(255 255 255 / .05) 0%,rgb(255 255 255 / 0) 100%)}
.st-pg{position:relative;padding-top:144px}
.st-pg::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:640px;background:var(--st-luz);pointer-events:none}
@media (min-width:960px) and (max-width:1295px){.st-pg,.st-mais{zoom:var(--z,1)}}

.st-cab h1{font:500 56px/1.05 var(--display);letter-spacing:-.02em;text-wrap:balance}
.st-cab .lead{margin-top:20px;max-width:600px;font-size:17px}

/* the state right now */
.st-agora{margin-top:40px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 28px;border-radius:24px;background:var(--card);box-shadow:var(--raised)}
.st-agora-esq{display:flex;align-items:center;gap:16px;min-width:0}
.st-selo{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:999px;background:var(--success-soft);color:var(--success)}
.st-selo svg{width:22px;height:22px}
.st-degraded .st-selo{background:var(--warning-soft);color:var(--warning)}
.st-down .st-selo{background:var(--danger-soft);color:var(--danger)}
.st-none .st-selo{background:var(--muted);color:var(--muted-fg)}
.st-agora h2{font:600 22px/1.25 var(--sans);letter-spacing:-.01em}
.st-agora-esq p{margin-top:2px;font-size:15px;line-height:1.45;color:var(--muted-fg);text-wrap:pretty}
.st-agora-dir{flex:none;text-align:right;font-size:14px;line-height:1.5;color:var(--muted-fg)}
.st-agora-hora,.st-dias-cel{display:none}
.st-agora-dir b{display:block;font-size:15px;font-weight:500;color:var(--fg)}

/* the bars' card: the island draws the Lab's uptime-bars in it, over the plain list it starts with */
.st-faixas{margin-top:24px;padding:32px;border-radius:24px;background:var(--card);box-shadow:var(--raised)}
.st-faixas:not(.st-pronto){min-height:560px}
.st-lista{list-style:none;padding:0;display:grid;gap:16px}
.st-lista li{display:flex;justify-content:space-between;gap:16px;font-size:15px;line-height:1.5}
.st-lista span{color:var(--muted-fg);text-align:right}

/* the recent incidents, and how we check */
.st-mais{padding:120px 0 112px}
.st-grid{display:grid;grid-template-columns:1fr 392px;gap:72px;align-items:start}
.st-h2{font:500 32px/1.15 var(--display);letter-spacing:-.015em}
.st-sub{margin-top:8px;font-size:15px;line-height:1.5;color:var(--muted-fg)}
.st-incs{list-style:none;padding:0;margin-top:28px;border-top:1px solid var(--border)}
.st-inc{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:20px 0;border-bottom:1px solid var(--border)}
.st-quando b{display:block;font:500 15px/24px var(--sans)}
.st-quando span{display:block;font-size:14px;line-height:20px;color:var(--faint)}
.st-t{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.st-t h3{font:600 16px/24px var(--sans)}
.st-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:6px;font:500 13px/1 var(--sans);white-space:nowrap}
.st-chip i{width:6px;height:6px;border-radius:999px;background:currentColor}
.st-chip.st-deg{color:var(--warning);background:var(--warning-soft)}
.st-chip.st-out{color:var(--danger);background:var(--danger-soft)}
.st-inc p{margin-top:6px;font-size:15px;line-height:1.5;color:var(--muted-fg)}
.st-nota{margin-top:16px;font-size:13px;line-height:1.5;color:var(--faint)}
.st-vazio{display:flex;align-items:center;gap:14px;margin-top:28px;padding:20px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);font-size:15px;line-height:1.45;color:var(--muted-fg)}
.st-vazio-ico{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;background:var(--success-soft);color:var(--success)}
.st-vazio-ico svg{width:18px;height:18px}
.st-vazio b{display:block;font:600 16px/1.35 var(--sans);color:var(--fg)}

.st-como{background:var(--card);border-radius:24px;box-shadow:var(--raised);padding:28px}
.st-como h2{font:600 18px/1.3 var(--sans)}
.st-como ul{list-style:none;padding:0}
.st-como li{display:grid;grid-template-columns:36px 1fr;gap:14px;margin-top:20px}
.st-como h3{font:600 15px/1.35 var(--sans);padding-top:1px}
.st-como li p{margin-top:3px;font-size:14px;line-height:1.5;color:var(--muted-fg)}
.st-ajuda{margin-top:24px;padding-top:20px;border-top:1px solid var(--border);font-size:14px;line-height:1.5;color:var(--muted-fg)}
.st-ajuda .ir{display:flex;align-items:center;gap:4px;width:max-content;margin-top:4px;font:500 15px/1.4 var(--sans);color:var(--signal);text-decoration:none}
.st-ajuda .ir svg{width:16px;height:16px;transition:transform .2s var(--ease)}
.st-ajuda .ir:hover svg{transform:translateX(2px)}
@media (prefers-reduced-motion:reduce){.st-ajuda .ir svg{transition:none}}

/* phones and narrow windows: one column, the phone frames' sizes */
@media (max-width:959px){
  .st-pg{padding-top:92px}
  .st-cab h1{font-size:36px}
  .st-cab .lead{margin-top:14px;font-size:16px}
  .st-agora{margin-top:24px;padding:16px 18px;border-radius:18px;gap:14px}
  .st-agora-esq{gap:14px}
  .st-selo{width:40px;height:40px}
  .st-selo svg{width:20px;height:20px}
  .st-agora h2{font-size:18px;line-height:1.3;letter-spacing:0}
  .st-agora-esq p{font-size:14px}
  .st-agora-dir,.st-dias{display:none}
  .st-dias-cel{display:inline}
  /* All clear: the time takes the sentence's place, as in the phone frame. */
  .st-ok .st-det{display:none}
  .st-ok .st-agora-hora{display:block}
  .st-faixas{margin-top:16px;padding:20px;border-radius:18px}
  .st-faixas:not(.st-pronto){min-height:520px}
  .st-mais{padding:32px 0 48px}
  .st-grid{grid-template-columns:1fr;gap:32px}
  .st-h2{font-size:28px}
  .st-sub{margin-top:6px}
  .st-incs{margin-top:20px}
  .st-inc{grid-template-columns:1fr;gap:6px;padding:14px 0 16px}
  .st-quando{display:flex;gap:6px;font-size:13px;color:var(--faint)}
  .st-quando b{display:inline;font:400 13px/20px var(--sans);color:var(--faint)}
  .st-quando b::after{content:","}
  .st-quando span{display:inline;font-size:13px}
  .st-t h3{font-size:15px;line-height:22px}
  .st-inc p{margin-top:4px;font-size:14px}
  .st-como{padding:20px;border-radius:18px}
  .st-como h2{font-size:17px}
}