/* ===========================================================================
   LiveFlyer — the look · 2026-09-18, live everywhere 2026-09-20
   Linked by both deploy scripts. It lived in tools/ while it was an experiment,
   precisely so it could not reach liveflyer.app by accident; John made dev the
   live version on 9/20, so it moved into site/ and now ships to everyone.

   Pure override layer. No markup is changed, no JS is touched, every rule is an
   override of an existing element. Reverting is deleting one <link>.

   What it is trying to do, from the ad John liked: a headline that behaves like
   a headline, air around it, atmosphere behind it, and a secondary row that
   stops competing with the thing it sits under.
   =========================================================================== */

:root{ --lf-hero-max: 940px; }

/* --- 1. SURFACES ----------------------------------------------------------
   John, 9/18: "the site should look more like TikTok or Twitch so that users
   trust it." Both are FLAT: near-black field, one shade lighter for panels,
   hairline borders, 8px corners, one accent, Inter-class type, no glow. The two
   soft colour pools from the first pass are gone for that reason. -----------*/
/* John's theme, 9/18 — the app's old token names mapped onto it */
:root{
  --ink:#111111; --panel:#1a1a1a; --panel2:#202020; --line:#2a2a2a;
  --txt:#f2f2f0; --dim:#9a9a94;
  --radius:10px; --radius-btn:6px;
}
body{ font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif !important; }
/* the app's own wizard modal: the React island (ui/) draws this on dev */
#ovAnimWiz{ display:none !important; }
body::before{ display:none !important; }
header, main, footer, #land, #deskBanner{ position:relative; z-index:1; }

/* top bar: 50px, sticky, hairline under it, wordmark left, account right */
header{
  position:sticky !important; top:0; z-index:60 !important;
  background:var(--ink) !important; border-bottom:1px solid var(--line);
  padding:0 16px !important; min-height:50px; align-items:center !important;
}
header .logo{ font-family:inherit !important; font-weight:800 !important; font-size:17px !important; letter-spacing:-.02em !important; color:var(--txt) !important; }
header .logo::before, header .logo::after{ display:none !important; }
header .tag{ display:none !important; }

/* panel type: sentence case at reading size. The tracked-out 10px caps were the poster
   tool's voice; TikTok and Twitch set every heading and hint as plain text. */
.panel h2, .panel h3{ text-transform:none !important; letter-spacing:-.01em !important; font-size:17px !important; font-weight:700 !important; color:var(--txt) !important; }
.panel h3{ font-size:15px !important; }
.sub{ text-transform:none !important; letter-spacing:0 !important; font-size:13.5px !important; line-height:1.5 !important; color:var(--dim) !important; }
.small, label.small{ font-size:12.5px !important; line-height:1.45; }
.dna{ text-transform:none !important; letter-spacing:0 !important; font-size:12px !important; }

/* controls: one shape language everywhere */
.panel{ border-radius:var(--radius) !important; border-color:var(--line) !important; }
.gen{
  font-family:inherit !important; font-weight:700 !important; font-size:15px !important; letter-spacing:0 !important;
  border-radius:var(--radius-btn) !important; background:var(--cyan) !important; color:#111 !important; min-height:44px; box-shadow:none !important;
}
.gen:hover{ filter:brightness(1.06); }
.btn2{ border-radius:var(--radius-btn) !important; background:var(--panel2) !important; border-color:transparent !important; font-weight:600 !important; }
.btn2:hover{ background:#26262C !important; }
.btn2.cyan, .btn2.pink{ background:rgba(232,185,49,.14) !important; color:var(--cyan) !important; border-color:transparent !important; }
.chip{ border-radius:var(--radius-btn) !important; font-weight:500; }
.chip.on{ box-shadow:none !important; background:rgba(232,185,49,.14) !important; border-color:transparent !important; }
input[type=text], input[type=email], input[type=date], input[type=time], select, textarea{
  border-radius:var(--radius-btn) !important; background:var(--panel2) !important; border-color:transparent !important;
}
input:focus, select:focus, textarea:focus{ border-color:var(--cyan) !important; box-shadow:0 0 0 1px var(--cyan); }
#pvToggle{ border-radius:var(--radius-btn) !important; }
#acct.join{ background:var(--cyan) !important; color:#111 !important; box-shadow:none !important; border-radius:var(--radius-btn) !important; font-weight:700 !important; }
#buyBtn{ border-radius:var(--radius-btn) !important; color:#111 !important; font-weight:700 !important; }
#creditsBadge{ border-radius:var(--radius-btn) !important; }
#navDesktop{ border-radius:var(--radius-btn) !important; }

/* --- 2. THE HEADLINE -------------------------------------------------------
   The markup ALREADY had the two-tone structure the ad used - a dim sentence
   with <b style="color:var(--txt)">you</b> inside it. It was simply being
   rendered at 13px as a subtitle. Scaling it up is most of the effect and costs
   nothing structurally. ------------------------------------------------------*/
main .strap{
  /* v2: the first pass kept the inline color:var(--dim) and only "you" was white.
     At 13px that read as a subtitle; blown up to 44px it read as washed out - the
     ad's page had its PRIMARY clause bright and the secondary one grey, not the
     reverse. So the sentence goes to --txt and "you" takes the brand cyan, which
     also happens to be the one word the product is actually about. */
  color: var(--txt) !important;
  font-size: clamp(30px, 3.6vw, 42px) !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
  letter-spacing: -0.017em !important;
  max-width: var(--lf-hero-max) !important;
  padding: 26px 16px 24px !important;
}
main .strap b{ color: var(--cyan) !important; font-weight: 700 !important; }

/* --- 3. NAVIGATION ---------------------------------------------------------
   Desktop: text tabs with an underline, the way TikTok's web app and Twitch's
   channel pages do it. Phone: a fixed bottom bar, icon over a one-word label,
   which is the thing every TikTok user's thumb already knows. The emoji are
   stripped and the icons added by tools/dev-guided.js. --------------------*/
main .areatabs{
  max-width:var(--lf-hero-max) !important; flex-wrap:nowrap !important; gap:26px !important;
  padding:0 16px !important; margin-bottom:18px !important; border-bottom:1px solid var(--line);
}
main .areatabs .chip{
  flex:0 0 auto !important; display:inline-flex; align-items:center; gap:8px;
  background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
  padding:10px 2px 12px !important; font-size:14px !important; font-weight:600; color:var(--dim); position:relative;
  transition:color .12s ease;
}
main .areatabs .chip:hover{ color:var(--txt); transform:none; }
main .areatabs .chip.on{ color:var(--txt); }
main .areatabs .chip.on::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--cyan); border-radius:2px; }
main .areatabs .chip svg{ width:18px; height:18px; flex:none; }

