/* ============================================================
   The builder's own interface in silvea.tech's look (index.html
   only, after skin.css): the top bar with its scanlines and neon
   rail, chamfered buttons and switches, glowing tabs, HUD panels,
   dialogs, menus, the launcher, the plans and the phone bar.

   Never what clients build: the page on the canvas lives in its own
   frame, the block previews in the Add panel and the launcher in
   their own shadow roots, and nothing here touches them. So no rule
   sets an inherited property (font, case, letter spacing, color) on
   anything that holds a preview (.lib-item, .ln-tpl, .thumb-pop,
   the panel bodies), and .thumb is never styled. tools/smoke.mjs
   checks the canvas and the previews look the same with this file
   on and off.

   Both builder themes: the colors come from the theme variables
   below, so the light theme stays light and readable; scanlines,
   glow and gradient lettering are dark theme only.
   ============================================================ */
:root{
  --sve-edge:linear-gradient(120deg,#0bb8c9,#3b82f6 50%,#8b5cf6);
  --sve-core:var(--panel-2);
  --sve-core-hi:color-mix(in srgb,var(--ice) 10%,var(--panel-2));
  --sve-panel:var(--panel);
  --sve-top:var(--chrome);
  --sve-scan:transparent;
  --sve-glow:none;
  --sve-text-glow:none;
  --sve-hot:color-mix(in srgb,var(--ice) 55%,var(--text));
  --sve-sel:linear-gradient(90deg,color-mix(in srgb,var(--ice) 14%,transparent),transparent);
  --sve-cut:7px;
  --sve-grad-text:none;
  --sve-grad-color:var(--text);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --sve-edge:linear-gradient(120deg,#00f0ff,#3b82f6 50%,#a855f7);
    --sve-core:linear-gradient(180deg,rgba(14,20,38,.98),rgba(6,10,20,.98));
    --sve-core-hi:linear-gradient(180deg,rgba(20,36,62,.96),rgba(10,18,36,.96));
    --sve-panel:linear-gradient(135deg,rgba(0,240,255,.035),transparent 45%,rgba(255,46,196,.05)),linear-gradient(180deg,rgba(12,18,32,.98),rgba(8,12,24,.99));
    --sve-top:linear-gradient(180deg,rgba(4,7,16,.96),rgba(7,11,24,.92));
    --sve-scan:rgba(0,240,255,.035);
    --sve-glow:0 0 18px rgba(0,240,255,.25),0 0 30px -8px rgba(168,85,247,.5);
    --sve-text-glow:0 0 12px rgba(0,240,255,.45);
    --sve-hot:#7de8f7;
    --sve-sel:linear-gradient(90deg,rgba(0,240,255,.16),rgba(168,85,247,.07) 70%,transparent);
    --sve-grad-text:linear-gradient(135deg,#00f0ff,#a855f7,#ff2ec4);
    --sve-grad-color:transparent;
  }
}
:root[data-theme="dark"]{
  --sve-edge:linear-gradient(120deg,#00f0ff,#3b82f6 50%,#a855f7);
  --sve-core:linear-gradient(180deg,rgba(14,20,38,.98),rgba(6,10,20,.98));
  --sve-core-hi:linear-gradient(180deg,rgba(20,36,62,.96),rgba(10,18,36,.96));
  --sve-panel:linear-gradient(135deg,rgba(0,240,255,.035),transparent 45%,rgba(255,46,196,.05)),linear-gradient(180deg,rgba(12,18,32,.98),rgba(8,12,24,.99));
  --sve-top:linear-gradient(180deg,rgba(4,7,16,.96),rgba(7,11,24,.92));
  --sve-scan:rgba(0,240,255,.035);
  --sve-glow:0 0 18px rgba(0,240,255,.25),0 0 30px -8px rgba(168,85,247,.5);
  --sve-text-glow:0 0 12px rgba(0,240,255,.45);
  --sve-hot:#7de8f7;
  --sve-sel:linear-gradient(90deg,rgba(0,240,255,.16),rgba(168,85,247,.07) 70%,transparent);
  --sve-grad-text:linear-gradient(135deg,#00f0ff,#a855f7,#ff2ec4);
  --sve-grad-color:transparent;
}

/* ---------- the top bar: scanlines and a neon rail with a travelling highlight ---------- */
/* overflow clip: the rail's glow stays inside the bar and never tints the top of the canvas */
.app>.top{position:relative;background:var(--sve-top);border-bottom-color:transparent;overflow:clip}
.app>.top::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,var(--sve-scan) 0 1px,transparent 1px 3px)}
.app>.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent) no-repeat,linear-gradient(90deg,transparent,#00f0ff 15%,#a855f7 50%,#ff2ec4 85%,transparent);
  background-size:16% 100%,100% 100%;background-position:-30% 0,0 0;box-shadow:0 0 12px rgba(0,240,255,.5),0 0 24px rgba(168,85,247,.3);animation:sve-scan 7s ease-in-out infinite}
@keyframes sve-scan{0%{background-position:-30% 0,0 0}60%,100%{background-position:130% 0,0 0}}
.app>.top>*{position:relative}
/* the top bar's own buttons read like silvea.tech's nav buttons: the tech face, upper case */
/* (13px with light tracking: the bar steps down to icons at exactly the widths it did before) */
.app>.top .btn:not(.acct-btn),.app>.top .find-btn .lbl,.app>.top .seg button{font-family:"Rajdhani","Chakra Petch",sans-serif;font-weight:700;font-size:13px;letter-spacing:.03em;text-transform:uppercase}
.proj-btn:hover{background:var(--sve-sel);color:var(--text)}
.proj-btn .kindtag{font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;font-size:10px;border:1px solid color-mix(in srgb,var(--ice) 30%,transparent);background:transparent;color:var(--sve-hot)}
.find-btn{border-color:color-mix(in srgb,var(--ice) 22%,var(--line))!important}
.find-btn kbd{font-family:var(--mono)}

/* ============================================================
   Buttons: chamfered, a gradient edge around a dark core; primary
   is the solid cyan, purple and magenta fill with white words.
   Same size as before (the 1px border stays, just see-through), so
   no panel reflows. The account button keeps its round avatar.
   ============================================================ */
.btn:not(.acct-btn){position:relative;isolation:isolate;border-color:transparent;border-radius:0;background:var(--sve-edge) border-box;
  clip-path:polygon(var(--sve-cut) 0,100% 0,100% calc(100% - var(--sve-cut)),calc(100% - var(--sve-cut)) 100%,0 100%,0 var(--sve-cut));transition:transform .15s ease,background .2s ease,color .15s ease}
.btn:not(.acct-btn)::before{content:"";position:absolute;inset:0;z-index:-1;clip-path:polygon(calc(var(--sve-cut) - 1px) 0,100% 0,100% calc(100% - var(--sve-cut) + 1px),calc(100% - var(--sve-cut) + 1px) 100%,0 100%,0 calc(var(--sve-cut) - 1px));background:var(--sve-core);transition:background .2s ease}
.btn:not(.acct-btn):hover:not(:disabled){border-color:transparent;background:linear-gradient(120deg,#a855f7,#00f0ff) border-box}
.btn:not(.acct-btn):hover:not(:disabled)::before{background:var(--sve-core-hi)}
.btn:not(.acct-btn):focus-visible{outline:2px solid var(--ice);outline-offset:-4px}
.btn.primary:not(.acct-btn),.btn.primary:not(.acct-btn):hover{background:#00f0ff border-box;color:#fff;text-shadow:0 1px 3px rgba(4,7,13,.65);font-weight:700}
.btn.primary:not(.acct-btn)::before{background:linear-gradient(120deg,#00f0ff,#a855f7 60%,#ff2ec4)}
.btn.primary:not(.acct-btn):hover:not(:disabled){background:#7df9ff border-box;box-shadow:none}
.btn.primary:not(.acct-btn):hover:not(:disabled)::before{background:linear-gradient(120deg,#5ff7ff,#b978ff 60%,#ff5fd4)}
.btn.primary svg{stroke:currentColor}
.btn.primary:not(.acct-btn):focus-visible{outline:2px solid #fff;outline-offset:-4px}
.btn.violet:not(.acct-btn){background:linear-gradient(120deg,#a855f7,#ff2ec4) border-box;color:#fff}
.btn.violet:not(.acct-btn)::before{background:linear-gradient(120deg,#a855f7,#d946ef)}
.btn.danger:not(.acct-btn){background:linear-gradient(120deg,#ff2ec4,#ff6b8a) border-box}
.btn.danger:not(.acct-btn):hover:not(:disabled){background:linear-gradient(120deg,#ff6b8a,#ff2ec4) border-box}
.btn.small:not(.acct-btn){--sve-cut:5px}
/* Publish: the bright one on phones and tablets keeps its gradient; its live dot stays */
#publishBtn:not(.acct-btn){color:var(--sve-hot)}
#publishBtn.live::after{z-index:1;box-shadow:0 0 8px var(--ok)}
/* phones and tablets: the dark core would hide that gradient, so the core takes it; once the site is live it turns blue, with the green online dot */
@media (max-width:1180px){
  #publishBtn:not([hidden]):not(.acct-btn),#publishBtn:not([hidden]):not(.acct-btn):hover:not(:disabled){background:#00f0ff border-box;color:#fff;text-shadow:0 1px 3px rgba(4,7,13,.65)}
  #publishBtn:not([hidden]):not(.acct-btn)::before,#publishBtn:not([hidden]):not(.acct-btn):hover:not(:disabled)::before{background:linear-gradient(120deg,#00f0ff,#a855f7 60%,#ff2ec4)}
  #publishBtn:not([hidden]) svg{stroke:#fff;filter:drop-shadow(0 1px 2px rgba(4,7,13,.6))}
  #publishBtn.live:not(.acct-btn),#publishBtn.live:not(.acct-btn):hover:not(:disabled){background:#7dd3fc border-box}
  #publishBtn.live:not(.acct-btn)::before,#publishBtn.live:not(.acct-btn):hover:not(:disabled)::before{background:linear-gradient(120deg,#0ea5e9,#2563eb)}
  #publishBtn.live::after{width:9px;height:9px;top:3px;right:3px;box-shadow:0 0 0 2px #04070d,0 0 8px var(--ok)}
}
/* the account button: a neon ring round the avatar */
.acct-btn{border-color:color-mix(in srgb,var(--ice) 30%,var(--line))}
.acct-btn:hover:not(:disabled){border-color:var(--ice);box-shadow:var(--sve-glow)}
.acct-btn .av{box-shadow:0 0 0 2px color-mix(in srgb,var(--ice) 35%,transparent),var(--sve-glow)}

/* ---------- icon buttons: a glow on hover ---------- */
.icon-btn:hover:not(:disabled){background:var(--sve-sel);color:var(--sve-hot);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ice) 25%,transparent)}
.icon-btn.active{background:var(--sve-sel);color:var(--sve-hot);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ice) 40%,transparent)}

/* ---------- switches (modes, screen sizes, every segmented control): chamfered, the chosen one glows ---------- */
.seg{border-radius:0;background:color-mix(in srgb,var(--panel-2) 85%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ice) 16%,var(--line));
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.seg button{border-radius:0;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.seg button:hover{color:var(--sve-hot)}
.seg button[aria-pressed="true"]{background:var(--sve-sel);color:var(--sve-hot);box-shadow:inset 2px 0 0 var(--ice);text-shadow:var(--sve-text-glow)}
.seg.modes button[aria-pressed="true"]{color:var(--sve-hot)}

/* ---------- the side panels: the HUD field, a neon edge toward the canvas, scanlines on their heads ---------- */
.app .panel{background:var(--sve-panel)}
.app .panel.left{box-shadow:inset -1px 0 0 color-mix(in srgb,var(--ice) 22%,var(--line))}
.app .panel.right{box-shadow:inset 1px 0 0 color-mix(in srgb,var(--ice) 22%,var(--line))}
.phead{position:relative;background:repeating-linear-gradient(0deg,var(--sve-scan) 0 1px,transparent 1px 3px)}
.phead b,.phead .ptitle{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sve-hot);text-shadow:var(--sve-text-glow)}
/* tabs: the tech face, the open one glows over its gradient underline */
.tabs{border-bottom-color:color-mix(in srgb,var(--ice) 18%,var(--line))}
.tabs button[role="tab"]{font-family:"Rajdhani","Chakra Petch",sans-serif;font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.tabs button[role="tab"]:hover{color:var(--sve-hot)}
.tabs button[aria-selected="true"]{color:var(--sve-hot);text-shadow:var(--sve-text-glow)}
/* group titles: a diamond marker, the eyebrow glow */
.group>summary{gap:8px;justify-content:flex-start;text-shadow:var(--sve-text-glow)}
.group>summary::before{content:"";flex:none;width:6px;height:6px;transform:rotate(45deg);background:linear-gradient(135deg,#00f0ff,#a855f7);box-shadow:0 0 8px rgba(0,240,255,.6)}
.group>summary::after{margin-left:auto}
.group.fx-lead{border-radius:0;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);background:var(--sve-sel);border-color:color-mix(in srgb,var(--ice) 40%,var(--line))}
/* library filter chips: silvea.tech's badges */
.chip-btn{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;border-color:color-mix(in srgb,var(--ice) 25%,var(--line))}
.chip-btn[aria-pressed="true"]{background:linear-gradient(120deg,color-mix(in srgb,#00f0ff 85%,#fff),#a855f7);border-color:transparent;color:#04070d;box-shadow:var(--sve-glow)}
/* fields: a dim cyan edge (the focus glow comes from skin.css) */
.app :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea,.dd),.sheet :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea,.dd){border-color:color-mix(in srgb,var(--ice) 18%,var(--line))}
/* the area round the canvas (never the page in it): the deep field, a cyan dot grid */
.app .canvas{background-color:var(--canvas);background-image:radial-gradient(color-mix(in srgb,var(--ice) 22%,var(--dot)) 1px,transparent 1px),radial-gradient(900px 500px at 100% 0%,color-mix(in srgb,#a855f7 7%,transparent),transparent 70%),radial-gradient(800px 500px at 0% 100%,color-mix(in srgb,#00f0ff 5%,transparent),transparent 70%);background-size:18px 18px,100% 100%,100% 100%}
.canvas-hint kbd,.status kbd{font-family:var(--mono)}
/* the status bar: mono, glowing lights */
.app .status{font-family:var(--mono);font-size:11px;letter-spacing:.03em;border-top-color:color-mix(in srgb,var(--ice) 16%,var(--line))}
.status .dot.ok{box-shadow:0 0 8px var(--ok)}

/* ============================================================
   Dialogs, menus, the Finder and toasts: raised HUD panels with
   corner brackets
   ============================================================ */
.sheet{background:var(--sve-panel);border-color:color-mix(in srgb,var(--ice) 24%,var(--line));overflow:visible}
.sheet::before,.sheet::after{content:"";position:absolute;width:20px;height:20px;z-index:2;pointer-events:none;border:1.5px solid #00f0ff;opacity:.75;filter:drop-shadow(0 0 6px rgba(0,240,255,.5));background:none;border-radius:0;left:auto;right:auto}
.sheet::before{top:-8px;left:-8px;border-right:none;border-bottom:none}
.sheet::after{bottom:-8px;right:-8px;border-left:none;border-top:none}
.sheet-head h2{letter-spacing:.015em}
.sheet-foot .btn,.ln-stage .btn,.acct-plan .btn{font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.menu-pop,.finder-box,.ms-body{background:var(--sve-panel);border-color:color-mix(in srgb,var(--ice) 24%,var(--line))}
.menu-pop button:hover,.menu-pop button:focus-visible{background:var(--sve-sel);color:var(--sve-hot);box-shadow:inset 2px 0 0 var(--ice)}
.menu-pop h5,.ms-body h5{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sve-hot)}
.thumb-pop{border-color:color-mix(in srgb,var(--ice) 30%,var(--line));box-shadow:0 24px 60px rgba(0,0,0,.35),var(--sve-glow)}
.toast{border-radius:0;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);font-family:var(--mono);font-size:12.5px;letter-spacing:.02em}

/* ============================================================
   The launcher and the plans: silvea.tech's eyebrows, gradient
   headings, HUD cards and the recommended glow. The template
   previews inside the cards are left exactly as they are.
   ============================================================ */
.launch .ln-eyebrow{font-family:var(--mono);font-weight:500;letter-spacing:.12em;color:var(--sve-hot);text-shadow:var(--sve-text-glow)}
.launch .ln-step h1{font-family:var(--sv-display);font-weight:600;letter-spacing:.015em;width:fit-content;max-width:100%;background-image:var(--sve-grad-text);-webkit-background-clip:text;background-clip:text;color:var(--sve-grad-color)}
.launch .ln-kicker,.acct-kicker{font-family:var(--mono);letter-spacing:.1em;color:var(--sve-hot)}
.launch .ln-sub h2{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sve-hot)}
.ln-card,.ln-tpl,.ln-look,.acct-plan{border-color:color-mix(in srgb,var(--ice) 18%,var(--line));background:var(--sve-panel)}
.ln-card:hover,.ln-card:focus-visible,.ln-tpl:hover,.ln-tpl:focus-visible{border-color:color-mix(in srgb,var(--ice) 72%,transparent);box-shadow:0 22px 50px -18px rgba(0,0,0,.35),var(--sve-glow)}
.ln-look[aria-checked="true"]{border-color:#00f0ff;box-shadow:0 0 0 1px #00f0ff,var(--sve-glow)}
.acct-plan.best{border-color:color-mix(in srgb,var(--ice) 72%,transparent);box-shadow:var(--sve-glow)}
.acct-plan.on{border-color:var(--ok)}
.acct-tag{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase}

/* ---------- the phone and tablet bar: a neon rail on top, the open one glows ---------- */
.mbar{position:relative}
.mbar::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;pointer-events:none;background:linear-gradient(90deg,transparent,#00f0ff 15%,#a855f7 50%,#ff2ec4 85%,transparent)} /* no glow: it would tint the bottom of the canvas */
.mbar button{font-family:"Rajdhani","Chakra Petch",sans-serif;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.mbar button[aria-pressed="true"]{background:var(--sve-sel);color:var(--sve-hot);text-shadow:var(--sve-text-glow);box-shadow:inset 0 2px 0 #00f0ff}

/* ---------- less motion ---------- */
@media (prefers-reduced-motion:reduce){
  .app>.top::after{animation:none}
  .btn:not(.acct-btn),.btn:not(.acct-btn)::before{transition:none}
}
/* the + button on compact screens: the gradient fill, like the dashboard's Quick add */
.mfab-btn{background:linear-gradient(135deg,#00f0ff,#a855f7 55%,#ff2ec4);color:#fff;box-shadow:0 0 22px rgba(0,240,255,.3),0 12px 28px -10px rgba(0,0,0,.7)}
.mfab-menu h5{font-family:var(--mono);letter-spacing:.12em;color:var(--sve-hot)}
.selbar{background:linear-gradient(180deg,rgba(9,14,28,.97),rgba(5,8,18,.99))}
:root[data-theme="light"] .selbar{background:var(--panel)}
.selbar button{font-family:"Rajdhani","Chakra Petch",sans-serif;font-weight:700;letter-spacing:.02em;text-transform:uppercase;font-size:10.5px}