/* ============================================================================
   PICTURE LOCK — layer 2: the parts that separate software from a demo.

   Command palette · project memory · the states nobody designs (empty, loading,
   failed, quota, offline, unsupported) · the credit ledger · pricing.

   Loaded after app.css. Tokens come from there.
   ========================================================================= */

/* ═════════════════════════════════════════════════════ command palette ═══ */

.pal { position: fixed; inset: 0; z-index: 200; display: grid; align-items: start;
       justify-items: center; padding-top: 12vh; }
.pal[hidden] { display: none; }
.pal-scrim { position: absolute; inset: 0; background: rgba(8,7,7,.62); backdrop-filter: blur(3px);
             animation: palfade 140ms var(--ease-out) both; }
@keyframes palfade { from { opacity: 0 } to { opacity: 1 } }
.pal-box {
  position: relative; width: min(640px, calc(100vw - 32px));
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px;
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
  overflow: hidden; animation: palin 180ms var(--ease-out) both;
}
@keyframes palin { from { opacity: 0; transform: translateY(-8px) scale(.985) } to { opacity: 1; transform: none } }
.pal-in { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.pal-in input { flex: 1; min-width: 0; background: none; border: 0; font-size: var(--s-1); }
.pal-in input:focus { outline: none; }
.pal-in input::placeholder { color: var(--mut); }
.pal-in kbd { font-family: var(--mono); font-size: 0.66rem; color: var(--mut);
              border: 1px solid var(--line-2); border-radius: 8px; padding: 2px 5px; }
.pal-list { max-height: 46vh; overflow-y: auto; padding: 6px; }
.pal-grp { font-family: var(--mono); font-size: var(--s--2); letter-spacing: .13em;
           text-transform: uppercase; color: var(--mut); padding: 9px 9px 5px; }
.pal-i { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
         padding: 8px 9px; border-radius: 8px; font-size: var(--s--1); color: var(--text-2); }
.pal-i .k { margin-left: auto; font-family: var(--mono); font-size: var(--s--2); color: var(--mut); }
.pal-i .tag { font-family: var(--mono); font-size: 0.66rem; color: var(--amber); }
.pal-i[aria-selected="true"] { background: var(--raised); color: var(--text); }
.pal-none { padding: 26px 12px; text-align: center; color: var(--mut); font-size: var(--s--1); }
.pal-foot { display: flex; gap: 14px; padding: 9px 15px; border-top: 1px solid var(--line);
            background: var(--panel-2); font-family: var(--mono); font-size: var(--s--2); color: var(--mut); }

/* ═══════════════════════════════════════════════════════ project memory ═══ */

.projects { display: grid; gap: 2px; margin-top: 4px; }
.proj {
  display: grid; gap: 2px; width: 100%; text-align: left; padding: 7px 10px;
  border-radius: 8px; color: var(--text-2);
  transition: background var(--t-fast) var(--ease-out);
}
.proj b { font-size: var(--s--1); font-weight: 400; display: block; overflow: hidden;
          text-overflow: ellipsis; white-space: nowrap; }
.proj span { font-family: var(--mono); font-size: 0.66rem; color: var(--mut); }
.proj[aria-current="true"] { background: var(--raised); color: var(--text); }
@media (hover:hover) and (pointer:fine) { .proj:hover { background: var(--panel); } }

/* version history — a tree, scrubbable, not a button */
.hist { display: grid; gap: 0; }
.hv { display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: start;
      padding: 9px 0; position: relative; }
.hv::before { content: ''; position: absolute; left: 6px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.hv:first-child::before { top: 14px; }
.hv:last-child::before { bottom: calc(100% - 14px); }
.hv-dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--line-2);
          background: var(--panel); margin-top: 5px; z-index: 1; }
.hv[data-now="1"] .hv-dot { border-color: var(--amber); background: var(--amber); }
.hv-b { min-width: 0; }
.hv-t { font-size: var(--s--1); color: var(--text-2); }
.hv[data-now="1"] .hv-t { color: var(--text); }
.hv-m { font-family: var(--mono); font-size: var(--s--2); color: var(--mut); margin-top: 2px; }
.hv-a { font-size: var(--s--2); color: var(--mut); }

/* ══════════════════════════════════════════════════════════ the states ═══ */

.statebar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 12px; border: 1px dashed var(--line-2); border-radius: var(--r);
  background: var(--panel); margin-bottom: 16px;
}
.statebar .lbl { margin-right: 4px; }
.statebar button {
  font-size: var(--s--2); padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--mut);
}
.statebar button[aria-pressed="true"] { border-color: var(--amber); color: var(--amber); background: var(--amber-t); }

.state { display: none; }
.state[data-on="1"] { display: block; }

.panelmsg {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--panel);
  padding: 26px 22px; display: grid; gap: 9px; justify-items: start;
}
.panelmsg--warn { border-color: color-mix(in srgb, var(--live) 45%, transparent); }
.panelmsg-i { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center;
              background: var(--raised); color: var(--amber); margin-bottom: 3px; }
.panelmsg--warn .panelmsg-i { color: var(--live); }
.panelmsg h3 { font-size: var(--s-1); }
.panelmsg p { color: var(--text-2); font-size: var(--s--1); max-width: 62ch; line-height: 1.6; }
.panelmsg .why { font-family: var(--mono); font-size: var(--s--2); color: var(--mut); }
.panelmsg-acts { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 6px; }

/* progress that states a number, never a bare spinner */
.prog { display: grid; gap: 9px; }
.prog-bar { height: 4px; background: var(--line); border-radius: 8px; overflow: hidden; }
.prog-bar i { display: block; height: 100%; background: var(--amber); border-radius: 8px;
              transition: width 400ms var(--ease-out); }
.prog-m { display: flex; align-items: baseline; gap: 10px; font-family: var(--mono);
          font-size: var(--s--2); color: var(--mut); }
.prog-m b { color: var(--text); font-weight: 400; }

.skel { background: linear-gradient(90deg, var(--panel-2) 25%, var(--raised) 37%, var(--panel-2) 63%);
        background-size: 400% 100%; animation: shimmer 1.4s linear infinite; border-radius: 8px; }
@keyframes shimmer { from { background-position: 100% 0 } to { background-position: 0 0 } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; background: var(--panel-2); } }

/* ════════════════════════════════════════════════════════════ pricing ═══ */

.tiers { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(190px,100%),1fr)); }
.tier { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel);
        display: grid; grid-template-rows: auto auto 1fr auto; }
.tier[data-best="1"] { border-color: var(--amber); }
.tier-h { padding: 13px 14px 4px; }
.tier-n { font-size: var(--s--1); color: var(--text-2); display: flex; align-items: center; gap: 7px; }
.tier-p { padding: 0 14px 12px; display: flex; align-items: baseline; gap: 4px; }
.tier-p b { font-size: var(--s-3); letter-spacing: -.03em; font-family: var(--display); }
.tier-p span { font-family: var(--mono); font-size: var(--s--2); color: var(--mut); }
.tier-f { padding: 11px 14px; border-top: 1px solid var(--line); display: grid; gap: 7px; align-content: start; }
.tier-f div { display: flex; gap: 8px; font-size: var(--s--2); color: var(--text-2); line-height: 1.45; }
.tier-f svg { color: var(--pass); flex: none; margin-top: 3px; }
.tier-f .no { color: var(--mut); }
.tier-f .no svg { color: var(--line-2); }
.tier-cta { padding: 12px 14px; border-top: 1px solid var(--line); }
.tier-cta .btn { width: 100%; }

.bundles { display: grid; gap: 9px; grid-template-columns: repeat(auto-fit, minmax(min(150px,100%),1fr)); }
.bundle { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel);
          padding: 12px 13px; display: grid; gap: 4px; }
.bundle b { font-family: var(--display); font-size: var(--s-1); }
.bundle span { font-family: var(--mono); font-size: var(--s--2); color: var(--mut); }
.bundle .rate { color: var(--amber); }

/* ══════════════════════════════════════════════════════ credit ledger ═══ */

.ledger { display: grid; gap: 0; }
.led { display: grid; grid-template-columns: 78px 1fr auto auto; gap: 12px; align-items: baseline;
       padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--s--1); }
.led:last-child { border-bottom: 0; }
.led-t { font-family: var(--mono); font-size: var(--s--2); color: var(--mut); }
.led-r { color: var(--text-2); min-width: 0; }
.led-d { font-family: var(--mono); }
.led-d[data-neg="1"] { color: var(--live); }
.led-d[data-neg="0"] { color: var(--pass); }
.led-b { font-family: var(--mono); font-size: var(--s--2); color: var(--mut); }

/* ══════════════════════════════════════════════════════════ keyboard ═══ */

.keys { display: grid; gap: 0; }
.keyrow { display: flex; align-items: center; gap: 12px; padding: 7px 0;
          border-bottom: 1px solid var(--line); font-size: var(--s--1); }
.keyrow:last-child { border-bottom: 0; }
.keyrow .kk { display: flex; gap: 4px; flex: none; min-width: 108px; }
kbd { font-family: var(--mono); font-size: var(--s--2); color: var(--text-2);
      border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 8px;
      padding: 2px 6px; background: var(--panel-2); }
.keyrow span { color: var(--mut); }

.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: var(--raised); border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 10px 15px; font-size: var(--s--1); z-index: 300;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  animation: toastin 220ms var(--ease-out) both;
}
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 8px) } to { opacity: 1; transform: translate(-50%, 0) } }
.toast[hidden] { display: none; }

/* The editor's own grid children inherit min-width:auto, so the tool rail and
   the 74px track-label column together refused to shrink below the phone
   viewport. Everything in the editor may shrink; the timeline scrolls itself. */
.editor, .ed-top, .ed-tools, .ed-stage, .ed-insp, .tl, .tracks, .track, .track-b { min-width: 0; }
@media (max-width: 620px) {
  .track { grid-template-columns: 54px 1fr; gap: 6px; }
  .tl { padding-inline: 10px; }
  .tl-bar { gap: 8px; }
  .tl-bar .pill { display: none; }        /* the credits note is nice, not load-bearing */
  .ed-tools { max-height: 240px; }
}


/* ═══════════════════════════════════════════════════════════════ the mark ═══
   In-point, out-point, and the span between them closed. It says what the
   product promises and it survives being 14px in a sidebar. */
.mk { width: 17px; height: 17px; color: var(--amber); flex: none; }
.brand { gap: 8px; }
.brand b { letter-spacing: -.015em; }


/* ═════════════════════════════════════════════════════════════ dropzone ═══
   A real target: the whole panel accepts a drop, and it is keyboard-reachable,
   because "click here" as the only route excludes anyone not using a mouse. */
.dropzone {
  border: 1.5px dashed var(--line-2); border-radius: 10px; background: var(--panel);
  padding: clamp(28px, 6vw, 56px) 24px; text-align: center; cursor: pointer;
  display: grid; justify-items: center; gap: 9px; color: var(--mut);
  transition: border-color var(--t-mid) var(--ease-out), background var(--t-mid) var(--ease-out);
}
.dropzone h3 { color: var(--text); font-size: var(--s-1); }
.dropzone p { font-size: var(--s--1); max-width: 46ch; line-height: 1.55; }
.dropzone[data-over="1"], .dropzone:focus-visible { border-color: var(--amber); background: var(--panel-2); }
@media (hover:hover) and (pointer:fine) { .dropzone:hover { border-color: var(--amber); } }

.livelog {
  margin-top: 12px; max-height: 190px; overflow-y: auto; display: grid; gap: 4px;
  font-size: var(--s--2); color: var(--text-2);
}
.livelog .tick { color: var(--text-2); }

/* The connection badge is new and it matters — a page that looks connected when
   it is not is worse than either honest state — so at narrow widths the things
   that yield are the ⌘K button (the shortcut still works) and Account (it is one
   tap away in the palette). Export and the badge stay. */
