/* ── Fonts ────────────────────────────────────────────────────────────────────
   Satoshi is the sole typeface (Lora removed in the design-system revision).
   CURRENT: Satoshi loaded from the Fontshare CDN (sends visitor IPs to a third party).
   GDPR / corporate-whitelist GO-LIVE STEP: self-host instead. See assets/fonts/README.md
   to download the woff2 files, then (1) DELETE the @import line below and
   (2) UNCOMMENT the @font-face block beneath it. Nothing else changes. */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700,900&display=swap');

/* SELF-HOSTED FONTS — uncomment after running the steps in assets/fonts/README.md
@font-face{font-family:'Satoshi';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/satoshi-300.woff2') format('woff2')}
@font-face{font-family:'Satoshi';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/satoshi-400.woff2') format('woff2')}
@font-face{font-family:'Satoshi';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/satoshi-500.woff2') format('woff2')}
@font-face{font-family:'Satoshi';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/satoshi-700.woff2') format('woff2')}
*/

/* ============================================================================
   Wildfire Control — main-site brand system ("liquid glass" over Deep Quench)
   Teal-tinted dark base, translucent glass surfaces, sharp geometric corners.
   Satoshi only (300 display / 500 chrome / 400 body). Flame Orange = the one primary.
   Flame-test accents: cyan = live/selected/focus, magenta = hover/danger,
   green = success. Colour is earned; one flame moment per view.
   ============================================================================ */
