/* ==========================================================================
   Montiliya — editing styles: the style picker (.tpl-*, js/picker.js). (The administrator's screen, .adm-*, lives with the admin site: admin/templates.css.)
   Loaded after styles.css and built only from its tokens: black and white, no accent colour, no gradients (the tick ruler is a line pattern), red only for problems.
   Logical properties everywhere (LTR and RTL share one sheet); no inline styles are needed (the CSP forbids them): the few dynamic values are custom properties set from script.
   Colours that appear on top of a video or a poster (the scrim behind a control, white glyphs) are fixed, like the clip remove button of the message box.
   ========================================================================== */

/* ---- picker: the frame ----------------------------------------------------- */
.tpl { container: tpl / inline-size; width: 100%; color: var(--ink); }
.tpl-body { display: flex; flex-direction: column; gap: var(--s5); }
.tpl-head h2 { margin: 0; font-size: var(--fs-xl); font-weight: 650; letter-spacing: -0.02em; text-wrap: balance; }
.tpl-head p { margin: var(--s1) 0 0; max-width: 64ch; color: var(--ink-3); font-size: var(--fs-sm); text-wrap: pretty; }
.tpl-group { display: flex; flex-direction: column; gap: var(--s4); }
/* six tiles (five styles and your own reference): three across, two across on a phone, so the last row is never short */
.tpl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 216px)); justify-content: center; gap: var(--s4); }
@container tpl (max-width: 559px) { .tpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); } }
@media (max-width: 559px) { .tpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); } }       /* browsers without container queries */
.tpl-foot { display: flex; justify-content: center; }
.tpl-note { margin: 0; text-align: center; color: var(--ink-3); font-size: var(--fs-sm); text-wrap: balance; }

/* ---- picker: a card -------------------------------------------------------- */
.tpl-card { position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel-2);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
@media (hover: hover) { .tpl-card:not([data-available='false']):hover { border-color: var(--ink-3); } }
.tpl-card[data-selected='true'] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.tpl-card[data-available='false'] { background: transparent; }
.tpl-card[data-available='false'] .tpl-media { background: var(--panel-2); }
.tpl-face { display: flex; flex-direction: column; flex: 1; min-width: 0; outline: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tpl-card[data-available='false'] .tpl-face { cursor: default; }
/* the keyboard ring is drawn on the whole card, outside the selected outline */
.tpl-card:has(.tpl-face:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
@supports not selector(:has(*)) { .tpl-face:focus-visible { outline: 2px solid var(--ink); outline-offset: -5px; } }

.tpl-media { position: relative; flex: none; aspect-ratio: var(--tpl-ar, 9 / 16); overflow: hidden; background: var(--panel-3); }
.tpl-poster, .tpl-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tpl-poster { transition: transform var(--t-slow) var(--ease); }
@media (hover: hover) { .tpl-card:not([data-available='false']):hover .tpl-poster { transform: scale(1.025); } }
.tpl-video { opacity: 0; z-index: 1; background: #000; transition: opacity var(--t-med) var(--ease); pointer-events: none; }
.tpl-card[data-state='playing'] .tpl-video, .tpl-card[data-state='paused'] .tpl-video { opacity: 1; }
/* waiting for the first frames of a preview */
.tpl-card[data-state='loading'] .tpl-media::after { content: ''; position: absolute; z-index: 2; inset-block-start: 50%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: spin 0.9s linear infinite; pointer-events: none; }
.tpl-err { position: absolute; z-index: 2; inset-inline: var(--s3); inset-block-start: 50%; translate: 0 -50%; padding: var(--s2) var(--s3); border-radius: var(--r-md); background: rgba(10, 10, 10, 0.8); color: #fff; font-size: var(--fs-xs); text-align: center; pointer-events: none; }
.tpl-err:empty { display: none; }

/* a style with no poster yet, and a style whose reference is not configured: a quiet viewfinder with the brand's tick ruler */
.tpl-media:not(.bare) .tpl-ph { display: none; }
.tpl-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3); padding: var(--s6) var(--s4); text-align: center; color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.4; }
.tpl-ph::before { content: ''; position: absolute; inset: var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); }
.tpl-ph::after { content: ''; position: absolute; inset-inline: var(--s6); inset-block-end: var(--s5); height: 8px; opacity: 0.5; background: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 8px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); }
.tpl-ph .icon { width: 28px; height: 28px; stroke-width: 1.4; }