@media (max-width: 560px) {
  .top { gap: 8px; padding-inline: 12px; }
  .top h1 span { display: none; }
  [data-open-pal] { display: none; }
}
@media (max-width: 420px) {
  /* NOT display:none — hiding Account made it unreachable on a phone, where
     there is no ⌘K either. Icon-only keeps it a tap away. */
  .top [data-go="account"] { font-size: 0; padding-inline: 10px; }
  .top [data-go="account"]::after { content: "\2699"; font-size: .9rem; }
  .top h1 { font-size: var(--s--1); }
}

/* ══════════════════════════════════════════════════════════════ phone ═══
   The sidebar as a wrapped row put ~640px of navigation — nav, library,
   projects, the credits panel — above the product. On a 844px-tall phone you
   scrolled past all of it before seeing anything you came for.

   So on a phone the shell inverts: content first, a fixed bottom tab bar for
   the three modes, and everything else (library, projects, plans) one tap away
   behind More, which opens the command palette that already indexes all of it.
   This is the native pattern on both platforms for exactly this reason. */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }

  .side {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 90;
    height: auto; padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    flex-direction: row; align-items: stretch; gap: 4px;
    border-right: 0; border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--rail) 94%, transparent);
    backdrop-filter: blur(14px);
    overflow: visible;
  }
  /* the desktop furniture is not deleted, it is relocated to the palette */
  .side .brand, .side .sgroup, .side .projects, .side .credits { display: none; }
  .side .nav { display: contents; }
  .side .nav--lib { display: none; }   /* library lives in the palette on a phone */

  .side .nav button {
    flex: 1; flex-direction: column; gap: 3px; justify-content: center;
    padding: 7px 4px; font-size: 0.66rem; text-align: center; border-radius: 8px;
  }
  .side .nav button svg { opacity: .85; }
  .side .nav button .n { display: none; }

  /* content clears the bar */
  .main { padding-bottom: 64px; }
  .editor { height: auto; }

  /* the phone needs a way to the library — More opens the palette */
  .side::after { content: none; }
  .tabmore {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    justify-content: center; padding: 7px 4px; font-size: 0.66rem;
    border-radius: 8px; color: var(--text-2);
  }
}
@media (min-width: 901px) { .tabmore { display: none; } }

/* the editor on a phone: the picture first, the tools after it */
@media (max-width: 999px) {
  .ed-top { display: flex; flex-direction: column; }
  .ed-stage { order: -1; aspect-ratio: 9/16; max-height: 56vh; }
  .ed-tools { max-height: 210px; overflow-y: auto; }
}

/* ═══════════════════════════════════════════════════ THE ENGINE ═══════════
   Lovable's whole insight is that the product is ONE BOX. Not a dashboard with
   a chat in it — a box, and everything else gets out of the way until you have
   typed in it.

   So this is the first thing: a single prompt, centred, with the four ways in
   underneath it as quiet affordances rather than four competing cards. Edit and
   Connect still exist; they stop being peers of the thing that matters. */

.engine {
  min-height: calc(100dvh - 54px);
  display: grid; align-content: center; justify-items: center;
  padding: clamp(24px, 6vh, 80px) var(--gutter) 90px;
  text-align: center;
}
.engine-h {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.9rem, 1.2rem + 3.2vw, 3.4rem);
  letter-spacing: -.03em; line-height: 1.06; margin-bottom: 12px;
  max-width: 18ch; text-wrap: balance;
}
.engine-h em { font-style: normal; color: var(--amber); }
.engine-sub { color: var(--text-2); font-size: var(--s-1); max-width: 54ch; margin-bottom: 30px; line-height: 1.5; }

.engine-box {
  width: min(720px, 100%); background: var(--panel);
  border: 1px solid var(--line-2); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  transition: border-color var(--t-mid) var(--ease-out);
}
.engine-box:focus-within { border-color: var(--amber); }
.engine-box[data-over="1"] { border-color: var(--amber); background: var(--panel-2); }
.engine-in { display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px 10px; }
.engine-in textarea {
  flex: 1; min-width: 0; background: none; border: 0; resize: none;
  font: inherit; font-size: var(--s-1); line-height: 1.5; color: var(--text);
  min-height: 62px; max-height: 220px;
}
.engine-in textarea:focus { outline: none; }
.engine-in textarea::placeholder { color: var(--mut); }

.engine-bar {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 10px 14px 13px; border-top: 1px solid var(--line);
}
.engine-way {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 11px; border-radius: 999px; border: 1px solid var(--line-2);
  font-size: var(--s--2); color: var(--text-2); background: var(--panel-2);
  transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.engine-way svg { color: var(--amber); flex: none; }
@media (hover:hover) and (pointer:fine) { .engine-way:hover { border-color: var(--amber); color: var(--text); } }
.engine-go {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 999px; background: var(--amber); color: #17130C;
  font-weight: 600; font-size: var(--s--1);
}
.engine-go[disabled] { opacity: .45; cursor: not-allowed; }

.engine-eg { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
.engine-eg button {
  font-size: var(--s--2); padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--mut); background: transparent;
}
@media (hover:hover) and (pointer:fine) { .engine-eg button:hover { border-color: var(--line-2); color: var(--text-2); } }

.engine-foot { margin-top: 26px; font-size: var(--s--2); color: var(--mut); display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.engine-foot b { color: var(--text-2); font-weight: 500; }

/* when the engine is showing, the workbench chrome steps back */
.app[data-engine="1"] .side .nav--lib,
.app[data-engine="1"] .side .projects,
.app[data-engine="1"] .side .sgroup { opacity: .45; }

/* ═══════════════════════════════════════════════ THE RESULT, REBUILT ═══════
   What was wrong, looking at it honestly:
     · my debug state-switcher sat ABOVE the product, in the best position on
       the page. Developer scaffolding presented as a feature.
     · the four source cards stayed after you had already made something. They
       are a way IN, not permanent furniture.
     · the videos — the entire reason the user is here — were three small,
       identical thumbnails, the smallest thing on screen.
     · every panel had the same border, radius and weight, so nothing led. A
       page where everything is emphasised has no emphasis.

   So: one big picture, the alternates as a quiet strip beneath it, the
   conversation in its own column, and everything else collapsed until asked
   for. */

.work { display: grid; gap: 22px; align-items: start; }
@media (min-width: 1100px) {
  .work { grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); gap: 34px; }
}

/* ── the picture. the hero, and sized like one ── */
.hero-cut { display: grid; gap: 14px; }
.hero-stage {
  position: relative; border-radius: 12px; overflow: hidden; background: #000;
  aspect-ratio: 9 / 16; max-height: min(74vh, 760px); width: auto;
  margin-inline: auto; box-shadow: 0 24px 60px rgba(0,0,0,.45);
  border: 1px solid var(--line-2);
}
.hero-stage video, .hero-stage img { width: 100%; height: 100%; object-fit: cover; }
.hero-play {
  position: absolute; inset: 0; display: grid; place-items: center; border: 0;
  background: transparent; cursor: pointer;
  transition: background var(--t-mid) var(--ease-out);
}
.hero-play span {
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(10,9,8,.5); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.22);
  display: grid; place-items: center;
  transition: transform var(--t-fast) var(--ease-out);
}
.hero-play:hover span { transform: scale(1.06); }
.hero-play[data-playing="1"] { background: transparent; }
.hero-play[data-playing="1"] span { opacity: 0; }

.hero-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  justify-content: center; font-family: var(--mono); font-size: var(--s--2); color: var(--mut);
}
.hero-meta .ok { color: var(--pass); }
.hero-acts { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }

/* ── the alternates: a strip, not three equal cards ── */
.alts { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }
.alt {
  width: 84px; border-radius: 8px; overflow: hidden; background: var(--panel);
  border: 1px solid var(--line); padding: 0; cursor: pointer; text-align: left;
  transition: border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.alt:hover { border-color: var(--line-2); }
.alt[aria-pressed="true"] { border-color: var(--amber); }
.alt-v { aspect-ratio: 9/16; background: #000; }
.alt-v img, .alt-v video { width: 100%; height: 100%; object-fit: cover; }
.alt-l { padding: 5px 6px 6px; font-family: var(--mono); font-size: 0.66rem; color: var(--mut); line-height: 1.3; }
.alt[aria-pressed="true"] .alt-l { color: var(--text-2); }

/* ── the conversation: its own column, room to breathe ── */
.talk { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 10px;
        background: var(--panel); overflow: hidden; }
.talk-log { padding: 16px; display: grid; gap: 16px; max-height: min(52vh, 520px); overflow-y: auto; }
.talk-in { border-top: 1px solid var(--line); background: var(--panel-2); padding: 12px; }

/* ── everything else: collapsed until asked for ── */
.tuck { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); overflow: hidden; }
.tuck + .tuck { margin-top: 9px; }
.tuck-h {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 13px;
  background: none; border: 0; cursor: pointer; text-align: left; color: inherit;
}
.tuck-h .lbl { flex: 1; }
.tuck-h .n { font-family: var(--mono); font-size: var(--s--2); color: var(--mut); }
.tuck-h svg { color: var(--mut); transition: transform var(--t-fast) var(--ease-out); }
.tuck[data-open="1"] .tuck-h svg { transform: rotate(90deg); }
.tuck-b { display: none; padding: 0 13px 13px; }
.tuck[data-open="1"] .tuck-b { display: block; }

/* the debug switcher is developer scaffolding — it does not belong above the
   product. Tucked into the footer of the page, small, and labelled as ours. */
.devbar {
  margin-top: 30px; padding-top: 14px; border-top: 1px dashed var(--line);
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap; opacity: .55;
  transition: opacity var(--t-mid) var(--ease-out);
}
.devbar:hover { opacity: 1; }
.devbar .lbl { margin-right: 4px; }
.devbar button {
  font-size: 0.66rem; padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--mut); background: transparent;
}
.devbar button[aria-pressed="true"] { border-color: var(--amber); color: var(--amber); }

/* ═══════════════════════════════════════════════════ THE STUDIO ════════════
   Rebuilt 16 Sep after the owner's verdict on the stacked version: "LOOK THE UI
   IS STILL BEYOND SHIT". Measured before this rebuild:
     - on a 390px phone the video started 779px down the page, under the whole
       chat, so you could not see your own video without scrolling past it
     - at 1100px the columns came out 420px of chat to 390px of video
     - the chat log clipped a message mid-sentence against the composer
     - none of the result controls were wired to anything
   Lovable's shape fixes all four: a full-height conversation rail with the box
   pinned at its foot, and the picture owning everything else. */

/* ⚠️ [hidden] must win. `.queue { display: grid }` outranks the browser's own
   [hidden] rule, so an EMPTY queue rendered "Make it · 18 credits" with nothing in
   it, and the phone showed "Chat 0". Measured in a screenshot, not in any check —
   every assertion passed because the element existed. */
[hidden] { display: none !important; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.studio {
  display: grid; grid-template-columns: minmax(320px, 372px) minmax(0, 1fr);
  height: calc(100dvh - 54px - 44px); min-height: 600px;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--bg);
}
/* preview hidden: the conversation takes the whole window. One rule, because the layout is one grid. */
.studio[data-preview="off"] { grid-template-columns: minmax(0, 1fr); }
.studio[data-preview="off"] #studio-stage { display: none; }
.studio[data-preview="off"] .rail { max-width: 860px; margin: 0 auto; width: 100%; }
.stage-hide, .stage-show { margin-left: auto; }
.stage-show { margin: 0 0 0 auto; }
.studio-switch { display: none; }

