/* Coach Reels: shared tokens and components (landing + studio).
   Direction: a Swiss poster that became an edit suite. Warm paper, black ink, one red.
   Class names that app.html's JS templates emit are kept on purpose: .btn .red .small .row .list .item
   .status .pulse .tpl .look .auto .fmt .shape .lbl .chip .card .thumb .fill .water .eta .badge .chat .msg .me .ai .toast .muted .err .drop .over */

/* ---------- tokens ---------- */
:root {
  --paper: #F2F1EC; --card: #FFFFFF; --soft: #E8E6DF; --line: #D9D7CF; --field-line: #8E8C85;
  --ink: #121212; --muted: #5C5C58; --accent: #D42B1E; --accent-ink: #B8231A; --on-accent: #FFFFFF;
  --ok: #1A6B43; --stage: #0B0B0A; --scrim: rgba(12, 12, 11, .62);
  --display: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --r: 12px; --r-pill: 999px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --shadow-1: 0 1px 2px rgba(18, 18, 18, .06), 0 0 0 1px var(--line);
  --shadow-pop: 0 24px 48px -16px rgba(0, 0, 0, .38);
  --ease: cubic-bezier(.2, .8, .2, 1); --t-fast: 120ms; --t: 200ms; --t-enter: 320ms;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121211; --card: #1B1B19; --soft: #262623; --line: #34332F; --field-line: #77756E;
    --ink: #F2F1EC; --muted: #A9A8A1; --accent-ink: #FF6A5C; --ok: #5BC48F; --scrim: rgba(0, 0, 0, .72);
    --shadow-1: 0 0 0 1px var(--line);
    color-scheme: dark;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 var(--body); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
h1, h2, h3, h4 { font-family: var(--display); letter-spacing: -0.03em; line-height: 1.05; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; text-underline-offset: 3px; }
img, video { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 640px) { .wrap { padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); } }
.muted { color: var(--muted); font-size: 14px; }
.err { color: var(--accent-ink); font-size: 14px; font-weight: 500; margin: 0; }
.err:empty { min-height: 0; }
.row { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.list { display: grid; gap: var(--s2); }

/* ---------- brand ---------- */
.logo { font: 800 20px var(--display); letter-spacing: -0.035em; color: var(--ink); text-decoration: none; display: inline-flex; align-items: baseline; gap: 2px; white-space: nowrap; }
.dot { display: inline-block; width: .32em; height: .32em; border-radius: 50%; background: var(--accent); }
.kicker { font: 700 12.5px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper); font: 600 15px/1.2 var(--body); text-decoration: none; text-align: center;
  cursor: pointer; transition: background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:hover { background: color-mix(in srgb, var(--ink) 84%, var(--paper)); }
.btn:active { transform: translateY(1px); }
.btn.red { background: var(--accent); color: var(--on-accent); }
.btn.red:hover { background: color-mix(in srgb, var(--accent) 86%, #000); }
.btn.ghost, .btn[data-remake] { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--field-line); }
.btn.ghost:hover, .btn[data-remake]:hover { background: var(--soft); }
.btn.small { padding: 0 16px; font-size: 14px; }
.btn.lg { min-height: 54px; padding: 0 28px; font-size: 16px; }
.btn.block { width: 100%; }
.btn:disabled, .btn[aria-disabled=true] { opacity: .42; cursor: not-allowed; transform: none; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn.connected { background: color-mix(in srgb, var(--ok) 13%, transparent); color: var(--ok); }
.btn.connected::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* ---------- fields ---------- */
.field { display: grid; gap: 6px; font: 600 14px var(--body); min-width: 0; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--field-line); border-radius: var(--r);
  background: var(--card); color: var(--ink); font: 400 16px/1.4 var(--body);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
textarea { min-height: 96px; resize: vertical; }
textarea:disabled { opacity: .6; }
input[type=checkbox] { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); flex: none; }
input[type=range] { display: block; width: 100%; height: 44px; margin: 0; accent-color: var(--accent); background: none; cursor: pointer; }
.lbl { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); margin-bottom: var(--s3); font: 700 12.5px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.lbl .muted { font: 500 13px var(--body); letter-spacing: 0; text-transform: none; }
.lbl output { font: 700 22px/1 var(--display); letter-spacing: -0.02em; text-transform: none; font-variant-numeric: tabular-nums; }

/* ---------- pills, chips, status ---------- */
.credits { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); background: var(--soft); font: 700 14px var(--display); white-space: nowrap; font-variant-numeric: tabular-nums; }
.credits::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.chips { display: flex; gap: var(--s2); flex-wrap: wrap; }
.chips:empty { display: none; }
.chip { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); color: var(--ink); font: 600 14px var(--body); cursor: pointer; transition: background-color var(--t-fast) var(--ease); }
.chip:hover { background: var(--soft); }
.chip[aria-pressed=true] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--soft); color: var(--ink); font: 600 13px var(--body); text-transform: capitalize; white-space: nowrap; }
.status.importing::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.status.pulse::before { animation: blink 1.4s ease-in-out infinite; }
.status.ready, .status.done { background: color-mix(in srgb, var(--ok) 13%, transparent); color: var(--ok); }
.status.error, .status.failed { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-ink); }
@keyframes blink { 50% { opacity: .25; } }

