/* Colours and the few things Tachyons doesn't cover. Palette after nacreous clouds:
   deep sky blue, pastel iridescence, near-black. */
:root {
  --paper: #f3f6fd;
  --ink: #0f1830;
  --accent: #1f5fd0;
  --accent-soft: #e3ebfb;
  --sky-top: #153f9e;
  --sky-low: #2f74e0;
  --nacre: linear-gradient(100deg, #ffbbdc, #ffd8a4, #c8f2b8, #b2e2ff, #cab2ff, #ffbbdc);
  --good: #15803d;
  --good-soft: #e9f7ee;
  --rec-glow: #f7925a;  /* sunset: apricot, coral, rose, for recording */
  --rec: #ec5d4f;
  --rec-deep: #d9466f;
}
.bg-paper { background: var(--paper); }
.ink, .hover-ink:hover { color: var(--ink); }
.accent { color: var(--accent); }
.bg-accent { background: var(--accent); }
.bg-accent-soft { background: var(--accent-soft); }
.b--accent { border-color: var(--accent); }
.good { color: var(--good); }
.bg-good-soft { background: var(--good-soft); }
.b--good { border-color: var(--good); }
.tnum { font-variant-numeric: tabular-nums; }
.z-999 { z-index: 999; }
#waiting.show { display: flex; }

.btn { cursor: pointer; border: 0; font: inherit; }
.btn:disabled { opacity: .4; cursor: default; }
.btn:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.rec-dot { width: .75rem; height: .75rem; border-radius: 50%; background: #d4d4d4; }
.recording .rec-dot { background: var(--rec); animation: pulse 1s infinite; }
.pulse { animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: .35; } }

.cal { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); gap: 3px; }
.cal span { width: 14px; height: 14px; border-radius: 3px; background: #e2e8f4; }
.cal .l1 { background: #b9cff5; }
.cal .l2 { background: #6b9ae6; }
.cal .l3 { background: var(--accent); }
.cal .future { visibility: hidden; }

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .chev { transform: rotate(90deg); }
.chev { display: inline-block; transition: transform .15s; }
.hover-b--accent:hover, .own-option:focus-within { border-color: var(--accent); }
.own-option input:focus-visible { outline: none; }

/* The sky: the day's pixel clouds (sky.py) as masks over drifting nacre.
   Each cloud image holds three frames stacked; stepping through them shifts the dots. */
.sky { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--sky-top), var(--sky-low)); }
.sky > nav { position: relative; z-index: 1; }
.sky > nav a { text-shadow: 0 1px 2px rgba(10, 30, 80, .6); }
.cloud {
  position: absolute; width: var(--w); height: var(--h); pointer-events: none;
  background: var(--nacre); background-size: 300% 100%;
  -webkit-mask: var(--shape) no-repeat 0 0 / var(--w) calc(var(--h) * 3);
  mask: var(--shape) no-repeat 0 0 / var(--w) calc(var(--h) * 3);
  animation: nacre 24s linear infinite alternate, boil 2.1s steps(3) infinite, drift 32s ease-in-out infinite alternate;
}
/* High clouds in a band above the title row and a low one in a band below, so the text
   stays clear; each cloud is centred in its band. Two clouds below medium width. */
.sky { height: calc(var(--band) * 2 + 56px); }
.sky > nav { padding-top: calc(var(--band) + 8px); }
.cloud.c1 { left: -160px; top: calc((var(--band) - var(--h)) / 2); }
.cloud.c2 { left: calc(50% - 300px); bottom: calc((var(--band) - var(--h)) / 2); opacity: .85; animation-delay: -8s, -0.7s, -11s; }
.cloud.c3 { left: calc(100% - 330px); top: calc((var(--band) - var(--h)) / 2); opacity: .9; animation-delay: -16s, -1.4s, -22s; }
@media (max-width: 60em) {
  .cloud.c2 { left: calc(100% - 420px); }
  .cloud.c3 { display: none; }
}
@media (max-width: 30em) {
  .cloud.c1 { left: -190px; }
  .cloud.c2 { left: calc(100% - 380px); }
}
@keyframes nacre { to { background-position: 100% 0; } }
@keyframes boil {
  to { -webkit-mask-position: 0 calc(var(--h) * -3); mask-position: 0 calc(var(--h) * -3); }
}
@keyframes drift { from { transform: translateX(-18px); } to { transform: translateX(18px); } }
.still .cloud { animation-play-state: paused; }
.sky-switch {
  position: absolute; right: 12px; bottom: 10px; z-index: 1; width: 34px; height: 18px; padding: 0;
  border: 0; border-radius: 9px; background: rgba(255, 255, 255, .25); cursor: pointer;
}
.sky-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--nacre); background-size: 300% 100%; transition: transform .15s;
}
.sky-switch[aria-checked="true"]::after { transform: translateX(16px); }
.sky-switch[aria-checked="false"] { background: rgba(255, 255, 255, .12); }
.sky-switch:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.brand { letter-spacing: .02em; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.hover-bg-white-20:hover { background-color: rgba(255, 255, 255, .2); }

/* The microphone (_mic.html): a big Allow box while it asks, then one line, red when it can't record.
   Record stays hidden until there's a microphone to record with. */
.mic-ask, .mic[data-state="ask"] .mic-line, .mic[data-state="ask"] ~ [data-rec="idle"] { display: none; }
.mic[data-state="ask"] .mic-ask { display: block; }
.mic-line { color: #6b7280; }
.mic[data-state="problem"] .mic-line { padding: .6rem .75rem; border-radius: 8px; background: #fdecec; color: #8a1c1c; }
.mic-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.mic[data-state="ok"] .mic-dot { background: var(--good); }
.mic[data-state="problem"] .mic-dot { background: #dc2626; }
.meter { height: 6px; border-radius: 3px; overflow: hidden; background: rgba(0, 0, 0, .08); }
.meter span { display: block; height: 100%; width: 0; background: var(--good); }
dialog.mic-panel { width: min(28rem, calc(100vw - 2rem)); color: var(--ink); }
dialog.mic-panel::backdrop { background: rgba(15, 24, 48, .45); }
.underline-hover:hover { text-decoration: underline; }

/* The recorder (_recorder.html) and the last take's waveform (session.html). */
.rec-btn { background: linear-gradient(100deg, var(--rec-glow), var(--rec) 45%, var(--rec-deep)); }
.region {
  display: block; width: 100%; height: 128px; cursor: pointer;
  /* sunset: dusk violet, with a peach-to-pink wave */
  --region-top: #3a2a52; --region-bottom: #251c3d; --region-head: #5b4380;
  --region-wave: #7a6390; --region-glow: #ffd8a4, #ffbbdc;
  --region-grid: rgba(255, 220, 240, .08); --region-ruler: #8a6f8f;
  --region-playhead: #fff; --region-live-head: #ffd8a4;
}
.steps { list-style: none; counter-reset: step; }
.steps > li { counter-increment: step; position: relative; padding-left: 2.5rem; }
.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: -.1rem; width: 1.75rem; height: 1.75rem;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}