/* /css/option11.css
   Option 11 — MP3 + Transcription + Translation + Captioning (Multiple)
   Depends on /css/style.css for base layout.
*/

/* Headings spacing */
.card2 h2 { margin-bottom: 10px; }
.card2 h3 { margin: 16px 0 8px; }

/* Keep scroll areas clipped to rounded corners */
.card2 { overflow: hidden; }

/* -------------------------------------------------
   Black output boxes (captions / transcript / translation / log)
   Make the BOX itself black, not only <pre>.
   ------------------------------------------------- */
.captionBox {
  background: #0b1220;
  color: #e5e7eb;
  border-radius: 14px;
  padding: 14px 16px;

  /* scrolling */
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* A bit taller for the log */
#logBox.captionBox { max-height: 320px; }

/* Text handling inside black boxes */
.captionBox pre,
.captionBox p {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.35;
}

/* Meta line inside caption boxes */
.captionMeta {
  margin-top: 10px;
  font-size: 12px;
  opacity: 0.8;
}

/* Ensure our specific boxes scroll (even if base CSS changes) */
#captionsWrap,
#captionsWrap2,
#transcript,
#translationText,
#logBox {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* If #log is the <pre>, keep it unbounded so the container scrolls */
#log { overflow: visible; }

/* Subtle scrollbar (WebKit) */
.captionBox::-webkit-scrollbar { width: 10px; }
.captionBox::-webkit-scrollbar-thumb { border-radius: 10px; }

/* Mobile tweak */
@media (max-width: 900px) {
  .captionBox { max-height: 220px; }
  #logBox.captionBox { max-height: 260px; }
}
/* ===== Captions layout (A + B) ===== */
.capBlock { margin-top: 14px; }

.capControls{
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title toggle"
    "field toggle";
  gap: 8px 12px;
  align-items: end;
  margin-bottom: 8px;
}

.capTitle{
  grid-area: title;
  font-weight: 800;
  font-size: 22px;
  margin: 0;
}

.capField{
  grid-area: field;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  opacity: .85;
}

.capToggle{
  grid-area: toggle;
  align-self: center;
}

/* ensure the box always sits tight under controls */
.capBox{
  margin-top: 0;
}

/* Optional: consistent height for caption boxes */
#captionsWrap.capBox,
#captionsWrap2.capBox{
  min-height: 92px;
}