/* Depends on: tokens.css -- linked as a separate <link> by every page that uses it, never @import-ed
   (test_template_lint). The window that composes a Reel before it is published -- preview, trim, text,
   caption -- shared by the Reels upload (/reels/) and the lap player's "Publicar en Reels"
   (core/_reel_compose.html, static/js/reel_compose.js). Moved out of reels.css, whose page-wide rules
   (html/body overflow) must not reach the lap player. */

.reel-upload-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(6,8,10,0.85); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.reel-upload-overlay[hidden] { display: none; }
.reel-upload-card {
  position: relative; width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto;
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: 18px; padding: 24px;
}
.reel-upload-card h2 { font-size: 17px; font-weight: 800; margin: 0 0 16px; }
.reel-upload-close {
  position: absolute; top: 14px; right: 14px; font-size: 22px; line-height: 1;
  color: var(--text-tertiary); background: none; border: none; cursor: pointer;
}
.reel-upload-close:hover { color: var(--text-primary); }
.reel-upload-preview {
  position: relative; width: 100%; aspect-ratio: 9/16; max-height: 320px; margin: 0 auto;
  background: var(--surface); border: 1px dashed var(--line); border-radius: 14px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
/* contain, not cover: the preview shows the whole picture so text placed on it sits where viewers will see it. */
#reel-preview-video { display: none; width: 100%; height: 100%; object-fit: contain; background: #000; }
.reel-upload-preview.has-video #reel-preview-video { display: block; }
/* With a clip chosen, the preview is the 9:16 frame the Reel is watched in (sized by its height; the
   aspect-ratio above gives the width), so text can go in the bars of a clip of any other shape (TL-006). */
.reel-upload-preview.has-video { width: auto; max-width: 100%; height: min(52vh, 460px); max-height: none; }
/* ...and "Elegir video" shrinks to its icon in the corner, leaving the bars to the text. The words stay for
   screen readers (clipped, not display: none, so the file input keeps its name). */
.reel-upload-preview.has-video .reel-file-label { position: absolute; inset: auto 8px 8px auto; width: auto; height: auto; flex-direction: row; padding: 8px; background: rgba(0,0,0,0.55); border-radius: 100px; z-index: 4; }
.reel-upload-preview.has-video .reel-file-label span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.reel-upload-preview.has-video .reel-file-label svg { width: 14px; height: 14px; }
.reel-file-label {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: var(--text-secondary); font-size: 13px; font-weight: 700; cursor: pointer;
}
.reel-file-label svg { width: 30px; height: 30px; color: var(--text-tertiary); }
.reel-file-label input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.reel-upload-caption {
  width: 100%; margin-top: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; color: var(--text-primary); font-family: inherit; font-size: 13.5px; resize: vertical;
}
.reel-upload-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.reel-upload-row select { flex: 1; min-width: 140px; font-size: 12.5px; }
.reel-upload-hint { font-size: 11.5px; color: var(--critical); margin-top: 8px; min-height: 1em; }

/* Client-side trim scrub UI (upload modal) */
.reel-text-toolbar { margin: 10px 0; }
.reel-trim {
  margin-top: 14px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px;
}
.reel-trim-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700; margin-bottom: 10px; }
.reel-trim-duration { font-weight: 600; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.reel-trim-row { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--text-tertiary); font-weight: 700; }
.reel-trim-row + .reel-trim-row { margin-top: 8px; }
.reel-trim-row input[type="range"] { flex: 1; accent-color: var(--accent); }
.reel-trim-val { width: 34px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-secondary); font-weight: 600; }
.reel-trim-preview-btn {
  width: 100%; margin-top: 10px; padding: 8px; border-radius: 8px; border: 1px solid var(--line);
  background: none; color: var(--text-secondary); font-size: 12px; font-weight: 700; cursor: pointer;
}
.reel-trim-preview-btn:hover { border-color: var(--accent-line); color: var(--accent); }
.reel-upload-submit {
  width: 100%; margin-top: 14px; padding: 12px; border-radius: 10px; font-weight: 800; font-size: 13.5px;
  background: var(--accent); color: #04150c;
}
.reel-upload-submit:hover { background: var(--accent-strong); }
.reel-upload-submit:disabled { opacity: 0.6; cursor: default; }
/* Upload progress in the window when it publishes over XHR (the lap player's clip). */
.reel-upload-status { font-size: 12px; color: var(--text-secondary); margin-top: 8px; min-height: 1em; }
.reel-upload-status:empty { display: none; }
.reel-upload-note { font-size: 11.5px; color: var(--text-tertiary); margin-top: 6px; }
/* Who sees it (reel visibility spec): the photo posts' three audiences, public by default. */
.reel-upload-visibility { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 12.5px; color: var(--text-secondary); font-weight: 700; }
.reel-upload-visibility select { flex: 1; font-size: 12.5px; }

.reel-upload-include { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; font-size: 13px; }
.reel-upload-include label { display: flex; align-items: center; gap: 8px; cursor: pointer; }