/* tags and the selected mark, top left of the picture */
.tpl-chips { position: absolute; z-index: 3; inset-block-start: var(--s2); inset-inline-start: var(--s2); display: flex; align-items: center; gap: var(--s1); pointer-events: none; }
.tpl-check { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-full); background: var(--ink); color: var(--on-ink); opacity: 0; transform: scale(0.6);
  transition: transform var(--t-med) var(--ease), opacity var(--t-fast) var(--ease); }
.tpl-check .icon { width: 14px; height: 14px; stroke-width: 2.6; }
.tpl-card[data-selected='true'] .tpl-check { opacity: 1; transform: scale(1); }
.tpl-tag { display: inline-flex; align-items: center; min-height: 24px; padding-inline: var(--s3); border-radius: var(--r-full); background: rgba(10, 10, 10, 0.72); color: #fff; font-size: var(--fs-xs); font-weight: 600; }
.tpl-tag.soon { background: var(--panel); color: var(--ink-2); border: 1px solid var(--line-strong); }
/* a published style that cannot be picked: being updated (needs re-analysis) or one the editor cannot follow. Same quiet chip, with the reason in words under the name. */
.tpl-tag.updating, .tpl-tag.unsupported { background: var(--panel); color: var(--ink-2); border: 1px solid var(--line-strong); }
.tpl-tag.unsupported { border-style: dashed; }
.tpl-why { margin-top: var(--s2); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.4; text-wrap: pretty; }
.tpl-card[data-available='false'][data-readiness='needs_reanalysis'] .tpl-video, .tpl-card[data-available='false'][data-readiness='unsupported'] .tpl-video { filter: grayscale(0.35); }

/* the name and the line under it. Selected: the label inverts (the one strong mark of the screen, black on white or white on black) */
.tpl-text { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: var(--s3) var(--s3) var(--s4); transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.tpl-name { font-size: var(--fs-md); font-weight: 650; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
.tpl-cur { align-self: flex-start; margin-block: 2px 3px; padding: 0 var(--s2); border: 1px solid currentColor; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 600; line-height: 1.5; opacity: 0.8; }       /* "Current", in the label (a later edit shows which style is in force) */
.tpl-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.4; text-wrap: pretty; }
.tpl-card[data-selected='true'] .tpl-text { background: var(--ink); color: var(--on-ink); }
.tpl-card[data-selected='true'] .tpl-desc { color: color-mix(in srgb, var(--on-ink) 72%, transparent); }
.tpl-card[data-available='false'] .tpl-name { color: var(--ink-2); }

/* the card's own controls: play / pause (bottom start), sound (bottom end), the larger preview (top end). They sit over the picture, outside the radio. */
.tpl-ctl { position: absolute; z-index: 4; inset-block-start: 0; inset-inline: 0; aspect-ratio: var(--tpl-ar, 9 / 16); pointer-events: none; }
.tpl-btn { position: absolute; pointer-events: auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-full); background: rgba(10, 10, 10, 0.66); color: #fff;
  transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); }
.tpl-btn::after { content: ''; position: absolute; inset: -4px; }
.tpl-btn:hover { background: rgba(10, 10, 10, 0.88); }
.tpl-btn:active { transform: scale(0.94); }
.tpl-btn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; box-shadow: 0 0 0 4px rgba(10, 10, 10, 0.6); }
.tpl-btn .icon { width: 18px; height: 18px; }
.tpl-toggle { inset-block-end: var(--s2); inset-inline-start: var(--s2); }
.tpl-toggle .icon { fill: currentColor; stroke: none; }
.tpl-sound { inset-block-end: var(--s2); inset-inline-end: var(--s2); }
.tpl-expand { inset-block-start: var(--s2); inset-inline-end: var(--s2); width: auto; height: 32px; padding-inline: var(--s3); font-size: var(--fs-xs); font-weight: 600; }
.tpl-expand::after { inset: -6px -4px; }
@media (hover: hover) and (pointer: fine) {
  .tpl-expand { opacity: 0; }
  .tpl-card:hover .tpl-expand, .tpl-card:focus-within .tpl-expand { opacity: 1; }
}

/* your own reference: a dashed card with a plus, the distinct sixth tile */
.tpl-custom { border-style: dashed; border-color: var(--line-strong); background: transparent; }
.tpl-custom[data-selected='true'] { border-style: solid; }
.tpl-custom .tpl-media { display: grid; place-items: center; background: transparent; }
.tpl-plus { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--r-full); border: 1px solid var(--line-strong); color: var(--ink);
  transition: transform var(--t-med) var(--ease), border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.tpl-plus .icon { width: 28px; height: 28px; stroke-width: 1.5; }
