/* Client workspace shell — shared by the client dashboard + project portal.
   Its own clean chrome (no marketing nav / lang switcher / footer). Premium,
   focused, trustworthy. Uses site.css tokens; falls back if absent. */

body { background:var(--bg,#09090B); }
.cx-page { min-height:100vh; min-height:100dvh; background:transparent; color:var(--ink,#F4F2EF); display:flex; flex-direction:column; }

/* ── ambient atmosphere (behind dashboard + portal) ── */
.cx-atmos { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:-1; }
.cx-atmos .glow { position:absolute; width:52vw; height:52vw; max-width:760px; max-height:760px; border-radius:50%; filter:blur(90px); }
.cx-atmos .g1 { background:var(--cyan,#22d3ee); opacity:.12; top:-16vw; left:-8vw; animation:cx-d1 24s ease-in-out infinite; }
.cx-atmos .g2 { background:var(--purple,#a78bfa); opacity:.11; top:36vh; right:-12vw; animation:cx-d2 28s ease-in-out infinite; }
.cx-atmos .g3 { background:var(--green,#10b981); opacity:.08; bottom:-18vw; left:26vw; animation:cx-d1 32s ease-in-out infinite reverse; }
.cx-atmos .grain { position:absolute; inset:0; opacity:.04; background-image:radial-gradient(circle,#fff .5px,transparent .6px); background-size:3px 3px; }
@keyframes cx-d1 { 50% { transform:translate(6vw,4vh) scale(1.15); } }
@keyframes cx-d2 { 50% { transform:translate(-5vw,-4vh) scale(1.1); } }

/* ── card reveal (opacity only, so hover transforms still work) ── */
.portal-card, .cx-card { animation:cx-fadein .55s ease both; }
.portal-card:nth-of-type(2){ animation-delay:.05s } .portal-card:nth-of-type(3){ animation-delay:.1s } .portal-card:nth-of-type(4){ animation-delay:.15s } .portal-card:nth-of-type(n+5){ animation-delay:.2s }
@keyframes cx-fadein { from { opacity:0 } to { opacity:1 } }

/* ── animated project progress rail (portal) ── */
.pp-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:22px; }
.pp-stage { font-family:var(--serif,'Instrument Serif',Georgia,serif); font-size:clamp(1.5rem,3vw,2rem); color:var(--ink,#F4F2EF); line-height:1; }
.pp-of { font-family:var(--mono,monospace); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint,#8E8882); }
.portal-rail { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding:4px 0 2px; }
.portal-rail::before { content:""; position:absolute; left:12.5%; right:12.5%; top:23px; height:2px; background:var(--line,#2A2826); border-radius:2px; }
.portal-rail .prog { position:absolute; left:12.5%; top:23px; height:2px; background:linear-gradient(90deg,var(--green,#10b981),var(--cyan,#22d3ee)); border-radius:2px; transition:width .8s cubic-bezier(.16,1,.3,1); }
.portal-stage { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; }
.portal-stage .knob { width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--mono,monospace); font-size:14px; font-weight:600; color:var(--faint,#8E8882); background:var(--card,#0C0C0E); border:2px solid var(--line,#2A2826); transition:border-color .2s, color .2s; }
.portal-stage.done .knob { border-color:var(--green,#10b981); color:var(--green,#10b981); background:color-mix(in oklab,var(--green,#10b981) 14%,var(--card,#0C0C0E)); }
.portal-stage.current .knob { border-color:var(--green,#10b981); color:var(--green,#10b981); box-shadow:0 0 0 5px color-mix(in oklab,var(--green,#10b981) 16%,transparent); animation:cx-knob 2.6s ease-in-out infinite; }
.portal-stage .lb { font-family:var(--mono,monospace); font-size:11px; letter-spacing:.05em; color:var(--faint,#8E8882); }
.portal-stage.done .lb, .portal-stage.current .lb { color:var(--ink,#F4F2EF); }
@keyframes cx-knob { 0%,100% { box-shadow:0 0 0 5px color-mix(in oklab,var(--green,#10b981) 16%,transparent); } 50% { box-shadow:0 0 0 9px color-mix(in oklab,var(--green,#10b981) 5%,transparent); } }
@media (max-width:520px){ .portal-stage .knob { width:38px; height:38px; font-size:12px; } .portal-rail::before, .portal-rail .prog { top:19px; } }

.cx-top { position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px clamp(18px,4vw,44px); background:rgba(9,9,11,0.86); backdrop-filter:blur(14px); border-bottom:1px solid var(--line,#2A2826); }
.cx-brand { display:inline-flex; align-items:center; gap:11px; color:var(--ink,#F4F2EF); text-decoration:none; }
.cx-logo { width:28px; height:28px; border:1px solid var(--line,#2A2826); border-radius:7px; display:inline-flex; align-items:center; justify-content:center; font-family:var(--mono,monospace); font-size:11px; font-weight:700; background:var(--card,#0C0C0E); }
.cx-brandtext { font-family:var(--mono,monospace); font-size:13px; font-weight:600; letter-spacing:.01em; }
.cx-brandtext .s { color:var(--faint,#8E8882); font-weight:400; }
.cx-top-right { display:flex; align-items:center; gap:14px; font-family:var(--mono,monospace); font-size:12px; color:var(--faint,#8E8882); }
.cx-top-right a { color:var(--faint,#8E8882); text-decoration:none; }
.cx-top-right a:hover { color:var(--ink,#F4F2EF); }
.cx-chip { font-family:var(--mono,monospace); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan,#22d3ee); border:1px solid color-mix(in oklab,var(--cyan,#22d3ee) 32%,transparent); border-radius:999px; padding:4px 10px; }
.cx-logout { background:none; border:1px solid var(--line,#2A2826); border-radius:8px; color:var(--dim,#A8A29E); font-family:var(--mono,monospace); font-size:11px; padding:6px 12px; cursor:pointer; }
.cx-logout:hover { color:var(--ink,#F4F2EF); border-color:var(--dim,#A8A29E); }

.cx-main { flex:1; width:100%; max-width:940px; margin:0 auto; padding:clamp(28px,5vw,56px) clamp(18px,4vw,32px); }

/* page intro */
.cx-eyebrow { font-family:var(--mono,monospace); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan,#22d3ee); }
.cx-h1 { font-family:var(--serif,'Instrument Serif',Georgia,serif); font-weight:400; font-size:clamp(2rem,1.4rem+2.4vw,3rem); letter-spacing:-.02em; line-height:1.04; margin:10px 0 6px; }
.cx-sub { color:var(--dim,#A8A29E); font-size:14.5px; line-height:1.6; margin:0 0 26px; }

.cx-foot { border-top:1px solid var(--line,#2A2826); padding:18px clamp(18px,4vw,44px); font-family:var(--mono,monospace); font-size:11px; color:var(--faint,#8E8882); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.cx-foot a { color:inherit; text-decoration:none; }
.cx-foot a:hover { color:var(--ink,#F4F2EF); }

/* elevated project cards (client dashboard) */
.cx-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr)); gap:16px; }
.cx-card { display:block; border:1px solid var(--line,#2A2826); background:var(--card,#0C0C0E); border-radius:16px; padding:22px 22px 18px; text-decoration:none; color:inherit; transition:border-color .18s ease, transform .18s ease; position:relative; overflow:hidden; }
.cx-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--green,#10b981); opacity:.0; transition:opacity .18s ease; }
.cx-card:hover { border-color:color-mix(in oklab,var(--cyan,#22d3ee) 45%,var(--line,#2A2826)); transform:translateY(-2px); }
.cx-card:hover::before { opacity:.9; }
.cx-card .st { font-family:var(--mono,monospace); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan,#22d3ee); }
.cx-card .cx-card-name { font-size:15px; font-weight:600; color:var(--ink,#F4F2EF); margin-top:8px; line-height:1.25; }
.cx-card .amt { font-family:var(--serif,'Instrument Serif',Georgia,serif); font-size:2rem; margin:10px 0 2px; line-height:1; }
.cx-card .pay { font-family:var(--mono,monospace); font-size:11.5px; color:var(--faint,#8E8882); margin-top:8px; }
.cx-card .flag { display:inline-block; font-family:var(--mono,monospace); font-size:10.5px; margin-top:12px; padding:4px 9px; border-radius:999px; border:1px solid; }
.cx-card .flag.sign { color:var(--amber,#F59E0B); border-color:color-mix(in oklab,var(--amber,#F59E0B) 45%,transparent); background:color-mix(in oklab,var(--amber,#F59E0B) 10%,transparent); }
.cx-card .flag.signed { color:var(--green,#10b981); border-color:color-mix(in oklab,var(--green,#10b981) 45%,transparent); background:color-mix(in oklab,var(--green,#10b981) 10%,transparent); }
.cx-card .go { font-family:var(--mono,monospace); font-size:12px; color:var(--cyan,#22d3ee); margin-top:16px; display:inline-block; }
.cx-empty { border:1px dashed var(--line,#2A2826); border-radius:16px; padding:40px 28px; text-align:center; color:var(--dim,#A8A29E); }

/* ── dashboard search + unified documents ── */
.cx-search { width:100%; box-sizing:border-box; background:var(--card,#0C0C0E); border:1px solid var(--line,#2A2826); border-radius:12px; color:var(--ink,#F4F2EF); font:inherit; font-size:14px; padding:12px 16px; margin-bottom:18px; }
.cx-search::placeholder { color:var(--faint,#8E8882); }
.cx-search:focus { outline:none; border-color:color-mix(in oklab,var(--cyan,#22d3ee) 45%,var(--line,#2A2826)); }
.cx-docs { margin-top:38px; }
.cx-docs-h { font-family:var(--serif,'Instrument Serif',Georgia,serif); font-weight:400; font-size:1.6rem; margin:0 0 4px; }
.cx-doclist { display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.cx-docrow { display:flex; align-items:center; gap:14px; border:1px solid var(--line,#2A2826); background:var(--card,#0C0C0E); border-radius:12px; padding:12px 16px; transition:border-color .18s ease; }
.cx-docrow:hover { border-color:color-mix(in oklab,var(--cyan,#22d3ee) 35%,var(--line,#2A2826)); }
.cx-docico { flex:none; width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-family:var(--mono,monospace); font-size:15px; border:1px solid var(--line,#2A2826); background:var(--bg,#09090B); }
.cx-docico.a { color:var(--purple,#a78bfa); } .cx-docico.f { color:var(--cyan,#22d3ee); }
.cx-docmeta { flex:1; min-width:0; }
.cx-docmeta .nm { font-size:14px; color:var(--ink,#F4F2EF); word-break:break-word; }
.cx-docmeta .meta { font-family:var(--mono,monospace); font-size:11px; color:var(--faint,#8E8882); margin-top:2px; }
.cx-docbtn { flex:none; font-family:var(--mono,monospace); font-size:12px; color:var(--cyan,#22d3ee); text-decoration:none; border:1px solid var(--line,#2A2826); border-radius:8px; padding:6px 12px; }
.cx-docbtn:hover { border-color:var(--cyan,#22d3ee); }

@media (prefers-reduced-motion: reduce) {
  .cx-card:hover { transform:none; }
  .cx-atmos .glow, .portal-stage.current .knob, .portal-card, .cx-card { animation:none !important; }
  .portal-card, .cx-card { opacity:1 !important; }
  .portal-rail .prog { transition:none !important; }
}