/* ── the rail ── */
.rail {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  background: var(--rail); border-right: 1px solid var(--line);
}
.rail-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid var(--line); flex: none;
}
.rail-id { flex: 1; min-width: 0; }
.rail-t { font-size: var(--s--1); font-weight: 500; color: var(--text);
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-m { font-family: var(--mono); font-size: var(--s--2); color: var(--mut); margin-top: 2px;
          display: flex; gap: 8px; align-items: center; }
.tag { font-family: var(--mono); font-size: 0.66rem; letter-spacing: .1em; text-transform: uppercase;
       padding: 1px 6px; border-radius: 999px; border: 1px dashed var(--line-2); color: var(--mut); }

/* the thread: prose from the editor, bubbles from you — not boxes with labels */
.thread {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 16px 12px; display: flex; flex-direction: column; gap: 18px;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { .thread { scroll-behavior: auto; } }

.t-you {
  align-self: flex-end; max-width: 88%;
  background: var(--raised); border: 1px solid var(--line-2);
  border-radius: 14px 14px 4px 14px; padding: 8px 12px;
  font-size: var(--s--1); line-height: 1.5; color: var(--text);
  overflow-wrap: anywhere;
}
.t-ed { display: grid; gap: 8px; font-size: var(--s--1); line-height: 1.6; color: var(--text-2);
        overflow-wrap: anywhere; }
.t-ed p { margin: 0; }
.t-ed b { color: var(--text); font-weight: 500; }
.t-who { display: flex; align-items: center; gap: 7px; font-size: var(--s--2) !important;
         color: var(--mut); font-family: var(--mono); letter-spacing: .04em; }
.t-mark { width: 8px; height: 8px; border-radius: 8px; background: var(--amber); transform: rotate(45deg); }
.t-demo { font-family: var(--mono); font-size: 0.66rem; color: var(--mut); border: 1px dashed var(--line-2);
          border-radius: 999px; padding: 0 6px; letter-spacing: .08em; text-transform: uppercase; }

.t-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.t-list li, .t-list p { display: flex; gap: 8px; align-items: flex-start; margin: 0; }
.t-list svg { color: var(--pass); flex: none; margin-top: 5px; }

.t-changes { display: flex; flex-wrap: wrap; gap: 6px; }
.t-ch {
  font-family: var(--mono); font-size: var(--s--2); padding: 3px 8px; border-radius: 8px;
  background: color-mix(in srgb, var(--pass) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--pass) 32%, transparent); color: var(--pass);
}
.t-ch--gone { background: transparent; border-color: var(--line-2); color: var(--mut); text-decoration: line-through; }

/* hooks arrive as cards you can pick, not a bulleted list to copy */
.t-hooks { display: grid; gap: 7px; }
.t-hook {
  text-align: left; padding: 10px 12px; border-radius: 9px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  font-size: var(--s--1); line-height: 1.45;
  transition: border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.t-hook small { display: block; margin-top: 5px; font-family: var(--mono); font-size: 0.66rem;
                color: var(--mut); letter-spacing: .08em; text-transform: uppercase; }
.t-hook:active { transform: scale(.98); }
.t-hook[aria-pressed="true"] { border-color: var(--amber); }
@media (hover: hover) and (pointer: fine) { .t-hook:hover { border-color: var(--line-2); } }

/* the price, before anything is spent */
.t-confirm {
  border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); background: var(--amber-t);
  border-radius: 10px; padding: 11px 12px; display: grid; gap: 9px;
}
.t-confirm-p { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.t-confirm-p b { font-family: var(--mono); font-size: var(--s-0); color: var(--amber); }
.t-confirm-acts { display: flex; gap: 7px; }
.t-confirm[data-settled="1"] .t-confirm-acts { display: none; }

.t-suggest { display: flex; flex-wrap: wrap; gap: 6px; }

.t-typing { display: inline-flex; gap: 4px; padding: 6px 2px; }
.t-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--mut);
              animation: t-dot 1s var(--ease-out) infinite; }
.t-typing i:nth-child(2) { animation-delay: .15s; }
.t-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes t-dot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .t-typing i { animation: none; opacity: .6; } }

/* new turns arrive; they do not blink into existence */
.t-you, .t-ed {
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
  @starting-style { opacity: 0; transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .t-you, .t-ed { transition: opacity 200ms linear; @starting-style { opacity: 0; transform: none; } }
}

/* ── the queue: what one render will apply ── */
.queue {
  flex: none; margin: 0 12px; padding: 10px 11px 11px; border-radius: 10px 10px 0 0;
  border: 1px solid color-mix(in srgb, var(--amber) 34%, transparent); border-bottom: 0;
  background: color-mix(in srgb, var(--amber) 6%, var(--rail));
  display: grid; gap: 8px;
}
.queue-top { display: flex; align-items: center; justify-content: space-between; }
.queue-clear { background: none; border: 0; color: var(--mut); font-size: var(--s--2); cursor: pointer; padding: 2px 4px; }
@media (hover: hover) and (pointer: fine) { .queue-clear:hover { color: var(--text-2); } }
.queue-list { display: flex; flex-wrap: wrap; gap: 5px; max-height: 76px; overflow-y: auto; }
.queue-go { width: 100%; justify-content: center; }

/* ── the box ── */
.ask {
  flex: none; margin: 0 12px; padding: 9px 9px 8px 12px; border-radius: 12px;
  background: var(--bg); border: 1px solid var(--line-2);
  transition: border-color var(--t-fast) var(--ease-out);
}
.queue:not([hidden]) + .ask { border-radius: 0 0 12px 12px; border-top-color: color-mix(in srgb, var(--amber) 34%, transparent); }
.ask:focus-within { border-color: color-mix(in srgb, var(--amber) 55%, var(--line-2)); }
.ask textarea {
  width: 100%; resize: none; min-height: 24px; border: 0; background: none; color: var(--text);
  font: inherit; font-size: var(--s--1); line-height: 1.5; max-height: 140px; padding: 2px 0 6px;
  display: block;
}
.ask textarea:focus { outline: none; }
.ask textarea::placeholder { color: var(--mut); }
.ask-row { display: flex; align-items: flex-end; gap: 8px; }
.ask-chips { flex: 1; min-width: 0; display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; padding-bottom: 1px;
             /* a chip cut to "Ho" reads as broken; a fade reads as "there is more" */
             -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
             mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); padding-right: 18px; }
.ask-chips::-webkit-scrollbar { display: none; }
.ask-chips .chip { flex: none; }
.ask-send {
  flex: none; width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--amber); color: #17130C; display: grid; place-items: center;
  transition: opacity var(--t-fast) var(--ease-out), transform 120ms var(--ease-out);
}
.ask-send:active { transform: scale(.94); }
.ask-send:disabled { opacity: .3; cursor: default; }
.ask-foot { flex: none; text-align: center; font-size: 0.66rem; color: var(--mut); padding: 7px 12px 10px; font-family: var(--mono); }

/* ── the stage: the picture owns the room ── */
.stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
.stage-bar {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; flex: none;
  border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.pop-wrap { position: relative; margin-right: auto; min-width: 0; }
.vpill {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 5px 9px; color: var(--text-2); font-size: var(--s--1); cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out), transform 120ms var(--ease-out);
}
.vpill:active { transform: scale(.97); }
.vpill-v { font-family: var(--mono); font-size: var(--s--2); color: var(--amber); }
.vpill-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vpill svg { color: var(--mut); flex: none; transition: transform var(--t-fast) var(--ease-out); }
.vpill[aria-expanded="true"] svg { transform: rotate(180deg); }

.pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: min(320px, 80vw);
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px; padding: 12px;
  box-shadow: 0 18px 44px rgba(0,0,0,.5); transform-origin: top left;
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
  @starting-style { opacity: 0; transform: scale(.96) translateY(-4px); }
}
.pop .hist { margin-top: 8px; }

.seg { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); }
.seg button {
  border: 0; background: none; color: var(--mut); font-size: var(--s--2); padding: 5px 10px;
  border-radius: 8px; cursor: pointer; transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.seg button[aria-checked="true"] { background: var(--raised); color: var(--text); }

.why {
  background: none; border: 1px solid var(--line); border-radius: 8px; color: var(--text-2);
  font-size: var(--s--2); padding: 6px 10px; cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out), transform 120ms var(--ease-out);
}
.why:active { transform: scale(.97); }
.why span { font-family: var(--mono); color: var(--mut); margin-left: 4px; }
.why[aria-expanded="true"] { border-color: var(--amber); color: var(--text); }
@media (hover: hover) and (pointer: fine) {
  .vpill:hover, .why:hover { border-color: var(--line-2); }
  .seg button:hover { color: var(--text-2); }
}

/* the picture is absolutely placed inside a box of definite height: max-height:100%
   on a flex child does not resolve, which is how an earlier version of this page
   let the player cover the timeline by 295px. */
.stage-body { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.studio .hero-stage {
  position: absolute; top: 18px; bottom: 18px; left: 50%; transform: translateX(-50%);
  height: auto; max-height: none; width: auto; aspect-ratio: 9 / 16; margin: 0;
  max-width: calc(100% - 36px);
}
.cut-tag {
  position: absolute; top: 10px; left: 10px; font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px; border-radius: 8px;
  background: rgba(10,9,8,.62); color: #F1EDE5; backdrop-filter: blur(6px); pointer-events: none;
}
.cut-tag[data-cut="before"] { color: var(--amber); }

.sheet {
  position: absolute; top: 12px; right: 12px; bottom: 12px; width: min(340px, calc(100% - 24px));
  z-index: 20; overflow-y: auto; background: var(--panel); border: 1px solid var(--line-2);
  border-radius: 12px; padding: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.55);
  transform-origin: top right;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  @starting-style { opacity: 0; transform: translateX(10px); }
}
.sheet-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sheet-x { background: none; border: 0; color: var(--mut); font-size: 1.2rem; line-height: 1; cursor: pointer;
           width: 30px; height: 30px; border-radius: 8px; }
@media (hover: hover) and (pointer: fine) { .sheet-x:hover { color: var(--text); background: var(--panel-2); } }
.t-list--why { gap: 10px; font-size: var(--s--1); color: var(--text-2); line-height: 1.5; }
.t-list--why b { color: var(--text); font-weight: 500; }

.stage-foot {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; flex: none;
  border-top: 1px solid var(--line); flex-wrap: wrap;
}
.stage-foot .hero-meta { justify-content: flex-start; margin-right: auto; gap: 12px; }
.stage-foot .hero-acts { justify-content: flex-end; }

