/* ==========================================================================
   Aeson Power — Reusable YouTube players (.yt-bg / .yt-showcase / .yt-gallery)
   Ported from nookpools.com.au main.css ("Reusable YouTube players" block).
   See _harvest/VIDEO-PLAYERS.md for the engine spec and public API.

   Skin only — layout, sizing and behaviour are unchanged from the source.
   This file is self-sufficient (defines its own tokens) since it must not
   depend on site.css's tokens existing. Recolours the player chrome to the
   site's "Deep Ocean" palette: sky-blue accent, light text on translucent
   dark glass panels, ~22px radii to match the site's cards.
   ========================================================================== */
:root {
  --ytp-accent: #5bc2e7;       /* brand-sky */
  --ytp-accent-2: #4fa9cd;     /* brand-sky-mid, for gradients */
  --ytp-text: #e9f4fa;         /* heading/light text */
  --ytp-ink: #05121d;          /* deep base, used for chrome fills */
  --ytp-glass: rgba(13, 50, 71, .55);
  --ytp-glass-strong: rgba(8, 28, 41, .78);
  --ytp-border: rgba(255, 255, 255, .12);
  --ytp-radius-lg: 22px;
  --ytp-radius-md: 16px;
  --ytp-radius-pill: 999px;
  --ytp-shadow: 0 18px 45px rgba(0, 0, 0, .45);
  --ytp-transition: .25s cubic-bezier(.22, 1, .36, 1);
}

/* ---- Background player: full-bleed, looping, muted, no chrome ---- */
.yt-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background-color: var(--ytp-ink); background-size: cover; background-position: center; }
/* --ytbg-zoom overscans the iframe so YouTube's own chrome falls OUTSIDE the
   visible box. This is not cosmetic polish — it is the only reliable way to
   keep a background player clean. `modestbranding` was deprecated by YouTube
   and no longer suppresses the title bar, so an un-zoomed .yt-bg paints the
   video title and channel name across the top of the hero (and the paused
   badge in the middle) the moment the player mounts or is hovered. At 1.4
   roughly 14% is cropped from every edge, which clears the title bar at the
   top and the progress/controls strip at the bottom on every aspect we use.
   Raise it if a future hero is unusually short (chrome scales with height). */
.yt-bg { --ytbg-zoom: 1.4; }
.yt-bg iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(var(--ytbg-zoom)); width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh; border: 0; pointer-events: none; }
/* Cover relative to the CONTAINER (not the viewport) so a tall hero/row never letterboxes — shows a centre slice instead */
@supports (height: 1cqh) {
  .yt-bg { container-type: size; }
  .yt-bg iframe { width: 100cqw; height: 56.25cqw; min-height: 100cqh; min-width: 177.78cqh; }
}
.yt-bg .yt-bg-block { position: absolute; inset: 0; }

/* ---- Showcase player: 16:9, custom controls, custom replay overlay ---- */
.yt-showcase { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--ytp-radius-lg); background-color: var(--ytp-ink); background-size: cover; background-position: center; box-shadow: var(--ytp-shadow); }
.yt-showcase iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
/* NitroBoards card 019fb65f (2026-08-04): the fullscreen button called
   requestFullscreen() on this element, but nothing reset its normal
   width:100%/aspect-ratio:16/9 box once fullscreened, so on a phone the
   "enlarged" video stayed pinned to its small in-page size inside the
   fullscreen backdrop instead of filling the screen - reading as broken. */
.yt-showcase:fullscreen, .yt-showcase:-webkit-full-screen {
	width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0;
}
.yt-showcase:fullscreen iframe, .yt-showcase:-webkit-full-screen iframe { width: 100vw; height: 100vh; }

/* NitroBoards card 019fb65f (2026-08-04): the two showcase clips shared a
   fixed 2-column grid at every width, so on a phone each video rendered at
   roughly quarter size. Phones only: horizontal scroll-snap, one full-width
   video per "page" - native swipe left/right, no JS slider needed. */
