/* =====================================================================
   Whacky Pomo skin -- opt-in via body[data-skin="whackypomo"], toggled
   from the same Setup tab as the retro BIOS skin (timer-skin.js). Scoped
   entirely under that selector (plus a min-width guard around the grid
   rewrite, see below), so with the attribute absent this stylesheet has
   zero effect. Only ever loaded by index.html.

   Direction: Memphis-Milano (Sottsass/Memphis Group, early-80s-early-90s
   postmodern furniture -- geometric primitives, clashing color blocks)
   crossed with Wacky Pomo (early-90s-mid-2000s kids-marketing postmodernism
   -- "very bright purples, acidic greens, saturated yellows, oranges, and
   teals... jammed together with little regard for traditional harmony",
   "jagged zigzags, blobs, spirals, squiggles... that look like oversized
   toys or game pieces", "exaggerated drop shadows... 3D extrusions that
   make [type] feel like physical toys", fake sci-fi consoles/tubes/panels).

   Fonts: self-hosted Bungee / Bungee Shade / Space Grotesk (Google Fonts,
   OFL -- see fonts/whackypomo/ATTRIBUTION.txt). Bungee Shade has a drop
   shadow baked into the glyphs themselves, which happens to be exactly
   what the Wacky Pomo reference describes -- used sparingly for the
   biggest expressive moments. Space Grotesk stays reserved for the timer
   digits and clock: the one legibility-critical readout on the page, kept
   in a clean geometric face on purpose while everything around it goes
   loud.

   Structural safety note: none of speaker/date panel are read via
   getBoundingClientRect anywhere in the JS, so they could technically be
   rotated directly -- but #timer2 (slides.js measures its PDF canvas via
   getBoundingClientRect) and #agendaTimer (the pairing widget and the
   Setup tab both anchor their popups off wrap.getBoundingClientRect())
   can't be, without skewing that math. Rather than special-case two of
   four panels, EVERY real panel stays perfectly axis-aligned; all tilt
   lives in decorative ::before/::after layers (never measured by
   anything) and in box-shadow (paint-only, never affects layout/
   getBoundingClientRect regardless of what it's on).
   ===================================================================== */

@font-face {
  font-family: 'Bungee';
  src: url('./fonts/whackypomo/Bungee-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bungee Shade';
  src: url('./fonts/whackypomo/BungeeShade-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('./fonts/whackypomo/SpaceGrotesk-Variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

body[data-skin="whackypomo"] {
  /* ---- Palette ("Slime Console") ---- */
  --primary-color: #2B2A33;         /* Panel Graphite -- base background */
  --primary-font: 'Bungee', var(--monospace-font), sans-serif;
  --monospace-font: 'Space Grotesk', monospace;
  --border-color: #141318;
  --hover-bg: #3c3a47;
  --focus-outline: #FFE23D;

  --wp-graphite: #2B2A33;
  --wp-ink: #141318;
  --wp-green: #9FFF3D;    /* Slime Green */
  --wp-purple: #8A3FFC;   /* Zap Purple */
  --wp-orange: #FF7A1A;   /* Traffic Orange */
  --wp-yellow: #FFE23D;   /* Sunbeam Yellow */
  --wp-teal: #2FE0D0;     /* Bubble Teal */
  --wp-paper: #F5F3EE;

  /* ---- Themable hooks consumed by timer-remote-sync.js /
     timer-remote-shared.js / timer-skin.js (each already has a
     var(--x, literal) fallback). ---- */
  --tr-widget-idle-bg: var(--wp-ink);
  --tr-widget-idle-shadow: 4px 4px 0 var(--wp-purple);
  --tr-panel-bg: var(--wp-ink);
  --tr-panel-shadow: 6px 6px 0 var(--wp-teal);
  --tr-flash-bg: var(--wp-purple);
  --tr-widget-fg: var(--wp-paper);
  --tr-badge-bg: var(--wp-orange);
  --tr-badge-fg: var(--wp-ink);
  --tr-action-bg: var(--wp-teal);
  --tr-paired-pulse-mid: rgba(159, 255, 61, 0.55);
  --tr-paired-pulse-shadow: rgba(159, 255, 61, 0.7);
  --tr-following-pulse-mid: rgba(255, 122, 26, 0.55);
  --tr-following-pulse-shadow: rgba(255, 122, 26, 0.7);
  --tr-recovery-bg: rgba(94, 12, 30, 0.97);
  --tr-recovery-font: 'Bungee', sans-serif;

  background-color: var(--wp-graphite);
  background-image:
    radial-gradient(rgba(255, 226, 61, 0.16) 2.5px, transparent 2.5px),
    radial-gradient(rgba(47, 224, 208, 0.14) 2.5px, transparent 2.5px);
  background-size: 46px 46px, 46px 46px;
  background-position: 0 0, 23px 23px;
  color: var(--wp-paper);
}

body[data-skin="whackypomo"] .timer-label,
body[data-skin="whackypomo"] .agenda-prefix-line,
body[data-skin="whackypomo"] label,
body[data-skin="whackypomo"] button {
  font-family: 'Bungee', sans-serif;
  letter-spacing: 0.02em;
}

/* Nudged right a bit off the panel's own left edge, purely cosmetic. */
body[data-skin="whackypomo"] .agenda-prefix-line {
  margin-left: 16px;
}

body[data-skin="whackypomo"] #agendaTimer p {
  margin-left: 16px;
}

/* ---- Panels: stay perfectly axis-aligned (see the structural safety
   note up top) -- personality comes from color, chunky rounded outlines,
   and hard offset shadows, not rotation. ---- */

body[data-skin="whackypomo"] #speakerTimer,
body[data-skin="whackypomo"] #timer2,
body[data-skin="whackypomo"] #agendaTimer {
  position: relative;
  border-radius: 22px;
  outline: 5px solid var(--wp-ink);
  outline-offset: -5px;
  background-color: var(--wp-graphite);
}

body[data-skin="whackypomo"] #speakerTimer {
  box-shadow: 10px 10px 0 var(--wp-teal);
}

