/* ===================== Cinema grade (25 Oct 2026, Nasir: "make it look top tier") =====================
   Teal & orange, the classic film grade: lit charcoal, teal light for everything calm, ORANGE only for what you
   act on or what is live. Film grain + vignette over everything, titles set like credits, numbers as timecode,
   viewfinder corners on the panels, a swipe between pages, depth of field in the backgrounds.
   Loaded last: it overrides the older layers. */

@font-face { font-family: "Instrument Serif"; src: url(/static/fonts/serif.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Instrument Serif"; src: url(/static/fonts/serif-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: block; }
@font-face { font-family: "Inter Tight"; src: url(/static/fonts/inter-tight.woff2) format("woff2"); font-weight: 100 900; font-display: block; }
@font-face { font-family: "JetBrains Mono"; src: url(/static/fonts/mono.woff2) format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --ink: #0b0f11;                       /* the base: warm-neutral charcoal, not navy */
  --glass: rgba(14, 19, 22, .9);       /* panels */
  --glass2: rgba(19, 26, 30, .93);
  --hair: rgba(241, 236, 228, .08);     /* hairlines */
  --orange: #ff8a3d; --orange2: #ffb27a; --orange-deep: #d4561c;
  --teal: #5fd4c4; --teal-deep: #26a8a0;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --display: "Instrument Serif", Georgia, serif;
}

/* ---------- the light: a lit set, not a black screen ---------- */
/* the lighting lives on html: a background on body would paint over the animated canvas */
html { background:
  radial-gradient(70% 60% at 12% 0%, rgba(38, 168, 160, .22), transparent 70%),
  radial-gradient(60% 55% at 100% 100%, rgba(255, 138, 61, .14), transparent 70%),
  radial-gradient(90% 70% at 50% 40%, #121a1d 0%, var(--ink) 75%) fixed var(--ink); background-attachment: fixed; }
body { background: transparent !important; }
#bg { background: none; }
/* vignette: the edges fall off like a lens */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(130% 100% at 50% 45%, transparent 60%, rgba(0, 0, 0, .38) 100%); }
/* film grain: very light, moves a little so it reads as film, not a texture */
body::after { content: ""; position: fixed; inset: -50%; z-index: 100; pointer-events: none; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1s steps(6) infinite; }
@keyframes grain {
  0% { transform: translate(0, 0); } 17% { transform: translate(-3%, 2%); } 33% { transform: translate(2%, -4%); }
  50% { transform: translate(-4%, -1%); } 67% { transform: translate(3%, 3%); } 83% { transform: translate(-1%, 4%); } 100% { transform: translate(0, 0); } }

body { font-family: "Inter Tight", "Segoe UI", system-ui, sans-serif; color: var(--silver); -webkit-font-smoothing: antialiased; }
::selection { background: rgba(255, 138, 61, .35); color: #fff; }

/* ---------- header: a slate ---------- */
header { background: linear-gradient(180deg, rgba(8, 11, 13, .86), rgba(8, 11, 13, .7)); backdrop-filter: blur(16px) saturate(130%);
  border-bottom: 1px solid var(--hair); box-shadow: 0 12px 40px rgba(0, 0, 0, .4); }
header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 138, 61, .55) 30%, rgba(95, 212, 196, .45) 70%, transparent); }
.wordmark { background: linear-gradient(180deg, #fffaf2 0%, #efe6d8 40%, #9a9286 52%, #f6efe4 66%, #c9bfae 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 12px rgba(255, 138, 61, .28)) drop-shadow(0 0 1px rgba(255, 255, 255, .5)); }
.brand-sub { color: var(--orange2); letter-spacing: .34em; font-weight: 500; }
.timecode { font: 500 12px/1 var(--mono); color: var(--silver2); letter-spacing: .06em; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 10px; border: 1px solid var(--hair); border-radius: 6px; background: rgba(0, 0, 0, .25); white-space: nowrap; }
.timecode i { width: 7px; height: 7px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 8px #ff3b30; animation: rec 1.6s steps(1) infinite; }
.timecode b { font-weight: 600; color: #ff6a5c; letter-spacing: .12em; font-size: 10px; }
@keyframes rec { 50% { opacity: .15; } }
@media (max-width: 1100px) { .timecode { display: none; } }

/* tabs: words, an orange underline for the open page */
nav.tabs button { color: var(--silver2); font-weight: 500; letter-spacing: .02em; border-radius: 8px; }
nav.tabs button:hover { color: #fff; background: rgba(241, 236, 228, .04); }
nav.tabs button::after { background: linear-gradient(90deg, transparent, var(--orange), transparent); }
nav.tabs button.on { color: #fff; background: linear-gradient(180deg, rgba(255, 138, 61, .14), rgba(255, 138, 61, .03));
  box-shadow: inset 0 0 0 1px rgba(255, 138, 61, .35), 0 0 22px rgba(255, 138, 61, .16); }
nav.tabs button.on::after { transform: scaleX(1); }

/* ---------- titles set like opening credits ---------- */
.intro { margin: 18px 0 28px; position: relative; }
.intro::before { display: block; margin-bottom: 10px; font: 500 11px/1 var(--mono); letter-spacing: .32em; color: var(--orange2); opacity: .85; }
#v-library .intro::before { content: "REEL 01 · EDITS"; }
#v-files .intro::before { content: "REEL 02 · FOOTAGE IN / OUT"; }
#v-jobs .intro::before { content: "REEL 03 · NEW EDIT"; }
#v-tasks .intro::before { content: "REEL 04 · REMOTE TASKS"; }
#v-talk .intro::before { content: "REEL 05 · TALK"; }
#v-machines .intro::before { content: "REEL 06 · MACHINES & USAGE"; }
#v-receipts .intro::before { content: "REEL 07 · RECEIPTS"; }
.intro h1 { font: 400 clamp(40px, 5.2vw, 64px)/1 var(--display); letter-spacing: -.01em;
  background: linear-gradient(180deg, #fffaf3 10%, #d9cfc0 95%); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 4px 30px rgba(255, 138, 61, .12)); }
.intro p { color: var(--silver2); font-size: 15px; max-width: 640px; margin-top: 12px; line-height: 1.55; }
.card h2, .fsend h2 { font: 600 12px/1.2 "Inter Tight", sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--silver2); margin-bottom: 18px; }
.card h2 .serif, h2 .serif { font-family: var(--display); text-transform: none; letter-spacing: 0; font-size: 26px; color: var(--silver); }
.serif { font-family: var(--display); }

/* ---------- panels: dark glass with viewfinder corners ---------- */
.card { --vf: rgba(241, 236, 228, .22);
  background:
    linear-gradient(var(--vf), var(--vf)) top left / 14px 1px no-repeat, linear-gradient(var(--vf), var(--vf)) top left / 1px 14px no-repeat,
    linear-gradient(var(--vf), var(--vf)) top right / 14px 1px no-repeat, linear-gradient(var(--vf), var(--vf)) top right / 1px 14px no-repeat,
    linear-gradient(var(--vf), var(--vf)) bottom left / 14px 1px no-repeat, linear-gradient(var(--vf), var(--vf)) bottom left / 1px 14px no-repeat,
    linear-gradient(var(--vf), var(--vf)) bottom right / 14px 1px no-repeat, linear-gradient(var(--vf), var(--vf)) bottom right / 1px 14px no-repeat,
    linear-gradient(180deg, var(--glass2) 0%, var(--glass) 100%);
  border: 1px solid var(--hair); border-radius: 12px; backdrop-filter: blur(10px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: border-color .3s, box-shadow .3s, transform .3s, --vf .3s; }
.card:hover { --vf: rgba(255, 138, 61, .85); border-color: rgba(95, 212, 196, .22);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(95, 212, 196, .06), inset 0 1px 0 rgba(255, 255, 255, .05); }
@property --vf { syntax: "<color>"; inherits: true; initial-value: rgba(241, 236, 228, .22); }

/* ---------- buttons: the one hot colour ---------- */
.btn { background: linear-gradient(180deg, #ff9a52 0%, var(--orange) 45%, var(--orange-deep) 100%); color: #1b0d04; font-weight: 700;
  letter-spacing: .02em; border: 0; box-shadow: 0 6px 20px rgba(255, 110, 30, .28), inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn:not(:disabled):hover { box-shadow: 0 10px 30px rgba(255, 110, 30, .5), 0 0 0 1px rgba(255, 178, 122, .6), inset 0 1px 0 rgba(255, 255, 255, .45); filter: brightness(1.06); }
.btn.ghost { background: rgba(241, 236, 228, .03); color: var(--silver); border: 1px solid var(--hair); box-shadow: none; font-weight: 600; }
.btn.ghost:not(:disabled):hover { color: #fff; border-color: rgba(255, 138, 61, .55); background: rgba(255, 138, 61, .08); box-shadow: 0 0 20px rgba(255, 138, 61, .18); }
.btn:disabled { filter: grayscale(.8) brightness(.7); }

/* ---------- fields ---------- */
input, select, textarea { background: rgba(6, 9, 11, .6); border-color: rgba(241, 236, 228, .1); color: var(--silver); }
input:focus, select:focus, textarea:focus { border-color: rgba(255, 138, 61, .7); box-shadow: 0 0 0 3px rgba(255, 138, 61, .16); outline: none; }
input[type=checkbox], input[type=radio] { accent-color: var(--orange); }
label { color: var(--silver2); letter-spacing: .01em; }

/* ---------- live things are orange; progress is an orange beam ---------- */
.progress { background: rgba(241, 236, 228, .06); }
.progress i { background: linear-gradient(90deg, var(--orange-deep), var(--orange), #ffd0a8); box-shadow: 0 0 12px rgba(255, 138, 61, .6); }
.stages li.now { background: linear-gradient(180deg, #ff9a52, var(--orange-deep)); color: #1b0d04; }
.stages li.done { color: var(--teal); }
.nchip, .nbadge { background: var(--orange); color: #1b0d04; box-shadow: 0 0 12px rgba(255, 138, 61, .6); }
.fdrop { border-color: rgba(255, 138, 61, .45); }
.fdrop.over, .fdrop:hover { background: rgba(255, 138, 61, .07); border-color: var(--orange); }
.st.prog::before, .st.running::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%;
  background: #ff3b30; box-shadow: 0 0 8px #ff3b30; animation: rec 1.6s steps(1) infinite; vertical-align: 1px; }

/* ---------- numbers read as timecode ---------- */
.st, .nchip, .dw-label, code, .stages li, .tc, .rt b, .dfiles small, .fupf small, [data-upn], #fin-main, .timecode { font-family: var(--mono); }
.st { letter-spacing: .04em; }

  transition: opacity .4s ease; --fx: 50%; }
  background: radial-gradient(closest-side at var(--fx) 50%, rgba(255, 240, 225, .95), rgba(255, 170, 110, .55) 30%, rgba(95, 212, 196, .22) 62%, rgba(95, 212, 196, 0) 100%);
  filter: blur(.4px); }
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 200, 150, .55) 12%, rgba(255, 138, 61, .18) 34%, rgba(255, 138, 61, 0) 70%); }
  background: radial-gradient(circle, rgba(95, 212, 196, .6), rgba(95, 212, 196, 0) 70%); }

/* ---------- page change: a swipe, like the whole site is one long strip ----------
   Both pages move together (old out, new in, side by side), with a speed ramp: slow, fast, slow. At the fastest
   point a touch of motion blur and a slight pull-back. No separate tile animations: everything arrives as one. */
main { position: relative; }
html, body { overflow-x: hidden; }
section.view.push-out { display: block; position: absolute; pointer-events: none; /* left/width set from the page's measured place */
  animation: swipe-out-l .72s cubic-bezier(.76, 0, .24, 1) forwards; }
section.view.push-out.to-right { animation-name: swipe-out-r; }
section.view.push-in { animation: swipe-in-l .72s cubic-bezier(.76, 0, .24, 1) both; }
section.view.push-in.to-right { animation-name: swipe-in-r; }
@keyframes swipe-out-l { 0% { transform: translate3d(0, 0, 0); filter: blur(0); } 50% { filter: blur(7px); } 100% { transform: translate3d(calc(-100vw - 40px), 0, 0); filter: blur(2px); } }
@keyframes swipe-out-r { 0% { transform: translate3d(0, 0, 0); filter: blur(0); } 50% { filter: blur(7px); } 100% { transform: translate3d(calc(100vw + 40px), 0, 0); filter: blur(2px); } }
@keyframes swipe-in-l { 0% { transform: translate3d(calc(100vw + 40px), 0, 0); filter: blur(2px); } 50% { filter: blur(7px); } 100% { transform: translate3d(0, 0, 0); filter: blur(0); } }
@keyframes swipe-in-r { 0% { transform: translate3d(calc(-100vw - 40px), 0, 0); filter: blur(2px); } 50% { filter: blur(7px); } 100% { transform: translate3d(0, 0, 0); filter: blur(0); } }
/* the old per-tile entrances replayed after the swipe (the "glitch"): off */
.mscreen, .tcard2, #v-machines.enter .uacct, #v-machines.enter #machines > .card { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  section.view.push-out { display: none; } section.view.push-in, section.view.push-in * { animation: none !important; }
  .timecode i, .st.prog::before { animation: none; }
}

/* ---------- review pass (25 Oct 2026) ---------- */
/* tabs never break onto two lines; on narrow screens the row scrolls */
nav.tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
nav.tabs::-webkit-scrollbar { display: none; }
nav.tabs button { white-space: nowrap; padding: 8px 12px; }
#logout, #sound { white-space: nowrap; flex: none; }
/* Remote Tasks: the reel line sits on its own row above the title */
.tasks-intro::before { flex-basis: 100%; }
/* section headings outside panels read like credits too */
h2.board-h, h2.fq { font: 400 34px/1.1 var(--display); letter-spacing: 0; text-transform: none; color: var(--silver); }
h2.board-h::before { content: "— "; color: var(--orange); }
/* anything you picked is orange: selected cards, steps, rooms, chips */
.aspectcard:has(input:checked), .stylecard:has(input:checked), .qopt:has(input:checked), .pcard.on, .mscreen.on, .tcard2.on {
  border-color: var(--orange) !important; box-shadow: 0 0 0 1px var(--orange), 0 0 26px rgba(255, 138, 61, .3) !important; }
.pcard.on { background: rgba(255, 138, 61, .08); }
.flow-crumb li.on, .wiz-steps li.on span { border-color: rgba(255, 138, 61, .6); background: rgba(255, 138, 61, .16); box-shadow: 0 0 16px rgba(255, 138, 61, .3); color: #fff; }
.wiz-steps li.on span { background: var(--orange); color: #1b0d04; }
.troom.on, .tedit.on, .vchip.on { border-color: rgba(255, 138, 61, .7); background: rgba(255, 138, 61, .1); box-shadow: 0 0 18px rgba(255, 138, 61, .2); }
.seg input:checked + label { border-color: var(--orange); background: rgba(255, 138, 61, .14); }
/* receipt numbers: big timecode figures */
.rt b { font: 600 30px/1 var(--mono); letter-spacing: -.02em; }

/* ---------- calm (Nasir 25 Oct 2026: "elite = calm, easy to understand") ----------
   Solid panels so the background never fights the text; viewfinder corners only on the panel you point at;
   ONE orange button per page (.btn.hero) so the eye goes straight to the action; every other button is quiet. */
.card { --vf: rgba(241, 236, 228, 0); backdrop-filter: none; }
.card:hover { --vf: rgba(255, 138, 61, .7); }
.btn { background: rgba(241, 236, 228, .06); color: var(--silver); border: 1px solid rgba(241, 236, 228, .14); font-weight: 600;
  box-shadow: none; }
.btn:not(:disabled):hover { background: rgba(241, 236, 228, .1); border-color: rgba(255, 138, 61, .55); box-shadow: 0 0 18px rgba(255, 138, 61, .14); filter: none; }
.btn.hero { background: linear-gradient(180deg, #ff9a52 0%, var(--orange) 45%, var(--orange-deep) 100%); color: #1b0d04; border: 0; font-weight: 700;
  box-shadow: 0 6px 20px rgba(255, 110, 30, .28), inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn.hero:not(:disabled):hover { box-shadow: 0 10px 30px rgba(255, 110, 30, .45), 0 0 0 1px rgba(255, 178, 122, .6), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn::before { display: none; } /* no light sweep across every button */
/* every page stays on its own layer, so starting/ending a swipe never forces a redraw of its glows */
section.view { will-change: transform, filter; transform: translate3d(0, 0, 0); filter: blur(0); } /* resting = the swipe's first frame: no layer rebuild when it starts */
/* the scrollbar's space is always kept: going from a long page to a short one made the scrollbar vanish at the end of
   the swipe and the whole page widened ~15 px in one frame ("the dent") */
html { scrollbar-gutter: stable; overflow-y: scroll; }
/* the background moves with the pages, slower (parallax): out one way, the new scene in from the other side */
#bg.bgswipe { animation: bg-l .72s cubic-bezier(.76, 0, .24, 1); }
#bg.bgswipe.to-right { animation-name: bg-r; }
@keyframes bg-l { 0% { transform: translate3d(0, 0, 0); opacity: 1; } 45% { transform: translateX(-22vw); opacity: 0; } 55% { transform: translateX(22vw); opacity: 0; } 100% { transform: translate3d(0, 0, 0); opacity: 1; } }
@keyframes bg-r { 0% { transform: translate3d(0, 0, 0); opacity: 1; } 45% { transform: translateX(22vw); opacity: 0; } 55% { transform: translateX(-22vw); opacity: 0; } 100% { transform: translate3d(0, 0, 0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #bg.bgswipe { animation: none; } }
#bg { will-change: transform, opacity; transform: translate3d(0, 0, 0); }

/* ---------- Edits = the screening room: the player is the cinema screen ---------- */
#fg { position: fixed; inset: 0; z-index: 40; pointer-events: none; display: block; }
#v-library { padding-bottom: 150px; } /* room to scroll everything above the audience */
#v-library .lib { grid-template-columns: minmax(230px, 280px) 1fr; }
#v-library .card.player { background: none; border: 0; box-shadow: none; backdrop-filter: none; padding-left: 0; padding-right: 0; --vf: transparent; }
#v-library .card.player:hover { --vf: transparent; }
#v-library .player video { max-height: 72vh; border-radius: 2px; background: #000;
  box-shadow: 0 0 0 1px rgba(241, 236, 228, .08), 0 0 60px rgba(150, 225, 214, .14), 0 0 160px rgba(150, 225, 214, .08); }
#v-library .player .empty.big { min-height: 46vh; display: grid; place-content: center; border: 1px solid rgba(241, 236, 228, .08);
  background: rgba(241, 236, 228, .035); box-shadow: 0 0 80px rgba(150, 225, 214, .1); border-radius: 2px; }
.inv-full { display: inline-flex; align-items: center; gap: 6px; margin: 0; } .inv-full input { width: auto; }
/* titles: room for the tails of g/y/p (the gradient fill is clipped to the text box and cut them off) */
.intro h1 { line-height: 1.12; padding-bottom: .08em; }