/* videos.css — the video library (/videos) and the share page (/video?slug=).
   Posters are 9:16, so the tiles are PORTRAIT like film posters rather than the
   landscape strips a desktop video site uses. That is what lets four fit across
   a phone instead of two, and the title cards stay legible at 104px because
   they were drawn to be readable in a chat preview. */

.wg-vid-main { padding-bottom: 40px; }

/* The head was eating a third of a phone screen for one word. It is a label,
   not a hero: small, tight, and out of the way of the player. */
.wg-vid-head { padding: 2px 0 8px; }
.wg-vid-head h1 { margin: 0; font-size: 1.15rem; }
.wg-vid-tag { margin: 0 0 6px; color: var(--wg-muted, #6b7280); }
.wg-vid-silent {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  font-size: .85rem; color: var(--wg-muted, #6b7280);
}
.wg-vid-silent .wg-ico { width: 16px; height: 16px; }
.wg-vid-empty { color: var(--wg-muted, #6b7280); padding: 24px 0; }

/* ── player ─────────────────────────────────────────────────────────── */
/* STICKY, like a video site: the player stays put while the shelves scroll, so
   choosing a video never means scrolling back to the top to watch it.
   --wg-vid-sticky-top is measured from the real header by videos.js, because
   the header's height changes with breakpoint and a hard-coded offset would
   either overlap it or leave a gap. */
.wg-vid-player {
  position: sticky; top: var(--wg-vid-sticky-top, 58px); z-index: 4;
  border: 1px solid var(--wg-border-soft, #e6efe9);
  border-radius: 16px; overflow: hidden; background: var(--wg-bg, #fff);
  margin-bottom: 18px;
}

/* THE STAGE IS THE SIZE OF THE VIDEO, not the width of the page.
   The clips are 9:16. Letting a full-width box carry that aspect ratio made a
   player taller than the screen with black bars either side of a portrait
   video. Height is the constraint; width follows from it, and the stage is
   centred so the surround is symmetrical. */
.wg-vid-stage {
  position: relative; background: #0c0f0e;
  height: var(--wg-vid-h, 46vh);
  width: calc(var(--wg-vid-h, 46vh) * 9 / 16);
  max-width: 100%;
  margin: 0 auto;
}
.wg-vid-stage video {
  display: block; width: 100%; height: 100%;
  object-fit: contain; background: #0c0f0e;
}
/* The big play button is our own, over the poster. It hides the moment the
   native controls take over, so there are never two play affordances. */
.wg-vid-big {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 68px; height: 68px; border-radius: 50%; border: 0; cursor: pointer;
  /* Translucent, so the poster's title reads through it. The poster IS a title
     card, and a solid disc sat right on the words it exists to show.
     backdrop-filter darkens and blurs what is behind just enough to keep the
     white glyph legible over a light poster; browsers without it fall back to
     the flat rgba, which is still readable because the posters are dark. */
  background: rgba(14, 175, 76, .3); color: #fff;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  border: 2px solid rgba(255, 255, 255, .62);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .22);
  transition: transform .18s var(--wg-ease-spring, ease-out);
}
.wg-vid-big .wg-ico {
  width: 30px; height: 30px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55));
}
.wg-vid-big:hover { transform: translate(-50%, -50%) scale(1.06); background: rgba(14, 175, 76, .58); }
.wg-vid-big[hidden] { display: none; }

.wg-vid-meta {
  display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; padding: 12px 14px;
}
.wg-vid-metatext { flex: 1 1 220px; min-width: 0; }
.wg-vid-meta h1, .wg-vid-meta h2 { margin: 0 0 2px; font-size: 1.05rem; }
.wg-vid-meta p { margin: 0; color: var(--wg-muted, #6b7280); font-size: .9rem; }
.wg-vid-acts { display: flex; gap: 5px; flex-wrap: wrap; }
.wg-vid-act {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  line-height: 1.4;
  border: 1px solid var(--wg-border, #e4e4e4); background: var(--wg-bg, #fff);
  color: var(--wg-color-dark, #0b8f3e); border-radius: 999px;
  padding: 4px 10px; font: inherit; font-size: .76rem; font-weight: 600;
  transition: transform .14s var(--wg-ease-spring, ease-out), background .14s;
}
.wg-vid-act .wg-ico { width: 14px; height: 14px; }
.wg-vid-act:hover { background: var(--wg-bg-soft, #f6f8f7); }
.wg-vid-act:active { transform: scale(.97); }
.wg-vid-act:focus-visible { box-shadow: var(--wg-focus-ring, 0 0 0 3px rgba(14,175,76,.35)); outline: none; }
.wg-vid-act-ghost { color: var(--wg-muted, #6b7280); font-weight: 500; }

.wg-vid-embedbox { padding: 0 14px 14px; }
.wg-vid-embedbox textarea {
  width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem; border: 1px solid var(--wg-border, #e4e4e4);
  border-radius: 10px; padding: 8px 10px; resize: vertical;
  background: var(--wg-bg-soft, #f6f8f7); color: inherit;
}

/* ── shelves ────────────────────────────────────────────────────────── */
.wg-vid-shelf { margin: 0 0 6px; }
.wg-vid-shelfhead {
  display: flex; align-items: center; gap: 8px; padding: 10px 0 8px;
  cursor: pointer; list-style: none; user-select: none;
}
/* The default disclosure triangle is replaced by our own chevron, which can be
   placed at the END of the row where the eye already is. */
.wg-vid-shelfhead::-webkit-details-marker { display: none; }
.wg-vid-shelfhead::marker { content: ''; }
.wg-vid-shelfhead h2 { margin: 0; font-size: .98rem; }
.wg-vid-chev {
  margin-left: auto; width: 9px; height: 9px; flex: 0 0 auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  color: var(--wg-muted, #6b7280);
  transition: transform .18s var(--wg-ease-out, ease-out);
}
.wg-vid-shelf[open] .wg-vid-chev { transform: rotate(-135deg) translate(-2px, -2px); }
.wg-vid-shelfhead:focus-visible { box-shadow: var(--wg-focus-ring, 0 0 0 3px rgba(14,175,76,.35)); border-radius: 8px; }
.wg-vid-cnt { font-size: .8rem; color: var(--wg-muted, #6b7280); }

/* Horizontal rail. Scroll-snap so a swipe lands on a tile rather than between
   two, and the scrollbar is hidden because the posters already imply overflow. */
.wg-vid-rail {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.wg-vid-rail::-webkit-scrollbar { display: none; }

.wg-vid-tile {
  flex: 0 0 auto; width: 104px; text-decoration: none; color: inherit;
  scroll-snap-align: start;
}
.wg-vid-thumb {
  position: relative; display: block; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--wg-border-soft, #e6efe9);
  background: var(--wg-bg-soft, #f6f8f7); aspect-ratio: 9 / 16;
  transition: transform .18s var(--wg-ease-spring, ease-out), box-shadow .18s;
}
.wg-vid-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wg-vid-tile:hover .wg-vid-thumb {
  transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}
.wg-vid-tile:focus-visible .wg-vid-thumb {
  box-shadow: var(--wg-focus-ring, 0 0 0 3px rgba(14,175,76,.35));
}
.wg-vid-dur {
  position: absolute; right: 5px; bottom: 5px; background: rgba(0, 0, 0, .72);
  color: #fff; font-size: .68rem; padding: 1px 6px; border-radius: 5px;
}
.wg-vid-tt {
  display: block; font-size: .8rem; line-height: 1.35; margin-top: 6px;
  font-weight: 500;
}
.wg-vid-tile.is-playing .wg-vid-thumb { border-color: var(--wg-color, #0eaf4c); }

.wg-vid-back {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  color: var(--wg-muted, #6b7280); font-size: .88rem; padding: 6px 0 12px;
}
.wg-vid-back .wg-ico { width: 16px; height: 16px; }

/* Tutorials -> videos callout. */
.wg-tut-videos {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  border: 1px solid var(--wg-color, #0eaf4c); border-radius: 14px;
  padding: 12px 14px; margin: 0 0 16px; background: var(--wg-bg-soft, #f6f8f7);
}
.wg-tut-videos > div { flex: 1 1 200px; min-width: 0; }
.wg-tut-videos p { margin: 0; font-size: .92rem; }
.wg-tut-videos p.s { color: var(--wg-muted, #6b7280); font-size: .84rem; }
.wg-tut-videos .wg-btn { white-space: nowrap; }

/* ── desktop: player left, groups down the right ──────────────────────
   The shelves were full-width rows beneath a portrait player, so most of a wide
   screen was empty either side of it while the groups sat below the fold. This
   is the watch-page shape: the player holds the left column and stays put, the
   groups fill the space that was wasted.
   Horizontal rails become wrapping grids here — a narrow column you have to
   scroll sideways is worse than one you can read down. */
/* Set by videos.js only at the width where the split layout exists.
   BOTH elements: the scrolling box is documentElement, so locking body alone
   left the window scrolling and the heading still slid off the top. */
html.wg-vid-locked, html.wg-vid-locked body { overflow: hidden; height: 100%; }

@media (min-width: 1000px) {
  .wg-vid-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 0 26px; align-items: start;
    --wg-vid-h: 58vh;
  }
  .wg-vid-head { grid-column: 1 / -1; }
  .wg-vid-player { grid-column: 1; margin-bottom: 0; }
  .wg-vid-shelves { grid-column: 2; }
  .wg-vid-shelf:first-child .wg-vid-shelfhead { padding-top: 0; }
  /* THE PAGE ITSELF DOES NOT SCROLL. Only the group column does.
     Main is exactly the space under the header and clips; the head and the
     player are fixed inside it, so the title can never scroll off the top the
     way it did before. */
  .wg-vid-main {
    height: calc(100vh - var(--wg-vid-sticky-top, 65px));
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden; box-sizing: border-box;
  }
  .wg-vid-head   { grid-row: 1; }
  .wg-vid-player { grid-row: 2; align-self: start; position: static; }
  .wg-vid-shelves {
    grid-row: 2; min-height: 0; height: 100%;
    overflow-y: auto; overscroll-behavior: contain; padding-right: 4px;
  }

  /* Posters above titles, on the founder's note. Collapsible groups are what
     make this affordable: a closed group is one row, so the vertical cards
     that would otherwise bury the library now only cost space where the reader
     has asked for them. */
  /* Four across, not three. At three a four-video group wrapped to two rows and
     filled the column on its own, leaving the other six headings below the fold
     — which defeats collapsing them in the first place. At four, most groups are
     a single row, so the whole library stays in view with one group open. */
  .wg-vid-rail {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 8px;
    overflow: visible; scroll-snap-type: none; padding-bottom: 4px;
  }
  .wg-vid-tt { font-size: .74rem; line-height: 1.3; }
  .wg-vid-tile { width: auto; }
  .wg-vid-tile.is-playing .wg-vid-tt { color: var(--wg-color-dark, #0b8f3e); font-weight: 600; }
}

/* Wider still: the player has room to grow without pushing the groups off. */
@media (min-width: 1300px) {
  .wg-vid-main { grid-template-columns: minmax(0, 1fr) 420px; --wg-vid-h: 62vh; }
  .wg-vid-rail { grid-template-columns: repeat(5, 1fr); }
}

/* Short screens: a tall portrait player plus its meta row leaves no shelf
   visible, which defeats the point of making it sticky. Measured on a 1280x720
   window, where 54vh left zero shelf headings below the fold; 38vh leaves a
   full tile and its heading. The threshold is 820px, not 700px, because a
   laptop window is routinely 700-800px tall once browser chrome is taken off. */
@media (max-height: 820px) {
  .wg-vid-main { --wg-vid-h: 38vh; }
}

@media (prefers-reduced-motion: reduce) {
  .wg-vid-big, .wg-vid-thumb, .wg-vid-act { transition: none; }
}

/* The share page has no shelves to scroll past, so the player neither sticks
   nor needs to stay small. */
.wg-vid-single .wg-vid-player { position: static; }
.wg-vid-single { --wg-vid-h: 64vh; }

/* FULLSCREEN. The stage is normally sized to the video (a narrow 9:16 box), and
   that sizing follows it into fullscreen, leaving a small portrait window on a
   black screen. Reset it to fill, and let the video letterbox itself. */
.wg-vid-stage:fullscreen,
.wg-vid-stage:-webkit-full-screen { width: 100%; height: 100%; max-width: none; }
.wg-vid-stage:fullscreen video,
.wg-vid-stage:-webkit-full-screen video { width: 100%; height: 100%; }
/* The overlay play button is meaningless over a fullscreen video that is
   already running, and it is drawn at the wrong scale there. */
.wg-vid-stage:fullscreen .wg-vid-big,
.wg-vid-stage:-webkit-full-screen .wg-vid-big { display: none; }

/* ── admin: Video guides tab ─────────────────────────────────────────── */
.wg-vadm-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.wg-vadm-row {
  display: flex; gap: 12px; align-items: flex-start; padding: 10px;
  border: 1px solid var(--wg-border, #e4e4e4); border-radius: 12px;
  background: var(--wg-bg, #fff);
}
.wg-vadm-th {
  width: 44px; height: 78px; object-fit: cover; border-radius: 6px; flex: 0 0 44px;
  border: 1px solid var(--wg-border-soft, #e6efe9);
}
.wg-vadm-main { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.wg-vadm-main input {
  width: 100%; padding: 5px 8px; border: 1px solid var(--wg-border, #e4e4e4);
  border-radius: 8px; font: inherit; font-size: .86rem; background: var(--wg-bg, #fff); color: inherit;
}
.wg-vadm-title { font-weight: 600; }
.wg-vadm-meta { font-size: .74rem; color: var(--wg-muted, #6b7280); }
.wg-vadm-meta code { font-size: .72rem; }
.wg-vadm-warn { color: #b3261e; }
.wg-vadm-ctl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wg-vadm-ctl select, .wg-vadm-order {
  padding: 5px 8px; border: 1px solid var(--wg-border, #e4e4e4); border-radius: 8px;
  font: inherit; font-size: .8rem; background: var(--wg-bg, #fff); color: inherit;
}
.wg-vadm-order { width: 64px; }
.wg-vadm-sw { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; white-space: nowrap; }
@media (max-width: 780px) { .wg-vadm-row { flex-wrap: wrap; } .wg-vadm-ctl { width: 100%; } }