:root {
  /* ── Canvas ────────────────────────────────────────────────────────────── */
  --deep-quench: #0e2426;
  --well:        #0a1a1b;
  --charred:     #0d0f14;

  /* ── Glass surfaces ────────────────────────────────────────────────────── */
  --surface:   rgba(249,249,249,.04);
  --surface-2: rgba(249,249,249,.07);
  --surface-3: rgba(249,249,249,.10);

  /* ── Ink / text ────────────────────────────────────────────────────────── */
  --tinder:         #f9f9f9;             /* 15.6:1 — primary text          */
  --ink-2:          rgba(249,249,249,.72); /* 8.6:1 — supporting text      */
  --ink-3:          rgba(249,249,249,.60); /* 6.5:1 — metadata             */
  --smoke:          #7f7b78;             /* 3.9:1 — large-text labels ONLY  */
  --text-on-flame:  #0d0f14;            /* dark text on filled flame — AA  */

  /* ── Accent — CRITICAL / HIGH-ALERT ONLY ──────────────────────────────── */
  --flame:      #f53b00;                 /* bg tints, brand gradient, dot   */
  --flame-soft: rgba(245,59,0,.14);     /* alert bg tint                   */
  --flame-ring: rgba(245,59,0,.28);     /* alert border                    */
  --flame-text: #ed764d;                /* the ONLY orange text — WCAG AA 5.9:1 */
  --lithium:    #f50062;                /* critical error only              */

  /* ── System palette ────────────────────────────────────────────────────── */
  --quench:  #3b7175;                   /* teal mid-tone                   */
  --copper:  #00e4f5;                   /* 10.5:1 — interactive / live     */
  --barium:  #00f561;                   /* 11.1:1 — success / positive     */

  /* ── Brand gradient ────────────────────────────────────────────────────── */
  --brand-gradient: linear-gradient(165deg,var(--quench) 10%,#8d6a55 50%,#c45a34 67%,var(--flame) 100%);

  /* ── Lines ─────────────────────────────────────────────────────────────── */
  --rule:       rgba(249,249,249,.10);
  --rule-2:     rgba(249,249,249,.06);
  --line-strong:rgba(249,249,249,.18);

  /* ── Shape ("Soft" radius — 4px standard, 8px large; circles excepted) ─── */
  --r-sm:  4px;   /* small radius  — alerts, code, tooltips */
  --r:     4px;   /* standard      — cards, buttons, inputs  */
  --r-lg:  8px;   /* large         — modals, portal items    */
  --r-pill:999px; /* pill          — badges (count), toggles */

  /* ── Elevation ─────────────────────────────────────────────────────────── */
  --shadow:     0 10px 34px rgba(0,0,0,.46);
  --glow-focus: 0 0 0 2px rgba(0,228,245,.55), 0 0 12px rgba(0,228,245,.25);
  --glow-danger:0 0 0 2px rgba(245,0,98,.50),  0 0 12px rgba(245,0,98,.25);

  /* ── Motion ────────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(.23,1,.32,1);   /* the house curve */
  --dur:  .22s;   /* explicit transition duration (was used as var(--dur,.3s)) */

  /* ── Type — Satoshi only (Lora removed) ────────────────────────────────── */
  --font:  'Satoshi', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace;

  /* ── Portal radius ─────────────────────────────────────────────────────── */
  /* Portal filters/news chips align with studio chips — geometric (var(--r)), no pill */
  --portal-pill: var(--r);
}

*{box-sizing:border-box}
/* Reserve the scrollbar gutter so short and tall tabs don't shift the page
   sideways as the scrollbar appears/disappears between sections. */
html{ -webkit-text-size-adjust:100%; scrollbar-gutter:stable; overflow-y:scroll; }
body{
  margin:0; background:var(--deep-quench); color:var(--tinder);
  font-family:var(--font); font-size:15px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* Satoshi everywhere — display, UI chrome, and body copy */
h1,h2,h3,.display{font-family:var(--font);font-feature-settings:"ss02","ss03","ss04"}
h1,.display{font-feature-settings:"ss02","ss03"}
h2{font-feature-settings:normal}
h3{font-feature-settings:"ss01"}
.badge,.badge-needs,.stat-l,.table th,.crumb,.nav-badge,.brand-sub{font-feature-settings:"ss04"}
h1{font-size:32px;font-weight:300;letter-spacing:-.02em;line-height:1.12;margin:0 0 14px;color:var(--tinder)}
h2{font-size:20px;font-weight:500;letter-spacing:-.01em;margin:0 0 10px}
h3{font-size:16px;font-weight:700;letter-spacing:0;line-height:1.3;margin:0 0 12px;color:var(--tinder)}
.display{font-size:48px;font-weight:300;letter-spacing:-.03em;line-height:1.0;color:var(--tinder)}
p{margin:0 0 12px}
a{color:var(--copper);text-decoration:none;transition:color var(--dur,.3s) var(--ease)}
a:hover{color:var(--tinder)}
button,input,select,textarea{font-family:var(--font)}   /* chrome stays Satoshi */
code{background:var(--well);color:var(--copper);padding:1px 6px;border-radius:var(--r);font-family:var(--mono);font-size:.86em}
.muted{color:var(--ink-3)}
.sm{font-size:13px}
::selection{background:var(--flame);color:var(--text-on-flame)}
*:focus-visible{outline:none;box-shadow:var(--glow-focus);border-radius:var(--r)}

/* ── Tooltip / call-out utility ──────────────────────────────────────────────
   Reusable site-wide: add data-tooltip="…" to any control (staff & client).
   Shows on hover AND keyboard focus, as a light glass speech-bubble with a stalk.
   .tip-below = below the host; .tip-right = right-anchored (near a right edge /
   clipped container). Keep an accessible name (aria-label / visible text) on the
   host — the bubble is a visual hint and is NOT announced by screen readers. */
[data-tooltip]{position:relative}
[data-tooltip]::after,[data-tooltip]::before{
  opacity:0;visibility:hidden;pointer-events:none;z-index:120;
  transition:opacity var(--dur) var(--ease)}
[data-tooltip]::after{                  /* bubble */
  content:attr(data-tooltip);
  position:absolute;left:50%;bottom:calc(100% + 12px);transform:translateX(-50%);
  width:max-content;max-width:220px;padding:7px 11px;
  background:linear-gradient(var(--surface-3),var(--surface-3)),var(--deep-quench);
  color:var(--tinder);border:1px solid var(--line-strong);
  border-radius:var(--r-sm);box-shadow:0 6px 20px rgba(0,0,0,.35);
  font-family:var(--font);font-size:12px;font-weight:500;line-height:1.4;letter-spacing:0;
  text-transform:none;text-align:center;white-space:normal}
[data-tooltip]::before{                 /* stalk */
  content:"";position:absolute;left:50%;bottom:calc(100% + 12px);width:10px;height:10px;
  transform:translate(-50%,50%) rotate(45deg);
  background:linear-gradient(var(--surface-3),var(--surface-3)),var(--deep-quench);
  border-right:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
[data-tooltip]:hover::after,[data-tooltip]:focus-visible::after,
[data-tooltip]:hover::before,[data-tooltip]:focus-visible::before{opacity:1;visibility:visible}
/* Variant: below the host (stalk points up) */
[data-tooltip].tip-below::after{bottom:auto;top:calc(100% + 12px)}
[data-tooltip].tip-below::before{bottom:auto;top:calc(100% + 12px);transform:translate(-50%,-50%) rotate(45deg);
  border:0;border-left:1px solid var(--line-strong);border-top:1px solid var(--line-strong)}
/* Variant: right-anchored (stalk sits ~22px in from the right, over the host) */
[data-tooltip].tip-right::after{left:auto;right:0;transform:none}
[data-tooltip].tip-right::before{left:auto;right:22px;transform:translate(50%,50%) rotate(45deg)}
@media (prefers-reduced-motion:reduce){[data-tooltip]::after,[data-tooltip]::before{transition:none}}

/* ── @mentions: inline tokens, picker dropdown, deep-link flash ─────────────── */
.mention{color:var(--copper);font-weight:600}
.mention.wf{color:var(--flame-text)}
.wf-mention-pop{position:absolute;z-index:130;max-height:240px;overflow:auto;padding:4px;
  background:linear-gradient(var(--surface-3),var(--surface-3)),var(--charred);
  border:1px solid var(--line-strong);border-radius:var(--r);box-shadow:var(--shadow)}
.wf-mention-opt{display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:7px 10px;border-radius:var(--r-sm);font-family:var(--font);transition:background .12s}
.wf-mention-opt:hover,.wf-mention-opt.on{background:var(--surface-2)}
.wf-mention-nm{font-size:13px;font-weight:600;color:var(--tinder)}
.wf-mention-opt.on .wf-mention-nm{color:var(--copper)}
.wf-mention-sub{font-size:11px;color:var(--ink-3)}
.flash{animation:wf-flash 1.2s var(--ease)}
@keyframes wf-flash{0%{box-shadow:0 0 0 2px var(--copper)}100%{box-shadow:0 0 0 2px transparent}}
@media (prefers-reduced-motion:reduce){.flash{animation:none}}

/* ── Brand / logo ─────────────────────────────────────────────────────────── */
.brand{display:flex;align-items:center;gap:14px;font-family:var(--font);font-weight:500;color:var(--tinder)}
.brand a{color:inherit;display:flex;align-items:center;gap:14px}
.brand-logo{height:44px;width:auto;display:block}
.brand-sub{font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
  padding-left:14px;border-left:1px solid var(--rule)}
.brand-dot{width:9px;height:9px;border-radius:50%;background:var(--flame);box-shadow:0 0 12px var(--flame)}

/* ── Top bar ──────────────────────────────────────────────────────────────── */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;
  background:rgba(10,27,27,.82);backdrop-filter:saturate(150%) blur(16px);-webkit-backdrop-filter:saturate(150%) blur(16px);
  border-bottom:2px solid transparent;border-image:var(--brand-gradient) 1;padding:0 26px;position:sticky;top:0;z-index:50}
.topbar-right{display:flex;align-items:center;gap:14px}
.topbar .user,.review-head .user{font-family:var(--font);font-weight:500;color:var(--ink-2);font-size:14px}

/* ── Layout ───────────────────────────────────────────────────────────────── */
.wrap{max-width:1100px;margin:32px auto;padding:0 28px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.page-head h1{margin:0}
.actions{display:flex;gap:10px}
.crumb{font-family:var(--font);font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.crumb a{color:var(--ink-3)}.crumb a:hover{color:var(--copper)}
/* Plain "Back to Projects" control replacing the breadcrumb trail */
.back-btn{display:inline-flex;align-items:center;gap:7px;margin-bottom:14px;font-family:var(--font);
  font-size:13px;font-weight:500;color:var(--ink-2);text-decoration:none;
  border:1px solid var(--rule);background:var(--surface-2);padding:7px 13px 7px 11px;
  transition:color var(--dur,.3s) var(--ease),border-color var(--dur,.3s) var(--ease),background var(--dur,.3s) var(--ease)}
.back-btn:hover{color:var(--tinder);border-color:rgba(249,249,249,.22);text-decoration:none}
.back-btn svg{width:14px;height:14px;flex:none}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:22px}
.inline-form{margin-bottom:16px}
.inline-form .row{display:flex;gap:14px;flex-wrap:wrap}
.inline-form .row.end{justify-content:flex-end;margin-top:10px}
.inline-form label{flex:1;min-width:180px;display:flex;flex-direction:column;gap:5px;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--smoke)}
.card-head{display:flex;align-items:center;gap:12px;margin:20px 0 12px}
.card-head.between{justify-content:space-between}
.card-head h3{margin:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:780px){.grid2{grid-template-columns:1fr}}

/* ── Stats ────────────────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin-bottom:20px}
.sm-stats{grid-template-columns:repeat(4,1fr)}
.stat{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:14px 10px;text-align:center;transition:border-color .15s,transform .15s}
.stat:hover{border-color:rgba(0,228,245,.3);transform:translateY(-1px)}
.stat-n{font-size:26px;font-family:var(--font);font-weight:300;letter-spacing:-.02em;color:var(--tinder);font-variant-numeric:tabular-nums}
.stat-l{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--smoke);margin-top:3px}
@media(max-width:820px){.stats{grid-template-columns:repeat(4,1fr)}}

/* ── Tables ───────────────────────────────────────────────────────────────── */
.table{width:100%;border-collapse:collapse}
.table th{text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  color:var(--smoke);border-bottom:1px solid var(--rule);padding:10px 8px}
.table td{padding:13px 8px;border-bottom:1px solid var(--rule-2);vertical-align:top;color:var(--ink-2);font-size:14px}
.table td strong{color:var(--tinder);font-weight:700}
.table tr:last-child td{border-bottom:0}
.table tbody tr{transition:background .12s}
.table tbody tr:hover{background:rgba(249,249,249,.02)}
.table .right,.right{text-align:right}
.empty{text-align:center;color:var(--ink-3);padding:30px 8px}
.link{color:var(--copper);font-weight:600}

/* ── Badges / lifecycle ───────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font);font-size:11px;font-weight:700;padding:3px 10px;border-radius:var(--r);
  letter-spacing:.06em;text-transform:uppercase;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--rule)}
/* "Needs review" / attention badge — flame-text accent (WCAG AA 5.9:1) */
.badge-needs{display:inline-flex;align-items:center;gap:6px;font-family:var(--font);font-size:11px;font-weight:700;padding:3px 10px;border-radius:var(--r);
  letter-spacing:.04em;text-transform:uppercase;background:var(--flame-soft);color:var(--flame-text);border:1px solid var(--flame-ring)}
/* Lifecycle badges — copper = action needed, barium = positive, smoke = neutral */
.state-enquiry{background:rgba(127,123,120,.12);color:var(--ink-2);border-color:rgba(127,123,120,.28)}
.state-quoted{background:rgba(0,228,245,.10);color:var(--copper);border-color:rgba(0,228,245,.28)}
.state-approved{background:rgba(0,245,97,.10);color:var(--barium);border-color:rgba(0,245,97,.28)}
.state-in_production{background:rgba(0,245,97,.10);color:var(--barium);border-color:rgba(0,245,97,.28)}
.state-review{background:rgba(0,228,245,.10);color:var(--copper);border-color:rgba(0,228,245,.28)}
.state-delivered{background:rgba(59,113,117,.18);color:#6fb3b8;border-color:rgba(59,113,117,.35)}
.state-invoiced{background:rgba(0,245,97,.10);color:var(--barium);border-color:rgba(0,245,97,.28)}
.state-closed{background:rgba(127,123,120,.10);color:var(--smoke);border-color:rgba(127,123,120,.22)}
.reason-completed{background:rgba(0,245,97,.12);color:var(--barium);border-color:rgba(0,245,97,.3)}

/* Dashboard mini-Gantt of in-production projects */
.dash-gantt{margin-bottom:18px}
.dg-rows{display:flex;flex-direction:column;gap:7px;margin-top:6px}
.dg-row{display:grid;grid-template-columns:210px 1fr;gap:14px;align-items:center;text-decoration:none;color:var(--tinder)}
.dg-row:hover{text-decoration:none}
.dg-name{font-family:var(--font);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dg-track{position:relative;height:16px;background:var(--surface-2);border:1px solid var(--rule)}
.dg-bar{position:absolute;top:-1px;bottom:-1px;background:rgba(0,245,97,.28);border:1px solid rgba(0,245,97,.5);min-width:3px}
.dg-row:hover .dg-bar{background:rgba(0,245,97,.45)}
.dg-today{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--copper);box-shadow:0 0 6px rgba(0,228,245,.55)}
.dg-scale{display:grid;grid-template-columns:210px 1fr;gap:14px;margin-top:8px}
.dg-scale-x{display:flex;justify-content:space-between}

/* ── Messaging: long-form project notes, styled like the comment threads ───── */
/* Collapsible panel (shared: client portal + staff project Overview) */
.pt-msgs{margin:26px 0 6px;border:1px solid var(--rule);border-radius:var(--r);background:rgba(249,249,249,.02);overflow:hidden}
.pt-msgs-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;background:none;border:0;cursor:pointer;color:var(--tinder);font-family:var(--font);font-weight:700;font-size:14px;text-align:left;transition:background .15s}
.pt-msgs-head:hover{background:var(--surface-2)}
.pt-msgs-title{display:flex;align-items:center;gap:9px}
.pt-msgs-title svg{width:18px;height:18px;color:var(--copper);flex:none}
.pt-msgs-right{display:flex;align-items:center;gap:10px;flex:none}
.pt-msgs-badge{background:var(--flame-soft);color:var(--flame-text);border:1px solid var(--flame-ring);font-size:11px;font-weight:700;padding:2px 9px;border-radius:var(--r);letter-spacing:.03em}
.pt-msgs-badge[hidden]{display:none}
.pt-msgs .pt-chev{color:var(--ink-3);font-size:11px;flex:none}
.pt-msgs-body{padding:8px 16px 16px;border-top:1px solid var(--rule-2)}
.pt-msgs-body[hidden]{display:none}

.wf-thread{display:flex;flex-direction:column;gap:10px}
.wf-thread-list{display:flex;flex-direction:column;max-height:52vh;overflow-y:auto;padding:0 2px}
.wf-thread-empty{color:var(--ink-3);text-align:center;padding:22px 12px;font-size:13px}
/* a message = a comment-style entry, accent bar by sender (flame=studio, copper=client) */
.wf-msg{position:relative;padding:11px 26px 11px 14px;border-bottom:1px solid var(--rule-2)}
.wf-msg:last-child{border-bottom:0}
.wf-msg.wf{box-shadow:inset 3px 0 0 var(--flame)}
.wf-msg.client{box-shadow:inset 3px 0 0 var(--copper)}
.wf-msg-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.wf-msg-head strong{font-size:13.5px;color:var(--tinder)}
.wf-msg.wf .wf-msg-head strong{color:var(--flame-text)}
.wf-msg.client .wf-msg-head strong{color:var(--copper)}
.wf-msg-time{font-size:11.5px;color:var(--ink-3)}
.wf-msg-body{font-size:14px;color:var(--ink-2);line-height:1.55;margin-top:4px;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
/* quoted reply (addressing a specific person) shown at the top of a message */
.wf-msg-quote{display:flex;gap:6px;align-items:baseline;font-size:12px;color:var(--ink-3);border-left:2px solid var(--rule);padding:2px 0 4px 8px;margin-bottom:4px}
.wf-msg-quote .wf-q-arrow{color:var(--copper)}
.wf-msg-quote b{color:var(--ink-2)}
.wf-msg-quote span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px}
.wf-msg-foot{margin-top:6px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.wf-msg-status{font-size:11px;color:var(--ink-3);letter-spacing:.02em}
.wf-msg-reply{background:none;border:0;color:var(--ink-3);font-family:var(--font);font-size:11.5px;cursor:pointer;padding:0;transition:color .15s}
.wf-msg-reply:hover{color:var(--copper)}
/* "replying to …" chip above the compose box */
.wf-reply-chip{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding:6px 10px;
  background:var(--surface-2);border:1px solid var(--rule);border-left:2px solid var(--copper);border-radius:var(--r);font-size:12.5px;color:var(--ink-2)}
.wf-reply-chip[hidden]{display:none}
.wf-reply-chip b{color:var(--tinder)}
.wf-reply-x{background:none;border:0;color:var(--smoke);font-size:15px;line-height:1;cursor:pointer;padding:0 2px}
.wf-reply-x:hover{color:var(--lithium)}
.wf-ico{width:16px;height:16px;display:inline-block;vertical-align:middle}
.wf-msg-ack .wf-ico{width:14px;height:14px}
.wf-msg-del{position:absolute;top:10px;right:0;background:none;border:0;color:var(--smoke);font-size:16px;line-height:1;cursor:pointer;opacity:.45;transition:opacity .15s,color .15s}
.wf-msg-del:hover{opacity:1;color:var(--lithium)}
/* compose row with emoji picker + Messenger-style quick 👍 */
.wf-thread-compose{position:relative;display:flex;gap:8px;align-items:flex-end;border-top:1px solid var(--rule-2);padding-top:10px}
.wf-thread-compose textarea{flex:1;resize:none;background:var(--surface-2);border:1px solid var(--rule);color:var(--tinder);
  border-radius:var(--r);padding:9px 11px;font-family:var(--font);font-size:14px;line-height:1.4;min-height:40px;max-height:140px}
.wf-thread-compose textarea:focus{outline:none;border-color:var(--copper);box-shadow:var(--glow-focus)}
.wf-emoji-btn{flex:none;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface-2);
  border:1px solid var(--rule);color:var(--ink-2);cursor:pointer;border-radius:var(--r);transition:color .2s,border-color .2s}
.wf-emoji-btn:hover{color:var(--copper);border-color:rgba(0,228,245,.4)}
.wf-emoji-btn .wf-ico{width:20px;height:20px}
.wf-send{flex:none;min-width:44px;height:40px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:#324041;color:#51f461;border:1px solid var(--flame);cursor:pointer;border-radius:var(--r);
  font-family:var(--font);font-weight:500;font-size:14px;padding:0 14px;transition:filter .2s}
.wf-send:hover{filter:brightness(1.06)}
.wf-send .wf-ico{width:20px;height:20px}
.wf-send-thumb{display:none;align-items:center}
.wf-thread-compose.empty .wf-send-text{display:none}
.wf-thread-compose.empty .wf-send{padding:0 12px}
.wf-thread-compose.empty .wf-send-thumb{display:inline-flex}
.wf-emoji-pop{position:absolute;bottom:calc(100% + 6px);left:0;display:flex;flex-wrap:wrap;gap:2px;width:212px;padding:6px;
  background:var(--charred);border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--shadow);z-index:20}
.wf-emoji-pop[hidden]{display:none}
.wf-emoji{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;font-size:19px;cursor:pointer;border-radius:var(--r-sm);transition:background .15s}
.wf-emoji:hover{background:var(--surface-3)}

/* Staff Messages inbox (messages.php) */
.msg-layout{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
.msg-inbox{padding:6px;max-height:72vh;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.msg-conv{display:flex;flex-direction:column;gap:2px;text-align:left;background:none;border:0;border-left:3px solid transparent;
  padding:11px 13px;cursor:pointer;color:var(--tinder);font-family:var(--font);transition:background .15s,border-color .15s}
.msg-conv:hover{background:var(--surface-2)}
.msg-conv.on{background:var(--surface-2);border-left-color:var(--copper)}
.msg-conv.unread .msg-conv-name{font-weight:700}
.msg-conv-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.msg-conv-name{font-size:14px;font-weight:600}
.msg-conv-badge{background:var(--flame-soft);color:var(--flame-text);border:1px solid var(--flame-ring);font-size:11px;font-weight:700;min-width:18px;height:18px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 5px;border-radius:var(--r)}
.msg-conv-proj{font-size:12px;color:var(--ink-2)}
.msg-conv-snippet{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-conv-time{font-size:11px;color:var(--ink-3)}
.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:4px;background:var(--flame-soft);color:var(--flame-text);border:1px solid var(--flame-ring);border-radius:var(--r);font-size:11px;font-weight:700;font-family:var(--font)}
.msg-pane{padding:16px}
.msg-pane-head{display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:var(--font);font-weight:700;
  font-size:15px;color:var(--tinder);margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--rule-2)}
@media(max-width:760px){.msg-layout{grid-template-columns:1fr}}
.reason-lost{background:rgba(245,0,98,.1);color:#ff6c9d;border-color:rgba(245,0,98,.3)}

/* Recent comments feed (project Overview) */
.rc-feed{list-style:none;margin:0;padding:0;max-height:280px;overflow-y:auto}
.rc-feed-item{display:block;padding:10px 8px;border-top:1px solid var(--rule-2)}
.rc-feed-item:first-child{border-top:0}
.rc-feed-item.client{border-left:2px solid var(--copper)}
.rc-feed-item.studio{border-left:2px solid var(--flame)}   /* flame = studio, copper = client (matches the message thread) */
a.rc-feed-item{text-decoration:none;color:inherit}
.rc-feed-item.linked{cursor:pointer;transition:background .15s}
.rc-feed-item.linked:hover{background:var(--surface-2)}
.rc-feed-go{margin-left:auto;color:var(--copper);font-weight:700;opacity:0;transition:opacity .15s}
.rc-feed-item.linked:hover .rc-feed-go{opacity:1}
.rc-feed-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
/* flash a storyboard cell when arrived at via a Recent-comments deep link */
.cell-flash{animation:cellFlash 2.2s var(--ease)}
@keyframes cellFlash{0%,100%{box-shadow:none}12%,40%{box-shadow:0 0 0 3px var(--copper),0 0 18px rgba(0,228,245,.5)}}
.rc-feed-h strong{color:var(--tinder);font-size:13px}
.rc-feed-ctx{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--rule);padding:1px 7px;border-radius:var(--r)}
.rc-feed-b{font-size:13px;color:var(--ink-2);margin-top:4px;line-height:1.45}
/* "For your attention" list (studio At a glance) */
.attn-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;max-height:300px;overflow-y:auto}
.attn-item{display:flex;gap:10px;align-items:flex-start;padding:9px 8px 9px 2px;border-top:1px solid var(--rule-2);font-size:13px;color:var(--ink-2);line-height:1.5;text-decoration:none}
.attn-item:first-child{border-top:0}
.attn-item strong{color:var(--tinder);font-weight:700}
a.attn-item{cursor:pointer;transition:background .12s}
a.attn-item:hover{background:var(--surface-2)}
.attn-ic{width:18px;height:15px;object-fit:contain;opacity:.8;flex:none;margin-top:2px}

/* Closed sub-filter (Completed / Lost) shown only on the Closed view */
.reason-filter{display:inline-flex;gap:6px;align-items:center}
.reason-filter[hidden]{display:none}
.chip.xs{padding:4px 11px;font-size:12px}

/* Project rows are click-to-open (the old "Open" link was removed) */
tr.prow[data-href]{cursor:pointer}
tr.prow[data-href]:hover td{background:var(--surface-2)}
tr.prow[data-href]:focus-visible{outline:2px solid var(--copper);outline-offset:-2px}
.select[hidden]{display:none}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--flame-soft);color:var(--flame-text);
  border:1px solid var(--flame-ring);padding:9px 17px;border-radius:var(--r);font-family:var(--font);font-weight:500;font-size:13px;
  letter-spacing:.01em;cursor:pointer;transition:filter var(--dur,.3s) var(--ease),box-shadow var(--dur,.3s) var(--ease),background var(--dur,.3s) var(--ease),color var(--dur,.3s) var(--ease),border-color var(--dur,.3s) var(--ease);
  text-decoration:none;line-height:1}
