/* ═══════════════════════════════════════════════════════════════════════════
   CUTS CLIENT PORTAL — Editorial × Cinematic
   Ported 1:1 from the cuts-landing-v2 visual language.
   Studio black + drifting yellow auras + display typography.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The hidden attribute must always win: any class that sets its own display (flex,
   grid) silently overrides the browser's [hidden] rule, which is how "hidden" elements
   were showing up. The one justified !important in this file. */
[hidden] { display: none !important; }

/* ───── Fonts ───── */
@font-face {
  font-family: 'FbTypograph2';
  src: url('/static/FbTypograph2-Light.woff2') format('woff2'),
       url('/static/FbTypograph2-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'FbTypograph2';
  src: url('/static/FbTypograph2-Regular.woff2') format('woff2'),
       url('/static/FbTypograph2-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'FbTypograph2';
  src: url('/static/FbTypograph2-Bold.woff2') format('woff2'),
       url('/static/FbTypograph2-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'FbTypograph2';
  src: url('/static/FbTypograph2-Black.woff2') format('woff2'),
       url('/static/FbTypograph2-Black.otf') format('opentype');
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ───── Tokens ───── */
:root {
  --primary: #FFD500;
  --ink:     #0A0A0A;
  --paper:   #FAF7F0;
  --muted:   #6B6B66;
  --line:    rgba(10,10,10,0.12);

  /* Dark studio theme (used throughout) */
  --bg:      #0A0A0A;
  --fg:      #F5F2E8;
  --accent:  var(--primary);
  --card:    #141414;
  --card-2:  #1A1A1A;
  --line2:   rgba(245,242,232,0.10);
  --line2-strong: rgba(245,242,232,0.16);

  /* Semantic tones (derived) */
  --fg-soft: rgba(245,242,232,0.78);
  --fg-mute: rgba(245,242,232,0.52);
  --fg-dim:  rgba(245,242,232,0.34);

  /* Yellow surfaces */
  --y-glow-1: rgba(255,213,0,0.16);
  --y-glow-2: rgba(255,213,0,0.10);
  --y-surface: rgba(255,213,0,0.06);
  --y-border:  rgba(255,213,0,0.20);

  /* Danger */
  --danger:    #E63946;
  --danger-soft: rgba(230,57,70,0.10);

  /* Radii */
  --r-pill: 999px;
  --r-card: 16px;
  --r-btn:  12px;
  --r-input:12px;

  /* Fonts */
  --font-display: 'FbTypograph2', system-ui, sans-serif;
  --font-body:    'FbTypograph2', system-ui, sans-serif;
  --font-mono:    'FbTypograph2', ui-monospace, monospace;
}

/* ───── Reset ───── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  direction: rtl;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;

  /* Layered yellow aura stack — exact port from landing's theme-bold */
  background-image:
    radial-gradient(1100px 700px at 12% 5%,   rgba(255,213,0,0.16), transparent 55%),
    radial-gradient(950px  600px at 92% 25%,  rgba(255,213,0,0.10), transparent 55%),
    radial-gradient(900px  600px at 8%  60%,  rgba(255,213,0,0.09), transparent 55%),
    radial-gradient(1000px 650px at 95% 95%,  rgba(255,213,0,0.13), transparent 55%),
    radial-gradient(700px  500px at 50% 45%,  rgba(255,213,0,0.05), transparent 70%);
  background-attachment: fixed;
}

/* Drifting fixed aura layer — sits behind everything, blends in */
body::before {
  content: "";
  position: fixed; inset: -15%;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(700px 500px at 25% 35%, rgba(255,213,0,0.14), transparent 60%),
    radial-gradient(600px 420px at 75% 70%, rgba(255,213,0,0.10), transparent 60%);
  animation: bgDrift 18s ease-in-out infinite alternate;
  mix-blend-mode: screen;
  filter: blur(20px);
}

/* Subtle film-grain noise overlay — adds analog texture without competing */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

@keyframes bgDrift {
  0%   { transform: translate(0%, 0%)      scale(1);    opacity: 0.85; }
  35%  { transform: translate(-4%, 3%)     scale(1.12); opacity: 1;    }
  70%  { transform: translate(3%, -4%)     scale(1.08); opacity: 0.9;  }
  100% { transform: translate(-2%, -2%)    scale(1.05); opacity: 1;    }
}

/* Decorative legacy `.scene` from base.html — now a no-op wrapper */
.scene { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.orb, .dot-grid, .vignette { display: none; }

/* Selection */
::selection { background: var(--accent); color: #000; }

/* Custom yellow cursor glow (added by interactions.js) */
.cursor-glow {
  position: fixed;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,213,0,0.14) 0%, transparent 70%);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
  will-change: transform;
}

/* Links */
a { color: inherit; text-decoration: none; }
a:not([class*="btn"]):hover { color: var(--accent); }
img { display: block; max-width: 100%; }

/* ───── Wrap / canvas ───── */
.site-canvas { container-type: inline-size; container-name: canvas; width: 100%; }

.main {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 120px 32px 100px;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

/* ───── Typography utilities ───── */
.display {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 0.96;
  text-wrap: balance;
}
.display--accent { color: var(--accent); text-shadow: 0 0 40px rgba(255,213,0,0.45); }

.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 8px 14px;
  border: 1px solid var(--y-border);
  border-radius: var(--r-pill);
  background: var(--y-surface);
}
.eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(255,213,0,0.7);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 11px;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
}

.tag--solid {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
}

.pulse { position: relative; }
.pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--accent);
  animation: pulseRing 1.8s ease-out infinite;
  pointer-events: none;
}
@keyframes pulseRing {
  0%   { opacity: 0.8; transform: scale(0.85); }
  100% { opacity: 0;   transform: scale(1.6);  }
}

.dot-pulse {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(255,213,0,0.8);
  animation: dotPulse 1.6s ease-in-out infinite;
  margin-inline-end: 8px;
  vertical-align: middle;
}
@keyframes dotPulse {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%      { opacity: 0.5; transform: scale(0.7); }
}

/* ───── Loader: the studio's ring, for the sign-in link page and modal fetches ───── */
.loader {
  display: inline-block;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255,213,0,0.18);
  border-top-color: var(--accent);
  animation: loaderSpin 0.9s linear infinite;
  vertical-align: middle;
}
.loader--big {
  display: block;
  width: 56px; height: 56px;
  border-width: 3px;
  margin: 0 auto 26px;
  box-shadow: 0 0 32px rgba(255,213,0,0.18);
  position: relative; z-index: 1;
}
.loader-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
@keyframes loaderSpin { to { transform: rotate(360deg); } }
.go-card { text-align: center; }
.go-title { margin-bottom: 10px; }
.go-subtitle { min-height: 1.4em; transition: opacity 0.3s; }
@media (prefers-reduced-motion: reduce) {
  .loader { animation-duration: 2s; }
}

/* ───── Package renewal: pricing cards ─────
   Hierarchy is physical, not decorative: the package the studio wants chosen is larger,
   lifted, and lit, and everything around it is deliberately quieter. */
.renew { max-width: 1120px; margin: 0 auto; padding: 6px 0 56px; }
.renew-head { text-align: center; margin-bottom: 42px; }
.renew-title { font-size: clamp(30px, 5vw, 46px); line-height: 1.04; margin: 0 0 10px; }
.renew-sub { color: var(--fg-mute); margin: 0; font-size: 16px; }

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 20px;
  align-items: stretch;
  padding-top: 18px;
}
.plan {
  display: flex;
  flex-direction: column;
  padding: 30px 26px 26px;
  border-radius: 22px;
  background: var(--card);
  border: 1px solid var(--line2);
  position: relative;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--i) * 110ms);
}
.plan.is-in { opacity: 1; transform: none; }
.plan:hover { border-color: rgba(255,213,0,0.28); }

/* The recommended card: taller, brighter, and the only one that glows. */
.plan--best {
  background: linear-gradient(180deg, rgba(255,213,0,0.07), rgba(255,213,0,0.01) 42%), var(--card);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(255,213,0,0.3), 0 26px 60px rgba(0,0,0,0.55),
              0 0 70px rgba(255,213,0,0.10);
  margin-block: -14px;
  padding-block: 44px 34px;
  z-index: 1;
}
/* A single sweep across the lit edge as the page settles, then it never runs again. */
.plan--best::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.85) 50%, transparent 70%)
              0 0 / 260% 100% no-repeat;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  animation: planSweep 1.5s ease-out .55s 1 both;
}
@keyframes planSweep {
  from { background-position: 210% 0; opacity: 1; }
  to   { background-position: -60% 0; opacity: 0; }
}

.plan-ribbon {
  position: absolute;
  top: -12px; inset-inline-start: 26px;
  background: var(--accent);
  color: #000;
  font-family: var(--font-display);
  font-size: 12px; font-weight: 900;
  padding: 4px 12px;
  border-radius: var(--r-pill);
}
.plan-ribbon--mine { background: var(--y-surface); color: var(--fg); border: 1px solid var(--line2); }

.plan-name {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 700;
  margin: 0 0 18px;
}
.plan-price { display: flex; align-items: baseline; gap: 6px; }
.plan-amount {
  font-family: var(--font-display);
  font-size: 46px; font-weight: 900; line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.plan--best .plan-amount { font-size: 54px; color: var(--accent); }
.plan-currency { font-size: 22px; font-weight: 700; color: var(--fg-mute); }
.plan-basis { font-size: 12.5px; color: var(--fg-mute); margin-top: 6px; }
.plan-rate {
  margin-top: 14px; font-size: 14px; color: var(--fg-mute);
  font-variant-numeric: tabular-nums;
}
.plan-rate b { color: var(--fg); font-weight: 700; }
.plan-saving {
  margin-top: 12px;
  font-size: 13.5px; line-height: 1.5;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.plan-saving b { font-weight: 900; font-size: 16px; }

.plan-specs {
  list-style: none;
  margin: 22px 0 26px;
  padding: 0;
  display: grid; gap: 10px;
  color: var(--fg-mute);
  font-size: 14.5px;
  border-top: 1px solid var(--line2);
  padding-top: 20px;
}
.plan-specs li { display: flex; align-items: flex-start; gap: 9px; }
.plan-specs li::before {
  content: '';
  flex: 0 0 auto;
  width: 15px; height: 15px; margin-top: 3px;
  border-radius: 50%;
  background: var(--y-surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 6.2l2.4 2.4L9.6 3.9' fill='none' stroke='%23FFD500' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 11px no-repeat;
}
.plan-specs b { color: var(--fg); font-weight: 700; font-variant-numeric: tabular-nums; }

.plan-buy {
  margin-top: auto;
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line2);
  background: var(--y-surface);
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.plan-buy:hover { border-color: var(--accent); color: var(--accent); }
.plan--best .plan-buy {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
}
.plan--best .plan-buy:hover { color: #000; filter: brightness(1.08); }
.plan-buy:disabled { opacity: .6; cursor: default; }
.plan-terms { margin-top: 10px; text-align: center; font-size: 12.5px; color: var(--fg-mute); }

@media (max-width: 760px) {
  /* The recommended package is read first on a phone, where nothing sits beside it. */
  .plans { grid-template-columns: 1fr; }
  .plan--best { order: -1; margin-block: 14px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .plan { opacity: 1; transform: none; transition: none; }
  .plan--best::after { animation: none; opacity: 0; }
}

/* Reveal on scroll (used by interactions.js) */
.reveal-init {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(.2,.8,.2,1), transform 0.7s cubic-bezier(.2,.8,.2,1);
}
.reveal-in { opacity: 1; transform: none; }

/* ───── Nav ───── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  transition: background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease,
              opacity 0.2s ease;
  border-bottom: 1px solid transparent;
}
.nav--scrolled {
  background: rgba(10,10,10,0.72);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--line2);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 32px;
}
.nav-logo { height: 36px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 8px; }
.nav-link {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-soft);
  padding: 10px 14px;
  border-radius: 8px;
  transition: color 0.2s ease, background 0.2s ease;
}
.nav-link:hover { color: var(--accent); background: var(--y-surface); }
.nav-link--cta {
  background: var(--accent);
  color: var(--ink) !important;
  padding: 10px 18px;
  border-radius: var(--r-btn);
  font-weight: 700;
  letter-spacing: 0.1em;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.nav-link--cta:hover {
  background: var(--accent);
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 8px 24px rgba(255,213,0,0.3);
}
.nav-link--logout { color: var(--fg-dim); }
.nav-link--logout:hover { color: var(--danger); background: var(--danger-soft); }

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--line2);
  border-radius: 10px;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--fg);
  margin: 0 auto;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ───── Flash / messages ───── */
.flash-messages { margin-bottom: 32px; display: grid; gap: 12px; }
.flash {
  padding: 14px 20px;
  background: var(--y-surface);
  border: 1px solid var(--y-border);
  border-radius: var(--r-btn);
  color: var(--accent);
  font-weight: 500;
}

/* ───── Buttons ───── */
.btn,
.btn-primary,
.btn-cancel,
.btn-back,
.btn-shorts,
.btn-revision,
.btn-reschedule,
.btn-view-deliverables,
.btn--primary,
.btn--secondary,
.btn--full,
.btn-show-more,
.cancel-modal-no,
.cancel-modal-yes,
.sp-details-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  padding: 12px 22px;
  border: 1.5px solid transparent;
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn:disabled,
.btn-primary:disabled,
.btn--primary:disabled,
.btn-shorts:disabled,
.btn-revision:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Primary — yellow solid */
.btn-primary,
.btn--primary {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
  padding: 16px 32px;
  font-size: 16px;
}
.btn-primary:hover:not(:disabled),
.btn--primary:hover:not(:disabled) {
  color: var(--ink);
  transform: scale(1.03);
  box-shadow: 0 14px 36px rgba(255,213,0,0.3);
}
.btn-primary:active:not(:disabled),
.btn--primary:active:not(:disabled) { transform: scale(0.98); }

.btn--full { width: 100%; }

/* Ghost / outline */
.btn-cancel,
.btn-back,
.btn--secondary,
.btn-show-more,
.sp-details-back,
.cancel-modal-no {
  border-color: var(--line2-strong);
  color: var(--fg-soft);
}
.btn-cancel:hover,
.btn-back:hover,
.btn--secondary:hover,
.btn-show-more:hover,
.sp-details-back:hover,
.cancel-modal-no:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--y-surface);
}

/* Danger */
.cancel-modal-yes {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}
.cancel-modal-yes:hover {
  background: #f4515e;
  transform: scale(1.03);
}

/* Project-row action buttons (smaller, inline with project meta) */
.btn-reschedule,
.btn-shorts,
.btn-revision,
.btn-view-deliverables {
  padding: 8px 14px;
  font-size: 12px;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-color: var(--line2);
  color: var(--fg-soft);
  border-radius: var(--r-pill);
}
.btn-reschedule:hover,
.btn-shorts:hover,
.btn-revision:hover:not(:disabled):not(.btn-revision--disabled),
.btn-view-deliverables:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--y-surface);
}
.btn-cancel {
  padding: 8px 14px;
  font-size: 12px;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
}
.btn-revision--disabled {
  border-color: var(--line2);
  color: var(--fg-dim);
  cursor: not-allowed;
}

/* ───── Forms ───── */
.form, form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.label, label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
select,
textarea {
  width: 100%;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.02);
  border: 1.5px solid var(--line2);
  border-radius: var(--r-input);
  color: var(--fg);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder,
input::placeholder,
textarea::placeholder { color: var(--fg-dim); }

.input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  background: rgba(255,213,0,0.04);
  box-shadow: 0 0 0 4px rgba(255,213,0,0.10);
}

select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23F5F2E8' d='M6 8L0 0h12z' opacity='0.6'/></svg>");
  background-repeat: no-repeat;
  background-position: left 16px center;
  padding-inline-start: 40px;
}

textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.6;
}

/* Custom checkbox */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border: 1.5px solid var(--line2-strong);
  border-radius: 5px;
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.2s ease, background 0.2s ease;
}
input[type="checkbox"]:hover { border-color: var(--y-border); }
input[type="checkbox"]:checked {
  border-color: var(--accent);
  background: var(--accent);
}
input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 50%; top: 45%;
  width: 5px; height: 9px;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* ───── Page header ───── */
.page-header {
  margin-bottom: 56px;
  text-align: center;
}
.page-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(38px, 5.2cqw, 72px);
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0 0 14px;
  text-wrap: balance;
}
.pod-name {
  position: relative;
  display: inline-block;
  color: var(--accent);
  text-shadow: 0 0 40px rgba(255,213,0,0.45);
  padding-bottom: 0.14em;
}
.pod-name::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0.07em;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg,
    rgba(255,213,0,0) 0%,
    rgba(255,213,0,0.95) 50%,
    rgba(255,213,0,0) 100%);
  box-shadow: 0 0 18px rgba(255,213,0,0.55);
}
.page-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin: 0;
}

/* Section headings */
.section { margin-bottom: 64px; }
.section-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(22px, 2.6cqw, 30px);
  letter-spacing: -0.015em;
  color: var(--fg);
  margin: 0 0 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.section-title::before {
  content: '';
  flex: 0 0 6px;
  height: 22px;
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 18px rgba(255,213,0,0.55);
}

/* ───── Alerts ───── */
.alert {
  position: relative;
  padding: 20px 24px;
  border-radius: var(--r-card);
  border: 1px solid var(--line2);
  background: rgba(255,255,255,0.02);
  font-weight: 400;
  line-height: 1.55;
  margin-bottom: 24px;
}
.alert--warning {
  border-color: rgba(230,57,70,0.30);
  background: rgba(230,57,70,0.06);
  color: rgba(255,205,210,0.92);
}
.alert--info {
  border-color: var(--y-border);
  background: var(--y-surface);
  color: var(--fg-soft);
}
.alert--new {
  border-color: var(--y-border);
  background: var(--y-surface);
  color: var(--accent);
  font-weight: 700;
}
.alert--draft {
  border-color: var(--y-border);
  background: var(--y-surface);
  color: var(--fg-soft);
}
.badge-new {
  display: inline-block;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  margin-inline-start: 8px;
}

/* ───── Auth (login) ───── */
.auth-page {
  min-height: calc(100vh - 200px);
  display: grid;
  place-items: center;
  padding: 0 24px;
}
.auth-card {
  width: 100%;
  max-width: 440px;
  padding: 48px 40px;
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: 24px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 30px 80px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,213,0,0.06);
  position: relative;
  overflow: hidden;
}
.auth-card::before {
  content: '';
  position: absolute;
  top: -120px; left: -120px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(255,213,0,0.18), transparent 70%);
  pointer-events: none;
}
.auth-logo {
  display: block;
  margin: 0 auto 28px;
  height: 56px; width: auto;
  position: relative; z-index: 1;
}
.auth-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 36px;
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-align: center;
  margin: 0 0 12px;
  position: relative; z-index: 1;
}
.auth-subtitle {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-mute);
  text-align: center;
  margin: 0 0 36px;
  position: relative; z-index: 1;
}

