/* ============================================================
   THE POLAR POST  (v2)
   A newspaper lying on a wooden table, bound like a notebook:
   sheets are real leaves hinged on a spine and turned in 3D.

   v1 was a flat horizontal carousel. This replaces it with the
   physical model, which is the look that was actually wanted.

   TWO LAYOUTS, same as the original:
     spread  wide screens: an open two-page spread. Each leaf
             carries an odd page on the FRONT and the following
             even page on its BACK, hinged at the centre spine,
             exactly like a real folded newspaper.
     single  narrow screens: one page at a time, hinged on the
             left edge like a bound pad. The reverse of a turning
             sheet is blank paper, because on a phone the page
             beneath is the next page.

   THE IMPORTANT LINE is still `touch-action: pan-y` on the book:
   it reserves the horizontal axis for the page turn and hands
   vertical back to the browser and the article scroller.

   Only `transform` animates on a leaf, so a turn stays on the
   compositor even while a 1200px-tall photograph is rotating.
   ============================================================ */

.pp-frame {
  position: relative;
  margin-top: 18px;
  border: 1px solid var(--forest-edge);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  user-select: none;
}

/* ---------- the table ---------- */

.pp-table {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(360px, 74dvh, 940px);
  padding: 18px 14px;
  overflow: hidden;
  /* Wood: fine grain at 92deg, plank seams at 88deg, warm lamp from
     above. Two slightly-off angles is what stops it reading as
     wallpaper — real grain is never perfectly parallel. */
  background-color: #6b4526;
  background-image:
    repeating-linear-gradient(92deg,
      rgba(0,0,0,.10) 0px, rgba(0,0,0,0) 3px, rgba(255,255,255,.05) 6px,
      rgba(0,0,0,.07) 11px, rgba(0,0,0,0) 17px, rgba(0,0,0,.12) 24px),
    repeating-linear-gradient(88deg,
      rgba(0,0,0,.05) 0px, rgba(0,0,0,0) 90px, rgba(0,0,0,.09) 180px),
    radial-gradient(120% 90% at 50% 8%, rgba(255,214,150,.30), rgba(0,0,0,0) 60%);
  touch-action: pan-y;
  cursor: grab;
}
.pp-frame.is-dragging .pp-table { cursor: grabbing; }

.pp-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(75% 60% at 50% 45%,
    rgba(0,0,0,0) 35%, rgba(0,0,0,.45) 100%);
}

/* ---------- the book ---------- */

.pp-book {
  position: relative;
  z-index: 2;
  perspective: 2600px;
  perspective-origin: 50% 40%;
}
.pp-frame[data-mode="single"] .pp-book {
  perspective: 1700px;
  perspective-origin: 0% 45%;
}

.pp-deck {
  position: relative;
  transform-style: preserve-3d;
}
.pp-deck.is-animating {
  transition: transform 620ms cubic-bezier(.42,.02,.24,1);
}

/* Soft contact shadow so the paper sits ON the table rather than
   floating above it. */
.pp-shadow {
  position: absolute;
  top: 3%;
  left: 3%;
  width: 94%;
  height: 97%;
  background: rgba(0,0,0,.5);
  filter: blur(22px);
  pointer-events: none;
}

/* The body of the newspaper showing under the leaves. */
.pp-under {
  position: absolute;
  top: 0;
  height: 100%;
  background: #e9dfc6;
}
.pp-under--l { box-shadow: 0 14px 34px rgba(0,0,0,.45), inset -14px 0 26px rgba(0,0,0,.22); }
.pp-under--r { box-shadow: 0 14px 34px rgba(0,0,0,.45), inset  14px 0 26px rgba(0,0,0,.22); }
.pp-under[hidden] { display: none; }

/* ---------- leaves ---------- */

.pp-leaf {
  position: absolute;
  top: 0;
  transform-style: preserve-3d;
  transform-origin: left center;
  will-change: transform;
}
.pp-leaf.is-animating {
  transition: transform 620ms cubic-bezier(.42,.02,.24,1);
}

.pp-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #f7f0dd;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,.4);
}
.pp-face--back { transform: rotateY(180deg); }

.pp-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

/* Blank reverse, used in single mode where the page underneath is
   the next page rather than this sheet's other side. */
.pp-face--paper {
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #f5eeda, #e9dfc6);
}

/* Gutter shading: paper darkens as it approaches the spine. This is
   most of what sells the fold. */
.pp-gutter {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right,
    rgba(60,40,20,.28), rgba(60,40,20,0) 10%,
    rgba(60,40,20,0) 94%, rgba(60,40,20,.12));
}
.pp-gutter--back {
  background: linear-gradient(to left,
    rgba(60,40,20,.28), rgba(60,40,20,0) 10%);
}

/* ---------- reader overlay ----------
   The article text sits ABOVE the book rather than inside a leaf.
   Putting a scrolling panel inside a rotating, preserve-3d element
   makes it a containing block, fights backface-visibility and forces
   the compositor to re-rasterise text mid-turn. */