/* ── below 1000px the two cannot share a screen: two views, video first ── */
@media (max-width: 999px) {
  .studio { display: block; height: auto; min-height: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
  .studio-switch {
    display: flex; gap: 2px; padding: 3px; margin: 0 0 12px; border-radius: 10px;
    background: var(--panel); border: 1px solid var(--line);
    position: sticky; top: 8px; z-index: 40;
  }
  .studio-switch button {
    flex: 1; border: 0; background: none; color: var(--mut); padding: 9px 10px; min-height: 40px;
    border-radius: 8px; font-size: var(--s--1); cursor: pointer; display: inline-flex; justify-content: center; align-items: center; gap: 7px;
    transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
  }
  .studio-switch button:active { transform: scale(.98); }
  .studio-switch button[aria-selected="true"] { background: var(--raised); color: var(--text); }
  .sw-n { font-family: var(--mono); font-size: 0.66rem; min-width: 18px; height: 18px; padding: 0 5px;
          border-radius: 9px; background: var(--amber); color: #17130C; display: inline-grid; place-items: center; }

  .studio[data-view="video"] .rail { display: none; }
  .studio[data-view="chat"] .stage { display: none; }

  .rail { border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
          height: calc(100dvh - 54px - 64px - 22px - 66px - 16px); min-height: 440px; }
  .stage { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
  .stage-body { flex: none; overflow: visible; padding: 16px 0; }
  .studio .hero-stage {
    position: relative; top: auto; bottom: auto; left: auto; transform: none;
    height: min(62vh, 640px); width: auto; margin: 0 auto; max-width: calc(100% - 32px);
  }
  .sheet { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 72dvh;
           border-radius: 16px 16px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 120;
           @starting-style { opacity: 0; transform: translateY(24px); } }
  .stage-foot { justify-content: center; }
  .stage-foot .hero-meta { margin-right: 0; justify-content: center; width: 100%; }
  .stage-foot .hero-acts { width: 100%; justify-content: center; }
  .stage-foot .hero-acts .btn { flex: 1; justify-content: center; max-width: 220px; }
}
@media (min-width: 901px) and (max-width: 999px) {
  .rail { height: calc(100dvh - 54px - 22px - 66px - 20px); }
}
@media (max-width: 420px) {
  .stage-bar { gap: 8px; padding: 9px 10px; }
  .vpill-t { max-width: 110px; }
  .why { padding: 6px 8px; }
}

/* the way in from the empty engine to a finished result. Without it the public
   demo could never reach the studio: the old state switcher was gone, and the only
   other route was a real job finishing, which needs the server. */
.engine-example {
  display: inline-flex; align-items: center; gap: 8px; margin: 18px auto 0; align-self: center;
  background: none; border: 0; color: var(--text-2); font-size: var(--s--1); cursor: pointer;
  padding: 8px 12px; border-radius: 8px;
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), transform 120ms var(--ease-out);
}
.engine-example:active { transform: scale(.97); }
.engine-example svg { color: var(--amber); transition: transform var(--t-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .engine-example:hover { color: var(--text); background: var(--panel); }
  .engine-example:hover svg { transform: translateX(2px); }
}
.sheet .card[data-live-result] { margin-bottom: 12px; }

/* ═══════════════════════════════════════════════════ THE REAL EDITOR ═══════
   The timeline below is drawn from an edit list in js/editor.js. Rules here only
   add what the old static mock-up never needed: scroll, a ruler, trim handles,
   selection, a caption overlay that matches the export, and a phone layout. */

.ed-tool { cursor: pointer; background: none; border: 0; transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
.ed-tool:active { transform: scale(.98); }
.ed-tool .kk { display: inline-flex; gap: 2px; }
.ed-tool kbd, .keyrow kbd {
  font-family: var(--mono); font-size: 0.66rem; color: var(--mut); padding: 1px 5px; min-width: 16px; text-align: center;
  border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg); line-height: 1.5;
}
.ed-auto-wrap summary { cursor: pointer; list-style: none; padding: 4px 6px 6px; }
.ed-auto-wrap summary::-webkit-details-marker { display: none; }
.ed-auto-wrap summary::before { content: "\25B8"; display: inline-block; margin-right: 6px; transition: transform var(--t-fast) var(--ease-out); }
.ed-auto-wrap[open] summary::before { transform: rotate(90deg); }
.ed-auto { display: flex; align-items: center; gap: 6px; padding: 4px 8px; font-size: var(--s--2); color: var(--mut); cursor: help; }
.ed-auto .t { flex: 1; }

.ed-src {
  position: absolute; top: 10px; left: 12px; z-index: 4; pointer-events: none;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: .06em; padding: 3px 7px; border-radius: 8px;
  background: rgba(10,9,8,.62); color: var(--text-2); max-width: calc(100% - 24px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ed-drop {
  position: absolute; inset: 10px; z-index: 6; display: grid; place-items: center;
  border: 2px dashed var(--amber); border-radius: 10px; background: rgba(16,15,14,.72); color: var(--text);
}
.ed-capov { position: absolute; z-index: 3; pointer-events: none; }
.ed-captext {
  position: absolute; left: 6%; right: 6%; text-align: center; color: #fff; font-family: 'TikTok Sans', var(--display);
  font-weight: 800; line-height: 1.12; letter-spacing: -.01em; overflow-wrap: anywhere;
  -webkit-text-stroke: .06em rgba(0,0,0,.85); paint-order: stroke fill;
  text-shadow: 0 .04em .1em rgba(0,0,0,.35);
}
.ed-captext[data-pos="top"] { top: 12%; }
.ed-captext[data-pos="middle"] { top: 50%; transform: translateY(-50%); }
.ed-captext[data-pos="bottom"] { bottom: 20%; }

.ed-insp .ed-ih { display: block; margin-bottom: 12px; }
.ed-insp .ed-row { gap: 6px; }
.ed-insp .ed-in { width: 100%; color: var(--text); font: inherit; font-size: var(--s--1); }
.ed-insp textarea.ed-in { resize: vertical; min-height: 52px; line-height: 1.4; }
.ed-insp .ed-num { width: 88px; font-family: var(--mono); }
.ed-insp .u { font-size: var(--s--2); color: var(--mut); }
.ed-insp .ed-in:focus { outline: none; border-color: color-mix(in srgb, var(--amber) 60%, var(--line-2)); }
.ed-val { font-size: var(--s--1); color: var(--text-2); }
.ed-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ed-btns { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.ed-danger { color: var(--live); }
.ed-insp .seg button { cursor: pointer; }
.ed-export { margin-top: 14px; padding: 11px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--pass) 35%, transparent);
  background: color-mix(in srgb, var(--pass) 8%, var(--rail)); display: grid; gap: 6px; }
.ed-export p { margin: 0; font-size: var(--s--1); color: var(--text-2); }
.ed-export.is-busy { border-color: color-mix(in srgb, var(--amber) 40%, transparent); background: var(--amber-t); }
.ed-export .btn { text-decoration: none; }

.tl-bar { flex-wrap: wrap; }
.tl-btn { cursor: pointer; color: var(--text); transition: transform 120ms var(--ease-out); }
.tl-btn:active { transform: scale(.94); }
.tl-ic { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: none; color: var(--text-2);
  display: grid; place-items: center; cursor: pointer; transition: transform 120ms var(--ease-out), opacity var(--t-fast) var(--ease-out); }
.tl-ic:active { transform: scale(.94); }
.tl-ic:disabled { opacity: .35; cursor: default; }
.tl-zl { font-family: var(--mono); font-size: 0.66rem; color: var(--mut); letter-spacing: .08em; text-transform: uppercase; }
.tl-zoomr { width: 110px; }

.tl-scroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; padding-bottom: 4px; }
.tl-inner { position: relative; min-width: 100%; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.tl-ruler { position: relative; height: 18px; cursor: ew-resize; }
.tl-tick { position: absolute; top: 0; height: 18px; border-left: 1px solid var(--line-2); padding-left: 3px;
  font-family: var(--mono); font-size: 0.66rem; color: var(--mut); line-height: 12px; }
.tracks { cursor: ew-resize; }
.track-b { overflow: visible; min-width: 20px; }
.track-n { position: sticky; left: 0; z-index: 4; background: var(--panel); }
.playhead { left: 82px; pointer-events: none; transition: none; z-index: 5; }
.tl-mark { position: absolute; top: -18px; bottom: 0; background: color-mix(in srgb, var(--amber) 16%, transparent);
  border-left: 1px solid var(--amber); border-right: 1px solid var(--amber); pointer-events: none; z-index: 2; }

.clip { cursor: grab; user-select: none; padding: 0 10px; }
.clip-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; font-family: var(--mono); font-size: 0.66rem; }
.clip--c .clip-t { font-family: var(--sans); font-size: var(--s--2); }
.clip.is-sel { outline: 2px solid var(--text); outline-offset: -1px; z-index: 2; }
.clip--a.is-muted { background: repeating-linear-gradient(45deg, #2A3436 0 6px, #232B2D 6px 12px); color: var(--mut); cursor: default; }
.clip--a { cursor: default; }
.clip + .clip--v { box-shadow: -1px 0 0 var(--bg); }
.clip-h { position: absolute; top: 0; bottom: 0; width: 9px; cursor: ew-resize; z-index: 1; }
.clip-h--l { left: 0; border-radius: 3px 0 0 3px; }
.clip-h--r { right: 0; border-radius: 0 3px 3px 0; }
.clip.is-sel .clip-h { background: rgba(255,255,255,.55); }
@media (hover: hover) and (pointer: fine) {
  .clip-h:hover { background: rgba(255,255,255,.4); }
  .tl-ic:not(:disabled):hover, .tl-btn:hover { border-color: var(--line-2); }
}

/* phone: picture first, then the timeline you can thumb, then everything else */
@media (max-width: 999px) {
  .editor { display: flex; flex-direction: column; height: auto; }
  .ed-top { display: flex; flex-direction: column; }
  .ed-stage { order: -1; height: min(52vh, 460px); aspect-ratio: auto; max-height: none; }
  .tl { order: 0; }
  .ed-insp { order: 1; }
  .ed-tools { order: 2; max-height: none; }
  .editor > .tl { position: relative; }
  .tl-free { display: none; }
  .tl-zoomr { width: 80px; }
  .track-b { height: 44px; }                 /* a thumb needs more than 34px */
  .clip-h { width: 16px; }
}
/* The timeline lives outside .ed-top, so ordering .ed-top's children could never put
   it between the picture and the inspector — measured on a 390px phone, the timeline
   started 1,260px down, under the inspector and all 115 automatic tools. With
   display:contents the stage, timeline, inspector and tools become siblings and
   order one list. */
@media (max-width: 999px) {
  .editor .ed-top { display: contents; }
  .editor .ed-stage { order: 0; }
  .editor .tl { order: 1; }
  .editor .ed-insp { order: 2; }
  .editor .ed-tools { order: 3; }
}

/* ═══════════════════════════════════════ CONNECT · PRICING · STYLES (16 Sep) ═══ */
.conn-status {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font-size: var(--s--1); color: var(--text-2);
}
.conn-status [data-conn-line] { flex: 1; min-width: 220px; }
.conn-status /* ⚠️ .92em COMPOUNDS. Inside a 10.6px parent this renders at 9.75px, under the floor — a
   relative size cannot respect an absolute minimum on its own. max() keeps the intent (mono
   reads large, so it is set slightly smaller) without ever going below the floor. */
code, .conn-c code { font-family: var(--mono); font-size: max(.66rem, .92em); color: var(--text); }
.conn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mut); flex: none; }
.conn-status[data-state="on"] .conn-dot { background: var(--pass); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pass) 22%, transparent); }
.conn-status[data-state="off"] .conn-dot { background: var(--live); }
.conn-status[data-state="checking"] .conn-dot { background: var(--amber); }
.conn-tabs { flex: 1; max-width: 460px; }
.conn-tabs button { white-space: nowrap; cursor: pointer; }
.keyrow2 { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.keyrow2:last-child { border-bottom: 0; }
.keyrow2 > div { flex: 1; min-width: 0; display: grid; gap: 1px; }
.keyrow2 b { font-size: var(--s--1); font-weight: 500; color: var(--text); }
.keyrow2 .mono { font-family: var(--mono); font-size: var(--s--2); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; }
.keyrow2.is-revoked { opacity: .5; }
.key--new { border-color: color-mix(in srgb, var(--pass) 45%, transparent); margin-bottom: 6px; }
.key--new span { color: var(--text); }

.pricing-live {
  margin: -6px 0 18px; padding: 10px 13px; border-radius: 9px; font-size: var(--s--1); color: var(--text-2);
  border: 1px dashed color-mix(in srgb, var(--amber) 45%, var(--line-2)); background: var(--amber-t); max-width: 74ch;
}
.pricing-live b { color: var(--text); font-weight: 500; }
.soon { font-family: var(--mono); font-size: 0.66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mut);
  border: 1px dashed var(--line-2); border-radius: 999px; padding: 0 6px; margin-left: 4px; white-space: nowrap; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--amber); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

.style-filter { display: inline-flex; flex-wrap: wrap; margin: 0 0 16px; max-width: 100%; }
.style-filter button { cursor: pointer; white-space: nowrap; }
.style-filter .n { font-family: var(--mono); font-size: 0.66rem; color: var(--mut); margin-left: 3px; }
.style-what { margin: 0 0 8px; font-size: var(--s--1); color: var(--text-2); line-height: 1.55; }
/* what a format needs from you, stated on the card: a format fails for a reason the card can prevent */
.style-needs { margin: 0 0 8px; font-size: var(--s--2, .78rem); color: var(--text-3, var(--text-2)); line-height: 1.5; }
.style-needs::before { content: ''; display: inline-block; width: 14px; height: 1px; background: currentColor;
  vertical-align: middle; margin-right: 8px; opacity: .55; }
.style[data-status="planned"] { opacity: .78; }
.style .style-f { display: flex; align-items: center; gap: 8px; }
.style .style-t { gap: 8px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════ ONE PLACE (16 Sep, 22:10) ═══
   Owner: "why does the scene change … Lovable is sick". The start box and the chat box
   share a view-transition-name, so the box you typed into visibly becomes the chat.
   The stage slides in beside it. Durations follow the house rule (UI under 300ms,
   custom ease-out); reduced motion keeps a fade and drops the movement. */
.engine-box { view-transition-name: pl-composer; }
.studio .ask { view-transition-name: pl-composer; }
.engine-h { view-transition-name: pl-heading; }
.studio .stage { view-transition-name: pl-stage; }
.studio .rail-head { view-transition-name: pl-railhead; }

::view-transition-group(pl-composer) { animation-duration: 280ms; animation-timing-function: cubic-bezier(0.23,1,0.32,1); }
::view-transition-old(pl-composer), ::view-transition-new(pl-composer) { animation-duration: 180ms; height: 100%; object-fit: cover; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; animation-timing-function: cubic-bezier(0.23,1,0.32,1); }
::view-transition-old(pl-heading) { animation: pl-fade-up 180ms cubic-bezier(0.23,1,0.32,1) both; }
::view-transition-new(pl-stage) { animation: pl-stage-in 280ms cubic-bezier(0.23,1,0.32,1) both; }
::view-transition-old(pl-stage) { animation: pl-fade 160ms linear both; }
::view-transition-new(pl-railhead) { animation: pl-fade 220ms 60ms cubic-bezier(0.23,1,0.32,1) both; }
@keyframes pl-fade-up { to { opacity: 0; transform: translateY(-10px); } }
@keyframes pl-stage-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes pl-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 120ms !important; }
  ::view-transition-new(pl-stage) { animation-name: pl-fade !important; }
  ::view-transition-old(pl-heading) { animation-name: pl-fade !important; animation-direction: reverse !important; }
}