.btn:hover{filter:none;background:rgba(245,59,0,.22);border-color:var(--flame);color:var(--flame-text);box-shadow:0 0 12px rgba(245,59,0,.18);text-decoration:none}
.btn:focus-visible{outline:none;box-shadow:var(--glow-focus);border-color:var(--copper);color:var(--flame-text);background:var(--flame-soft)}
.btn:active{background:rgba(245,59,0,.28);border-color:var(--flame);transform:translateY(1px)}
.btn.ghost{background:var(--surface);color:var(--ink-2);border-color:var(--rule);filter:none}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--line-strong);color:var(--tinder);box-shadow:none;filter:none}
.btn.ghost:focus-visible{outline:none;box-shadow:var(--glow-focus);border-color:var(--copper);color:var(--tinder)}
.btn.sm{padding:6px 12px;font-size:12px}
.btn:disabled{opacity:.38;cursor:not-allowed;pointer-events:none;filter:none;box-shadow:none}

/* ── Lightbox (shared image/video viewer) ──────────────────────────────────── */
.wf-lb{position:fixed;inset:0;z-index:2000;background:rgba(8,9,12,.92);backdrop-filter:blur(4px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 64px}
.wf-lb[hidden]{display:none}
.wf-lb-stage{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;width:100%}
.wf-lb-stage img,.wf-lb-stage video{max-width:100%;max-height:78vh;border-radius:var(--r);box-shadow:0 20px 60px rgba(0,0,0,.6)}
.wf-lb-embed{width:min(90vw,1280px);aspect-ratio:16/9;max-height:78vh;border-radius:var(--r);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6);background:#000}
.wf-lb-embed iframe{width:100%;height:100%;border:0;display:block}
.wf-lb-x{position:absolute;top:18px;right:22px;width:42px;height:42px;border-radius:50%;border:1px solid var(--rule);background:var(--surface-2);color:var(--tinder);font-size:24px;line-height:1;cursor:pointer;transition:.15s}
.wf-lb-x:hover{background:var(--flame);color:var(--charred);border-color:var(--flame)}
.wf-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1px solid var(--rule);background:var(--surface-2);color:var(--tinder);font-size:26px;line-height:1;cursor:pointer;transition:.15s}
.wf-lb-nav:hover{background:var(--surface-3)}
.wf-lb-prev{left:18px}.wf-lb-next{right:18px}
.wf-lb-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;max-width:900px;margin-top:14px}
.wf-lb-cap{color:var(--ink-2);font-size:13px}
@media(max-width:620px){.wf-lb{padding:44px 14px}.wf-lb-nav{width:38px;height:38px}}

/* ── Toasts (floating, non-intrusive notifications) ─────────────────────────── */
#toasts{position:fixed;top:74px;right:22px;z-index:1000;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{pointer-events:auto;min-width:180px;max-width:340px;padding:11px 15px;border-radius:var(--r-sm);font-size:13.5px;font-weight:600;
  background:var(--surface-3);color:var(--tinder);border:1px solid var(--rule);box-shadow:var(--shadow);
  opacity:1;transform:none;animation:toastIn .25s ease backwards;transition:opacity .3s ease,transform .3s ease}
.toast.out{opacity:0;transform:translateY(-6px)}
.toast.ok{border-left:3px solid var(--barium)}
.toast.err{border-left:3px solid var(--lithium)}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px) scale(.98)}}
@media(prefers-reduced-motion:reduce){.toast{animation:none}}
@media(max-width:560px){#toasts{left:16px;right:16px;top:68px}.toast{max-width:none}}

/* ── Forms ────────────────────────────────────────────────────────────────── */
input[type=text],input[type=email],input[type=password],input[type=number],textarea,select{
  width:100%;padding:10px 12px;border:1px solid var(--rule);border-radius:var(--r);font-size:14px;
  font-family:var(--font);background:var(--surface-2);color:var(--tinder);transition:border-color var(--dur,.3s) var(--ease),box-shadow var(--dur,.3s) var(--ease)}
input::placeholder,textarea::placeholder{color:var(--smoke)}
/* Native <select> popup list — force a dark opaque background (the translucent glass
   surface made the option list render white-on-white). */
select option,select optgroup{background:#16302f;color:var(--tinder)}
/* Keep browser-autofilled fields on-theme (Chrome paints them pale by default) */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,
textarea:-webkit-autofill,select:-webkit-autofill{
  -webkit-text-fill-color:var(--tinder);caret-color:var(--tinder);
  /* opaque inset — a translucent fill lets Chrome's autofill paint bleed through */
  -webkit-box-shadow:0 0 0 1000px #16302f inset;box-shadow:0 0 0 1000px #16302f inset;
  transition:background-color 99999s ease-in-out 0s}
/* Hover lift on themed text controls (kept off bare/transparent component inputs) */
input[type=text]:hover,input[type=email]:hover,input[type=number]:hover,input[type=password]:hover,input[type=search]:hover,select:hover,textarea:hover,.input:hover{background:var(--surface-3);border-color:var(--line-strong)}
/* Focus = cyan, the site's "live" signal */
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--copper);box-shadow:var(--glow-focus)}
/* Validation error + disabled states */
input.err,select.err,textarea.err,.input.err{border-color:var(--lithium);box-shadow:var(--glow-danger)}
input:disabled,select:disabled,textarea:disabled,.input:disabled{opacity:.38;cursor:not-allowed}
/* `.input` utility class — themes any control incl. bare <input> and <input type=date>,
   which the type-enumerated rule above misses (was rendering white text on white). */
.input{width:100%;padding:9px 12px;border:1px solid var(--rule);border-radius:var(--r);font-size:14px;
  font-family:var(--font);background:var(--surface-2);color:var(--tinder);transition:border-color var(--dur,.3s) var(--ease),box-shadow var(--dur,.3s) var(--ease)}
.input:focus{outline:none;border-color:var(--copper);box-shadow:var(--glow-focus)}
input[type=date],input[type=time],input[type=datetime-local]{color-scheme:dark}
/* Safety net: any text control (incl. bare <input> with no type, e.g. shot-type)
   must have a readable foreground on the dark canvas. Colour only — backgrounds
   stay owned by component classes so transparent controls aren't clobbered. */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),
textarea,select{color:var(--tinder)}
label.check{flex-direction:row;align-items:center;gap:8px;color:var(--ink-2);text-transform:none;letter-spacing:0;font-weight:400;font-size:14px}
.stk{display:flex;flex-direction:column;gap:6px;margin-bottom:13px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--smoke)}
.select{appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding:9px 34px 9px 11px;background-color:var(--surface-2);color:var(--tinder);
  border:1px solid var(--rule);border-radius:var(--r);font-family:var(--font);font-size:14px;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237f7b78' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center}
.select.sm{padding:7px 30px 7px 9px;font-size:13px}

/* ── Alerts ───────────────────────────────────────────────────────────────── */
/* Alerts — left-accent. ok=done · warn=info (copper) · err=failure · crit=urgent (flame) */
.alert{padding:12px 15px;border-radius:var(--r-sm);margin:6px 0;font-size:13px;border:1px solid;border-left-width:3px;display:flex;gap:10px}
.alert-icon{flex:none;font-size:14px}
.alert.ok{background:rgba(0,245,97,.08);color:#7bffb0;border-color:rgba(0,245,97,.3);border-left-color:var(--barium)}
.alert.warn{background:rgba(0,228,245,.06);color:var(--copper);border-color:rgba(0,228,245,.3);border-left-color:var(--copper)}
.alert.err{background:rgba(245,0,98,.08);color:#ff6c9d;border-color:rgba(245,0,98,.32);border-left-color:var(--lithium)}
.alert.crit{background:var(--flame-soft);color:var(--flame-text);border-color:var(--flame-ring);border-left-color:var(--flame)}

/* ── Auth screens ─────────────────────────────────────────────────────────── */
.auth-bg{display:flex;align-items:center;justify-content:center;min-height:100dvh;padding:24px;
  background:radial-gradient(900px 500px at 50% -10%, rgba(245,59,0,.14), transparent 60%), var(--deep-quench)}
.auth-card{width:400px;max-width:94vw;background:var(--surface);border:1px solid var(--rule);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow);border-top:1px solid var(--quench)}
.auth-card .brand{margin-bottom:8px}
.auth-card h1{font-size:26px;margin:6px 0 16px}
.auth-card label{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--smoke);margin-bottom:13px}
.auth-card .btn{width:100%;justify-content:center;margin-top:6px;padding:12px}
.foot{margin-top:18px;text-align:center;color:var(--ink-3)}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.tabs{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--rule);margin:10px 0 22px}
.tab{border-radius:var(--r-sm);padding:11px 18px;border-bottom:2px solid transparent;color:var(--ink-3);font-family:var(--font);font-weight:500;font-size:13px;
  letter-spacing:.02em;transition:color var(--dur,.3s) var(--ease),border-color var(--dur,.3s) var(--ease)}
