/* THE CANDY SHADOWS (templates/public/candy_shadows.html, 2026-10-05). A page
   of its own, in the album cover's colours: violet-black night, candy orange
   and amber, and the taffy twins' pink and blue as the only other accents.
   It loads NO site stylesheet on purpose: it is open while the site is
   locked and wears nothing of the site's. One theme (a carnival is at night),
   so every colour and the body's background are stated here. */
:root {
  --cs-night: #12081c; --cs-plum: #1d0f2b; --cs-plum-2: #2a1638; --cs-line: #45285a;
  --cs-orange: #ff9a3c; --cs-amber: #ffd9a8; --cs-ink: #f3e6d8; --cs-dim: #bfa9c9;
  --cs-pink: #ff8fc7; --cs-blue: #8fd0ff; --cs-lic: #0b0610;
  --cs-display: "Rockwell", "Georgia", "Times New Roman", serif;
  --cs-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--cs-night); }
body.cs {
  margin: 0; color: var(--cs-ink); font: 1rem/1.6 var(--cs-body);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255,154,60,.20), transparent 70%),
    radial-gradient(900px 500px at 85% 20%, rgba(143,208,255,.07), transparent 70%),
    radial-gradient(900px 500px at 10% 30%, rgba(255,143,199,.07), transparent 70%),
    var(--cs-night);
  /* room under the footer for the twins and the strip, so the last of the page can be scrolled clear of them
     (the king's cell and the way back to the gate live down there; 2026-10-08) */
  padding-bottom: calc(19rem + env(safe-area-inset-bottom));
  min-height: 100vh;
}
img { max-width: 100%; height: auto; }
a { color: var(--cs-orange); }
h1, h2 { font-family: var(--cs-display); font-weight: 700; letter-spacing: .02em; margin: 0; }
h2 { color: var(--cs-amber); font-size: 1.5rem; margin-bottom: .6rem; }
.cs-pink { color: var(--cs-pink); } .cs-blue { color: var(--cs-blue); }

/* the arch's thirteen bulbs, some of them out */
.cs-bulbs { display: flex; justify-content: center; gap: clamp(.5rem, 3vw, 1.6rem); padding: 1.2rem 1rem 0; }
.cs-bulbs i { width: .7rem; height: .7rem; border-radius: 50%; background: #ffd27a;
  box-shadow: 0 0 10px 3px rgba(255,190,90,.75); animation: cs-glow 3.2s ease-in-out infinite; }
