.sv-player { position: relative; margin: 0; }
/* The Brailie base theme hides native controls on every <video> (its
   background-video feature: brailie/style.css, video::-webkit-media-controls
   { display: none !important }). Bring them back for this player only. */
.sv-player video::-webkit-media-controls { display: flex !important; }
.sv-player video::-webkit-media-controls-enclosure { display: flex !important; }
.sv-player video { display: block; width: 100%; height: auto; background: #000; border-radius: 10px; }
.sv-player--vertical { max-width: 420px; }
.sv-player--vertical video { aspect-ratio: 9 / 16; object-fit: contain; }
.sv-player--landscape video { aspect-ratio: 16 / 9; object-fit: contain; }
.sv-player.is-error::after {
  content: "This video link expired. Reload the page to keep watching.";
  position: absolute; inset: auto 0 0 0; padding: 10px 12px; font-size: 14px;
  color: #fff; background: rgba(0, 0, 0, 0.75); border-radius: 0 0 10px 10px;
}

/* Item page (first pass; the design round refines this). */
.sv-item__layout { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) {
  .sv-item--vertical .sv-item__layout { grid-template-columns: minmax(280px, 420px) 1fr; }
  .sv-item--landscape .sv-item__layout { grid-template-columns: 1fr; }
  .sv-item--vertical .sv-player { position: sticky; top: 100px; }
}
.sv-item__eyebrow { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; opacity: .65; margin-bottom: 6px; }
.sv-status { font-weight: 600; }
.sv-credit { font-size: 18px; margin-bottom: 4px; }
.sv-credit__handle { opacity: .65; margin-left: 4px; }
.sv-item__body h2 { font-size: 15px; letter-spacing: .05em; text-transform: uppercase; margin: 28px 0 8px; opacity: .7; }
.sv-item__caption p { white-space: normal; }
.sv-tag { display: inline-block; font-size: 13px; margin: 0 10px 4px 0; opacity: .65; }
/* Collapsible boxes: Transcript, Source and credit. */
.sv-box { margin-top: 20px; padding: 14px 20px; border: 1px solid rgba(0, 0, 0, .15); border-radius: 8px; font-size: 14px; }
.sv-box[open] { padding-bottom: 20px; }
.sv-box summary { cursor: pointer; font-weight: 600; font-size: 15px; }
.sv-box[open] summary { margin-bottom: 8px; }
.sv-box__meta { font-weight: 400; opacity: .6; margin-left: 6px; font-size: 13px; }
.sv-item__transcript { margin-top: 20px; }
.sv-item__source dt { margin-top: 14px; font-weight: 600; }
.sv-item__source dd { margin: 3px 0 0; }
.sv-transcript { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; }
.sv-transcript li { display: flex; gap: 10px; padding: 5px 0; line-height: 1.5; }
.sv-transcript__time {
  flex: none; min-width: 3.2em; padding: 1px 6px; font: inherit; font-size: 12px; font-variant-numeric: tabular-nums;
  border: 1px solid rgba(0, 0, 0, .2); border-radius: 4px; background: transparent; color: inherit; cursor: pointer; align-self: flex-start;
}
.sv-transcript__time:hover { background: #151515; color: #fff; border-color: #151515; }
.sv-transcript__note { margin: 12px 0 0; font-size: 12px; opacity: .65; }
.sv-hash { word-break: break-all; font-size: 12px; }
.sv-player__missing { aspect-ratio: 9 / 16; display: grid; place-items: center; background: #111; color: #ccc; border-radius: 10px; }

/* Caption / description box text: same size as the other boxes. */
.sv-box__text { line-height: 1.6; overflow-wrap: anywhere; }
.sv-box__text .sv-transcript__time { margin-right: 4px; }
.sv-item__caption { margin-top: 28px; }

/* ── Media Chrome player (item pages and gallery cards) ───────────────── */
.sv-mc {
  display: block; width: 100%; height: 100%; background: #000;
  --media-primary-color: #fff;
  --media-control-background: rgb(0 0 0 / .55);
  --media-control-hover-background: rgb(0 0 0 / .8);
  --media-range-track-height: 4px;
  --media-font-family: inherit;
}
.sv-mc video { width: 100%; height: 100%; object-fit: contain; }
.sv-mc__bar { width: 100%; }
.sv-mc__bar media-time-range { flex: 1; min-width: 40px; }
/* Big centered play button only while paused. */
.sv-mc__big { --media-button-icon-width: 44px; --media-button-icon-height: 44px; padding: 14px; border-radius: 50%; }
.sv-mc:not([mediapaused]) .sv-mc__big { display: none; }
/* Controls auto-hide only while playing: a paused player always shows its
   bar and the big play button, even when the pointer is elsewhere. */
.sv-mc[mediapaused] > .sv-mc__bar,
.sv-mc[mediapaused] > .sv-mc__big { opacity: 1; visibility: visible; }
/* Compact row on narrow players (cards): media-controller sets breakpointsm
   at 384px and breakpointmd at 576px wide. */
.sv-mc:not([breakpointsm]) .sv-mc__sm,
.sv-mc:not([breakpointmd]) .sv-mc__md { display: none; }
/* Our wide-view button, styled like the Media Chrome buttons beside it. */
.sv-mc__wide {
  display: inline-flex; align-items: center; justify-content: center; align-self: stretch;
  padding: var(--media-button-padding, var(--media-control-padding, 10px)); border: 0; cursor: pointer;
  background: var(--media-control-background); color: var(--media-primary-color);
}
.sv-mc__wide:hover, .sv-mc__wide:focus-visible { background: var(--media-control-hover-background); outline: none; }
.sv-mc__wide svg { width: var(--media-button-icon-width, 24px); height: var(--media-button-icon-height, 24px); }
/* Item page player box. */
.sv-player .sv-mc { border-radius: 10px; overflow: hidden; }
.sv-player--vertical .sv-mc { aspect-ratio: 9 / 16; }
.sv-player--landscape .sv-mc { aspect-ratio: 16 / 9; }

/* Caption as the dek: directly under the headline, like a news or video
   site's subtitle. Long captions clamp to five lines with a "more" link. */
.sv-item__dek { font-size: 17px; line-height: 1.6; margin: 4px 0 14px; opacity: .85; overflow-wrap: anywhere; }
.sv-item__dek.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
.sv-item__dek .sv-transcript__time { margin-right: 4px; }
.sv-item__more { font: inherit; font-size: 15px; padding: 0; margin: -8px 0 14px; border: 0; background: none; color: inherit; text-decoration: underline; cursor: pointer; opacity: .7; }
.sv-item__more:hover { opacity: 1; }

/* Public embed on the item page: a plain 16:9 frame. */
.sv-player--embed { aspect-ratio: 16 / 9; background: #000; }
.sv-player--embed iframe { display: block; width: 100%; height: 100%; border: 0; }