.tab:hover{color:var(--tinder);text-decoration:none}
.tab:focus-visible{outline:none;color:var(--copper);box-shadow:inset 0 -2px 0 var(--copper)}
.tab.on{color:var(--copper);border-bottom-color:var(--copper)}   /* cyan = the live/selected signal */

/* ── Timeline ─────────────────────────────────────────────────────────────── */
.timeline{list-style:none;margin:0;padding:0;max-height:260px;overflow-y:auto}
.timeline li{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid var(--rule-2)}
.timeline li:last-child{border-bottom:0}
.timeline .dot{width:8px;height:8px;border-radius:50%;background:var(--smoke);margin-top:7px;flex:none}
.dot.t-status{background:var(--copper);box-shadow:0 0 8px rgba(0,228,245,.5)}
.dot.t-system{background:var(--flame);box-shadow:0 0 8px var(--flame)}
.dot.t-note{background:var(--smoke)}

/* ── Reference palette ────────────────────────────────────────────────────── */
.inline-up{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.inline-up input[type=text],.inline-up input[type=password]{width:auto}
.refgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px}
.refgrid[hidden]{display:none}  /* explicit display:grid otherwise overrides the hidden attribute */
.ref{margin:0;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--surface-2);transition:border-color .15s,transform .12s}
.ref[draggable="true"]{cursor:grab}
.ref[draggable="true"]:hover{border-color:rgba(0,228,245,.4);transform:translateY(-2px)}
.ref[draggable="true"]:active{cursor:grabbing}
.ref img{width:100%;height:84px;object-fit:cover;display:block;background:var(--surface-3)}
.ref-ph{height:84px;display:flex;align-items:center;justify-content:center;color:var(--ink-3);background:var(--surface-3);font-size:12px}
.ref figcaption{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px 9px}
.reftag{font-family:var(--mono);font-size:12px;color:var(--copper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x{border:none;background:rgba(245,0,98,.12);color:#ff6c9d;border-radius:var(--r);cursor:pointer;font-size:15px;line-height:1;
  min-width:28px;min-height:26px;display:inline-flex;align-items:center;justify-content:center;transition:background .15s}
.x:hover{background:rgba(245,0,98,.25)}

/* ── Composer ─────────────────────────────────────────────────────────────── */
.composer-name{font-size:16px;font-weight:700;border:1px solid transparent;border-radius:var(--r-sm);padding:7px 9px;color:var(--tinder);background:transparent;letter-spacing:-.01em}
.composer-name:hover,.composer-name:focus{border-color:var(--rule);outline:none;background:var(--surface-2)}
.row-actions{display:flex;gap:8px;align-items:center}
.comp-left{display:flex;align-items:center;gap:11px}
.savedot{width:8px;height:8px;border-radius:50%;background:var(--smoke);flex:none;transition:background .2s}
.savedot.saving{background:var(--flame);box-shadow:0 0 8px var(--flame);animation:pulse 1s infinite}
.savedot.saved{background:var(--barium);box-shadow:0 0 8px rgba(0,245,97,.6)}
.savedot.error{background:var(--lithium);box-shadow:0 0 8px rgba(245,0,98,.6)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.repeat{display:inline-flex;align-items:center;gap:6px;color:var(--smoke);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.repeat-input{width:56px;text-align:center;padding:6px}
.repeat-preview{margin:2px 0 14px;color:var(--ink-3);font-variant-numeric:tabular-nums}

.composer-sticky{position:sticky;top:64px;z-index:30;background:var(--charred);padding:10px 0 12px;
  box-shadow:0 14px 18px -12px rgba(0,0,0,.7);margin-bottom:14px}
.comptabs{margin-bottom:10px}
.palette{padding:16px}
.palette-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.palette-head h3{margin:0}
.palette .refgrid{max-height:240px;overflow:auto}
/* Project / Global scope toggle */
.palette-scope{display:inline-flex;background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--r);padding:2px}
.palette-scope .psc{background:transparent;border:0;color:var(--ink-2);font:inherit;font-size:12px;font-weight:600;padding:4px 12px;border-radius:var(--r);cursor:pointer;transition:color var(--dur) var(--ease),background var(--dur) var(--ease)}
.palette-scope .psc:hover{color:var(--tinder)}
.palette-scope .psc.on{background:var(--surface-3);color:var(--copper)}   /* copper = the selected/live signal (was solid flame) */
.palette-hint{margin-left:auto}
/* global pool tiles */
.ref-loading{padding:18px 4px;grid-column:1/-1}
.ref-global .ref-badge{margin-left:auto;width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex:0 0 auto}
.ref-global .ref-badge.add{background:var(--copper);color:var(--charred)}   /* copper = add action; barium = already in project */
.ref-global.in-project .ref-badge{background:var(--barium);color:var(--charred)}
.ref-global.in-project{opacity:.72}
.ref-global figcaption{display:flex;align-items:center;gap:6px}
.addref{display:flex;align-items:center;justify-content:center;min-height:120px;border:1.5px dashed var(--rule);
  background:transparent;color:var(--copper);font-weight:700;cursor:pointer;font-size:13px;text-align:center;transition:border-color .15s,background .15s}
.addref:hover{border-color:var(--copper);background:rgba(0,228,245,.05)}
/* standalone add button (sits under the grids, serves both Project & Global) */
#refAdd{margin-top:12px;min-height:64px;max-width:200px;border-radius:var(--r)}

.prompts-list{display:flex;flex-direction:column;gap:12px}
.prompt-block{border:1px solid var(--rule);border-radius:var(--r);padding:12px;background:var(--surface-2);transition:opacity .15s,border-color .15s}
.prompt-block.off{opacity:.45}
.pb-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.pen-wrap{display:inline-flex;align-items:center;gap:7px;cursor:pointer;color:var(--smoke);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.pen-wrap input{width:auto;accent-color:var(--copper)}
.pb-tools{display:flex;align-items:center;gap:10px}
.pb-tools .pd{width:70px}
.charcount{color:var(--ink-3);font-variant-numeric:tabular-nums}
.charcount.over{color:var(--lithium);font-weight:700}
.prompt-body{width:100%;min-height:90px;border:1px solid var(--rule);border-radius:var(--r-sm);padding:11px;resize:vertical;
  font-family:var(--font);font-size:15px;line-height:1.6;color:var(--tinder);background:var(--surface)}
.prompt-body:focus{outline:none;border-color:var(--copper);box-shadow:var(--glow-focus)}
.prompt-body.drop-on{border-color:var(--copper);box-shadow:0 0 0 3px rgba(0,228,245,.3);background:rgba(0,228,245,.04)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;min-height:4px}
.chip-ref{font-size:12px;font-weight:600;padding:2px 9px;border-radius:var(--r);font-family:var(--mono)}
.chip-ref.known{background:rgba(0,228,245,.12);color:var(--copper);border:1px solid rgba(0,228,245,.3)}
.chip-ref.unknown{background:rgba(245,0,98,.1);color:#ff6c9d;border:1px solid rgba(245,0,98,.3)}
.chip-ref.warn{background:var(--flame-soft);color:var(--flame-text);border:1px solid rgba(245,59,0,.3)}
.newprompt{margin-top:14px;border-top:1px dashed var(--rule);padding-top:13px}
.np-row{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.np-dur{width:84px}

/* ── Chips / board tabs ───────────────────────────────────────────────────── */
.boardtabs{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:7px 14px;border:1px solid var(--rule);border-radius:var(--r);font-size:13px;font-weight:500;font-family:var(--font);
  color:var(--ink-2);background:var(--surface-2);transition:all var(--dur,.3s) var(--ease)}
.chip:hover{text-decoration:none;border-color:var(--line-strong);color:var(--tinder);background:var(--surface-3)}
.chip:focus-visible{outline:none;box-shadow:var(--glow-focus);border-color:var(--copper);color:var(--copper)}
.chip.on{background:var(--surface-3);color:var(--copper);border-color:rgba(0,228,245,.4)}
.chip.add{border-style:dashed;color:var(--copper);cursor:pointer}
.chip.add:hover{border-color:var(--copper);background:rgba(0,228,245,.05)}

/* ── Storyboard cells ─────────────────────────────────────────────────────── */
.cellgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:14px}
.cell{border:1px solid var(--rule);border-radius:var(--r);padding:11px;background:var(--surface-2);display:flex;flex-direction:column;gap:8px}
.cell-img{position:relative;background:var(--surface-3);border-radius:var(--r-sm);overflow:hidden;display:flex;align-items:center;justify-content:center}
.cell-img img{width:100%;height:100%;object-fit:cover}
.cell-no{position:absolute;top:6px;left:6px;background:rgba(13,15,20,.85);color:var(--tinder);font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--r)}
.cell-cc{position:absolute;top:6px;right:6px;background:rgba(0,228,245,.15);color:var(--copper);font-size:11px;padding:2px 7px;border-radius:var(--r)}
.cell-vidbadge{position:absolute;bottom:6px;right:6px;background:var(--flame);color:var(--charred);font-size:11px;font-weight:700;padding:2px 7px;border-radius:var(--r)}
.drop{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:124px;color:var(--copper);cursor:pointer;font-size:13px;font-weight:700}
.cell-vid{width:100%;border-radius:var(--r-sm);background:#000;max-height:160px}
.cell-shot{font-size:12px;padding:7px 9px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-sm)}
.cell-cap{min-height:50px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-sm);padding:8px;font-family:inherit;font-size:13px;resize:vertical}
.cell-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.addcell{min-height:170px;border:1.5px dashed var(--rule);background:transparent;color:var(--copper);font-weight:700;cursor:pointer;align-items:center;justify-content:center;font-size:14px;border-radius:var(--r)}
.addcell:hover{border-color:var(--copper)}

/* ── Client review (cinematic) ────────────────────────────────────────────── */
.review-body{background:var(--deep-quench)}
.review-head{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;background:rgba(10,27,27,.82);
  backdrop-filter:saturate(150%) blur(16px);-webkit-backdrop-filter:saturate(150%) blur(16px);border-bottom:2px solid transparent;border-image:var(--brand-gradient) 1;padding:0 26px;position:sticky;top:0;z-index:50}
.rh-left{display:flex;align-items:center;gap:18px}
.rh-back{white-space:nowrap}
/* Global rule: in-canvas back/navigation (header carries only brand + identity). */
.canvas-back{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tinder);margin-bottom:16px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-sm);padding:8px 14px;transition:border-color .15s,background .15s}
.canvas-back:hover{color:var(--copper);border-color:var(--copper);background:var(--bg)}
.canvas-back::before{content:"";width:7px;height:7px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-right:1px}
/* small inline clock icon for durations (replaces the stopwatch glyph) */
.ico-clock{display:inline-block;width:11px;height:11px;border:1.5px solid currentColor;border-radius:50%;position:relative;vertical-align:-1px;margin-right:4px}
.ico-clock::after{content:"";position:absolute;left:50%;top:50%;width:1.5px;height:4px;background:currentColor;transform-origin:bottom center;transform:translate(-50%,-100%) rotate(60deg)}
.review-hero{max-width:1100px;margin:0 auto;padding:54px 28px 10px;text-align:left}
.review-hero .eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke);margin-bottom:14px}
.review-hero h1{font-size:clamp(34px,6vw,56px);margin:0 0 10px}
.review-hud{font-family:var(--font);font-size:13px;font-weight:500;letter-spacing:.06em;color:var(--ink-3)}
.reviewcell{margin-bottom:18px}
.rc-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:22px}
@media(max-width:820px){.rc-grid{grid-template-columns:1fr}.rc-left{position:static}}
/* client review — 3-up cell grid (matches the storyboard creator's layout) */
.review-cells{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.review-cells .reviewcell{margin-bottom:0}
.review-cells .rc-grid{grid-template-columns:1fr;gap:12px}
.review-cells .rc-left{position:static}
.review-cells .comments{max-height:240px}
@media(max-width:1200px){.review-cells{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.review-cells{grid-template-columns:1fr}}
.rc-img{background:var(--surface-3);border-radius:var(--r);overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid var(--rule)}
.rc-img img{width:100%;height:100%;object-fit:cover}
.rc-no{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--smoke);margin-bottom:8px;display:flex;align-items:center;gap:10px}
.rc-video{width:100%;border-radius:var(--r-sm);background:#000;margin:8px 0;border:1px solid var(--rule)}
.rc-left{display:flex;flex-direction:column;gap:14px;align-self:start;position:sticky;top:18px}
.rc-addcmt{background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--r);padding:12px}
.rc-as{margin-bottom:7px}
.comments{margin-top:12px;border-top:1px solid var(--rule);padding-top:12px;max-height:340px;overflow-y:auto}
.cmt{padding:9px 0;border-bottom:1px solid var(--rule-2)}
.cmt:last-child{border-bottom:0}
.cmt strong{color:var(--tinder);margin-right:6px}
/* comment body: readable spacing + never overflow on long words/URLs */
.cmt>div{font-size:13.5px;color:var(--ink-2);margin-top:3px;line-height:1.5;overflow-wrap:anywhere;word-break:break-word}
.cmt .muted.sm{font-size:11.5px;white-space:nowrap}
.cmt-form{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.cmt-form.rc-addcmt{margin-top:0}
.cmt-form textarea{min-height:58px}
/* comment authorship colours + owner-delete (all surfaces) */
.cmt,.cc-cm,.csb-c{position:relative}
.cmt,.cc-cm{padding-right:22px}
.cc-cm,.csb-c,.vd-cm-b,.vd-cm-b p{overflow-wrap:anywhere;word-break:break-word}
.cmt.wf,.cc-cm.wf,.vd-cm.wf,.csb-c.wf{box-shadow:inset 3px 0 0 var(--flame)}
.cmt.client,.cc-cm.client,.vd-cm.client,.csb-c.client{box-shadow:inset 3px 0 0 var(--copper)}
/* keep the name + text clear of the accent bar */
.cmt.wf,.cmt.client,.cc-cm.wf,.cc-cm.client{padding-left:14px}
.vd-cm.wf,.vd-cm.client{padding-left:12px}
.cmt.wf>strong,.cc-cm.wf>strong,.vd-cm.wf .vd-cm-b b,.csb-c.wf .csb-h strong{color:var(--flame-text)}
.cmt.client>strong,.cc-cm.client>strong,.vd-cm.client .vd-cm-b b,.csb-c.client .csb-h strong{color:var(--copper)}
.csb-c{padding-left:9px}
.cmt-del,.cc-cm-del{position:absolute;top:9px;right:0;background:transparent;border:0;color:var(--smoke);cursor:pointer;font-size:16px;line-height:1;opacity:.4;transition:.15s}
.csb-del{position:absolute;top:7px;right:9px;background:transparent;border:0;color:var(--smoke);cursor:pointer;font-size:15px;line-height:1;opacity:.4;transition:.15s;z-index:2}
.vd-cm-del{background:transparent;border:0;color:var(--smoke);cursor:pointer;font-size:15px;line-height:1;opacity:.45;align-self:start;transition:.15s}
.cmt-del:hover,.cc-cm-del:hover,.csb-del:hover,.vd-cm-del:hover{opacity:1;color:var(--lithium)}

/* ── Motion / accessibility ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
.foot.sm{color:var(--ink-3)}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media(max-width:640px){
  .topbar{padding:12px 16px}
  .brand-logo{height:30px}
  .brand-sub{display:none}
  .wrap{padding:0 16px;margin:20px auto}
  .page-head{flex-direction:column;align-items:flex-start;gap:12px}
  .page-head .actions{width:100%}
  .stats{grid-template-columns:repeat(2,1fr)}
  .topbar-right{gap:8px}
  .topbar .user,.review-head .user{display:none}
  h1{font-size:24px}
  .review-hero{padding:36px 18px 6px}
  .card-head.between{flex-wrap:wrap}
  .row-actions{flex-wrap:wrap}
  .composer-sticky{top:64px}
  .rc-grid{gap:14px}
}

/* ── Scrollbars (dark) ────────────────────────────────────────────────────── */
*{scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:var(--r);border:2px solid var(--charred)}
::-webkit-scrollbar-thumb:hover{background:#2c323d}

/* ── Seedance node-graph editor ───────────────────────────────────────────── */
.seedance-bar{margin:10px 0 12px}
.seedance-bar #graphName{width:180px}
.seedance-wrap{display:flex;gap:14px;align-items:flex-start}
.node-palette{flex:0 0 180px;display:flex;flex-direction:column;gap:8px;position:sticky;top:64px}
.node-palette .np-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--smoke);margin-bottom:2px}
.node-palette .addnode{justify-content:flex-start}
.np-hint{margin-top:6px;line-height:1.5}

.canvas{position:relative;flex:1;min-height:480px;max-height:72vh;overflow:auto;border:1px solid var(--rule);border-radius:var(--r-lg);
  background:var(--charred);
  background-image:radial-gradient(rgba(249,249,249,.06) 1px, transparent 1px);background-size:22px 22px}
.wires{position:absolute;top:0;left:0;pointer-events:none;overflow:visible}
.wire{fill:none;stroke:var(--copper);stroke-width:2;opacity:.85}
.wire.temp{stroke-dasharray:5 5;opacity:.7;display:none}

.gnode{position:absolute;background:var(--surface-2);border:1px solid var(--rule);border-left:3px solid var(--smoke);
  border-radius:var(--r);box-shadow:var(--shadow);z-index:2;font-size:13px}
.gnode.dragging{z-index:5;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.gnode-reference{border-left-color:var(--copper)}
.gnode-audio{border-left-color:var(--lithium)}
.gnode-shot{border-left-color:var(--flame)}
.gnode-output{border-left-color:var(--barium)}
.gnode-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;
  background:var(--surface-3);border-radius:var(--r) var(--r) 0 0;cursor:grab;font-weight:700;font-size:12px;
  letter-spacing:.02em;color:var(--tinder);user-select:none}
.gnode.dragging .gnode-head{cursor:grabbing}
.gnode-body{padding:10px;display:flex;flex-direction:column;gap:7px}
.gnode-body .grow{display:flex;gap:6px}
.gf{width:100%;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);color:var(--tinder);
  font-family:inherit;font-size:12px;padding:6px 8px;resize:vertical}
