/* Central Time */

/* Outfit Light, subset to the characters this page actually shows and pinned
   to weight 300. SIL Open Font License, see OFL-Outfit.txt. */
@font-face {
  font-family: 'Outfit';
  src: url('outfit-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: block;
}

:root {
  --bg: #fff;
  --fg: #444;
  --dim: #d2d2d2;
  --gap: 0.55em;
  --roll: 340ms; /* keep in step with DURATION in cst.js */

  /* Set by cst.js: 0 through the day, 1 in the small hours, ramped either
     side of that. Everything visible is drawn through it. */
  --night: 0;
  --fade: calc(var(--night) * 55%);
  --warm: var(--fg); /* light mode gets no tint, so the mix is a no-op */

  --ink: var(--fg);
  --ghost: var(--dim);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #444;
    --fg: #eee;
    --dim: #666;
    --warm: #ffcf9a;
  }
}

/* Overnight the values sink toward the background and, in the dark, warm up
   a little, the way a bedside clock does. */
@supports (color: color-mix(in srgb, red, blue)) {
  :root {
    --ink: color-mix(in srgb,
      color-mix(in srgb, var(--fg), var(--warm) calc(var(--night) * 30%)),
      var(--bg) var(--fade));
    --ghost: color-mix(in srgb,
      color-mix(in srgb, var(--dim), var(--warm) calc(var(--night) * 22%)),
      var(--bg) var(--fade));
  }
}

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

html {
  min-height: 100%;
  min-height: -webkit-fill-available;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  padding-bottom: 5rem;
  background: var(--bg);
  color: var(--ink);
  font: 300 18pt/1 'Outfit', Helvetica, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  text-transform: uppercase;
  -webkit-text-size-adjust: 100%;
}

/* A screen showing the same glyphs in the same pixels for months will keep
   them. Nothing here sits still: the whole face wanders about half a line
   over forty minutes, which no one will ever catch happening. */
#clock {
  margin: 0 auto;
  text-align: center;
  animation: drift 2400s linear infinite;
}

@keyframes drift {
  0%   { transform: translate(-0.3em, -0.2em); }
  25%  { transform: translate(0.3em, -0.2em); }
  50%  { transform: translate(0.3em, 0.2em); }
  75%  { transform: translate(-0.3em, 0.2em); }
  100% { transform: translate(-0.3em, -0.2em); }
}

.wrapper {
  width: 90%;
  margin: 0 auto;
  padding: 2px 0;
}

/* Three values sitting side by side. The strip slides as a unit, so values
   never animate in place and never overlap each other. */
.strip {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: var(--gap);
}

.cell {
  display: block;
  white-space: nowrap;
  color: var(--ghost);
  transition: color var(--roll) linear;
}

.selected { color: var(--ink); }

/* The arriving value waits just off the right edge, out of the flex flow, so
   adding it does not shove the row sideways before the slide begins. */
.arriving {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: var(--gap);
}

.title {
  font-size: 30pt;
}

.title .word {
  display: block;
  width: 100%;
  color: var(--ink);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Both controls live in a bar pinned to the bottom of the viewport. The bar
   itself ignores the pointer so it never sits on top of the clock. */
.controls {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.2rem;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}

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

/* Twelve or twenty four hour, centred. */
#format {
  display: block;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ghost);
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 0.42em;
  letter-spacing: 0.08em;
  color: var(--ghost);
  cursor: pointer;
  transition: border-color var(--roll) linear;
}

#format span {
  display: inline-block;
  padding: 0.65em 1.1em;
  border-radius: 999px;
  transition: color var(--roll) linear;
}

#format .active { color: var(--ink); }
#format:focus-visible { outline: 1px solid var(--ghost); outline-offset: 4px; }

.hour24 #meridiems { display: none; }

/* Keep the screen on. Sits out of the way until you touch something. */
#awake {
  position: absolute;
  right: 1.2rem;
  padding: 0.6em 0.2em;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.5em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ghost);
  cursor: pointer;
  opacity: 0;
  transition: opacity 400ms linear, color var(--roll) linear;
}

#awake.on { color: var(--ink); opacity: 0.45; }
body.handled #awake { opacity: 1; }
#awake:hover { color: var(--ink); }
#awake:focus-visible { opacity: 1; outline: 1px solid var(--ghost); outline-offset: 4px; }
#awake[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  #awake { transition: none; }
}

/* Narrow screens show the current value only, so there is no wheel. */
@media only screen and (max-width: 479px) {
  .prev, .next { display: none; }
  .cell { transition: none; }
}

@media only screen and (min-width: 480px) {
  #clock { margin: 20px auto; }
  .wrapper { padding: 10px 0; }
  .title { font-size: 28pt; }
  .title .word { display: inline; width: auto; }
  .title .word + .word::before { content: '\00a0'; }
}

@media only screen and (min-width: 600px) {
  body { font-size: 20pt; }
  .title { font-size: 36pt; }
}

@media only screen and (min-width: 800px) {
  body { font-size: 24pt; }
  .title { font-size: 42pt; }
}

@media only screen and (min-width: 992px) {
  .title { font-size: 60pt; }
}

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