/* ============================================================
   Anubis challenge page — restyled to match ktozvonil.net.
   Served by nginx at /.within.website/x/xess/xess.min.css (overrides
   Anubis's bundled "xess" framework). Self-contained on purpose: this
   page is the gate, so it must look right even if the rest of the
   site's CSS is unavailable. HTML markup comes from Anubis's embedded
   template (we can't change it) — we only have these hooks:
   #title, #status, #progress > .bar-inner, #image, .centered-div,
   <details>, <footer>, <noscript>, #testarea.
   ============================================================ */

:root {
  --kz-brand: #00aae7;
  --kz-brand-dark: #0089ba;
  --kz-bg: #fafcfd;
  --kz-surface: #ffffff;
  --kz-border: #e6eef3;
  --kz-text: #1b2733;
  --kz-text-2: #5a6b7a;
  --kz-text-3: #8a9aa8;
  --kz-radius: 18px;
  --kz-shadow: 0 1px 0 rgba(20,40,80,.04), 0 24px 48px -20px rgba(0,90,160,.18);
  --kz-font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body#top, body {
  font-family: var(--kz-font);
  background: var(--kz-bg);
  color: var(--kz-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  min-height: 100vh;
}

main {
  width: 100%;
  max-width: 440px;
  background: var(--kz-surface);
  border: 1px solid var(--kz-border);
  border-radius: var(--kz-radius);
  box-shadow: var(--kz-shadow);
  padding: 36px 32px 24px;
  text-align: center;
}

.centered-div { text-align: center; }

#title {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--kz-text);
}

/* the mascot slot — nginx already swaps the image for the brand shield.
   !important because Anubis's template puts inline width:100%;max-width:256px
   on the <img>, which would otherwise win over this rule. */
#image {
  width: 88px !important;
  height: 88px !important;
  max-width: 88px !important;
  margin: 20px auto 14px;
  display: block;
}

#status {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--kz-text-2);
  min-height: 1.2em;
}

/* progress bar */
#progress {
  width: 100%;
  height: 8px;
  background: #eef4f8;
  border-radius: 999px;
  overflow: hidden;
  margin: 0 0 18px;
}
#progress .bar-inner {
  height: 100%;
  background: linear-gradient(90deg, var(--kz-brand), var(--kz-brand-dark));
  border-radius: 999px;
  transition: width .25s ease;
}

/* the collapsible "why am I seeing this" block */
details {
  margin: 8px 0 4px;
  text-align: left;
  border-top: 1px solid var(--kz-border);
  padding-top: 12px;
}
details > summary,
details::-webkit-details-marker { color: var(--kz-text-3); }
details > p {
  font-size: 13px;
  color: var(--kz-text-3);
  line-height: 1.5;
  margin: 8px 0;
}

noscript p {
  display: block;
  margin: 14px 0 0;
  padding: 12px 14px;
  background: #fff6e8;
  border: 1px solid #f3dcb0;
  border-radius: 10px;
  color: #8a5a13;
  font-size: 13px;
  text-align: left;
}

#testarea { position: absolute; left: -9999px; top: 0; }

a {
  color: var(--kz-brand);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
  color: var(--kz-text-3);
}

footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--kz-border);
}
footer p {
  margin: 2px 0;
  font-size: 11px;
  color: var(--kz-text-3);
  line-height: 1.4;
}
/* keep a discreet "protected by" line, hide the mascot-credit + version chatter */
footer p:nth-of-type(2),
footer p:nth-of-type(3) { display: none; }

@media (max-width: 480px) {
  main { padding: 28px 20px 18px; }
  #title { font-size: 19px; }
}