/* ───── Dashboard cards ───── */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-bottom: 48px;
}
.card {
  position: relative;
  padding: 28px 26px;
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: var(--r-card);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
  border-color: var(--line2-strong);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.4);
}
.card--highlight {
  background:
    radial-gradient(280px 220px at 80% 10%, rgba(255,213,0,0.10), transparent 70%),
    var(--card);
  border-color: var(--y-border);
  box-shadow: inset 0 0 0 1px rgba(255,213,0,0.10);
}
.card-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.card-value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 40px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--fg);
}
.card-value--large {
  color: var(--accent);
  text-shadow: 0 0 40px rgba(255,213,0,0.35);
}
.card-sub {
  font-size: 13px;
  color: var(--fg-mute);
  margin-top: 4px;
}

/* CTA blocks */
.cta-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin-bottom: 32px;
}
.cta-block--row {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

/* ───── Project list ───── */
.project-list {
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: var(--r-card);
  overflow: hidden;
  margin-bottom: 24px;
}
.project-list--done { opacity: 0.92; }

.project-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 20px 26px;
  border-bottom: 1px dashed var(--line2);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.project-item:last-child { border-bottom: none; }
.project-item:hover { background: rgba(255,213,0,0.04); }
.project-item--new { background: var(--y-surface); }
.project-item--done { opacity: 0.62; }
.project-item--hidden { display: none; }

.project-info { display: flex; flex-direction: column; gap: 6px; flex: 1 1 240px; min-width: 0; }

.project-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--fg);
  transition: color 0.2s ease;
}
.project-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.project-meta--dim { color: var(--fg-dim); }
.project-meta .accent,
.project-meta .yellow { color: var(--accent); }

.project-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 5px 11px;
  border: 1px solid var(--y-border);
  border-radius: var(--r-pill);
  background: var(--y-surface);
}
.project-status-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(255,213,0,0.8);
  animation: dotPulse 1.6s ease-in-out infinite;
}

/* ───── Project progress bar ───── */
.ptl { margin-top: 14px; }
.ptl-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 8px;
}
.ptl-now {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--accent);
  text-shadow: 0 0 24px rgba(255,213,0,0.35);
}
.ptl-step {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--fg-mute);
  white-space: nowrap;
}
.ptl-bar {
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--line2);
  overflow: hidden;
}
.ptl-fill {
  display: block;
  height: 100%;
  width: var(--pct);
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, #f5cf00, var(--accent));
  box-shadow: 0 0 12px rgba(255,213,0,0.5);
  transform-origin: right center;
  animation: ptlFill 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes ptlFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.project-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* "Show more" toggle */
#showMoreDone {
  display: block;
  margin: 16px auto 0;
}

/* ───── Modal overlays ───── */
.revision-overlay,
.cancel-overlay,
.shorts-overlay,
.deliv-overlay,
.video-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8,8,8,0.78);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  display: grid;
  place-items: center;
  padding: 24px;
}
.revision-overlay.active,
.cancel-overlay.active,
.shorts-overlay.active,
.deliv-overlay.active,
.video-overlay.active {
  opacity: 1;
  pointer-events: all;
}

body:has(.revision-overlay.active) .nav,
body:has(.cancel-overlay.active) .nav,
body:has(.shorts-overlay.active) .nav,
body:has(.deliv-overlay.active) .nav,
body:has(.video-overlay.active) .nav {
  opacity: 0;
  pointer-events: none;
}

.revision-modal,
.cancel-modal,
.shorts-modal,
.deliv-modal,
.video-modal {
  width: 100%;
  max-width: 720px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: 24px;
  padding: 36px;
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 40px 100px rgba(0,0,0,0.7);
  transform: translateY(8px);
  transition: transform 0.25s ease;
}
.revision-overlay.active .revision-modal,
.cancel-overlay.active .cancel-modal,
.shorts-overlay.active .shorts-modal,
.deliv-overlay.active .deliv-modal,
.video-overlay.active .video-modal { transform: translateY(0); }
/* A confirmation asked from inside a panel — the episode sign-off on the way out of the
   shorts selection, the pool warning on the final approval — has to sit above that
   panel. At the same z-index the panel, later in the DOM, paints over the dialog and
   every click lands on the panel underneath: the client presses send and sees nothing. */
.cancel-overlay { z-index: 600; }
/* A modal that overflows scrolls with the brand's own bar: a thin yellow thumb on
   nothing, instead of the browser's grey rail glued to the dark card. */
.revision-modal,
.cancel-modal,
.shorts-modal,
.deliv-modal,
.video-modal {
  scrollbar-width: thin;
  scrollbar-color: var(--primary) transparent;
}
.revision-modal::-webkit-scrollbar,
.cancel-modal::-webkit-scrollbar,
.shorts-modal::-webkit-scrollbar,
.deliv-modal::-webkit-scrollbar,
.video-modal::-webkit-scrollbar { width: 6px; }
.revision-modal::-webkit-scrollbar-track,
.cancel-modal::-webkit-scrollbar-track,
.shorts-modal::-webkit-scrollbar-track,
.deliv-modal::-webkit-scrollbar-track,
.video-modal::-webkit-scrollbar-track { background: transparent; margin-block: 24px; }
.revision-modal::-webkit-scrollbar-thumb,
.cancel-modal::-webkit-scrollbar-thumb,
.shorts-modal::-webkit-scrollbar-thumb,
.deliv-modal::-webkit-scrollbar-thumb,
.video-modal::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 999px;
}

.revision-modal-header,
.cancel-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.revision-modal-title,
.cancel-modal-title,
.video-modal-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}
.revision-modal-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin: 0 0 28px;
}
.revision-close,
#shortsClose {
  background: none;
  border: 1px solid var(--line2);
  color: var(--fg-soft);
  width: 38px; height: 38px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.revision-close:hover,
#shortsClose:hover { border-color: var(--accent); color: var(--accent); transform: rotate(90deg); }

.revision-textarea {
  width: 100%;
  min-height: 140px;
  font-family: var(--font-body);
  padding: 16px;
  background: rgba(255,255,255,0.02);
  border: 1.5px solid var(--line2);
  border-radius: var(--r-input);
  color: var(--fg);
  font-size: 15px;
  line-height: 1.55;
  resize: vertical;
}
.revision-textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255,213,0,0.04);
}

.rev-section { margin-bottom: 22px; }
.rev-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.rev-section-label,
.rev-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.rev-section-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.rev-counter {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.rev-video-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.rev-video-label {
  flex: 0 0 92px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-soft);
  padding-top: 14px;
}
.rev-video-textarea {
  flex: 1;
  min-height: 80px;
}
.rev-play {
  background: none;
  border: 1px solid var(--line2);
  border-radius: 8px;
  color: var(--fg-soft);
  padding: 8px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.rev-play:hover { border-color: var(--accent); color: var(--accent); }

.revision-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}
.revision-actions .btn--primary,
.revision-actions button[type="submit"] { flex: 1; }

.revision-success {
  text-align: center;
  padding: 28px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--accent);
}

/* Cancel modal */
.cancel-modal { max-width: 480px; }
/* Success state: keep it centred on every screen (override the mobile
   bottom-sheet alignment) and give it a pill shape + entrance animation. */
.cancel-overlay.cancel-overlay--success { align-items: center; }
.cancel-overlay--success .cancel-modal {
  border-radius: 24px;
  animation: cancelModalIn 0.42s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}
.cancel-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 8px;
}
.cancel-success-icon {
  display: grid;
  place-items: center;
  width: 88px; height: 88px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--y-surface);
  border: 2px solid var(--accent);
  color: var(--accent);
  font-size: 40px;
  box-shadow: 0 0 50px rgba(255,213,0,0.32);
  animation: cancelIconPop 0.5s cubic-bezier(0.2, 0.9, 0.25, 1) 0.08s both;
}
.cancel-success-msg {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.01em;
  animation: cancelMsgIn 0.4s ease 0.18s both;
}
@keyframes cancelModalIn {
  from { opacity: 0; transform: translateY(10px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cancelIconPop {
  0%   { opacity: 0; transform: scale(0.4); }
  60%  { transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes cancelMsgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cancel-modal-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-soft);
  margin-bottom: 22px;
}
.cancel-modal-actions { display: flex; gap: 12px; }
.cancel-modal-actions button { flex: 1; }

/* Stage walkthrough — the pop-up that tells the client what this stage wants */
.guide-modal { max-width: 520px; }
.guide-step-of {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--y-surface);
  border: 1px solid rgba(255,213,0,0.22);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 14px;
}
.guide-lead { margin: 0 0 20px; }
.guide-steps {
  list-style: none;
  counter-reset: guide;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 14px;
}
.guide-steps li {
  counter-increment: guide;
  position: relative;
  padding-inline-start: 40px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-soft);
}
.guide-steps li::before {
  content: counter(guide);
  position: absolute;
  inset-inline-start: 0;
  top: -1px;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
}
/* The aside under the steps: same voice, but it is not a step to perform */
.guide-steps li.guide-note {
  counter-increment: none;
  padding-inline-start: 40px;
  font-size: 13.5px;
  color: var(--fg-mute);
  border-top: 1px solid var(--line2);
  padding-top: 14px;
}
.guide-steps li.guide-note::before {
  content: '!';
  background: transparent;
  border: 1.5px solid var(--line2-strong);
  color: var(--fg-mute);
  top: 13px;
}
@media (max-width: 720px) {
  .guide-modal { padding: 26px 22px; }
  .guide-steps li { font-size: 14px; padding-inline-start: 36px; }
  .cancel-modal-actions { flex-direction: column-reverse; }
}

/* Shorts modal */
.shorts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.short-option {
  position: relative;
  aspect-ratio: 1;
  border: 1.5px solid var(--line2);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
  background: var(--card-2);
}
.short-option:hover { border-color: var(--line2-strong); transform: translateY(-2px); }
.short-option-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* keep the bottom strip clear of the corner play button, so a two-digit
     number never crowds it */
  padding-bottom: 20px;
  cursor: pointer;
}
.short-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.short-num {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--fg-soft);
  transition: color 0.2s ease, transform 0.2s ease;
}
.short-check {
  position: absolute;
  top: 7px; left: 7px;
  width: 17px; height: 17px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line2-strong);
  background: rgba(0,0,0,0.35);
  display: grid;
  place-items: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.short-check::after {
  /* Drawn, not typed: the ✓ glyph carries its own font-dependent padding and never sat
     centred in the circle. Two borders on a rotated box always do. */
  content: '';
  width: 4px;
  height: 8px;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  /* the rotated tick's mass falls below the box centre; translate composes with the
     scale animation instead of fighting it */
  translate: 0 -1px;
  opacity: 0;
  transform: rotate(45deg) scale(0.4);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.short-option:has(.short-checkbox:checked) {
  border-color: var(--accent);
  background: var(--y-surface);
  box-shadow: 0 0 0 1px var(--accent) inset, 0 8px 24px rgba(255,213,0,0.12);
}
.short-option:has(.short-checkbox:checked) .short-num {
  color: var(--accent);
  transform: scale(1.06);
}
.short-option:has(.short-checkbox:checked) .short-check {
  background: var(--accent);
  border-color: var(--accent);
}
.short-option:has(.short-checkbox:checked) .short-check::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}
.short-play {
  position: absolute;
  bottom: 5px; right: 5px;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--line2-strong);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  color: var(--accent);
  z-index: 2;
  transition: transform 0.2s ease, background 0.2s ease;
}
.short-play::before {
  content: '▶';
  font-size: 9px;
  margin-right: -2px;
}
.short-option:hover .short-play { transform: scale(1.12); background: rgba(0,0,0,0.75); }

.custom-shorts { margin-top: 14px; }
.custom-shorts-list { display: grid; gap: 8px; margin-bottom: 10px; }
.custom-short-row { display: flex; gap: 8px; align-items: center; }
.custom-short-input {
  flex: 1;
  background: #0f0f0f;
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--fg);
  font-family: inherit;
}
.custom-short-remove {
  flex: none;
  width: 36px; height: 36px;
  border: 1px solid var(--line2);
  border-radius: 10px;
  background: transparent;
  color: var(--fg-soft);
  font-size: 18px;
  cursor: pointer;
}
.custom-short-add {
  width: 100%;
  background: transparent;
  border: 1.5px dashed var(--line2-strong);
  color: var(--fg-soft);
  border-radius: 10px;
  padding: 11px 14px;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.custom-short-add:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.custom-short-add:disabled { opacity: 0.4; cursor: not-allowed; }
.shorts-empty {
  text-align: center;
  padding: 40px 0;
  color: var(--fg-mute);
}

/* ───── Extra-shorts upsell ───── */
/* Quota meter on the project card: how much of the allowance is left, before the
   modal is even opened. */
.shorts-meter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.shorts-meter-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--fg-mute);
  white-space: nowrap;
}

/* Beyond the allowance: a real pick, just one that costs. It keeps the checked tile's
   look and adds a dashed outline and a ₪ badge, so "picked" and "picked and billable"
   are never the same thing on screen. The badge takes the free top-right corner — the
   tick sits top-left and the play button bottom-right. */
/* Beyond the package — this pick costs money, so it must not read as one more ticked
   tile. Extra picks are ticked too, so these rules have to out-specify the checked
   state above: filled in accent, badged with a price, and quietly moving so the eye
   lands on them before the client reaches the total. */
/* A package pick is already an accent-outlined tile, so "more accent" would say nothing.
   An extra pick inverts instead — filled solid, dark type — which no free pick can be
   mistaken for. */
.short-option--extra:has(.short-checkbox:checked) {
  border-color: var(--accent);
  background: linear-gradient(150deg, #ffe95e, var(--accent) 55%, #f5c400);
  box-shadow: 0 8px 26px rgba(255,222,31,0.32);
  animation: extra-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Each of these has to clear the checked state's own :has() specificity, or the tile
   would keep its accent-on-accent type and vanish into the fill. */
.short-option--extra:has(.short-checkbox:checked) .short-num {
  color: var(--ink);
  transform: none;
}
.short-option--extra:has(.short-checkbox:checked) .short-check {
  background: var(--ink);
  border-color: rgba(0,0,0,0.45);
}
.short-option--extra:has(.short-checkbox:checked) .short-check::after {
  border-color: var(--accent);
}
.short-option--extra:has(.short-checkbox:checked) .short-play {
  background: rgba(0,0,0,0.82);
  border-color: rgba(0,0,0,0.5);
}
/* A gloss travelling across the chip, clipped by the tile's own overflow. */
.short-option--extra::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.55) 50%, transparent 62%);
  animation: extra-sweep 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
.short-option--extra::after {
  content: '₪';
  position: absolute;
  top: 5px; right: 5px;
  width: 18px; height: 18px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  z-index: 2;
  animation: extra-badge 2s ease-out infinite;
}
@keyframes extra-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes extra-sweep {
  0% { transform: translateX(-130%); }
  55%, 100% { transform: translateX(130%); }
}
@keyframes extra-badge {
  0% { box-shadow: 0 0 0 0 rgba(0,0,0,0.5); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(0,0,0,0); }
}
@media (prefers-reduced-motion: reduce) {
  .short-option--extra:has(.short-checkbox:checked),
  .short-option--extra::before,
  .short-option--extra::after { animation: none; }
  .short-option--extra::before { opacity: 0; }
}
.custom-short-row--extra { position: relative; }
.custom-short-row--extra .custom-short-input {
  border-color: var(--accent);
  background: linear-gradient(155deg, rgba(255,222,31,0.16), rgba(255,222,31,0.04));
  box-shadow: 0 0 0 1px var(--accent) inset;
  padding-inline-start: 30px;
}
.custom-short-row--extra::after {
  content: '₪';
  position: absolute;
  inset-inline-start: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
  pointer-events: none;
}

/* Already produced: ticked, and not something the client can take back. Reads as a
   settled fact rather than a disabled control. */
.short-option--chosen { border-color: var(--y-border); }
.short-option--chosen .short-option-label { cursor: default; }
.custom-short-row--chosen .custom-short-input {
  color: var(--fg-mute);
  border-style: dashed;
}
.custom-short-done {
  flex: none;
  width: 36px;
  text-align: center;
  color: var(--accent);
}


/* The accumulator in the shorts modal's footer: what the selection now costs, and the
   one way forward while it costs anything. It stands where the send button stands, so
   the two can never be mistaken for each other. */
.shorts-extra-bar {
  margin-top: 20px;
  padding: 16px;
  border: 1.5px solid var(--y-border);
  border-radius: var(--r-card);
  background: var(--y-surface);
  text-align: center;
}
.shorts-extra-count {
  margin: 0;
  font-weight: 700;
  font-size: 15px;
  color: var(--fg);
}
.shorts-extra-total {
  margin: 6px 0 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
}
.shorts-extra-bar .cart-note { margin-top: 2px; }
.shorts-extra-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-mute);
}
.shorts-extra-cta { width: 100%; margin-top: 14px; }

.cart-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 22px;
}
.cart-step {
  width: 44px; height: 44px;
  border: 1px solid var(--line2-strong);
  border-radius: 12px;
  background: transparent;
  color: var(--fg);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.cart-step:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.cart-step:disabled { opacity: 0.35; cursor: not-allowed; }
.cart-qty {
  min-width: 56px;
  text-align: center;
  font-size: 28px;
  font-weight: 900;
  color: var(--fg);
}
.cart-total {
  text-align: center;
  margin-top: 18px;
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
}
.cart-note {
  text-align: center;
  margin-top: 4px;
  font-size: 12px;
  color: var(--fg-mute);
}
.cart-error {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 13px;
  text-align: center;
}

/* ───── Payment return ───── */
.pay-return .pay-title { text-align: center; }
.pay-spinner {
  width: 46px; height: 46px;
  margin: 0 auto 20px;
  border: 3px solid var(--line2-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: pay-spin 0.9s linear infinite;
}
@keyframes pay-spin { to { transform: rotate(360deg); } }

.btn--waiting {
  animation: btn-wait-pulse 1.2s ease-in-out infinite;
  cursor: progress;
}
@keyframes btn-wait-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.pay-icon-wait { font-size: 42px; text-align: center; margin-bottom: 14px; }
.pay-back { margin-top: 1.5rem; }

/* Adding shorts is available wherever an episode is still in the studio. Marked with
   the accent so it is findable, kept at pill weight so it never competes with the
   stage's own action. */
.btn-shorts--add { border-color: var(--y-border); color: var(--accent); }
.approval-add-shorts { margin-inline-end: auto; font-size: 13px; }
/* The studio owes the next move: readable as a state, not as a dead control. */
.btn-shorts--waiting:disabled {
  opacity: 0.7;
  border-style: dashed;
  color: var(--fg-mute);
}

/* Shorts request: how the raw-clips round works before anything is bought. */
.request-intro {
  margin: 18px 0 10px;
  font-size: 14px;
  color: var(--fg);
}
.request-steps {
  margin: 0;
  padding-inline-start: 22px;
  display: grid;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-mute);
}
.request-steps strong {
  display: block;
  color: var(--fg);
}

.shorts-finish-note {
  color: var(--accent);
  font-weight: 700;
}
.pay-ref {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--fg-dim);
}

/* Deliverables modal */
.deliv-grid { margin-top: 18px; }
.deliv-item {
  position: relative;
  display: grid;
  place-items: center;
  width: 104px;
  aspect-ratio: 9 / 16;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--line2);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
}
.deliv-item:hover { border-color: var(--accent); transform: translateY(-2px); }
.deliv-play::before { content: '\25B6'; }
.deliv-item-label {
  position: absolute;
  bottom: 8px; right: 10px;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-soft);
  background: rgba(0,0,0,0.5);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(8px);
}
.deliv-play { font-size: 30px; color: var(--accent); }
.deliv-item--corrected { border-color: var(--accent); }
.deliv-item--corrected::after {
  content: '\2713 תיקון נשמר';
  position: absolute;
  top: 8px;
  right: 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--ink);
  background: var(--accent);
  padding: 3px 8px;
  border-radius: var(--r-pill);
}

