/* ─────────────────────────────────────────────────────────────────────────
   Accelerator STUDIO theme — the same global design system as accel-shell.css,
   applied to the marketing workspace served at /accel/<id> (Platform/Accel/ui/
   templates.html: Gallery / Create / Launch / Campaigns).

   Jim 2026-07-24: "This page does not feel the same design-wise as the others"
   (/accel/gdv-cannabis). The studio predates the shell and carried the old
   Arial + royal-blue + 14px-radius look while every other accelerator page had
   moved to the canonical GDV language. This sheet is loaded AFTER the studio's
   inline <style>, re-points its five design tokens at the shell palette, and
   restyles the chrome (header, tabs, cards, buttons, controls) to match.

   It is TENANT-NEUTRAL and lives in the shared engine, so every accelerator on
   every host inherits it from one file — no per-tenant copy. Layout, geometry
   and the proof/mechanical frames are deliberately untouched: this changes how
   the studio LOOKS, never what it renders.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  --font-sans:"Inter","Inter var",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Inter Tight","Inter",-apple-system,"Segoe UI",sans-serif;

  /* the studio's five tokens, re-pointed at the shell palette */
  --bg:#f7f7f8;
  --ink:#0d0f14;
  --mut:#6b7280;
  --line:#ececf1;
  --blue:#10a37f;            /* the studio's "accent" token → one emerald */

  --surface:#ffffff;
  --surface-2:#f4f4f5;
  --ink-2:#353740;
  --line-2:#e3e3ea;
  --accent:#10a37f;
  --accent-ink:#0d8a6a;
  --accent-soft:#e7f6f1;
  --accent-line:#bfe6da;

  --radius:20px;
  --radius-sm:13px;
  --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(13,15,20,.04),0 2px 6px rgba(13,15,20,.05);
  --shadow-md:0 10px 34px rgba(13,15,20,.08);
  --ease:cubic-bezier(.2,.6,.2,1);
}

/* One light canvas everywhere. The studio shipped a dark-scheme block from
   before there was a design system; the canonical pages are light-only, so a
   dark OS preference must not split the accelerators into two looks. */