.gf:focus{outline:none;border-color:var(--copper);box-shadow:var(--glow-focus)}
.gnode-body textarea.gf{min-height:38px;line-height:1.4}

.port{position:absolute;top:19px;width:14px;height:14px;border-radius:50%;background:var(--charred);
  border:2px solid var(--copper);pointer-events:auto;z-index:3}
.port.in{left:-8px}
.port.out{right:-8px;cursor:crosshair}
.port.out:hover{background:var(--copper)}

.compile-panel{margin-top:16px}
.brief-out{white-space:pre-wrap;word-break:break-word;font-family:var(--mono);font-size:12.5px;line-height:1.6;
  color:var(--ink-2);background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--r-sm);
  padding:14px;max-height:50vh;overflow:auto;margin:0}
@media(max-width:780px){.seedance-wrap{flex-direction:column}.node-palette{flex-direction:row;flex-wrap:wrap;position:static}}

/* storyboard drag-reorder grip */
.cell{position:relative}
.cell-grip{position:absolute;top:6px;right:8px;z-index:4;cursor:grab;color:var(--smoke);font-size:15px;line-height:1;
  padding:2px 5px;border-radius:var(--r);background:rgba(13,15,20,.6);user-select:none}
.cell-grip:hover{color:var(--copper);background:rgba(0,228,245,.12)}
.cell-grip:active{cursor:grabbing}
.cell.drag-ghost{opacity:.35;outline:2px dashed var(--copper);outline-offset:2px}

/* ── Storyboard v2 — feature parity (time / SFX / VO), wide layout ──────────── */
.wrap.wrap-wide{max-width:1780px}
.board-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 4px;flex-wrap:wrap}
.runtotal{display:flex;align-items:center;gap:10px}
.rt-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke)}
.rt-clock{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:22px;font-weight:700;color:var(--flame);letter-spacing:.04em}
.rt-aspect{font-size:11px;color:var(--smoke);border:1px solid var(--rule);border-radius:var(--r);padding:2px 7px}

.cellgrid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.cell{padding:0;gap:0;overflow:hidden}
.cell-head{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--surface-3);border-bottom:1px solid var(--rule)}
.cell-head .cell-no{position:static;top:auto;left:auto;background:transparent;color:var(--tinder);font-size:12px;font-weight:700;padding:0;letter-spacing:.06em}
.cell-head .cell-no::before{content:'CELL ';color:var(--smoke);font-weight:600}
.cell-head .cell-grip{position:static;top:auto;right:auto;cursor:grab;color:var(--smoke);font-size:15px;line-height:1;padding:0 2px;background:none;border-radius:var(--r)}
.cell-head .cell-grip:hover{color:var(--copper);background:none}
.cell-head-actions{margin-left:auto;display:flex;gap:4px}
.ico{background:none;border:1px solid transparent;color:var(--smoke);font-size:14px;line-height:1;width:24px;height:24px;border-radius:var(--r);cursor:pointer;display:flex;align-items:center;justify-content:center}
.ico:hover{color:var(--tinder);border-color:var(--rule);background:var(--surface)}
.ico.del-cell:hover{color:var(--lithium);border-color:var(--lithium)}

.cell .cell-img{border-radius:var(--r);margin:0}
.cell-reimg{position:absolute;bottom:6px;left:6px;background:rgba(13,15,20,.8);color:var(--tinder);width:26px;height:26px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;opacity:0;transition:opacity .15s}
.cell-img:hover .cell-reimg{opacity:1}
.drop{cursor:pointer;color:var(--ink-3);font-size:12px;text-align:center;padding:22px 10px}

.cell-vid{margin:8px 10px 0;width:calc(100% - 20px);max-height:150px}
.cell-row{display:flex;gap:8px;padding:8px 10px 0}
.cell-row .cell-timef{width:96px;flex:0 0 auto}
.cell-row .cell-typef{flex:1;min-width:0}
.cell-field{display:block;padding:8px 10px 0}
.cf-label{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--smoke);margin-bottom:3px}
.cell-field input,.cell-field textarea,.cell .cell-dur,.cell .cell-shot{width:100%;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-sm);padding:7px 9px;font-family:inherit;font-size:13px;color:var(--tinder);box-sizing:border-box}
.cell-field textarea{min-height:46px;resize:vertical;line-height:1.35}
.cell .cell-dur{text-align:center;font-family:ui-monospace,Menlo,Consolas,monospace}
.cell-vorec{padding:8px 10px 0;display:flex;flex-direction:column;gap:6px}
.cell-aud{width:100%;height:34px}
.cell .cell-actions{padding:10px;margin-top:6px;border-top:1px solid var(--rule)}
.btn.xs{font-size:11px;padding:4px 9px}
.cell.addcell{align-items:center;justify-content:center;min-height:200px;color:var(--copper);font-weight:600;border-style:dashed}