/* Posting plan */
.plan-loading {
  margin-top: 24px;
  font-size: 13px;
  color: var(--fg-mute);
}
.plan-section { margin-top: 28px; }
.plan-intro {
  font-size: 13px;
  color: var(--fg-mute);
  margin: -4px 0 14px;
}
.plan-row {
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: rgba(0,0,0,0.25);
}
.plan-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.plan-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
}
.plan-title {
  flex: 1;
  font-weight: 600;
  font-size: 15px;
}
.plan-date {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--fg-mute);
}
.plan-caption {
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-soft);
  margin-bottom: 10px;
}
.plan-copy {
  background: none;
  border: 1px solid var(--line2);
  border-radius: var(--r-pill);
  color: var(--fg-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 6px 14px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.plan-copy:hover { border-color: var(--accent); color: var(--accent); }

/* Stills gallery — shared by the shorts modal and the deliverables modal */
.stills-section { margin-top: 24px; }
.stills-download-all {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.stills-download-all:hover { text-decoration: underline; }
.stills-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.still-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--line2);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
}
.still-tile:hover, .still-tile:focus-visible {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.still-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.still-dl {
  position: absolute;
  bottom: 6px; right: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--ink);
  background: var(--accent);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.still-tile:hover .still-dl,
.still-tile:focus-within .still-dl { opacity: 1; }
@media (hover: none) {
  .still-dl { opacity: 1; }  /* no hover on touch — the button must always be reachable */
}

/* Video modal */
.video-modal { max-width: 880px; }
.video-modal .revision-close {
  position: absolute;
  top: 26px;
  inset-inline-start: 26px;
}
/* The title sits centred over the media and slides in with each file; the close
   button keeps its corner, so the title clears it on both sides. */
.video-modal .video-modal-title {
  padding-inline: 52px;
  text-align: center;
  justify-content: center;
}
.video-modal .video-modal-title.is-entering { animation: video-title-in 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
/* The short's own title under the number. It wraps to as many lines as it needs —
   a sentence the editor wrote is never cut short — and breaks inside a word only
   when one word alone is wider than the modal. */
.video-modal .video-modal-sub {
  margin: 6px 0 0;
  padding-inline: 52px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--fg-soft);
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
/* The title's entrance tightens its letter-spacing, which suits one short line. On the
   description it re-wrapped the lines while they settled and then snapped from the
   animation's -0.02em back to normal, so the text jumped as each short opened. The
   description only fades and drops in. */
.video-modal .video-modal-sub.is-entering { animation: video-sub-in 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes video-sub-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes video-title-in {
  from { opacity: 0; transform: translateY(-6px); letter-spacing: 0.06em; }
  to   { opacity: 1; transform: none; letter-spacing: -0.02em; }
}
/* The arrows sit BESIDE the media, never on top of it. The negative margin borrows the
   modal's own padding for them, so the frame keeps almost all of its width. */
.video-stage {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-inline: -26px;
}
.video-stage .video-iframe-wrap { flex: 1 1 auto; min-width: 0; }
.video-stage .video-iframe-wrap.is-image { flex: 0 1 auto; margin-inline: auto; }
.video-nav {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1.5px solid var(--line2-strong);
  border-radius: 50%;
  background: rgba(255,255,255,0.03);
  color: var(--fg);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
}
/* Drawn, not typed: ‹ and › are bidi-mirrored and point the wrong way in an RTL page. */
.video-nav svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.video-nav:hover, .video-nav:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(255,213,0,0.22);
  outline: none;
}
.video-nav--next:hover { transform: translateX(-3px); }
.video-nav--prev:hover { transform: translateX(3px); }
/* Held, not removed: dropping it from the flow at the ends would shift the media sideways. */
.video-nav.is-off { visibility: hidden; }
/* The press itself, so the click answers before the new file has loaded. */
.video-nav:active { transform: scale(0.88); transition-duration: 0.06s; }
.video-nav.is-tapped { animation: video-nav-pulse 0.4s ease-out; }
@keyframes video-nav-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,213,0,0.55); }
  100% { box-shadow: 0 0 0 16px rgba(255,213,0,0); }
}

/* The new item arrives from the side it was reached from, so the direction of travel
   is visible rather than just a flicker. */
@keyframes video-slide-next {
  from { opacity: 0; transform: translateX(28px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes video-slide-prev {
  from { opacity: 0; transform: translateX(-28px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.video-stage.is-sliding-next .video-iframe-wrap {
  animation: video-slide-next 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.video-stage.is-sliding-prev .video-iframe-wrap {
  animation: video-slide-prev 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .video-stage.is-sliding-next .video-iframe-wrap,
  .video-stage.is-sliding-prev .video-iframe-wrap { animation: none; }
  .video-nav.is-tapped { animation: none; }
}
.video-iframe-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  margin: 16px 0;
}
.video-iframe-wrap iframe { width: 100%; height: 100%; border: 0; }
.video-iframe-wrap video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
/* Audio is a bar, not a picture: no frame, no black box. */
.video-iframe-wrap.is-audio {
  aspect-ratio: auto !important;
  background: transparent;
  padding: 8px 0;
}
.video-iframe-wrap.is-audio audio { display: block; width: 100%; }
#videoImage {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 58vh;
  margin: 0 auto;
  border-radius: 12px;
  object-fit: contain;
  cursor: zoom-in;
}
/* Above every modal: the picture alone, nothing else on screen. */
.image-zoom {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  padding: 12px;
  background: rgba(0,0,0,0.96);
  cursor: zoom-out;
}
.image-zoom img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
}
.image-zoom-close {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  inset-inline-start: 14px;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--line2);
  border-radius: 50%;
  color: var(--fg);
  font-size: 18px;
  cursor: pointer;
}
/* A vertical file is tall, not wide: sized by height so the title, the bar and the
   actions stay on screen with it, on a desktop as on a phone. */
.video-stage .video-iframe-wrap.is-portrait {
  flex: 0 1 auto;
  width: auto;
  height: min(70vh, 720px);
  max-width: 100%;
  margin-inline: auto;
}
/* A short viewport (a phone held sideways, a small laptop window): every frame is
   sized by height. */
@media (max-height: 520px) {
  .video-stage .video-iframe-wrap:not(.is-image) {
    flex: 0 1 auto;
    width: auto;
    height: 60vh;
    height: 60dvh;
    max-width: 100%;
    margin-inline: auto;
  }
}
/* Image thumbnail: the frame hugs the image (no black side bars) and never forces 16/9. */
.video-iframe-wrap.is-image {
  width: fit-content;
  max-width: 100%;
  aspect-ratio: auto !important;
  background: transparent;
  overflow: visible;
  margin: 12px auto;
}
.video-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}
/* Every button walks in a beat after the media, one after the other. */
.video-overlay.active .video-actions > *,
.revision-overlay.active .video-actions > * { animation: video-action-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.video-actions > :nth-child(2) { animation-delay: 0.05s; }
.video-actions > :nth-child(3) { animation-delay: 0.1s; }
.video-actions > :nth-child(4) { animation-delay: 0.15s; }
@keyframes video-action-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
/* The viewer's buttons: a pill family with one filled member. */
.vbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 20px;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.vbtn svg { width: 18px; height: 18px; fill: currentColor; flex: 0 0 auto; }
.vbtn:active { transform: scale(0.97); }
.vbtn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(255,213,0,0.22);
}
.vbtn--primary:hover { background: #f2cf00; border-color: #f2cf00; box-shadow: 0 12px 30px rgba(255,213,0,0.32); }
.vbtn--ghost {
  background: rgba(255,255,255,0.03);
  border-color: var(--line2-strong);
  color: var(--fg);
}
.vbtn--ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--y-surface); }
.vbtn--quiet {
  background: rgba(255,255,255,0.03);
  border-color: var(--line2-strong);
  color: var(--fg-soft);
}
.vbtn--quiet:hover { color: var(--accent); border-color: var(--accent); background: var(--y-surface); }
.vbtn[disabled] { opacity: 0.5; cursor: default; transform: none; box-shadow: none; }
.video-note-form,
.video-approval-form {
  margin-top: 14px;
  padding: 16px;
  background: rgba(255,213,0,0.04);
  border: 1px solid var(--y-border);
  border-radius: var(--r-card);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.video-note-textarea {
  width: 100%;
  min-height: 90px;
  margin-bottom: 0;
}
.video-approval-label { font-weight: 700; font-size: 14px; }
.video-approval-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.video-approval-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.approval-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line2);
}
.approval-round { font-weight: 700; font-size: 14px; color: var(--fg-soft); }
.approval-actions { display: flex; gap: 12px; }

.batch-send { position: relative; display: inline-flex; }
.batch-send--exhausted .btn,
.batch-send--exhausted .btn:hover {
  opacity: 0.45;
  cursor: help;
  transform: none;
  box-shadow: none;
}
.batch-send-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  z-index: 5;
  width: max-content;
  max-width: 240px;
  padding: 10px 14px;
  background: var(--card-2);
  border: 1px solid var(--y-border);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.5);
  color: var(--fg);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.batch-send-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--card-2);
}
.batch-send--exhausted:hover .batch-send-tip,
.batch-send--exhausted:focus-within .batch-send-tip,
.batch-send--tip-open .batch-send-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.video-notes-list { margin-top: 18px; display: grid; gap: 10px; }
.video-note-item {
  padding: 12px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line2);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
}

/* ───── Slots picker (slots.html) ───── */
.sp-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  gap: 12px;
}
.sp-back {
  position: absolute;
  right: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
  padding: 8px 14px;
  border: 1px solid var(--line2);
  border-radius: var(--r-pill);
  transition: all 0.2s;
}
.sp-back:hover { color: var(--accent); border-color: var(--accent); }
.sp-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 4cqw, 44px);
  letter-spacing: -0.025em;
  text-align: center;
  margin: 0;
  flex: 1;
}

.sp-outer {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: stretch;
}
.sp-card {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 32px;
  align-items: start;
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: 24px;
  padding: 28px;
  position: relative;
}

/* Calendar */
.sp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.sp-nav-btn {
  width: 40px; height: 40px;
  border: 1px solid var(--line2);
  border-radius: 50%;
  background: none;
  color: var(--fg);
  font-size: 18px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.2s;
}
.sp-nav-btn:hover { border-color: var(--accent); color: var(--accent); transform: scale(1.05); }
.sp-nav-btn:disabled { opacity: 0.25; cursor: not-allowed; }
.sp-nav-month {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
/* Both card columns must be allowed to shrink, otherwise the 7-column calendar's
   min-content width inflates the track and overflows the card on narrow screens. */
.sp-cal, .sp-slots { min-width: 0; }
.sp-wdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
.sp-wdays > * {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
  text-align: center;
  padding: 8px 0;
}
.sp-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 6px;
}
.sp-day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
  color: var(--fg);
  position: relative;
}
.sp-day:hover:not(.sp-day-off) {
  background: var(--y-surface);
  border-color: var(--y-border);
}
.sp-day-off { opacity: 0.25; cursor: not-allowed; background: none; }
.sp-day-today { color: var(--accent); }
.sp-day-avail::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(255,213,0,0.7);
}
.sp-day-sel {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(255,213,0,0.32);
}
.sp-day-sel::after { background: var(--ink); box-shadow: none; }

/* Slots column */
.sp-slots-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.sp-slots-hd > div:first-child {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.sp-slots-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.sp-slot-list { display: grid; gap: 10px; }
.sp-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border: 1.5px solid var(--line2);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg);
}
.sp-slot:hover { border-color: var(--accent); color: var(--accent); }
.sp-slot-sel {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink);
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(255,213,0,0.3);
}
.sp-slot-taken,
.sp-slot-na { opacity: 0.3; cursor: not-allowed; }
.sp-slot-taken:hover,
.sp-slot-na:hover { border-color: var(--line2); color: var(--fg-soft); transform: none; }
.sp-stime { letter-spacing: 0.16em; }
.sp-stag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.6;
}
.sp-empty {
  padding: 40px 0;
  text-align: center;
  color: var(--fg-mute);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Confirm bar */
.sp-confirm {
  position: sticky;
  bottom: 24px;
  margin-top: 28px;
  background: var(--card);
  border: 1px solid var(--y-border);
  border-radius: var(--r-card);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.sp-confirm-text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-soft);
}

/* Details (step 2) */
.sp-details-wrap { display: none; }
.sp-details-card {
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: 24px;
  padding: 36px;
  max-width: 580px;
  margin: 0 auto;
  text-align: center;
}
.sp-details-chosen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.sp-details-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 24px;
}
.sp-details-form { display: flex; flex-direction: column; gap: 18px; }
.sp-field { display: flex; flex-direction: column; gap: 6px; }
.sp-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.sp-required { color: var(--accent); }
.sp-input,
.sp-select {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.02);
  border: 1.5px solid var(--line2);
  border-radius: var(--r-input);
  color: var(--fg);
  text-align: center;
  transition: all 0.2s;
}
.sp-input:focus,
.sp-select:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255,213,0,0.04);
  box-shadow: 0 0 0 4px rgba(255,213,0,0.10);
}
.sp-input--error,
.sp-input--error:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px rgba(230,57,70,0.12);
}
.sp-field-error {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--danger);
  text-align: center;
}
.sp-guests { display: flex; flex-direction: column; gap: 8px; }
.sp-guest-row { display: flex; gap: 8px; align-items: center; }
.sp-guest-row .sp-input { flex: 1; }
.sp-guest-remove {
  width: 36px; height: 36px;
  border: 1px solid var(--line2);
  border-radius: 50%;
  background: none;
  color: var(--fg-soft);
  font-size: 18px;
  cursor: pointer;
}
.sp-guest-remove:hover { border-color: var(--danger); color: var(--danger); }
.sp-add-guest {
  align-self: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 14px;
  background: none;
  border: 1px dashed var(--line2-strong);
  border-radius: var(--r-pill);
  color: var(--fg-soft);
  cursor: pointer;
  transition: all 0.2s;
}
.sp-add-guest:hover { border-color: var(--accent); color: var(--accent); background: var(--y-surface); }
.sp-check-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  color: var(--fg-soft);
  line-height: 1.5;
}
.sp-link { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.sp-details-footer { display: flex; gap: 12px; margin-top: 12px; }
.sp-details-footer > * { flex: 1; }

/* Success state */
.sp-success {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 72px 44px;
  background: var(--card);
  border: 1px solid var(--y-border);
  border-radius: 28px;
  max-width: 540px;
  margin: 0 auto;
}
.sp-success-icon {
  display: grid;
  place-items: center;
  width: 116px; height: 116px;
  margin: 0 auto 28px;
  border-radius: 50%;
  background: var(--y-surface);
  border: 2px solid var(--accent);
  color: var(--accent);
  font-size: 54px;
  box-shadow: 0 0 60px rgba(255,213,0,0.35);
}
.sp-success-msg {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* Success state: show only the confirmation, centered in the viewport. */
body.sp-done .sp-header { display: none; }
body.sp-done .sp-outer {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 5;
}

/* ───── Upload page ───── */
.upl-wrap {
  max-width: 580px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: 24px;
  padding: 36px;
}
.upl-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.upl-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.upl-star { color: var(--accent); }
.upl-sub {
  font-size: 12px;
  color: var(--fg-dim);
  margin-top: 4px;
  line-height: 1.5;
}
.upl-input,
.upl-textarea {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.02);
  border: 1.5px solid var(--line2);
  border-radius: var(--r-input);
  color: var(--fg);
  width: 100%;
  transition: all 0.2s;
}
.upl-input:focus,
.upl-textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255,213,0,0.04);
  box-shadow: 0 0 0 4px rgba(255,213,0,0.10);
}
.upl-textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.upl-check-row { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 24px; }
.upl-check-text { font-size: 14px; color: var(--fg-soft); line-height: 1.5; }
.upl-submit { width: 100%; }
.upl-success {
  display: none;
  text-align: center;
  padding: 50px 20px;
}
.upl-success-icon {
  display: grid;
  place-items: center;
  width: 84px; height: 84px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--y-surface);
  border: 2px solid var(--accent);
  color: var(--accent);
  font-size: 40px;
  box-shadow: 0 0 50px rgba(255,213,0,0.3);
}
.upl-success-msg {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  margin-bottom: 24px;
}

/* ───── Confirmed (booking success) ───── */
.page--centered {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: calc(100vh - 240px);
}
.confirmed-icon {
  display: grid;
  place-items: center;
  width: 120px; height: 120px;
  margin: 0 auto 32px;
  border-radius: 50%;
  background: var(--y-surface);
  border: 2px solid var(--accent);
  color: var(--accent);
  font-size: 56px;
  box-shadow:
    0 0 60px rgba(255,213,0,0.4),
    inset 0 0 30px rgba(255,213,0,0.08);
}
.confirmed-date {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 18px;
}
.confirmed-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-top: 16px;
}