/* style picker on the start box */
.engine-style { position: relative; }
.engine-stylebtn { cursor: pointer; }
.engine-stylebtn[data-set="1"] { border-color: var(--amber); color: var(--text); }
.engine-stylepop { left: 0; top: auto; bottom: calc(100% + 8px); width: min(330px, 86vw); text-align: left; transform-origin: bottom left; display: grid; gap: 2px; }
.engine-stylepop[hidden] { display: none !important; }
.engine-stylepop [data-pick-style] {
  display: grid; gap: 1px; text-align: left; padding: 8px 9px; border-radius: 8px; background: none; border: 1px solid transparent;
  color: var(--text-2); cursor: pointer; transition: background var(--t-fast) var(--ease-out);
}
.engine-stylepop [data-pick-style] b { font-weight: 500; color: var(--text); font-size: var(--s--1); }
.engine-stylepop [data-pick-style] span { font-size: var(--s--2); color: var(--mut); }
.engine-stylepop [aria-checked="true"] { border-color: color-mix(in srgb, var(--amber) 45%, transparent); background: var(--amber-t); }
@media (hover: hover) and (pointer: fine) { .engine-stylepop [data-pick-style]:hover { background: var(--panel-2); } }
.engine-allstyles { margin: 6px 9px 2px; font-size: var(--s--2); text-align: left; }

/* the empty stage of a brand-new video, and its progress */
.stage-empty, .stage-progress { position: absolute; inset: 18px; display: grid; place-content: center; justify-items: center; gap: 14px; }
/* ⚠️ THE ONE THING THEY HAVE TO DO NEXT WAS A 360px CARD ADRIFT IN 970px OF EMPTY STAGE.
   It is now the SHAPE OF THE VIDEO THEY ASKED FOR — the same 9:16 the finished cut appears in,
   in the same place — so the empty stage already shows them what is coming instead of reading as
   a page that failed to load. It also makes the drop target about four times the area. */
.stage-drop {
  aspect-ratio: 9 / 16; height: min(64vh, 560px); width: auto; max-width: 100%;
  padding: 34px 22px; border-radius: 16px; text-align: center; display: grid;
  justify-items: center; align-content: center; gap: 6px;
  border: 1.5px dashed var(--line-2); background: var(--panel); color: var(--text-2); cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), transform 120ms var(--ease-out);
}
.stage-drop svg { color: var(--amber); margin-bottom: 4px; }
.stage-drop:active { transform: scale(.985); }
.stage-drop[data-over="1"] { border-color: var(--amber); background: var(--panel-2); }
.stage-drop:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .stage-drop:hover { border-color: var(--amber); } }
.stage-drop-t { margin: 0; font-size: var(--s-0); color: var(--text); font-weight: 500; }
.stage-drop-s { margin: 0 0 8px; font-size: var(--s--1); max-width: 30ch; }
.stage-eg { font-size: var(--s--1); }
.stage-progress video { height: min(46vh, 420px); aspect-ratio: 9/16; border-radius: 12px; background: #000; object-fit: cover; opacity: .55; }
.stage-progress-b { width: min(300px, 90%); display: grid; gap: 6px; text-align: center; }
.stage-progress-b p { margin: 0; font-family: var(--mono); font-size: var(--s--2); color: var(--text-2); text-transform: capitalize; }
.stage-progress .prog-bar i { transition: width 400ms cubic-bezier(0.23,1,0.32,1); }
.t-stages { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.t-stages li { font-family: var(--mono); font-size: 0.66rem; color: var(--mut); padding: 1px 6px; border: 1px solid var(--line); border-radius: 999px; }
.t-stages li:last-child { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
@media (max-width: 999px) {
  .stage-empty, .stage-progress { position: static; padding: 22px 14px; }
}

/* ═════════════════════════════════════════ WORKSPACE: planner · brand · labels ═══ */
.sgroup { display: flex; align-items: center; gap: 6px; }
.credits .lbl { display: flex; align-items: center; gap: 6px; }
.plan-form { margin: 0 0 20px; max-width: 760px; }
.plan-about { width: 100%; resize: vertical; min-height: 70px; line-height: 1.5; color: var(--text); font: inherit; font-size: var(--s--1); margin-top: 6px; }
.plan-about:focus, .brand-grid .ed-in:focus { outline: none; border-color: color-mix(in srgb, var(--amber) 60%, var(--line-2)); }
.plan-row { display: flex; align-items: center; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.plan-row .note { flex: 1; min-width: 200px; }
.plan-head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.day { display: flex; flex-direction: column; }
.day .day-go { margin-top: auto; align-self: flex-start; }
.day .day-f { margin: 8px 0 12px; }

.brand-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.used { font-family: var(--mono); font-size: 0.66rem; letter-spacing: .04em; color: var(--mut); margin-left: auto; text-align: right; }
.used--on { color: var(--pass); }
.brand-grid .card-hd { gap: 8px; flex-wrap: wrap; }
.brand-grid .ed-in { width: 100%; color: var(--text); font: inherit; font-size: var(--s--1); }
.brand-grid textarea.ed-in { resize: vertical; min-height: 64px; line-height: 1.45; }
.brand-grid .ed-row { display: flex; gap: 8px; }
.ed-static { color: var(--text-2); }
.brand-colours { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.bcol { display: grid; gap: 4px; justify-items: start; cursor: pointer; }
.bcol input[type="color"] { width: 100%; height: 54px; border: 1px solid var(--line-2); border-radius: 8px; background: none; padding: 0; cursor: pointer; }
.bcol input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.bcol input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 8px; }
.bcol span { font-family: var(--mono); font-size: 0.66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.bcol code { font-family: var(--mono); font-size: var(--s--2); color: var(--text-2); }
.bcol:focus-within input { outline: 2px solid var(--amber); outline-offset: 2px; }

/* where every line of a news explainer came from */
.t-sources { margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.t-sources summary { cursor: pointer; padding: 9px 11px; font-size: var(--s--1); color: var(--text); list-style: none; }
.t-sources summary::-webkit-details-marker { display: none; }
.t-sources summary::before { content: "\25B8"; display: inline-block; margin-right: 7px; color: var(--amber); transition: transform var(--t-fast) var(--ease-out); }
.t-sources[open] summary::before { transform: rotate(90deg); }
.t-sources > p, .t-src { margin: 0 11px 10px; }
.t-src-h { font-size: var(--s--2); color: var(--mut); }
.t-src-h a { color: var(--text-2); }
.t-src { padding-top: 9px; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.t-src p { margin: 0; }
.t-src-card { font-weight: 600; color: var(--text); font-size: var(--s--1); }
.t-src-say { color: var(--text-2); font-size: var(--s--1); }
.t-src-from { font-size: var(--s--2); color: var(--mut); line-height: 1.5; border-left: 2px solid var(--amber); padding-left: 8px; }
.t-src-from span { display: block; font-family: var(--mono); font-size: 0.66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }

/* ═══════════════════════════════════════════════════════════ ACCOUNTS ═══ */
html.gated { overflow: hidden; }
.gate {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; overflow-y: auto;
  padding: 24px 16px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px);
}
.gate-card {
  width: min(520px, 100%); background: var(--panel); border: 1px solid var(--line-2); border-radius: 16px;
  padding: 26px 24px 22px; box-shadow: 0 30px 80px rgba(0,0,0,.55);
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
  @starting-style { opacity: 0; transform: translateY(8px) scale(.98); }
}
@media (prefers-reduced-motion: reduce) { .gate-card { @starting-style { transform: none; } } }
.gate-brand { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); margin-bottom: 18px; }
.gate-mark { font-family: var(--mono); color: var(--amber); }
.gate-h { font-size: var(--s-2); letter-spacing: -.02em; line-height: 1.15; margin: 0 0 14px; text-wrap: balance; }
.gate-sub { color: var(--text-2); font-size: var(--s--1); margin: -6px 0 16px; }
.gate-tabs { margin-bottom: 16px; }
.gate-tabs button, .gate-card .seg button { cursor: pointer; }
.gate-form { display: grid; gap: 6px; }
.gate-card .ed-in { width: 100%; color: var(--text); font: inherit; font-size: var(--s-0); padding: 10px 12px; margin-bottom: 8px; }
.gate-card .ed-in:focus { outline: none; border-color: color-mix(in srgb, var(--amber) 60%, var(--line-2)); }
.gate-card textarea.ed-in { resize: vertical; line-height: 1.45; font-size: var(--s--1); }
.gate-hint { margin: -4px 0 6px; font-size: var(--s--2); color: var(--mut); }
.gate-plans { border: 0; padding: 0; margin: 6px 0 4px; display: grid; gap: 6px; }
.gate-plans legend { margin-bottom: 6px; }
.gplan {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
  transition: border-color var(--t-fast) var(--ease-out);
}
.gplan input { accent-color: var(--amber); margin: 0; }
.gplan b { font-weight: 500; color: var(--text); font-size: var(--s--1); }
.gplan span { font-family: var(--mono); font-size: var(--s--2); color: var(--mut); }
.gplan:has(input:checked) { border-color: var(--amber); background: var(--amber-t); }
.gplan:focus-within { outline: 2px solid color-mix(in srgb, var(--amber) 60%, transparent); outline-offset: 1px; }
.gate-test { margin: 2px 0 0; font-size: var(--s--2); color: var(--text-2); }
/* ⚠️ A REAL CHECKBOX, ticked by a real person. The server records who agreed to which version of the
   terms and when, and that record is only worth keeping if a human actually did it — sending
   accept_terms from code would record an agreement nobody made. */
.gate-terms { display: flex; gap: 9px; align-items: flex-start; margin: 14px 0 2px;
  font-size: var(--s--1); line-height: 1.45; color: var(--text-2); cursor: pointer; }
.gate-terms input { margin: 2px 0 0; flex: none; width: 15px; height: 15px; accent-color: var(--amber);
  transition: transform .14s cubic-bezier(.23, 1, .32, 1); }
.gate-terms input:active { transform: scale(.94); }
.gate-terms:focus-within { outline: 2px solid color-mix(in srgb, var(--amber) 60%, transparent);
  outline-offset: 3px; border-radius: 8px; }
.gate-terms a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.gate-err { margin: 4px 0; font-size: var(--s--1); color: var(--live); }
/* ⚠️ a link, not a button, in everything but the tag — it sits under a field and must not compete with
   the primary action next to it. Left-aligned to the form, and it keeps a 44px target on touch. */
.gate-forgot {
  justify-self: start; margin: -2px 0 6px; padding: 8px 0; min-height: 34px;
  background: none; border: 0; cursor: pointer; font: inherit; font-size: var(--s--2);
  color: var(--text-2); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--text-2) 40%, transparent);
  transition: color var(--t-fast) var(--ease-out), text-decoration-color var(--t-fast) var(--ease-out);
}
.gate-forgot:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .gate-forgot:hover { color: var(--text); text-decoration-color: currentColor; }
}
.gate-forgot:focus-visible { outline: 2px solid color-mix(in srgb, var(--amber) 60%, transparent); outline-offset: 2px; border-radius: 8px; }
/* the confirmation after a reset is requested — deliberately the same weight as the error it replaces */
.gate-done { margin: 4px 0; font-size: var(--s--1); color: var(--text-2); }
.gate-go { width: 100%; justify-content: center; margin-top: 8px; min-height: 44px; }
.gate-step { margin-bottom: 8px; }
.goals { display: grid; gap: 8px; margin-bottom: 8px; }
.goal {
  display: grid; gap: 2px; text-align: left; padding: 12px 14px; border-radius: 11px; cursor: pointer;
  background: var(--bg); border: 1px solid var(--line); color: var(--text-2);
  transition: border-color var(--t-fast) var(--ease-out), transform 120ms var(--ease-out);
}
.goal:active { transform: scale(.985); }
.goal b { font-weight: 500; color: var(--text); font-size: var(--s-0); }
.goal span { font-size: var(--s--2); color: var(--mut); }
/* ⚠️ FOCUS MUST NOT LOOK LIKE SELECTION, and it did. `.goal` had no :focus-visible rule, so
   it took the browser's default ring — a heavy dark outline that, on this light card, reads
   exactly like a chosen option. After signing in, the first option carries focus, so a person
   sees it ringed, believes they have picked, and finds Continue dead. Measured on the live
   app: all five options had identical borders and aria-checked="false" while the first looked
   chosen. Nothing was broken except the signal.
   Focus is now a ring OUTSIDE the button; selection is a filled state with a mark in it. One
   is about where the keyboard is, the other about what you decided, and they no longer rhyme. */
.goal:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--amber) 70%, transparent);
  outline-offset: 3px;
}
.goal[aria-checked="true"] {
  border-color: var(--amber);
  background: var(--amber-t);
  /* the tick: a decision leaves a mark, not just a tint */
  position: relative;
  padding-right: 40px;
}
.goal[aria-checked="true"]::after {
  content: "";
  position: absolute; right: 15px; top: 50%;
  width: 13px; height: 7px; margin-top: -6px;
  border-left: 2.5px solid var(--amber); border-bottom: 2.5px solid var(--amber);
  transform: rotate(-45deg);
}
@media (hover: hover) and (pointer: fine) { .goal:hover, .gplan:hover { border-color: var(--line-2); } }
.gate-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.gate-row [data-ob-next] { margin-left: auto; min-height: 42px; }
.engine-way.is-suggested { border-color: var(--amber); color: var(--text); background: var(--amber-t); }
.acct-plan { width: auto; padding: 4px 8px; font: inherit; font-size: var(--s--1); color: var(--text); }
.t-art { margin: 0; display: grid; gap: 2px; font-size: var(--s--1); }
.t-art b { color: var(--text); font-weight: 500; }
.t-art span { font-family: var(--mono); font-size: var(--s--2); color: var(--mut); }
.t-warn { margin: 0; font-size: var(--s--2); color: var(--text); border-left: 2px solid var(--live); padding-left: 8px; }