/* ── Quote builder ─────────────────────────────────────────────────────────── */
.quote-card{margin-top:14px}
.quote-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.quote-meta{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.quote-meta label{display:flex;flex-direction:column;gap:4px;font-size:11px;letter-spacing:.04em;color:var(--smoke);text-transform:uppercase}
.quote-meta input{width:90px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-sm);padding:7px 9px;color:var(--tinder);font-size:13px}
.quote-actions{display:flex;gap:8px}
.qline-presets{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 12px}
.qcat{display:flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--smoke)}
.qcat select{min-width:200px}
.qtable{width:100%;border-collapse:collapse}
.qtable th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--smoke);padding:6px 8px;border-bottom:1px solid var(--rule)}
.qtable th.num,.qtable td.num{text-align:right}
.qtable td{padding:8px;border-bottom:1px solid var(--rule);vertical-align:top}
.qtable td.num{vertical-align:middle}
.ql-desc{width:100%;min-width:240px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-sm);padding:7px 9px;color:var(--tinder);font-family:inherit;font-size:13px;resize:vertical;line-height:1.35}
.ql-qty,.ql-rate{width:92px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-sm);padding:7px 9px;color:var(--tinder);font-size:13px;text-align:right;font-family:ui-monospace,Menlo,Consolas,monospace}
.ql-total{font-family:ui-monospace,Menlo,Consolas,monospace;white-space:nowrap;color:var(--tinder)}
.qkind{display:inline-block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;border-radius:var(--r);background:var(--surface-3);color:var(--smoke);white-space:nowrap}
.qk-day_rate{background:rgba(245,59,0,.16);color:var(--flame)}
.qk-render{background:rgba(0,228,245,.14);color:var(--copper)}
.qk-assets{background:rgba(0,229,138,.14);color:#22d39a}
.qk-licence{background:rgba(245,0,98,.14);color:var(--lithium)}
.quote-totals{margin-top:16px;margin-left:auto;width:340px;max-width:100%}
.qt-row{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;font-size:14px;color:var(--ink-3)}
.qt-row strong{color:var(--tinder);font-family:ui-monospace,Menlo,Consolas,monospace}
.qt-total{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:4px 0;padding:9px 0;font-size:16px}
.qt-total strong{color:var(--flame)}
.x.ql-del{color:var(--smoke)}
.x.ql-del:hover{color:var(--lithium)}
/* Bill-to / Zoho client picker */
.bill-to{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--rule)}
.bt-current strong{font-size:15px}
.bt-search{position:relative;min-width:300px}
.bt-search input{width:100%;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-sm);padding:8px 11px;color:var(--tinder);font-size:13px}
.bt-results{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--r-sm);max-height:300px;overflow:auto;box-shadow:var(--shadow)}
.bt-results:empty{display:none}
.bt-row{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--rule);padding:8px 11px;color:var(--tinder);font:inherit;cursor:pointer}
.bt-row:hover{background:var(--surface-3)}
.bt-row.muted,.bt-row.err{cursor:default}
.bt-row.err{color:var(--lithium)}
.zest{font-size:13px;color:#22d39a}
.zest strong{color:var(--tinder)}
/* Dashboard filter chips + client grouping */
.stat[data-filter]{cursor:pointer;user-select:none}
.stat[data-filter]:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.stat.on{border-color:rgba(0,228,245,.4);background:var(--surface-2)}
.stat.on .stat-n{color:var(--copper)}
.filter-bar{display:flex;align-items:center;gap:10px;min-height:24px;margin:10px 2px 0}
tr.grp td{background:var(--surface-3);color:var(--smoke);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;border-bottom:1px solid var(--rule)}
/* Client portal access panel */
.zpeople{margin:8px 0 12px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cu-table{width:100%;border-collapse:collapse;margin-top:6px}
.cu-table th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--smoke);padding:6px 8px;border-bottom:1px solid var(--rule)}
.cu-table td{padding:7px 8px;border-bottom:1px solid var(--rule);font-size:13px;color:var(--tinder)}
.cu-add{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.cu-add input{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-sm);padding:8px 10px;color:var(--tinder);font:inherit;font-size:13px}
.cu-add #cuEmail{min-width:220px}
/* New client onboarding panel */
.newclient-panel{border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--surface-2);padding:14px;margin-bottom:14px}
.nc-head{font-size:13px;color:var(--copper);margin-bottom:10px}
.nc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.nc-grid label{display:flex;flex-direction:column;gap:4px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--smoke)}
.nc-grid .nc-wide{grid-column:span 2}
.nc-grid input,.nc-grid textarea,.nc-grid select{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-sm);padding:7px 9px;color:var(--tinder);font:inherit;font-size:13px;width:100%;box-sizing:border-box}
.nc-persons{margin-top:12px}
.nc-person{display:flex;gap:8px;margin-bottom:6px}
.nc-person input{flex:1;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-sm);padding:7px 9px;color:var(--tinder);font:inherit;font-size:13px}
.nc-actions{display:flex;align-items:center;gap:10px;margin-top:12px}
@media(max-width:860px){.nc-grid{grid-template-columns:repeat(2,1fr)}}

/* storyboard comment badge (clickable) + comments sidebar */
.cell-cc{position:absolute;top:6px;right:6px;background:rgba(0,228,245,.18);color:var(--copper);font-size:11px;padding:2px 7px;border-radius:var(--r);border:0;cursor:pointer;z-index:5;display:flex;align-items:center;gap:3px;font-family:inherit}
.cell-cc:hover{background:rgba(0,228,245,.34)}
.cell-cc .cc-n:empty{display:none}
.cmt-sidebar{position:fixed;top:0;right:0;width:340px;max-width:92vw;height:100vh;background:var(--surface);border-left:1px solid var(--rule);box-shadow:-8px 0 30px rgba(0,0,0,.45);z-index:50;display:flex;flex-direction:column}
.cmt-sidebar[hidden]{display:none}
/* when the comments panel is open, reserve space so no cell hides beneath it */
/* Notes float OVER the free space on the right — the board no longer reflows/resizes. */
.cmt-sidebar{backdrop-filter:saturate(1.1)}
.cmt-sb-head{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--rule)}
.cmt-sb-head .x{margin-left:auto}
.cmt-sb-list{flex:1;overflow:auto;padding:12px 16px}
.csb-c{padding:9px 12px;border-bottom:1px solid var(--rule);cursor:pointer}
.csb-c:hover{background:rgba(255,255,255,.03)}
.csb-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:3px}
.csb-c strong{color:var(--copper);font-size:13px}
.csb-c .csb-b{font-size:13px;color:var(--tinder);line-height:1.4}
.csb-c.done{opacity:.55}
.csb-c.done .csb-b{text-decoration:line-through;color:var(--smoke)}
.csb-c.done strong{text-decoration:line-through;color:var(--smoke)}
.cmt-sb-add{padding:12px 16px;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:8px}
.cmt-sb-add textarea{background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--r-sm);padding:8px;color:var(--tinder);font:inherit;font-size:13px;resize:vertical}

/* ── Project plan / Gantt (staff + client) ─────────────────────────────────── */
.plan-head{margin:6px 0 16px}
.plan-title{font-size:20px;font-weight:800;letter-spacing:-.01em;margin:0 0 6px}
.plan-toolbar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:16px}
.pt-seed{display:flex;align-items:center;gap:10px}
.pt-lab{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--smoke)}
.input.sm,.select.sm{padding:7px 10px;font-size:13px;width:auto}
.select.sm{padding-right:30px}