/* ───── Tables (legacy) ───── */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}
th, td {
  text-align: right;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line2);
}
th {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* ───── Reduced motion ───── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  body::before { animation: none; opacity: 0.4; }
  .cursor-glow { display: none; }
  .reveal-init { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — Container queries (fires on canvas width)
   ═══════════════════════════════════════════════════════════════════════════ */
@container canvas (max-width: 720px) {
  .main { padding: 100px 18px 80px; }
  .nav-inner { padding: 16px 18px; }
  .nav-links {
    position: fixed;
    inset: 76px 0 0 0;
    flex-direction: column;
    align-items: stretch;
    padding: 28px 22px;
    background: rgba(10,10,10,0.96);
    backdrop-filter: blur(28px) saturate(1.4);
    border-top: 1px solid var(--line2);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
    gap: 6px;
  }
  .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: all; }
  .nav-link {
    padding: 16px 12px;
    font-size: 14px;
    border-radius: var(--r-btn);
    border-bottom: 1px dashed var(--line2);
  }
  .nav-link:last-child { border-bottom: none; }
  .nav-link--cta {
    margin-top: 14px;
    padding: 18px 12px !important;
    text-align: center;
    font-size: 14px;
  }
  .hamburger { display: flex; }

  body::before { display: none; }
  .cursor-glow { display: none; }

  .page-header { margin-bottom: 36px; }
  .page-title { font-size: clamp(28px, 9.6cqw, 44px); line-height: 1.1; }
  .section { margin-bottom: 44px; }
  .section-title { font-size: 22px; }

  .cards { grid-template-columns: 1fr 1fr; gap: 12px; }
  .card { padding: 22px 18px; }
  .card-value { font-size: 32px; }

  .project-item { padding: 18px 18px; }
  .project-name { font-size: 16px; }
  .project-actions { width: 100%; justify-content: flex-end; }
  .btn-reschedule, .btn-shorts, .btn-revision, .btn-view-deliverables, .btn-cancel {
    padding: 7px 12px;
    font-size: 10px;
  }

  .sp-outer { gap: 18px; }
  .sp-card { grid-template-columns: 1fr; gap: 22px; padding: 22px 18px; }
  .sp-title { font-size: 28px; }
  .sp-day { font-size: 14px; border-radius: 8px; }
  .sp-slot { padding: 16px 18px; font-size: 14px; }
  .sp-details-card { padding: 28px 22px; }
  .sp-details-title { font-size: 22px; }
  .sp-details-footer { flex-direction: column; }
  .sp-confirm { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; }
  .sp-confirm-text { text-align: center; }

  .revision-modal, .cancel-modal, .shorts-modal, .deliv-modal, .video-modal {
    padding: 22px 18px;
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0;
    max-height: 92vh;
    max-height: 92dvh;
  }
  .video-modal .revision-close { top: 18px; inset-inline-start: 18px; }
  /* The viewer is a screen of its own on a phone: it fills the display instead of
     riding as a short sheet at the bottom with the page showing above it. */
  .video-modal {
    min-height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    padding-top: calc(18px + env(safe-area-inset-top));
  }
  .video-modal .revision-close { top: calc(18px + env(safe-area-inset-top)); }
  /* The title row is as tall as the close button beside it, so the frame below
     starts under the button and never cuts into it. */
  .video-modal .video-modal-title { min-height: 38px; display: flex; align-items: center; gap: 0.28em; }
  .video-stage .video-iframe-wrap:not(.is-image) { margin-top: 14px; }
  .video-actions .vbtn--primary { flex: 1 1 100%; }
  .video-actions .vbtn--ghost, .video-actions .vbtn--quiet { flex: 1 1 auto; }
  .video-modal .video-modal-title { padding-inline: 46px; }
  .video-modal .video-modal-sub { padding-inline: 46px; font-size: 14px; }
  .revision-overlay, .cancel-overlay, .shorts-overlay, .deliv-overlay, .video-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .revision-modal-title, .cancel-modal-title, .video-modal-title { font-size: 22px; }
  .rev-video-row { flex-direction: column; gap: 6px; }
  .rev-video-label { padding-top: 0; flex: none; }
  .shorts-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
  .stills-gallery { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  /* A landscape video on a phone is short enough that every pixel of width counts: the
     media takes the whole sheet and the arrows move under it, instead of standing beside
     it and eating a fifth of the frame. A vertical file is tall, not wide — it keeps its
     height capped to the screen so the sheet never has to scroll to show the player. */
  .video-stage {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-inline: -18px;
  }
  /* An empty full-width line: it forces the arrows below the media without asking the
     markup to grow a wrapper element. */
  .video-stage::before {
    content: '';
    order: -1;
    flex: 0 0 100%;
    height: 0;
  }
  .video-stage .video-iframe-wrap:not(.is-image) {
    order: -2;
    flex: 0 0 100%;
    width: 100%;
    max-height: 62dvh;
    border-radius: 0;
    margin: 10px 0 0;
  }
  .video-stage .video-iframe-wrap.is-image { order: -2; }
  /* Only a player needs the extra width; a photo bleeding past the sheet's rounded
     edge just looks like a mistake. */
  .video-stage:has(.is-image) { margin-inline: 0; }
  .video-stage .video-iframe-wrap.is-portrait {
    flex: 0 1 auto;
    width: auto;
    height: 58dvh;
    max-width: 100%;
    border-radius: 12px;
  }
  .video-nav { width: 44px; height: 44px; }
  .video-nav svg { width: 18px; height: 18px; }
  .video-stage { gap: 14px; }
  .video-stage .video-iframe-wrap:not(.is-image) { margin-bottom: 4px; }
  .deliv-item { width: auto; }

  .upl-wrap { padding: 26px 20px; }
  .confirmed-icon { width: 96px; height: 96px; font-size: 44px; }
  .auth-card { padding: 36px 26px; }
  .auth-title { font-size: 28px; }
}

@container canvas (max-width: 420px) {
  .cards { grid-template-columns: 1fr; }
  .page-title { font-size: 28px; }
  .shorts-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
  .stills-gallery { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
}

/* ───── Fallback viewport-based queries (until .site-canvas is applied) ───── */
@media (max-width: 720px) {
  body::before { display: none; }
  .cursor-glow { display: none; }
  .hamburger { display: flex; }
  .nav-links {
    position: fixed;
    inset: 76px 0 0 0;
    flex-direction: column;
    align-items: stretch;
    padding: 28px 22px;
    background: rgba(10,10,10,0.96);
    backdrop-filter: blur(28px);
    border-top: 1px solid var(--line2);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
    gap: 6px;
  }
  .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: all; }
  .main { padding: 100px 18px 80px; }
  .cards { grid-template-columns: 1fr 1fr; gap: 12px; }
  .sp-card { grid-template-columns: 1fr; gap: 22px; }
  .page-title { font-size: clamp(28px, 9.6vw, 44px); }
  .sp-details-footer { flex-direction: column; }
}

@media (max-width: 420px) {
  .cards { grid-template-columns: 1fr; }
}

/* ───── Admin Mode (inline editor) ───── */
.cuts-admin-editing .cuts-editable {
  outline: 1px dashed var(--y-border);
  outline-offset: 3px;
  border-radius: 4px;
  transition: outline-color 0.15s ease, background 0.15s ease;
  cursor: text;
}
.cuts-admin-editing .cuts-editable:hover {
  outline-color: var(--accent);
  background: rgba(255, 213, 0, 0.05);
}
.cuts-admin-editing .cuts-editable:focus {
  outline: 2px solid var(--accent);
  background: rgba(255, 213, 0, 0.07);
}
.cuts-admin-toolbar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--y-border);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}
.cuts-admin-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--accent);
  padding-inline-end: 4px;
}
.cuts-admin-btn {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--line2, rgba(255, 255, 255, 0.12));
  background: transparent;
  color: var(--text, #fff);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cuts-admin-btn:hover { border-color: var(--accent); color: var(--accent); }
.cuts-admin-btn--primary {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
}
.cuts-admin-btn--primary:hover { color: var(--ink); filter: brightness(1.05); }
.cuts-admin-toolbar--dirty .cuts-admin-btn--primary {
  box-shadow: 0 0 0 3px rgba(255, 213, 0, 0.25);
}
.cuts-admin-status {
  font-size: 12px;
  color: var(--text-2, var(--text-3, #999));
  min-width: 70px;
}

/* selected element + center guide */
.cuts-admin-editing .cuts-selected {
  outline: 2px solid var(--accent) !important;
  outline-offset: 3px;
}
.cuts-center-guide {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px dashed var(--accent);
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.cuts-center-guide.show { opacity: 0.8; }

/* properties panel */
.cuts-admin-panel {
  position: fixed;
  top: 70px;
  inset-inline-start: 16px;
  width: 250px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  z-index: 9999;
  background: var(--card);
  border: 1px solid var(--y-border);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  font-family: var(--font-body);
  transform: translateX(calc(-100% - 24px));
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.cuts-admin-panel.is-open { transform: none; opacity: 1; }
.cuts-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
  border-bottom: 1px solid var(--line2, rgba(255, 255, 255, 0.1));
}
.cuts-panel-x {
  background: none;
  border: none;
  color: var(--text-3, #999);
  cursor: pointer;
  font-size: 14px;
}
.cuts-panel-empty { padding: 18px 14px; font-size: 13px; color: var(--text-3, #999); }
.cuts-panel-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 14px; }
.cuts-ctl {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2, #bbb);
}
.cuts-ctl [data-out] { color: var(--accent); font-weight: 700; }
.cuts-ctl input[type="range"] { width: 100%; accent-color: var(--accent); }
.cuts-ctl select {
  background: var(--card-2, #1a1a1a);
  color: #fff;
  border: 1px solid var(--line2, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  padding: 7px 8px;
  font-size: 13px;
}
.cuts-ctl input[type="color"] {
  width: 100%;
  height: 30px;
  border: 1px solid var(--line2, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  background: none;
  cursor: pointer;
}
.cuts-ctl-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cuts-ctl-row .cuts-ctl { flex: 1; min-width: 70px; }
.cuts-tog {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--line2, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
}
.cuts-tog.is-on { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.cuts-sep { flex: 1; }
.cuts-mini {
  padding: 6px 10px;
  border: 1px solid var(--line2, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  background: transparent;
  color: var(--text-2, #bbb);
  cursor: pointer;
  font-size: 11px;
}
.cuts-mini--wide { width: 100%; margin-top: 2px; }
.cuts-mini:hover { border-color: var(--accent); color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════════════════
   THE PORTAL'S PLAYER — controls drawn in the brand over <video> / <audio>
   ═══════════════════════════════════════════════════════════════════════════ */
.video-iframe-wrap:focus { outline: none; }
.video-iframe-wrap:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.cp {
  position: absolute;
  inset: 0;
  display: block;
  color: #fff;
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.cp[hidden] { display: none; }
.cp svg {
  width: 26px; height: 26px;
  fill: currentColor;
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.95));
}

/* Shade behind the bar, so the controls read on any picture. */
.cp::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  max-height: 180px;
  background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.55) 50%, transparent);
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 0;
}
/* The shade is painted under the controls, never over them: a pseudo-element comes
   last in the tree and would otherwise cover the bar and grey it out. */
.cp-bar, .cp-big, .cp-menu, .cp-tap, .cp-spinner { z-index: 1; }
.cp--idle::after, .cp--idle .cp-bar, .cp--idle .cp-big { opacity: 0; pointer-events: none; }
.cp--idle { cursor: none; }
.cp-bar, .cp-big { transition: opacity 0.25s ease, transform 0.25s ease; }

/* The big button: brand yellow on black, the one thing a first-time client taps. */
.cp-big {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 68px; height: 68px;
  display: grid; place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45), 0 0 0 6px rgba(255,213,0,0.18);
}
.cp-big svg { width: 30px; height: 30px; filter: none; }
.cp-big .cp-i-play { margin-left: 3px; }
.cp-big:active { transform: translate(-50%, -50%) scale(0.92); }
.cp-i-pause, .cp-i-replay, .cp-i-muted, .cp-i-unfull { display: none !important; }
.cp--playing .cp-i-play { display: none !important; }
.cp--playing .cp-i-pause { display: block !important; }
.cp--ended .cp-i-play, .cp--ended .cp-i-pause { display: none !important; }
.cp--ended .cp-big .cp-i-replay { display: block !important; }
.cp--muted .cp-i-vol { display: none !important; }
.cp--muted .cp-i-muted { display: block !important; }
.cp--fullscreen .cp-i-full { display: none !important; }
.cp--fullscreen .cp-i-unfull { display: block !important; }
/* While playing the big button is gone: the bar's own pause takes over, and the
   picture stays clear. It returns the moment playback stops. */
.cp--playing .cp-big { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.8); }
.cp--loading .cp-big { opacity: 0; pointer-events: none; }

.cp-spinner {
  position: absolute;
  top: 50%; left: 50%;
  width: 54px; height: 54px;
  margin: -27px 0 0 -27px;
  border: 4px solid rgba(255,255,255,0.18);
  border-top-color: var(--accent);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: cp-spin 0.9s linear infinite;
}
.cp--loading .cp-spinner { opacity: 1; }
@keyframes cp-spin { to { transform: rotate(360deg); } }

/* Double-tap zones: a ripple with the seconds, on the half that was tapped. */
.cp-tap {
  position: absolute;
  top: 0; bottom: 30%;
  width: 45%;
  display: grid; place-items: center;
  pointer-events: none;
}
.cp-tap--back { left: 0; }
.cp-tap--fwd { right: 0; }
.cp-ripple {
  width: 84px; height: 84px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,213,0,0.22);
  color: #fff;
  font-weight: 900;
  font-size: 18px;
  opacity: 0;
  transform: scale(0.5);
}
.cp-ripple::before { content: '⟲ '; font-weight: 400; }
.cp-tap--fwd .cp-ripple::before { content: '⟳ '; }
.cp-tap.is-on .cp-ripple { animation: cp-ripple 0.55s ease-out; }
@keyframes cp-ripple {
  0%   { opacity: 0; transform: scale(0.5); }
  25%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.35); }
}

.cp-bar {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0 10px 4px;
}

/* The scrubber: a full-width track with a generous touch area around it. */
.cp-track {
  position: relative;
  height: 28px;
  margin: 0 6px;
  cursor: pointer;
  touch-action: none;
}
.cp-track::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  background: rgba(255,255,255,0.4);
  box-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.cp-buffered, .cp-played {
  position: absolute;
  left: 0; top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  width: 0;
}
.cp-buffered { background: rgba(255,255,255,0.35); }
.cp-played { background: var(--accent); }
.cp-thumb {
  position: absolute;
  top: 50%; left: 0;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.6);
  transform: scale(0.85);
  transition: transform 0.15s ease;
}
.cp-track:hover .cp-thumb, .cp--scrubbing .cp-thumb { transform: scale(1.25); }
.cp--scrubbing .cp-track::before { height: 6px; margin-top: -3px; }
.cp--scrubbing .cp-buffered, .cp--scrubbing .cp-played { height: 6px; margin-top: -3px; }
.cp-bubble {
  position: absolute;
  bottom: 24px; left: 0;
  transform: translateX(-50%);
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.cp--scrubbing .cp-bubble { opacity: 1; }
@media (hover: hover) { .cp-track:hover .cp-bubble { opacity: 1; } }

.cp-row {
  display: flex;
  align-items: center;
  gap: 2px;
}
.cp-btn {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 44px; height: 44px;
  padding: 0 6px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.cp-btn:focus-visible { color: var(--accent); background: rgba(255,255,255,0.1); outline: none; }
@media (hover: hover) {
  .cp-btn:hover { color: var(--accent); background: rgba(255,255,255,0.1); }
}
.cp-btn:active { color: var(--accent); }
.cp-btn:active { transform: scale(0.94); }
.cp-btn[hidden] { display: none; }
.cp-skip b { font-size: 11px; font-weight: 900; margin-left: -4px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.9); }
.cp-grow { flex: 1 1 auto; }
.cp-time {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 0 8px;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}
.cp-time { color: #fff; }
.cp-time-sep { color: rgba(255,255,255,0.6); }
#cpDur { color: rgba(255,255,255,0.85); }

/* The note button is the studio's own feature, so it wears the brand. */
.cp-note { display: none; color: var(--ink); background: var(--accent); padding: 0 12px; height: 36px; border-radius: var(--r-pill); }
.cp-note svg { filter: none; }
.cp--notes .cp-note { display: inline-flex; }
.cp-note span { font-size: 13px; font-weight: 900; }
.cp-note:focus-visible { color: var(--ink); background: #f2cf00; }
@media (hover: hover) { .cp-note:hover { color: var(--ink); background: #f2cf00; } }
.cp-note:active { color: var(--ink); }

/* Volume: the slider only where a pointer can hover; a phone has hardware buttons. */
.cp-vol { display: inline-flex; align-items: center; }
.cp-volume {
  display: none;
  width: 0;
  height: 4px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
  transition: width 0.2s ease;
}
@media (hover: hover) {
  .cp-volume { display: block; width: 0; opacity: 0; }
  .cp-vol:hover .cp-volume, .cp-vol:focus-within .cp-volume { width: 78px; opacity: 1; margin-right: 6px; }
}

/* Speed and quality: a small sheet above the gear, chips big enough for a thumb. */
.cp-menu {
  position: absolute;
  right: 12px;
  bottom: 88px;
  min-width: 220px;
  max-width: calc(100% - 24px);
  padding: 12px 14px;
  background: rgba(14,14,14,0.96);
  border: 1px solid var(--y-border);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.cp-menu[hidden] { display: none; }
.cp-menu { max-height: calc(100% - 100px); overflow-y: auto; }
.cp--low .cp-menu { bottom: 62px; max-height: calc(100% - 72px); padding: 8px 10px; }
.cp--low .cp-menu-group + .cp-menu-group { margin-top: 8px; padding-top: 8px; }
.cp--low .cp-menu-title { margin-bottom: 5px; }
.cp--low .cp-chip { min-height: 32px; padding: 0 11px; font-size: 13px; }
.cp-menu-group + .cp-menu-group { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line2); }
.cp-menu-group[hidden] { display: none; }
.cp-menu-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 8px;
}
.cp-menu-row { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-chip {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line2);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.cp-chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--ink); }

/* The full-screen note sheet: a brand card at the top of the picture. */
.cp-sheet {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: 12px;
  right: 12px;
  z-index: 3;
  margin: 0 auto;
  max-width: 520px;
  padding: 14px 16px;
  background: rgba(14,14,14,0.96);
  border: 1px solid var(--y-border);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: default;
}
.cp-sheet[hidden] { display: none; }
.cp-sheet-head { font-weight: 700; font-size: 14px; color: var(--fg-soft); margin-bottom: 8px; }
.cp-sheet-head b { color: var(--accent); font-variant-numeric: tabular-nums; }
.cp-sheet-text {
  width: 100%;
  min-height: 84px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 16px;   /* under 16px an iPhone zooms the page on focus */
  line-height: 1.5;
  color: var(--fg);
  background: rgba(255,255,255,0.04);
  border: 1.5px solid var(--line2);
  border-radius: 12px;
  resize: vertical;
}
.cp-sheet-text:focus { outline: none; border-color: var(--accent); }
.cp-sheet-row { display: flex; gap: 10px; margin-top: 10px; }
.cp-sheet-row .vbtn { height: 42px; flex: 1 1 auto; }
.cp--fullscreen .cp-sheet-text { min-height: 96px; }

/* The one-time explanation of the note button: a small card right above the bar,
   its pointer placed under the button by script. */
.cp-tip {
  position: absolute;
  right: 10px;
  bottom: 80px;
  z-index: 2;
  width: max-content;
  max-width: min(300px, calc(100% - 20px));
  padding: 9px 12px 8px;
  background: var(--accent);
  color: var(--ink);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.55);
  font-family: var(--font-body);
  text-align: right;
  --tip-arrow: 26px;
}
.cp-tip[hidden] { display: none; }
.cp-tip::after {
  content: '';
  position: absolute;
  right: calc(var(--tip-arrow) - 7px);
  bottom: -6px;
  width: 14px; height: 14px;
  background: var(--accent);
  transform: rotate(45deg);
  border-radius: 2px;
}
.cp-tip b { display: inline; font-size: 13px; font-weight: 900; margin-inline-end: 6px; }
.cp-tip span { font-size: 13px; line-height: 1.4; font-weight: 500; }
.cp-tip-key { display: none; }
@media (hover: hover) and (pointer: fine) { .cp-tip-key { display: inline; } }
.cp-tip-ok {
  display: inline-block;
  margin-inline-start: 10px;
  padding: 5px 11px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--accent);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  vertical-align: middle;
}
.cp--low .cp-tip { padding: 7px 10px 6px; }
.cp--low .cp-tip b, .cp--low .cp-tip span { font-size: 12px; }

/* Audio: no picture, so the layer is the whole thing — a dark card with the bar. */
.video-iframe-wrap.is-audio { min-height: 118px; background: #0e0e0e; border-radius: 14px; overflow: hidden; }
.cp--audio::after { display: none; }
.cp--audio .cp-big { top: 24px; transform: translate(-50%, 0); width: 44px; height: 44px; }
.cp--audio .cp-big svg { width: 20px; height: 20px; }
.cp--audio.cp--playing:not(.cp--idle) .cp-big { transform: translate(-50%, 0); opacity: 1; }
.cp--audio .cp-spinner { top: 46px; width: 40px; height: 40px; margin: -20px 0 0 -20px; }
.cp--audio .cp-tap, .cp--audio #cpFull, .cp--audio #cpPip { display: none; }
.cp--audio.cp--idle .cp-bar, .cp--audio.cp--idle .cp-big { opacity: 1; pointer-events: auto; }
.cp--audio { cursor: default; }

/* An iPhone's "full screen": the frame pinned over the whole viewport, controls and
   all, lifted onto <body> for the duration. */
.video-iframe-wrap.cp-pinned {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000;
  width: 100vw !important;
  height: 100dvh !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  margin: 0 !important;
  background: #000;
}
.video-iframe-wrap.cp-pinned video { object-fit: contain; }
/* Full screen: the frame fills the display, the bar keeps clear of the home indicator. */
.video-iframe-wrap:fullscreen,
.video-iframe-wrap:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  margin: 0 !important;
  background: #000;
}
.video-iframe-wrap:fullscreen video, .video-iframe-wrap:-webkit-full-screen video { object-fit: contain; }
.cp--fullscreen .cp-bar { padding: 0 max(14px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-right)); }
.cp--fullscreen .cp-big { width: 68px; height: 68px; top: 50%; }
.cp--fullscreen .cp-big svg { width: 30px; height: 30px; }
/* Pinned, the frame is as wide as the phone: the full bar fits again. */
.cp--fullscreen.cp--compact .cp-skip,
.cp--fullscreen.cp--compact .cp-time-sep, .cp--fullscreen.cp--compact #cpDur { display: inline-flex; }
.cp--fullscreen.cp--compact .cp-time-sep, .cp--fullscreen.cp--compact #cpDur { display: inline; }

/* A phone-width frame: volume has hardware buttons, picture-in-picture and AirPlay
   move into the sheet, the skip and note buttons drop their labels. */
.cp--narrow .cp-vol, .cp--narrow #cpPip, .cp--narrow #cpAirplay, .cp--narrow .cp-skip b { display: none; }
.cp--narrow .cp-note span { display: none; }
.cp--narrow .cp-note { padding: 0 8px; }
.cp--narrow .cp-btn { min-width: 42px; padding: 0 4px; }
.cp--narrow .cp-time { padding: 0 6px; }
.cp-menu-more { display: none; }
.cp--narrow .cp-menu-more:not([hidden]) { display: block; }
/* The narrow frame of a vertical short: the big button plays, a double tap skips, so
   the bar keeps only the time, the note, the settings and full screen. */
.cp--compact .cp-skip, .cp--compact .cp-time-sep, .cp--compact #cpDur { display: none; }
.cp--tiny .cp-time, .cp--tiny .cp-note { display: none; }
.cp--tiny .cp-btn { min-width: 36px; }
.cp--compact .cp-time { padding: 0 4px; }
.cp--compact .cp-btn { min-width: 38px; padding: 0 2px; }
.cp--compact .cp-bar { padding-left: 2px; padding-right: 2px; }
.cp--compact .cp-track { margin: 0 8px; }
/* Little height (a landscape video on a phone): the big button shrinks and sits in the
   picture's upper half, clear of the scrubber and the bar. */
.cp--low .cp-big { width: 52px; height: 52px; top: 40%; }
.cp--low .cp-big svg { width: 24px; height: 24px; }
.cp--low .cp-spinner { top: 40%; }
.cp--low .cp-track { height: 24px; }
.cp--low .cp-bar { padding-bottom: 2px; }
.cp--compact .cp-note span { display: none; }
.cp--compact .cp-note { padding: 0 6px; }
.cp--compact .cp-btn { min-width: 40px; padding: 0 4px; }
.cp--compact .cp-time { padding: 0 6px; font-size: 12px; }
.cp--compact .cp-row { gap: 0; }
.cp--compact .cp-bar { padding-left: 4px; padding-right: 4px; }
.cp--compact .cp-big { width: 60px; height: 60px; }
.cp--compact .cp-menu { right: 6px; left: 6px; min-width: 0; }
/* Only the tightest frames drop the total; ~260px still fits "0:12 / 0:46". */
@container canvas (max-width: 720px) {
  .cp--compact .cp-row { flex-wrap: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .cp-tap.is-on .cp-ripple { animation: none; opacity: 1; transform: none; }
  .cp-tap:not(.is-on) .cp-ripple { opacity: 0; }
  .cp-spinner { animation-duration: 2s; }
}


/* ---- the channel teaser on the dashboard: a taste, and one door in ---- */
.yt-teaser {
  display: flex; flex-direction: column; gap: 16px;
  padding: 22px 24px; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line2); border-radius: var(--r-card);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.yt-teaser:hover { border-color: var(--accent); transform: translateY(-2px); }
.yt-teaser__head { display: flex; align-items: center; gap: 14px; }
.yt-teaser__thumb { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.yt-teaser__label { font-size: 12px; letter-spacing: 0.04em; color: var(--muted); }
.yt-teaser__name { font-size: 17px; font-weight: 800; }
.yt-teaser__body { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: end; }
.yt-teaser__value { font-size: 34px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.yt-teaser__delta { font-size: 13px; font-weight: 700; margin-inline-start: 8px; vertical-align: middle; }
.yt-teaser__delta.up { color: #52c788; }
.yt-teaser__delta.down { color: #e35d5d; }
.yt-teaser__sub { font-size: 12px; color: var(--muted); margin-top: 6px; }
.yt-teaser__spark { width: 100%; height: 48px; display: block; }
.yt-teaser__spark polyline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.yt-teaser__spark circle { fill: var(--accent); }
.yt-teaser__area { fill: var(--accent); opacity: 0.12; }
.yt-teaser__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.yt-teaser__mini { font-size: 12px; color: var(--muted); }
.yt-teaser__btn { pointer-events: none; }
@media (max-width: 520px) {
  .yt-teaser__body { grid-template-columns: 1fr; }
}

/* ───── Publishing panel ─────
   The client's own channels, on a finished episode. Laid out narrow-first: the
   panel is read on a phone far more often than on a desk. */
.btn-publish {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1.5px solid var(--y-border);
  border-radius: var(--r-pill);
  background: var(--y-surface);
  color: var(--accent);
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-publish:hover {
  border-color: var(--accent);
  background: var(--y-glow-2);
  transform: translateY(-1px);
}


.pub-skeleton { display: grid; gap: 12px; padding: 8px 0 24px; }
.pub-skeleton-note {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--fg-mute);
}
.pub-skeleton-bar {
  height: 14px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(245,242,232,0.05), rgba(245,242,232,0.12), rgba(245,242,232,0.05));
  background-size: 300% 100%;
  animation: pub-shimmer 1.4s ease-in-out infinite;
}
.pub-skeleton-bar--wide { height: 26px; }
.pub-skeleton-bar--short { width: 55%; }
@keyframes pub-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@media (max-width: 720px) {
  .btn-publish { padding: 7px 12px; font-size: 10px; }
}

/* A finished row is dimmed on purpose, but publishing is the one live action left on
   it: the row keeps its quiet look while the button that still does something does
   not inherit the fade. */
.project-item--done:has(.btn-publish) { opacity: 1; }
.project-item--done:has(.btn-publish) .project-info,
.project-item--done:has(.btn-publish) .btn-view-deliverables { opacity: 0.62; }

/* Privacy and terms under the login form: platform reviewers (TikTok, Meta) require
   them to be reachable from the login page. */
.auth-legal {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--fg-mute);
}
.auth-legal a { color: inherit; text-decoration: underline; }
.auth-legal span { margin: 0 0.4rem; }

/* ───── Publishing panel ─────
   One screen per tab and one yellow button at the bottom that says what it will do.
   Networks are round toggles, shorts are a list of cards, and once something is on its
   way the tab turns into its status. */
.publish-modal {
  --pb-yt: #FF4E45;
  --pb-ig: #E4407A;
  --pb-fb: #4C8DF6;
  --pb-tt: #25F4EE;
  --pb-li: #0A66C2;
  --pb-ok: #3DDC84;
  --pb-warn: #FFB020;
  max-width: 560px;
  padding-bottom: 0;
}
.pb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pb-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 24px;
  line-height: 1.1;
  margin: 0;
}
.pb-sub { margin: 4px 0 0; font-size: 14px; color: var(--fg-mute); }
.pb-error { color: var(--danger); margin: 16px 0; }

.pb-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 18px 0 20px;
  border-bottom: 1px solid var(--line2);
}
.pb-tab {
  padding: 12px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: var(--fg-mute);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.pb-tab[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }
.pb-tab-count { font-weight: 400; color: var(--fg-dim); }
.pb-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pb-tabs[hidden] + .pub-skeleton,
.pb-tabs[hidden] ~ #publishBody { margin-top: 20px; }

.pb-stack { display: grid; gap: 20px; }
.pb-field { display: grid; gap: 8px; min-width: 0; }
.pb-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  color: var(--fg-mute);
}
/* The portal styles every <label> as a spaced uppercase caption; inside this panel a
   label is a plain Hebrew word. */
.publish-modal label,
.pb-sheet label,
.pb-label {
  font-family: var(--font-body);
  letter-spacing: normal;
  text-transform: none;
}
.pb-input {
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  background: var(--card-2);
  border: 1px solid var(--line2);
  border-radius: var(--r-input);
  color: var(--fg);
  font: inherit;
  font-size: 15px;
  outline: none;
  resize: none;
}
.pb-input:focus { border-color: var(--y-border); }
select.pb-input { appearance: none; cursor: pointer; }
.pb-counter { font-size: 11px; color: var(--fg-dim); text-align: end; margin-top: -4px; }
.pb-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
}
.pb-link:disabled { opacity: 0.5; cursor: progress; }
.pb-link--danger { color: #FF7A7A; }
.pb-note { margin: 0; font-size: 13px; color: var(--fg-mute); }
.pb-note--bad { color: #FF7A7A; }
.pb-note--warn { color: var(--pb-warn); }
.pb-hint { margin: 0; font-size: 13px; color: var(--fg-mute); }
.pb-empty {
  margin: 0;
  padding: 18px;
  border: 1px dashed var(--line2-strong);
  border-radius: var(--r-card);
  color: var(--fg-soft);
  font-size: 14px;
}
.pb-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  background: var(--card-2);
  border-radius: var(--r-card);
}
.pb-card-title { margin: 0; font-size: 17px; font-weight: 900; }
.pb-card-sub { margin: 0; font-size: 14px; color: var(--fg-soft); }
.pb-card-links { display: flex; flex-wrap: wrap; gap: 20px; }
/* With nothing to press the sticky bar is hidden, and the panel has no bottom padding
   of its own (the bar supplies it); the body keeps the last card off the edge. */
#publishBody { padding-bottom: 24px; }
#publishBody:has(> .pb-action:not([hidden])) { padding-bottom: 0; }
.pb-progress { height: 4px; border-radius: 2px; background: var(--line2); overflow: hidden; }
.pb-progress span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.4s ease; }

/* Episode: where it goes, one row per platform. */
.pb-dests {
  display: grid;
  gap: 2px;
  margin: 0 0 20px;
  padding: 6px;
  list-style: none;
  background: var(--card-2);
  border-radius: var(--r-card);
}
.pb-dest-row { display: flex; align-items: center; gap: 12px; padding: 8px 8px; }
.pb-dest-row + .pb-dest-row { border-top: 1px solid var(--line2); }
.pb-plat-ico { flex: none; width: 30px; height: 30px; display: grid; place-items: center; }
.pb-plat-ico svg { width: 28px; height: 28px; display: block; }
.pb-dest-text { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.pb-dest-text b { font-weight: 700; white-space: nowrap; }
.pb-dest-text span { font-size: 13px; color: var(--fg-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-state {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--fg-dim);
}
.pb-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line2-strong); }
.pb-state--on { color: var(--pb-ok); }
.pb-state--on::before { background: var(--pb-ok); box-shadow: 0 0 0 3px rgba(61,220,132,0.15); }

.pb-podcast-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--fg-mute); }
.pb-podcast-note b { color: var(--accent); }
.pb-podcast-note a { color: var(--accent); }

.pb-thumb-pair { display: grid; gap: 10px; }
.pb-thumb-pair--two { grid-template-columns: minmax(0, 16fr) minmax(0, 9fr); align-items: start; }
.pb-fig { margin: 0; display: grid; gap: 6px; min-width: 0; }
.pb-fig figcaption { font-size: 12px; color: var(--fg-mute); }
.pb-thumb.pb-thumb--square { aspect-ratio: 1 / 1; }
.pb-thumb-empty { display: grid; place-items: center; height: 100%; font-size: 13px; color: var(--fg-mute); }
.pb-thumb-picker { display: grid; gap: 8px; }
.pb-thumb-alts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pb-thumb-alt {
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: var(--card-2);
  cursor: pointer;
}
.pb-thumb-alt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-thumb-alt[aria-pressed="true"] { border-color: var(--accent); }
.pb-thumb-upload {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  border: 1px dashed var(--line2-strong);
  color: var(--fg-mute);
  font: inherit;
  font-size: 12px;
}
.pb-thumb-upload:hover { border-color: var(--accent); color: var(--accent); }
.pb-thumb-upload-plus { font-size: 18px; line-height: 1; }

/* "More ideas": the one playful control in the panel. The words shimmer and the star
   turns on hover; while it thinks, the star spins and two placeholders breathe. */
.pb-magic {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--y-border);
  border-radius: var(--r-pill);
  background: var(--y-surface);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.pb-magic-text {
  background: linear-gradient(100deg, var(--accent) 20%, #FFF6B8 45%, var(--accent) 70%);
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}
.pb-spark {
  display: inline-block;
  color: var(--accent);
  transition: transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1), filter 0.3s ease;
}
.pb-magic::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) 50%, rgba(255,213,0,0.25), transparent 60%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.pb-magic:hover:not(:disabled) {
  border-color: var(--accent);
  box-shadow: 0 0 18px rgba(255,213,0,0.25);
  transform: translateY(-1px);
}
.pb-magic:hover:not(:disabled)::after { opacity: 1; }
.pb-magic:hover:not(:disabled) .pb-spark { transform: rotate(144deg) scale(1.35); filter: drop-shadow(0 0 5px var(--accent)); }
.pb-magic:active:not(:disabled) { transform: scale(0.96); }
.pb-magic.is-loading { cursor: progress; }
.pb-magic:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@keyframes pb-shine { to { background-position: -150% 0; } }
@keyframes pb-spin { to { transform: rotate(360deg) scale(1.2); } }