@media (hover: hover) { .tpl-custom:hover .tpl-plus { transform: scale(1.06); border-color: var(--ink); background: var(--hover); } }
.tpl-custom[data-selected='true'] .tpl-plus { border-color: var(--ink); }

/* the quiet choice under the cards */
.tpl-none { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 44px; padding-inline: var(--s5); border-radius: var(--r-full); border: 1px solid transparent;
  color: var(--ink-3); font-size: var(--fs-md); font-weight: 500; text-align: center; cursor: pointer; transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.tpl-none .icon { width: 16px; height: 16px; stroke-width: 2.4; opacity: 0; }
.tpl-none:hover { color: var(--ink); background: var(--hover); }
.tpl-none[aria-checked='true'] { color: var(--ink); border-color: var(--ink); }
.tpl-none[aria-checked='true'] .icon { opacity: 1; }

/* loading and failing */
.tpl-card.is-skel { pointer-events: none; }
.tpl-card.is-skel .tpl-media { animation: tpl-pulse 1.4s ease-in-out infinite; }
.tpl-bar { display: block; height: 12px; border-radius: 6px; background: var(--panel-3); animation: tpl-pulse 1.4s ease-in-out infinite; }
.tpl-bar.l { width: 90%; } .tpl-bar.s { width: 55%; }
@keyframes tpl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.tpl-error { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: var(--s3); padding: var(--s6) var(--s4); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); text-align: center; color: var(--ink-2); font-size: var(--fs-sm); }
.tpl-error p { margin: 0; max-width: 40ch; text-wrap: balance; }

/* ---- picker: the modal and the larger preview -------------------------------- */
.tpl-dialog { width: min(780px, calc(100vw - 24px)); }
.tpl-dlg { display: flex; flex-direction: column; }
.tpl-dlg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); padding: var(--s6) var(--s6) var(--s2); }
.tpl-dlg-head h2 { margin: 0; font-size: var(--fs-xl); font-weight: 650; letter-spacing: -0.02em; text-wrap: balance; }
.tpl-dlg-sub { margin: var(--s1) 0 0; max-width: 56ch; color: var(--ink-3); font-size: var(--fs-sm); text-wrap: pretty; }
.tpl-dlg-body { padding: var(--s4) var(--s6) var(--s6); }
.tpl-dlg-foot { position: sticky; inset-block-end: 0; z-index: 5; display: flex; justify-content: flex-end; gap: var(--s3); padding: var(--s4) var(--s6); background: var(--panel); border-top: 1px solid var(--line); }
.tpl-pv { width: min(460px, calc(100vw - 24px)); }
.tpl-pv-in { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s5); }
.tpl-pv-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.tpl-pv-head h2 { margin: 0; font-size: var(--fs-xl); font-weight: 650; letter-spacing: -0.02em; }
.tpl-pv-frame { --rw: 9; --rh: 16; position: relative; margin-inline: auto; width: min(100%, calc(min(66dvh, 600px) * var(--rw) / var(--rh))); aspect-ratio: var(--rw) / var(--rh); overflow: hidden; border-radius: var(--r-md); background: #000; }
.tpl-pv-frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.tpl-pv-msg { margin: 0; color: var(--danger); font-size: var(--fs-sm); text-align: center; }
.tpl-pv-hint { margin: 0; color: var(--ink-3); font-size: var(--fs-xs); text-align: center; }
.tpl-pv-desc { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.55; text-wrap: pretty; }
.tpl-pv .dlg-actions { margin-top: 0; }
@media (max-width: 640px) {
  .tpl-dlg-head { padding: var(--s5) var(--s4) var(--s2); }
  .tpl-dlg-body { padding: var(--s3) var(--s4) var(--s5); }
  .tpl-dlg-foot { padding: var(--s3) var(--s4); padding-bottom: max(var(--s3), env(safe-area-inset-bottom, 0px)); }
  .tpl-dlg-foot .btn { flex: 1; }
  .tpl-pv-in { padding: var(--s4); }
}

/* ---- motion, contrast ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tpl-card:hover .tpl-poster, .tpl-custom:hover .tpl-plus { transform: none; }
  .tpl-card.is-skel .tpl-media, .tpl-bar { animation: none; }
}
@media (forced-colors: active) {
  .tpl-card[data-selected='true'] { outline: 3px solid Highlight; }
  .tpl-card[data-selected='true'] .tpl-text, .tpl-check { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .tpl-none[aria-checked='true'] { outline: 2px solid Highlight; }
}