/* ---------- studio: header ---------- */
.app-header { position: sticky; top: 0; z-index: 10; background: var(--card); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
.app-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 64px; }
.app-header .who { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.app-header .email { color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch; }
@media (max-width: 640px) { .app-header .email { display: none; } .app-header .logo { font-size: 18px; } .app-header .who { gap: var(--s2); } }

/* ---------- studio: layout + panels ---------- */
.studio-main { display: grid; gap: var(--s5); padding-block: var(--s5) var(--s9); }
.studio-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s5); align-items: start; }
@media (max-width: 980px) { .studio-top { grid-template-columns: minmax(0, 1fr); } }
.panel { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow-1); padding: var(--s5) var(--s4); display: grid; gap: var(--s5); min-width: 0; align-content: start; }
@media (min-width: 640px) { .panel { padding: var(--s6); } }
.panel-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.panel-head .num { font: 800 15px var(--display); color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.panel-head h2 { font-size: clamp(24px, 3vw, 30px); font-weight: 800; }
.panel-head .aside { margin-left: auto; }
.group { display: block; min-width: 0; }

/* ---------- 1. your content ---------- */
.drop {
  position: relative; display: grid; justify-items: center; gap: 4px; padding: var(--s6) var(--s4); text-align: center;
  border: 2px dashed var(--field-line); border-radius: var(--r); background: var(--paper); cursor: pointer;
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.drop:hover { border-color: var(--ink); }
.drop.over { border-style: solid; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--card)); }
.drop:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.drop svg { width: 28px; height: 28px; margin-bottom: 6px; transition: transform var(--t) var(--ease); }
.drop.over svg { transform: translateY(-3px); }
.drop b { font: 700 17px var(--display); letter-spacing: -0.01em; }
.drop .browse { color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
#uploads:empty { display: none; }
#uploads > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px var(--s3); align-items: center; padding: 12px 14px; border-radius: var(--r); background: var(--paper); }
#uploads > div > span { color: var(--ink); font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#uploads > div > .pct { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
#uploads progress { grid-column: 1 / -1; }
progress { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; border: 0; border-radius: var(--r-pill); background: var(--line); overflow: hidden; color: var(--accent); }
progress::-webkit-progress-bar { background: var(--line); border-radius: var(--r-pill); }
progress::-webkit-progress-value { background: var(--accent); border-radius: var(--r-pill); transition: width var(--t) linear; }
progress::-moz-progress-bar { background: var(--accent); border-radius: var(--r-pill); }
.or { display: flex; align-items: center; gap: var(--s3); color: var(--muted); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.link-form { display: grid; gap: var(--s2); }
.link-form .pair { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); }
.item { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); min-height: 56px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.item > div, .item > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.item b { font: 600 15px var(--body); }
.item .muted { font-size: 13.5px; }

/* ---------- 2. new video ---------- */
.tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--s2); }
@media (max-width: 420px) { .tpls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
label.tpl, label.fmt, label.look { position: relative; cursor: pointer; }
label.tpl input, label.look input, label.fmt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
label.tpl { display: grid; gap: 2px; align-content: start; min-height: 72px; padding: 14px 40px 14px 14px; border-radius: var(--r); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
label.tpl:hover { background: var(--paper); }
label.tpl b { font: 700 15px/1.25 var(--display); letter-spacing: -0.01em; }
label.tpl .muted { font-size: 13px; }
label.tpl::after { content: ""; position: absolute; top: 14px; right: 14px; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--field-line); transition: box-shadow var(--t-fast) var(--ease); }
label.tpl:has(input:checked) { box-shadow: inset 0 0 0 2px var(--accent); }
label.tpl:has(input:checked)::after { box-shadow: inset 0 0 0 5px var(--accent); }
label.tpl:has(input:focus-visible), label.look:has(input:focus-visible), label.fmt:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }


.fmts { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: var(--s2); }
label.fmt { display: flex; align-items: center; gap: var(--s3); min-height: 56px; padding: 10px 14px; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); font: 600 14px/1.3 var(--body); transition: box-shadow var(--t-fast) var(--ease); }
label.fmt .muted { margin-left: auto; font-size: 13px; font-variant-numeric: tabular-nums; }
.shape { flex: none; height: 24px; border: 2px solid currentColor; border-radius: 3px; transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
label.fmt:has(input:checked) { box-shadow: inset 0 0 0 2px var(--accent); }
label.fmt:has(input:checked) .shape { background: var(--accent); border-color: var(--accent); }

#pick-sources label.item { cursor: pointer; }
#pick-sources label.item:has(input:checked) { border-color: var(--ink); }
.make-bar { display: grid; gap: var(--s2); padding-top: var(--s5); border-top: 1px solid var(--line); }
.make-bar .btn { width: 100%; }

/* ---------- 3. your videos ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); grid-auto-flow: row dense; gap: var(--s5) var(--s4); align-items: start; }
@media (max-width: 520px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); } }
.card { all: unset; box-sizing: border-box; display: grid; gap: 6px; min-width: 0; cursor: pointer; border-radius: var(--r); }
.card[data-fmt=youtube] { grid-column: span 2; }
.card:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.card > b { font: 700 15px var(--display); letter-spacing: -0.01em; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card > .muted { font-size: 13px; margin-top: -4px; }
.thumb { position: relative; width: 100%; overflow: hidden; border-radius: var(--r); background: var(--stage); isolation: isolate; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.thumb video, .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.card:hover .thumb { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.thumb .badge { position: absolute; z-index: 3; top: 8px; left: 8px; padding: 3px 9px; border-radius: var(--r-pill); background: rgba(12, 12, 11, .74); color: #fff; font: 600 12px/1.5 var(--body); max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thumb.fill { display: grid; place-items: center; background: var(--soft); }
.thumb.fill .badge { background: var(--card); color: var(--ink); }
.thumb.failed { background: repeating-linear-gradient(135deg, var(--soft) 0 10px, color-mix(in srgb, var(--soft) 60%, var(--line)) 10px 20px); }
.thumb.failed .eta { color: var(--accent-ink); }
/* the rising water: JS sets the height from elapsed / estimate, 4% to 95% */
.water { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 4%; background: var(--accent); transition: height 1s linear; }
.water::before, .water::after { content: ""; position: absolute; left: -60%; width: 220%; aspect-ratio: 1; }
.water::before { bottom: calc(100% - 12px); border-radius: 43%; background: var(--soft); animation: wave 7s linear infinite; }
.water::after { bottom: calc(100% - 18px); border-radius: 40%; background: color-mix(in srgb, var(--soft) 45%, transparent); animation: wave 11s linear infinite reverse; }
@keyframes wave { to { transform: rotate(360deg); } }
.eta { position: relative; z-index: 2; margin: var(--s3); padding: 8px 14px; border-radius: var(--r-pill); background: var(--card); color: var(--ink); font: 600 14px/1.3 var(--body); text-align: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .14); font-variant-numeric: tabular-nums; }
.empty { grid-column: 1 / -1; display: grid; gap: 4px; justify-items: start; padding: var(--s6) var(--s5); border: 1.5px dashed var(--line); border-radius: var(--r); }
.empty b { font: 700 17px var(--display); }

