/* Shared "Apie" panel for every experiment on lab.intelektas.ai.
   intelektas.ai brand: white reading surface, navy header band, one cyan
   accent, Montserrat 700 for the wordmark.

   The host pages are games: fixed layouts, dark backgrounds, monospace fonts,
   user-select:none, :root{color-scheme:dark}. Nothing here may inherit from
   them, so every element under the lab-about- prefix resets what it needs. */

@font-face {
  font-family: "LabMontserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/montserrat-700-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: "LabMontserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/montserrat-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Tokens live on the panel root, not on :root, so a host page that redefines
   its own custom properties cannot reach them. */
.lab-about-root {
  --lab-surface: #ffffff;
  --lab-surface-alt: #f4f6f9;
  --lab-surface-dark: #0b1020;
  --lab-ink: #14181f;
  /* Brand ink-muted #5b6472 is 6:1 on white, just under the panel's 7:1
     floor. Darkened one step: same grey role, 7.5:1. */
  --lab-ink-muted: #4d5563;
  --lab-ink-on-dark: #ffffff;
  --lab-accent: #29b6e8;
  /* Link text is a darkened cyan. The brand accent #29b6e8 on white is about
     2:1, and the main site's link cyan #0b7ba5 is 4.8:1; the panel is held to
     the 7:1 floor, and this value measures 7.6:1 on white. */
  --lab-accent-text: #0a5a78;
  --lab-accent-2: #5a43d6;
  --lab-rule: #e6e9ee;
  --lab-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --lab-display: "LabMontserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Full reset for everything the panel owns. */
.lab-about-root,
.lab-about-root *,
.lab-about-root *::before,
.lab-about-root *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  line-height: inherit;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  text-shadow: none;
  text-indent: 0;
  color: inherit;
  background: none;
  list-style: none;
  -webkit-user-select: text;
  user-select: text;
  float: none;
  transform: none;
  animation: none;
  image-rendering: auto;
  color-scheme: light;
}

.lab-about-root {
  font-family: var(--lab-sans);
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.65;
  color: var(--lab-ink);
  -webkit-font-smoothing: antialiased;
}

/* Button */

.lab-about-btn {
  position: fixed;
  z-index: 2147483000;
  bottom: 16px;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--lab-surface-dark);
  color: var(--lab-ink-on-dark);
  font-family: var(--lab-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(11, 16, 32, 0.35);
}

/* Bottom-left: v3 parks its pause and sound buttons at bottom-right of the
   stage under 660px, and v2's canvas is centred, so the left corner is the
   one that stays clear of a HUD at every width. */
.lab-about-btn { left: 16px; }

/* A build can ask for bottom-right on desktop (experiments.json "button":
   "right") when its own HUD sits bottom-left. Phones keep the left corner. */
@media (min-width: 640px) {
  .lab-about-root[data-button="right"] .lab-about-btn { left: auto; right: 16px; }
}

.lab-about-btn:hover {
  background: #171e39;
}

.lab-about-btn:focus-visible {
  outline: 3px solid var(--lab-accent);
  outline-offset: 3px;
}

.lab-about-root[data-open="true"] .lab-about-btn {
  /* The panel covers it anyway; keep it out of the way of the backdrop. */
  visibility: hidden;
}

/* Backdrop */

.lab-about-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147483001;
  background: rgba(11, 16, 32, 0.5);
  cursor: pointer;
}

/* Panel: right drawer on desktop, bottom sheet under 640px */

.lab-about-panel {
  position: fixed;
  z-index: 2147483002;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  background: var(--lab-surface);
  box-shadow: -8px 0 34px rgba(11, 16, 32, 0.3);
  transform: translateX(100%);
  transition: transform 150ms ease;
}

.lab-about-root[data-open="true"] .lab-about-panel {
  transform: translateX(0);
}

.lab-about-panel[hidden] {
  display: none;
}

/* Header band */

.lab-about-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  background: var(--lab-surface-dark);
  color: var(--lab-ink-on-dark);
}

.lab-about-wordmark {
  font-family: var(--lab-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--lab-ink-on-dark);
}

.lab-about-wordmark .dot {
  color: var(--lab-accent);
}

.lab-about-close {
  padding: 9px 16px;
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: transparent;
  color: var(--lab-ink-on-dark);
  font-family: var(--lab-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
}

.lab-about-close:hover {
  border-color: var(--lab-accent);
  color: var(--lab-accent);
}

.lab-about-close:focus-visible {
  outline: 3px solid var(--lab-accent);
  outline-offset: 2px;
}

/* Body */

.lab-about-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 28px 22px 34px;
  background: var(--lab-surface);
}

.lab-about-title {
  font-family: var(--lab-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--lab-ink);
  margin-bottom: 10px;
}

.lab-about-body p {
  margin-bottom: 14px;
}

.lab-about-meta {
  color: var(--lab-ink-muted);
  font-size: 16px;
}

.lab-about-bio {
  padding-top: 16px;
  border-top: 1px solid var(--lab-rule);
  color: var(--lab-ink-muted);
  font-size: 16px;
}

.lab-about-links {
  margin: 18px 0 22px;
}

.lab-about-links li {
  margin-bottom: 8px;
}

.lab-about-body a {
  color: var(--lab-accent-text);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.lab-about-body a:hover {
  color: var(--lab-accent-2);
}

.lab-about-body a:focus-visible {
  outline: 3px solid var(--lab-accent);
  outline-offset: 2px;
}

.lab-about-imprint {
  padding-top: 16px;
  border-top: 1px solid var(--lab-rule);
  color: var(--lab-ink-muted);
  font-size: 15px;
}

.lab-about-imprint p {
  margin-bottom: 4px;
}

@media (min-width: 900px) {
  .lab-about-root { font-size: 19px; }
}

/* Bottom sheet under 640px */

@media (max-width: 639px) {
  .lab-about-panel {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 85vh;
    box-shadow: 0 -8px 34px rgba(11, 16, 32, 0.3);
    transform: translateY(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lab-about-panel { transition: none; }
}