.pb-suggest-list { display: grid; gap: 6px; }
.pb-idea {
  text-align: start;
  padding: 10px 12px;
  border: 1px solid var(--line2);
  border-radius: 10px;
  background: var(--card-2);
  color: var(--fg-soft);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.pb-idea:hover { border-color: var(--y-border); color: var(--fg); }
@keyframes pb-pop {
  0% { opacity: 0; transform: translateY(8px) scale(0.97); filter: blur(3px); border-color: var(--accent); }
  60% { opacity: 1; filter: blur(0); border-color: var(--accent); box-shadow: 0 0 16px rgba(255,213,0,0.22); }
  100% { transform: none; border-color: var(--line2); box-shadow: none; }
}
.pb-idea--ghost {
  display: block;
  height: 41px;
  cursor: default;
  background: linear-gradient(90deg, var(--card-2), rgba(255,213,0,0.08), var(--card-2));
  background-size: 200% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .pb-magic:hover:not(:disabled) .pb-magic-text,
  .pb-magic.is-loading .pb-magic-text { animation: pb-shine 1.1s linear infinite; }
  .pb-magic.is-loading .pb-spark { animation: pb-spin 0.9s linear infinite; }
  .pb-idea--new { animation: pb-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.25) both; animation-delay: var(--d, 0ms); }
  .pb-idea--ghost { animation: pub-shimmer 1.2s ease-in-out infinite; }
}

.pb-editing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--r-btn);
  background: var(--y-surface);
  border: 1px solid var(--y-border);
  font-size: 13px;
  color: var(--fg-soft);
}
.pb-card-links { align-items: center; }
.pb-collab-step { border: 1px solid var(--y-border); background: var(--y-surface); }

.pb-thumb {
  aspect-ratio: 16 / 9;
  max-width: 100%;
  border-radius: var(--r-card);
  overflow: hidden;
  background: linear-gradient(135deg, #2a2926, #0f0f0e);
}
.pb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-desc { min-height: 7.5em; line-height: 1.5; font-size: 14px; color: var(--fg-soft); overflow: hidden; }

.pb-seg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  background: var(--card-2);
  border-radius: var(--r-btn);
}
.pb-seg--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pb-seg button {
  padding: 9px 4px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--fg-soft);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.pb-seg button[aria-pressed="true"] { background: var(--fg); color: var(--bg); font-weight: 700; }
.pb-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pb-pair[hidden] { display: none; }

.pb-radios { display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 14px; }
.pb-radios label:has(input:disabled) { opacity: 0.4; cursor: default; }
.pb-radios label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.pb-radios input { accent-color: var(--accent); }

/* Shorts */
.pb-nets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pb-net {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg-mute);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.pb-net:disabled { cursor: default; opacity: 0.45; }
.pb-net-ico {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--card-2);
  border: 2px solid var(--line2-strong);
  color: var(--fg-dim);
  font-weight: 900;
  font-size: 14px;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.pb-net-ico--sm { width: 30px; height: 30px; font-size: 11px; border-color: var(--line2-strong); }
.pb-net-ico svg { width: 26px; height: 26px; display: block; }
.pb-net-ico--sm svg { width: 20px; height: 20px; }
.pb-net[aria-pressed="false"] .pb-net-ico svg { filter: grayscale(1); opacity: 0.45; }
.pb-net[aria-pressed="true"] { color: var(--fg); }
.pb-net[aria-pressed="true"] .pb-net-ico { border-color: var(--c); color: var(--c); }
.pb-net[aria-pressed="true"] .pb-net-ico::after {
  content: "✓";
  position: absolute;
  bottom: -3px;
  inset-inline-end: -3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #111;
  font-size: 11px;
  border: 2px solid var(--card);
}
.pb-net:focus-visible .pb-net-ico { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Shorts: "when" as one sentence, its two choices soft chips inside it. */
.pb-when { display: grid; gap: 10px; padding: 16px 18px; background: var(--card-2); border-radius: var(--r-card); }
.pb-when-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; }
.pb-inline-select {
  /* The portal's forms stretch every select to the full row; this one sits in a line. */
  display: inline-block;
  width: auto;
  min-width: 0;
  margin: 0;
  appearance: none;
  padding: 6px 14px;
  padding-inline-end: 30px;
  border: 0;
  border-radius: var(--r-pill);
  background-color: var(--y-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFD500' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 12px;
  background-position: left 11px center;
  box-shadow: inset 0 0 0 1px var(--y-border);
  color: var(--accent);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}
.pb-inline-select:hover { box-shadow: inset 0 0 0 1px var(--accent); background-color: var(--y-glow-2); }
.pb-inline-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pb-inline-select:disabled { opacity: 0.5; cursor: progress; }
.pb-inline-select option { background: var(--card); color: var(--fg); }
.pb-when-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--line2);
  font-size: 13px;
  color: var(--fg-mute);
  font-variant-numeric: tabular-nums;
}
.pb-when-sub svg { width: 14px; height: 14px; flex: none; color: var(--accent); }

