/* ============================================================
   Silvea skin: the builder, the dashboards and the policies
   page dressed like silvea.tech. Loaded after builder.css (and
   dashboard.css), it only restyles: the dark theme takes the
   site's palette, both themes take its type (Chakra Petch
   headings, IBM Plex Sans text, JetBrains Mono labels), its
   cyan, purple and magenta gradients and its glow. Remove the
   <link> to go back to the plain builder look.
   Builder chrome only: clients' sites on the canvas and in
   exports never see any of this.
   ============================================================ */
:root{
  --sv-cyan:#00f0ff; --sv-purple:#a855f7; --sv-magenta:#ff2ec4; --sv-blue:#3b82f6;
  --sv-grad:linear-gradient(120deg,var(--sv-cyan),var(--sv-purple) 60%,var(--sv-magenta));
  --sv-grad-soft:linear-gradient(120deg,var(--sv-cyan),var(--sv-blue) 50%,var(--sv-purple));
  --sv-display:"Chakra Petch","IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  --sv-body:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sv-glow:0 0 0 1px color-mix(in srgb,var(--ice) 40%,transparent),0 0 18px color-mix(in srgb,var(--ice) 22%,transparent);
}
/* the site's palette, for the dark theme (the default) */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --chrome:#060a14; --panel:#0a0f1d; --panel-2:#121a2d; --line:#1d2a45; --text:#eef6ff; --muted:#93a3c6;
    --ice:#00f0ff; --on-ice:#04070d; --violet:#c084fc; --canvas:#04070d; --dot:#16213a;
    --danger:#ff6b8a; --ok:#39e58c; --warn:#ffc857;
  }
}
:root[data-theme="dark"]{
  --chrome:#060a14; --panel:#0a0f1d; --panel-2:#121a2d; --line:#1d2a45; --text:#eef6ff; --muted:#93a3c6;
  --ice:#00f0ff; --on-ice:#04070d; --violet:#c084fc; --canvas:#04070d; --dot:#16213a;
  --danger:#ff6b8a; --ok:#39e58c; --warn:#ffc857;
}

/* ---------- type ---------- */
body{font-family:var(--sv-body)}
.sheet-head h2,.db-head h1,.db-card-h h2,.ln-step h1,.ln-step h2,.acct-gate h1,.acct-gate h2,.legal h1,.legal h2,.empty-state b{font-family:var(--sv-display);letter-spacing:.01em}
.db-head h1,.ln-step h1{font-weight:700}
/* small section labels read like the site's "01 — WEBSITES" lines */
.group>summary,.h,.db-tile small,.db-role{font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-weight:600}
.group>summary{color:var(--ice)}
.h{color:var(--muted)}
/* the small hint beside a label (drag to reorder, blog, news...) stays plain, small and on one line */
.h .note{font-family:var(--sv-body);text-transform:none;letter-spacing:0;font-size:11px;font-weight:400;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;opacity:.85}

/* ---------- buttons: the site's gradient, with a soft glow ---------- */
/* the gradient starts at the outer edge (border-box), so it never repeats into the 1px border as a sliver of the other end */
.btn.primary,.btn.primary:hover{background:var(--sv-grad) border-box;border-color:transparent;color:#04070d;font-weight:700}
.btn.primary:hover:not(:disabled){box-shadow:0 0 22px color-mix(in srgb,var(--sv-purple) 45%,transparent),0 0 10px color-mix(in srgb,var(--sv-cyan) 35%,transparent)}
.btn.primary svg{stroke:#04070d}
.btn:not(.primary):not(.danger):hover:not(:disabled){border-color:color-mix(in srgb,var(--ice) 55%,var(--line))}
.btn{transition:box-shadow .2s,border-color .2s,background .2s}
#publishBtn,#exportBtn{letter-spacing:.02em}

/* ---------- tabs, switches and fields ---------- */
.tabs button[aria-selected="true"]{border-bottom-color:transparent;background-image:var(--sv-grad);background-size:100% 2px;background-position:bottom;background-repeat:no-repeat}
.seg button[aria-pressed="true"]{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ice) 45%,transparent),0 0 10px color-mix(in srgb,var(--ice) 18%,transparent)}
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,textarea:focus,select:focus{outline:none;border-color:var(--ice);box-shadow:var(--sv-glow)}

/* ---------- surfaces ---------- */
.top{background:color-mix(in srgb,var(--chrome) 92%,transparent);border-bottom-color:color-mix(in srgb,var(--ice) 18%,var(--line))}
.sheet{border-color:color-mix(in srgb,var(--ice) 22%,var(--line));box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 40px color-mix(in srgb,var(--sv-purple) 12%,transparent);position:relative}
.sheet::before{content:"";position:absolute;left:18px;right:18px;top:-1px;height:2px;border-radius:2px;background:var(--sv-grad);opacity:.9;pointer-events:none}
.modal{backdrop-filter:blur(3px)}
.gh-repo,.app-li,.st-tops>div{border-left:3px solid var(--ice)}

/* ---------- the dashboards ---------- */
.db-card,.db-tile{border-color:color-mix(in srgb,var(--ice) 16%,var(--line))}
.db-tile b{font-family:var(--sv-display)}
.db-nav-a[aria-current]{box-shadow:inset 3px 0 0 var(--ice)}
/* gradient lettering only on the dark theme (on white the cyan end would be too faint to read) */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .db-tile:not(.warn):not(.ok) b{background:var(--sv-grad-soft);-webkit-background-clip:text;background-clip:text;color:transparent}
  :root:not([data-theme="light"]) .db-head h1{background:var(--sv-grad);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content;max-width:100%}
}
:root[data-theme="dark"] .db-tile:not(.warn):not(.ok) b{background:var(--sv-grad-soft);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="dark"] .db-head h1{background:var(--sv-grad);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content;max-width:100%}

/* ---------- visitor stats bars ---------- */
.st-bar{background:linear-gradient(to top,var(--sv-cyan),var(--sv-purple))}

/* the dark theme gets the site's backdrop: a deep field with a purple haze in one corner */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body{background:radial-gradient(1200px 700px at 100% 0%,rgba(168,85,247,.10),transparent 60%),radial-gradient(900px 600px at 0% 100%,rgba(0,240,255,.06),transparent 60%),var(--chrome)}
}
:root[data-theme="dark"] body{background:radial-gradient(1200px 700px at 100% 0%,rgba(168,85,247,.10),transparent 60%),radial-gradient(900px 600px at 0% 100%,rgba(0,240,255,.06),transparent 60%),var(--chrome)}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

/* Moving between the builder, the dashboard and the roadmap (U.go): one app, not separate sites. Same-origin page
   changes crossfade where the browser can; elsewhere html.sb-leaving fades the page out just before it changes. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s;animation-timing-function:ease}
html.sb-leaving body{opacity:0;transition:opacity .14s ease}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}html.sb-leaving body{transition:none}}