/* ── Autopilot (17 Sep) ─────────────────────────────────────────────── */
.ap-flow { list-style: none; counter-reset: ap; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; padding: 0; margin: 0 0 18px; }
.ap-flow li { counter-increment: ap; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; background: var(--panel); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ap-flow li::before { content: counter(ap); font-family: var(--mono); font-size: var(--s--2); color: var(--amber); }
.ap-flow b { font-size: var(--s--1); }
.ap-flow span, .ap-brand-row .mut, .ap-item-meta .mut { color: var(--mut); font-size: var(--s--2); line-height: 1.4; }
.ap-off { max-width: 760px; }
.ap-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 12px; }
.ap-stat { border: 1px solid var(--line); border-radius: var(--r); padding: 9px 11px; display: flex; flex-direction: column; gap: 2px; }
.ap-stat b { font-size: var(--s-1); font-variant-numeric: tabular-nums; }
.ap-alert { border: 1px solid color-mix(in srgb, var(--live) 45%, transparent); background: color-mix(in srgb, var(--live) 10%, transparent); border-radius: var(--r); padding: 9px 12px; margin-bottom: 8px; font-size: var(--s--1); }
.ap-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 860px) { .ap-cols { grid-template-columns: minmax(0, 1fr); } }
.ap-queue { display: flex; flex-direction: column; gap: 10px; }
.ap-item { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.ap-item-top { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.ap-media { width: 96px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 8px; background: var(--raised); flex: none; }
img.ap-media { aspect-ratio: 4 / 5; }
.ap-media--wait { display: grid; place-items: center; color: var(--mut); font-size: var(--s--2); }
.ap-item-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; align-items: flex-start; }
.ap-brand { font-size: var(--s-0); }
.ap-story { color: var(--text); font-size: var(--s--1); line-height: 1.35; overflow-wrap: anywhere; }
.ap-caps summary { cursor: pointer; font-size: var(--s--1); color: var(--mut); padding: 4px 0; }
.ap-cap { margin-top: 8px; }
.ap-cap-h { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; font-size: var(--s--1); }
.ap-cap p { margin: 0; white-space: pre-wrap; font-size: var(--s--1); color: var(--mut); }
.ap-cap textarea.ed-in { width: 100%; resize: vertical; min-height: 70px; line-height: 1.45; color: var(--text); font: inherit; font-size: var(--s--1); white-space: pre-wrap; }
.ap-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.ap-acts .btn { min-height: 40px; }
.ap-brands { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ap-brand-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: var(--r); padding: 9px 11px; }
.ap-brand-row > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ap-switch { display: flex; gap: 6px; align-items: center; font-size: var(--s--2); color: var(--mut); flex: none; }
.ap-new .card-b { display: flex; flex-direction: column; gap: 6px; }
.ap-new .ed-in { width: 100%; color: var(--text); font: inherit; font-size: var(--s--1); padding: 8px 10px; }
.ap-checks { border: 0; padding: 0; margin: 4px 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ap-checks legend { width: 100%; margin-bottom: 4px; }
.ap-checks label { display: flex; gap: 6px; align-items: center; font-size: var(--s--1); }
.ap-err { color: var(--live); font-size: var(--s--1); margin: 0; }
.ap-new .btn--go { align-self: flex-start; margin-top: 4px; }
.ap-checks input, .ap-switch input { accent-color: var(--amber); width: 16px; height: 16px; }
.acct-invite { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.acct-invite-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.acct-invite-row code { font-family: var(--mono); font-size: var(--s--2); color: var(--amber); overflow-wrap: anywhere; min-width: 0; flex: 1; }

/* ── Your accounts + Post dialog (17 Sep) ───────────────────────────── */
.acc { margin-bottom: 14px; }
.acc .card-b { display: flex; flex-direction: column; gap: 12px; }
.acc-head { display: flex; flex-direction: column; gap: 2px; }
.acc-head h3 { margin: 0; font-size: var(--s-0); }
.acc-head .mut, .acc-who .mut { color: var(--mut); font-size: var(--s--2); }
.acc-list { display: flex; flex-direction: column; gap: 8px; }
.acc-row { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: var(--r); padding: 9px 11px; }
.acc-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.acc-note { opacity: .85; }
.acc-connect { display: flex; flex-wrap: wrap; gap: 8px; }
.acc-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; }
.acc-btn[disabled] { opacity: .45; }
.acc-new { margin: 0; }
.acc-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--mut); }
.acc-dot[data-p="tiktok"] { background: #25F4EE; box-shadow: 2px 0 0 #FE2C55; }
.acc-dot[data-p="instagram"] { background: #E1306C; }
.acc-dot[data-p="facebook"] { background: #1877F2; }
.acc-dot[data-p="youtube"] { background: #FF0033; }
.acc-dot[data-p="linkedin"] { background: #0A66C2; }
.post-dlg { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); color: var(--text); padding: 0; }
.post-dlg::backdrop { background: rgba(8, 7, 6, .62); }
.post-dlg[open] { animation: postIn 200ms cubic-bezier(.23,1,.32,1); }
@keyframes postIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .post-dlg[open] { animation: none; } }
.post-body { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.post-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.post-top h3 { margin: 0; font-size: var(--s-1); }
.post-accounts { display: flex; flex-direction: column; gap: 6px; }
.post-acc { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: var(--r); padding: 9px 11px; cursor: pointer; }
.post-acc input, .post-tt input { accent-color: var(--amber); width: 16px; height: 16px; }
.post-caps { display: flex; flex-direction: column; gap: 10px; }
.post-cap { display: flex; flex-direction: column; gap: 4px; font-size: var(--s--1); }
.post-cap textarea { width: 100%; resize: vertical; min-height: 84px; color: var(--text); font: inherit; font-size: var(--s--1); line-height: 1.45; }
.post-tt { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--s--1); }
.post-tt label { display: flex; gap: 8px; align-items: flex-start; }
.post-err { color: var(--live); font-size: var(--s--1); margin: 0; }
.post-go { display: flex; justify-content: flex-end; }
.post-go .btn { min-height: 42px; min-width: 120px; }
.post-results { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.post-results li { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: var(--r); padding: 9px 11px; font-size: var(--s--1); flex-wrap: wrap; }
.post-results li .mut { color: var(--mut); flex-basis: 100%; padding-left: 20px; }
.post-results li[data-ok="1"] .mut { color: var(--pass); }
.post-results li[data-ok="0"] .mut { color: var(--live); }
.linkbtn { background: none; border: 0; color: var(--amber); padding: 0; font: inherit; cursor: pointer; text-decoration: underline; }

/* live job feed (17 Sep): lines stack like a chat that moves; the newest line glows, older ones settle */
.t-stages:has(.t-when) { flex-direction: column; flex-wrap: nowrap; gap: 3px; margin-top: 6px; }
.t-stages li:has(.t-when) { display: grid; grid-template-columns: 2.6em 1fr; gap: 8px; align-items: baseline; border: 0; border-radius: 0;
  padding: 0; font-size: 0.66rem; color: var(--mut); animation: t-feed-in 220ms cubic-bezier(0.23,1,0.32,1) both; }
.t-stages li:has(.t-when):last-child { color: var(--mut); border: 0; }
.t-stages li.is-now { color: var(--ink, currentColor); }
.t-stages li.is-now .t-what::after { content: ""; display: inline-block; width: .45em; height: .45em; margin-left: .5em; border-radius: 99px;
  background: var(--amber); vertical-align: middle; animation: t-feed-pulse 1s ease-in-out infinite; }
.t-when { font-variant-numeric: tabular-nums; opacity: .7; }
@keyframes t-feed-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes t-feed-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .t-stages li:has(.t-when) { animation: none; } .t-stages li.is-now .t-what::after { animation: none; } }

/* ── Made with Picture Lock: four real renders under the composer (17 Sep) ── */
.made { width: 100%; max-width: 760px; margin: 34px auto 6px; display: flex; flex-direction: column; gap: 14px; }
.made-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }
.made-sub { letter-spacing: .06em; opacity: .75; }
.made-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.made-card { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.made-card video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; background: #0c0b0a; display: block;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -18px rgba(0,0,0,.7);
  transition: transform 260ms cubic-bezier(0.23,1,0.32,1), box-shadow 260ms cubic-bezier(0.23,1,0.32,1); }
.made-card:nth-child(odd) video { transform: rotate(-1.2deg); }
.made-card:nth-child(even) video { transform: rotate(1.2deg) translateY(8px); }
@media (hover: hover) and (pointer: fine) {
  .made-card:hover video { transform: rotate(0) translateY(-4px); box-shadow: 0 26px 50px -20px rgba(0,0,0,.8); }
}
.made-card figcaption { display: flex; flex-direction: column; gap: 2px; font-size: .74rem; line-height: 1.3; padding-inline: 2px; }
.made-card figcaption b { color: var(--text); font-weight: 600; }
.made-card figcaption span { color: var(--mut); font-size: .68rem; }
@media (max-width: 720px) {
  .made-row { grid-template-columns: repeat(4, 62%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin-inline: -4px; padding-inline: 4px; }
  .made-card { scroll-snap-align: start; }
  .made-card:nth-child(even) video { transform: rotate(1.2deg); }
}
@media (prefers-reduced-motion: reduce) { .made-card video { transition: none; transform: none !important; } }

/* plan feature rows: text with inline bits (a bold mark, a "not live yet" tag) stays ONE flex item, so it wraps as a sentence */
.pl-line { min-width: 0; }
.pl-line .soon { display: inline-block; margin-left: 6px; vertical-align: 1px; white-space: nowrap; }
.acc-partner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 0 12px; padding: 12px; border: 1px dashed color-mix(in srgb, var(--amber) 45%, transparent); border-radius: 12px; }
.acc-partner .mut { font-size: .74rem; max-width: 46ch; }
/* TikTok Post-screen requirements (audit) */
.tt-direct { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.tt-who { display: flex; gap: 12px; align-items: center; }
.tt-who video { width: 72px; aspect-ratio: 9/16; object-fit: cover; border-radius: 8px; background: #000; }
.tt-nick { font-weight: 600; }
.tt-row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: .82rem; }
.tt-row select { min-width: 160px; }
.tt-brand { flex-direction: column; align-items: flex-start; padding-left: 22px; }
.tt-declare a { color: inherit; }

/* ── the hook bank: two true numbers and the way in ────────────────────────
   The scored examples are the rubric; the pool is what the bank can build for
   one business. Showing only one of them is what made the old "2,054" read as
   the whole library. */
.hookbank { display: flex; flex-wrap: wrap; align-items: center; gap: 28px 40px; margin: 0 0 22px;
  padding: 20px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2, transparent); }
.hookbank-n { display: flex; flex-direction: column; gap: 2px; }
.hookbank-n b { font-size: var(--s-3, 1.6rem); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.hookbank-n span { font-size: var(--s--2, .78rem); color: var(--text-3, var(--text-2)); max-width: 30ch; line-height: 1.4; }
.hookbank .btn { margin-left: auto; }
.hookmine { display: block; margin: 0 0 22px; padding: 20px 24px; border: 1px solid var(--line); border-radius: 16px; }
.hookmine label { display: block; margin: 0 0 8px; font-size: var(--s--1); font-weight: 600; }
.hookmine input { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; background: transparent; color: inherit; }
.hookmine input:focus-visible { outline: 2px solid var(--accent, #FFD23F); outline-offset: 1px; }
.hookmine-go { display: flex; gap: 10px; margin-top: 14px; }
.hookmine-out { margin: 0 0 24px; }
.hookmine-h { margin: 0 0 12px; font-size: var(--s--1); font-weight: 600; color: var(--text-2); }
@media (max-width: 640px) { .hookbank { gap: 18px; } .hookbank .btn { margin-left: 0; width: 100%; } }


/* ── the credit meter ──────────────────────────────────────────────────────
   Reads as an instrument, not a score: what the balance buys, what costs
   nothing, and where the last credits actually went. */
.cred-n { font-size: .68rem; color: var(--mut); font-variant-numeric: tabular-nums; }
.cred-buys { margin: 7px 0 0; font-size: .7rem; line-height: 1.45; color: var(--text-2, var(--mut)); }
.cred-free { margin-top: 10px; padding: 9px 10px; border-radius: 9px; border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px; }
.cred-free b { font-size: .7rem; }
.cred-free span { font-size: 0.66rem; color: var(--mut); line-height: 1.4; }
.cred-spend { margin-top: 9px; }
.cred-spend summary { font-size: .68rem; color: var(--mut); cursor: pointer; list-style: none; }
.cred-spend summary::-webkit-details-marker { display: none; }
.cred-spend summary::before { content: '\203A'; display: inline-block; margin-right: 6px; transition: transform .16s cubic-bezier(.23,1,.32,1); }
.cred-spend[open] summary::before { transform: rotate(90deg); }
.cred-spend ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cred-spend li { display: flex; justify-content: space-between; gap: 10px; font-size: 0.66rem; color: var(--mut); }
.cred-spend li b { font-variant-numeric: tabular-nums; color: var(--text-2, inherit); font-weight: 600; }

/* "Everywhere" sits above the accounts it controls and reads as their sum, not another account in the list. */
.post-acc--all { border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 4px; font-weight: 600; }
.post-acc--all .mut { font-weight: 400; }

/* the waveform: the shape you actually cut on. Drawn as one SVG path so zooming redraws in a frame. */
.ed-wave { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .55; }
.ed-wave path { stroke: currentColor; stroke-width: 1; }
.clip--a.is-muted .ed-wave { opacity: .2; }


/* ── the keyboard sheet ─────────────────────────────────────────────────────────────────────────────────
   ⚠️ Sixteen shortcuts were implemented and NONE of them were discoverable — no menu, no hint, nothing in
   the interface said they existed. A shortcut nobody can find is a shortcut nobody has. Shares the command
   palette's shape so it reads as the same object, and obeys the house rules: custom easing only, nothing
   over 300ms, entrances from .95 and never from 0, press feedback on anything pressable. */
.keys { position: fixed; inset: 0; z-index: 210; display: grid; align-items: start;
        justify-items: center; padding-top: 9vh; }
.keys[hidden] { display: none; }
.keys-box {
  position: relative; width: min(760px, calc(100vw - 32px)); max-height: 78vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0,0,0,.28);
  animation: keysin 200ms var(--ease-out) both;
}
@keyframes keysin { from { opacity: 0; transform: translateY(-6px) scale(.95) } to { opacity: 1; transform: none } }
.keys-head { padding: 18px 20px 14px; border-bottom: 1px solid var(--line); position: relative; }
.keys-head h3 { margin: 0; font-size: 1.02rem; font-weight: 600; letter-spacing: -.02em; }
.keys-head p { margin: 5px 0 0; color: var(--mut); font-size: .84rem; }
.keys-x { position: absolute; top: 13px; right: 14px; width: 30px; height: 30px; border-radius: 8px;
          border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text-2);
          font-size: 1.05rem; line-height: 1; cursor: pointer;
          transition: transform 120ms var(--ease-out), background 140ms var(--ease-out); }
.keys-x:active { transform: scale(.97); }
.keys-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
             gap: 22px; padding: 18px 20px 22px; }
.keys-grid h4 { margin: 0 0 9px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: .1em;
                text-transform: uppercase; color: var(--mut); font-weight: 500; }
.keys-grid dl { margin: 0; display: grid; gap: 7px; }
.keys-grid dl div { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; }
.keys-grid dt { display: flex; gap: 4px; flex-shrink: 0; }
.keys-grid dd { margin: 0; color: var(--text-2); font-size: .84rem; text-align: right; }
.keys kbd { font-family: var(--mono); font-size: .66rem; color: var(--text-2); background: var(--panel-2);
            border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 8px;
            padding: 2px 6px; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .keys-x:hover { background: var(--raised); } }
@media (prefers-reduced-motion: reduce) { .keys-box { animation: none } }

/* the shortcut badges on tool buttons — the slot existed and was empty */
.ed-tool .kk kbd { font-family: var(--mono); font-size: 0.66rem; color: var(--mut);
                   background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 8px;
                   padding: 1px 4px; line-height: 1.4; }
.ed-tool .kk { opacity: .85; }


/* ── timeline magnets and the drag readout ──────────────────────────────────────────────────────────────
   ⚠️ A trim used to land wherever the mouse was, to the sub-frame, with nothing on screen saying where. That
   is what made the timeline feel approximate — not a missing feature, a missing constraint and a missing
   number. The line shows WHAT it caught; the chip shows WHERE you are. Alt turns the magnets off. */
.snapline { position: absolute; top: 0; bottom: 0; width: 1px; pointer-events: none; z-index: 6;
            background: var(--blue); box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue) 28%, transparent); }