/* ---------- viewer dialog ---------- */
.viewer-dialog { position: fixed; inset: 0; border: 0; padding: 0; margin: auto; width: min(1080px, calc(100vw - 48px)); height: min(760px, calc(100dvh - 48px)); max-width: none; max-height: none; border-radius: var(--r); background: var(--card); color: var(--ink); overflow: hidden; box-shadow: var(--shadow-pop); }
.viewer-dialog::backdrop { background: var(--scrim); }
.viewer-dialog[open] { animation: rise var(--t-enter) var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(12px) scale(.985); } }
.viewer { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 1fr); height: 100%; }
#v-player { display: grid; place-items: center; min-height: 0; padding: var(--s5); background: var(--stage); }
#v-player video { display: block; max-width: 100%; max-height: calc(min(760px, 100dvh - 48px) - 48px); width: auto; height: auto; border-radius: 8px; background: #000; }
#v-player .thumb { width: min(100%, 340px); }
#v-side { display: grid; gap: var(--s5); align-content: start; overflow-y: auto; padding: var(--s6); }
#v-side h2 { font-size: 26px; padding-right: 48px; }
#v-folder input { flex: 1 1 160px; width: auto; min-height: 44px; }
.chat { display: grid; gap: var(--s2); max-height: 300px; overflow-y: auto; padding: 2px; }
.chat:empty { display: none; }
.msg { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; }
.msg.me { justify-self: end; background: var(--ink); color: var(--paper); border-bottom-right-radius: 4px; }
.msg.ai { justify-self: start; background: var(--soft); color: var(--ink); border-bottom-left-radius: 4px; }
#v-edit .row { justify-content: space-between; }
.x { position: absolute; z-index: 5; top: 12px; right: 12px; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: var(--soft); color: var(--ink); }
.x:hover { background: var(--line); }
.x svg { width: 18px; height: 18px; }
@media (max-width: 760px) {
  .viewer-dialog { width: 100vw; height: 100dvh; border-radius: 0; }
  .viewer-dialog[open] { animation-name: slide; }
  .viewer { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; overflow-y: auto; }
  #v-player { padding: calc(env(safe-area-inset-top, 0px) + 60px) var(--s4) var(--s4); }
  #v-player video { max-height: 56dvh; }
  #v-side { overflow: visible; padding: var(--s5) max(16px, env(safe-area-inset-right, 0px)) calc(var(--s7) + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
  #v-side h2 { padding-right: 0; }
  .x { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 8px); right: max(8px, env(safe-area-inset-right, 0px)); background: rgba(255, 255, 255, .16); color: #fff; }
  .x:hover { background: rgba(255, 255, 255, .26); }
}
@keyframes slide { from { transform: translateY(24px); opacity: 0; } }