@media (max-width:840px){
  main .areatabs{
    position:fixed !important; left:0; right:0; bottom:0; z-index:70; margin:0 !important; max-width:none !important;
    background:var(--ink) !important; border-top:1px solid var(--line); border-bottom:0;
    gap:0 !important; padding:6px 4px calc(6px + env(safe-area-inset-bottom)) !important;
  }
  main .areatabs .chip{
    flex:1 1 0 !important; flex-direction:column; justify-content:center; gap:3px !important;
    padding:4px 2px !important; font-size:10.5px !important; font-weight:500; line-height:1;
  }
  main .areatabs .chip.on{ color:var(--cyan); }
  main .areatabs .chip.on::after{ display:none; }
  main .areatabs .chip svg{ width:22px; height:22px; }
  /* clear the bar with BODY padding: a main{} rule hit the headline's <main> too and opened a 200px hole */
  body{ padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
  main:first-of-type{ padding-bottom:0 !important; }
  /* the bar, TikTok-style: wordmark + the one action. The desktop-app pill is for a computer;
     About and Pricing live in the footer and the ? menu. */
  header{ padding:8px 14px !important; min-height:48px; flex-wrap:nowrap !important; justify-content:space-between; }
  /* 10/1 audit: a stranger on a phone could not find a price without scrolling to the footer */
  #navDesktopWrap, #navAbout{ display:none !important; }
  #navPricing{ font-size:12.5px !important; padding:10px 4px; }
  #navRight{ flex-wrap:nowrap !important; margin-left:auto; }
  .left.mini{ bottom:84px !important; }
  #pvToggle{ bottom:78px !important; }
  #lfToasts{ bottom:88px !important; }
}

/* --- 5. AIR ---------------------------------------------------------------
   The single most common note on the left-hand ad page was density. ----------*/
main > .grid, main > .card{ margin-top: 4px !important; }

@media (max-width: 520px){
  /* v2: at 27px this sentence ran to five lines and pushed the example video -
     the single strongest thing on the page, and the only proof it works - clean
     off the first screen. A headline that buries the proof is a worse headline. */
  main .strap{
    font-size: 20px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    padding: 16px 16px 14px !important;
  }
}

/* ---- the desktop-app line inside Easy setup step 3 (tools/dev-guided.js) ---- */
.gDesk{
  margin-top:10px;padding:10px 12px;border-radius:10px;font-size:13px;line-height:1.5;
  background:rgba(232,185,49,.06);border:1px solid rgba(232,185,49,.28);color:var(--txt);
}
.gDesk a{color:var(--cyan);font-weight:600}

/* ---- the account box, dev: one thing to do. John: "too much information". ----
   Google, or email → code. The credits paragraph, the promo link and the theme
   toggle come out of the moment someone is being asked to sign up. The message
   line stays because the app writes the wall's one-line reason into it. */
#acctModal > div{ border-radius:var(--radius) !important; }
#acctBlurb, #acctPromoOut, #acctThemeRow{ display:none !important; }
#acctModal #acctGoogleBtn{ background:#fff !important; color:#1f1f1f !important; }
#acctMsg{ font-size:13px !important; color:var(--dim) !important; line-height:1.45; }

/* ---- Animations tab, first screen (John, 9/18: no essay; the selfie is the control) ----
   Hidden: the "Be the animation" heading, the paragraph, MAKE MINE, the example chips and
   their label, the two-minute line and the footnote. Kept: the frame (the app still loads
   the first example clip into it from the hidden chip row), the iPhone still-frame note,
   the result box, Your animations. The island (ui/src/AnimStart.jsx) draws the control. */
#animPanel > h2, #animPanel > .sub, #animMakeBtn, #animPanel > label.small, #animExRow,
#animPanel > .small:not(#animAlphaNote){ display:none !important; }
#animPanel .lf-ui{ margin-top:2px; }

/* ---- header, signed in: the credit count is the button; Buy credits shows when it is
   tapped, or when the balance is 0 (John, 9/18). tools/dev-guided.js toggles the class. */
#buyBtn{ display:none !important; }
body.lf-buy #buyBtn{ display:inline-block !important; }
#creditsBadge{ cursor:pointer; }

/* ---- the cold visit (no account yet) — John, 9/18: "Logged-out home is now: proof + start."
   tools/dev-guided.js sets body.lf-cold while #acct still says Sign up. ---- */
body.lf-cold main .areatabs{ display:none !important; }          /* five tabs = five products; not yet */
body.lf-cold{ padding-bottom:0 !important; }
body.lf-cold #acct.join, body.lf-cold #helpBtn, body.lf-cold #creditsBadge, body.lf-cold #buyBtn{ display:none !important; }   /* the selfie is the sign-up; no credit talk before an account */
body.lf-cold #signInLink{ display:inline !important; font-size:14px !important; text-decoration:none !important; color:var(--dim) !important; }
body.lf-cold header .logo{ cursor:pointer; }                      /* wordmark = back to the start */
/* the caption over the clip read as an ad unit; one line under the player instead */
#animReelTag{ display:none !important; }
.lfCap{ display:none; font-size:13px; color:var(--dim); text-align:center; margin:8px 0 0; }
body[data-area="anim"] .lfCap{ display:block; }
@media (max-width:840px){
  /* the clip is 16:9; give it the full width and its own shape, not a padded square */
  body[data-area="anim"] .stage{ width:100% !important; max-width:none !important; aspect-ratio:16/9 !important; max-height:none !important; border-radius:var(--radius) !important; box-shadow:none !important; }
  body[data-area="anim"] .left{ padding:0 !important; width:100%; align-self:stretch !important; }
  body[data-area="anim"] .stage-wrap{ display:block !important; }
}
body.lf-cold #navRight{ justify-content:flex-end !important; }
/* cold: the start controls sit on the page, not in a card inside the page */
body.lf-cold #animPanel{ border:0 !important; padding:0 !important; background:transparent !important; }

/* ---- the app's own first-visit modals: the island (ui/) draws these on dev ---- */
#tut, #ovSimple, #ovIntro{ display:none !important; }
#templatePanel .lf-ui, #gfxPanel .lf-ui, #overlayPanel .lf-ui{ margin-bottom:2px; }

/* desktop and the desktop app: the example clip is 16:9, so its frame is too — not a 9:16 phone
   frame with the clip letterboxed in the middle */
@media (min-width:841px){
  body[data-area="anim"] .stage{ width:min(100%,560px) !important; aspect-ratio:16/9 !important; max-height:none !important; border-radius:var(--radius) !important; box-shadow:none !important; }
  body[data-area="anim"] .left{ width:100%; }
  body[data-area="anim"] .stage-wrap{ display:block !important; }
}

/* ---- the overlay tour (ui/src/OverlayFlow.jsx): the controls a step is talking about ---- */
.lfTourHi{ outline:2px solid var(--cyan) !important; outline-offset:3px; border-radius:var(--radius-btn); transition:outline-color .15s; }
details.lfTourHi, #ovGoBox.lfTourHi{ outline-offset:6px; }

/* ---- 9/19, John: "Remove the first 800 pixels." The app's landing layer (#land: glitch logo, long
   headline, donut frame, skip link, and the chooser we had bolted under it) is not the first paint on
   dev any more. The page starts at the strap + the clip + the two doors (ui/src/Start.jsx). ---- */
#land, #land.on{ display:none !important; }
body.landing{ overflow:auto !important; }
/* a cold visit has not taken a selfie yet: no desktop-app pitch anywhere on the first screen */
body.lf-cold #navDesktopWrap, body.lf-cold #deskBanner, body.lf-cold #landAlt{ display:none !important; }

/* 9/19, John: "Hero should loop one clip … don't let the proof rotate into a poster." The poster
   canvas (#bg) lives under the reel in the same stage; on a cold visit it is never the thing to show. */
body.lf-cold[data-area="anim"] #bg{ visibility:hidden !important; }