/* Shorts as a calendar: the day, the clip, its caption. */
.pb-cal { display: grid; }
.pb-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--line2);
  transition: opacity 0.2s ease;
}
.pb-row:first-child { border-top: 0; }
.pb-row-main {
  display: grid;
  grid-template-columns: 62px 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
}
button.pb-row-main {
  grid-template-columns: 62px 44px minmax(0, 1fr) 28px;
  margin-inline: -8px;
  padding-inline: 8px;
  width: calc(100% + 16px);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s ease;
}
button.pb-row-main:hover { background: rgba(255,213,0,0.05); }
button.pb-row-main:hover .pb-row-cap { color: var(--fg); }
.pb-row-go {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line2-strong);
  color: var(--fg-mute);
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.pb-row-go svg { width: 14px; height: 14px; }
button.pb-row-main:hover .pb-row-go {
  color: var(--accent);
  border-color: var(--y-border);
  background: var(--y-surface);
  transform: translateX(-3px);
}
button.pb-row-main:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.pb-row-pick {
  padding: 8px 4px;
  border: 0;
  background: none;
  cursor: pointer;
}
.pb-row-pick[aria-pressed="true"] .pb-tick { background: var(--accent); border-color: var(--accent); }
.pb-row-pick[aria-pressed="true"] .pb-tick::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid #111;
  border-bottom: 2px solid #111;
  transform: translateY(-1px) rotate(-45deg);
}
.pb-row-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 50%; }
.pb-row--off .pb-row-main { opacity: 0.42; }
/* The dates are being worked out again: they fade until the new ones arrive. */
.pb-cal.is-updating .pb-row:not(.pb-row--off) .pb-day { opacity: 0.35; transition: opacity 0.2s ease; }
.pb-day { display: grid; text-align: center; line-height: 1.25; }
.pb-day b { font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; }
.pb-day span { font-size: 11px; color: var(--fg-mute); }
.pb-row .pb-clip-thumb { width: 44px; }
.pb-row-cap {
  font-size: 14px;
  color: var(--fg-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pb-st { font-size: 12px; color: var(--pb-warn); white-space: nowrap; }
.pb-st--ok { color: var(--pb-ok); }
.pb-st--bad { color: #FF7A7A; }

/* TikTok: the one question it requires on a line, its switches small beneath. */
.pb-tt { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line2); }
.pb-tt-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; }
.pb-tt-q { font-weight: 700; }
.pb-tt-more { margin-inline-start: auto; font-size: 12px; color: var(--fg-mute); text-decoration: underline; text-underline-offset: 3px; }
.pb-tt-more:hover, .pb-tt-more[aria-expanded="true"] { color: var(--accent); }
.pb-tt:not(:has(input[name="pubTtPrivacy"]:checked)) .pb-tt-q { color: var(--pb-warn); }
.pb-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12px; color: var(--fg-mute); }
.pb-checks label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.pb-checks input { accent-color: var(--accent); width: 14px; height: 14px; margin: 0; }
.pb-checks label.pb-check--off { opacity: 0.45; cursor: not-allowed; }
.pb-tt-commercial { flex-basis: 100%; padding-inline-start: 18px; }
.pb-fine { margin: 0; font-size: 11px; color: var(--fg-dim); }
.pb-fine a { color: inherit; text-decoration: underline; }
.pb-btn-ghost {
  justify-self: start;
  padding: 10px 16px;
  border: 1px solid var(--y-border);
  border-radius: var(--r-btn);
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.pb-btn-ghost:disabled { opacity: 0.5; cursor: progress; }
.pb-clip-thumb {
  position: relative;
  aspect-ratio: 9 / 16;
  width: 54px;
  max-width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(170deg, #37342d, #121211);
}
.pb-clip-thumb--lg { width: 84px; }
.pb-clip-thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pb-clip-num {
  position: absolute;
  bottom: 4px;
  inset-inline-start: 4px;
  min-width: 18px;
  padding: 0 4px;
  border-radius: 4px;
  background: rgba(0,0,0,0.7);
  font-size: 11px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}


.pb-banner {
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--r-card);
  background: var(--y-surface);
  border: 1px solid var(--y-border);
  font-size: 14px;
  color: var(--fg-soft);
}

/* The one button, pinned to the bottom of the panel while it scrolls. */
.pb-action {
  position: sticky;
  bottom: 0;
  display: grid;
  gap: 8px;
  margin-top: 20px;
  padding: 16px 0 24px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to bottom, transparent, var(--card) 22%);
}
.pb-btn {
  width: 100%;
  padding: 15px 16px;
  border: 0;
  border-radius: var(--r-btn);
  background: var(--accent);
  color: #111;
  font: inherit;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.pb-btn:disabled { background: var(--card-2); color: var(--fg-dim); cursor: not-allowed; }
.pb-btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.pb-action-note { margin: 0; text-align: center; font-size: 12px; color: var(--fg-mute); }
.pb-msg { margin: 0; font-size: 14px; color: var(--pb-ok); }
.pb-msg--bad { color: #FF7A7A; }
.pb-errors { margin: 0; padding-inline-start: 18px; font-size: 13px; color: #FF7A7A; display: grid; gap: 4px; }

/* One short, as a sheet above the panel. */
.pb-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 650;
  display: grid;
  align-items: end;
  justify-items: center;
  background: rgba(0,0,0,0.6);
}
.pb-sheet-overlay[hidden] { display: none; }
.pb-sheet {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 560px;
  max-height: 92dvh;
  overflow-y: auto;
  padding: 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--card);
  border: 1px solid var(--line2);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
}
.pb-sheet-grab { justify-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--line2-strong); }
.pb-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pb-sheet-title { margin: 0; font-size: 18px; font-weight: 900; }
/* Playing a short grows the window and the clip together: the text column gives up
   room and the clip slides wider beside it. */
.pb-sheet { max-width: 680px; transition: max-width 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.pb-sheet-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 18px;
  align-items: start;
  transition: grid-template-columns 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.pb-sheet-overlay.is-playing .pb-sheet { max-width: 860px; }
.pb-sheet-overlay.is-playing .pb-sheet .pb-sheet-top { grid-template-columns: minmax(0, 1fr) 320px; }
.pb-sheet-overlay.is-playing .pb-sheet .pb-sheet-preview {
  box-shadow: 0 0 0 1px var(--y-border), 0 24px 60px rgba(0,0,0,0.55), 0 0 40px rgba(255,213,0,0.12);
}
@media (prefers-reduced-motion: no-preference) {
  .pb-sheet-overlay.is-playing .pb-sheet .pb-sheet-preview { animation: pb-grow 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
}
@keyframes pb-grow {
  0% { transform: scale(0.92) translateX(12px); }
  60% { transform: scale(1.02); }
  100% { transform: none; }
}

/* The small player: the portal player's look, sized for the window. */
.pb-mini { position: absolute; inset: 0; background: #000; }
.pb-mini-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.pb-mini-big {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.pb-mini-big svg { width: 26px; height: 26px; margin-left: 3px; fill: currentColor; }
.pb-mini.is-paused .pb-mini-big { opacity: 1; transform: none; pointer-events: auto; }
.pb-mini-bar {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 18px 6px 4px;
  background: linear-gradient(transparent, rgba(0,0,0,0.75));
  opacity: 0;
  transition: opacity 0.2s ease;
}
.pb-mini:hover .pb-mini-bar, .pb-mini.is-paused .pb-mini-bar, .pb-mini.is-scrubbing .pb-mini-bar,
.pb-mini:focus-within .pb-mini-bar { opacity: 1; }
.pb-mini-btn {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
}
.pb-mini-btn svg { width: 18px; height: 18px; fill: currentColor; }
.pb-mini-btn:hover { color: var(--accent); }
.pb-mini-track { position: relative; flex: 1; height: 24px; margin: 0 6px; cursor: pointer; touch-action: none; }
.pb-mini-track::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  background: rgba(255,255,255,0.35);
}
.pb-mini-played {
  position: absolute;
  left: 0; top: 50%;
  width: 0;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  background: var(--accent);
}
.pb-mini-knob {
  position: absolute;
  top: 50%; left: 0;
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.45);
  transform: scale(0.85);
  transition: transform 0.15s ease;
}
.pb-mini-track:hover .pb-mini-knob, .pb-mini.is-scrubbing .pb-mini-knob { transform: scale(1.2); }
/* A thin spinner while the stream starts or catches up, instead of a frozen frame. */
.pb-mini.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.2);
  border-top-color: var(--accent);
  animation: pb-spin 0.8s linear infinite;
  pointer-events: none;
}
.pb-mini.is-loading .pb-mini-big { opacity: 0; pointer-events: none; }
.pb-mini-time { flex: none; font-size: 11px; color: #fff; font-variant-numeric: tabular-nums; padding: 0 4px; }
.pb-mini:fullscreen .pb-mini-video { object-fit: contain; }
@media (max-width: 720px) {
  .pb-sheet-overlay.is-playing .pb-sheet .pb-sheet-top { grid-template-columns: minmax(0, 1fr); }
  .pb-sheet-overlay.is-playing .pb-sheet .pb-sheet-media { order: -1; max-width: 300px; width: 100%; justify-self: center; }
}
.pb-sheet-media { display: grid; gap: 10px; }
.pb-sheet-preview {
  position: relative;
  aspect-ratio: 9 / 16;
  max-width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(170deg, #37342d, #121211);
}
.pb-sheet-preview img,
.pb-sheet-preview video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.pb-play-big {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid var(--line2-strong);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}
.pb-play-big::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid var(--accent);
  transform: translateX(3px);
}
.pb-play-big:hover { transform: scale(1.08); background: rgba(0,0,0,0.75); }
.pb-play-big:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pb-ai-note { margin: 0; font-size: 12px; color: var(--fg-mute); }
.pb-ai-note span { color: var(--accent); }
@keyframes pb-flash-in { from { border-color: var(--accent); box-shadow: 0 0 18px rgba(255,213,0,0.25); } }
@media (prefers-reduced-motion: no-preference) {
  .pb-flash { animation: pb-flash-in 1.2s ease-out; }
}
@media (max-width: 520px) {
  .pb-sheet-top { grid-template-columns: minmax(0, 1fr) 120px; gap: 12px; }
  .pb-sheet-top .pb-label { flex-wrap: wrap; }
}
.pb-sheet-foot { display: flex; justify-content: space-between; gap: 12px; }

@media (min-width: 721px) {
  .pb-sheet-overlay { align-items: center; }
  .pb-sheet { border-radius: 22px; border-bottom: 1px solid var(--line2); }
}
@media (prefers-reduced-motion: reduce) {
  .pb-net-ico, .pb-progress span, .pb-magic, .pb-spark { transition: none; }
}


/* ── Shorts "where": the episode tab's destination rows, each one a switch. ── */
.pb-dests--pick { margin: 0; }
.pb-dest-item { list-style: none; }
.pb-dest-item + .pb-dest-item { border-top: 1px solid var(--line2); }
.pb-dest-item .pb-dest-row + * { margin-top: 0; }
.pb-dest-pick {
  width: 100%;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  border-radius: 10px;
}
button.pb-dest-pick { cursor: pointer; }
button.pb-dest-pick:hover { background: rgba(255,255,255,0.03); }
button.pb-dest-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pb-dest-item--off .pb-plat-ico:not(.pb-plat-ico--brand) svg { filter: grayscale(1); opacity: 0.45; }
.pb-dest-item--off .pb-dest-text b { color: var(--fg-mute); }
.pb-tick {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--line2-strong);
  display: grid;
  place-items: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pb-dest-pick[aria-pressed="true"] .pb-tick { background: var(--accent); border-color: var(--accent); }
.pb-dest-pick[aria-pressed="true"] .pb-tick::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid #111;
  border-bottom: 2px solid #111;
  transform: translateY(-1px) rotate(-45deg);
}
.pb-dest-item .pb-tt { padding: 2px 8px 12px; padding-inline-start: 50px; border-top: 0; }
.pb-cdm-q { font-weight: 700; }
.pb-cdm-show { display: grid; gap: 4px; font-size: 12px; color: var(--fg-mute); }
.pb-cdm-msg--bad { color: var(--pb-warn); }

/* The shorts calendar sits on a card, like the destinations above it. */
.pb-cal { padding: 2px 12px; background: var(--card-2); border-radius: var(--r-card); }
.pb-cal:empty { display: none; }
.pb-row .pb-clip-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Radios and checkboxes in the portal's own look instead of the browser's white ones. */
.publish-modal .pb-radios,
.pb-sheet .pb-radios { font-size: 14px; }
.publish-modal input[type="radio"],
.publish-modal .pb-checks input[type="checkbox"] {
  appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid var(--line2-strong);
  border-radius: 50%;
  background: transparent;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.publish-modal .pb-checks input[type="checkbox"] { width: 16px; height: 16px; border-radius: 5px; }
.publish-modal input[type="radio"]::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
  transition: transform 0.15s ease;
}
.publish-modal input[type="radio"]:checked { border-color: var(--accent); }
.publish-modal input[type="radio"]:checked::before { transform: scale(1); }
.publish-modal .pb-checks input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.publish-modal .pb-checks input[type="checkbox"]:checked::before {
  content: "";
  width: 7px;
  height: 4px;
  border-left: 2px solid #111;
  border-bottom: 2px solid #111;
  transform: translateY(-1px) rotate(-45deg);
}
.publish-modal input[type="radio"]:disabled { opacity: 0.35; cursor: default; }
.publish-modal input[type="radio"]:focus-visible,
.publish-modal .pb-checks input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A date is one button: the whole field opens the calendar, not just its digits. */
.pb-date-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: var(--card-2);
  border: 1px solid var(--line2);
  border-radius: var(--r-input);
  color: var(--fg);
  font: inherit;
  font-size: 15px;
  text-align: start;
  cursor: pointer;
}
.pb-date-btn:hover, .pb-date-btn[aria-expanded="true"] { border-color: var(--y-border); }
.pb-date-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pb-date-btn svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.pb-date-btn--empty span { color: var(--fg-mute); }

.pb-datepick {
  display: grid;
  gap: 8px;
  padding: 12px;
  background: var(--card);
  border: 1px solid var(--y-border);
  border-radius: var(--r-card);
}
.pb-dp-head { display: flex; align-items: center; justify-content: space-between; }
.pb-dp-head b { font-weight: 900; font-size: 15px; }
.pb-dp-nav {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line2);
  border-radius: 50%;
  background: none;
  color: var(--fg-soft);
  font: inherit;
  cursor: pointer;
}
.pb-dp-nav:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pb-dp-nav:disabled { opacity: 0.3; cursor: default; }
.pb-dp-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.pb-dp-dow { font-size: 11px; color: var(--fg-dim); padding: 4px 0; }
.pb-dp-day {
  height: 36px;
  width: 36px;
  max-width: 100%;
  justify-self: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.pb-dp-day:hover:not(:disabled) { background: var(--y-surface); color: var(--accent); }
.pb-dp-day:disabled { color: var(--fg-dim); opacity: 0.45; cursor: default; }
.pb-dp-day--weekend:not(:disabled) { color: var(--fg-mute); }
.pb-dp-day--today { box-shadow: inset 0 0 0 1px var(--y-border); }
.pb-dp-day[aria-pressed="true"] { background: var(--accent); color: #111; font-weight: 900; }
.pb-dp-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }



/* ── Thumbnails load with a reveal instead of painting in strips ── */
.pb-thumb,
.pb-thumb-alt {
  position: relative;
  background:
    linear-gradient(105deg, transparent 30%, rgba(255,213,0,0.10) 45%, rgba(255,213,0,0.18) 50%, rgba(255,213,0,0.10) 55%, transparent 70%)
      0 0 / 250% 100% no-repeat,
    linear-gradient(135deg, #22211d, #121211);
}
.pb-reveal { opacity: 0; }
.pb-reveal.is-loaded { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .pb-thumb:not(:has(.pb-reveal.is-loaded)),
  .pb-thumb-alt:not(:has(.pb-reveal.is-loaded)) { animation: pb-sweep 1.3s ease-in-out infinite; }
  .pb-reveal.is-loaded { animation: pb-reveal-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .pb-thumb:has(.pb-reveal.is-loaded)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.28) 50%, transparent 65%);
    background-size: 250% 100%;
    background-repeat: no-repeat;
    animation: pb-gleam 1.1s 0.45s ease-out both;
    pointer-events: none;
  }
}
@keyframes pb-sweep {
  from { background-position: 130% 0, 0 0; }
  to { background-position: -130% 0, 0 0; }
}
@keyframes pb-reveal-in {
  0% { opacity: 0; clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); filter: blur(14px) saturate(1.4); transform: scale(1.06); }
  45% { opacity: 1; }
  100% { opacity: 1; clip-path: polygon(-30% 0, 100% 0, 100% 100%, 0 100%); filter: none; transform: none; }
}
@keyframes pb-gleam {
  from { background-position: 150% 0; opacity: 1; }
  to { background-position: -150% 0; opacity: 0; }
}


/* A short with its own time shows it in the brand colour: it differs from the rest. */
.pb-day .pb-own-time { color: var(--accent); }
.pb-pair--when { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }


/* Short stills wait behind the same shimmer and reveal as the episode's thumbnails. */
.pb-clip-thumb,
.pb-sheet-preview {
  background:
    linear-gradient(105deg, transparent 30%, rgba(255,213,0,0.10) 45%, rgba(255,213,0,0.18) 50%, rgba(255,213,0,0.10) 55%, transparent 70%)
      0 0 / 250% 100% no-repeat,
    linear-gradient(170deg, #37342d, #121211);
}
.pb-clip-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .pb-clip-thumb:has(.pb-reveal:not(.is-loaded)),
  .pb-sheet-preview:has(.pb-reveal:not(.is-loaded)) { animation: pb-sweep 1.3s ease-in-out infinite; }
}


/* ───── Micro-motion (30/09) ─────
   Motion only on elements that had none. Every rule that moves something sits under
   no-preference, so reduced motion gets the final state and nothing else; every resting
   state is fully visible, so a page whose scripts never run looks exactly as before.
   The scripted halves live in static/js/motion.js. */
:root {
  --mo-out: cubic-bezier(.22,1,.36,1);
  --mo-spring: cubic-bezier(.34,1.56,.64,1);
}

/* A success tick: the circle draws, then the check, then a ring leaves it. */
.done-tick { position: relative; width: var(--tick-size, 72px); height: var(--tick-size, 72px); margin: 0 auto; }
.done-tick svg { display: block; width: 100%; height: 100%; overflow: visible; }
.done-tick circle {
  fill: var(--y-surface);
  stroke: var(--accent);
  stroke-width: 3;
  stroke-dasharray: 252;
  transform: rotate(-90deg);
  transform-origin: center;
}
.done-tick path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 60;
}
.done-tick::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}
.done-tick--lg { --tick-size: 120px; margin-bottom: 32px; filter: drop-shadow(0 0 30px rgba(255,213,0,0.35)); }
@container canvas (max-width: 720px) {
  .done-tick--lg { --tick-size: 96px; }
}
/* The success states used to set a ✓ glyph beside the line; the tick stands above it. */
.revision-success { flex-direction: column; align-items: center; gap: 14px; }
.revision-success > p { margin: 0; }

/* Payment still in review: three dots that keep bouncing. */
.pay-dots { display: flex; justify-content: center; align-items: center; gap: 8px; height: 60px; }
.pay-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }

/* A "new" badge carries a glint that only shows while it sweeps. */
.badge-new { position: relative; overflow: hidden; }
.badge-new::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -40%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.85), transparent);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  /* Flash messages drop in from the top. They stay until the next page, so no timer. */
  .flash { animation: mo-flash-in .55s var(--mo-spring) both; }
  .flash:nth-child(2) { animation-delay: .08s; }
  .flash:nth-child(n+3) { animation-delay: .16s; }

  /* Headings draw their yellow marks as the reveal brings them in. */
  .page-header.reveal-in .pod-name::after {
    transform-origin: right;
    animation: mo-draw-x .7s var(--mo-out) .15s both;
  }
  .section.reveal-in > .section-title::before {
    transform-origin: bottom;
    animation: mo-draw-y .5s var(--mo-spring) .3s both;
  }

  /* Text swaps (rolling numbers, the calendar month): the old text leaves through
     ::before, so the element's own text is already the new one. */
  .mo-swap--up, .mo-swap--down { display: inline-grid; clip-path: inset(0 -1em); }
  .mo-swap--left, .mo-swap--right { display: inline-grid; justify-items: center; clip-path: inset(-.3em 0); }
  [data-mo-from]::before { content: attr(data-mo-from); grid-area: 1 / 1; }
  .mo-swap-in { grid-area: 1 / 1; }
  .mo-swap--up > .mo-swap-in { animation: mo-in-up .38s var(--mo-out) both; }
  .mo-swap--up::before { animation: mo-out-up .38s var(--mo-out) both; }
  .mo-swap--down > .mo-swap-in { animation: mo-in-down .38s var(--mo-out) both; }
  .mo-swap--down::before { animation: mo-out-down .38s var(--mo-out) both; }
  .mo-swap--right > .mo-swap-in { animation: mo-in-right .36s var(--mo-out) both; }
  .mo-swap--right::before { animation: mo-out-right .36s var(--mo-out) both; }
  .mo-swap--left > .mo-swap-in { animation: mo-in-left .36s var(--mo-out) both; }
  .mo-swap--left::before { animation: mo-out-left .36s var(--mo-out) both; }

  /* The accumulator springs up when the selection first costs money. */
  .shorts-extra-bar.mo-enter { animation: mo-bar-up .5s var(--mo-spring) both; }
  .shorts-extra-bar.mo-leave { animation: mo-bar-down .3s var(--mo-out) both; pointer-events: none; }
  /* !important only to outrank the global [hidden] rule, and only for the exit. */
  .shorts-extra-bar[hidden].mo-leave { display: block !important; }

  /* Success states: the tick draws itself, the line under it rises. */
  .done-tick circle { animation: mo-dash-252 .6s var(--mo-out) both; }
  .done-tick path { animation: mo-dash-60 .38s var(--mo-out) .5s both; }
  .done-tick::after { animation: mo-ring .9s var(--mo-out) .75s forwards; }
  .revision-success > p,
  #paySuccess .pay-title { animation: mo-rise .5s var(--mo-out) .7s both; }
  #paySuccess .confirmed-sub { animation: mo-rise .5s var(--mo-out) .82s both; }
  .pay-dots i { animation: mo-bob 1s var(--mo-out) infinite; }
  .pay-dots i:nth-child(2) { animation-delay: .12s; }
  .pay-dots i:nth-child(3) { animation-delay: .24s; }

  /* Player panels: .is-leaving keeps a just-hidden panel drawn for its exit (!important
     only to outrank the global [hidden] rule). */
  .cp-menu[hidden].is-leaving,
  .cp-sheet[hidden].is-leaving,
  .cp-tip[hidden].is-leaving { display: block !important; pointer-events: none; }
  /* The zoomed picture flies back into the viewer the same way. */
  .image-zoom[hidden].is-leaving { display: grid !important; pointer-events: none; }
  .cp-menu { transform-origin: right bottom; }
  .cp-menu:not([hidden]):not(.is-leaving) { animation: mo-pop .26s var(--mo-spring) both; }
  .cp-menu:not([hidden]):not(.is-leaving) .cp-menu-group { animation: mo-rise .3s var(--mo-out) both; }
  .cp-menu:not([hidden]):not(.is-leaving) .cp-menu-group:nth-child(2) { animation-delay: .04s; }
  .cp-menu:not([hidden]):not(.is-leaving) .cp-menu-group:nth-child(3) { animation-delay: .08s; }
  .cp-menu.is-leaving { animation: mo-unpop .16s ease-in both; }
  .cp-sheet { transform-origin: top center; }
  .cp-sheet:not([hidden]):not(.is-leaving) { animation: mo-drop .28s var(--mo-out) both; }
  .cp-sheet.is-leaving { animation: mo-unpop .16s ease-in both; }
  /* The tip's pointer is aimed from its measured width, so it moves but never scales. */
  .cp-tip:not([hidden]):not(.is-leaving) { animation: mo-rise .3s var(--mo-out) both; }
  .cp-tip.is-leaving { animation: mo-sink .16s ease-in both; }

  /* An error message says "no" with a small shake; the field itself stays put. */
  .sp-field-error,
  .cart-error:not([hidden]) { animation: mo-err-in .45s var(--mo-out) both; }

  /* A project card coming into view: one glint on "new", the stage settles in. */
  .project-item.reveal-in .badge-new::after { animation: mo-glint 1s var(--mo-out) .35s both; }
  .project-item.reveal-in .ptl-now { animation: mo-blur-in .45s var(--mo-out) .25s both; }
}

@keyframes mo-flash-in { from { transform: translateY(-140%); opacity: 0; } }
@keyframes mo-draw-x { from { transform: scaleX(0); } }
@keyframes mo-draw-y { from { transform: scaleY(0); } }
@keyframes mo-in-up { from { transform: translateY(100%); opacity: 0; } }
@keyframes mo-out-up { to { transform: translateY(-100%); opacity: 0; } }
@keyframes mo-in-down { from { transform: translateY(-100%); opacity: 0; } }
@keyframes mo-out-down { to { transform: translateY(100%); opacity: 0; } }
@keyframes mo-in-right { from { transform: translateX(-60%); opacity: 0; } }
@keyframes mo-out-right { to { transform: translateX(60%); opacity: 0; } }
@keyframes mo-in-left { from { transform: translateX(60%); opacity: 0; } }
@keyframes mo-out-left { to { transform: translateX(-60%); opacity: 0; } }
@keyframes mo-bar-up { from { transform: translateY(130%); opacity: 0; } 40% { opacity: 1; } }
@keyframes mo-bar-down { to { transform: translateY(130%); opacity: 0; } }
@keyframes mo-dash-252 { from { stroke-dashoffset: 252; } }
@keyframes mo-dash-60 { from { stroke-dashoffset: 60; } }
@keyframes mo-ring { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes mo-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes mo-sink { to { opacity: 0; transform: translateY(8px); } }
@keyframes mo-bob { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-12px); opacity: 1; } }
@keyframes mo-pop { from { transform: scale(.6); opacity: 0; } }
@keyframes mo-unpop { to { transform: scale(.8); opacity: 0; } }
@keyframes mo-drop { from { transform: translateY(-12px) scale(.96); opacity: 0; } }
@keyframes mo-err-in {
  0% { opacity: 0; transform: translateX(0); }
  25% { opacity: 1; transform: translateX(-6px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}
@keyframes mo-glint { to { transform: translateX(350%); } }
@keyframes mo-blur-in { from { opacity: 0; filter: blur(6px); transform: translateY(6px); } }


/* ───── Micro-motion round 2 (30/09) ─────
   Same contract as the block above: motion only on elements that had none, everything
   that moves sits under no-preference, and every resting state is the final one. */
.mo-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Booking success: the booked day on a two-week strip of its month, Sunday on the right. */
.sp-booked {
  display: grid;
  grid-template-columns: repeat(7, 30px);
  gap: 6px;
  direction: rtl;
  margin: 0 auto 28px;
  isolation: isolate;
}
.sp-booked span {
  position: relative;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 13px;
  color: var(--fg-mute);
  font-variant-numeric: tabular-nums;
}
.sp-booked .is-out { color: var(--fg-dim); }
.sp-booked .is-booked { color: var(--ink); font-weight: 800; }
.sp-booked .is-booked::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 24px rgba(255,213,0,0.45);
}
.sp-booked .is-booked::after {
  content: '✓';
  position: absolute;
  top: -8px; left: -8px;
  width: 18px; height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--fg);
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
}

/* Publish tabs: one underline that moves between them instead of one per tab. Browsers
   without :has keep the per-tab underline. */
@supports selector(:has(*)) {
  .pb-tabs { position: relative; }
  .pb-tabs::after {
    content: '';
    position: absolute;
    bottom: -1px; right: 0;
    width: 50%; height: 2px;
    background: var(--accent);
    pointer-events: none;
  }
  .pb-tabs:has(.pb-tab[data-tab="shorts"][aria-selected="true"])::after { transform: translateX(-100%); }
  .pb-tab[aria-selected="true"] { border-bottom-color: transparent; }
}

.yt-teaser__delta { display: inline-block; }
.yt-teaser__spark circle { transform-box: fill-box; transform-origin: center; }

.plan-ribbon { transform-origin: top center; }

/* Revision rounds: a circle per round, the used ones filled. */
.mo-rounds { display: inline-flex; align-items: center; gap: 8px; }
.mo-rounds i {
  position: relative;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  overflow: hidden;
}
.mo-rounds i.is-used::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
}

/* Highlighted card: the line that draws around it, on top of its own border. */
.mo-trace {
  position: absolute;
  inset: -0.5px;
  width: calc(100% + 1px);
  height: calc(100% + 1px);
  overflow: visible;
  pointer-events: none;
}
.mo-trace rect { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0; }

.confirmed-date .cd-part { display: inline-block; transform-origin: top; }

/* The new-updates alert rings its bell. */
.mo-bell {
  display: inline-block;
  width: 1.15em; height: 1.15em;
  margin-inline-end: 0.35em;
  vertical-align: -0.2em;
  transform-origin: 50% 8%;
}
.mo-bell svg {
  display: block;
  width: 100%; height: 100%;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* "Download all": a tray the arrow drops into. */
.mo-dl-icon {
  width: 14px; height: 14px;
  margin-inline-end: 6px;
  margin-block: -3px;
  vertical-align: -2px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mo-dl-arrow, .mo-dl-tray { transform-box: fill-box; }
.mo-dl-tray { transform-origin: bottom; }

/* Magic-link landing: dots after the title and a thin running bar under it. */
.go-dots i { font-style: normal; display: inline-block; }
.go-bar {
  position: relative;
  z-index: 1;
  width: 180px;
  max-width: 60%;
  height: 3px;
  margin: 2px auto 16px;
  border-radius: 2px;
  background: var(--line2-strong);
  overflow: hidden;
}
.go-bar i { display: block; width: 40%; height: 100%; border-radius: 2px; background: var(--accent); }
/* Standing still it would read as a stuck 40%, so reduced motion keeps only the loader. */
@media (prefers-reduced-motion: reduce) {
  .go-bar { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Fills are backwards (the send fill aside): no finished animation is held, so nothing
     at rest stays a composited layer or a containing block for the date pickers. */
  .sp-success.reveal-in .is-booked::before { animation: mo-pop-0 .5s var(--mo-spring) .25s backwards; }
  .sp-success.reveal-in .is-booked::after { animation: mo-pop-0 .4s var(--mo-spring) .65s backwards; }
  .sp-success.reveal-in .sp-success-msg { animation: mo-rise .5s var(--mo-out) .8s backwards; }

  .pb-tabs::after { transition: transform .38s var(--mo-spring); }
  .pb-pane.mo-pane-in { animation: mo-rise .3s var(--mo-out) backwards; }

  .yt-teaser.reveal-in .yt-teaser__spark polyline { animation: mo-spark-line .9s var(--mo-out) .2s backwards; }
  .yt-teaser.reveal-in .yt-teaser__area { animation: mo-fade-in .6s ease .75s backwards; }
  .yt-teaser.reveal-in .yt-teaser__spark circle { animation: mo-pop-0 .35s var(--mo-spring) 1s backwards; }
  .yt-teaser.reveal-in .yt-teaser__delta { animation: mo-pop-0 .4s var(--mo-spring) 1.1s backwards; }

  .guide-overlay.active .guide-steps li { animation: mo-step-in .4s var(--mo-out) .12s backwards; }
  .guide-overlay.active .guide-steps li:nth-child(2) { animation-delay: .24s; }
  .guide-overlay.active .guide-steps li:nth-child(3) { animation-delay: .36s; }
  .guide-overlay.active .guide-steps li:nth-child(n+4) { animation-delay: .48s; }
  .guide-overlay.active .guide-steps li::before { animation: mo-pop-0 .4s var(--mo-spring) .22s backwards; }
  .guide-overlay.active .guide-steps li:nth-child(2)::before { animation-delay: .34s; }
  .guide-overlay.active .guide-steps li:nth-child(3)::before { animation-delay: .46s; }
  .guide-overlay.active .guide-steps li:nth-child(n+4)::before { animation-delay: .58s; }
  /* The stage the client is in lights last. */
  .guide-overlay.active .guide-step-of { animation: mo-pop-0 .4s var(--mo-spring) .6s backwards; }

  /* The fill is drawn under the text; a disabled button would fade it to 35%. */
  .upl-submit.is-sending { position: relative; isolation: isolate; overflow: hidden; }
  .upl-submit.is-sending:disabled {
    opacity: 1;
    background: var(--card-2);
    border-color: var(--y-border);
    animation: mo-send-text 2.6s linear forwards;
  }
  .upl-submit.is-sending::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--accent);
    transform-origin: right;
    animation: mo-send-fill 2.6s cubic-bezier(.3,.1,.3,1) forwards;
  }
  .upl-submit.is-sending.is-sent { animation: none; color: var(--ink); }
  .upl-submit.is-sending.is-sent::after { animation: none; transform: none; transition: transform .3s var(--mo-out); }

  .plan.is-in .plan-ribbon { animation: mo-swing 1.1s var(--mo-out) calc(var(--i, 0) * 110ms + .3s) backwards; }

  .revision-overlay.active .mo-rounds i.is-used::after {
    animation: mo-pop-0 .4s var(--mo-spring) calc(var(--n, 0) * .2s + .25s) backwards;
  }

  .card--highlight.reveal-in > .mo-trace rect { animation: mo-trace 1.6s var(--mo-out) .2s backwards; }

  .confirmed-date .cd-part { animation: mo-flip-down .5s var(--mo-out) .45s backwards; }
  .confirmed-date .cd-part:nth-of-type(2) { animation-delay: .57s; }
  .confirmed-date .cd-part:nth-of-type(3) { animation-delay: .69s; }

  .alert--new.reveal-in .mo-bell { animation: mo-bell-ring .9s ease .35s backwards; }

  .mo-dl.is-dropping .mo-dl-arrow { animation: mo-dl-drop .7s var(--mo-out) backwards; }
  .mo-dl.is-dropping .mo-dl-tray { animation: mo-dl-catch .7s var(--mo-out) backwards; }

  .go-dots i { animation: mo-dot-up 1.2s ease-in-out infinite; }
  .go-dots i:nth-child(2) { animation-delay: .15s; }
  .go-dots i:nth-child(3) { animation-delay: .3s; }
  .go-bar i { animation: mo-indet 1.3s var(--mo-out) infinite; }
}

@keyframes mo-pop-0 { from { transform: scale(0); } }
@keyframes mo-fade-in { from { opacity: 0; } }
@keyframes mo-spark-line { from { stroke-dasharray: var(--mo-len); stroke-dashoffset: var(--mo-len); } to { stroke-dasharray: var(--mo-len); stroke-dashoffset: 0; } }
@keyframes mo-step-in { from { opacity: 0; transform: translateX(-14px); } }
@keyframes mo-send-fill { 0% { transform: scaleX(0); } 40% { transform: scaleX(.6); } 100% { transform: scaleX(.9); } }
@keyframes mo-send-text { 0%, 22% { color: var(--fg); } 34%, 100% { color: var(--ink); } }
@keyframes mo-swing {
  0% { transform: translateY(-110%); opacity: 0; }
  20% { opacity: 1; }
  35% { transform: translateY(0) rotate(9deg); }
  55% { transform: rotate(-6deg); }
  75% { transform: rotate(3deg); }
  100% { transform: rotate(0); }
}
@keyframes mo-trace {
  0% { stroke-dasharray: var(--mo-len); stroke-dashoffset: var(--mo-len); opacity: 1; }
  65% { stroke-dasharray: var(--mo-len); stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dasharray: var(--mo-len); stroke-dashoffset: 0; opacity: 0; }
}
@keyframes mo-flip-down { from { transform: perspective(300px) rotateX(-95deg); opacity: 0; } }
@keyframes mo-bell-ring {
  10% { transform: rotate(16deg); }
  25% { transform: rotate(-14deg); }
  40% { transform: rotate(10deg); }
  55% { transform: rotate(-6deg); }
  70% { transform: rotate(3deg); }
  100% { transform: rotate(0); }
}
@keyframes mo-dl-drop { 0% { transform: translateY(-10px); opacity: 0; } 55% { transform: translateY(3px); opacity: 1; } 100% { transform: none; } }
@keyframes mo-dl-catch { 55% { transform: scaleY(1); } 70% { transform: scaleY(.7); } 100% { transform: none; } }
@keyframes mo-dot-up { 0%, 60%, 100% { transform: none; opacity: .4; } 30% { transform: translateY(-0.12em); opacity: 1; } }
@keyframes mo-indet { from { transform: translateX(160%); } to { transform: translateX(-260%); } }


/* ───── Micro-motion round 3 (01/10) ─────
   Same contract as the two blocks above: motion only on elements that had none,
   everything that moves sits under no-preference, and every resting state is the final
   one. Presses are answered by one-shot classes from CutsMotion.pulse. */

/* Empty lists: a small reel above the line. */
.mo-reel {
  position: relative;
  display: block;
  width: 56px; height: 56px;
  margin: 0 auto 10px;
  border-radius: 50%;
  border: 3px solid var(--y-border);
}
.mo-reel::before,
.mo-reel::after {
  content: '';
  position: absolute;
  left: 20px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--y-border);
}
.mo-reel::before { top: 8px; }
.mo-reel::after { bottom: 8px; }
.mo-empty-text { display: block; }

/* "More shorts": its ✨ stays in the line of text, in a box a press can turn. */
.mo-spark { display: inline-block; }

/* A deliverable's play mark: the ring that leaves it when pressed, unseen at rest. */
.deliv-play { position: relative; }
.deliv-play::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}

/* The chosen slot on the booking form is ticked. The empty alt keeps the glyph out of
   what a screen reader says; browsers without it read the first value. */
.sp-details-chosen::before {
  content: '✓';
  content: '✓' / '';
  flex: none;
  width: 18px; height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}