.cs-bulbs i:nth-child(odd) { animation-delay: 1.1s; }
.cs-bulbs i.out { background: #4a3a52; box-shadow: none; animation: none; }
@keyframes cs-glow { 50% { opacity: .72; } }

.cs-head { text-align: center; padding: 1rem 16px 1.4rem; }
.cs-eyebrow { margin: 0; font-size: .78rem; letter-spacing: .28em; text-transform: uppercase; color: var(--cs-dim); }
.cs-head h1 { font-size: clamp(2.3rem, 9vw, 4.6rem); line-height: 1.05; color: var(--cs-orange);
  text-shadow: 0 2px 0 #7a2e08, 0 0 26px rgba(255,154,60,.45); margin: .3rem 0; }
.cs-sub { margin: 0; color: var(--cs-amber); }

.cs-main { max-width: 1000px; margin: 0 auto; padding: 0 16px; display: grid; gap: 2rem; }
.cs-main > section { background: linear-gradient(180deg, var(--cs-plum-2), var(--cs-plum));
  border: 1px solid var(--cs-line); border-radius: 18px; padding: clamp(1rem, 3vw, 1.6rem); }
.cs-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1.6rem; align-items: center; }
.cs-cover { display: block; width: 100%; border-radius: 12px; border: 3px solid var(--cs-orange); position: relative; z-index: 1;   /* a twin can hide behind it (candy-twins.js) */
  box-shadow: 0 16px 50px rgba(0,0,0,.6); }
.cs-story p { margin: 0 0 .8rem; }
.cs-blurb { color: var(--cs-dim); }

.cs-hint { margin: 0 0 .8rem; color: var(--cs-dim); font-size: .9rem; }
.cs-tracks { list-style: none; margin: 0; padding: 0; counter-reset: cs; }
.cs-track { counter-increment: cs; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: .9rem;
  align-items: center; padding: .6rem .5rem; border-radius: 12px; border-bottom: 1px solid rgba(69,40,90,.6); }
.cs-track:last-child { border-bottom: 0; }
.cs-track.on { background: rgba(255,154,60,.12); }
.cs-play, .cs-bar-btns button { width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 2px solid var(--cs-orange);
  background: var(--cs-lic); color: var(--cs-orange); cursor: pointer; display: grid; place-items: center;
  font-size: 1rem; padding: 0; flex: none; }
.cs-play:hover, .cs-bar-btns button:hover { background: #2a1238; }
.cs-play:focus-visible, .cs-bar-btns button:focus-visible, .cs-btn:focus-visible, #cs-seek:focus-visible,
.cs-lyrics summary:focus-visible, .cs-foot a:focus-visible { outline: 3px solid var(--cs-blue); outline-offset: 2px; }
/* the play triangle and the pause bars, drawn so no font is needed */
.cs-ico { width: 0; height: 0; border-style: solid; border-width: .5rem 0 .5rem .8rem;
  border-color: transparent transparent transparent currentColor; margin-left: .18rem; }
.playing .cs-ico { width: .8rem; height: .95rem; border: 0; margin: 0;
  background: linear-gradient(90deg, currentColor 0 36%, transparent 36% 64%, currentColor 64% 100%); }
.cs-track.on .cs-play { background: var(--cs-orange); color: var(--cs-lic); }
.cs-title { font-family: var(--cs-display); font-size: 1.12rem; color: var(--cs-ink); }
.cs-title::before { content: counter(cs) ". "; color: var(--cs-dim); }
.cs-cap { color: var(--cs-dim); font-size: .88rem; }
.cs-dur { color: var(--cs-dim); font-variant-numeric: tabular-nums; font-size: .9rem; }
.cs-lyrics { margin-top: .3rem; }
.cs-lyrics summary { cursor: pointer; color: var(--cs-orange); font-size: .85rem; width: max-content; }
.cs-words { white-space: pre-line; overflow-wrap: anywhere; color: var(--cs-amber); font-size: .92rem;
  margin: .5rem 0 .2rem; padding-left: .9rem; border-left: 2px solid var(--cs-line);
  -webkit-user-select: none; user-select: none; cursor: default; }   /* view-only, as on the radio page */
/* the section chips: [Verse 1] / [Chorus] as the radio page draws them, in the carnival's colours */
.cs-words .lyric-section { display: inline-block; font-family: var(--cs-body); font-size: .66rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--cs-orange); background: rgba(255,154,60,.12);
  border: 1px solid rgba(255,154,60,.4); border-radius: 999px; padding: .22rem .75rem; margin: .35rem 0 .1rem; }
.cs-track.on .cs-lyrics summary { color: var(--cs-amber); }
.cs-words-btn { border: 2px solid var(--cs-orange); background: var(--cs-lic); color: var(--cs-orange); border-radius: 999px;
  padding: .35rem .8rem; font: 700 .78rem/1.2 var(--cs-body); letter-spacing: .1em; cursor: pointer; min-height: 2.2rem; }
.cs-words-btn[aria-pressed="true"] { background: var(--cs-orange); color: var(--cs-lic); }
/* THE STORYBOOK ON THE SONG ROWS (2026-10-12): the button at the end of a line, and the panel that
   plays a chapter with its words lit — Story Time's read-along in the carnival's colours */
.cs-story-btn { border: 2px solid var(--cs-pink); background: var(--cs-lic); color: var(--cs-pink); border-radius: 999px;
  padding: .35rem .7rem; font: 700 .76rem/1.2 var(--cs-body); letter-spacing: .08em; cursor: pointer; min-height: 2.2rem;
  white-space: nowrap; }
.cs-story-btn:hover { background: #2a1238; }
.cs-story-btn.on { background: var(--cs-pink); color: var(--cs-lic); }
.cs-story-btn:focus-visible { outline: 3px solid var(--cs-blue); outline-offset: 2px; }
.cs-story { margin: 1.2rem 0 0; padding: 1rem 1.1rem 1.2rem; border: 1px solid var(--cs-line); border-radius: 14px;
  background: rgba(11,6,16,.55); }
.cs-story-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.cs-story-note { color: var(--cs-dim); font-size: .9rem; margin: .2rem 0 .8rem; }
.cs-story .page-music { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; padding: .6rem .8rem;
  border: 1px solid var(--cs-line); border-radius: 12px; background: var(--cs-plum); margin-bottom: .6rem; }
.cs-story .pm-play { width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 2px solid var(--cs-orange);
  background: var(--cs-lic); color: var(--cs-orange); cursor: pointer; font-size: 1rem; flex: none; }
.cs-story .page-music.playing .pm-play { background: var(--cs-orange); color: var(--cs-lic); }
.cs-story .pm-info { min-width: 0; flex: 1; }
.cs-story .pm-title { font-family: var(--cs-display); color: var(--cs-ink); }
.cs-story .pm-sub { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cs-dim); }
.cs-story .pm-nav { display: flex; gap: .4rem; }
.cs-story .pm-nav button { border: 1px solid var(--cs-line); background: transparent; color: var(--cs-amber); border-radius: 999px;
  padding: .25rem .55rem; cursor: pointer; font: inherit; }
.cs-story .pm-nav button:disabled { opacity: .4; cursor: default; }
.cs-story .pm-progress { flex-basis: 100%; height: 6px; border-radius: 999px; background: var(--cs-line); cursor: pointer; }
.cs-story .pm-fill { height: 100%; width: 0; background: var(--cs-orange); border-radius: 999px; }
.cs-story .st-follow { display: inline-flex; gap: .45rem; align-items: center; font-size: .85rem; color: var(--cs-dim);
  cursor: pointer; margin-bottom: .6rem; }
.cs-chapter h3 { font-family: var(--cs-display); color: var(--cs-amber); margin: .6rem 0 .4rem; font-size: 1.2rem; }
.cs-chapter p { border-left: 3px solid transparent; padding-left: .8rem; margin: .55rem 0; border-radius: 2px;
  transition: background-color .2s ease, border-color .2s ease; color: var(--cs-ink); }
.cs-chapter .st-dj { color: var(--cs-dim); font-style: italic; }
.cs-chapter .st-who { font-style: normal; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cs-orange); margin-right: .35rem; }
.cs-chapter .st-voice { border-left-color: var(--cs-line); }
.cs-chapter .st-seekable { cursor: pointer; }
.cs-chapter .st-seekable:hover { border-left-color: var(--cs-line); }
.cs-chapter .st-now { border-left-color: var(--cs-orange); background: rgba(255,154,60,.14); }
.cs-ch-cold { color: var(--cs-dim); font-style: italic; }
@media (max-width: 560px) {
  .cs-track { grid-template-columns: auto minmax(0, 1fr) auto; }
  .cs-story-btn { grid-column: 2 / -1; justify-self: start; }
}
.cs-empty { text-align: center; padding: 1.6rem .5rem; color: var(--cs-amber); }
.cs-empty p { margin: .2rem 0; }