.snapline[hidden] { display: none; }
.dragtip { position: absolute; top: -26px; transform: translateX(-50%); z-index: 7; pointer-events: none;
           font-family: var(--mono); font-size: 0.66rem; white-space: nowrap;
           background: var(--text); color: var(--panel); padding: 3px 7px; border-radius: 8px;
           box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.dragtip[hidden] { display: none; }

/* ═════════════════════════════════════════════════════════ API tariff ═══
   The per-request price list on Connect. Built as a real table because it is
   one: eight operations, a price each, and a number that has to line up down
   the column. Money is tabular-nums or the eye cannot compare two rows. */
.tar { width: 100%; border-collapse: collapse; font-size: var(--s--1); }
.tar td { padding: 7px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.tar tr:last-child td { border-bottom: 0; }
.tar .op { font-family: var(--mono); color: var(--text); white-space: nowrap; padding-right: 12px; }
.tar .wh { color: var(--mut); line-height: 1.4; }
.tar .pr { font-family: var(--mono); font-variant-numeric: tabular-nums;
           text-align: right; white-space: nowrap; padding-left: 12px; color: var(--text); }
/* the cheapest and dearest lines carry the range without a legend */
.tar tr:first-child .pr { color: var(--pass); }

.tar-foot { margin-top: 12px; display: grid; gap: 7px; }
.tar-foot .row { display: flex; gap: 10px; align-items: baseline; font-size: var(--s--1); }
.tar-foot .row b { font-family: var(--mono); font-variant-numeric: tabular-nums;
                   color: var(--text); white-space: nowrap; }
.tar-foot .row span { color: var(--mut); line-height: 1.4; }
.tar-note { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
            color: var(--mut); font-size: var(--s--2); line-height: 1.5; }

/* a worked example: what a month of this actually bills */
.tar-eg { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r);
          padding: 11px 12px; background: var(--bg-2, transparent); }
.tar-eg .eg-h { font-family: var(--mono); font-size: var(--s--2); letter-spacing: .12em;
                text-transform: uppercase; color: var(--mut); margin-bottom: 8px; }
.tar-eg .eg-l { display: flex; justify-content: space-between; gap: 12px;
                font-size: var(--s--1); color: var(--mut); padding: 2px 0; }
.tar-eg .eg-l b { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
.tar-eg .eg-t { display: flex; justify-content: space-between; gap: 12px;
                margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line);
                font-size: var(--s--1); color: var(--text); }
.tar-eg .eg-t b { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* the endpoint name under each plain-English line — for the developer who wants it, quiet
   enough that someone who does not know what it means reads straight past it */
.tar .op { line-height: 1.3; }
.tar .op .ep { display: block; font-size: var(--s--2); color: var(--mut); font-weight: 400;
               letter-spacing: 0; margin-top: 2px; }

/* ═══════════════════════════════════════════════════ voice cloning ═══
   One recording: the permission line, then the speaker. The phrase is the
   hero of the screen because reading it correctly is the only thing that
   can go wrong, and a level meter is the only honest way to show that a
   microphone is actually hearing something. */
.vc-phrase { margin: 0; padding: 14px 16px; border-left: 2px solid var(--amber);
  background: var(--amber-t); border-radius: 0 var(--r) var(--r) 0;
  font-size: 1.02rem; line-height: 1.55; color: var(--text); }
.vc-row { display: flex; gap: 11px; align-items: center; flex-wrap: wrap; }
.vc-time { font-size: 1.05rem; color: var(--mut); font-variant-numeric: tabular-nums; min-width: 46px; }
.vc-meter { flex: 1; min-width: 90px; height: 5px; border-radius: 8px; background: var(--line);
  overflow: hidden; }
.vc-meter i { display: block; height: 100%; width: 0%; background: var(--pass);
  transition: width 90ms linear; }
.vc-meter[data-quiet="1"] i { background: var(--live); }
.vc-play { margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line); }
.vc-play audio { width: 100%; }
.vc-msg { margin-top: 12px; }
.vc-msg[data-kind="bad"] { color: var(--live); }
.vc-msg[data-kind="good"] { color: var(--pass); }
.vc-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px;
  font-size: var(--s--1); color: var(--mut); line-height: 1.5; }