@media (max-width: 640px) {
	.yt-showcase-row {
		display: flex !important; grid-template-columns: none !important;
		overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px !important;
		-webkit-overflow-scrolling: touch; scrollbar-width: none;
	}
	.yt-showcase-row::-webkit-scrollbar { display: none; }
	.yt-showcase-row .yt-showcase { flex: 0 0 100%; scroll-snap-align: center; }
}

.yt-bg iframe, .yt-showcase iframe { opacity: 0; transition: opacity .5s ease; }
.yt-bg.is-ready iframe, .yt-showcase.is-ready iframe { opacity: 1; }

.yt-controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: linear-gradient(0deg, rgba(3, 10, 16, .82), transparent);
  opacity: 0; transition: opacity var(--ytp-transition);
}
.yt-showcase:hover .yt-controls,
.yt-showcase:focus-within .yt-controls,
.yt-showcase:not(.is-playing) .yt-controls { opacity: 1; }

.yt-play, .yt-mute, .yt-fs {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--ytp-radius-pill);
  border: 1px solid var(--ytp-border); cursor: pointer; color: var(--ytp-text);
  background: rgba(255, 255, 255, .10); backdrop-filter: blur(8px);
  display: grid; place-items: center; font-size: 14px; line-height: 1;
  transition: background var(--ytp-transition), border-color var(--ytp-transition), transform var(--ytp-transition);
}
.yt-play:hover, .yt-mute:hover, .yt-fs:hover { background: rgba(91, 194, 231, .22); border-color: rgba(91, 194, 231, .5); }
.yt-play:focus-visible, .yt-mute:focus-visible, .yt-fs:focus-visible,
.yt-track:focus-visible, .yt-gallery-toggle:focus-visible, .yt-gallery-thumb:focus-visible {
  outline: 2px solid var(--ytp-accent); outline-offset: 2px;
}
.yt-play::before { content: '\25B6'; }
.yt-showcase.is-playing .yt-play::before { content: '\275A\275A'; letter-spacing: -3px; }
.yt-fs::before { content: '\26F6'; }

.yt-track { flex: 1 1 auto; height: 6px; border-radius: var(--ytp-radius-pill); background: rgba(255, 255, 255, .18); position: relative; cursor: pointer; touch-action: none; }
.yt-prog { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, var(--ytp-accent-2), var(--ytp-accent)); border-radius: var(--ytp-radius-pill); }

.yt-show-overlay { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; overflow: hidden; background-color: var(--ytp-ink); }
/* `.yt-show-overlay[hidden]` — the class's `display:grid` above and the `[hidden]`
   attribute selector are equal specificity, so without this rule the later one
   in cascade order (our authored class) wins and the JS's `overlay.hidden = true`
   toggle (used to reveal the video during playback) has no visual effect. Same
   latent issue exists in the ported nookpools source; making it explicit here
   since this file must stand alone. */
.yt-show-overlay[hidden] { display: none; }
.yt-show-overlay .yt-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.yt-show-overlay::after { content: ''; position: absolute; inset: 0; background: rgba(3, 10, 16, .58); z-index: 1; }
.yt-replay {
  position: relative; z-index: 2; border: none; cursor: pointer; font-weight: 700; color: #04222f;
  background: linear-gradient(135deg, var(--ytp-accent), var(--ytp-accent-2));
  padding: 13px 24px; border-radius: var(--ytp-radius-pill);
  box-shadow: 0 14px 26px rgba(91, 194, 231, .35);
  transition: transform var(--ytp-transition), box-shadow var(--ytp-transition);
}
.yt-replay:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(91, 194, 231, .45); }
.yt-replay:focus-visible { outline: 2px solid var(--ytp-text); outline-offset: 3px; }

/* ---- Video gallery (3rd player type): stage + thumbnail selector drawer ---- */
.yt-gallery > button { display: none; } /* raw source buttons, replaced by JS */
.yt-gallery-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--ytp-radius-lg); background-color: var(--ytp-ink); background-size: cover; background-position: center; box-shadow: var(--ytp-shadow); }
.yt-gallery-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; opacity: 0; transition: opacity .5s ease; }
/* Same fullscreen-stays-small bug as .yt-showcase (NitroBoards card 019fb65f)
   - rolled out here too per Rick's go-ahead 2026-08-04. */