body[data-skin="whackypomo"] #agendaTimer {
  box-shadow: 10px 10px 0 var(--wp-orange);
}

body[data-skin="whackypomo"] .timer {
  font-family: 'Space Grotesk', monospace;
  font-weight: 700;
  color: var(--wp-yellow);
  text-shadow: 4px 4px 0 var(--wp-purple);
}

body[data-skin="whackypomo"] .timer-label {
  display: inline-block;
  transform: rotate(-2deg);
}

/* ---- Buttons + inputs: chunky, rounded, hard-shadow "toy button" ---- */

body[data-skin="whackypomo"] button {
  background: var(--wp-teal);
  color: var(--wp-ink);
  border: 3px solid var(--wp-ink);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--wp-ink);
  font-family: 'Bungee', sans-serif;
  transform: translate(0, 0);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

body[data-skin="whackypomo"] button:hover:not(:disabled) {
  background: var(--wp-yellow);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--wp-ink);
}

body[data-skin="whackypomo"] button:active:not(:disabled) {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--wp-ink);
}

body[data-skin="whackypomo"] button:focus {
  outline: 3px solid var(--wp-yellow);
  outline-offset: 2px;
}

body[data-skin="whackypomo"] .play-pause-btn.is-running {
  background: var(--wp-green);
  box-shadow: 4px 4px 0 var(--wp-ink);
}

body[data-skin="whackypomo"] #slides-fullscreen-btn.active {
  background: var(--wp-purple);
  color: var(--wp-paper);
}

body[data-skin="whackypomo"] .resume-glow {
  background: var(--wp-yellow);
  color: var(--wp-ink);
  box-shadow: 4px 4px 0 var(--wp-orange);
}

body[data-skin="whackypomo"] input {
  background: var(--wp-paper);
  color: var(--wp-ink);
  border: 3px solid var(--wp-ink);
  border-radius: 10px;
  font-family: 'Space Grotesk', monospace;
  font-weight: 700;
}

/* ---- Reverse-video radio selection ---- */

body[data-skin="whackypomo"] input[type="radio"][name="speakerTimerType"]:checked + label,
body[data-skin="whackypomo"] input[type="radio"][name="agendaTimerType"]:checked + label {
  background: var(--wp-yellow);
  color: var(--wp-ink);
  box-shadow: 3px 3px 0 var(--wp-ink);
  border-radius: 8px;
}

body[data-skin="whackypomo"] input[type="radio"][name="speakerTimerType"] + label:hover,
body[data-skin="whackypomo"] input[type="radio"][name="agendaTimerType"] + label:hover {
  background: var(--wp-teal);
  border-radius: 8px;
}

