/* A recording's column (frontend/panel/content/recording/): a drill's tape, a
   podcast episode and a media file alike. Values from output/reference/behaviours/
   content-courses.md #132–#139, content-reading.md #125–#133 and
   content-videofile.md #85–#94, cited per block. */

.rec-column {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.rec-player {
  padding: 8px 12px;
}

.rec-audio {
  width: 100%;
}

.rec-player-failed .ct-retry {
  justify-content: center;
}

.rec-strip {
  display: block;
  flex-shrink: 0;
  width: 100%;
  height: 20px;
}

.rec-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 12px;
  text-align: center;
}

.rec-notice[hidden] {
  display: none;
}

.rec-notice-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.rec-make-subtitles,
.rec-cancel {
  gap: 6px;
}

.rec-make-subtitles:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Why the button is off (the server's switch, its stop, no model, signed out): said beside it, as N38's select. */
.rec-make-refused {
  max-width: 560px;
  color: var(--text-muted);
  font-size: 13px;
}

/* The header over the lines (pf:L2700–2830): the timeline strip in the middle on a
   recording, the tabs and the search on the right, a line under it. */
.rec-head {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  border-bottom: 3px solid color-mix(in srgb, var(--ink) 6.7%, transparent);
}

.rec-head-start {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  height: 34px;
  padding-right: 12px;
}

.rec-head-strip {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  min-width: 100px;
  margin: 0 12px;
}

.rec-head-strip:empty {
  min-width: 0;
  margin: 0;
}

.rec-head-end {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  align-self: stretch;
}

.rec-head-tabs {
  display: flex;
  align-self: stretch;
}

.rec-head .ss {
  margin: 0 10px 0 3px;
}

/* A video's list header: ✕ closes the list on a big screen (pf:L2735–2752). */
.rec-close-list {
  display: inline-flex;
  width: 32px;
  height: 32px;
  margin: 0 5px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-strong);
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.3s;
}

.rec-close-list:hover {
  opacity: 1;
}

/* The lines, one line at a time or the Words tab, with the band or the big play button under them. */
.rec-body {
  position: relative;
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  min-height: 0;
}

.rec-list {
  position: relative;
  flex: 1 1 0%;
  min-height: 0;
}

/* Over the top of the lines (recording-view.js setBanner): the reference's install alert there, left 0, top 0,
   10 px short of the full width, above the lines (ix:L127156–127175). */
.rec-banner {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: calc(100% - 10px);
}

.rec-banner .ct-install-banner.is-video {
  margin: 0;
  padding: 0 12px;
}

.rec-banner .ct-install-banner.is-video .ct-install-text {
  padding: 4px 8px 4px 0;
}

.rec-list[hidden],
.rec-single-box[hidden],
.rec-words[hidden] {
  display: none;
}

.rec-lines {
  padding-bottom: 40px;
}

/* One line at a time (read#133; pf:L1040–1070): the room above the band when it shows. */
.rec-single-box {
  flex: 1 1 0%;
  min-height: 0;
  padding: 8px 0 20px;
  overflow-y: auto;
}

.rec-words {
  flex: 1 1 0%;
  padding-top: 8px;
}

/* The list keeps 130 px free above the band (GESTURE_BAND.LIST_PADDING_PX; pf:L1063). */
.rec-body.has-band .rec-lines,
.rec-body.has-band .rec-single-box {
  padding-bottom: 130px;
}

.rec-stage {
  display: contents;
}

/* The band's look off the chat: its fill does not fade at the bottom (Tze, ix:L120540–120548). */
.rec-column .gb {
  background: linear-gradient(to bottom, #6666ff18 0%, #6666ff25 25%);
}

/* The timed lines: no margin between rows, the room is the silence's (read#131; ix:L116806–116895). */
.rec-lines .rd-row {
  margin: 0;
}

.rec-lines .rd-block-inner {
  position: relative;
}

/* "Loading text…" under a spinner while the lines load (read#131; ix:L127127–127137). */
.rec-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 24px;
  color: color-mix(in srgb, var(--ink) 53.3%, transparent);
  text-align: center;
}

/* The time of the top line while the list scrolls (read#131; ix:L127337–127358). */
.rec-bubble {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 10;
  padding: 2px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 86.7%, transparent);
  color: color-mix(in srgb, var(--ink) 80%, transparent);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 0.25s;
}

.rec-bubble.is-shown {
  opacity: 1;
}