.yt-gallery-stage:fullscreen, .yt-gallery-stage:-webkit-full-screen {
	width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0;
}
.yt-gallery-stage:fullscreen iframe, .yt-gallery-stage:-webkit-full-screen iframe { width: 100vw; height: 100vh; }
.yt-gallery.is-ready .yt-gallery-stage iframe { opacity: 1; }

.yt-gallery-ctrls { position: absolute; top: 14px; right: 14px; z-index: 3; display: flex; gap: 10px; opacity: 0; transition: opacity var(--ytp-transition); }
.yt-gallery-stage:hover .yt-gallery-ctrls, .yt-gallery-stage:focus-within .yt-gallery-ctrls { opacity: 1; }

/* slide-up drawer holding the thumbnail grid, over the still-playing video */
.yt-gallery-drawer {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; max-height: 100%; overflow-y: auto;
  padding: 18px 18px 60px; background: rgba(5, 18, 29, .55); backdrop-filter: blur(10px);
  transform: translateY(100%); transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.yt-gallery.is-peek .yt-gallery-drawer { transform: translateY(80%); }  /* 5s hint: peek the top of the thumbnails */
.yt-gallery.is-open .yt-gallery-drawer { transform: translateY(0); }    /* parked against the bottom of the player */
.yt-gallery-drawer .yt-gallery-thumbs { width: 100%; }

/* now-playing caption */
.yt-gallery-cap { position: absolute; left: 18px; bottom: 16px; z-index: 3; color: var(--ytp-text); font-weight: 700; font-size: .95rem; text-shadow: 0 2px 14px rgba(0, 0, 0, .85), 0 0 4px rgba(0, 0, 0, .6); pointer-events: none; }

/* central pull-up tab */
.yt-gallery-toggle {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 6;
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 26px; border: none; cursor: pointer;
  color: #04222f; font-weight: 700; font-size: .9rem; letter-spacing: .01em;
  background: linear-gradient(135deg, var(--ytp-accent), var(--ytp-accent-2));
  border-radius: var(--ytp-radius-md) var(--ytp-radius-md) 0 0;
  box-shadow: 0 -6px 22px rgba(91, 194, 231, .5);
  transition: padding-bottom var(--ytp-transition);
}
.yt-gallery-toggle:hover { padding-bottom: 15px; }
.yt-gallery-browse { display: inline-flex; align-items: center; gap: 8px; }
.yt-gallery-browse i { font-style: normal; font-size: .9em; }

.yt-gallery-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.yt-gallery-thumb {
  position: relative; padding: 0; border: 2px solid transparent; border-radius: var(--ytp-radius-md);
  overflow: hidden; cursor: pointer; background: var(--ytp-ink); aspect-ratio: 16 / 9;
  transition: border-color var(--ytp-transition), transform var(--ytp-transition);
}
.yt-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .8; transition: opacity var(--ytp-transition); }
.yt-gallery-thumb:hover { transform: translateY(-2px); }
.yt-gallery-thumb:hover img, .yt-gallery-thumb.is-active img { opacity: 1; }
.yt-gallery-thumb.is-active { border-color: var(--ytp-accent); box-shadow: 0 0 0 1px rgba(91, 194, 231, .35); }
.yt-gallery-thumb .g-label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 10px 8px; text-align: left;
  background: linear-gradient(0deg, rgba(3, 10, 16, .92), transparent);
  color: var(--ytp-text); display: flex; flex-direction: column; gap: 1px; pointer-events: none;
}
.yt-gallery-thumb .g-model { font-weight: 700; font-size: .85rem; line-height: 1.15; }
.yt-gallery-thumb .g-sub { font-size: .7rem; opacity: .82; font-weight: 600; }

@media (max-width: 880px) { .yt-gallery-thumbs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) {
  .yt-gallery-thumbs { grid-template-columns: repeat(2, 1fr); }
  .yt-gallery-cap { top: 14px; bottom: auto; }
}