/* play.css — experimental layer (paint mode · greeting · spotify · audio doodle).
   Kept separate so it's easy to keep or throw away. */

/* ── 1. PAINT MODE — the mylesdoodles palette (from the portrait) ───────── */
html[data-paint="on"] {
  --paper:   #1c6f5e;   /* teal canvas   */
  --paper-2: #195e50;
  --ink:     #f7f0e0;   /* cream ink     */
  --ink-soft:#e9dec6;
  --muted:   #9fc1b6;
  --line:    rgba(247,240,224,.22);
  --accent:  #ff5c8a;   /* hot pink      */
  --accent-d:#ffd23f;   /* yellow        */
}
html[data-paint="on"] body { background: var(--paper); }
html[data-paint="on"] .hero__h em { color: var(--accent-d); font-style: italic; }
html[data-paint="on"] .sound__manifesto em { color: var(--accent-d); }  /* "mylesdoodles" echoes the yellow "systems" */
html[data-paint="on"] .block--invert .block__sub .mono { color: var(--accent-d); }  /* the other "mylesdoodles" (subtitle) too */
html[data-paint="on"] .accent { color: var(--accent-d); }
html[data-paint="on"] .wordmark__dot { background: var(--accent-d); }
html[data-paint="on"] .hero__portrait img {
  box-shadow: 14px 14px 0 -1px var(--accent), 28px 28px 0 -1px var(--accent-d);
}
html[data-paint="on"] .hero__portrait figcaption { margin-top: 2.6rem; }  /* clear the yellow offset band */
/* the Sound band already IS the paint-mode teal, so its bg matches the flooded
   screen. In paint mode, also sync its text + accents to the paint palette (its
   teal bg stays, via --ink from the base rule) so it's fully unified with the
   rest. In regular dark mode it keeps its vermilion accent. */