/* A video (video-layout.js; content-videofile.md #88–#93; md:L26160–26440) ------------------ */

.rec-video-layout {
  position: relative;
  display: flex;
  flex: 1 1 0%;
  min-height: 0;
}

.rec-video-layout:has(.rec-divider.is-dragging) {
  user-select: none;
}

.rec-media-side {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  width: var(--rec-video-width, 100%);
  min-width: 0;
  padding: 1px 5px;
}

.rec-lines-side {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.rec-lines-side[hidden],
.rec-bottom[hidden],
.rec-open-list[hidden],
.rec-divider[hidden] {
  display: none;
}

/* The dividers (dividers.js; md:L25135–25300): a band 12 px wide over the gap, a thin grip in the middle,
   blue under the pointer and while dragged. */
.rec-divider {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  background: transparent;
  touch-action: none;
  transition: background 0.15s;
}

.rec-divider.is-col {
  width: 12px;
  margin: 0 -6px;
  cursor: col-resize;
}

.rec-divider.is-row {
  align-self: stretch;
  height: 12px;
  margin: -6px 0;
  cursor: row-resize;
}

.rec-divider:hover {
  background: rgba(100, 150, 255, 0.25);
}

.rec-divider.is-dragging {
  background: rgba(100, 150, 255, 0.4);
  transition: none;
}

.rec-divider-grip {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 1px;
  background: color-mix(in srgb, var(--ink) 15%, transparent);
  transform: translate(-50%, -50%);
  transition: background 0.15s;
}

.rec-divider.is-col .rec-divider-grip {
  width: 2px;
  height: 40px;
}

.rec-divider.is-row .rec-divider-grip {
  width: 40px;
  height: 2px;
}

.rec-divider.is-dragging .rec-divider-grip {
  background: rgba(100, 150, 255, 0.8);
  transition: none;
}

/* The video in a black box with round corners, as wide as the height left over the bottom panel allows (md:L26054–26086). */
.rec-video-box {
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: max(100px, calc((100vh - var(--appbar-h) - var(--rec-bottom-px, 340px)) / 0.5625));
}

.rec-video-layout .rec-player {
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--on-media) 5%, transparent);
  border-radius: 12px;
  background: #000000;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
}

.rec-video-layout.is-big .rec-video-box {
  min-width: 300px;
}

.rec-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000000;
  object-fit: contain;
}

/* Under the video: the timeline strip and the current line alone (vf#92, #93; md:L25008–25105). */
.rec-bottom {
  position: relative;
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  padding-top: 8px;
}

.rec-bottom .rec-strip {
  width: calc(100% - 24px);
  margin: 0 12px 8px;
}

.rec-bottom-single {
  flex: 1 1 0%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

/* The line alone under a video sits in the panel without the list page's top room (md:L25095–25103);
   its sides keep room for the play mark and the star and copy beside the card. */
.rec-bottom-single .sl-panel {
  padding: 0 80px;
}

/* With its buttons in the row under the video (line-controls.js; owner, 2026-10-15) the line takes the width. */
.rec-bottom-single .sl-panel.is-bare {
  padding: 0 24px;
}

/* The row right under the line and its translation (line-controls.js; owner, 2026-10-15): the line's star and
   copy, previous, the line again and next, then the loop, auto-pause and the speed; the middle stays centred.
   The line's box takes only its height, so the row follows it. */
.rec-bottom.has-controls .rec-bottom-single {
  flex: 0 1 auto;
}

.rec-controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin: 2px 12px 12px;
}

.rec-controls[hidden] {
  display: none;
}

.rec-controls-side {
  display: flex;
  align-items: center;
  gap: 4px;
}

.rec-controls-side.is-start {
  justify-content: flex-end;
}

.rec-controls-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rec-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: color-mix(in srgb, var(--ink) 80%, transparent);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.rec-control:hover {
  background: var(--hover);
  color: var(--selected-text);
}

.rec-control.is-main {
  width: 48px;
  height: 48px;
  background: var(--accent);
  color: var(--on-accent);
}

.rec-control.is-main:hover {
  background: var(--accent-hover);
  color: var(--on-accent);
}

/* The star and the copy as round icons, the size of the switches beside them. */
.rec-controls .cb-star,
.rec-controls .cb-icon {
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
}

.rec-controls .cb-star:disabled,
.rec-controls .cb-icon:disabled {
  opacity: 0.35;
  cursor: default;
}