.cs-cast ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cs-cast li { background: rgba(11,6,16,.45); border: 1px solid var(--cs-line); border-radius: 12px; padding: .7rem .9rem;
  color: var(--cs-dim); font-size: .93rem; }
.cs-cast li strong { display: block; color: var(--cs-amber); font-family: var(--cs-display); font-size: 1.02rem; }

.cs-book { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 1.6rem; align-items: center; }
.cs-book img { border-radius: 10px; border: 2px solid var(--cs-line); display: block; }
.cs-btn { display: inline-block; padding: .75rem 1.4rem; border-radius: 999px; background: var(--cs-orange);
  color: var(--cs-lic); font-weight: 700; text-decoration: none; min-height: 44px; }

/* AN INTRODUCTION FROM DENNY: his lines dim until he reaches them */
.cs-intro h2, .pv h2 { margin-top: 0; }
.cs-intro-btn, .pv-btn { border: 0; cursor: pointer; font: inherit; font-weight: 700; display: inline-flex; align-items: center; gap: .6rem;
  padding: .75rem 1.4rem; border-radius: 999px; background: var(--cs-orange); color: var(--cs-lic); min-height: 44px; }  /* the carnival's pill (.cs-btn), which the shared partial's button does not carry */
.cs-intro-btn .cs-ico, .pv-btn .pv-ico { width: 0; height: 0; border-style: solid; border-width: .45rem 0 .45rem .75rem; border-color: transparent transparent transparent currentColor; }
.cs-intro-btn[aria-pressed="true"] .cs-ico, .pv-btn[aria-pressed="true"] .pv-ico { width: .7rem; height: .8rem; border: 0; border-left: .25rem solid currentColor; border-right: .25rem solid currentColor; }
.cs-intro-text, .pv-text { margin: 1.2rem 0 0; }
.cs-intro-line, .pv-line { color: var(--cs-dim); opacity: .45; transition: opacity .4s ease, color .4s ease; margin: 0 0 .8rem; line-height: 1.6; }
.cs-intro-line.said, .pv-line.said { opacity: 1; }
.cs-intro-line.now, .pv-line.now { opacity: 1; color: var(--cs-amber); }
.cs-intro-note, .pv-note { margin: .8rem 0 0; }
.pv-hint { margin: 0 0 .8rem; color: var(--cs-dim); font-size: .9rem; }

