/* ==========================================================================
   Montiliya admin site — the templates screen (.adm-*, admin/templates.js): one card per template with its reference video, wording, analysis, readiness and publication.
   Moved here from css/templates.css when the admin dashboard became its own site (admin.montiliya.com). Built only from the tokens of css/styles.css; logical properties
   everywhere (LTR and RTL share one sheet); no inline styles (the CSP forbids them).
   ========================================================================== */
@keyframes adm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ---- administrator's screen ---------------------------------------------------- */
.adm-host { overflow-y: auto; overscroll-behavior: contain; padding: var(--s6) var(--s6) var(--s12); }
.adm { margin-inline: auto; width: 100%; max-width: 1040px; display: flex; flex-direction: column; gap: var(--s5); }
.adm-head h1 { margin: 0 0 var(--s2); font-size: var(--fs-h2); font-weight: 650; letter-spacing: -0.02em; }
.adm-lead { margin: 0; max-width: 72ch; color: var(--ink-2); font-size: var(--fs-md); line-height: 1.55; text-wrap: pretty; }
.adm-note { margin: var(--s2) 0 0; max-width: 72ch; color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.55; text-wrap: pretty; }
.adm-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding: var(--s3) var(--s4); border: 1px solid var(--danger); border-radius: var(--r-md); color: var(--danger); font-size: var(--fs-sm); }
.adm-banner p { margin: 0; overflow-wrap: anywhere; }
.adm-banner .btn { min-height: 40px; padding-inline: var(--s4); font-size: var(--fs-sm); }
.adm-list { display: flex; flex-direction: column; gap: var(--s5); }

.adm-card { display: flex; flex-direction: column; gap: var(--s5); padding: var(--s6); border-radius: var(--r-xl); background: var(--panel-2); border: 1px solid var(--line); }
.adm-card-head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.adm-idx { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: var(--r-full); border: 1px solid var(--line-strong); color: var(--ink-3); font-size: var(--fs-xs); font-weight: 600; }
.adm-title { flex: 1 1 12ch; min-width: 0; margin: 0; font-size: var(--fs-lg); font-weight: 650; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.adm-head-end { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--s3); margin-inline-start: auto; }
.adm-vis { color: var(--ink-3); font-size: var(--fs-xs); }
.adm-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding-inline: var(--s3); border-radius: var(--r-full); border: 1px solid var(--line-strong); color: var(--ink-2); font-size: var(--fs-xs); font-weight: 600; }
.adm-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.adm-badge[data-status='pending'] { border-style: dashed; color: var(--ink-3); }
.adm-badge[data-status='pending']::before, .adm-badge[data-status='uploaded']::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.adm-badge[data-status='analyzing']::before { animation: pulse 1.4s ease-in-out infinite; }
.adm-badge[data-status='ready'] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.adm-badge[data-status='failed'] { color: var(--danger); border-color: var(--danger); }

.adm-body { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: var(--s6); align-items: start; }
.adm-ref { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.adm-side { display: flex; flex-direction: column; gap: var(--s6); min-width: 0; }

/* the reference slot: a dashed empty frame, or the real video */
.adm-frame { position: relative; width: 100%; max-height: 520px; aspect-ratio: var(--adm-ar, 9 / 16); overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel); transition: border-color var(--t-fast) var(--ease); }
.adm-frame[data-has='false'] { aspect-ratio: 4 / 3; border: 1px dashed var(--line-strong); background: transparent; }       /* before there is a video the frame is a compact empty state; the video gives it its own shape */
.adm-frame.over { border-style: solid; border-color: var(--ink); }
.adm-frame.is-busy .adm-video { opacity: 0.45; }
.adm-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.adm-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); padding: var(--s6) var(--s5); text-align: center; color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.45; }
.adm-empty .icon { width: 30px; height: 30px; stroke-width: 1.4; margin-bottom: var(--s2); }
.adm-empty strong { color: var(--ink); font-size: var(--fs-md); font-weight: 600; }
.adm-empty::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); }
.adm-over { position: absolute; inset: 0; z-index: 3; display: none; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); background: color-mix(in srgb, var(--panel) 92%, transparent); color: var(--ink); font-weight: 600; pointer-events: none; }
.adm-frame.over .adm-over { display: flex; }
.adm-over .icon { width: 28px; height: 28px; }

