/* The server status page (owner 2026-10-18): the sign-up page's Legend art and white card
   (register.css) laid out like Riot's status page: one column, service rows, dated entries. */
@font-face{font-family:"Prime Text";src:url("assets/fonts/inter-v20-latin-var.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Prime Intl";src:url("assets/fonts/noto-sans-georgian-v48-georgian-var.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0589,U+10A0-10FF,U+1C90-1CBF,U+2D00-2D2F}
@font-face{font-family:"Prime Intl";src:url("assets/fonts/inter-v20-cyrillic-var.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Prime Intl";src:url("assets/fonts/noto-sans-armenian-v47-armenian-var.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0530-058F,U+FB13-FB17}

:root{color-scheme:light;--ink:#111417;--muted:#6c7278;--field:#f1f2f4;--line:#e2e5e8;--orange:#f59a32;--red:#c42f32;--green:#2f9e44;--blue:#2b6cb0;--discord:#5865f2}
*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh;background:#fff;color:var(--ink);font-family:"Prime Text","Prime Intl",Arial,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
a{color:inherit}

.stage{position:relative;height:clamp(300px,44vh,460px);background:#0c1218 url("assets/register/legend-bg-v1.webp") 50% 38%/cover no-repeat;color:#fff}
.stage::after{position:absolute;inset:0;content:"";background:linear-gradient(180deg,rgba(12,18,24,.12),rgba(12,18,24,.55))}
.stage>*{position:relative;z-index:1}
.brand{position:absolute;left:56px;top:38px;display:flex;align-items:center;gap:14px;color:#fff;text-decoration:none}
.brand img{width:58px;height:58px}
.brand span{font-size:19px;font-weight:800;letter-spacing:.4em;line-height:1;text-transform:uppercase;text-shadow:0 1px 12px rgba(0,0,0,.6),0 0 2px rgba(0,0,0,.35)}
.headline{position:absolute;left:56px;bottom:48px;margin:0;font-size:clamp(44px,4.6vw,84px);font-weight:900;line-height:.92;letter-spacing:-.03em;text-transform:uppercase;text-shadow:0 2px 18px rgba(0,0,0,.45)}

.page{width:min(880px,100% - 32px);margin:0 auto;padding:36px 0 56px}
.page h2{margin:0 0 10px;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.page section{margin-top:40px}
.page section:first-child{margin-top:0}

.overall{display:flex;align-items:center;gap:14px;margin:0;font-size:24px;font-weight:800;letter-spacing:-.01em}
.overall .dot{width:16px;height:16px}
.stamp{margin:6px 0 0 30px;color:var(--muted);font-size:13px}
.stamp:empty{display:none}

.dot{flex:none;width:11px;height:11px;border-radius:50%;background:#aab0b6}
.is-online>.dot,.is-online .state .dot{background:var(--green)}
.is-issues>.dot,.is-issues .state .dot{background:var(--orange)}
.is-maintenance>.dot,.is-maintenance .state .dot,.is-closed .state .dot{background:var(--blue)}
.is-offline>.dot,.is-offline .state .dot{background:var(--red)}

.services{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.service{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 4px;border-bottom:1px solid var(--line)}
.service .name{font-size:16px;font-weight:700}
.service .name small{display:block;margin-top:3px;color:var(--muted);font-size:13px;font-weight:500;line-height:1.4}
.service .state{display:inline-flex;align-items:center;gap:9px;flex:none;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#3d4349}

.window{margin:0 0 12px;color:var(--muted);font-size:14px;line-height:1.5}
.entry{padding:18px 0 20px;border-top:1px solid var(--line)}
.entry:last-child{border-bottom:1px solid var(--line)}
.entry h3{margin:0;font-size:17px;font-weight:800;letter-spacing:-.01em}
.entry .meta{margin:5px 0 0;color:var(--muted);font-size:13px}
.entry .meta b{color:var(--ink);font-weight:700}
.entry.is-resolved h3{color:#4b5157}
.entry p.body{margin:10px 0 0;font-size:15px;line-height:1.5;color:#2f353b}
.updates{margin:12px 0 0;padding:0;list-style:none}
.updates li{display:grid;grid-template-columns:200px 1fr;gap:6px 18px;padding:8px 0;font-size:14.5px;line-height:1.5;color:#2f353b}
.updates time{color:var(--muted);font-size:13px;line-height:1.7;white-space:nowrap}
.updates b{display:block;color:var(--ink)}
.empty{margin:0;padding:18px 4px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--muted);font-size:15px}

.more{margin:44px 0 0;color:var(--muted);font-size:14px;text-align:center}
.more a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}

.legal{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;padding:8px 16px 32px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.legal a{color:#3d4349;text-decoration:none}
.legal a:hover{text-decoration:underline}

@media (max-width:760px){
  .stage{height:56vw;min-height:230px;background-image:url("assets/register/legend-phone-v1.webp");background-position:50% 50%}
  .brand{left:16px;top:14px;gap:10px}
  .brand img{width:38px;height:38px}
  .brand span{font-size:13px}
  .headline{left:16px;bottom:16px;font-size:clamp(30px,9vw,44px)}
  .page{padding-top:26px}
  .page section{margin-top:32px}
  .overall{font-size:20px}
  .service .name{font-size:15px}
  .updates li{grid-template-columns:1fr}
  .updates time{line-height:1.3}
}

/* The language switcher, as styles.css draws it (lang.js builds the markup). */
.lang-switch {
  position: relative;
  justify-self: end;
  /* lang.js fills this box, so its width is reserved here: without it the
     header re-flows the moment the script runs. */
  min-width: 64px;
  min-height: 38px;
}

.lang-current {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: #dbe6ef;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 820;
  letter-spacing: 0.1em;
  transition: border-color 150ms ease, color 150ms ease;
}

.lang-current:hover,
.lang-switch.is-open .lang-current {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.13);
  color: #ffffff;
}

.flag {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32), 0 1px 3px rgba(0, 0, 0, 0.55);
}

.flag-en { background-image: url("assets/flags/en.svg"); }
.flag-ka { background-image: url("assets/flags/ka.svg"); }
.flag-ru { background-image: url("assets/flags/ru.svg"); }
.flag-pt { background-image: url("assets/flags/br.svg"); }
.flag-de { background-image: url("assets/flags/de.svg"); }
.flag-hy { background-image: url("assets/flags/am.svg"); }
.flag-uk { background-image: url("assets/flags/ua.svg"); }
.flag-az { background-image: url("assets/flags/az.svg"); }

.lang-caret {
  width: 0;
  height: 0;
  margin-left: 1px;
  border-top: 5px solid currentColor;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  opacity: 0.75;
  transition: transform 160ms ease;
}

.lang-switch.is-open .lang-caret {
  transform: rotate(180deg);
}

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 128px;
  margin: 0;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(8, 14, 22, 0.94);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  list-style: none;
}

/* A small pane of the bar's glass: what is behind it shows through, blurred. */
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .lang-menu {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 40%),
      rgba(8, 14, 22, 0.58);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    backdrop-filter: blur(22px) saturate(170%);
  }
}

.lang-menu li + li {
  margin-top: 2px;
}

.lang-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 12px;
  color: #c8d5e0;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  transition: background 140ms ease, color 140ms ease;
}

.lang-menu a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.lang-menu a.is-current {
  background: linear-gradient(180deg, #f8a13a, #e0740f);
  color: #14100a;
}

/* "This page is also in your language": an offer, never a redirect. */
.lang-pill {
  position: fixed;
  right: 0;
  bottom: 18px;
  left: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: min(620px, calc(100% - 28px));
  margin-inline: auto;
  padding: 10px 12px;
  border: 1px solid rgba(196, 215, 231, 0.2);
  border-radius: 14px;
  background: rgba(7, 12, 19, 0.96);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.62);
  opacity: 0;
  transform: translate(0, 18px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.lang-pill.is-in {
  opacity: 1;
  transform: translate(0, 0);
}

.lang-pill-text {
  color: #dfe8f0;
  font-size: 0.92rem;
  line-height: 1.35;
}

.lang-pill-go {
  flex: none;
  padding: 8px 14px;
  border: 1px solid rgba(243, 128, 26, 0.85);
  border-radius: 9px;
  background: rgba(243, 128, 26, 0.14);
  color: var(--orange-bright);
  font-size: 0.88rem;
  font-weight: 800;
}

.lang-pill-go:hover {
  background: rgba(243, 128, 26, 0.24);
  color: #ffffff;
}

.lang-pill-x {
  flex: none;
  padding: 8px 4px;
  border: 0;
  background: none;
  color: #8ea1b3;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
}

.lang-pill-x:hover {
  color: #dfe8f0;
}

/* On this page the switcher sits on the art, top right (after the block above, which makes it relative). */
.stage .lang-switch{position:absolute;right:56px;top:46px}
@media (max-width:760px){.stage .lang-switch{right:16px;top:14px}}
/* Georgian, Russian and Armenian run wider: less tracking on the uppercase bits (the site's rule). */
[lang="ka"] .headline,[lang="ru"] .headline,[lang="hy"] .headline{letter-spacing:-.01em}
[lang="ka"] .page h2,[lang="ru"] .page h2,[lang="hy"] .page h2,[lang="ka"] .service .state,[lang="ru"] .service .state,[lang="hy"] .service .state,[lang="ka"] .brand span,[lang="ru"] .brand span,[lang="hy"] .brand span{letter-spacing:.04em}

@media (max-width: 700px) {
  .lang-current {
    gap: 6px;
    padding: 0 8px;
    font-size: 0.72rem;
  }

  .lang-pill {
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    max-width: none;
    flex-wrap: wrap;
  }

  .lang-pill-text {
    flex: 1 1 100%;
    min-width: 0;
    font-size: 0.88rem;
  }

  .lang-pill-go {
    flex: 1 1 auto;
    text-align: center;
  }

  .lang-pill-x {
    flex: 0 0 auto;
  }
}