.cs-foot { max-width: 1000px; margin: 2rem auto 0; padding: 0 16px 1rem; display: flex; gap: 1rem; flex-wrap: wrap;
  justify-content: space-between; color: var(--cs-dim); font-size: .88rem; }

/* the player: a strip of black licorice along the bottom */
.cs-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(.6rem + env(safe-area-inset-bottom));
  width: min(1000px, calc(100% - 20px)); display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  gap: .8rem; align-items: center; padding: .6rem .8rem; border-radius: 16px; background: rgba(11,6,16,.96);
  border: 2px solid var(--cs-orange); box-shadow: 0 10px 40px rgba(0,0,0,.7); z-index: 5; }
.cs-bar[hidden] { display: none; }
#cs-bar-art { width: 3rem; height: 3rem; border-radius: 8px; object-fit: cover; display: block; }
.cs-bar-title { font-family: var(--cs-display); color: var(--cs-amber); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-bar-seek { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .5rem; align-items: center;
  font-size: .78rem; color: var(--cs-dim); font-variant-numeric: tabular-nums; }
#cs-seek { width: 100%; accent-color: var(--cs-orange); height: 1.4rem; }
.cs-bar-btns { display: flex; gap: .4rem; }
.cs-bar-btns button { width: 2.6rem; height: 2.6rem; }
.cs-keep { font-size: .78rem; color: var(--cs-dim); display: flex; gap: .3rem; align-items: center; white-space: nowrap; }

@media (max-width: 720px) {
  body.cs { padding-bottom: calc(15rem + env(safe-area-inset-bottom)); }
  .cs-hero, .cs-book { grid-template-columns: minmax(0, 1fr); }
  .cs-bar { grid-template-columns: minmax(0, 1fr) auto auto; gap: .5rem; }
  #cs-bar-art, .cs-keep { display: none; }
  .cs-words-btn { padding: .35rem .55rem; }
  .cs-bar-btns button { width: 2.75rem; height: 2.75rem; }
  .cs-play { width: 2.75rem; height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) { .cs-bulbs i { animation: none; } }

/* THE BOOK OPENS (candy-book.js, 2026-10-08): the cover is a page that turns to show the contents */
.cs-flip { perspective: 1400px; }
.cs-flip-in { position: relative; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.4, .1, .2, 1); }
.cs-flip.open .cs-flip-in { transform: rotateY(-180deg); }
.cs-page { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cs-page-front { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; border-radius: 10px; }
.cs-page-front:focus-visible { outline: 3px solid var(--cs-blue); outline-offset: 3px; }
.cs-page-tip { position: absolute; left: 50%; bottom: .8rem; transform: translateX(-50%); padding: .35rem .8rem; border-radius: 999px;
  background: rgba(11,6,16,.85); color: var(--cs-amber); font: 700 .74rem/1.2 var(--cs-body); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.cs-page-back { position: absolute; inset: 0; transform: rotateY(180deg); background: #fff6ea; color: #2a1638; border-radius: 10px;
  border: 2px solid var(--cs-line); padding: .8rem 1rem; overflow: auto; display: flex; flex-direction: column; }
.cs-page-back h3 { margin: 0 0 .5rem; font-family: var(--cs-display); color: #7a2e08; letter-spacing: .12em; text-transform: uppercase; font-size: 1rem; text-align: center; }
.cs-toc { margin: 0; padding: 0 0 0 1.4rem; flex: 1; font-size: .84rem; line-height: 1.3; columns: 1; }
.cs-toc button { background: transparent; border: 0; padding: .15rem 0; font: inherit; color: #2a1638; cursor: pointer; text-align: left;
  border-bottom: 1px dotted #c9b8d6; width: 100%; min-height: 26px; }
.cs-toc button:hover, .cs-toc button:focus-visible { color: #b5440f; outline: none; }
.cs-toc-empty { color: #6a5a7a; flex: 1; }
.cs-page-btns { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; align-items: center; }
.cs-page-close { background: transparent; border: 0; color: #b5440f; text-decoration: underline; cursor: pointer; font: inherit; min-height: 44px; padding: 0 .3rem; }
.cs-color .cs-page-close { color: var(--cs-orange); }
@media (prefers-reduced-motion: reduce) { .cs-flip-in { transition: none; } }

/* A PAGE TO COLOR (candy-book.js): paint under, the line art over it in multiply, so the lines are never lost */
.cs-book .cs-color { grid-column: 1 / -1; margin-top: .5rem; border-top: 1px solid var(--cs-line); padding-top: 1rem; }
.cs-color[hidden] { display: none; }
.cs-color-tools { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; margin-bottom: .8rem; }
.cs-swatches { display: flex; flex-wrap: wrap; gap: .4rem; }
.cs-swatch { width: 34px; height: 34px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; padding: 0; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.cs-swatch[aria-pressed="true"] { border-color: var(--cs-ink); transform: scale(1.12); }
.cs-swatch:focus-visible { outline: 3px solid var(--cs-blue); outline-offset: 2px; }
.cs-color-btns { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.cs-color-btns button, .cs-color-btns select, .cs-color-btns a { min-height: 40px; border-radius: 999px; border: 2px solid var(--cs-orange);
  background: var(--cs-lic); color: var(--cs-orange); font: 700 .8rem var(--cs-body); padding: .4rem .9rem; cursor: pointer; text-decoration: none; }
.cs-color-btns [aria-pressed="true"] { background: var(--cs-orange); color: var(--cs-lic); }
.cs-color-btns button:focus-visible, .cs-color-btns select:focus-visible, .cs-color-btns a:focus-visible { outline: 3px solid var(--cs-blue); outline-offset: 2px; }
.cs-color-btns .cs-page-close { border: 0; background: transparent; min-height: 40px; }
.cs-color-stage { position: relative; max-width: 656px; margin: 0 auto; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,.6); }
.cs-color-stage canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }
.cs-color-stage canvas[data-tool="fill"] { cursor: cell; }
.cs-color-stage img { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply; pointer-events: none; border: 0; border-radius: 0; }

/* THE BOOK'S TWO SHOPS (2026-10-08): Etsy and Amazon side by side, Amazon "soon" until its link is set */
.cs-buy { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .4rem 0 0; }
.cs-buy .cs-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; }
.cs-buy-sub { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.cs-soon { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-height: 44px; padding: .55rem 1.3rem;
  border-radius: 999px; border: 2px dashed var(--cs-line); color: var(--cs-dim); font-weight: 700; line-height: 1.2; }