@media (prefers-color-scheme:dark){
  :root{--bg:#f7f7f8;--ink:#0d0f14;--mut:#6b7280;--line:#ececf1;--blue:#10a37f}
  header,.tpl,.meta,.lwrap,.lchip,.ltog,.lselect,.lconfirm,.drop,.asset,.doc,
  .qa,.cbar select,.proofcard,.proofframe,.trash,.menu-media select,
  .menu-launch select,.menu-create select,.crtpl select,
  table.lsched,table.lsched td,table.lsched input[type=date],
  table.lsched input[type=number]{background:#fff;color:var(--ink)}
  table.lsched th,table.lsched tr.lselrow td{background:var(--surface-2)}
  .lchip.on{background:var(--accent-soft);color:var(--accent-ink)}
  .drop.hot{background:var(--accent-soft)}
  .trash{border-color:#fecaca}
}

html,body{
  font-family:var(--font-sans);
  font-size:16px;line-height:1.55;letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background:var(--bg);
}
body{
  position:relative;
  background-image:
    radial-gradient(46% 34% at 12% -4%,#e6f6f0 0%,rgba(230,246,240,0) 62%),
    radial-gradient(50% 40% at 88% -6%,#eaf0ff 0%,rgba(234,240,255,0) 60%),
    radial-gradient(70% 46% at 50% -8%,#eef6f3 0%,rgba(238,246,243,0) 72%);
  background-repeat:no-repeat;
}
/* the same whisper-fine canvas dot grid as the shell */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(13,15,20,.038) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000 0%,transparent 68%);
          mask-image:radial-gradient(120% 80% at 50% 0%,#000 0%,transparent 68%);
}
::selection{background:var(--accent-soft);color:var(--accent-ink)}
h1,h2,h3{text-wrap:balance}

/* ── header: the shell's sticky glass bar ────────────────────────────────── */
header{
  background:rgba(247,247,248,.82);
  backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
  gap:16px;z-index:40;
  /* full-bleed glass, content centred on the same 1180px spine as <main> —
     the studio header has no inner .bar wrapper to centre, so the padding does
     it (matching the shell, where the bar is centred inside a full-width bar). */
  padding:14px max(22px,calc((100% - 1180px) / 2));
}
.brand{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);
  white-space:nowrap;padding:5px 11px;border:1px solid var(--line-2);
  border-radius:var(--radius-pill);background:var(--surface);order:2;
}
.brand b{color:var(--accent-ink);font-weight:700}
.appname{
  font-family:var(--font-display);font-size:20px;font-weight:700;
  letter-spacing:-.02em;color:var(--ink);order:1;
}
.appname small{letter-spacing:0}
nav{order:3}
nav a{
  display:inline-flex;align-items:center;font-weight:600;color:var(--ink);
  padding:9px 16px;border-radius:var(--radius-pill);
  border:1px solid var(--line-2);background:var(--surface);
  transition:transform .12s var(--ease),box-shadow .16s var(--ease);
}
nav a:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}

main{max-width:1180px;padding:30px 22px 84px}
h2{font-family:var(--font-display);font-size:12px;letter-spacing:.12em;color:var(--mut)}
.lead,.famdesc,.lhelp,.note{color:var(--ink-2)}
a{color:var(--accent-ink)}

/* ── tabs ────────────────────────────────────────────────────────────────── */
.tabs{border-bottom:1px solid var(--line);gap:4px}
.tabs button{color:var(--mut);border-radius:var(--radius-sm) var(--radius-sm) 0 0}
.tabs button:hover{color:var(--ink);background:var(--surface-2)}
.tabs button[aria-selected=true]{color:var(--accent-ink);border-bottom-color:var(--accent)}

/* ── surfaces ────────────────────────────────────────────────────────────── */
.tpl,.lwrap,.drop,.empty,.doc,.proofcard,.asset,.lconfirm,table.lsched{
  border-radius:var(--radius);border-color:var(--line);
}
.tpl,.lwrap,.doc,.proofcard{box-shadow:var(--shadow-sm)}
.tpl{transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)}
.tpl:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--accent-line)}
/* the emerald hairline that wipes across a card top on hover, as on the shell */
.tpl::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:7;
  background:linear-gradient(90deg,var(--accent),#34d3ab 60%,#2563eb);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.tpl:hover::after{transform:scaleX(1)}
.asset,.lpcard{border-radius:var(--radius-sm)}
.doc .h,.proofcap{border-bottom-color:var(--line)}
.doc .h a,.proofcap a,.meta a.open,.importmore>summary{color:var(--accent-ink)}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn{
  border-radius:var(--radius-pill);padding:11px 18px;
  background:linear-gradient(180deg,#15b090,var(--accent));
  border:1px solid var(--accent-ink);color:#fff;
  box-shadow:0 1px 2px rgba(16,163,127,.25),inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .12s var(--ease),box-shadow .16s var(--ease),background .16s var(--ease);
}
.btn:hover{transform:translateY(-1px);background:linear-gradient(180deg,#12a082,var(--accent-ink));
  box-shadow:0 10px 26px rgba(16,163,127,.32)}
.btn[disabled],.btn:disabled{opacity:.55;transform:none;box-shadow:none}
.btn.ghost{
  background:var(--surface);color:var(--ink);border-color:var(--line-2);
  box-shadow:none;
}
.btn.ghost:hover{background:var(--surface-2);box-shadow:var(--shadow-sm)}
.restore,.qa,.lchip,.ltog{border-radius:var(--radius-pill)}
.restore:hover{background:var(--surface-2);border-color:var(--accent-line)}
.qa{color:var(--accent-ink);background:var(--accent-soft);border-color:var(--accent-line)}
.lchip.on{
  border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent-ink);
  box-shadow:0 0 0 1px var(--accent-line) inset;
}
.ltog.on{border-color:var(--accent-ink);background:var(--accent);color:#fff}
.lpsend{background:var(--accent);border-radius:var(--radius-pill);padding:6px 14px}
.lconfirm{border-left:3px solid var(--accent)}

/* ── controls ────────────────────────────────────────────────────────────── */
select,input[type=text],input[type=date],input[type=number],textarea{
  font-family:var(--font-sans);
}
.famrow select,.menu-media select,.menu-launch select,.menu-create select,
.crtpl select,.cbar select,.lselect,.q input,.q select{
  border-radius:var(--radius-sm);border-color:var(--line-2);
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
}
.famrow select:focus,.menu-media select:focus,.menu-launch select:focus,
.menu-create select:focus,.crtpl select:focus,.cbar select:focus,
.lselect:focus,input:focus-visible,textarea:focus-visible{
  outline:0;border-color:var(--accent-line);box-shadow:0 0 0 4px var(--accent-soft);
}
input[type=checkbox]{accent-color:var(--accent)}
.lpick input[type=checkbox]{accent-color:var(--accent)}

/* ── small type / badges ─────────────────────────────────────────────────── */
.famrow label,.menu-media label,.menu-launch label,.menu-create label,
.crtpl label,.llabel{letter-spacing:.1em;font-size:11px}
.meta .sz,.lmtag{background:var(--accent-soft);color:var(--accent-ink)}
.meta .sz{border:1px solid var(--accent-line)}
table.lsched th{background:var(--surface-2);letter-spacing:.06em}
.drop{border-radius:var(--radius);border-color:var(--line-2)}
.drop.hot{border-color:var(--accent);background:var(--accent-soft)}
.spin{border-top-color:var(--accent)}
.site-foot{border-top-color:var(--line);letter-spacing:.02em}
.site-foot a:hover{color:var(--accent-ink)}
.site-foot .foot-by b{color:var(--accent-ink)}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}