:root{--fs:30px;--textWidth:820px;
  /* Official CuePace brand tokens — see CuePace-Brand-Assets/brand-tokens.css */
  --void:#0A0A0A;--paper:#F2F4EF;--pine:#2F6B41;--signal:#6FE0A0;--slate:#14170F;--rule:#2A3226;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:#0a0a0a;color:#f4f4f4;font-family:'Inter',system-ui,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;}

button,select,input,textarea{background:#1a1a1a;color:#f4f4f4;border:1px solid #333;border-radius:8px;padding:11px 18px;font-size:14px;
  font-weight:600;cursor:pointer;font-family:inherit;}
input,textarea{cursor:text;font-weight:500;}
button:hover{background:#2a2a2a;}
button.on{background:#f4f4f4;color:#0a0a0a;border-color:#f4f4f4;}
button.primary{background:#2f6b41;border-color:#2f6b41;color:#fff;}
button.primary:hover{background:#38804d;}
button:disabled{opacity:.5;cursor:default;}
a{color:#5a8f6a;}
a.back{color:#888;font-size:14px;font-weight:600;text-decoration:none;border:1px solid #333;border-radius:8px;padding:11px 18px;}
a.back:hover{color:#fff;}

/* App chrome shared across Library/Editor */
header.appbar{position:sticky;top:0;z-index:50;background:rgba(10,10,10,.97);border-bottom:1px solid #262626;
  display:flex;align-items:center;gap:14px;padding:14px 20px;backdrop-filter:blur(6px);}
header.appbar .sp{margin-left:auto;display:flex;align-items:center;gap:10px;}
header.appbar .userEmail{color:#888;font-size:13px;}
main.page{max-width:920px;margin:0 auto;padding:32px 20px 80px;}

/* Brand logo (replaces old plain-text "CuePace" — see CuePace-Complete-Brand-Assets.zip).
   The SVG is authored in white (#F2F4EF) for use on this app's dark backgrounds only. */
.brandLogo{height:28px;width:auto;display:block;}
header.appbar .brandLogo{height:48px;}

/* Auth forms */
.authWrap{max-width:380px;margin:12vh auto 0;padding:0 20px;}
.authWrap .brandLogo{height:36px;margin-bottom:20px;}
.authWrap p.sub{color:#888;font-size:14px;margin-bottom:28px;}
.authWrap form{display:flex;flex-direction:column;gap:12px;}
.authWrap label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#888;font-weight:700;margin-bottom:-4px;}
.authWrap input{width:100%;}
.authWrap button[type=submit]{margin-top:8px;}
.authWrap .altLink{margin-top:20px;font-size:14px;color:#888;text-align:center;}
.googleBtn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:#1a1a1a;border-color:#fff;}
.googleBtn:hover{background:#eee;}
.orDivider{display:flex;align-items:center;gap:12px;margin:18px 0;color:#666;font-size:12px;text-transform:uppercase;letter-spacing:.08em;}
.orDivider::before,.orDivider::after{content:'';flex:1;height:1px;background:#262626;}
.formMsg{font-size:13px;padding:10px 12px;border-radius:8px;display:none;}
.formMsg.error{display:block;background:#2a1414;color:#e08a8a;border:1px solid #4a2222;}
.formMsg.success{display:block;background:#0f1a12;color:#5a8f6a;border:1px solid #2f6b41;}

/* Library */
/* Up Next: pinned scripts get their own prominent zone above the searchable list —
   prep for a shoot means starring what you'll need, so on arrival it's the first
   thing on screen with a one-tap Present, not buried in an alphabetized list. */
.upNext{margin-bottom:32px;}
.upNextHead{display:flex;align-items:baseline;gap:10px;margin-bottom:12px;}
.upNextHead h2{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#888;font-weight:700;}
.upNextCount{color:#5a8f6a;font-size:13px;font-weight:700;}
.upNextGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;}
.upNextCard{background:#141414;border:1px solid #2f6b41;border-radius:12px;padding:16px;
  display:flex;flex-direction:column;gap:10px;position:relative;}
.upNextCard .pinbtn{position:absolute;top:8px;right:8px;background:transparent;border:none;
  font-size:17px;padding:6px;color:#e0c34a;line-height:1;}
.upNextTitle{font-weight:700;font-size:15px;padding-right:26px;line-height:1.35;word-break:break-word;
  color:#f4f4f4;text-decoration:none;display:block;}
.upNextTitle:hover{color:#5a8f6a;text-decoration:underline;}
.upNextMeta{color:#666;font-size:12px;}
.upNextActions{display:flex;gap:8px;margin-top:auto;}
.upNextActions button{flex:1;padding:10px 12px;font-size:13px;}
.upNextEmpty{color:#666;font-size:13px;background:#141414;border:1px dashed #333;
  border-radius:10px;padding:16px;text-align:center;}

/* Projects (folders): a horizontal chip rail rather than a sidebar — reads well on
   an iPad-width screen without eating into the list's horizontal space, and it's
   the same "row of pills" pattern already established by bar-row buttons. */
.folderRail{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.folderChip{background:#141414;border:1px solid #333;border-radius:99px;padding:8px 16px;font-size:13px;}
.folderChip.active{background:#2f6b41;border-color:#2f6b41;color:#fff;}
.folderChip.folderChipNew{color:#5a8f6a;border-style:dashed;}
.folderManage{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:10px 14px;
  background:#141414;border:1px solid #262626;border-radius:10px;}
#folderManageName{font-weight:700;font-size:13px;flex:1;}
.folderManage button{padding:7px 12px;font-size:13px;}
.folderSelect{font-size:12px;padding:7px 10px;flex-shrink:0;max-width:140px;}

.libToolbar{display:flex;gap:10px;align-items:center;margin-bottom:20px;flex-wrap:wrap;}
.libToolbar input[type=search]{flex:1;min-width:180px;}
.scriptList{display:flex;flex-direction:column;gap:8px;}
.scriptRow{display:flex;align-items:center;gap:12px;background:#141414;border:1px solid #262626;border-radius:10px;padding:14px 16px;}
.scriptRow .titleWrap{flex:1;min-width:0;}
.scriptRow .titleWrap .titleLink{display:block;font-size:15px;font-weight:700;color:#f4f4f4;text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.scriptRow .titleWrap .titleLink:hover{color:#5a8f6a;text-decoration:underline;}
.scriptRow .titleWrap .titleEdit{width:100%;background:transparent;border:none;padding:0;font-size:15px;font-weight:700;color:#f4f4f4;}
.scriptRow .titleWrap .titleEdit:focus{outline:none;background:#1a1a1a;padding:4px 8px;margin:-4px -8px;border-radius:6px;}
.scriptRow .renameBtn{background:transparent;border:none;color:#666;font-size:15px;padding:6px 8px;flex-shrink:0;cursor:pointer;}
.scriptRow .renameBtn:hover{color:#f4f4f4;background:#1a1a1a;}
.scriptRow .meta{color:#666;font-size:12px;flex-shrink:0;}
.scriptRow .rowActions{display:flex;gap:6px;flex-shrink:0;}
.scriptRow .rowActions button{padding:8px 12px;font-size:13px;}
.scriptRow .pinbtn{background:transparent;border:none;font-size:16px;padding:4px 8px;}
.scriptRow .pinbtn.pinned{color:#e0c34a;}
.emptyState{color:#666;text-align:center;padding:60px 20px;}

/* Editor */
.editorToolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
.editorToolbar input#titleInput{font-size:18px;font-weight:800;flex:1;min-width:160px;background:transparent;border:none;padding:6px 0;}
.editorToolbar input#titleInput:focus{outline:none;}
.editorToolbar .sp{margin-left:auto;display:flex;gap:10px;}
#saveStatus{color:#666;font-size:13px;flex-shrink:0;}
#bodyInput{width:100%;min-height:60vh;resize:vertical;font-size:16px;line-height:1.6;padding:20px;}

/* --- Present-mode engine chrome (ported from neema-vsl) --- */
#bar{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(10,10,10,.97);border-bottom:1px solid #262626;
     display:flex;flex-wrap:wrap;align-items:stretch;gap:16px;padding:12px 16px;backdrop-filter:blur(6px);}
/* Playback controls live on the right, flush to the right edge — where a
   right-handed reader's thumb naturally lands holding an iPad, and Play/Pause +
   Speed are the controls actually touched mid-read. */
.barMain{display:flex;flex-direction:column;gap:10px;flex:1;min-width:280px;}
.barMain .bar-row{justify-content:flex-end;}
.bar-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
#bar .t{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#888;font-weight:700;flex-shrink:0;}
/* Script identity + the two ways off this screen, on the left, grouped as one
   visual unit and kept prominent (regular pill buttons, not a discreet corner
   icon) — the whole point is that Home shouldn't require hunting for. */
.barSession{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;
  padding-right:16px;border-right:1px solid #262626;flex-shrink:0;}
.barSessionActions{display:flex;gap:8px;}
.barSessionActions a.back{display:flex;align-items:center;gap:6px;}
.barSessionActions a.back svg{width:15px;height:15px;fill:currentColor;flex-shrink:0;}
@media (max-width:640px){
  .barSession{border-right:none;padding-right:0;width:100%;}
}
.iconbtn{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;flex-shrink:0;}
.iconbtn svg{width:28px;height:28px;fill:#f4f4f4;}
.iconbtn.on{background:#2f6b41;border-color:#2f6b41;}
.iconbtn.on svg{fill:#fff;}
.speedwrap{display:flex;align-items:center;gap:12px;background:#141414;border:1px solid #333;border-radius:12px;padding:10px 18px;flex:0 1 700px;min-width:0;}
.speedwrap .lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#888;font-weight:700;flex-shrink:0;}
.speedwrap input[type=range]{-webkit-appearance:none;appearance:none;width:100%;min-width:160px;max-width:420px;height:10px;border-radius:5px;
  background:linear-gradient(90deg,#2f6b41,#444);outline:none;touch-action:none;}
.speedwrap input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:32px;height:32px;border-radius:50%;
  background:#f4f4f4;border:3px solid #0a0a0a;cursor:pointer;box-shadow:0 0 0 2px #555;}
.speedwrap input[type=range]::-moz-range-thumb{width:32px;height:32px;border-radius:50%;background:#f4f4f4;
  border:3px solid #0a0a0a;cursor:pointer;box-shadow:0 0 0 2px #555;}
.speedwrap input[type=range]::-moz-range-track{height:10px;border-radius:5px;background:#333;}
#speedVal{font-size:15px;font-weight:800;color:#f4f4f4;min-width:64px;text-align:right;font-variant-numeric:tabular-nums;flex-shrink:0;}
/* #scrollArea is the ONLY thing on this screen that ever scrolls — a real, native,
   fixed-to-the-viewport scroll container. #bar/#eyeline/#prog/handles/#countdown
   are all its SIBLINGS, not descendants, so they are structurally guaranteed to
   stay put regardless of how #scrollArea is scrolled (finger drag, momentum,
   rubber-band, or the auto-play engine setting scrollTop programmatically).
   Earlier attempt (translateY() on #wrap + overflow:hidden on body) stopped the
   auto-play engine's OWN scrolling from leaking to the real page, but iOS Safari
   still let a manual touch-drag scroll the document regardless of overflow:hidden
   on body — a separate, well-documented iOS quirk. A real overflow:auto container
   is the actually-reliable fix, and as a bonus it restores manual scroll-to-any-line
   (for lining up a retake) that the transform-only approach had removed entirely. */
#scrollArea{position:fixed;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
#wrap{max-width:var(--textWidth);margin:0 auto;padding:240px clamp(24px,7vw,110px) 70vh;text-align:left;}
/* Mirror (horizontal) and Flip (vertical) are two INDEPENDENT toggles, combined
   into one transform string by present.js's applyOrientation() — not a single
   CSS class, because different physical rigs need different combinations and
   nobody testing this remotely can see Neema's actual hardware. Real rig geometry
   (screen flat, facing up, bounced off angled glass to the reader's eyes) only
   inverts ONE axis, same as how commercial teleprompter software works — but a
   rig with a different glass angle/mount could genuinely need the other
   combination, hence both being independently switchable rather than assumed.
   CRITICAL, still true regardless of which axes are on: the transform must go on
   #scrollArea (viewport-sized, fixed, inset:0), NOT #wrap (the tall scrolled
   content) — CSS transforms rotate/flip around an element's OWN center, and
   #wrap can be thousands of pixels tall, so transforming #wrap directly scrambles
   the scroll-position-to-visible-content mapping (content plays back-to-front).
   Transforming #scrollArea instead flips only the already-resolved, correctly-
   ordered viewport picture as a final display step. See applyOrientation(). */

#countdown{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;
  background:rgba(10,10,10,.92);pointer-events:none;font-size:min(38vw,260px);font-weight:800;
  color:#f4f4f4;font-variant-numeric:tabular-nums;text-shadow:0 0 60px rgba(47,107,65,.55);}

/* Draggable text-width handles: thin fixed-position pills straddling #wrap's edges,
   positioned via the same --textWidth var so they always track the current column
   width with no JS-driven repositioning needed. Pointer Events (not mouse-only
   drag) so this works with touch on an iPad as well as a mouse. */
.widthHandle{position:fixed;top:50%;width:14px;height:72px;transform:translateY(-50%);
  border-radius:7px;background:rgba(244,244,244,.14);cursor:ew-resize;z-index:55;
  touch-action:none;opacity:.45;transition:opacity .15s,background .15s;}
.widthHandle::after{content:'';position:absolute;top:50%;left:50%;width:2px;height:26px;
  transform:translate(-50%,-50%);background:rgba(10,10,10,.55);border-radius:1px;}
.widthHandle:hover,.widthHandle:focus-visible,.widthHandle.dragging{opacity:1;background:rgba(244,244,244,.35);}
#widthHandleLeft{left:calc(50% - (var(--textWidth) / 2) - 22px);}
#widthHandleRight{left:calc(50% + (var(--textWidth) / 2) + 8px);}
.l{font-size:var(--fs);font-weight:500;margin:0 0 calc(var(--fs) * .4);letter-spacing:-.01em;}
.gap{height:calc(var(--fs) * .6);}
.cue{font-size:calc(var(--fs) * .46);color:#5a8f6a;background:#0f1a12;border-left:3px solid #2f6b41;
      padding:6px 12px;margin:12px auto;border-radius:0 5px 5px 0;font-weight:600;max-width:90%;}
span.cue{display:inline;padding:2px 6px;margin:0 2px;border-radius:5px;}
#prog{position:fixed;top:0;left:0;height:3px;background:#f4f4f4;z-index:60;width:0;}
#eyeline{position:fixed;top:50%;left:0;right:0;z-index:45;pointer-events:none;transform:translateY(-50%);}
#eyeline .ln{border-top:2px dashed rgba(244,244,244,.5);}
#eyeline .dot{position:absolute;top:50%;left:50%;width:14px;height:14px;border-radius:50%;
  background:rgba(244,244,244,.65);transform:translate(-50%,-50%);box-shadow:0 0 0 6px rgba(244,244,244,.12);}
body.hideeyeline #eyeline{display:none;}
.nudge{display:flex;align-items:center;gap:6px;background:#141414;border:1px solid #333;border-radius:10px;padding:5px 8px;flex-shrink:0;}
.nudge button{padding:4px 10px;font-size:14px;line-height:1;min-width:0;}
#eyeOffsetVal{font-size:12px;color:#888;min-width:44px;text-align:center;font-variant-numeric:tabular-nums;}
#presentEmpty{max-width:820px;margin:240px auto 0;padding:0 clamp(24px,7vw,110px);color:#888;}