/* FTM Studio PUBLIC pages (sign-in, setup, client review links): dark, matching the client quote + booking pages. */
:root{--bg:#000;--sheet:#0e0e0e;--panel:#0e0e0e;--panel2:#161616;--line:#262626;--line2:#1b1b1b;--ink:#f2f0eb;--mute:#8c8a85;--soft:#cfccc6;
  --paper:#f2f0eb;--late:#ff8a7a;--soon:#f2c46d;--good:#f2f0eb;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
::selection{background:var(--paper);color:#000}

/* ---- top bar: logo, small-caps nav, hairline ---- */
.top{position:sticky;top:0;z-index:5;background:rgba(0,0,0,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topin{display:flex;align-items:center;gap:34px;height:72px;max-width:1240px;margin:0 auto;padding:0 32px}
.mark{font:20px/1 Anton,sans-serif;letter-spacing:.02em;text-align:center;width:max-content;text-decoration:none;flex-shrink:0;white-space:nowrap}
.mark.big{font-size:34px;margin:0 auto 30px}
.top nav{display:flex;gap:26px;flex:1;height:100%}
.top nav a,.sett{display:flex;align-items:center;height:100%;text-decoration:none;color:var(--mute);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s}
.top nav a:hover,.sett:hover{color:var(--ink)}
.top nav a[aria-current],.sett[aria-current]{color:var(--ink);border-bottom-color:var(--paper)}
.top form{margin:0}
.ghost{background:none;border:1px solid var(--line);color:var(--mute);font:700 10px Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;padding:9px 12px;cursor:pointer;border-radius:2px;transition:color .15s,border-color .15s}
.ghost:hover{color:var(--ink);border-color:#4a4a4a}
.so-i{display:none}

/* ---- the sheet: every page sits in one box, like the quote page ---- */
main.wrap{max-width:1240px;margin:36px auto 72px;padding:8px 48px 48px;background:var(--sheet);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 0 0 1px rgba(255,255,255,.02),0 40px 100px rgba(0,0,0,.9);counter-reset:sec}
main.wrap.wide{max-width:none;margin:28px 28px 64px}
.wrap{max-width:1240px}

/* ---- headings ---- */
.hello{padding:34px 0 26px;margin-bottom:8px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line)}
.hello h1{flex-basis:100%;order:2}
.hello .eyebrow{order:1}.hello .pills,.hello .tabs{order:3}
h1{font:clamp(38px,5.2vw,60px)/1 Anton,sans-serif;text-transform:uppercase;letter-spacing:.005em;margin:0;font-weight:400}
.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin:0;font-weight:600}
.eyebrow a{text-decoration:none;border-bottom:1px solid var(--line)}.eyebrow a:hover{color:var(--ink)}
.tabs{display:flex;gap:20px}
.tabs a{text-decoration:none;color:var(--mute);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;padding:6px 0;border-bottom:2px solid transparent}
.tabs a:hover{color:var(--ink)}.tabs a[aria-current]{color:var(--ink);border-bottom-color:var(--paper)}
.pills{display:flex;gap:10px;align-items:center}
.sec{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:800;border-bottom:1px solid var(--ink);padding-bottom:10px;margin-bottom:18px}
.sec::before{counter-increment:sec;content:counter(sec,decimal-leading-zero);color:var(--mute);margin-right:12px}
.sec .mute{letter-spacing:.06em;text-transform:none;font-weight:500}
.block{margin-top:44px}

/* ---- stats + facts: Anton values between hairlines (no tiles) ---- */
.stats,.facts{display:grid;grid-template-columns:repeat(4,1fr);column-gap:32px;border-top:1px solid var(--line);margin-top:26px}
.facts{grid-template-columns:repeat(3,1fr)}
.facts.small{grid-template-columns:repeat(4,1fr)}
.stats>div,.facts>div{padding:16px 0 18px;border-bottom:1px solid var(--line);min-width:0}
.stats>div>span,.facts>div>span{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);font-weight:600;margin-bottom:4px}
.stats b{font:36px/1.15 Anton,sans-serif;font-weight:400;letter-spacing:.01em}
.facts b{font:22px/1.3 Anton,sans-serif;font-weight:400;letter-spacing:.02em;word-break:break-word}
.facts b a{text-decoration:none;border-bottom:1px solid var(--line)}
.facts b .mute,.facts b i{font:15px Inter,sans-serif}
.stats a{display:block;font-size:12px;color:var(--mute);text-decoration:none;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stats a:hover{color:var(--ink)}

/* ---- tables: rules, no boxes ---- */
.tablewrap{overflow-x:auto;border-top:1px solid var(--line)}
.t{width:100%;border-collapse:collapse;min-width:720px}
.t th{text-align:left;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);font-weight:700;padding:12px 14px 12px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.t td{padding:14px 14px 14px 0;border-bottom:1px solid var(--line2);vertical-align:middle}
.t tbody tr{transition:background .15s}
.t tbody tr:hover{background:#131313}
.t .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rowlink{text-decoration:none;font-weight:600}
.rowlink:hover{text-decoration:underline;text-underline-offset:3px}
.t td a:not(.rowlink){text-decoration:none;color:var(--soft)}
.sub{display:block;font-size:12px;color:var(--mute)}
.tag{margin-left:8px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);border:1px solid var(--line);padding:2px 6px;white-space:nowrap;font-weight:700}
.t em,.t td em{display:inline-block;font-style:normal;font-size:11px;font-weight:600;margin-left:8px}
.late{color:var(--late)}.soon{color:var(--soon)}.mute{color:var(--mute)}

/* ---- status labels: small caps with a square mark (no colored pills) ---- */
.pill{display:inline-flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;white-space:nowrap;color:var(--soft)}
.pill::before{content:"";width:7px;height:7px;background:currentColor;flex-shrink:0}
.st-inquiry,.st-quoted,.st-complete,.ds-todo{color:var(--mute)}
.st-booked,.st-preproduction,.st-shoot{color:var(--soon)}
.st-editing,.st-review,.st-revisions,.ds-editing,.ds-in_review{color:var(--ink)}
.ds-revisions{color:var(--soon)}
.st-delivered,.ds-approved,.ds-delivered{color:var(--ink)}
.st-delivered::before,.ds-approved::before,.ds-delivered::before{background:none;border:1px solid currentColor}
.st-lost{color:var(--mute);text-decoration:line-through}
.pay{font-size:13px;font-weight:600}
.pay-unpaid{color:var(--late)}.pay-deposit{color:var(--soon)}.pay-paid{color:var(--ink)}

/* ---- needs attention + shoots: ruled rows ---- */
.attn,.shoots{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.attn a{display:grid;grid-template-columns:14px 1fr;column-gap:12px;text-decoration:none;padding:14px 4px 14px 0;border-bottom:1px solid var(--line2);transition:background .15s}
.attn a::before{content:"";grid-row:1/3;width:8px;height:8px;margin-top:7px;background:var(--mute)}
.attn a:hover,.shoots a:hover{background:#131313}
.attn b{font-weight:600}.attn span{grid-column:2;color:var(--soft);font-size:13px}
.attn .lvl0 a::before{background:var(--late)}.attn .lvl1 a::before{background:var(--soon)}
.attn .lvl2 a::before{background:var(--paper)}.attn .lvl3 a::before{background:none;border:1px solid var(--soft)}
.shoots a{display:flex;gap:18px;align-items:center;text-decoration:none;padding:12px 4px 12px 0;border-bottom:1px solid var(--line2);transition:background .15s}
.shoots time{display:flex;flex-direction:column;align-items:center;width:46px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-weight:600}
.shoots time b{font:28px/1 Anton,sans-serif;color:var(--ink);letter-spacing:0}
.shoots span{flex:1;min-width:0;color:var(--mute);font-size:13px}.shoots span b{display:block;color:var(--ink);font-weight:600;font-size:15px}
.shoots em{font-style:normal;font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--soon);white-space:nowrap}

.links{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:16px}
.links a{text-decoration:none;font-size:13px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:2px}
.links a:hover{border-bottom-color:var(--ink)}
.notes{white-space:pre-wrap;color:var(--soft);margin:0}
.timeline{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.timeline li{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line2);color:var(--soft)}
.timeline time{color:var(--mute);font-variant-numeric:tabular-nums;font-size:12px;letter-spacing:.04em}
.timeline li.k-note span{color:var(--ink)}
.timeline a{text-decoration:none}
.empty{color:var(--mute);margin:0;padding:14px 0;border-top:1px solid var(--line)}
.fine{font-size:12px;color:var(--mute);margin-top:12px}
code{font-size:12px;background:var(--panel2);padding:1px 5px}

/* ---- buttons: square paper, Anton ---- */
.btn,form.inline .btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;background:var(--paper);color:#000;border:0;font:15px/1 Anton,sans-serif;letter-spacing:.07em;text-transform:uppercase;
  padding:12px 18px;border-radius:2px;white-space:nowrap;cursor:pointer;transition:background .15s}
.btn:hover{background:#fff}
.ghostbtn{background:none;color:var(--ink);border:1px solid #3a3a3a}
.ghostbtn:hover{background:none;border-color:var(--ink)}
.linkbtn{background:none;border:0;color:var(--ink);text-decoration:underline;text-underline-offset:3px;font:inherit;cursor:pointer;padding:0}
.ok,.err{padding:12px 16px;margin:18px 0 0;font-size:14px;border-radius:2px}
.ok{background:var(--paper);color:#000;font-weight:600}
.err{background:#2a1412;color:var(--late);border:1px solid #5a2620}
.danger{color:var(--late)!important;border-color:#5a2620!important;margin-left:auto}

/* ---- quick selects (stage / payment) ---- */
.quick{flex-wrap:wrap}
.quick form{margin:0}
.pillsel{appearance:none;-webkit-appearance:none;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238c8a85' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center;
  border:1px solid #3a3a3a;border-radius:2px;color:var(--ink);font:700 10px Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;padding:10px 30px 10px 12px;cursor:pointer}
.pillsel:hover{border-color:var(--ink)}
.pillsel.st-booked,.pillsel.st-preproduction,.pillsel.st-shoot,.pillsel.pay-deposit{color:var(--soon)}
.pillsel.pay-unpaid{color:var(--late)}
.pillsel option{color:#000;text-transform:none;letter-spacing:0}

/* ---- forms: paper panels, like the quote's Approve & Book form ---- */
form.edit{background:var(--paper);color:#000;padding:26px 26px 24px;border-radius:2px}
form.edit.narrow{max-width:540px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 20px}
.grid.one{grid-template-columns:1fr}
.f{display:flex;flex-direction:column;gap:7px;min-width:0}
.f.wide{grid-column:1/-1}
.f[hidden]{display:none}
.f>span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:#000}
.f small{color:#5f5e5a;font-size:12px}
.f input,.f select,.f textarea{font:15px Inter,sans-serif;color:#000;background:#fff;border:1px solid #000;border-radius:0;padding:11px 12px;width:100%}
.f select{appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center;padding-right:32px}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid #000;outline-offset:1px}
.f input[type=date]{color-scheme:light}
.f textarea,.noteform textarea{resize:vertical;line-height:1.5}
.actions{display:flex;gap:12px;align-items:center;margin-top:24px}
.actions button,.noteform button{background:#000;color:var(--paper);border:0;border-radius:2px;padding:14px 22px;font:17px/1 Anton,sans-serif;letter-spacing:.07em;text-transform:uppercase;cursor:pointer}
.actions button:hover{background:#262522}
form.edit .ghost{color:#000;border-color:#000;text-decoration:none;padding:13px 16px}
form.edit .ghost:hover{background:#000;color:var(--paper)}
form.edit .err{background:#fbe5e3;color:#b3261e;border:0;margin:0 0 16px}
.noteform{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px}
.noteform textarea{font:15px Inter,sans-serif;color:var(--ink);background:#090909;border:1px solid var(--line);border-radius:2px;padding:11px 12px;width:100%}
.noteform textarea:focus{outline:2px solid var(--ink);outline-offset:1px}
.noteform button{background:var(--paper);color:#000;font-size:15px;padding:13px 18px;white-space:nowrap}
details.add{margin-top:14px}
details.add summary{cursor:pointer;color:var(--ink);font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;list-style:none;display:inline-block;border:1px solid #3a3a3a;padding:11px 14px;border-radius:2px}
details.add summary:hover{border-color:var(--ink)}
details.add summary::-webkit-details-marker{display:none}
details.add[open] summary{margin-bottom:14px;background:var(--paper);color:#000;border-color:var(--paper)}
form.inline{display:flex;gap:16px;align-items:center;flex-wrap:wrap}

/* ---- layout helpers ---- */
.two{display:grid;grid-template-columns:1.25fr 1fr;gap:44px}
.two.tight{gap:18px}
.hint{margin:-8px 0 16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- pipeline board ---- */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);gap:0;overflow-x:auto;padding-bottom:12px;align-items:stretch;border-top:1px solid var(--ink)}
.col{min-height:260px;display:flex;flex-direction:column;border-right:1px solid var(--line2);transition:background .15s}
.col:last-child{border-right:0}
.col header{display:flex;justify-content:space-between;align-items:center;padding:14px 14px 12px;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:800}
.col header em{font:18px/1 Anton,sans-serif;font-style:normal;color:var(--mute);letter-spacing:0}
.col .drop{padding:12px;display:grid;gap:10px;flex:1;align-content:start}
.col.over{background:#151515}
.col-done{opacity:.7}
.card{background:#141414;border:1px solid #2a2a2a;border-radius:2px;padding:12px 13px;cursor:grab;display:grid;gap:6px;transition:border-color .15s,transform .12s}
.card:hover{border-color:#4a4a4a}
.card.lift{opacity:.45}
.card a{text-decoration:none}.card a b{font-weight:600;font-size:14px;line-height:1.3}
.card .cl{font-size:12px;color:var(--mute)}
.card .meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--soft)}
.card .meta em{font-style:normal;margin-left:4px;font-weight:600}
.card .meta i{font-style:normal;color:var(--mute);font-size:9px;letter-spacing:.16em;text-transform:uppercase;margin-right:3px;font-weight:700}
.prog{height:3px;background:#262626;overflow:hidden;margin-top:2px}
.prog i{display:block;height:100%;background:var(--paper)}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;background:var(--paper);color:#000;font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:12px 18px;border-radius:2px;transition:all .25s var(--ease);pointer-events:none;margin:0}
.toast.show{opacity:1;transform:translate(-50%,0)}.toast.bad{background:var(--late)}

/* ---- deliverable versions ---- */
.versions{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.versions li{padding:14px 0;border-bottom:1px solid var(--line2)}
.versions header{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.versions header b{font:22px/1 Anton,sans-serif;letter-spacing:.02em}
.versions header time{color:var(--mute);font-size:12px}
.versions header a{margin-left:auto;font-size:13px;font-weight:600;text-decoration:none;color:var(--soft)}
.versions p{margin:8px 0 0;color:var(--soft)}
.versions blockquote{margin:8px 0 0;padding:8px 12px;border-left:2px solid var(--soon);color:var(--ink);white-space:pre-wrap}

/* ---- sign-in + security ---- */
.login{max-width:440px;margin:10vh auto 0;text-align:left;background:var(--sheet);border:1px solid var(--line);border-radius:10px;padding:40px 40px 32px;box-shadow:0 40px 100px rgba(0,0,0,.9)}
main.wrap:has(> .login){background:none;border:0;box-shadow:none;padding:0}
.login .mark.big{margin:0 0 34px;text-align:center}
.login h1{margin-bottom:12px;font-size:40px}
.lead,.msg{color:var(--soft)}
.msg{background:#151515;border:1px solid var(--line);padding:12px 14px;text-align:left}
.msg.bad{border-color:#5a2620;color:var(--late)}
.dev{font-size:12px;color:var(--soon);word-break:break-all;text-align:left}
.login form{text-align:left;margin-top:22px}
.login label{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;margin-bottom:8px;color:var(--mute)}
.login input{width:100%;font:16px Inter,sans-serif;padding:13px;border:1px solid #3a3a3a;border-radius:2px;background:#090909;color:var(--ink);margin-bottom:16px}
.login input:focus{outline:2px solid var(--ink);outline-offset:1px}
.login button{width:100%;background:var(--paper);color:#000;border:0;border-radius:2px;padding:16px;font:20px Anton,sans-serif;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.login .fine a{color:var(--soft)}
.setup{border-top:1px solid var(--line);padding:22px 0;margin-bottom:10px;color:var(--soft)}
.setup.two{display:grid;grid-template-columns:1fr 240px;gap:32px;align-items:center}
.steps{margin:0 0 14px;padding-left:20px;line-height:1.75}
.qr{background:#fff;padding:12px;width:240px}
.qr svg{display:block;width:100%;height:auto}
.key{font:600 15px ui-monospace,Menlo,monospace;letter-spacing:.06em;color:var(--ink);word-break:break-all;margin:4px 0 0}
.codes{font:600 17px/1.9 ui-monospace,Menlo,monospace;color:#000;background:var(--paper);padding:18px 22px;columns:2;max-width:440px}
.setup .actions button{background:none;color:var(--ink);border:1px solid #3a3a3a;font-size:14px}
.setup .actions button:hover{border-color:var(--ink)}
button.ghost:disabled{opacity:.4;cursor:default}

/* ---- responsive ---- */
@media (max-width:900px){
  .topin{gap:18px;padding:0 18px;height:64px}
  .top nav{gap:16px}
  main.wrap{margin:16px 12px 48px;padding:4px 20px 32px}
  main.wrap.wide{margin:16px 12px 48px}
  .stats,.facts,.facts.small{grid-template-columns:1fr 1fr}
  .two{grid-template-columns:1fr;gap:0}
  .grid{grid-template-columns:1fr 1fr}
  .noteform{flex-direction:column;align-items:stretch}
  form.edit{padding:20px}
  .setup.two{grid-template-columns:1fr}.qr{width:200px}.codes{columns:1}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr}
  .mark{font-size:15px}
  .top nav{gap:12px;overflow-x:auto;scrollbar-width:none}.top nav::-webkit-scrollbar{display:none}
  .top nav a,.sett{font-size:10px;letter-spacing:.14em}
  .so-t{display:none}.so-i{display:block}.top .ghost{padding:8px 9px}
  .login{padding:30px 22px 24px;margin-top:4vh}
  h1{font-size:36px}
}
/* FTM Studio logo (2026-11-11) */
.brandlogo{display:block;height:38px;width:auto}.brandlogo.big{height:76px;margin:0 auto 28px}