/* All design tokens now live in tokens.css — loaded before this file.
   HTML reset and component styles follow. */
html {
  color-scheme: dark;
}

/* Light theme and TV mode token overrides now live in tokens.css. */

:focus-visible {
  outline: var(--tv-focus-outline-width) solid var(--accent-color);
  outline-offset: var(--tv-focus-outline-offset);
  transition: outline-offset var(--transition-base);
}

:target {
  scroll-margin-top: clamp(6rem, 12vh, 9rem);
}

img,
video,
canvas {
  content-visibility: auto;
}

/* Light theme and TV mode token overrides now live in tokens.css. */
.sr-only {
  /* biome-ignore lint/complexity/noImportantStyles: a11y utility */
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  left: max(0.9rem, env(safe-area-inset-left));
  right: auto;
  top: -6rem;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  color: var(--text-color);
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--surface-border);
  transition:
    top var(--transition-slow),
    opacity var(--transition-slow),
    box-shadow var(--transition-base),
    background var(--transition-base),
    border-color var(--transition-base);
  z-index: var(--z-skip-link);
  min-height: 46px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.skip-link:focus-visible {
  top: max(4.2rem, calc(env(safe-area-inset-top) + 3.4rem));
  opacity: 1;
  outline: var(--tv-focus-outline-width) solid var(--stims-accent);
  outline-offset: var(--tv-focus-outline-offset);
}

@media (hover: none) and (pointer: coarse) {
  .skip-link {
    display: none;
  }
}

body,
html {
  padding: 0;
  font-family: var(--font-family-base);
  font-size: calc(16px * var(--tv-scale-multiplier) * var(--ui-scale));
  background: var(--bg-color);
  color: var(--text-color);
  overflow-x: hidden;
  min-height: 100%;
}

html {
  overflow-y: auto;
}

body {
  overflow-y: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  scroll-margin-top: 6rem;
  text-wrap: balance;
}

section,
footer {
  scroll-margin-top: 6rem;
}

header {
  margin-bottom: 3rem;
  position: relative;
}

h1 {
  font-size: 2.5rem;
  font-weight: var(--font-weight-bold);
  margin-bottom: 1rem;
  color: var(--text-color);
}

footer {
  text-align: center;
  margin-top: calc(var(--section-gap) * 0.8);
  padding: 1.25rem;
  border-top: 1px solid var(--surface-border);
}

@media (max-width: 680px) {
  body {
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  h2 {
    font-size: clamp(1.4rem, 4vw, 1.8rem);
  }

  h1 {
    font-size: 1.875rem;
  }
}

@media (max-width: 520px) {
  .skip-link:focus-visible {
    top: max(3.6rem, calc(env(safe-area-inset-top) + 3rem));
  }

  h1 {
    font-size: clamp(1.6rem, 7vw, 1.8rem);
  }

  #site-footer {
    padding-inline: 0.95rem;
  }
}

/* UI polish v2: stronger hierarchy, better readability, and less cramped cards */

footer {
  margin-top: calc(var(--section-gap) * 1.05);
  padding: 1.4rem 1.2rem 1.8rem;
}

body,
html {
  /* No font-family here: --display-font was never defined, which made this
     declaration invalid at computed-value time and silently dropped the whole
     app back to the UA serif. The stack set earlier in this file stands. */
  /* The stage floor, flat. Safari fills the space beside its side controls
     on iPhone Duo's outer display with the page's background colour, so it
     names the stage's rather than the theme's. */
  background: #0a0a09;
}

.control-panel,
.active-toy-status__content {
  background: var(--bg-color);
  border-color: var(--surface-border-strong);
  box-shadow: var(--shadow-panel);
  backdrop-filter: none;
}

.control-panel__label {
  font-family: var(--font-family-mono);
}

.control-panel,
.active-toy-status__content {
  border-radius: var(--radius-xl);
}

.control-panel,
.active-toy-status__content {
  background: var(--bg-color);
  border: 1px solid var(--surface-border-strong);
  box-shadow: var(--shadow-panel);
}

.control-panel {
  position: relative;
}

.control-panel::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  height: 1px;
  background: var(--stims-line-strong);
  pointer-events: none;
}

.control-panel,
.active-toy-status__content {
  border-radius: var(--radius-sm);
  box-shadow:
    0 16px 30px rgba(2, 4, 10, 0.36),
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 -1px 0 rgba(14, 19, 33, 0.7) inset,
    1px 0 0 var(--stims-white-08) inset,
    -1px 0 0 rgba(14, 19, 33, 0.4) inset;
}

.control-panel::before {
  left: 8px;
  right: 8px;
  top: 8px;
  height: 2px;
}