/* ---------- toast ---------- */
.toast { position: fixed; z-index: 30; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: var(--s3); width: max-content; max-width: calc(100vw - 32px); min-height: 52px; padding: 12px 22px 12px 14px; border: 0; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font: 600 15px/1.3 var(--body); text-align: left; cursor: pointer; box-shadow: var(--shadow-pop); animation: toast-in var(--t-enter) var(--ease); }
.toast::before { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l8 5-8 5z' fill='white'/%3E%3C/svg%3E") center / 18px no-repeat; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 16px); } }

/* ---------- plan tiles (no-plan state) ---------- */
.plan-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s4); }
.plan-tile { all: unset; box-sizing: border-box; position: relative; display: grid; gap: 4px; align-content: start; padding: var(--s5); border-radius: var(--r); background: var(--card); box-shadow: inset 0 0 0 1px var(--field-line); cursor: pointer; transition: box-shadow var(--t-fast) var(--ease); }
.plan-tile:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.plan-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.plan-tile.pro, .plan-tile.pro:hover { box-shadow: inset 0 0 0 2px var(--accent); }
.plan-tile b { font: 700 17px var(--display); }
.plan-tile .price { font: 800 40px/1.05 var(--display); letter-spacing: -0.04em; }
.plan-tile .price small { font: 500 15px var(--body); color: var(--muted); letter-spacing: 0; }
.plan-tile .go { margin-top: var(--s3); justify-self: start; pointer-events: none; }
.flag { position: absolute; top: -11px; left: var(--s5); padding: 3px 10px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font: 700 11.5px var(--display); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- brand kit disclosure ---------- */
details.panel > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--s3); min-height: 44px; margin-block: calc(var(--s2) * -1); border-radius: var(--r); }
details.panel > summary::-webkit-details-marker { display: none; }
details.panel > summary h2 { font-size: clamp(22px, 2.6vw, 26px); font-weight: 800; }
details.panel > summary .muted { margin-left: auto; }
details.panel > summary::after { content: ""; flex: none; width: 9px; height: 9px; margin: 0 4px 4px 0; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); transition: transform var(--t) var(--ease); }
details.panel[open] > summary::after { transform: rotate(225deg); margin-bottom: -4px; }
details.panel:not([open]) { gap: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s5); }
.form-grid .span { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } details.panel > summary .muted { display: none; } }

/* ---------- sign-in ---------- */
.signin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: var(--s7); align-items: center; padding-block: var(--s8); }
.signin h1 { font-size: clamp(40px, 6vw, 72px); font-weight: 800; line-height: .95; }
.signin .lead { color: var(--muted); font-size: 18px; margin-top: var(--s4); max-width: 34ch; }
.form-card { display: grid; gap: var(--s4); padding: var(--s6); border-radius: var(--r); background: var(--card); box-shadow: var(--shadow-1); }
@media (max-width: 820px) { .signin { grid-template-columns: minmax(0, 1fr); gap: var(--s5); padding-block: var(--s6); } .form-card { padding: var(--s5) var(--s4); } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .water::before, .water::after, .status.pulse::before { animation: none !important; }
}

/* Coach Reels: template picker + gallery. Append to static/coach-reels.css.
   Replaces the Look strip (.looks / label.look). Uses only existing tokens. */

/* ---------- picker in "2 New video" ---------- */
.t-link { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; padding: 0 2px; border: 0; background: none; color: var(--ink); font: 600 14px var(--body); letter-spacing: 0; text-transform: none; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.t-link:hover { color: var(--accent-ink); }
.t-tools { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); min-width: 0; }
.t-search { position: relative; flex: 0 0 210px; }
.t-search svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.t-search input { padding-left: 42px !important; }               /* beats the base field selector */
.t-search input::-webkit-search-cancel-button { cursor: pointer; }
.t-chips { display: flex; gap: var(--s2); flex: 1; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 3px; margin: -3px; }
.t-chips::-webkit-scrollbar { display: none; }
.t-chips .chip { flex: none; white-space: nowrap; }
@media (max-width: 640px) { .t-tools { flex-direction: column; align-items: stretch; } .t-search { flex: none; } }

.t-strip { display: flex; align-items: flex-start; gap: var(--s3); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 6px 6px 12px; margin: -6px -6px 0; scrollbar-width: thin; }
.t-strip > [role=radiogroup] { display: contents; }