html[data-paint="on"] .block--invert {
  --paper: #f7f0e0; --paper-2: #195e50; --ink-soft: #e9dec6;
  --muted: #9fc1b6; --line: rgba(247, 240, 224, .22);
  --accent: #ff5c8a; --accent-d: #ffd23f;
}
html[data-paint="on"] .seed--published:hover { color: #10231f; }
/* paint toggle button */
.paint {
  border: 1px solid var(--line); background: transparent;
  width: 2rem; height: 2rem; border-radius: 50%; cursor: pointer;
  font-size: .9rem; line-height: 1; display: grid; place-items: center;
  transition: transform .4s, border-color .2s; padding: 0;
}
.paint:hover { transform: rotate(-12deg) scale(1.08); border-color: var(--accent); }
html[data-paint="on"] .paint { border-color: var(--accent-d); }

/* ── 2. POLYGLOT GREETING ───────────────────────────────────────────────── */
.greeting {
  display: flex; align-items: baseline; gap: .6rem;
  margin-bottom: 1.2rem; min-height: 2.2rem;
}
.greeting__word {
  font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 500; color: var(--ink); line-height: 1;
  transition: opacity .35s ease, transform .35s ease;
}
.greeting__lang {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
  transition: opacity .35s ease;
}
.greeting.swap .greeting__word { opacity: 0; transform: translateY(6px); }
.greeting.swap .greeting__lang { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .greeting__word, .greeting__lang { transition: none; }
}

/* ── 3. SPOTIFY — "lately on rotation" ──────────────────────────────────── */
.spin {
  margin-top: clamp(2.6rem, 6vh, 4rem);
  padding-top: clamp(1.8rem, 4vh, 2.6rem);
  border-top: 1px solid color-mix(in srgb, var(--paper) 16%, transparent);
}
.spin__label {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: color-mix(in srgb, var(--paper) 70%, transparent);
  margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem;
}
.spin__dot { width: .5rem; height: .5rem; border-radius: 50%; background: #1db954; }
.spin__dot--idle { background: var(--muted); }
.spin__list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: .7rem; grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) { .spin__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .spin__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.spin__row {
  display: flex; align-items: center; gap: .8rem; text-decoration: none;
  padding: .4rem; border-radius: 8px; transition: background .2s;
  color: inherit; min-width: 0;
}
.spin__row:hover { background: color-mix(in srgb, var(--paper) 7%, transparent); }
.spin__art {
  width: 44px; height: 44px; border-radius: 5px; object-fit: cover; flex: none;
  background: color-mix(in srgb, var(--paper) 10%, transparent);
}
.spin__meta { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.spin__t {
  display: block; max-width: 100%;
  font-family: var(--read); font-size: .95rem; color: var(--paper);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spin__a {
  display: block; max-width: 100%;
  font-family: var(--mono); font-size: .72rem;
  color: color-mix(in srgb, var(--paper) 65%, transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── 5. RISK REGISTER — easter egg behind the hero period ───────────────── */
.accent--egg {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  font: inherit; color: var(--accent); line-height: inherit;
  transition: text-shadow .2s;
}
.accent--egg:hover, .accent--egg:focus-visible {
  outline: none; text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 70%, transparent);
}
.riskmodal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1.2rem; }
.riskmodal[hidden] { display: none; }
.riskmodal__backdrop {
  position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 62%, transparent);
  backdrop-filter: blur(3px); animation: riskfade .2s ease;
}
.riskmodal__card {
  position: relative; z-index: 1; width: min(640px, 100%);
  max-height: 86vh; overflow: auto;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-top: 3px solid var(--accent);
  border-radius: 8px; padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: 0 30px 80px rgba(0,0,0,.35); animation: riskpop .25s ease;
}
@keyframes riskfade { from { opacity: 0; } }
@keyframes riskpop { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.riskmodal__x {
  position: absolute; top: .8rem; right: 1rem; background: none; border: none;
  font-size: 1.5rem; line-height: 1; color: var(--muted); cursor: pointer; padding: .2rem;
}
.riskmodal__x:hover { color: var(--accent); }
.riskmodal__kicker {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .5rem;
}
.riskmodal__h {
  font-family: var(--serif); font-weight: 500; font-size: clamp(1.7rem, 4vw, 2.3rem);
  letter-spacing: -.02em; margin-bottom: 1.3rem;
}
.riskmodal__t { width: 100%; border-collapse: collapse; font-size: .9rem; }
.riskmodal__t th {
  text-align: left; font-family: var(--mono); font-size: .64rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-d); padding: 0 .6rem .5rem 0;
  border-bottom: 1.5px solid var(--line);
}
.riskmodal__t td {
  padding: .6rem .6rem .6rem 0; border-bottom: 1px solid var(--line);
  vertical-align: top; color: var(--ink-soft);
}
.riskmodal__t td:first-child { color: var(--ink); }
.riskmodal__foot {
  margin-top: 1.4rem; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .03em; color: var(--muted);
}
@media (max-width: 520px) {
  .riskmodal__t { font-size: .8rem; }
  .riskmodal__t th, .riskmodal__t td { padding-right: .45rem; }
}

/* ── 4. THE CLIP — one mylesdoodles take, drawn from the recording ───────────
   ⚠️ The waveform is the section's structure, not an ornament beside it. The
   bars are the RMS envelope of assets/mylesdoodles.mp3, generated into the
   HTML by `sound_peaks.py` — rerun it if the clip ever changes. They used to
   be 28 spans animated by Math.random(), which is a graph of nothing; the
   band's empty space was partly the fault of that strip being too small and
   too fake to hold any of it. */
/* The column is bottom-justified, so whatever height the portrait leaves over
   collects ABOVE the deck as breathing room under the intro line.
   ⚠️ `align-items: flex-end` on the deck, and the wave has its own height —
   an earlier pass stretched the deck to fill the column and capped the wave
   inside it, which parked the wave at the top of the deck and the button at
   the bottom, 55px apart. The button has to stand on the waveform's baseline. */
.doodle { min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.doodle__deck { display: flex; align-items: flex-end; gap: clamp(.9rem, 2vw, 1.4rem); }
.doodle__btn {
  flex: none; align-self: flex-end;   /* stands on the waveform's baseline */
  /* sized against the waveform beside it — a 3.1rem disc next to a 5rem wave
     reads as a button with a chart attached, not as one control */
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  cursor: pointer; display: grid; place-items: center; font-size: 1rem;
  line-height: 1; transition: transform .15s;
}
.doodle__btn:hover { transform: scale(1.07); }
/* paper, not accent — an accent ring on an accent disc is not a focus ring */
.doodle__btn:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
/* ⚠️ Short on purpose (Pranish, 2026-08-09: *"the waveform is too big. does
   not really fit the vibe of the website"*). It was ~260px — it filled the
   column height and was the loudest object on a deliberately quiet page. At
   ~4rem it is a wide, quiet instrument instead: the width still gives the
   clip presence and carries the whole envelope, the height no longer shouts.
   It gets its presence from being FULL WIDTH, never from being tall. */
.doodle__wave {
  flex: 1; min-width: 0; cursor: pointer;
  height: clamp(2.9rem, 5.5vh, 4.2rem);
}
.doodle__svg { display: block; width: 100%; height: 100%; }
/* preserveAspectRatio="none" stretches the bars, so they must be square —
   a border-radius would smear into lozenges at wide widths */
.doodle__rest { fill: color-mix(in srgb, var(--paper) 26%, transparent); }
.doodle__played { fill: var(--accent); }
.doodle__wave:hover .doodle__rest { fill: color-mix(in srgb, var(--paper) 38%, transparent); }
.doodle__wave:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

/* the scale under the waveform: where you are, what it is, how long it runs.
   Timecodes are baked in by sound_peaks.py so they are right before the audio
   has loaded a single byte. */
.doodle__scale {
  display: flex; align-items: baseline; gap: 1rem; margin: .7rem 0 0;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .04em;
  color: color-mix(in srgb, var(--paper) 60%, transparent);
}
.doodle__t { flex: none; font-variant-numeric: tabular-nums; }
.doodle__cap { flex: 1; margin: 0; }
.doodle__t--end { text-align: right; }
.doodle.playing .doodle__t:not(.doodle__t--end) { color: var(--accent); }

/* ── started from the drawing: the sound comes out of the guitar ─────────────
   Time runs right→left, from the figure outward. Mirroring the whole svg does
   it in one line — the clip rect still grows in the same direction in user
   space, so the fill sweeps out from the guitar and the bar under the playhead
   is still the audio you are hearing. The scale flips with it, or "0:00" would
   sit at the end the clip finishes on.
   ⚠️ No transition on the flip. A waveform that animates its own mirroring is
   exactly the kind of motion this site does not do; it snaps, silently. */
.doodle--reverse .doodle__svg { transform: scaleX(-1); }
.doodle--reverse .doodle__scale { flex-direction: row-reverse; }
.doodle--reverse .doodle__t--end { text-align: left; }
@media (max-width: 560px) {
  /* the caption is the first thing to go when the line gets tight — the two
     timecodes are the part that has a job */
  .doodle__cap { display: none; }
  .doodle__scale { justify-content: space-between; }
}