.adm-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.adm-actions .btn { min-height: 44px; padding-inline: var(--s4); font-size: var(--fs-sm); }
.adm-pick { flex: 1 1 auto; }
.adm-danger { color: var(--danger); border-color: var(--danger); }
.adm-danger:hover { border-color: var(--danger); background: var(--hover); }
.adm-confirm { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s3) var(--s4); border: 1px solid var(--line-strong); border-radius: var(--r-md); }
.adm-confirm p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5; }
.adm-up { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); font-size: var(--fs-sm); }
.adm-up-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.adm-up-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.adm-up-pct { flex: none; color: var(--ink-3); }
.adm-up-label { color: var(--ink-2); overflow-wrap: anywhere; }
.adm-up[data-phase='error'] .adm-up-label { color: var(--danger); }
.adm-pbar { height: 4px; border-radius: 2px; background: var(--line-strong); overflow: hidden; }
.adm-pbar i { display: block; height: 100%; width: var(--p, 0%); background: var(--ink); transition: width var(--t-fast) linear; }
.adm-msg { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5; overflow-wrap: anywhere; }
.adm-msg[data-kind='error'] { color: var(--danger); }
.adm-msg[data-kind='ok'], .adm-msg[data-kind='warn'] { color: var(--ink); }
.adm-facts { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s1) var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.adm-facts dt { color: var(--ink-3); }
.adm-facts dd { margin: 0; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.adm-poster { display: flex; flex-direction: column; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.adm-poster-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.adm-poster-state { color: var(--ink-3); }

/* the text of the style, in both languages */
.adm-form { display: flex; flex-direction: column; gap: var(--s4); }
.adm-set { display: grid; gap: var(--s3); }
.adm-legend { margin: 0; color: var(--ink-3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.adm .field label { font-weight: 500; }
.adm .field input, .adm .field textarea { min-height: 44px; font-size: var(--fs-md); }
.field textarea { display: block; width: 100%; resize: vertical; min-height: 96px; padding: var(--s3) var(--s4); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--panel); color: var(--ink); font: inherit; font-size: var(--fs-md); line-height: 1.5; transition: border-color var(--t-fast); }
.field textarea:focus { outline: none; border-color: var(--ink); }
.field textarea::placeholder { color: var(--ink-3); }
.adm-hint { margin: 0; color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.5; }
.adm-form-foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s4); }
.adm-form-foot .btn { min-height: 44px; }
.adm-saved { color: var(--ink-3); font-size: var(--fs-sm); }

/* analysis */
.adm-analysis { display: flex; flex-direction: column; gap: var(--s3); padding-top: var(--s5); border-top: 1px solid var(--line); }
.adm-an-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.adm-an-head h3 { margin: 0; font-size: var(--fs-md); font-weight: 650; }
.adm-an-head .btn { min-height: 40px; padding-inline: var(--s4); font-size: var(--fs-sm); }
.adm-an-state, .adm-an-prog, .adm-an-sum, .adm-an-err { margin: 0; font-size: var(--fs-sm); line-height: 1.5; overflow-wrap: anywhere; }
.adm-an-prog { color: var(--ink-3); }
/* readiness: can an edit follow this style? ready / needs re-analysis / unsupported / not published */
.adm-rd { margin: 0; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-md); font-size: var(--fs-sm); line-height: 1.5; overflow-wrap: anywhere; }
.adm-rd[data-state='ready'] { color: var(--ink-2); }
.adm-rd[data-state='needs_reanalysis'] { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.adm-rd[data-state='unsupported'] { border-style: dashed; border-color: var(--danger); color: var(--danger); }
.adm-rd-cost { margin: 0; color: var(--ink-3); font-size: var(--fs-xs); }
.adm-rd-badge { display: inline-flex; align-items: center; min-height: 26px; padding-inline: var(--s3); border-radius: var(--r-full); border: 1px solid var(--line-strong); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; margin-inline-start: var(--s2); color: var(--ink-2); }
.adm-rd-badge[hidden] { display: none; }
.adm-rd-badge[data-state='needs_reanalysis'] { border-color: var(--ink); color: var(--ink); }
.adm-rd-badge[data-state='unsupported'] { border-style: dashed; border-color: var(--danger); color: var(--danger); }
.adm-rd-banner { margin: 0 0 var(--s4); padding: var(--s3) var(--s4); border: 1px solid var(--ink); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; }
.adm-rd-banner[hidden] { display: none; }
.adm-an-sum { color: var(--ink-2); }
.adm-an-err { color: var(--danger); }
.adm-indet { position: relative; height: 3px; border-radius: 2px; background: var(--line-strong); overflow: hidden; }
.adm-indet i { position: absolute; inset-block: 0; inset-inline-start: -35%; width: 35%; border-radius: 2px; background: var(--ink); animation: adm-slide 1.4s var(--ease-in-out) infinite; }
@keyframes adm-slide { to { inset-inline-start: 100%; } }
.adm-more summary { display: flex; align-items: center; min-height: 32px; color: var(--ink-3); font-size: var(--fs-sm); cursor: pointer; }
.adm-an-text { margin: var(--s2) 0 0; max-height: 280px; overflow-y: auto; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }

/* loading */
.adm-card.is-skel { gap: var(--s3); min-height: 180px; }
.adm-bar { display: block; height: 14px; border-radius: 7px; background: var(--panel-3); animation: adm-pulse 1.4s ease-in-out infinite; }
.adm-bar.l { width: 60%; } .adm-bar.m { width: 40%; } .adm-bar.s { width: 25%; }

@media (max-width: 760px) {
  .adm-host { padding: var(--s4) var(--s4) var(--s10); }
  .adm-card { padding: var(--s5) var(--s4); }
  .adm-body { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .adm-frame { max-width: 280px; margin-inline: auto; }
}
@media (pointer: coarse), (max-width: 640px) { .adm-more summary { min-height: 44px; } .adm-an-head .btn, .adm-banner .btn { min-height: 44px; } }

/* ---- motion, contrast ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .adm-bar, .adm-badge[data-status='analyzing']::before { animation: none; }
  .adm-indet i { animation: none; inset-inline-start: 0; width: 100%; opacity: 0.5; }
}
@media (forced-colors: active) {
  .adm-badge[data-status='ready'] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
}