/* one card, used by the strip (label + radio) and the gallery (button) */
.t-card { all: unset; box-sizing: border-box; position: relative; flex: none; display: grid; gap: 6px; align-content: start; width: 120px; min-width: 0; scroll-snap-align: start; cursor: pointer; border-radius: var(--r); }
.t-card[data-wide] { width: calc(240px + var(--s3)); }
.t-card input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.t-card .thumb { aspect-ratio: 9 / 16; }
.t-card[data-wide] .thumb { aspect-ratio: 16 / 9; }
.t-card .thumb video { position: absolute; inset: 0; opacity: 0; transition: opacity var(--t) var(--ease); }
.t-card.playing .thumb video { opacity: 1; }
.t-card:hover .thumb { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.t-card > b { font: 700 14px/1.25 var(--display); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.t-card > .muted { font-size: 12.5px; line-height: 1.35; margin-top: -2px; }
.t-people { display: inline-flex; align-items: center; padding: 3px 7px !important; }
.t-people svg { width: 16px; height: 14px; display: block; }
.t-fmts { display: flex; flex-wrap: wrap; gap: 4px; }
.t-fmts span { padding: 1px 6px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font: 600 12px/1.5 var(--body); font-variant-numeric: tabular-nums; }

/* selected: card gap + accent ring + tick (shape cue, not colour alone) */
.t-tick { position: absolute; z-index: 3; top: 8px; right: 8px; display: none; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.t-tick svg { width: 14px; height: 14px; }
.t-card:has(input:checked) .thumb, .t-card[data-selected] .thumb { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent); }
.t-card:has(input:checked) .t-tick, .t-card[data-selected] .t-tick { display: grid; }
.t-card:has(input:focus-visible), .t-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

/* Auto + Add your own */
.t-card .auto { display: grid; place-items: center; align-content: center; gap: 6px; background: var(--ink); color: var(--paper); font: 800 20px var(--display); letter-spacing: -0.02em; }
.t-card .auto svg { width: 26px; height: 26px; }
.t-add .thumb { display: grid; place-items: center; background: var(--paper); }
.t-add .thumb::before { content: ""; position: absolute; inset: 0; border-radius: var(--r); border: 2px dashed var(--field-line); }
.t-add .thumb > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--paper); }
.t-add .thumb svg { width: 20px; height: 20px; }
.t-add:hover .thumb::before { border-color: var(--ink); }

/* building + failed reuse .thumb.fill, .water, .eta, .failed */
.t-card .eta { margin: 8px; padding: 6px 10px; font-size: 12.5px; }
.t-card[aria-disabled=true] { cursor: default; }
.t-card[aria-disabled=true]:hover .thumb { transform: none; box-shadow: none; }

/* one line under the strip: what the chosen template does */
.t-sum { margin-top: var(--s2); color: var(--muted); font-size: 14px; line-height: 1.5; }
.t-sum b { color: var(--ink); font-weight: 600; }
.t-sum .t-link { margin-block: -14px; margin-left: 4px; }

/* no results */
.t-empty { flex: none; display: grid; align-content: center; justify-items: start; gap: var(--s2); width: 248px; min-height: 213px; padding: var(--s5); border: 1.5px dashed var(--line); border-radius: var(--r); }
.t-empty b { font: 700 16px/1.3 var(--display); overflow-wrap: anywhere; }

@media (max-width: 420px) {
  .t-card { width: 104px; }
  .t-card[data-wide] { width: calc(208px + var(--s3)); }
  .t-empty { width: 220px; min-height: 185px; padding: var(--s4); }
}

/* ---------- gallery dialog: <dialog class="viewer-dialog gallery-dialog"> ---------- */
.g-view { height: 100%; min-height: 0; }
.g-list { overflow-y: auto; overscroll-behavior: contain; }
.g-head { position: sticky; top: 0; z-index: 4; display: grid; gap: var(--s4); padding: var(--s5) var(--s6) var(--s4); background: var(--card); border-bottom: 1px solid var(--line); }
.g-head h2 { font-size: 26px; font-weight: 800; padding-right: 56px; display: flex; align-items: baseline; gap: var(--s3); }
.g-head h2 .muted { font: 500 14px var(--body); letter-spacing: 0; }
.g-head .t-tools { margin: 0; }
.g-head .t-search { flex: 0 0 280px; }
.g-head .t-chips { flex-wrap: wrap; overflow: visible; }
.g-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); grid-auto-flow: row dense; gap: var(--s5) var(--s4); align-items: start; padding: var(--s5) var(--s6) var(--s7); }
.g-grid .t-card, .g-grid .t-card[data-wide] { width: auto; }
.g-grid .t-card[data-wide] { grid-column: span 2; }
.g-grid .t-card > b { font-size: 15px; }
.g-grid .t-empty { grid-column: 1 / -1; width: auto; min-height: 0; }