.pp-reader {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: clamp(16px, 4vw, 34px);
  background: linear-gradient(180deg, #fbf6e8 0%, var(--cream) 100%);
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms;
  user-select: text;
}
.pp-frame.is-reading .pp-reader { opacity: 1; visibility: visible; }

.pp-reader-inner { max-width: 62ch; margin: 0 auto; }

/* The reader's own way out. Sticky, because the article scrolls and the
   control bar underneath is easy to lose track of on a long page. */
.pp-reader-close {
  position: sticky;
  top: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: 14px;
  padding: 0 18px;
  border: 1px solid var(--hairline-ink);
  border-radius: 999px;
  background: #fbf6e8;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.5);
  color: var(--ink);
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease;
}
.pp-reader-close:hover { background: #fff; }

.pp-article + .pp-article {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline-ink);
}
.pp-reader h4 {
  margin: 0 0 6px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(22px, 5.2vw, 34px);
  line-height: 1.12;
}
.pp-reader .pp-standfirst {
  margin: 0 0 14px;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(15px, 3.4vw, 19px);
  line-height: 1.4;
  color: var(--ink-muted);
}
.pp-reader p {
  margin: 0 0 12px;
  font-family: var(--body);
  font-size: clamp(15px, 3.3vw, 17px);
  line-height: 1.62;
}
.pp-reader .pp-kicker {
  display: inline-block;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red-deep);
}
.pp-reader .pp-todo {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-left: 3px solid var(--gold);
  background: rgba(200,162,74,.12);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-muted);
}
.pp-sidebar {
  margin: 16px 0 4px;
  padding: 14px 16px;
  border: 1px solid var(--hairline-ink);
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.55);
}
.pp-sidebar h5 { margin: 0 0 8px; font-family: var(--display); font-size: 18px; font-weight: 600; }
.pp-sidebar ul { margin: 0; padding-left: 18px; }
.pp-sidebar li { font-family: var(--body); font-size: 15px; line-height: 1.55; margin-bottom: 4px; }

/* Pull-quote, matching the boxed quote the artwork prints mid-article. */
.pp-quote {
  margin: 18px 0;
  padding: 12px 0 12px 16px;
  border-left: 3px solid var(--red-deep);
  font-family: var(--display);
  font-size: clamp(17px, 4vw, 22px);
  line-height: 1.35;
  color: var(--ink);
}
.pp-quote cite {
  display: block;
  margin-top: 6px;
  font-family: var(--body);
  font-style: normal;
  font-size: 14px;
  color: var(--ink-muted);
}

/* ---------- snow over the table ----------
   Above the paper but below the reader, so an open article is never read
   through falling snow. */

.pp-snow {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* ---------- in-window chrome ----------
   Full-screen, the launcher already shows the activity name in its own bar,
   so the card's icon and blurb are dead vertical space above the newspaper.
   Hidden rather than deleted, following the same pattern snowman.css uses:
   the h3 is what the launcher reads for the window title, and the Open button
   is positioned relative to p.toy-sub, so both nodes have to stay. */

#polarpost.in-window > .toy-ico,
#polarpost.in-window > p.toy-sub { display: none; }
#polarpost.in-window .pp-frame { margin-top: 0; }
#polarpost.in-window .pp-frame:not(.is-paper):not(.is-radio) {
  overflow: visible;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ---------- news stand ----------
   The scene is assembled from one full-bleed background and three real DOM
   buttons. Unlike an image map, each control keeps its own label, focus ring,
   and touch target as the layout changes between portrait and landscape. */

.pp-stand {
  position: relative;
  display: block;
  isolation: isolate;
  overflow: hidden;
  min-height: calc(100dvh - 71px);
  width: calc(100% + 36px);
  margin-top: -26px;
  margin-inline: -18px;
  background: #075da8;
}
/* The stand hides for EITHER active outlet. */
.pp-frame.is-paper .pp-stand,
.pp-frame.is-radio .pp-stand { display: none; }

.pp-stand-picture {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}

.pp-stand-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  -webkit-user-drag: none;
  user-drag: none;
}

.pp-stand-content {
  position: relative;
  z-index: 1;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.6svh, 18px);
  padding: clamp(14px, 2.5svh, 28px) 16px max(28px, env(safe-area-inset-bottom));
}

.pp-stand-prompt {
  margin: 0;
  padding: 7px 18px 9px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 999px;
  background: rgba(5, 51, 105, 0.72);
  box-shadow: 0 8px 24px rgba(0, 31, 78, 0.28);
  color: #fff;
  font-family: var(--display);
  font-size: clamp(20px, 5.6vw, 34px);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 25, 66, 0.8);
}

.pp-stand-options {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 1.2svh, 12px);
}

.pp-outlet {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  width: max-content;
  min-width: 96px;
  min-height: 44px;
  margin: 0;
  padding: 0 6px 3px;
  border: 3px solid transparent;
  border-radius: 24px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease,
              box-shadow 150ms ease;
}

.pp-outlet-picture,
.pp-outlet-img {
  display: block;
  width: clamp(96px, min(44vw, 18svh), 180px);
  height: clamp(96px, min(44vw, 18svh), 180px);
}

