/* The status page in the site's look: its surfaces, hairlines, lime for working, its two faces. */
@font-face { font-family: "Golos Text"; font-weight: 400 600; font-display: swap;
  src: url(/web/fonts/golos-text-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 400 600; font-display: swap;
  src: url(/web/fonts/golos-text-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Unbounded"; font-weight: 800; font-display: swap;
  src: url(/web/fonts/unbounded-800-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; font-weight: 800; font-display: swap;
  src: url(/web/fonts/unbounded-800-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --surface: #141414;
  --card: #1b1b1b;
  --fg: #ffffff;
  --fg-soft: rgb(255 255 255 / 0.78);
  --fg-muted: rgb(255 255 255 / 0.5);
  --hairline: rgb(255 255 255 / 0.07);
  --empty: #2a2a2a;
  --up: #b3ec3d;
  --slow: #f5c14b;
  --down: #ff6366;
  --ink: #10140a;
  --radius: 18px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--surface); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--fg);
  font: 400 15px/1.5 "Golos Text", system-ui, sans-serif;
  letter-spacing: 0.2px;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; text-decoration-color: rgb(255 255 255 / 0.35); }
a:hover { text-decoration-color: var(--fg); }
:focus-visible { outline: 2px solid rgb(255 255 255 / 0.55); outline-offset: 2px; }

.wrap { width: 100%; max-width: 840px; margin-inline: auto; padding-inline: 20px; }

/* The site's bar: a floating pill, the mark, then its sections. */
.top { padding: 16px 12px 0; }
.site-bar { display: flex; align-items: center; gap: 4px; width: fit-content; max-width: 100%; height: 52px; margin: 0 auto; padding: 0 8px; border-radius: var(--radius); background: rgb(27 27 27 / 0.92); box-shadow: inset 0 0 0 1px var(--hairline); }
.site-bar a { display: inline-flex; align-items: center; height: 36px; padding: 0 10px; border-radius: 13px; color: var(--fg-soft); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color 0.2s, color 0.2s; }
.site-bar a:hover { background: rgb(255 255 255 / 0.05); color: var(--fg); }
.site-bar .bar-logo { padding: 0 8px; }
.bar-div { width: 1px; height: 20px; margin: 0 6px; flex: none; background: rgb(255 255 255 / 0.1); }
/* RU | EN as on the site: a sliding lifted pill under the current one. */
.lang { position: relative; display: inline-flex; flex: none; padding: 3px; border-radius: 13px; background: rgb(255 255 255 / 0.05); }
.lang-pill { position: absolute; top: 3px; left: 3px; width: 40px; height: 28px; border-radius: 10px; background: rgb(255 255 255 / 0.1); transition: transform 0.2s; }
.lang[data-current="en"] .lang-pill { transform: translateX(40px); }
.lang button { position: relative; width: 40px; height: 28px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--fg-muted); font: 500 13px/1 "Golos Text", system-ui, sans-serif; cursor: pointer; transition: color 0.2s; }
.lang button:hover, .lang button[aria-pressed="true"] { color: var(--fg); }
@media (max-width: 480px) {
  .site-bar .wide, .site-bar .wide + .bar-div { display: none; }
}

main { flex: 1; padding-top: 56px; padding-bottom: 56px; }
h1 { margin: 0; font: 800 clamp(30px, 6vw, 40px)/1.1 "Unbounded", sans-serif; letter-spacing: -0.01em; text-wrap: balance; }
.lede { margin: 12px 0 28px; color: var(--fg-muted); font-size: 16px; }
h2 { margin: 40px 0 14px; font-size: 18px; font-weight: 600; }
.muted { color: var(--fg-muted); margin: 0; }

.card { margin: 0; padding: 0; list-style: none; border-radius: var(--radius); background: var(--card); box-shadow: inset 0 0 0 1px var(--hairline); }

.summary { margin: 0 0 14px; padding: 16px 22px; border-radius: var(--radius); background: var(--card); box-shadow: inset 0 0 0 1px var(--hairline); font-weight: 600; }
.summary.slow { color: var(--slow); }
.summary.down { color: var(--down); }

.services > li { padding: 20px 22px; }
.services > li + li { border-top: 1px solid var(--hairline); }
.row-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.name { font-size: 16px; font-weight: 600; }
.pill { flex: none; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--ink); background: var(--fg-muted); }
.pill.up { background: var(--up); }
.pill.slow { background: var(--slow); }
.pill.down { background: var(--down); }

.bars { display: flex; gap: 2px; height: 30px; margin-top: 14px; }
.bar { flex: 1 1 0; min-width: 0; border-radius: 2px; background: var(--empty); }
.bar.up { background: var(--up); }
.bar.slow { background: var(--slow); }
.bar.down { background: var(--down); }
.bar:hover { opacity: 0.75; }
.row-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; color: var(--fg-muted); font-size: 12px; }
.row-foot .uptime { color: var(--fg-soft); }
.d30 { display: none; }
@media (max-width: 640px) {
  .bar:nth-child(-n + 60) { display: none; }
  .d90 { display: none; }
  .d30 { display: inline; }
  .services > li, .summary { padding-inline: 18px; }
  main { padding-top: 40px; }
}

.incidents { padding: 6px 22px; }
.incidents > .muted { padding: 14px 0; }
.incident { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 14px 0; }
.incident + .incident { border-top: 1px solid var(--hairline); }
.incident .what { font-weight: 600; }
.incident .what .open { color: var(--down); }
.incident .when { color: var(--fg-muted); font-size: 13px; }