.rec-bottom.has-band .rec-bottom-single {
  padding-bottom: 130px;
}

/* The list off on a big screen: the bottom panel keeps the height its divider sets (mediaBottomPx). */
.rec-video-layout.is-big:not(.has-list) .rec-bottom {
  flex: none;
  height: var(--rec-bottom-px);
}

/* The round button that opens the list again (vf#90; md:L25113–25134): on the page beside the video, in its look. */
.rec-open-list {
  position: absolute;
  top: 50px;
  right: 8px;
  z-index: 20;
  display: inline-flex;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface-raised) 75%, transparent);
  color: color-mix(in srgb, var(--ink) 70%, transparent);
  cursor: pointer;
}

.rec-open-list:hover {
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
}

/* A small screen (vf#89; md:L26196–26262): 12 px over the page; with the list the video is a
   240 × 135 box at the top left over it, the list's header 135 px high on the right. */
.rec-video-layout.is-small {
  padding-top: 12px;
}

.rec-video-layout.is-small .rec-video-box {
  max-width: max(100px, calc((100vh - 420px) / 0.5625));
}

.rec-video-layout.is-small.has-list .rec-media-side {
  position: absolute;
  top: 12px;
  left: 0;
  z-index: 1;
  display: block;
  width: 240px;
  height: 135px;
  padding: 0;
}

.rec-video-layout.is-small.has-list .rec-video-box,
.rec-video-layout.is-small.has-list .rec-player {
  width: 240px;
  height: 135px;
}

.rec-video-layout.is-small.has-list .rec-video {
  height: 100%;
}

.rec-video-layout.is-small.has-list .rec-head {
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  height: 135px;
}

.rec-video-layout.is-small.has-list .rec-head-end {
  align-self: flex-end;
  height: 42px;
}

/* The video's full screen (player-fullscreen.js; vf#82, #91; md:L26054–26086, L25890–25910): the page's root
   is the full-screen element, as the reference's body is, and the layout covers it over the app bar and drawer
   (under the toasts and the tooltips); the video fills the height with no box, the list beside it on a big screen. */
.rec-video-layout.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1250;
  padding: 0;
  background: #000000;
}

.rec-video-layout.is-fullscreen .rec-media-side {
  height: 100%;
  padding: 0;
}

.rec-video-layout.is-fullscreen .rec-video-box {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  height: 100%;
}

.rec-video-layout.is-fullscreen .rec-player {
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.rec-video-layout.is-fullscreen .rec-video {
  height: 100%;
  aspect-ratio: auto;
}

.rec-video-layout.is-fullscreen .rec-lines-side {
  background: var(--bg);
}

/* The band over the video (fullscreen-band.js; vf#91): 60 px over the video's bottom, 50 px in from each side
   (28 px on a small screen), where its move handle puts it (md:L25852, L25888–25900). */
.rec-video-box > [data-wovia="band"] {
  position: absolute;
  right: 0;
  bottom: 60px;
  left: 0;
  z-index: 2;
  --lr-band-pad-x: 50px;
  pointer-events: none;
}

.rec-video-layout.is-small .rec-video-box > [data-wovia="band"] {
  --lr-band-pad-x: 28px;
}

.rec-video-box > [data-wovia="band"].is-moved {
  bottom: var(--lr-band-bottom);
}

.rec-video-box > [data-wovia="band"][hidden] {
  display: none;
}

/* Wovia's pill with the subtitle controls in full screen (fullscreen-band.js; player/ui/player-pill.css): over the
   video's top left corner where the player has no bar of its own; gone with the band. */
.rec-video-box > [data-wovia="controls"] {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
}

[data-wovia="controls"][hidden] {
  display: none;
}

/* The full-screen button over the video's top right corner, shown while the pointer is on the video. */
.rec-fullscreen {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: inline-flex;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--on-media) 20%, transparent);
  border-radius: 50%;
  background: rgba(15, 18, 22, 0.75);
  color: color-mix(in srgb, var(--on-media) 70%, transparent);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
}

.rec-video-box:hover > .rec-fullscreen,
.rec-fullscreen:focus-visible {
  opacity: 1;
}

.rec-fullscreen:hover {
  background: rgba(15, 18, 22, 0.92);
}

@media (hover: none) {
  .rec-fullscreen {
    opacity: 1;
  }
}

.rec-video-layout.is-small.has-list .rec-fullscreen {
  top: 4px;
  right: 4px;
  padding: 3px;
}