.pp-outlet-img {
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0, 32, 80, 0.30));
  -webkit-user-drag: none;
  user-drag: none;
}

.pp-outlet-label {
  max-width: 220px;
  font-family: var(--display);
  font-size: clamp(18px, 5vw, 26px);
  font-weight: 800;
  line-height: 0.95;
  text-align: center;
  text-shadow:
    0 2px 0 #063a77,
    0 0 7px rgba(0, 31, 78, 0.95);
}

.pp-outlet-soon {
  margin-top: 2px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(7, 45, 91, 0.78);
  color: #fff;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

@media (hover: hover) and (pointer: fine) {
  .pp-outlet:hover {
    transform: translateY(-3px) scale(1.025);
    background: rgba(255, 255, 255, 0.11);
  }
}

.pp-outlet:focus-visible {
  border-color: #fff;
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 0 7px rgba(5, 74, 148, 0.34);
}

.pp-outlet:active {
  transform: scale(0.96);
  background: rgba(255, 255, 255, 0.18);
}

.pp-outlet.is-soon { opacity: 0.88; }

@media (max-width: 620px) {
  .pp-stand {
    min-height: calc(100dvh - 65px);
    width: calc(100% + 28px);
    margin-top: -18px;
    margin-inline: -14px;
  }
}

@media (min-width: 701px), (orientation: landscape) {
  .pp-stand-content { gap: clamp(14px, 3svh, 28px); }
  .pp-stand-options {
    flex-direction: row;
    gap: clamp(10px, 3vw, 44px);
  }
  .pp-outlet-picture,
  .pp-outlet-img {
    width: clamp(130px, min(24vw, 42svh), 240px);
    height: clamp(130px, min(24vw, 42svh), 240px);
  }
  .pp-outlet-label { font-size: clamp(19px, 2.5vw, 28px); }
}

/* Tapping an outlet that does not exist yet says so, rather than being dead
   pixels a child taps twice and gives up on. */
.pp-soon {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%) translateY(6px);
  margin: 0;
  padding: 9px 16px;
  max-width: 84%;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: rgba(9, 17, 12, 0.88);
  color: var(--gold-300);
  font-family: var(--body);
  font-size: 14px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
.pp-soon.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- NPNN media hub v2 ----------
   Opens like a North Pole media service home, not a picture-menu. The existing
   chooser artwork becomes atmospheric scenery while real DOM cards carry all
   interaction, labels, and responsive behavior. */
.pp-stand {
  width: 100%;
  margin: 0;
  min-height: calc(100dvh - 71px);
  background: #071a2b;
}
.pp-stand-picture,
.pp-stand-shade { position: absolute; inset: 0; z-index: 0; }
.pp-stand-img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  transform: scale(1.035); filter: saturate(.92) brightness(.67);
}
.pp-stand-shade {
  z-index: 1;
  background:
    radial-gradient(70% 65% at 80% 16%, rgba(86,203,228,.20), transparent 64%),
    radial-gradient(54% 55% at 10% 90%, rgba(194,42,52,.20), transparent 72%),
    linear-gradient(180deg, rgba(4,20,34,.32), rgba(5,20,33,.78) 62%, rgba(4,14,23,.96));
  backdrop-filter: blur(2px);
}
.pp-stand-shade::after {
  content: ''; position: absolute; inset: 0; opacity: .12;
  background-image: radial-gradient(circle, rgba(255,255,255,.85) 0 1px, transparent 1.6px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}
.pp-stand-content {
  position: relative; z-index: 2; width: min(1500px, 100%); min-height: inherit;
  margin: 0 auto; padding: clamp(14px,2vw,28px) clamp(12px,2.5vw,36px) max(20px, env(safe-area-inset-bottom));
  display: block;
}
.pp-hub-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  margin-bottom: clamp(16px,2.5vh,28px);
}
.pp-hub-brand { max-width: 720px; }
.pp-hub-live,
.pp-hub-eyebrow,
.pp-outlet-kicker {
  font-family: var(--body); font-size: 12px; font-weight: 900;
  letter-spacing: .13em; text-transform: uppercase;
}
.pp-hub-live { display: inline-flex; align-items: center; gap: 9px; color: #f8de8e; }
.pp-hub-live i {
  width: 9px; height: 9px; border-radius: 50%; background: #ef4c52;
  box-shadow: 0 0 0 5px rgba(239,76,82,.13), 0 0 18px rgba(239,76,82,.7);
}
.pp-hub-brand h4 {
  margin: 5px 0 0; font-family: var(--display); font-size: clamp(42px,5vw,70px);
  line-height: .8; letter-spacing: -.045em; color: #fffaf0;
  text-shadow: 0 12px 32px rgba(0,0,0,.3);
}
.pp-hub-brand > p {
  margin: 8px 0 0; max-width: 620px; font-family: var(--body);
  font-size: clamp(13px,1.2vw,16px); line-height: 1.38; color: rgba(244,250,251,.82);
}
.pp-hub-status {
  flex: 0 0 auto; display: flex; align-items: center; gap: 9px; min-width: 178px;
  padding: 9px 12px; border: 1px solid rgba(242,211,125,.28); border-radius: 16px;
  background: rgba(5,24,37,.66); box-shadow: inset 0 1px rgba(255,255,255,.07), 0 16px 32px rgba(0,0,0,.18);
  backdrop-filter: blur(14px);
}
.pp-hub-status-dot {
  flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%; background: #4fe59b;
  box-shadow: 0 0 14px rgba(79,229,155,.75);
}
.pp-hub-status span:last-child { display: grid; gap: 2px; }
.pp-hub-status strong { font-family: var(--body); font-size: 13px; color: #fff; }
.pp-hub-status small { font-family: var(--mono); font-size: 9px; letter-spacing: .09em; color: rgba(232,245,244,.62); }
.pp-hub-title-row {
  display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 10px;
}
.pp-hub-eyebrow { margin: 0 0 6px; color: #f0cb69; }
.pp-hub-title-row h5 {
  margin: 0; font-family: var(--body); font-size: clamp(20px,2vw,28px); line-height: 1.08; color: #fff;
}
.pp-hub-tip {
  margin: 0 0 2px; max-width: 320px; font-family: var(--body); font-size: 12px;
  line-height: 1.4; text-align: right; color: rgba(235,245,246,.58);
}
.pp-stand-options {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  align-items: stretch; justify-content: stretch; gap: clamp(10px,1.3vw,16px);
}
.pp-outlet {
  position: relative; width: auto; min-width: 0; min-height: 295px; margin: 0; padding: 0;
  display: grid; grid-template-rows: minmax(0,1fr) auto; justify-items: stretch; gap: 0;
  overflow: hidden; border: 1px solid rgba(255,255,255,.17); border-radius: 20px;
  background: rgba(6,28,42,.73); color: #fff; text-align: left;
  box-shadow: inset 0 1px rgba(255,255,255,.07), 0 18px 42px rgba(0,0,0,.24);
  backdrop-filter: blur(16px);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.pp-outlet-art {
  position: relative; min-height: 170px; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(145deg, rgba(14,69,87,.35), rgba(8,27,44,.05));
}
.pp-outlet-art::after {
  content: ''; position: absolute; inset: auto 0 0; height: 45%;
  background: linear-gradient(to top, rgba(6,28,42,.88), transparent); pointer-events: none;
}
.pp-outlet-picture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.pp-outlet-img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;
  transform: scale(1.025); filter: none; transition: transform 260ms ease, filter 260ms ease;
}
.pp-outlet-kicker {
  position: absolute; z-index: 2; left: 12px; bottom: 10px; padding: 5px 7px;
  border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(3,22,34,.72);
  color: #f9dc82; backdrop-filter: blur(8px);
}
.pp-outlet-copy {
  min-height: 112px; display: flex; flex-direction: column; align-items: flex-start;
  padding: 12px 14px 14px;
}
.pp-outlet-label {
  max-width: none; font-family: var(--body); font-size: clamp(16px,1.5vw,20px);
  font-weight: 800; line-height: 1.05; text-align: left; text-shadow: none; color: #fff;
}
.pp-outlet-desc {
  margin-top: 6px; font-family: var(--body); font-size: 11.5px; line-height: 1.35;
  color: rgba(235,245,245,.68);
}
.pp-outlet-action {
  margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--body); font-size: 12px; font-weight: 900; color: #f4d474;
}
.pp-outlet-action b { font-size: 18px; line-height: 1; transition: transform 180ms ease; }
.pp-outlet-soon {
  position: absolute; top: 16px; right: 16px; z-index: 4; margin: 0; padding: 6px 9px;
  border-radius: 999px; background: rgba(100,118,125,.82); color: #fff;
  font-family: var(--body); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
}
.pp-outlet.is-soon { opacity: .84; }
.pp-outlet.is-soon .pp-outlet-img { filter: saturate(.55) brightness(.8); }
@media (hover:hover) and (pointer:fine) {
  .pp-outlet:not(.is-soon):hover {
    transform: translateY(-7px); border-color: rgba(244,212,116,.62); background: rgba(9,39,54,.85);
    box-shadow: inset 0 1px rgba(255,255,255,.1), 0 26px 52px rgba(0,0,0,.34), 0 0 0 1px rgba(244,212,116,.08);
  }
  .pp-outlet:not(.is-soon):hover .pp-outlet-img { transform: scale(1.065); }
  .pp-outlet:not(.is-soon):hover .pp-outlet-action b { transform: translateX(4px); }
}
.pp-outlet:focus-visible { outline: 3px solid #fff4c4; outline-offset: 4px; border-color: #f4d474; }
.pp-outlet:active { transform: scale(.985); }
.pp-soon {
  position: fixed; z-index: 100010; left: 50%; bottom: max(24px, env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(8px); max-width: min(86vw,520px); padding: 11px 17px;
  border: 1px solid rgba(244,212,116,.35); border-radius: 999px; background: rgba(5,22,33,.94);
  box-shadow: 0 16px 34px rgba(0,0,0,.28); color: #f6dc8f; opacity: 0;
}
.pp-soon.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width:820px) {
  .pp-stand { width: 100%; margin: 0; }
  .pp-stand-content { padding-inline: 16px; }
  .pp-hub-head { margin-bottom: 20px; }
  .pp-hub-status { display: none; }
  .pp-hub-title-row { align-items: flex-start; flex-direction: column; gap: 8px; }
  .pp-hub-tip { text-align: left; }
  .pp-stand-options {
    grid-auto-flow: column; grid-auto-columns: minmax(180px,46vw); grid-template-columns: none;
    justify-content: start; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory;
    scrollbar-width: none; margin-inline: -16px; padding: 5px 16px 18px;
  }
  .pp-stand-options::-webkit-scrollbar { display: none; }
  .pp-outlet { min-height: 270px; scroll-snap-align: start; }
}
@media (max-width:520px) {
  .pp-stand { min-height: calc(100dvh - 65px); width: 100%; margin: 0; }
  .pp-stand-content { padding-top: 14px; }
  .pp-hub-brand h4 { font-size: clamp(44px,14vw,56px); }
  .pp-hub-brand > p { margin-top: 7px; font-size: 13px; }
  .pp-hub-head { margin-bottom: 16px; }
  .pp-hub-title-row h5 { font-size: 20px; }
  .pp-hub-tip { display: none; }
  .pp-stand-options { grid-auto-columns: minmax(176px,45vw); }
  .pp-outlet { min-height: 260px; border-radius: 18px; }
  .pp-outlet-art { min-height: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-outlet, .pp-outlet-img, .pp-outlet-action b { transition: none; }
}

/* ---------- paper view ---------- */

.pp-paper { position: relative; display: none; }
.pp-frame.is-paper .pp-paper { display: block; }

/* ---------- radio ----------
   NPNN Radio is a streaming-app experience, not a picture of a radio. The
   continuous station audio and cue sheets still provide the broadcast model;
   this layer only turns that data into a modern North Pole listening room. */

.pp-radio {
  position: relative;
  display: none;
  padding: 0;
  color: var(--snow);
  background: #06141b;
}
.pp-frame.is-radio .pp-radio { display: block; }

/* Mutual exclusion stated in CSS rather than left to JS discipline. */
.pp-frame.is-radio .pp-paper { display: none; }
.pp-frame.is-paper .pp-radio { display: none; }

.np-win-body:has(#polarpost.in-window .pp-frame.is-radio),
.np-win-body:has(#polarpost.in-window .pp-frame.is-hub) {
  max-width: none;
  padding: 0;
}
#polarpost.in-window .pp-frame.is-radio {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}

.pp-radio-app {
  --radio-pad: clamp(12px, 2vw, 28px);
  position: relative;
  isolation: isolate;
  min-height: calc(100dvh - 71px);
  padding: clamp(12px, 1.5vw, 22px) var(--radio-pad) 0;
  overflow: clip;
  background:
    radial-gradient(70% 48% at 13% 5%, rgba(51, 207, 164, .20), transparent 68%),
    radial-gradient(48% 42% at 92% 9%, rgba(220, 52, 72, .17), transparent 68%),
    radial-gradient(70% 50% at 50% 115%, rgba(216, 168, 63, .13), transparent 70%),
    linear-gradient(155deg, #071d28 0%, #07141f 46%, #041117 100%);
}
.pp-radio-app::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .34;
  background:
    linear-gradient(105deg, transparent 0 14%, rgba(255,255,255,.025) 14.2% 14.5%, transparent 14.7% 47%, rgba(255,255,255,.022) 47.2% 47.5%, transparent 47.7%),
    repeating-linear-gradient(90deg, transparent 0 68px, rgba(211, 183, 104, .035) 69px 70px);
}
.pp-radio-app::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .7;
  background:
    radial-gradient(circle at 8% 19%, rgba(255,255,255,.75) 0 1px, transparent 1.8px),
    radial-gradient(circle at 23% 11%, rgba(255,255,255,.55) 0 1px, transparent 1.7px),
    radial-gradient(circle at 71% 20%, rgba(255,255,255,.55) 0 1px, transparent 1.8px),
    radial-gradient(circle at 88% 27%, rgba(255,255,255,.7) 0 1px, transparent 1.7px),
    radial-gradient(circle at 59% 8%, rgba(255,255,255,.45) 0 1px, transparent 1.6px);
}

.pp-radio-head,
.pp-radio-main,
.pp-station-section {
  width: min(100%, 1450px);
  margin-inline: auto;
}

.pp-radio-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: clamp(10px, 1.4vw, 18px);
}
.pp-radio-brand { min-width: 0; }
.pp-radio-kicker {
  display: block;
  margin-bottom: 2px;
  font: 800 11px/1 var(--mono);
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.pp-radio-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: .98;
  color: #fff8e9;
  text-shadow: 0 3px 24px rgba(0,0,0,.3);
}
.pp-radio-subtitle {
  margin: 7px 0 0;
  font: 600 clamp(12px, 1.1vw, 14px)/1.35 var(--body);
  color: rgba(233, 245, 241, .68);
}
.pp-on-air {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(255, 120, 128, .5);
  border-radius: 999px;
  background: rgba(117, 16, 28, .42);
  box-shadow: 0 0 28px rgba(230, 52, 67, .12), inset 0 0 18px rgba(255,255,255,.03);
  font: 800 11px/1 var(--mono);
  letter-spacing: .13em;
  color: #ffd7d9;
  text-transform: uppercase;
}
.pp-on-air::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff5362;
  box-shadow: 0 0 0 4px rgba(255,83,98,.12), 0 0 14px #ff5362;
}

.pp-radio-main {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(250px, .7fr);
  gap: clamp(10px, 1.3vw, 18px);
  align-items: stretch;
}
.pp-now-card,
.pp-up-next,
.pp-station-section {
  border: 1px solid rgba(221, 196, 127, .20);
  background: linear-gradient(145deg, rgba(15, 39, 47, .84), rgba(7, 23, 31, .78));
  box-shadow: 0 22px 54px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.pp-now-card {
  display: grid;
  grid-template-columns: clamp(170px, 20vw, 240px) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 24px);
  align-items: center;
  min-height: 270px;
  padding: clamp(14px, 1.6vw, 22px);
  border-radius: 24px;
}
.pp-artwork {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(236, 207, 132, .42);
  border-radius: clamp(16px, 1.5vw, 22px);
  background:
    radial-gradient(circle at 28% 24%, rgba(116, 239, 206, .38), transparent 28%),
    linear-gradient(145deg, #0a6c78, #153354 58%, #0b1929);
  box-shadow: 0 24px 48px rgba(0,0,0,.32), inset 0 0 38px rgba(160, 236, 255, .08);
}
.pp-artwork::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 58%, rgba(2,10,15,.30));
}
.pp-artwork[data-kind="host"] { background: linear-gradient(145deg, #1c738b, #173650 62%, #081923); }
.pp-artwork[data-kind="song"] { background: linear-gradient(145deg, #087c83, #143d73 58%, #121b48); }
.pp-artwork[data-kind="id"] { background: linear-gradient(145deg, #15577c, #762848 62%, #32152b); }
.pp-art-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  text-align: center;
}
.pp-art-mark {
  font: 800 clamp(18px, 3vw, 34px)/1 var(--display);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.pp-art-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pp-art-img[hidden] { display: none; }
.pp-art-corner {
  position: absolute;
  left: 14px;
  bottom: 13px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(2, 14, 20, .68);
  font: 800 10px/1 var(--mono);
  letter-spacing: .13em;
  color: #eef9f4;
  text-transform: uppercase;
}

.pp-now-copy { min-width: 0; text-align: left; }
.pp-call-sign {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin: 0 0 13px;
  padding: 0 10px;
  border: 1px solid rgba(221, 188, 99, .36);
  border-radius: 999px;
  background: rgba(209, 161, 61, .08);
  font: 800 10px/1 var(--mono);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.pp-station {
  margin: 0 0 8px;
  font: 700 clamp(13px, 1.5vw, 16px)/1.25 var(--body);
  letter-spacing: .02em;
  color: rgba(240, 247, 243, .68);
}
.pp-now-label {
  margin: 0 0 7px;
  font: 800 10px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(220, 237, 229, .45);
}
.pp-track {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: .98;
  color: #fff8e9;
  text-wrap: balance;
}
.pp-track-type {
  margin: 11px 0 0;
  font: 600 clamp(13px, 1.45vw, 16px)/1.4 var(--body);
  color: rgba(225, 240, 234, .69);
}
.pp-radio-note {
  min-height: 22px;
  margin: 18px 0 0;
  font: 700 13px/1.35 var(--body);
  color: var(--gold-300);
}

.pp-up-next {
  min-width: 0;
  padding: clamp(14px, 1.5vw, 20px);
  border-radius: 20px;
}
.pp-section-eyebrow {
  margin: 0 0 6px;
  font: 800 10px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.pp-up-next h4,
.pp-station-head h4 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(20px, 1.8vw, 27px);
  color: #fff8e9;
}
.pp-queue {
  display: grid;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.pp-queue-item,
.pp-queue-empty {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 54px;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 17px;
  background: rgba(255,255,255,.035);
}
.pp-queue-empty {
  grid-template-columns: 1fr;
  color: rgba(232, 243, 238, .55);
  font: 600 13px/1.45 var(--body);
}
.pp-queue-time {
  font: 800 10px/1 var(--mono);
  letter-spacing: .08em;
  color: var(--gold-300);
}
.pp-queue-title {
  display: block;
  overflow: hidden;
  font: 700 14px/1.2 var(--body);
  color: #f5faf7;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pp-queue-detail {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  font: 500 11px/1.2 var(--body);
  color: rgba(220, 235, 229, .52);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pp-station-section {
  margin-top: clamp(10px, 1.4vw, 18px);
  padding: clamp(14px, 1.5vw, 20px);
  border-radius: 20px;
}
.pp-station-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.pp-station-help {
  max-width: 44ch;
  margin: 0;
  font: 600 12px/1.35 var(--body);
  color: rgba(225, 238, 233, .52);
  text-align: right;
}
.pp-station-shelf {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.pp-station-card {
  position: relative;
  min-width: 0;
  min-height: 150px;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px;
  background: #102b35;
  box-shadow: 0 12px 30px rgba(0,0,0,.20);
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
}
.pp-station-card:hover { transform: translateY(-3px); border-color: rgba(235, 200, 112, .56); }
.pp-station-card:focus-visible { outline: 3px solid #f9e7aa; outline-offset: 3px; }
.pp-station-card.is-on {
  border-color: rgba(241, 205, 108, .92);
  box-shadow: 0 0 0 3px rgba(224, 181, 73, .13), 0 18px 34px rgba(0,0,0,.28);
}
.pp-station-card[data-station="countdown"] { background: linear-gradient(145deg, #6b3c19, #28442f 72%, #17271f); }
.pp-station-card[data-station="pop"] { background: linear-gradient(145deg, #9a1f3d, #203f7b 67%, #142750); }
.pp-station-card[data-station="elf"] { background: linear-gradient(145deg, #16714f, #11412f 64%, #0c2b22); }
.pp-station-card[data-station="jazz"] { background: linear-gradient(145deg, #25385f, #2d224f 63%, #16152c); }
.pp-station-card[data-station="weather"] { background: linear-gradient(145deg, #167ca0, #245482 65%, #15354f); }
.pp-station-card-art {
  position: absolute;
  inset: 0;
}
.pp-station-card-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3,10,14,.02) 18%, rgba(3,10,14,.84) 82%, rgba(3,10,14,.96));
}
.pp-station-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pp-station-symbol {
  position: absolute;
  top: 24px;
  left: 22px;
  font: 800 clamp(25px, 3vw, 42px)/1 var(--display);
  letter-spacing: .04em;
  color: rgba(255,255,255,.78);
  text-shadow: 0 8px 22px rgba(0,0,0,.25);
}
.pp-station-card-copy {
  position: absolute;
  inset: auto 12px 11px;
  z-index: 2;
}
.pp-station-card-code {
  display: block;
  margin-bottom: 5px;
  font: 800 9px/1 var(--mono);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #f5d985;
}
.pp-station-card-title {
  display: block;
  font: 700 clamp(15px, 1.25vw, 18px)/1.05 var(--display);
  color: #fffaf0;
}
.pp-station-card-state {
  display: block;
  margin-top: 7px;
  font: 700 10px/1.2 var(--body);
  color: rgba(236, 246, 241, .62);
}
.pp-station-card.is-soon::after {
  content: 'Coming soon';
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(4,15,20,.54);
  font: 800 8px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.76);
}

.pp-player-dock {
  position: sticky;
  bottom: 0;
  z-index: 12;
  display: grid;
  grid-template-columns: 44px minmax(140px, 250px) minmax(180px, 1fr) minmax(128px, 172px);
  gap: 14px;
  align-items: center;
  width: calc(100% + (2 * var(--radio-pad)));
  min-height: 72px;
  margin: 18px calc(-1 * var(--radio-pad)) 0;
  padding: 12px var(--radio-pad) max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(225, 195, 116, .22);
  background: rgba(4, 17, 23, .92);
  box-shadow: 0 -18px 44px rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.pp-play,
.pp-radio-mute {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(237, 204, 119, .54);
  border-radius: 50%;
  background: rgba(213, 170, 65, .10);
  color: var(--gold-300);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.pp-play:hover:not(:disabled), .pp-radio-mute:hover { transform: scale(1.04); background: rgba(213,170,65,.18); }
.pp-play:focus-visible, .pp-radio-mute:focus-visible { outline: 3px solid #f9e7aa; outline-offset: 3px; }
.pp-play:disabled { opacity: .35; cursor: default; }
.pp-frame.is-playing .pp-play { background: #dfb649; border-color: #efd884; color: #102019; }
.pp-play-ico {
  display: block;
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid currentColor;
}
.pp-frame.is-playing .pp-play-ico {
  width: 13px;
  height: 16px;
  margin: 0;
  border: 0;
  background: linear-gradient(90deg, currentColor 0 4px, transparent 4px 9px, currentColor 9px 13px);
}
.pp-radio-mute { width: 44px; height: 44px; border-color: rgba(255,255,255,.14); color: rgba(235,244,240,.72); }
.pp-radio-mute svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pp-radio-mute .ico-off { display: none; }
.pp-radio-mute.is-off .ico-on { display: none; }
.pp-radio-mute.is-off .ico-off { display: block; }
.pp-volume-control {
  display: grid;
  grid-template-columns: 44px minmax(64px, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.pp-volume-range {
  width: 100%;
  min-width: 0;
  height: 44px;
  margin: 0;
  accent-color: #ddb449;
  cursor: pointer;
}
.pp-volume-range:focus-visible { outline: 2px solid #f9e7aa; outline-offset: 2px; border-radius: 999px; }
.pp-dock-copy { min-width: 0; }
.pp-dock-station,
.pp-dock-track {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pp-dock-station {
  margin-bottom: 3px;
  font: 800 9px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.pp-dock-track { font: 700 14px/1.25 var(--body); color: #f5faf7; }
.pp-progress { min-width: 0; }
.pp-progress input[type="range"] {
  width: 100%;
  height: 44px;
  margin: 0;
  accent-color: #ddb449;
  cursor: pointer;
}
.pp-progress input[type="range"]:focus-visible {
  outline: 2px solid #f9e7aa;
  outline-offset: 2px;
  border-radius: 999px;
}
.pp-time {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 5px 0 0;
  font: 600 10px/1 var(--mono);
  color: rgba(220,234,228,.48);
}

@media (max-width: 900px) {
  .pp-radio-main { grid-template-columns: 1fr; }
  .pp-up-next { min-height: 0; }
  .pp-queue { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pp-queue-item { grid-template-columns: 44px minmax(0,1fr); }
  .pp-station-shelf {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(160px, 24vw);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    padding: 2px 2px 10px;
  }
  .pp-station-card { scroll-snap-align: start; }
}

@media (max-width: 760px) {
  .pp-radio-app { --radio-pad: 10px; padding-top: 10px; }
  .pp-radio-head { align-items: flex-start; }
  .pp-radio-subtitle { max-width: 27ch; }
  .pp-on-air { min-height: 36px; padding-inline: 10px; font-size: 9px; }
  .pp-now-card { grid-template-columns: 1fr; min-height: 0; padding: 12px; border-radius: 20px; }
  .pp-artwork { width: min(58vw, 220px); margin-inline: auto; }
  .pp-now-copy { padding: 2px 4px 8px; text-align: center; }
  .pp-call-sign { margin-bottom: 10px; }
  .pp-track { font-size: clamp(26px, 8vw, 36px); }
  .pp-radio-note { margin-top: 12px; }
  .pp-up-next { padding: 12px; border-radius: 20px; }
  .pp-queue { grid-template-columns: 1fr; margin-top: 14px; }
  .pp-queue-item { min-height: 52px; }
  .pp-station-section { padding: 12px 10px; border-radius: 20px; }
  .pp-station-head { align-items: flex-start; }
  .pp-station-help { display: none; }
  .pp-station-shelf { grid-auto-columns: minmax(145px, 42vw); }
  .pp-station-card { min-height: 155px; }
  .pp-player-dock {
    grid-template-columns: 44px minmax(0,1fr) minmax(116px,132px);
    gap: 10px;
    min-height: 88px;
    padding-top: 10px;
  }
  .pp-progress { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 430px) {
  .pp-player-dock { grid-template-columns: 44px minmax(0,1fr) 118px; }
  .pp-volume-control { grid-template-columns: 44px minmax(54px,1fr); gap: 6px; }
  .pp-radio-title { font-size: 25px; }
  .pp-radio-subtitle { font-size: 12px; }
  .pp-on-air { padding-inline: 8px; letter-spacing: .09em; }
  .pp-artwork { width: min(56vw, 205px); }
  .pp-station-shelf { grid-auto-columns: minmax(138px, 43vw); }
  .pp-station-card { min-height: 148px; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-station-card,
  .pp-play,
  .pp-radio-mute { transition: none; }
}

/* ---------- control bar ---------- */


.pp-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--forest-edge);
  background: rgba(9,17,12,.72);
}

.pp-btn {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--glass);
  color: var(--gold-300);
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, opacity 160ms ease;
}
.pp-btn:hover:not(:disabled) { background: var(--glass-strong); color: var(--gold-glow); }
.pp-btn:disabled { opacity: .32; cursor: default; }

/* Mute control: inline SVG, not \1F507. The muted emoji renders on Samsung as
   a speaker with a red prohibition slash, which reads as an ERROR state
   sitting next to four gold pills rather than as a toggle. Copied from
   .chat-voice, which solved this first — including the is-off class swap. */
#ppSound svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
#ppSound .ico-off { display: none; }
#ppSound.is-off { opacity: .72; }
#ppSound.is-off .ico-on { display: none; }
#ppSound.is-off .ico-off { display: block; }

.pp-btn[aria-pressed="true"] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--forest-950);
}

.pp-count {
  flex: 1 1 auto;
  text-align: center;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--muted);
}

/* ---------- hint ---------- */

.pp-hint {
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 2;
  transform: translateX(-50%);
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(9,17,12,.74);
  border: 1px solid var(--hairline);
  color: var(--gold-300);
  font-family: var(--body);
  font-size: 13px;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 300ms ease;
}
.pp-frame.has-turned .pp-hint { opacity: 0; }

/* ---------- debug HUD (?ppdebug=1) ---------- */

.pp-hud {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: rgba(0,0,0,.78);
  border: 1px solid var(--red-bright);
  color: var(--snow);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  white-space: pre;
  pointer-events: none;
}

html.pp-no-select,
html.pp-no-select * {
  user-select: none !important;
  -webkit-user-select: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .pp-leaf.is-animating,
  .pp-deck.is-animating { transition-duration: 140ms; }
  .pp-reader { transition: none; }
}