/* Depth layout and components. Tokens live in tokens.css. */

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  overflow: hidden;
  transition: background-color 0.6s ease, color 0.6s ease;
}

/* the ambient stage: two canvases sandwich the clock so near stars can pass in front of it
   while far stars stay behind it, the layering the build prompt calls out as the whole effect */
.stage {
  position: fixed;
  inset: 0;
}

.stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  mix-blend-mode: var(--star-blend);
}

#stars-back {
  z-index: 1;
}

#stars-front {
  z-index: 3;
}

/* clock */

.clock {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  pointer-events: none;
  padding: 0 var(--space-4);
}

.clock__time {
  font-family: var(--font-display);
  font-weight: 200;
  font-variant-numeric: tabular-nums;
  font-size: clamp(3rem, 14vw, 9rem);
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--ink);
  text-shadow: 0 0 40px rgba(0, 0, 0, 0.15);
  transition: color 0.6s ease;
}

.clock__date {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(0.85rem, 1.6vw, 1.1rem);
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.clock__label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(0.8rem, 1.4vw, 1rem);
  color: var(--muted);
  max-width: 32ch;
}

.clock--hidden {
  display: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* chrome: wordmark, theme toggle, controls card, footer. all of it fades together on idle */

.chrome {
  position: relative;
  z-index: 4;
  transition: opacity 0.8s ease;
}

.chrome--idle {
  opacity: 0;
  pointer-events: none;
}

.wordmark {
  position: fixed;
  top: var(--space-5);
  left: var(--space-5);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  color: var(--ink);
  opacity: 0.85;
}

.wordmark svg {
  width: 20px;
  height: 20px;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(143, 143, 152, 0.3);
  background: rgba(18, 18, 24, 0.35);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

:root[data-theme="light"] .icon-button {
  background: rgba(255, 253, 247, 0.55);
}

.icon-button:hover {
  border-color: var(--accent);
}

.icon-button:focus-visible,
.control-panel a:focus-visible,
.control-panel button:focus-visible,
.control-panel input:focus-visible,
.control-panel select:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.icon-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.top-actions {
  position: fixed;
  top: var(--space-5);
  right: var(--space-5);
  z-index: 4;
  display: flex;
  gap: var(--space-2);
}

/* the family's one floating translucent card */

.control-panel {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 4;
  width: min(320px, calc(100vw - 32px));
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  border-radius: var(--radius);
  border: 1px solid rgba(143, 143, 152, 0.25);
  background: rgba(18, 18, 24, 0.55);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  color: var(--ink);
}

:root[data-theme="light"] .control-panel {
  background: rgba(255, 253, 247, 0.72);
  border-color: rgba(138, 128, 116, 0.3);
}

.control-panel--closed .control-panel__body {
  display: none;
}

.control-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.control-panel__head h2 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.field label {
  font-size: 0.8rem;
  color: var(--muted);
}

.field input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.field input[type="text"] {
  width: 100%;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(143, 143, 152, 0.35);
  background: rgba(0, 0, 0, 0.2);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.9rem;
}

:root[data-theme="light"] .field input[type="text"] {
  background: rgba(255, 255, 255, 0.6);
}

.field--row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.segmented {
  display: flex;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(143, 143, 152, 0.35);
  overflow: hidden;
}

.segmented button {
  flex: 1;
  padding: var(--space-2);
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  cursor: pointer;
  min-height: 44px;
}

.segmented button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}

.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 40px;
  height: 24px;
}

.switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
  width: 100%;
  height: 100%;
}

.switch__track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(143, 143, 152, 0.35);
  transition: background-color 0.2s ease;
  pointer-events: none;
}

.switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform 0.2s ease;
  pointer-events: none;
}

.switch input:checked + .switch__track {
  background: var(--accent);
}

.switch input:checked ~ .switch__thumb {
  transform: translateX(16px);
}

.switch input:focus-visible ~ .switch__track {
  box-shadow: var(--focus-ring);
}

.hint {
  font-size: 0.72rem;
  color: var(--muted);
  margin: 0;
}

/* footer */

.footer {
  position: fixed;
  left: var(--space-5);
  bottom: var(--space-4);
  z-index: 4;
  font-size: 0.75rem;
}

.footer a {
  color: var(--muted);
  text-decoration: none;
}

@media (max-width: 640px) {
  .wordmark {
    top: var(--space-4);
    left: var(--space-4);
  }

  .top-actions {
    top: var(--space-4);
    right: var(--space-4);
  }

  .control-panel {
    right: var(--space-4);
    bottom: var(--space-4);
    left: var(--space-4);
    width: auto;
  }

  .footer {
    left: var(--space-4);
    bottom: var(--space-3);
  }
}

/* prefers-reduced-motion: no CSS transitions/animations for chrome fades or focus movement,
   the JS side additionally swaps the starfield to its near-still variant */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}