/* The site uses default browser styling on purpose. This file only holds what HTML can't say. */

/* Videos have no visible controls: clicking or tapping one pauses or plays it. */
video {
  cursor: pointer;
}

/* Touch screens (phones, tablets): make tap targets finger-sized. Apple recommends at
   least 44pt. Desktop browsers with a mouse keep the default sizes. */
@media (pointer: coarse) {
  button,
  input[type="file"]::file-selector-button {
    font-size: 16px;
    min-height: 44px;
    min-width: 44px;
    padding: 0 14px;
  }
  /* The △ ▽ vote arrows: larger glyphs so they fill the bigger buttons. */
  button.vote {
    font-size: 22px;
  }
  /* Bigger hit area for text links without changing how text lines are laid out
     (vertical padding on inline elements doesn't affect line height). */
  a {
    padding: 10px 0;
  }
}

/* ---- Light and dark mode ----
   <html data-theme> is set by the server from the user's choice. Dark mode is mostly the
   browser's own dark styling (color-scheme); the three colors below are registered so
   client/theme.ts can fade them smoothly while the sun sets or rises. (The selectors
   aren't limited to :root so it can read a theme's colors from a hidden element.) */
@property --bg { syntax: '<color>'; inherits: true; initial-value: #fff; }
@property --fg { syntax: '<color>'; inherits: true; initial-value: #000; }
@property --muted { syntax: '<color>'; inherits: true; initial-value: #6b6b6b; }
[data-theme="light"] { --bg: #fff; --fg: #000; --muted: #6b6b6b; color-scheme: light; }
[data-theme="dark"] { --bg: #15161c; --fg: #e9e9ee; --muted: #9a9aa5; color-scheme: dark; }
html { background: var(--bg); color: var(--fg); }

/* The comically huge toggle: a sky-blue track with the sun on the left, or a starry
   night track with the moon on the right. */
.theme-toggle {
  --s: min(120px, 28vw);
  position: relative;
  width: calc(var(--s) * 2.3);
  height: var(--s);
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 4px solid #3b82c4;
  border-radius: var(--s);
  background: linear-gradient(#7cc4f5, #c7e8ff);
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.15);
  transition: background 0.3s, border-color 0.3s;
}
.theme-knob {
  position: absolute;
  top: 6%;
  left: 3%;
  width: calc(var(--s) * 0.8);
  height: calc(var(--s) * 0.8);
  border-radius: 50%;
  background: #ffd93b;
  box-shadow: 0 0 calc(var(--s) * 0.15) #ffcf3b;
  transition: left 0.6s cubic-bezier(0.5, -0.4, 0.5, 1.4), background 0.3s, box-shadow 0.3s;
}
[data-theme="dark"] .theme-toggle {
  border-color: #5a5f8a;
  background: radial-gradient(circle at 20% 30%, #fff 1.5px, transparent 2px),
    radial-gradient(circle at 40% 70%, #fff 1px, transparent 1.5px),
    radial-gradient(circle at 30% 50%, #fff 1px, transparent 1.5px),
    linear-gradient(#0b1033, #252b5c);
}
[data-theme="dark"] .theme-knob {
  left: calc(97% - var(--s) * 0.8);
  background: radial-gradient(circle at 30% 35%, #c9c9b8 12%, transparent 13%),
    radial-gradient(circle at 62% 62%, #c9c9b8 9%, transparent 10%), #f2f0dc;
  box-shadow: 0 0 calc(var(--s) * 0.12) rgba(242, 240, 220, 0.6);
}
.theme-toggle:hover .theme-knob { transform: scale(1.05); }
/* "Dark Mode", tilted over the top-left corner, throbbing. Positioned absolutely, so it
   takes no space and never moves anything else. */
.theme-label {
  position: absolute;
  left: -14%;
  top: 2%;
  font: 900 calc(var(--s) * 0.24)/1 system-ui, sans-serif;
  white-space: nowrap;
  color: #ffe600;
  -webkit-text-stroke: calc(var(--s) * 0.012) #8a3b00;
  text-shadow: 0 calc(var(--s) * 0.03) 0 #8a3b00;
  pointer-events: none;
  animation: throb 0.6s ease-in-out infinite alternate;
}
@keyframes throb {
  from { transform: rotate(-20deg) skewX(-12deg) scale(0.9); }
  to { transform: rotate(-20deg) skewX(-12deg) scale(1.15); }
}
.theme-toggle:active .theme-knob { transform: scale(0.95); }

/* The 5-second sunset (.sunset) or sunrise (.sunrise) shown while switching. The sunrise
   is the sunset played backwards, except that the sun and moon still travel left to
   right (east to west). The sun crosses the horizon at 55% of a sunset. */
.theme-show {
  --t: 5s;
  position: fixed;
  width: min(560px, 92vw);
  height: auto;
  aspect-ratio: 8 / 5;
  padding: 0;
  border: 4px solid #fff;
  border-radius: 18px;
  outline: none;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.theme-show::backdrop { background: rgba(0, 0, 0, 0.25); }
.theme-show > * { position: absolute; margin: 0; }
.theme-show .sky { inset: 0; }
.sky-day { background: linear-gradient(#4aa8ec, #bfe6ff); }
.sky-dusk { background: linear-gradient(#5b4a9b 0%, #e8708a 55%, #ffb25c 100%); opacity: 0; }
.sky-night { background: linear-gradient(#050826, #1d2456); opacity: 0; }
.stars {
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle at 12% 18%, #fff 1.5px, transparent 2px), radial-gradient(circle at 27% 40%, #fff 1px, transparent 1.5px),
    radial-gradient(circle at 44% 12%, #fff 1.5px, transparent 2px), radial-gradient(circle at 63% 30%, #fff 1px, transparent 1.5px),
    radial-gradient(circle at 78% 15%, #fff 2px, transparent 2.5px), radial-gradient(circle at 88% 42%, #fff 1px, transparent 1.5px),
    radial-gradient(circle at 6% 50%, #fff 1px, transparent 1.5px), radial-gradient(circle at 54% 48%, #fff 1px, transparent 1.5px),
    radial-gradient(circle at 35% 25%, #fff 1px, transparent 1.5px), radial-gradient(circle at 95% 8%, #fff 1.5px, transparent 2px);
}
/* The sun sits at the top of a wheel and the moon at the bottom; the wheel turns around
   the middle of the horizon. */
.wheel { left: 50%; top: 68%; width: 0; height: 0; }
.sun, .moon { position: absolute; width: 18cqw; height: 18cqw; margin: -9cqw; border-radius: 50%; }
.theme-show { container-type: inline-size; }
.sun { top: -46cqw; background: #ffe04a; box-shadow: 0 0 6cqw 2cqw rgba(255, 220, 80, 0.7); }
.moon {
  top: 46cqw;
  width: 13cqw; height: 13cqw; margin: -6.5cqw;
  background: radial-gradient(circle at 30% 35%, #cfcdb8 12%, transparent 13%),
    radial-gradient(circle at 65% 60%, #cfcdb8 9%, transparent 10%), #f6f3dc;
  box-shadow: 0 0 4cqw rgba(246, 243, 220, 0.5);
}
.hill { border-radius: 50% 50% 0 0; }
.hill-back { left: -20%; right: 30%; top: 62%; bottom: -30%; background: #6fae4a; }
.hill-front { left: 25%; right: -25%; top: 70%; bottom: -30%; background: #4f9a3a; }
/* A creamer cup on the hill, watching. */
.cup {
  left: 66%; top: 59%; width: 8cqw; height: 7cqw;
  background: #fbfbf6;
  clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
}
.cup-lid { left: 0; right: 0; top: 0; height: 22%; background: #d9a441; position: absolute; }
.caption {
  left: 6%; right: 6%; top: 8%;
  font: bold 5.5cqw/1.2 system-ui, sans-serif; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  opacity: 0;
}

.sunset .wheel { animation: wheel-set var(--t) ease-in-out forwards; }
.sunrise .wheel { animation: wheel-rise var(--t) ease-in-out forwards; }
@keyframes wheel-set { 0% { transform: rotate(-30deg); } 55% { transform: rotate(90deg); } 100% { transform: rotate(125deg); } }
@keyframes wheel-rise { 0% { transform: rotate(-125deg); } 45% { transform: rotate(-90deg); } 100% { transform: rotate(30deg); } }

.sunset .sun, .sunset .sky-dusk, .sunset .sky-night, .sunset .stars, .sunset .hill, .sunset .cup,
.sunrise .sun, .sunrise .sky-dusk, .sunrise .sky-night, .sunrise .stars, .sunrise .hill, .sunrise .cup {
  animation-duration: var(--t);
  animation-timing-function: linear;
  animation-fill-mode: both;
}
.sunrise .sun, .sunrise .sky-dusk, .sunrise .sky-night, .sunrise .stars, .sunrise .hill, .sunrise .cup {
  animation-direction: reverse;
}
.theme-show .sun { animation-name: sun-color; }
.theme-show .sky-dusk { animation-name: dusk; }
.theme-show .sky-night { animation-name: night; }
.theme-show .stars { animation-name: stars; }
.theme-show .hill-back { animation-name: hill-back; }
.theme-show .hill-front { animation-name: hill-front; }
.theme-show .cup { animation-name: cup; }
@keyframes sun-color {
  0% { background: #ffe04a; box-shadow: 0 0 6cqw 2cqw rgba(255, 220, 80, 0.7); }
  50%, 100% { background: #ff5a2a; box-shadow: 0 0 8cqw 3cqw rgba(255, 110, 50, 0.6); }
}
@keyframes dusk { 0%, 15% { opacity: 0; } 50% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes night { 0%, 45% { opacity: 0; } 80%, 100% { opacity: 1; } }
@keyframes stars { 0%, 60% { opacity: 0; } 90%, 100% { opacity: 1; } }
@keyframes hill-back { 0%, 20% { background: #6fae4a; } 50% { background: #5d6b3a; } 85%, 100% { background: #1c2a2a; } }
@keyframes hill-front { 0%, 20% { background: #4f9a3a; } 50% { background: #4a5a30; } 85%, 100% { background: #142020; } }
@keyframes cup { 0%, 20% { background: #fbfbf6; } 85%, 100% { background: #6d7290; } }

.sunset .caption-night, .sunrise .caption-day { animation: caption var(--t) ease-out both; }
@keyframes caption { 0%, 70% { opacity: 0; transform: translateY(-20%); } 85%, 100% { opacity: 1; transform: none; } }

/* Icon-only copy button beside the invite link: the icon sits on the text's baseline. */
button.copy svg {
  display: block;
}
button.copy {
  vertical-align: middle;
}