body[data-skin="whackypomo"] .chair-name-display {
  color: var(--wp-green);
  font-family: 'Bungee Shade', sans-serif;
  font-size: calc(var(--font-md) * 1.3);
}

/* ---- Decor: the DSA rose gifs are swapped for three CSS-drawn "toy
   game piece" shapes -- a checkerboard sphere, a Memphis squiggle/blob,
   and a triangle cone -- each with a hard offset shadow. The chapter
   photo itself stays (it's real content, not filler) but moves into a
   smaller version of the same console-bezel language as the slides
   frame below. ---- */

body[data-skin="whackypomo"] .index-decor img {
  display: none;
}

body[data-skin="whackypomo"] .index-decor {
  position: relative;
  min-height: 90px;
  gap: 0;
}

body[data-skin="whackypomo"] .index-decor::before,
body[data-skin="whackypomo"] .index-decor::after {
  content: '';
  position: absolute;
  top: 50%;
}

/* Checkerboard sphere */
body[data-skin="whackypomo"] .index-decor::before {
  left: 8%;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  transform: translateY(-50%) rotate(-8deg);
  background:
    repeating-conic-gradient(var(--wp-ink) 0% 25%, var(--wp-yellow) 0% 50%) 0 0 / 16px 16px;
  outline: 4px solid var(--wp-ink);
  box-shadow: 5px 5px 0 var(--wp-purple);
  animation: wp-bob 5s ease-in-out infinite;
}

/* Memphis squiggle/blob */
body[data-skin="whackypomo"] .index-decor::after {
  right: 8%;
  width: 68px;
  height: 56px;
  border-radius: 62% 38% 33% 67% / 62% 35% 65% 38%;
  transform: translateY(-50%) rotate(10deg);
  background: var(--wp-teal);
  outline: 4px solid var(--wp-ink);
  box-shadow: -5px 5px 0 var(--wp-orange);
  animation: wp-bob 4.5s ease-in-out infinite reverse;
}

@keyframes wp-bob {
  0%, 100% { transform: translateY(-50%) rotate(-8deg); }
  50% { transform: translateY(calc(-50% - 6px)) rotate(-2deg); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-skin="whackypomo"] .index-decor::before,
  body[data-skin="whackypomo"] .index-decor::after {
    animation: none;
  }
}

/* Chapter photo: small console-bezel frame, same language as #timer2. */
body[data-skin="whackypomo"] .index-decor img[alt="chapter logo"] {
  display: block;
  height: 90px;
  width: auto;
  border-radius: 14px;
  outline: 4px solid var(--wp-ink);
  box-shadow: 6px 6px 0 var(--wp-green);
  position: relative;
  z-index: 1;
}

/* ---- Slides "console": chunky rounded bezel + a rotated shadow-card
   peeking out behind it, via ::before -- a pseudo-element's own transform
   never touches its host's box model or children, so #timer2 itself (and
   everything slides.js measures inside it) stays exactly where the
   layout puts it. This is the signature element. ---- */

body[data-skin="whackypomo"] #timer2 {
  outline-color: var(--wp-yellow);
  box-shadow: 12px 12px 0 var(--wp-purple);
}

body[data-skin="whackypomo"] #timer2::before {
  content: '';
  position: absolute;
  inset: -14px;
  z-index: -1;
  border-radius: 26px;
  background: var(--wp-purple);
  outline: 5px solid var(--wp-ink);
  transform: rotate(-2.5deg);
}

/* Fake "power light" -- top-left corner, like a novelty toy TV. */
body[data-skin="whackypomo"] #timer2::after {
  content: '';
  position: absolute;
  top: 16px;
  left: 16px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--wp-green);
  box-shadow: 0 0 10px 2px rgba(159, 255, 61, 0.85), 2px 2px 0 var(--wp-ink);
  z-index: 2;
  animation: wp-blink 2.4s steps(2, jump-none) infinite;
}

@keyframes wp-blink {
  0%, 74% { opacity: 1; }
  75%, 100% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-skin="whackypomo"] #timer2::after {
    animation: none;
  }
}

/* ---- Date/time badge: gets its own dedicated row in the layout rewrite
   below (sized to fit its real content, whatever that is), styled here as
   a small tilted card -- the lowest-stakes readout on the page (clock/
   weather, not a live countdown), so it's the one panel that gets an
   actual rotation on the real element itself. ---- */

