/* UNITE Studio, one design system.
   Every Studio surface links this file. The ground is chosen by one class on
   <body>: nothing = the dark UNITE app, .studio-light = the document a client
   reads and pays from. Both grounds carry the same token names, so a component
   written once works on either, and flipping a surface is one word.

   Where the line falls, and why:
     light  /studio/{slug}     the proposal, with a name and a card on it
     light  /order             a client builds their own
     dark   /studio            the board Shine and Kristall work in
     dark   /results           it wears the UNITE top bar, so it is a UNITE page

   The line: a document addressed to one person, that asks for a card, is
   light. A surface you browse or live inside is dark. The proposal email is
   already ink on white with a navy button, so a client who taps through from
   it stays inside the same document instead of landing on a website.
   /results carries the UNITE nav and top bar, which settles it as a product
   surface rather than a document.
*/

:root {
  --bg:#0a0e27;
  --cyan:#00d4ff; --cyan-br:#00d4ff;
  --purple:#a855f7; --purple-br:#a855f7;
  --glass:rgba(255,255,255,.045); --glass-strong:rgba(255,255,255,.08);
  --stroke:rgba(255,255,255,.10); --stroke-soft:rgba(255,255,255,.06);
  --stroke-bright:rgba(0,212,255,.25);
  --text:rgba(255,255,255,.92); --text-dim:rgba(255,255,255,.62);
  --text-faint:rgba(255,255,255,.55);
  --good:#22c55e; --warn:#ef4444;
  --shadow:none;
  --ink:#0a0a1a;

  /* one radius scale, one button height, one duration set */
  --radius:20px; --radius-sm:14px; --radius-pill:999px;
  --tap:44px; --tap-lg:50px;
  --ease-out:cubic-bezier(.05,.7,.1,1); --ease-slide:cubic-bezier(.2,0,0,1);
  --ease-in:cubic-bezier(.05,.7,.1,1); --ease-up:cubic-bezier(.2,0,0,1);
  --toast-bottom:112px;
}

/* The class goes on BOTH <html> and <body>. html{background:var(--bg)} resolves
   against :root, so a class on <body> alone leaves the root element dark and
   an overscroll rubber-band shows navy behind a light page. Found by reading
   the computed style of <html> rather than by looking at a screenshot, which
   is exactly the kind of thing a screenshot cannot show. */
:root.studio-light,
body.studio-light {
  --bg:#f6f8fc;
  --cyan:#0891b2; --cyan-br:#00d4ff;
  --purple:#7c3aed; --purple-br:#a855f7;
  --glass:#ffffff; --glass-strong:#f2f5fb;
  --stroke:#e3e7f2; --stroke-soft:#eef1f8;
  --stroke-bright:rgba(8,145,178,.42);
  --text:#0f1430; --text-dim:#3b4266;
  --text-faint:#6b7394;
  --good:#15803d; --warn:#ef4444;
  --shadow:0 12px 32px rgba(15,20,48,.07);
}

/* --cyan is the readable one and --cyan-br is the vivid one. On dark they are
   the same colour. On white #00d4ff measures 1.8:1 and cannot carry text, so
   --cyan darkens for type while --cyan-br stays full chroma inside gradients
   and fills, where contrast is not the question. One hue, two roles. */

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent }
html { background:var(--bg) }
body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--text); min-height:100dvh; overflow-x:hidden;
}

.cosmos {
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 82% 52% at 50% -8%, rgba(0,212,255,.13), transparent 62%),
    radial-gradient(ellipse 62% 44% at 88% 104%, rgba(168,85,247,.11), transparent 58%),
    var(--bg);
}

/* ---- type ---- */
.eyebrow {
  font-size:11px; font-weight:800; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--cyan); margin-bottom:8px;
}
h1 .cg, .cg {
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:600; color:var(--cyan);
}
.money-fig { font-variant-numeric:tabular-nums; font-weight:700 }

/* ---- surfaces ---- */
.card {
  background:var(--glass); border:1px solid var(--stroke); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:20px 18px; margin-bottom:14px;
}

/* ---- buttons: the gradient is the primary, and there is one of it per screen ---- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--tap-lg); padding:0 22px; border:none;
  border-radius:var(--radius-pill);
  background:linear-gradient(135deg, var(--cyan-br), var(--purple-br)); color:var(--ink);
  font-family:inherit; font-size:15px; font-weight:700; cursor:pointer;
  transition:transform .15s var(--ease-out), box-shadow .15s var(--ease-out),
             border-color .15s var(--ease-out), opacity .15s var(--ease-out);
}
.btn:hover { transform:translateY(-1px) }
.btn:active { transform:translateY(0); opacity:.85 }
.btn[disabled], .btn:disabled { opacity:.45; cursor:default; transform:none }
.btn.ghost {
  background:var(--glass); border:1px solid var(--stroke); color:var(--text); box-shadow:none;
}
.btn.ghost:hover { border-color:var(--stroke-bright); box-shadow:none }
.btn.sm { min-height:var(--tap); font-size:13.5px; padding:0 16px }
.btn.tiny { min-height:var(--tap); width:var(--tap); padding:0; font-size:18px }
.btn.wide { width:100% }
/* An <a class="btn"> is a button, so it does not underline. Three pages were
   each patching this locally. */
