/* ==========================================================================
   Slide: styles

   1. Tokens       design values (colors, spacing, type, motion…)
   2. Base         resets and element defaults
   3. Layout       page structure (.layout, .app, .scroller, .track)
   4. Components   reusable pieces (.pill, .panel, .icon-button, .bg-option…)
   5. Desktop      wide-screen layout with side bars

   The backgrounds themselves are drawn by script.js (section 2).

   Naming: blocks (.panel), elements (.panel__title), modifiers (.pill--icon),
   states (.is-open, .is-selected). Only use token variables for values.
   ========================================================================== */


/* 1. Tokens
   ========================================================================== */

:root {
  /* Colors */
  --color-ink: #1b2742;
  --color-ink-muted: #5d667a;
  --color-page: #e8e9ef;
  --color-surface: rgb(250 250 252 / 0.85);
  --color-surface-solid: #f8f8fb;
  --color-surface-hover: rgb(27 39 66 / 0.06);
  --color-border: rgb(27 39 66 / 0.1);
  --color-accent: #1d3461;
  --color-love: #d8374f;
  --color-love-soft: rgb(216 55 79 / 0.08);
  --color-backdrop: rgb(14 22 40 / 0.35);

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Typography */
  --font-sans: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --weight-regular: 400;
  --weight-bold: 600;
  --line-height: 1.55;

  /* Shape & depth */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-soft: 0 4px 18px rgb(20 30 55 / 0.1);
  --shadow-lift: 0 18px 50px rgb(20 30 55 / 0.22);
  --blur: 16px;

  /* Motion */
  --duration: 220ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* Sizes */
  --pill-height: 40px;
  --panel-width: 380px;
  --app-max-width: 460px;
  --sidebar-width: 300px;
  --track-height: 1000000px;

  /* Layers */
  --z-topbar: 10;
  --z-backdrop: 20;
  --z-panel: 30;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-ink: #ffffff;
    --color-ink-muted: #c9cdd6;
    --color-page: #101219;
    --color-surface: rgb(20 23 31 / 0.82);
    --color-surface-solid: #141720;
    --color-surface-hover: rgb(255 255 255 / 0.07);
    --color-border: rgb(255 255 255 / 0.1);
    --color-accent: #8e9cba;
    --color-love: #ff7b8b;
    --color-love-soft: rgb(255 123 139 / 0.1);
    --color-backdrop: rgb(0 0 0 / 0.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration: 1ms;
  }
}


/* 2. Base
   ========================================================================== */

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

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

body {
  overflow: hidden;
  background: var(--color-page);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--line-height);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
p {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* 3. Layout
   ========================================================================== */

.layout {
  height: 100dvh;
}

.app {
  position: relative;
  height: 100%;
  overflow: hidden;
}

/* The scrolling zone: a very tall .track inside a scroll container.
   script.js draws the background as a stack of canvas "chunks" inside the
   track (only the ones near the screen exist), and silently jumps back toward
   the middle when the user gets near an end, so the scroll never runs out. */
.scroller {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.scroller::-webkit-scrollbar {
  display: none;
}

.scroller:focus {
  outline: none;
}

.track {
  position: relative;
  height: var(--track-height);
  overflow: hidden;
}

.chunk {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
}

.topbar {
  position: absolute;
  inset: 0 0 auto;
  z-index: var(--z-topbar);
  display: flex;
  justify-content: space-between;
  padding: max(var(--space-4), env(safe-area-inset-top)) max(var(--space-4), env(safe-area-inset-right)) 0 max(var(--space-4), env(safe-area-inset-left));
  pointer-events: none;
}

.topbar > * {
  pointer-events: auto;
}


/* 4. Components
   ========================================================================== */

/* Pill: floating glass button */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--pill-height);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: blur(var(--blur));
  backdrop-filter: blur(var(--blur));
  font-weight: var(--weight-bold);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform var(--duration) var(--ease);
}

.pill:active {
  transform: scale(0.95);
}

.pill--icon {
  width: var(--pill-height);
  padding: 0;
}

/* Icon button: small round button inside panels */
.icon-button {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink-muted);
  cursor: pointer;
  transition: background var(--duration) var(--ease);
}

.icon-button:hover {
  background: var(--color-surface-hover);
}

.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Panel: floating window in the middle of the screen (mobile),
   side bar on desktop (see 5. Desktop) */
.panel {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: var(--z-panel);
  width: min(calc(100vw - 2 * var(--space-4)), var(--panel-width));
  display: flex;
  flex-direction: column;
  max-height: min(calc(100dvh - 2 * var(--space-7)), 640px);
  overflow: hidden;
  padding: var(--space-5) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-solid);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -48%) scale(0.97);
  transition:
    opacity var(--duration) var(--ease),
    transform var(--duration) var(--ease),
    visibility 0s linear var(--duration);
}

.panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%);
  transition-delay: 0s;
}

.panel:focus {
  outline: none;
}

/* The header stays put; only .panel__content scrolls. The panel's top and
   bottom padding keep the scroll bar clear of the rounded corners. */
.panel__header {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-5) var(--space-3);
}

.panel__content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-1) var(--space-5);
  scrollbar-width: thin;
}

.panel__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: 1.2;
}

.panel__title--brand {
  font-size: var(--text-xl);
}

.panel__subtitle {
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

.panel__body > * + * {
  margin-top: var(--space-3);
}

.panel__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

/* Backdrop: dims the app behind an open panel */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-backdrop);
  background: var(--color-backdrop);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duration) var(--ease),
    visibility 0s linear var(--duration);
}

.backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* Link button: e.g. the source code link */
.link-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-decoration: none;
  transition: background var(--duration) var(--ease);
}

.link-button:hover {
  background: var(--color-surface-hover);
}

.link-button--love {
  border-color: var(--color-love);
}

.link-button--love .icon {
  color: var(--color-love);
}

.link-button--love:hover {
  background: var(--color-love-soft);
}

/* Background picker */
.bg-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bg-option {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition:
    background var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}

.bg-option:hover {
  background: var(--color-surface-hover);
}

.bg-option.is-selected {
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.bg-option__preview {
  display: block;
  width: 100%;
  height: 72px;
  border-radius: var(--radius-sm);
}

.bg-option__name {
  padding: 0 var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}


/* 5. Desktop
   Three columns: about (left) · app (middle, max width) · backgrounds (right).
   Panels become always-visible side bars, so the pills are not needed.
   ========================================================================== */

@media (min-width: 1000px) {
  .layout {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, var(--app-max-width)) var(--sidebar-width);
    justify-content: center;
    align-items: start;
    gap: var(--space-6);
    padding: var(--space-6);
  }

  .app {
    height: calc(100dvh - 2 * var(--space-6));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lift);
  }

  .topbar,
  .backdrop,
  .panel__close {
    display: none;
  }

  .panel,
  .panel.is-open {
    position: static;
    width: auto;
    max-height: calc(100dvh - 2 * var(--space-6));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
}