body[data-skin="whackypomo"] #dateTime {
  border-radius: 16px;
  outline: 4px solid var(--wp-ink);
  box-shadow: 6px 6px 0 var(--wp-green);
  background: var(--wp-graphite);
  padding: 10px 14px;
  transform: rotate(-3deg);
  font-family: 'Space Grotesk', monospace;
  /* Smaller than the default skin's badge -- it's floating over the
     speaker panel now (see the desktop rewrite below), not sitting in
     its own reserved row, so it reads better as a compact overlay card. */
  font-size: 15px;
}

/* ===== Setup tab + boot menu (injected by timer-skin.js, shared with the
   BIOS skin -- only the appearance differs per skin). ===== */

body[data-skin="whackypomo"] #timer-skin-tab {
  font-family: 'Bungee', sans-serif;
  background: var(--wp-yellow);
  color: var(--wp-ink);
  border: 3px solid var(--wp-ink);
  border-right: none;
  border-radius: 14px 0 0 14px;
  box-shadow: -3px 3px 0 var(--wp-purple);
}

body[data-skin="whackypomo"] #timer-skin-tab:hover {
  background: var(--wp-green);
}

body[data-skin="whackypomo"] #timer-skin-menu {
  font-family: 'Bungee', sans-serif;
  background: var(--wp-graphite);
  color: var(--wp-paper);
  border: 3px solid var(--wp-ink);
  border-radius: 14px;
  box-shadow: -6px 6px 0 var(--wp-teal);
}

body[data-skin="whackypomo"] #timer-skin-menu .tsm-option:hover {
  background: var(--wp-purple);
  color: var(--wp-paper);
}

body[data-skin="whackypomo"] #timer-skin-menu .tsm-option.tsm-active {
  background: var(--wp-yellow);
  color: var(--wp-ink);
}

/* ===== Desktop-only structural rewrite -- guarded to the same breakpoint
   as the mobile layout in timer.style.css so the follower/phone view
   (which switches body to display:flex) is completely unaffected
   regardless of skin. Swaps the clean 4-cell percentage grid for an
   asymmetric layout with its own dedicated row for the date/time badge,
   sitting above "Current Agenda Item:". ===== */
@media (min-width: 821px) {
  body[data-skin="whackypomo"] {
    display: grid;
    grid-template-columns: 33% 67%;
    /* Just the two real content rows now -- no dedicated row for the
       date/time badge (see #dateTime below), so speaker+slides and
       agenda sit directly adjacent, separated by nothing but the grid
       gap. Split 1.7:1, same ratio as before. */
    grid-template-rows: 1.7fr 1fr;
    grid-template-areas:
      "speaker slides"
      "agenda  agenda";
    gap: 22px;
    padding: 22px;
  }

  body[data-skin="whackypomo"] > main { grid-area: speaker; min-width: 0; min-height: 0; }
  body[data-skin="whackypomo"] > #timer2 { grid-area: slides; min-width: 0; min-height: 0; }
  body[data-skin="whackypomo"] > #agendaTimer { grid-area: agenda; min-width: 0; min-height: 0; }

  body[data-skin="whackypomo"] > main,
  body[data-skin="whackypomo"] #speakerTimer {
    height: 100%;
  }

  /* Floats over the bottom edge of the speaker cell instead of taking
     its own row -- shares #speakerTimer's grid-area (grid explicitly
     allows more than one item per named area; they overlap and stack by
     z-index/DOM order) with align-self:end to pin it to that cell's
     bottom edge, and min-height:0 so its own content can never inflate
     row 1's height the way the old dedicated "auto" row did. z-index
     makes the stacking explicit rather than relying on DOM order (it
     already comes after <main> in the markup, but grid items honor
     z-index regardless of position, so this is the more robust way to
     guarantee it paints on top). overflow:visible + white-space:nowrap
     on its content (timer.style.css) still let it spill rightward past
     the 33%-wide speaker column exactly like it always has. */
  body[data-skin="whackypomo"] > #dateTime {
    grid-area: speaker;
    justify-self: start;
    align-self: end;
    margin-left: 34px;
    margin-bottom: 2px;
    width: auto;
    min-height: 0;
    z-index: 5;
  }

  /* body.slides-fullscreen already takes #timer2 out of flow via its own
     position:fixed;inset:0 rule (timer.style.css) and hides the other
     three panels outright -- position:fixed always wins placement
     regardless of grid-area, so fullscreen slides keeps working
     unchanged under this skin. */
}