.gantt-legend{display:flex;flex-wrap:wrap;gap:16px;margin:0 0 14px;font-size:12px;color:var(--ink-2)}
.gl{display:inline-flex;align-items:center;gap:7px}
.gl-dot{width:12px;height:12px;border-radius:var(--r);display:inline-block;background:var(--surface-3);border:1px solid var(--rule)}
.gl-dot.st-in_progress{background:var(--copper);border-color:var(--copper)}
.gl-dot.st-waiting_client{background:repeating-linear-gradient(45deg,#ffb020,#ffb020 3px,transparent 3px,transparent 6px),var(--surface-3);border-color:#ffb020}
.gl-dot.st-blocked{background:repeating-linear-gradient(45deg,#b0455f,#b0455f 3px,transparent 3px,transparent 6px),var(--surface-3);border-color:#b0455f}
.gl-dot.st-done{background:var(--barium);border-color:var(--barium)}
.gl-dot.st-not_started{background:#5a8e93}

.gantt-wrap{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);overflow-x:auto;margin-bottom:18px}
.g-chart{min-width:660px;position:relative}
.g-axis{position:relative;height:30px;border-bottom:1px solid var(--rule);margin-left:200px}
.g-tick{position:absolute;top:0;bottom:0;border-left:1px solid var(--rule-2)}
.g-tick span{position:absolute;top:8px;left:6px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--smoke);white-space:nowrap}
.g-rows{position:relative}
.g-overlay{position:absolute;left:200px;right:0;top:0;bottom:0;pointer-events:none;z-index:4}
.g-today{position:absolute;top:0;bottom:0;width:2px;background:var(--flame);box-shadow:0 0 8px var(--flame-ring)}
/* Lift the TODAY labels up into the axis strip so they never sit on top of a bar.
   The small chip background keeps them legible over gridline dates. */
.g-today span{position:absolute;left:3px;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--flame);white-space:nowrap;background:var(--deep-quench);padding:0 3px;border-radius:2px}
.g-today span:first-child{top:-28px}
.g-today .g-today-d{top:-16px;font-weight:700;letter-spacing:.02em;text-transform:none;color:var(--ink-2);font-variant-numeric:tabular-nums}
.g-row{display:flex;align-items:center;height:42px;border-bottom:1px solid var(--rule-2)}
.g-row:last-child{border-bottom:0}
.g-label{width:200px;min-width:200px;padding:0 14px;display:flex;flex-direction:column;gap:1px;overflow:hidden}
.g-name{font-size:13px;font-weight:600;color:var(--tinder);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-dates{font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.g-track{position:relative;flex:1;height:100%;border-left:1px solid var(--rule)}
.g-bar{position:absolute;top:9px;height:24px;border-radius:var(--r);min-width:8px;cursor:grab;touch-action:none;overflow:hidden;display:flex;align-items:center;
  background:var(--surface-3);border:1px solid rgba(255,255,255,.12);transition:filter .15s,transform .15s}
.g-bar:active{cursor:grabbing}.g-ms{cursor:grab;touch-action:none}
.cl-gantt .g-bar,.cl-gantt .g-ms{cursor:default;touch-action:auto}
.g-bar:hover{filter:brightness(1.12);transform:translateY(-1px)}
.g-bar.dragging{filter:brightness(1.18);transform:none;box-shadow:0 0 0 2px var(--flame),0 6px 18px rgba(0,0,0,.5);z-index:5}
.g-tip{position:fixed;z-index:200;transform:translateX(-50%);background:var(--charred);border:1px solid var(--flame-ring);color:var(--tinder);font-size:12px;font-weight:600;padding:5px 9px;border-radius:var(--r);pointer-events:none;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.5);font-variant-numeric:tabular-nums}
.g-tip b{color:var(--flame-text)}.g-tip span{color:var(--ink-3);font-weight:500}
.g-tip[hidden]{display:none}
/* client-facing note bubble on hover/tap of a waiting/blocked Gantt bar */
.g-bar.has-note,.g-ms.has-note{cursor:help}
.g-note-pop{position:absolute;z-index:200;transform:translateX(-50%);max-width:260px;background:var(--charred);border:1px solid #ffb020;color:var(--tinder);font-size:12.5px;line-height:1.45;font-weight:500;padding:8px 11px;border-radius:var(--r);box-shadow:0 8px 24px rgba(0,0,0,.55)}
.g-note-pop::after{content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%) rotate(45deg);width:10px;height:10px;background:var(--charred);border-right:1px solid #ffb020;border-bottom:1px solid #ffb020}
.g-note-pop.below::after{bottom:auto;top:-6px;border-right:0;border-bottom:0;border-left:1px solid #ffb020;border-top:1px solid #ffb020}
.g-note-pop[hidden]{display:none}
.g-fill{position:absolute;left:0;top:0;bottom:0;background:rgba(255,255,255,.24)}
.g-bar-label{position:relative;z-index:2;font-size:10px;font-weight:800;color:#0d0f14;padding:0 7px;font-variant-numeric:tabular-nums}
.g-bar.stage-concept{background:#00e4f5}
.g-bar.stage-storyboard{background:#5b8def}
.g-bar.stage-production{background:#f53b00}
.g-bar.stage-threed{background:#9d6fb0}   /* 3D & VFX — calm violet (was neon lithium) */
.g-bar.stage-edit{background:#ffb020}
.g-bar.stage-interactive{background:#9b6bff}
.g-bar.stage-review{background:#3b7175}
.g-bar.stage-delivery{background:#00f561}
.g-bar.stage-other{background:var(--smoke)}
/* "Up next" bars: dim with an overlay (not element opacity) so the % label stays crisp/legible */
.g-bar.st-not_started::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(13,15,20,.5)}
.g-bar.st-not_started .g-bar-label{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.g-bar.stage-review .g-bar-label{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55)}  /* teal: white + shadow for AA */
.g-bar.st-waiting_client::after,.g-bar.st-blocked::after{content:'';position:absolute;inset:0;z-index:1}
/* waiting on client → amber diagonal hatch (matches the legend swatch) */
.g-bar.st-waiting_client::after{background:repeating-linear-gradient(45deg,rgba(255,176,32,0),rgba(255,176,32,0) 5px,rgba(255,176,32,.55) 5px,rgba(255,176,32,.55) 10px)}
.g-bar.st-waiting_client{outline:2px dashed #ffb020;outline-offset:-2px}
/* blocked → muted wine hatch + outline (calmer than neon lithium, still clearly "stop") */
.g-bar.st-blocked::after{background:repeating-linear-gradient(45deg,rgba(176,69,95,0),rgba(176,69,95,0) 4px,rgba(176,69,95,.62) 4px,rgba(176,69,95,.62) 8px)}
.g-bar.st-blocked{outline:2px solid #b0455f;outline-offset:-2px}
.g-bar.st-done{box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)}
/* milestone diamond marker */
.g-ms{position:absolute;top:11px;width:18px;height:18px;border-radius:var(--r);transform:translateX(-50%) rotate(45deg);
  background:var(--surface-3);border:1.5px solid rgba(255,255,255,.35);cursor:pointer;transition:filter .15s,transform .15s}
.g-ms:hover{filter:brightness(1.15)}
.g-ms.stage-concept{background:#00e4f5}.g-ms.stage-storyboard{background:#5b8def}.g-ms.stage-production{background:#f53b00}
.g-ms.stage-threed{background:#9d6fb0}.g-ms.stage-edit{background:#ffb020}.g-ms.stage-interactive{background:#9b6bff}
.g-ms.stage-review{background:#3b7175}.g-ms.stage-delivery{background:#00f561}.g-ms.stage-other{background:var(--smoke)}
.g-ms.st-not_started{opacity:.55}
.g-ms.st-done{box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.cl-gantt .g-ms{cursor:default}
.cl-gantt .g-ms:hover{filter:none}
.pe-act{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.pe-ms{background:transparent;border:1px solid var(--rule);color:var(--smoke);width:28px;height:28px;border-radius:var(--r);cursor:pointer;font-size:15px;line-height:1;transition:.15s}
.pe-ms:hover{border-color:var(--ink-3);color:var(--ink-2)}
.pe-ms.on{background:var(--flame-soft);border-color:var(--flame);color:var(--flame-text)}
.pe-row.is-ms .pe-end,.pe-row.is-ms .pe-prog{opacity:.4}

/* ── Video drafts (versioned review videos) ────────────────────────────────── */
.vd-upload,.vd-addbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:18px}
.vd-upload .input.sm,.vd-addbar .input.sm{min-width:240px}
.vd-picked{font-style:italic}

/* Deliverables grid (scales: 2 or 9 fill the same row width) */
.vd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.vd-grid[hidden]{display:none}
.vd-card{display:flex;flex-direction:column;align-items:stretch;gap:0;text-align:left;cursor:pointer;overflow:hidden;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);font-family:var(--font);color:var(--tinder);
  transition:border-color var(--dur,.3s) var(--ease),background var(--dur,.3s) var(--ease),box-shadow var(--dur,.3s) var(--ease)}
.vd-card:hover{border-color:rgba(0,228,245,.4);background:var(--surface-2)}
/* full-width 16:9 thumbnail banner — poster frame when we have one, else a ▶ placeholder */
.vd-card-thumb{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:16/9;
  background:var(--surface-3) center/cover no-repeat;color:var(--copper);font-size:26px;position:relative}
.vd-card-thumb.has-poster{color:transparent}
.vd-card-thumb.has-poster::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:38px;height:38px;border-radius:50%;background:rgba(13,15,20,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/16px no-repeat;border:1.5px solid rgba(255,255,255,.7)}
.vd-card-title{font-weight:500;font-size:15px;line-height:1.25;padding:11px 14px 0}
.vd-card-sub{font-size:12px;color:var(--ink-3);padding:2px 14px 13px}

/* ── Knock back video poster thumbnails to cut clutter; full colour on hover. ──
   Deliverable cards (vd-card) are BUTTONS, not players → no play badge, DUOTONE.
   Reference video tiles (pt-ref) stay a diffuse/darken + keep their play badge. */
.vd-card-thumb.has-poster::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(14,36,38,.50);
  -webkit-backdrop-filter:grayscale(1) brightness(.92) contrast(1.02);
  backdrop-filter:grayscale(1) brightness(.92) contrast(1.02);
  transition:opacity .32s var(--ease)}
.vd-card-thumb.has-poster::after{display:none}                 /* deliverable cards: no play badge */
.vd-card-thumb:not(.has-poster){font-size:0}                   /* posterless: drop the ▶ placeholder */
.vd-card:hover .vd-card-thumb.has-poster::before{opacity:0}

.pt-ref-thumb.has-poster::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(8,16,17,.40);
  -webkit-backdrop-filter:blur(2px) saturate(.82) brightness(.92);
  backdrop-filter:blur(2px) saturate(.82) brightness(.92);
  transition:opacity .32s var(--ease)}
.pt-ref:hover .pt-ref-thumb.has-poster::before{opacity:0}
.pt-ref-thumb.has-poster::after{z-index:2}                     /* reference tiles keep their play badge */
/* hairline red ring on deliverables with a new version the client hasn't reviewed */
.vd-card.is-new{border-color:rgba(245,0,98,.55);box-shadow:0 0 0 1px rgba(245,0,98,.45)}
.vd-card .vd-new-dot{color:#ff6c9d;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}

.vd-stage[hidden]{display:none}
.vd-stagehead{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
/* "All videos" back control — top-right, over the comments column; thin accent outline */
.vd-backbig{display:inline-flex;align-items:center;gap:7px;font-family:var(--font);font-weight:600;font-size:13px;
  padding:7px 14px;background:rgba(0,228,245,.06);border:1px solid var(--copper);color:var(--copper);
  border-radius:var(--r);cursor:pointer;letter-spacing:.01em;transition:background .2s,box-shadow .2s}
.vd-backbig:hover{background:rgba(0,228,245,.15);box-shadow:var(--glow-focus)}
.vd-backbig span{font-size:15px;line-height:1}
.vd-stagehead-sp{flex:1}
.vd-stage-title{font-family:var(--font);font-weight:500;font-size:15px;color:var(--tinder)}
.vd-titlein{background:var(--surface);border:1px solid var(--rule);color:var(--tinder);font-family:var(--font);
  font-size:15px;font-weight:500;padding:7px 11px;border-radius:var(--r);min-width:200px}
.vd-titlein:focus{outline:none;border-color:var(--copper);box-shadow:var(--glow-focus)}
.btn.xs.danger,.btn.danger{color:#ff6c9d;border-color:rgba(245,0,98,.3);background:none}
.btn.xs.danger:hover,.btn.danger:hover{background:rgba(245,0,98,.1);border-color:rgba(245,0,98,.5);filter:none}
.vd-prog{flex-basis:100%;height:6px;border-radius:var(--r);background:var(--surface-3);overflow:hidden}
.vd-prog span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--flame),var(--flame-text));transition:width .2s}
.vd-empty{padding:40px 18px;text-align:center;color:var(--ink-3);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg)}
.vd-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
/* top row: version chips (left, over the player) + "All videos" (right column, over the comments) */
.vd-toprow{display:grid;grid-template-columns:1.7fr 1fr;gap:18px;align-items:center;margin-bottom:14px}
.vd-toprow .vd-chips{margin-bottom:0}
.vd-toprow .vd-backbig{justify-self:start}
@media(max-width:900px){.vd-toprow{grid-template-columns:1fr;gap:10px}.vd-toprow .vd-backbig{justify-self:start}}
.vd-chip{background:var(--surface-2);border:1px solid var(--rule);color:var(--ink-2);padding:7px 14px;border-radius:var(--r);font-weight:700;font-size:13px;cursor:pointer;transition:.15s;font-variant-numeric:tabular-nums}
.vd-chip:hover{border-color:var(--line-strong);color:var(--tinder);background:var(--surface-3)}
.vd-chip.on{background:var(--surface-3);color:var(--copper);border-color:rgba(0,228,245,.4)}   /* copper = selected (was solid flame) */
.vd-latest{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;opacity:.85;margin-left:5px}
.vd-main{display:grid;grid-template-columns:1.7fr 1fr;gap:18px;align-items:start}
.vd-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.vd-playerwrap{background:#000;border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden}
.vd-player{display:block;width:100%;max-height:62vh;background:#000;aspect-ratio:16/9}
.vd-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:11px 14px;background:var(--surface);font-size:12.5px;color:var(--ink-2)}
.vd-meta>span:first-child{flex:1;min-width:160px}
.vd-vis{display:inline-flex;align-items:center;gap:7px;cursor:pointer;color:var(--ink-2);font-size:12.5px}
.vd-del{background:transparent;border:1px solid var(--rule);color:var(--smoke);padding:5px 11px;border-radius:var(--r);cursor:pointer;font-size:12px;transition:.15s}
.vd-del:hover{border-color:var(--lithium);color:var(--lithium)}
.vd-side{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:14px;display:flex;flex-direction:column;min-height:280px}
.vd-side-h{font-weight:700;margin-bottom:10px}
.vd-cmlist{flex:1;overflow-y:auto;max-height:60vh;display:flex;flex-direction:column;gap:4px}
.vd-cm{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:start;padding:9px 4px;border-bottom:1px solid var(--rule-2)}
.vd-cm-tc{background:var(--flame-soft);border:1px solid var(--flame-ring);color:var(--flame-text);font-weight:800;font-size:11.5px;padding:3px 8px;border-radius:var(--r);cursor:pointer;white-space:nowrap;font-variant-numeric:tabular-nums;transition:.15s}
.vd-cm-tc:hover{background:rgba(245,59,0,.22);color:var(--flame-text)}
.vd-cm-tc.none{background:transparent;border-color:transparent;color:var(--smoke);cursor:default}
.vd-cm-b{min-width:0}
.vd-cm-b p{margin:3px 0 0;color:var(--ink-2);font-size:13.5px;word-wrap:break-word}
.vd-cm-del{background:transparent;border:0;color:var(--smoke);cursor:pointer;font-size:16px;line-height:1;opacity:.5;transition:.15s}
.vd-cm-del:hover{opacity:1;color:var(--lithium)}
.vd-compose{margin-top:10px;display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:end}
.vd-compose textarea{background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--r-sm);padding:8px;color:var(--tinder);font:inherit;font-size:13px;resize:vertical}
.vd-pin{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--rule);color:var(--ink-2);border-radius:var(--r-sm);padding:8px 11px;cursor:pointer;font-family:var(--font);font-size:12px;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums;transition:.15s}
.vd-pin .vd-sw{width:15px;height:15px;flex:none}
.vd-pin.on{background:var(--flame-soft);border-color:var(--flame);color:var(--flame-text)}
.vd-enc{color:var(--copper);font-style:italic}
.vd-enc.err{color:var(--lithium);cursor:help}
@media(max-width:900px){.vd-main{grid-template-columns:1fr}}

/* ── Creative concept (editor + document) ──────────────────────────────────── */
.cc-editor{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.cc-edit{display:flex;flex-direction:column;gap:12px}
.cc-body{min-height:52vh;resize:vertical;font-size:14px;line-height:1.65;font-family:inherit}
.cc-actions{display:flex;align-items:center;justify-content:space-between;gap:14px}
.cc-preview{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;align-self:start}
.cc-prev-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--smoke);padding:12px 22px;border-bottom:1px solid var(--rule-2)}
.cc-doc{padding:10px 22px 22px}
.cc-doc h3{font-size:20px;font-weight:800;margin:18px 0 8px;color:var(--tinder)}
.cc-doc h4{font-size:16px;font-weight:700;margin:16px 0 6px;color:var(--tinder)}
.cc-doc h5{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin:14px 0 5px;color:var(--smoke)}
.cc-doc p{margin:0 0 11px;color:var(--ink-2);line-height:1.7}
.cc-doc ul{margin:0 0 12px;padding-left:20px;color:var(--ink-2)}
.cc-doc li{margin:3px 0;line-height:1.6}
.cc-doc a{color:var(--copper)}
.cc-doc strong{color:var(--tinder)}
.cc-doc>:first-child{margin-top:0}
@media(max-width:860px){.cc-editor{grid-template-columns:1fr}}
/* structured concept editor */
.plan-head.between{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.cc-form{display:flex;flex-direction:column;gap:18px;max-width:960px}
.cc-f{display:flex;flex-direction:column;gap:7px}
.cc-flab{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--smoke)}
.cc-grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cc-ta{min-height:120px;resize:vertical;font-family:inherit;line-height:1.6}
.cc-ta-tall{min-height:200px}
.cc-quoteinfo{padding:9px 0}
.cc-pulls{display:flex;flex-direction:column;gap:8px}
.cc-pull-in{font-size:15px}
/* pull-quote editor: fixed section markers + draggable full-width quote rows */
.cc-mark{display:flex;align-items:center;gap:10px;margin:4px 2px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--smoke);user-select:none}
.cc-mark::before,.cc-mark::after{content:"";height:1px;background:var(--rule-2);flex:1}
.cc-mark span{white-space:nowrap}
.cc-pull-row{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-sm);padding:6px 8px}
.cc-pull-row.dragging{opacity:.5;outline:2px dashed var(--flame);outline-offset:-2px}
.cc-pull-row .cc-pull-in{flex:1;min-width:80px}
.cc-pull-grip{cursor:grab;color:var(--smoke);font-size:14px;line-height:1;padding:0 2px;user-select:none}
.cc-pull-row[draggable="true"]:active .cc-pull-grip{cursor:grabbing}
.cc-pull-cols{display:flex;gap:4px}
.cc-colb{width:18px;height:18px;border-radius:50%;border:2px solid var(--rule);cursor:pointer;padding:0}
.cc-colb[data-c="default"]{background:var(--tinder)}
.cc-colb[data-c="flame"]{background:var(--flame)}
.cc-colb[data-c="copper"]{background:var(--copper)}
.cc-pull-row[data-color="default"] .cc-colb[data-c="default"],
.cc-pull-row[data-color="flame"] .cc-colb[data-c="flame"],
.cc-pull-row[data-color="copper"] .cc-colb[data-c="copper"]{border-color:#fff;box-shadow:0 0 0 2px var(--charred),0 0 0 3px currentColor}
.cc-pull-del{background:transparent;border:0;color:var(--smoke);cursor:pointer;font-size:17px;line-height:1;opacity:.5}
.cc-pull-del:hover{opacity:1;color:var(--lithium)}
/* client-side: full-width bands sit between the grid rows; colour + bold honoured */
.cc-quad>.cc-pull{grid-column:1/-1}
.cc-pull.col-flame{color:var(--flame)}
.cc-pull.col-copper{color:var(--copper)}
.cc-pull strong{font-weight:600}
/* body-section formatting toolbar */
.cc-md-toolbar{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.cc-mdb{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:26px;padding:0 7px;background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--r);color:var(--tinder);cursor:pointer;font-size:13px;line-height:1}
.cc-mdb:hover{border-color:var(--copper)}
.cc-mdb i{font-style:italic}.cc-mdb b{font-weight:800}
.cc-mdb-flame,.cc-mdb-copper{width:26px;min-width:26px;padding:0}
.cc-mdb-flame{background:var(--flame);border-color:var(--flame)}
.cc-mdb-copper{background:var(--copper);border-color:var(--copper)}
/* client-rendered inline colours + highlight (concept body & quotes) */
.t-flame{color:var(--flame)}
.t-copper{color:var(--copper)}
.t-mark{background:var(--flame-soft);color:var(--tinder);padding:0 .18em;border-radius:var(--r)}
.cc-look-edit{display:flex;flex-wrap:wrap;gap:12px}
.cc-ld{width:184px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:8px;position:relative;display:flex;flex-direction:column;gap:7px}
.cc-ld img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r)}
.cc-ld-cap{font-size:12px;padding:6px 8px}
.cc-ld-del{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:var(--r);border:0;background:rgba(13,15,20,.72);color:#fff;cursor:pointer;font-size:15px;line-height:1}
.cc-ld-del:hover{background:var(--lithium)}
.cc-ld-add{width:184px;min-height:128px;border:1px dashed var(--rule);border-radius:var(--r);display:flex;align-items:center;justify-content:center;color:var(--smoke);cursor:pointer;font-weight:700;font-size:13px;transition:.15s}
.cc-ld-add:hover{border-color:var(--flame);color:var(--flame)}
@media(max-width:760px){.cc-grid2{grid-template-columns:1fr}}

/* ── Client references (uploads — portal + staff Overview) ─────────────────── */
.pt-ref-grid{display:flex;flex-wrap:wrap;gap:12px}
.pt-ref{width:150px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;position:relative;display:flex;flex-direction:column}
.pt-ref-thumb{display:flex;align-items:center;justify-content:center;width:100%;height:90px;background:var(--surface-3) center/cover no-repeat;color:var(--smoke);font-weight:800;font-size:13px;letter-spacing:.08em;border:0;cursor:pointer;transition:filter .15s}
.pt-ref-thumb:hover{filter:brightness(1.1)}
.pt-ref-open.k-video{color:var(--flame);font-size:24px}
.pt-ref-open.k-link{color:var(--copper)}
/* video-link tiles that resolved to an official poster thumbnail get a play badge over the image */
.pt-ref-thumb.has-poster{color:transparent;position:relative}
/* PDF (and other) image thumbnail: show the preview, no play badge, not dimmed */
.pt-ref-thumb.has-thumb{color:transparent;position:relative}
.pt-ref-thumb.has-poster::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:rgba(13,15,20,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/14px no-repeat;border:1.5px solid rgba(255,255,255,.7)}
.pt-ref-linkrow{display:flex;gap:8px;margin-top:10px;max-width:480px}
.pt-ref-linkrow .input{flex:1}
.cl-card{margin-bottom:16px}
.cl-projs{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 14px}
.cl-acts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
/* Concertina header + delete control */
.cl-toggle{cursor:pointer;margin:0;user-select:none}
.cl-toggle:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
.cl-caret{display:inline-block;width:1em;color:var(--ink-3);font-size:12px;transition:transform var(--dur,.3s) var(--ease)}
.cl-head-right{display:inline-flex;align-items:center;gap:12px}
.cl-del{background:none;border:1px solid var(--rule);color:var(--ink-3);width:26px;height:26px;line-height:1;
  cursor:pointer;font-size:13px;flex:none;transition:color var(--dur,.3s) var(--ease),border-color var(--dur,.3s) var(--ease),background var(--dur,.3s) var(--ease)}
.cl-del:hover{color:#ff6c9d;border-color:rgba(245,0,98,.4);background:rgba(245,0,98,.08)}
.cl-body[hidden]{display:none}
.inline-form .row[hidden]{display:none}
.proj-icon-row{display:flex;align-items:center;gap:14px;margin-bottom:14px}
/* 16:9 to match exactly what the client sees in their portal (.pt-thumb) — same crop */
.proj-icon{width:96px;height:54px;border-radius:var(--r);background:var(--surface-3) center/cover no-repeat;border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;color:var(--smoke);font-size:22px;flex:none}
.pt-ref-meta{padding:8px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.pt-ref-name{font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-ref-by{font-size:11px;color:var(--ink-3)}
.pt-ref-fetchrow{display:flex;flex-wrap:wrap;gap:6px;padding:0 10px 8px}
.pt-ref-fetchrow .xs{font-size:11px;padding:3px 8px}
.pt-ref-del{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:var(--r);border:0;background:rgba(13,15,20,.72);color:#fff;cursor:pointer;font-size:15px;line-height:1}
.pt-ref-del:hover{background:var(--lithium)}
.pt-ref-add{width:150px;min-height:128px;border:1px dashed var(--rule);border-radius:var(--r);display:flex;align-items:center;justify-content:center;color:var(--smoke);cursor:pointer;font-weight:700;font-size:13px;text-align:center;transition:.15s}
.pt-ref-add:hover,.pt-ref-add.busy{border-color:var(--flame);color:var(--flame)}

/* ── Creative concept treatment page (concept.php) ─────────────────────────── */
.cc-page{max-width:1000px}
.cc-hero{padding:14px 0 22px;border-bottom:1px solid var(--rule);margin-bottom:26px}
.cc-hero h1{font-size:clamp(30px,5vw,52px);line-height:1.05;margin:6px 0 8px}
.cc-hero-sub{color:var(--smoke);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.cc-quad{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;margin-bottom:8px}
.cc-qcard{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:20px 22px}
.cc-qcard .cc-doc{padding:0}
.cc-qwide{grid-column:1 / -1}
.cc-qlabel{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--flame);margin-bottom:12px}
.cc-qmeta{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.cc-buildt{display:flex;flex-direction:column;gap:2px}
.cc-mlab{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--smoke)}
.cc-buildt strong{font-size:20px;color:var(--tinder)}
.cc-pull{margin:30px auto;max-width:780px;text-align:center;font-size:clamp(20px,3vw,30px);font-weight:300;line-height:1.25;color:var(--tinder);border:0;padding:10px 0;letter-spacing:-.01em}
.cc-h2{font-size:20px;font-weight:800;margin:28px 0 14px}
.cc-look{margin-top:14px}
.cc-look-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.cc-look-item{margin:0;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.cc-look-item img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .2s}
.cc-look-btn{display:block;width:100%;border:0;background:0;padding:0;cursor:pointer}
.cc-look-item a:hover img,.cc-look-btn:hover img{transform:scale(1.03)}
.cc-look-item figcaption{padding:9px 12px;font-size:12.5px;color:var(--ink-2)}
.cc-comments{margin-top:28px;border-top:1px solid var(--rule);padding-top:18px}
.cc-cmlist{display:flex;flex-direction:column;gap:4px;max-height:420px;overflow-y:auto;margin-bottom:14px}
.cc-cm{padding:10px 0;border-bottom:1px solid var(--rule-2)}
.cc-cm:last-child{border-bottom:0}
.cc-cm strong{color:var(--tinder)}
.cc-cm p{margin:4px 0 0;color:var(--ink-2);line-height:1.6}
.cc-compose{display:flex;flex-direction:column;gap:8px;max-width:560px}
.cc-compose textarea{background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--r-sm);padding:10px;color:var(--tinder);font:inherit;font-size:14px;resize:vertical}
.cc-compose .btn{align-self:flex-start}
@media(max-width:760px){.cc-quad{grid-template-columns:1fr}}

.plan-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
.ps-card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:14px;text-align:center}
.ps-n{font-size:22px;font-weight:900;letter-spacing:-.02em;color:var(--tinder);font-variant-numeric:tabular-nums}
.ps-l{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--smoke);margin-top:3px}
.ps-card.over .ps-n{color:var(--lithium)}
.ps-card.under .ps-n{color:var(--barium)}

.phase-ed-h{margin:0 0 6px}
.phase-ed-head,.pe-row{display:grid;grid-template-columns:1.6fr 1.1fr 132px 132px 1fr 1.2fr 66px;gap:10px;align-items:center}
.phase-ed-head{padding:0 12px 8px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--smoke)}
.phase-editor{display:flex;flex-direction:column;gap:8px}
.pe-row{background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--surface-3);border-radius:var(--r-sm);padding:10px 12px;transition:border-color .15s,background .35s}
.pe-row.st-in_progress{border-left-color:var(--copper)}
.pe-row.st-waiting_client{border-left-color:#ffb020}
.pe-row.st-blocked{border-left-color:var(--lithium)}
/* short client-facing descriptor — only shown for waiting-on-client / blocked phases */
.pe-note{grid-column:1/-1;display:none;margin-top:2px}
.pe-row.st-waiting_client .pe-note,.pe-row.st-blocked .pe-note{display:block}
.pe-row.st-waiting_client .pe-note{border-color:#ffb020}
.pe-row.st-blocked .pe-note{border-color:var(--lithium)}
.pe-row.st-done{border-left-color:var(--barium)}
.pe-row.flashrow{background:var(--flame-soft)}
.pe-row .input,.pe-row .select{margin:0}
.pe-prog{display:flex;align-items:center;gap:8px}
.pe-prog input[type=range]{flex:1;accent-color:var(--flame);cursor:pointer}
.pe-progv{font-size:11px;font-weight:700;color:var(--ink-2);min-width:34px;text-align:right;font-variant-numeric:tabular-nums}
.pe-del{background:transparent;border:1px solid var(--rule);color:var(--smoke);width:28px;height:28px;border-radius:var(--r);cursor:pointer;font-size:16px;line-height:1;transition:.15s}
.pe-del:hover{border-color:var(--lithium);color:var(--lithium)}
.gantt-empty,.g-empty{padding:34px 18px;text-align:center;color:var(--ink-3)}

/* client read-only Gantt */
.cl-gantt .g-bar{cursor:default}
.cl-gantt .g-bar:hover{filter:none;transform:none}
.g-st{font-style:normal;font-weight:700}
.g-st.st-not_started{color:#5a8e93}  /* subdued teal — matches the scheduled bar, still AA */
.g-st.st-in_progress{color:var(--copper)}
.g-st.st-waiting_client{color:#ffb020}
.g-st.st-blocked{color:var(--lithium)}
.g-st.st-done{color:var(--barium)}

@media(max-width:860px){
  .plan-summary{grid-template-columns:repeat(2,1fr)}
  .phase-ed-head{display:none}
  .pe-row{grid-template-columns:1fr 1fr;gap:8px}
  .g-axis{margin-left:140px}
  .g-overlay{left:140px}
  .g-label{width:140px;min-width:140px;padding:0 10px}
}