/* --- video box -----------------------------------------------------
   The published pages ship `video{width:100%}` with no intrinsic box.
   Until metadata arrives the element is the HTML default 300x150, so the
   page renders short and then jumps when the real 1920x1080 frame lands —
   and on a laptop the full-width player then runs past the fold, pushing
   the chapter marks off screen.

   Every chapter is 1920x1080, so we reserve the 16:9 box up front and cap
   it by viewport height. Capping WIDTH (rather than max-height) keeps the
   element itself exactly 16:9, so there are no black pillarbox bars — the
   box shrinks and stays centred instead.

   The 300px is the measured header + title + lede + pill stack above the
   player on a chapter page (281px), rounded up. It only binds below ~860px
   of viewport height — above that the 1040px container is the limit and
   this changes nothing. Below it, the whole player becomes visible without
   scrolling, which is worth more on a short laptop than 100px of width. */
video {
  display: block;
  width: 100%;
  width: min(100%, calc((100vh - 300px) * 16 / 9));
  width: min(100%, calc((100dvh - 300px) * 16 / 9));
  aspect-ratio: 16 / 9;
  height: auto;
  margin-inline: auto;
  background: #000;
  object-fit: contain;
  border-radius: 12px;
}

/* Phones: the page scrolls anyway and vertical space is the scarce thing,
   so let the player take the full column width. */
@media (max-width: 720px) {
  video {
    width: 100%;
    border-radius: 10px;
  }
}

video:fullscreen,
video:-webkit-full-screen {
  width: 100%;
  max-width: none;
  border-radius: 0;
}

/* --- mms: featured card ---------------------------------------------
   The /mms/ gallery marks its two single-card sections ("เริ่มที่นี่" and
   "ตอนพิเศษ") as `.grid.feature`, and styles the card inside as a wide
   horizontal layout: `.feature .card{grid-template-columns:340px 1fr}`.

   But `.grid` is still `repeat(auto-fill,minmax(250px,1fr))`, so the
   container hands that card one narrow ~270px column. The 340px thumbnail
   column then overflows its own card (clipped by the card's
   overflow:hidden) and the text column collapses to ~100px — which is the
   squashed thumbnail over a blank slab that the section renders as today.

   The card layout is right; only the container is wrong. One row, full
   width, and the author's 340px + 1fr works as intended. The ≤720px media
   query in the page already stacks it on phones.

   This belongs in whatever generates /mms/index.html — it is patched here
   because that page is published content on the PVC, not source in git. If
   a feature section ever needs to hold more than one card, drop this. */
.grid.feature {
  grid-template-columns: 1fr;
}

/* Two lines of text against a 191px-tall thumbnail leaves the copy pinned
   to the top of a mostly-empty row. Centring it is what makes the wide card
   read as one unit. Desktop only — below 720px the card stacks and the text
   already sits directly under the thumbnail. */
@media (min-width: 721px) {
  .grid.feature .card > .body {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* --- mms episode gallery: controls added by site.js -------------------
   All of these hang off `.se-*` classes that only exist where site.js
   injects them, so nothing here can touch a page it wasn't meant for.

   Colours derive from the host page's own resolved text colour (`inherit`
   + `currentColor`), NOT from named custom properties. The first version
   read `--card`/`--line`/`--mut`/`--cul` — a dark palette that no pack
   actually defines. /mms/ is a light drafting-paper theme
   (--paper/--paper2/--rule/--pencil/--cu/--cud) and /clinic/ is
   --paper-deep/--warm/--muted/--primary, so every one of those var() calls
   fell through to its dark-theme fallback. `color: var(--ink)` was the one
   that DID resolve — to the page's near-black ink. The two secondary
   buttons therefore rendered #23262A text on a #24272b slab: 1.01:1, an
   unreadable black brick sitting on a #F2EFE9 paper page.

   currentColor cannot miss, because there is no name left to get wrong,
   and it adapts to a pack this file has never seen. It also makes the dark
   scrim at the bottom of this section work for free: .se-up declares its
   own light colour and this same .se-btn rule inverts to match. */
.player { position: relative; }

.se-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 6px 0;
}

.se-btn {
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: inherit;
  /* The plain declaration first: a browser without color-mix() (pre-2023)
     gets a transparent button with a full-strength currentColor outline —
     heavier than intended, but never invisible. */
  background: transparent;
  background: color-mix(in srgb, currentColor 6%, transparent);
  border: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 24%, transparent);
  border-radius: 10px;
  padding: 9px 15px;
  cursor: pointer;
  transition: border-color .15s, background .15s, opacity .15s;
}
.se-btn:hover:not(:disabled) { border-color: var(--cu, #c97b4c); }
.se-btn:disabled { opacity: .35; cursor: default; }

/* --cud is /mms/'s dark copper. The lighter --cu is the page's fill accent
   (the ▶ circle), but white on it is 3.3:1 — under AA for 14px bold. --cud
   is 5.9:1, and a darker primary reads correctly as the emphasised action
   now that the secondaries beside it are light. */
.se-btn.se-primary {
  background: var(--cud, var(--cu, #9a5029));
  border-color: var(--cud, var(--cu, #9a5029));
  color: #fff;
}

.se-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  color: inherit;
  color: color-mix(in srgb, currentColor 62%, transparent);
  font-size: 13.5px;
}
.se-link {
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  /* Sits inside .se-note, so plain currentColor would inherit the muted
     62% — the accent is what marks it as the clickable half. */
  color: currentColor;
  color: var(--cud, var(--cu, currentColor));
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

/* Watched state, drawn onto the existing .thumb (which is position:relative
   already, for the duration badge). */
.se-prog {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, .16);
}
.se-prog i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--cu, #c97b4c);
  transition: width .3s;
}
.se-done {
  position: absolute;
  left: 8px; top: 8px;
  background: rgba(0, 0, 0, .75);
  color: #7fd18d;
  font-size: 12px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 7px;
}

/* End-of-episode "up next", over the player. The scrim is always dark, so
   it declares its own light text colour instead of inheriting the page's —
   on the light /mms/ paper theme the episode title was near-black ink on a
   near-black overlay. Declaring it here also re-points currentColor for the
   .se-btn rule above, so the two buttons inside invert to their
   dark-background form without needing a rule of their own. */
.se-up {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  background: rgba(10, 11, 13, .88);
  color: #f4f5f4;
  backdrop-filter: blur(3px);
  z-index: 2;
}
.se-up small {
  color: inherit;
  color: color-mix(in srgb, currentColor 62%, transparent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.se-up b {
  font-size: clamp(17px, 2.4vw, 22px);
  font-weight: 800;
  max-width: 34ch;
  line-height: 1.4;
}
.se-up .se-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* --- download hardening (cosmetic half; see site.js) ---------------- */
video::-internal-media-controls-download-button { display: none; }
video::-webkit-media-controls-enclosure { overflow: hidden; }