a.btn, a.btn:hover { text-decoration:none }
.btnrow { display:flex; gap:10px; flex-wrap:wrap; align-items:center }

/* ---- toast: one position on every surface ---- */
.toast {
  position:fixed; left:50%; bottom:var(--toast-bottom); transform:translate(-50%,14px);
  z-index:90; max-width:calc(100vw - 32px);
  padding:12px 20px; border-radius:var(--radius-pill);
  border:1px solid var(--stroke-bright); background:var(--glass-strong);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:var(--shadow); color:var(--text);
  font-size:14px; font-weight:600; text-align:center;
  opacity:0; pointer-events:none;
  transition:opacity .22s var(--ease-out), transform .22s var(--ease-out);
}
.toast.on { opacity:1; transform:translate(-50%,0) }

/* ---- edit mode ----
   v1837 put this on the proposal page only. v1842 moves it here so /order has
   it too, and so a future surface gets it by linking one file.

   Nothing below renders for a client. The markup itself is only emitted when
   GET /api/studio/me says this viewer is a named editor, which is a session
   lookup against STUDIO_EDITORS and cannot be carried by a link. */
.ebar {
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:12px;
  margin:-30px -18px 18px; padding:12px 18px;
  background:rgba(124,58,237,.08); border-bottom:1px solid rgba(124,58,237,.22);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.ebar .who { flex:1; min-width:0; font-size:12.5px; font-weight:700;
  color:var(--purple); letter-spacing:.3px }
.ebar button {
  min-height:var(--tap); padding:0 16px; border-radius:var(--radius-pill);
  border:1px solid var(--stroke); background:transparent; color:var(--text);
  font-family:inherit; font-size:13.5px; font-weight:700; cursor:pointer;
  transition:all .18s var(--ease-out);
}
.ebar button.on { border-color:var(--purple); color:#fff; background:var(--purple) }

body.editing .edt {
  cursor:text; border-radius:6px;
  transition:background .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
body.editing .edt:hover {
  background:rgba(124,58,237,.09); box-shadow:0 0 0 4px rgba(124,58,237,.09);
}
body.editing .edt:focus {
  outline:none; background:var(--glass); box-shadow:0 0 0 2px var(--purple);
}
/* An emptied field still has to be findable, or clearing one loses it. */
body.editing .edt.empty::before { content:attr(data-ph); color:var(--text-faint) }

.esav {
  position:fixed; left:50%; bottom:96px; transform:translate(-50%,14px); z-index:60;
  background:var(--purple); color:#fff; border-radius:var(--radius-sm);
  padding:10px 18px; font-size:13px; font-weight:700;
  opacity:0; pointer-events:none;
  transition:opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.esav.on { opacity:1; transform:translate(-50%,0) }

/* ---- paper ----
   A proposal gets forwarded to a partner or a bookkeeper, and it gets printed.
   Neither ground survives a printer as-is, so both become ink on white. */
@media print {
  html, body, body.studio-light { background:#fff !important; color:#111 !important }
  .cosmos, .toast, .btn, .btnrow, .ebar, .esav { display:none !important }
  .card {
    background:#fff !important; border:1px solid #d8dce8 !important;
    box-shadow:none !important; break-inside:avoid;
  }
  .eyebrow, h1 .cg, .cg { color:#111 !important }
  a { color:#111 !important; text-decoration:underline }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.01ms !important; animation-iteration-count:1 !important;
      transition-duration:.01ms !important; scroll-behavior:auto !important }
}

/* v1900: the proof, first. Shine: "how soon into it do we tell people about
   the 3 million plus views on shorts and the 1.3 million podcast streams and
   our strategy of how to do that... front and center." Every clipping agency
   worth copying leads with one number and the method beside it (Clipping
   Culture, Lumina). These are UNITE's own channels, never client results, and
   the small line says so. Numbers are the founder's own, already live on /thrive
   and /ai; the dated screenshots behind them are what makes them VERIFIED. */
.proof{margin:18px 0 26px;padding:18px 18px 16px;border:1px solid var(--stroke);
  border-radius:var(--radius);background:var(--glass);box-shadow:var(--shadow)}
.proof .pn{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.proof .pn div{min-width:0}
.proof b{display:block;font-family:'Cormorant Garamond',serif;font-style:italic;
  font-weight:600;font-size:clamp(30px,8vw,40px);line-height:1;color:var(--cyan);
  font-variant-numeric:tabular-nums}
.proof .pn span{display:block;margin-top:6px;font-size:12.5px;line-height:1.4;color:var(--text-dim)}
.proof .how{margin-top:14px;padding-top:12px;border-top:1px solid var(--stroke-soft);
  font-size:14px;line-height:1.55;color:var(--text)}
.proof small{display:block;margin-top:6px;font-size:11.5px;color:var(--text-faint)}