.vc-rules li { padding-left: 16px; position: relative; }
.vc-rules li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--line-2); }
.vc-rules b { color: var(--text); font-weight: 500; }
.vc-voice { display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid var(--line); font-size: var(--s--1); }
.vc-voice:last-child { border-bottom: 0; }
.vc-voice b { color: var(--text); font-weight: 500; }
.vc-voice .btn { margin-left: auto; }

/* ═════════════════════════════════════════════════════ style kinds ═══
   The measured library, grouped the way somebody says it out loud. A kind
   that is not built yet is shown and disabled rather than hidden — "we
   cannot measure vox pop yet" is more useful than an absence. */
.kinds { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.kind { display: inline-flex; align-items: baseline; gap: 7px; padding: 7px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2);
  font-size: var(--s--1); color: var(--text); cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out); }
.kind:active { transform: scale(.97); }
@media (hover:hover) and (pointer:fine) { .kind:hover { border-color: var(--line-2); } }
.kind[aria-pressed="true"] { border-color: var(--amber); color: var(--amber); background: var(--amber-t); }
.kind .n { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--mut); font-size: var(--s--2); }
.kind[aria-pressed="true"] .n { color: var(--amber); }
.kind[disabled] { opacity: .45; cursor: not-allowed; }
.kind[disabled] .n { text-decoration: line-through; }
.kind-why { width: 100%; margin: 2px 0 0; color: var(--mut); font-size: var(--s--2); line-height: 1.5; }


/* ── account: the irreversible corner ────────────────────────────────────────────────────────────
   ⚠️ Deliberately quiet until opened. A delete control styled to draw the eye is a delete control
   somebody clicks by accident; the weight belongs on the confirmation, not on the invitation. */
.acct-danger { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.acct-danger > summary {
  cursor: pointer; list-style: none; font-size: var(--s--1); color: var(--text-2);
  padding: 6px 0; min-height: 32px; display: flex; align-items: center; gap: 6px;
  transition: color var(--t-fast) var(--ease-out);
}
.acct-danger > summary::-webkit-details-marker { display: none; }
.acct-danger > summary::before { content: "\203A"; transition: transform .18s var(--ease-out); }
.acct-danger[open] > summary::before { transform: rotate(90deg); }
@media (hover: hover) and (pointer: fine) { .acct-danger > summary:hover { color: var(--text); } }
.acct-danger > summary:focus-visible { outline: 2px solid color-mix(in srgb, var(--amber) 60%, transparent); outline-offset: 2px; border-radius: 8px; }
.acct-danger .note { margin: 6px 0 12px; }
.btn--danger { border-color: color-mix(in srgb, var(--live) 45%, var(--line)); color: var(--live); }
.btn--danger:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .btn--danger:hover { border-color: var(--live); background: color-mix(in srgb, var(--live) 8%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .acct-danger > summary::before { transition: none; } }


/* == the sign-in screen, as a split ==========================================================
   ⚠️ A centred box on a blurred page is what every sign-in looks like. This half says what the
   product does while they type, with the same measured numbers the marketing site uses. */
.gate-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:0;
  max-width:920px;width:min(920px,calc(100vw - 32px));padding:0;overflow:hidden;align-items:stretch}
.gate-left{padding:30px 32px 32px;min-width:0}
.gate-right{background:#0E0E0D;color:#EDEAE4;padding:32px 30px;display:flex;align-items:center;min-width:0}
.gr-in{max-width:34ch}
.gr-h{margin:0 0 10px;font:400 1.5rem/1.15 Geist,system-ui,sans-serif;letter-spacing:-.025em}
.gr-s{margin:0 0 20px;font:400 .88rem/1.55 Geist,system-ui,sans-serif;color:#B4B0A8}
.gr-n{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:12px}
.gr-n li{display:flex;align-items:baseline;gap:11px}
.gr-n b{font:400 1.45rem/1 Geist,system-ui,sans-serif;letter-spacing:-.03em;min-width:58px;
  font-variant-numeric:tabular-nums}
.gr-n span{font:400 .8rem/1.4 Geist,system-ui,sans-serif;color:#B4B0A8}
.gr-f{margin:0;padding-top:16px;border-top:1px solid #292927;
  font:400 .78rem/1.5 Geist,system-ui,sans-serif;color:#8C8983}
@media (max-width:760px){
  .gate-split{grid-template-columns:1fr;max-width:460px;width:min(460px,calc(100vw - 24px))}
  /* the panel goes UNDER the form on a phone: nobody signing in wants to scroll past a pitch */
  .gate-right{order:2;padding:22px 24px}
  .gr-n{grid-template-columns:1fr 1fr;gap:10px}
  .gr-n li{flex-direction:column;gap:2px}
  .gr-n b{min-width:0}
}

/* == the plan screen, shown before the gate ==================================================
   ⚠️ Someone who typed a brief on the site and pressed Make it used to meet a password field,
   having been shown nothing at all. This is what the editor would do with their words. */
/* ⚠️ 300, ABOVE THE GATE'S 200. At 90 the sign-in screen layered straight over the plan and its
   "Create account" button swallowed every click meant for "Make it" — the plan was rendered,
   correct, and completely unreachable. */
.preplan{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px;
  background:rgba(246,246,244,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.preplan[hidden]{display:none}
.preplan-card{width:min(560px,100%);max-height:calc(100vh - 40px);overflow:auto;background:#fff;
  border:1px solid #E8E6E1;border-radius:18px;padding:26px 28px;
  box-shadow:0 6px 12px rgba(18,18,17,.08),0 40px 80px rgba(18,18,17,.14)}
.pp-said{margin:16px 0 6px;font:500 .72rem/1 "Geist Mono",monospace;letter-spacing:.09em;
  text-transform:uppercase;color:#7A776F}
.pp-q{margin:0 0 18px;padding:12px 14px;border-left:2px solid #121211;background:#FBFAF8;
  font:400 1rem/1.5 Geist,system-ui,sans-serif}
.pp-grid{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.pp-grid span{border:1px solid #E8E6E1;border-radius:999px;padding:6px 11px;
  font:400 .78rem/1 Geist,system-ui,sans-serif;background:#FBFAF8}
.pp-grid span i{font-style:normal;color:#7A776F}
.pp-steps{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:6px}
.pp-steps li{display:flex;gap:9px;align-items:baseline;font:400 .86rem/1.45 Geist,system-ui,sans-serif;
  color:#5F5D58}
.pp-steps li b{font:500 .68rem/1.45 "Geist Mono",monospace;color:#121211;min-width:14px}
.pp-go{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pp-go .btn{flex:1;min-width:210px;justify-content:center}
.pp-edit{appearance:none;background:none;border:0;cursor:pointer;font:400 .84rem/1 Geist,system-ui,sans-serif;
  color:#5F5D58;text-decoration:underline;text-underline-offset:3px;padding:10px 4px}
.pp-note{margin:14px 0 0;font:400 .76rem/1.5 Geist,system-ui,sans-serif;color:#7A776F}
@media (prefers-reduced-motion:no-preference){
  .preplan-card{animation:ppin .34s cubic-bezier(.23,1,.32,1) both}
  @keyframes ppin{from{opacity:0;transform:translate3d(0,10px,0) scale(.99)}to{opacity:1;transform:none}}
}

/* == the sidebar opens on click; the studio is the room ======================================
   ⚠️ Eleven tabs down the side is a dashboard, and the product is not a dashboard — it is one
   room where you talk to an editor. The nav is still there, one click away, but it does not sit
   between somebody and the thing they came to do. Desktop only: the phone layout already puts
   the nav along the bottom, which is right for a thumb and is left alone. */
@media (min-width: 861px) {
  /* ⚠️ THE COLUMN HAS TO MOVE WITH THE RAIL. This shrank .side to 56px while .app's grid column
     stayed at 216px, so a collapsed rail left a 160px strip of empty page between the icons and
     the work — measured, not guessed: appCols read "216px 1224px" in BOTH states. A sidebar that
     closes and leaves its own hole behind is worse than one that never closed. */
  body[data-rail="closed"] .app{ grid-template-columns:56px 1fr }
  .app{ transition:grid-template-columns 220ms cubic-bezier(.23,1,.32,1) }

  body[data-rail="closed"] .side{
    width:56px;min-width:56px;padding:14px 8px;overflow:hidden;
    transition:width 220ms cubic-bezier(.23,1,.32,1)}

  /* ⚠️ AND EVERYTHING THAT IS NOT AN ICON HAS TO GO, not fade. The old rule faded the <span>s and
     left every button's bare text node — "Create", "Fine-tune", "Autopilot", "Connect" — to be
     sliced in half by overflow:hidden, along with the brand, the project list and the whole credit
     meter, which stacked one word per line down a 56px column. A bare text node cannot be selected
     in CSS, which is why fading spans could never have worked; the labels are wrapped in .t now.
     display:none, not opacity:0 — an invisible element still takes its space and still sets the
     rail's scroll width. */
  body[data-rail="closed"] .side .nav button .t,
  body[data-rail="closed"] .side .nav button .n,
  body[data-rail="closed"] .side .lbl,
  body[data-rail="closed"] .side .tag,
  body[data-rail="closed"] .side .brand b,
  body[data-rail="closed"] .side .sgroup,
  body[data-rail="closed"] .side .projects,
  body[data-rail="closed"] .side .credits,
  body[data-rail="closed"] .side .side-foot{ display:none }

  /* square, centred targets — and the title= on each button carries the name on hover */
  body[data-rail="closed"] .side .nav button{
    justify-content:center;padding:0;width:40px;height:40px;gap:0}
  body[data-rail="closed"] .side .nav button svg{ flex:0 0 auto }
  body[data-rail="closed"] .side .nav{ align-items:center }
  body[data-rail="closed"] .side .brand{ justify-content:center;padding-left:0;padding-right:0 }
  body[data-rail="closed"] .side .brand .mk{ margin:0 }

  .side{transition:width 220ms cubic-bezier(.23,1,.32,1)}
}
.railtog{appearance:none;border:1px solid var(--line);background:var(--card,#fff);cursor:pointer;
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;margin-bottom:10px;
  color:var(--muted,#5F5D58);flex:0 0 auto;
  transition:transform 140ms cubic-bezier(.23,1,.32,1),background 160ms cubic-bezier(.23,1,.32,1)}
.railtog:active{transform:scale(.97)}
.railtog svg{width:15px;height:15px}
@media (max-width:860px){ .railtog{display:none} }