@media (prefers-reduced-motion: no-preference) {
  /* Skip: the arrow turns the way the jump went, the "10" lights. */
  #cpBack.is-spinning svg { animation: mo-spin-ccw .45s var(--mo-out); }
  #cpFwd.is-spinning svg { animation: mo-spin-cw .45s var(--mo-out); }
  .cp-skip.is-spinning.mo-ten b { animation: mo-ten-pop .45s var(--mo-spring); }

  .mo-reel { animation: mo-reel-in .8s var(--mo-out) backwards; }
  .mo-empty-text { animation: mo-rise .5s var(--mo-out) .3s backwards; }

  /* Past the sixth row the plan waits no longer; the rest arrive together. */
  .plan-row { animation: mo-step-in .4s var(--mo-out) calc(min(var(--i, 0), 6) * .1s) backwards; }
  .plan-row .plan-date {
    animation: mo-pop-0 .4s var(--mo-spring) calc(min(var(--i, 0), 6) * .1s + .25s) backwards;
  }

  .approval-add-shorts.is-pressed .mo-spark { animation: mo-spark-turn .45s var(--mo-spring); }

  .deliv-item.is-pressed .deliv-play { animation: mo-press .3s var(--mo-out); }
  .deliv-item.is-pressed .deliv-play::after { animation: mo-ring-out .6s var(--mo-out); }

  .sp-details-chosen.is-landing { animation: mo-slot-in .5s var(--mo-spring) backwards; }
  .sp-details-chosen.is-landing::before { animation: mo-pop-0 .4s var(--mo-spring) .35s backwards; }
}

@keyframes mo-spin-ccw { to { transform: rotate(-360deg); } }
@keyframes mo-spin-cw { to { transform: rotate(360deg); } }
@keyframes mo-ten-pop { 40% { transform: scale(1.35); color: var(--accent); } }
@keyframes mo-reel-in { from { transform: rotate(-200deg) scale(.6); opacity: 0; } }
@keyframes mo-spark-turn { 50% { transform: rotate(180deg) scale(1.3); } to { transform: rotate(360deg); } }
@keyframes mo-press { 40% { transform: scale(.88); } }
@keyframes mo-ring-out { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes mo-slot-in { from { opacity: 0; transform: translateY(-18px) scale(.96); } }


/* ───── Deliverable sections (01/10) ─────
   The shorts picker and the deliverables panel split their files by kind, one section
   each, under a head that says what the kind is for. Mobile first; scoped to the two
   panels, overriding the older rules above only where these components need it. */

.dsec {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line2);
}
#shortsEpisodeWrap,
#shortsEpisodeWrap[hidden] + #shortsForm > .dsec:first-child,
#deliverablesGrid > .dsec:first-child {
  margin-top: 0;
  padding-top: 4px;
  border-top: 0;
}

.dsec-head {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.dsec-ico {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--y-surface);
  border: 1px solid var(--y-border);
  color: var(--accent);
}
.dsec-ico svg { width: 20px; height: 20px; }
.dsec-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--fg);
}
.dsec-sub {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--fg-mute);
}
.dsec-chip {
  justify-self: end;
  margin: 0;
  padding: 4px 10px;
  border: 1px solid var(--line2-strong);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  white-space: nowrap;
  color: var(--fg-soft);
  font-variant-numeric: tabular-nums;
}
.dsec-chip:empty { display: none; }
.dsec-chip--y {
  color: var(--ink);
  background: var(--accent);
  border-color: var(--accent);
}
/* "Download all" in the chip's place: a link, so it reads in the brand colour and its
   hit area reaches 40px without a chunkier pill. */
.dsec-chip--link {
  position: relative;
  color: var(--accent);
  border-color: var(--y-border);
  text-decoration: none;
}
.dsec-chip--link::after {
  content: '';
  position: absolute;
  inset: -7px -2px;
}
.dsec-chip--link:hover { text-decoration: none; border-color: var(--accent); }

/* The quota line can run long ("נבחרו 0 · 2 לכל פרק · נשארו 26 בחבילה"); on a phone it
   drops under the title instead of squeezing it. */
.dsec-head--wrap { grid-template-columns: 40px minmax(0, 1fr); }
.dsec-head--wrap .dsec-chip {
  grid-column: 2;
  justify-self: start;
  white-space: normal;
}
@container canvas (min-width: 721px) {
  .dsec-head--wrap { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .dsec-head--wrap .dsec-chip {
    grid-column: auto;
    justify-self: end;
    max-width: 24em;
  }
}

/* The episode, one cut: a wide card, all of it plays. */
.ep-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line2-strong);
  border-radius: 14px;
  background: radial-gradient(120% 90% at 30% 20%, #3a3216 0%, #1a1810 45%, #0e0e0e 100%);
  color: var(--fg);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.ep-poster {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}
.ep-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.65), transparent 55%);
}
.ep-play {
  position: absolute;
  top: 50%; left: 50%;
  width: 58px; height: 58px;
  margin: -29px 0 0 -29px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 8px 28px rgba(255,213,0,0.25);
  z-index: 1;
  transition: scale 0.2s var(--mo-out);
}
.ep-play::before {
  content: '';
  width: 0; height: 0;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent var(--ink);
  margin-left: 4px;
}
/* The press ring (motion round 3) leaves the circle's own edge, whatever its size. */
.ep-play.deliv-play::after {
  top: 0; left: 0;
  width: 100%; height: 100%;
  margin: 0;
}
.ep-card:hover .ep-play,
.ep-card:focus-visible .ep-play { scale: 1.08; }
.ep-meta {
  position: absolute;
  inset-inline: 12px;
  bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  z-index: 1;
  font-size: 13.5px;
}
.ep-meta b { font-size: 15px; font-weight: 700; }
.ep-dur {
  direction: ltr;
  unicode-bidi: isolate;
  padding: 1px 7px;
  border-radius: 6px;
  background: rgba(0,0,0,0.6);
  font-variant-numeric: tabular-nums;
}

/* Several cuts: a row each, all of it plays; the main cut is marked. */
.ep-rows { display: grid; gap: 8px; }
.ep-row {
  position: relative;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  align-items: center;
  justify-items: stretch;
  gap: 12px;
  width: 100%;
  aspect-ratio: auto;
  padding: 8px;
  border: 1px solid var(--line2-strong);
  border-radius: 12px;
  background: var(--card-2);
  color: var(--fg);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.ep-row:hover { border-color: var(--y-border); }
.ep-row--main { border-color: var(--y-border); background: #1d1b10; }
.ep-row-poster {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: radial-gradient(120% 90% at 30% 20%, #3a3216 0%, #1a1810 50%, #0e0e0e 100%);
}
.ep-row-poster .ep-play {
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  box-shadow: none;
}
.ep-row-poster .ep-play::before { border-width: 6px 0 6px 10px; margin-left: 3px; }
.ep-row-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.ep-tag {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--accent);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  vertical-align: 2px;
}
.ep-row .ep-dur {
  padding: 0 4px 0 0;
  background: none;
  color: var(--fg-soft);
  font-size: 12.5px;
}
.ep-card:focus-visible,
.ep-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}


/* On a desktop a full-width 16:9 card would push the shorts below the fold. */
@container canvas (min-width: 721px) {
  .ep-card { max-width: 440px; }
}

@media (prefers-reduced-motion: reduce) {
  .ep-play { transition: none; }
}

/* Deliverables: the jump chips, sticky at the top of the modal's scroll. The modal's
   own padding is undone (sticky counts from inside it) so the bar meets the modal's
   edge and covers the full width as content passes under it. */
.deliv-nav {
  position: sticky;
  top: -22px;
  z-index: 3;
  display: flex;
  gap: 8px;
  margin: 0 -18px;
  padding: 10px 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  background: var(--card);
  border-bottom: 1px solid var(--line2);
}
.deliv-nav::-webkit-scrollbar { display: none; }
.deliv-nav-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line2-strong);
  border-radius: var(--r-pill);
  background: var(--card-2);
  color: var(--fg-soft);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.deliv-nav-chip b { color: var(--accent); font-variant-numeric: tabular-nums; }
.deliv-nav-chip[aria-current="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}
.deliv-nav-chip[aria-current="true"] b { color: var(--ink); }
.deliv-nav-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.deliv-nav:not([hidden]) + .deliv-grid { margin-top: 14px; }
.revision-modal-sub:has(+ .deliv-nav:not([hidden])) { margin-bottom: 14px; }

/* Shorts in the deliverables: upright 9:16, on their still when Stream has one. */
.dtiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
.deliv-item.dtile,
.deliv-item.dwide-item {
  width: auto;
  overflow: hidden;
  background: linear-gradient(170deg, #2c2714, #121212);
}
.deliv-item.dtile { aspect-ratio: 9 / 16; }
.dtile .deliv-play {
  position: absolute;
  bottom: 6px; left: 6px;
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line2-strong);
  background: rgba(0,0,0,0.6);
  font-size: 11px;
  z-index: 1;
}
/* On a still the number sits on a shade, large enough to find the tile by. */
.dtile.has-poster::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent 40%);
}
.dtile .deliv-item-label {
  z-index: 1;
  bottom: 9px; right: 8px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0;
  color: var(--fg);
}
/* No still: the number is the tile's face. */
.dtile:not(.has-poster) .deliv-item-label {
  position: static;
  max-width: none;
  padding: 0;
  background: none;
  backdrop-filter: none;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0;
  color: var(--fg-soft);
}
.dtile-badge {
  position: absolute;
  top: 7px; left: 7px;
  z-index: 1;
  padding: 0 6px;
  border-radius: 5px;
  background: var(--accent);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  white-space: nowrap;
}
/* The saved-correction badge would collide with a version badge in the top corner;
   on an upright tile it sits above the number instead. */
.dtile.deliv-item--corrected::after {
  top: auto;
  bottom: 40px;
  right: 50%;
  translate: 50% 0;
  white-space: nowrap;
  z-index: 1;
}

/* Teasers, thumbnails and audio: wide tiles, two to a row on a phone. */
.dwide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.deliv-item.dwide-item { aspect-ratio: 16 / 9; }
.dwide-item:only-child { grid-column: 1 / -1; }
.dwide-item .deliv-play { z-index: 1; text-shadow: 0 2px 10px rgba(0,0,0,0.6); }
.dwide-item .deliv-item-label { z-index: 1; }

.plan-section .plan-intro { margin: -6px 0 14px; }
.deliv-item.dtile:focus-visible,
.deliv-item.dwide-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@container canvas (min-width: 721px) {
  .deliv-nav { top: -36px; margin-inline: -36px; padding-inline: 36px; }
  .dwide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dwide-item:only-child { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .deliv-nav-chip { transition: none; }
}

/* ───── Short tiles and section icons (01/10) ───── */
/* Picker tiles: the original square, the number in the middle and the tick in the
   corner. Playing moves out of the tile into its own "צפייה" button underneath, so a tap
   on the tile only ever selects. */
#shortsGrid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 12px 8px; }
#shortsGrid .short-option-label { padding-bottom: 0; }
.short-cell { display: grid; gap: 6px; align-content: start; }
.short-cell .short-watch {
  position: static;
  width: 100%; height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--line2-strong);
  border-radius: var(--r-pill);
  background: var(--card-2);
  backdrop-filter: none;
  color: var(--fg-soft);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.short-cell .short-watch::before {
  content: '';
  margin: 0;
  font-size: 0;
  border-style: solid;
  border-width: 4px 0 4px 7px;
  border-color: transparent transparent transparent var(--accent);
}
.short-cell .short-watch:hover { border-color: var(--accent); color: var(--fg); }
/* What the short is about, under its tile; the tile keeps its width. The description
   takes the row's spare height, so every "צפייה" in a row sits on one line however many
   lines its neighbours' descriptions run to. */
.short-cell:has(.short-desc) { grid-template-rows: auto 1fr auto; }
.short-desc {
  margin: 0;
  color: var(--fg-soft);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}


.dtile .deliv-play {
  inset: 50% auto auto 50%;
  width: 44px; height: 44px;
  margin: -26px 0 0 -22px;
  border: 0;
  background: var(--accent);
  color: var(--ink);
  font-size: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.dtile .deliv-item-label,
.dtile:not(.has-poster) .deliv-item-label {
  position: absolute;
  inset: auto 0 10px;
  max-width: none;
  text-align: center;
  font-size: 14px;
  color: var(--fg-soft);
}
.dtile:not(.has-poster) { display: block; }

/* Section icons: a solid yellow tile with a filled glyph, the brand's loudest mark. */
.dsec-ico {
  background: linear-gradient(150deg, #FFE45C, var(--accent) 60%);
  border: 0;
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(255,213,0,0.16);
}
.dsec-ico svg { width: 22px; height: 22px; }

/* One cut of the episode sits in the middle of a wide panel, not against its side. */
.ep-card { margin-inline: auto; }

/* ───── Recommended shorts (01/10) ───── */
/* Ronen's "option 8": an uneven, low particle fire at the tile's floor (static/js/fire.js),
   a warm glow under it, and a flame badge that opens the reason under the grid. */
.short-cell { position: relative; }
.short-cell--reco .short-option { border-color: rgba(255, 122, 26, 0.5); }
.short-cell--reco .short-option:not(:has(.short-checkbox:checked)) {
  background: radial-gradient(120% 60% at 50% 125%, rgba(255, 90, 0, 0.3), transparent 60%), var(--card-2);
}
.short-fire {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.short-reco-badge {
  position: absolute;
  top: -9px;
  right: -4px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px 2px 6px;
  border: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, #FF3D00, #FF7A1A 60%, #FFB020);
  box-shadow: 0 3px 12px rgba(255, 90, 0, 0.45);
  color: #fff;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}
.short-reco-badge svg { width: 11px; height: 11px; }
.short-reco-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The ₪ badge of a paid extra sits just under the recommendation badge. */
.short-cell--reco .short-option--extra::after { top: 14px; }
.shorts-reco-why {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #2a1a0e;
  border: 1px solid rgba(255, 122, 26, 0.45);
  color: var(--fg);
  font-size: 13.5px;
  line-height: 1.45;
}
.shorts-reco-why b { display: block; margin-bottom: 2px; color: #FFB020; font-size: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .short-reco-badge { animation: reco-badge-in 0.55s cubic-bezier(.34, 1.56, .64, 1) both; }
  .short-reco-flame { transform-origin: 50% 90%; animation: reco-flick 2.4s ease-in-out infinite; }
  .shorts-reco-why:not([hidden]) { animation: reco-why-in 0.25s cubic-bezier(.22, 1, .36, 1); }
}
@keyframes reco-badge-in { from { transform: scale(0) rotate(-20deg); opacity: 0; } }
@keyframes reco-flick {
  0%, 100% { transform: scale(1) rotate(-3deg); }
  30% { transform: scale(1.12, 1.18) rotate(3deg); }
  60% { transform: scale(0.94, 1.04) rotate(-2deg); }
}
@keyframes reco-why-in { from { opacity: 0; transform: translateY(-4px); } }


/* Taking a short down: a quiet bin that asks once more, in red, before it deletes. */
.pb-st-wrap { display: flex; align-items: center; gap: 10px; }
.pb-del {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  min-width: 30px;
  padding: 0 7px;
  border: 1px solid var(--line2);
  border-radius: var(--r-pill);
  background: none;
  color: var(--fg-mute);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.pb-del svg { width: 15px; height: 15px; flex: none; }
.pb-del:hover:not(:disabled) { color: #FF7A7A; border-color: rgba(255,122,122,0.4); }
.pb-del:disabled { opacity: 0.35; cursor: default; }
.pb-del-ask { display: none; }
.pb-del.is-armed { color: #fff; background: #D9363E; border-color: #D9363E; }
.pb-del.is-armed .pb-del-ask { display: inline; font-weight: 700; }
.pb-del:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pb-errors a { color: var(--accent); text-decoration: underline; }
.pb-connect {
  flex: none;
  height: 30px;
  padding: 0 14px;
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.pb-connect:hover:not(:disabled) { background: var(--accent); color: #0A0A0A; }
.pb-connect:disabled { opacity: 0.5; cursor: default; }
.pb-connect:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pb-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.6);
}
.pb-confirm {
  width: min(420px, 100%);
  padding: 24px;
  border: 1px solid var(--line2);
  border-radius: 18px;
  background: var(--card);
  display: grid;
  gap: 12px;
}
.pb-confirm-title { margin: 0; font-size: 18px; font-weight: 800; }
.pb-confirm-text { margin: 0; color: var(--fg-mute); font-size: 14px; line-height: 1.6; }
.pb-confirm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.pb-confirm-yes, .pb-confirm-no {
  height: 42px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.pb-confirm-yes { border: 0; background: var(--accent); color: #0A0A0A; }
.pb-confirm-no { border: 1px solid var(--line2); background: none; color: inherit; }
.pb-confirm-yes:focus-visible, .pb-confirm-no:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- offline page (served by the service worker when there is no network) ---- */
.offline-card { text-align: center; }
.offline-card .auth-subtitle { margin-bottom: 22px; }

/* ---- home-screen app (standalone) ---- */
.nav-back {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line2);
  border-radius: 10px;
  background: transparent;
  color: var(--fg-soft);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  /* .nav-inner spaces its children apart; keep the button beside the logo. */
  margin-inline-start: 12px;
  margin-inline-end: auto;
}
.nav-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (display-mode: standalone) {
  /* black-translucent status bar: the fixed nav runs under it and pads itself. */
  .nav-inner { padding-top: calc(20px + env(safe-area-inset-top, 0px)); }
  .nav-links { top: calc(76px + env(safe-area-inset-top, 0px)); }
  .main { padding-top: calc(120px + env(safe-area-inset-top, 0px)); }
  body:not([data-page="client.dashboard"]) .nav-back { display: inline-flex; }
}
@media (display-mode: standalone) and (max-width: 720px) {
  .nav-inner { padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
  .main { padding-top: calc(100px + env(safe-area-inset-top, 0px)); }
}
.pwa-hint { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pwa-hint__close {
  flex: 0 0 auto;
  border: 0; background: transparent; color: inherit;
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 6px;
}
.pwa-hint__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- /install guide ---- */
.install-card { text-align: center; }
.install-panel { display: grid; gap: 14px; margin-top: 18px; }
.install-steps { text-align: start; margin: 0; padding-inline-start: 1.4em; display: grid; gap: 10px; line-height: 1.6; }
.install-glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--y-surface); color: var(--accent); font-weight: 700;
  vertical-align: middle;
}
.install-ok { color: var(--accent); font-weight: 700; }

/* ---- hand-off cover from the home-screen launch page ---- */
html.handoff::before, html.handoff::after {
  content: "";
  position: fixed; z-index: 9999; pointer-events: none;
  transition: opacity .55s cubic-bezier(.22, .8, .2, 1);
}
html.handoff::before {
  inset: 0;
  background: #0A0A0A url("/static/לוגו צהוב שקוף.png") no-repeat;
  background-size: var(--handoff-w) auto;
  background-position: var(--handoff-x) var(--handoff-y);
}
html.handoff::after {
  left: var(--handoff-x); width: var(--handoff-w);
  top: calc(var(--handoff-y) + var(--handoff-h) + 18px); height: 2px;
  border-radius: 2px; background: #FFDE1F;
  animation: handoff-pulse 1.4s ease-in-out infinite;
}
html.handoff.handoff-done::before, html.handoff.handoff-done::after { opacity: 0; animation: none; }
/* The page settles under the opaque cover (its own entrance motion runs unseen), then
   pwa.js animates nav and main in as the cover lifts. */
html.handoff .nav, html.handoff .main { opacity: 0; }
@keyframes handoff-pulse { 0%, 100% { opacity: 1; transform: scaleX(1); } 50% { opacity: .45; transform: scaleX(.72); } }
@media (prefers-reduced-motion: reduce) { html.handoff::after { animation: none; } }