/* detail: the viewer layout, stage left, side right */
.g-stage { display: grid; place-items: center; min-height: 0; padding: var(--s5); background: var(--stage); }
.g-stage video, .g-stage img { display: block; max-width: 100%; max-height: calc(min(760px, 100dvh - 48px) - 48px); width: auto; height: auto; border-radius: 8px; }
.g-stage video[data-wide] { width: 100%; }
.g-side { display: grid; gap: var(--s5); align-content: start; overflow-y: auto; padding: var(--s6); }
.g-side h2 { font-size: 30px; font-weight: 800; padding-right: 48px; }
.g-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); color: var(--muted); font-size: 14px; }
.g-meta .who { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; }
.g-meta svg { width: 18px; height: 16px; }
.g-side .summary { font-size: 16px; max-width: 46ch; }
.g-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.g-tags span { padding: 4px 10px; border-radius: var(--r-pill); background: var(--soft); font: 600 13px var(--body); }
.g-back { justify-self: start; }
.g-back svg { width: 16px; height: 16px; }

/* add your own */
.g-add { overflow-y: auto; }
.g-add form { display: grid; gap: var(--s5); max-width: 560px; margin: 0 auto; padding: var(--s6) var(--s6) var(--s7); }
.g-add h2 { font-size: 26px; font-weight: 800; padding-right: 48px; }
.g-add .lead { color: var(--muted); margin-top: 6px; }
.g-add .drop { padding: var(--s5) var(--s4); }
.g-add .file { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 10px 14px; border-radius: var(--r); background: var(--paper); font-size: 14px; font-weight: 500; }
.g-add .cost { display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; color: var(--muted); font-size: 14px; }
.g-add .cost b { color: var(--ink); font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .gallery-dialog .x { background: var(--soft); color: var(--ink); }
  .gallery-dialog[data-view=detail] .x { background: rgba(255, 255, 255, .16); color: #fff; }
  .g-head { padding: calc(env(safe-area-inset-top, 0px) + var(--s4)) max(16px, env(safe-area-inset-right, 0px)) var(--s3) max(16px, env(safe-area-inset-left, 0px)); gap: var(--s3); }
  .g-head .t-search { flex: none; }
  .g-head .t-chips { flex-wrap: nowrap; overflow-x: auto; }
  .g-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); padding: var(--s4) max(16px, env(safe-area-inset-right, 0px)) calc(var(--s7) + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
  .g-detail { overflow-y: auto; }
  .g-stage { padding: calc(env(safe-area-inset-top, 0px) + 60px) var(--s4) var(--s4); }
  .g-stage video, .g-stage img { max-height: 56dvh; }
  .g-side { overflow: visible; padding: var(--s5) max(16px, env(safe-area-inset-right, 0px)) calc(var(--s7) + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
  .g-side h2 { font-size: 26px; padding-right: 0; }
  .g-add form { padding: calc(env(safe-area-inset-top, 0px) + var(--s5)) max(16px, env(safe-area-inset-right, 0px)) calc(var(--s7) + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
}

@media (prefers-reduced-motion: reduce) { .t-card:hover .thumb { transform: none; } }

/* square (LinkedIn) templates */
.t-card[data-square] { width: 168px; }
.t-card[data-square] .thumb { aspect-ratio: 1 / 1; }
.g-grid .t-card[data-square] { width: auto; }
@media (max-width: 420px) { .t-card[data-square] { width: 146px; } }