/* =============================================================================
   WindLoadCalc app shell — "Aurora Rail" (approved 2026-06-25)
   Dark-glass collapsible sidebar + dark aurora canvas. White calc containers
   (the calculators' own .cmd/.card) sit on top, unchanged.
   Injected by shell.js. Scoped so it doesn't fight a calculator's own styles.
   ============================================================================= */
:root{
  --sh-bg0:#070a1c; --sh-bg1:#0c1130; --sh-glass:rgba(255,255,255,.05);
  --sh-glass2:rgba(255,255,255,.08); --sh-line:rgba(255,255,255,.11);
  --sh-txt:#f3f5ff; --sh-mut:#d4d9f4; --sh-dim:#9aa3cc;
  --sh-blue:#3b5bff; --sh-blue2:#6b8bff; --sh-cyan:#37e0ff; --sh-emerald:#19e29a;
}

/* the shell owns the page background (dark aurora); calc content keeps its white cards */
body.has-shell{
  margin:0;
  background:
    radial-gradient(900px 500px at 12% -8%, rgba(59,91,255,.26), transparent 60%),
    radial-gradient(820px 480px at 96% 6%, rgba(55,224,255,.15), transparent 55%),
    radial-gradient(760px 620px at 72% 112%, rgba(126,58,242,.18), transparent 60%),
    linear-gradient(160deg,var(--sh-bg1),var(--sh-bg0)) !important;
  background-attachment:fixed !important;
  min-height:100vh; padding:0 !important;
}

.appshell{display:flex; min-height:100vh; font-family:'Inter','Segoe UI',Arial,sans-serif}

/* ---------------- sidebar ---------------- */
.sh-rail{width:286px; flex:0 0 286px; display:flex; flex-direction:column; gap:2px;
  padding:16px 12px; border-right:1px solid var(--sh-line);
  background:linear-gradient(180deg,rgba(10,14,40,.55),rgba(8,11,30,.35));
  backdrop-filter:blur(8px); position:sticky; top:0; height:100vh; overflow:auto;
  transition:width .24s cubic-bezier(.4,0,.2,1), flex-basis .24s cubic-bezier(.4,0,.2,1)}

.sh-head{display:flex; align-items:center; justify-content:space-between; padding:6px 6px 12px}
.sh-logo{position:relative; display:inline-block; line-height:0}
.sh-logo img{display:block}
.sh-logo .real{position:relative; z-index:1;
  filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 3px rgba(255,255,255,.95)) drop-shadow(0 0 6px rgba(255,255,255,.7))}
.sh-logo .glow{position:absolute; top:0; left:0; width:100%; height:100%; z-index:0;
  filter:brightness(0) invert(1) blur(5px); opacity:1; transform:scale(1.05)}
.sh-logo .glow2{position:absolute; top:0; left:0; width:100%; height:100%; z-index:0;
  filter:brightness(0) invert(1) blur(12px); opacity:.95; transform:scale(1.08)}
.sh-logo.full .real,.sh-logo.full .glow,.sh-logo.full .glow2{height:58px}
.sh-logo.mark{display:none}
.sh-logo.mark .real,.sh-logo.mark .glow,.sh-logo.mark .glow2{height:37px}

.sh-toggle{width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  color:var(--sh-mut); cursor:pointer; border:1px solid var(--sh-line); background:var(--sh-glass); transition:.18s}
.sh-toggle:hover{color:#fff; border-color:rgba(107,139,255,.5); background:var(--sh-glass2)}
.sh-toggle svg{width:18px; height:18px}
.sh-toggle .t-menu{display:none}

/* New Project CTA */
.sh-new{display:flex; align-items:center; gap:11px; margin:2px 4px 12px; padding:12px 14px; border-radius:13px;
  font-weight:800; font-size:14px; color:#fff; text-decoration:none; cursor:pointer;
  background:linear-gradient(120deg,var(--sh-blue) 0%,#7a3af2 60%,#37e0ff 130%);
  box-shadow:0 10px 26px rgba(59,91,255,.4); transition:.18s}
.sh-new:hover{transform:translateY(-1px); box-shadow:0 14px 32px rgba(59,91,255,.55)}
.sh-new svg{width:20px; height:20px; flex:0 0 20px}

.sh-cat{display:flex; align-items:center; gap:10px; padding:16px 12px 7px; font-size:10.5px; font-weight:800;
  letter-spacing:.13em; text-transform:uppercase; color:var(--sh-dim)}
.sh-cat::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--sh-line),transparent)}

.sh-nav{position:relative; display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:12px;
  cursor:pointer; color:var(--sh-mut); text-decoration:none; transition:.16s; border:1px solid transparent}
.sh-nav .ico{width:22px; height:22px; flex:0 0 22px; color:var(--sh-dim); transition:.16s}
.sh-nav .ico svg{width:22px; height:22px; display:block}
.sh-nav .lbl{font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1 1 auto; min-width:0}
.sh-nav .lockico,.sh-nav .badge,.sh-nav .add{flex:0 0 auto}
.sh-nav:hover{background:var(--sh-glass); color:#fff; border-color:var(--sh-line)}
.sh-nav:hover .ico{color:var(--sh-blue2)}

.sh-nav.active{background:linear-gradient(100deg,rgba(59,91,255,.22),rgba(55,224,255,.05));
  border-color:rgba(107,139,255,.45); color:#fff; box-shadow:0 8px 26px rgba(59,91,255,.28)}
.sh-nav.active .ico{color:#fff; filter:drop-shadow(0 0 8px rgba(107,139,255,.9))}
.sh-nav.active::before{content:""; position:absolute; left:-1px; top:9px; bottom:9px; width:3px; border-radius:3px;
  background:linear-gradient(180deg,var(--sh-cyan),var(--sh-blue)); box-shadow:0 0 14px var(--sh-cyan)}
.sh-nav.active .sh-dot{margin-left:auto; width:7px; height:7px; border-radius:50%; background:var(--sh-emerald);
  box-shadow:0 0 10px var(--sh-emerald)}

.sh-nav.locked{color:var(--sh-dim)}
.sh-nav.locked .ico{color:var(--sh-dim); opacity:.7}
.sh-nav.locked .lockico{margin-left:auto; width:15px; height:15px; color:var(--sh-dim); transition:.16s}
.sh-nav.locked .add{margin-left:auto; display:none; align-items:center; gap:5px; font-size:11px; font-weight:800;
  color:#04122e; background:linear-gradient(120deg,var(--sh-cyan),var(--sh-blue2)); border-radius:999px; padding:5px 11px;
  box-shadow:0 4px 16px rgba(55,224,255,.5)}
.sh-nav.locked:hover{color:#cdd6ff; background:var(--sh-glass)}
.sh-nav.locked:hover .lockico{display:none}
.sh-nav.locked:hover .add{display:inline-flex}
.sh-nav .badge{margin-left:auto; font-size:9.5px; font-weight:900; letter-spacing:.04em; color:#2a1c00;
  background:linear-gradient(120deg,#ffce5a,#ffb031); border-radius:6px; padding:2px 6px}
/* NEW = sellable now (emerald, "buy"); SOON = coming-soon (muted, not buyable) */
.sh-nav .badge.new{background:linear-gradient(135deg,#34D399,#10B981); color:#04221a}
.sh-nav .badge.soon{background:linear-gradient(135deg,#fdba74,#f97316); color:#3a1400}
.sh-nav.soon{opacity:.82} .sh-nav.soon:hover{opacity:1}
.sh-nav.soon .lockico{display:inline-flex !important}

.sh-spacer{flex:1}
.sh-acct{display:flex; align-items:center; gap:10px; padding:11px; margin-top:8px; border-radius:13px;
  background:var(--sh-glass); border:1px solid var(--sh-line); text-decoration:none}
.sh-acct .sh-avatar{width:34px; height:34px; border-radius:10px; flex:0 0 34px; display:flex; align-items:center;
  justify-content:center; font-weight:800; font-size:13px; color:#fff; background:linear-gradient(135deg,var(--sh-blue),#7a3af2)}
.sh-acct .sh-name{font-size:13px; font-weight:700; color:#fff; line-height:1.1}
.sh-acct .plan{font-size:11px; color:var(--sh-emerald); font-weight:700}
/* Sign out — rail button under the account chip */
.sh-logout{display:flex; align-items:center; gap:10px; width:100%; margin-top:8px; padding:10px 11px; border-radius:12px;
  background:transparent; border:1px solid var(--sh-line); color:var(--sh-dim); font-family:inherit; font-size:12.5px;
  font-weight:700; cursor:pointer; transition:.16s}
.sh-logout:hover{color:#ffb4b4; border-color:rgba(239,68,68,.4); background:rgba(239,68,68,.08)}
.sh-logout .ico{display:flex; width:18px; height:18px; flex:0 0 18px}
.sh-logout .ico svg{width:18px; height:18px}
.appshell.collapsed .sh-logout{justify-content:center} .appshell.collapsed .sh-logout .lbl{display:none}
/* logo link — no underline, keep the glow logo intact */
.sh-logo-link{display:inline-block; line-height:0; text-decoration:none}

/* ---------------- collapsed ---------------- */
.appshell.collapsed .sh-rail{width:74px; flex-basis:74px; padding:16px 8px}
.appshell.collapsed .sh-head{flex-direction:column-reverse; gap:14px; justify-content:center}
.appshell.collapsed .sh-logo.full{display:none}
.appshell.collapsed .sh-logo.mark{display:inline-block}
.appshell.collapsed .sh-toggle .t-chev{display:none}
.appshell.collapsed .sh-toggle .t-menu{display:block}
.appshell.collapsed .sh-new{justify-content:center; padding:0; width:44px; height:44px; margin:2px auto 14px}
.appshell.collapsed .sh-new .np-lbl{display:none}
.appshell.collapsed .sh-cat{padding:0; margin:16px auto 10px; width:26px; height:0; border-top:1px solid var(--sh-line);
  overflow:hidden; font-size:0; line-height:0}
.appshell.collapsed .sh-cat::after{display:none}
.appshell.collapsed .sh-nav{justify-content:center; padding:11px 0}
.appshell.collapsed .sh-nav .lbl,
.appshell.collapsed .sh-nav .sh-dot,
.appshell.collapsed .sh-nav .add,
.appshell.collapsed .sh-nav .lockico,
.appshell.collapsed .sh-nav .badge,
.appshell.collapsed .sh-acct .sh-name,
.appshell.collapsed .sh-acct .plan{display:none}
.appshell.collapsed .sh-nav.active::before{left:-8px}
.appshell.collapsed .sh-acct{justify-content:center; padding:9px}
.appshell.collapsed .sh-nav[data-tip]:hover::after{content:attr(data-tip); position:absolute; left:64px; top:50%;
  transform:translateY(-50%); white-space:nowrap; background:#0b0f28; border:1px solid var(--sh-line); color:#fff;
  font-size:12.5px; font-weight:600; padding:7px 11px; border-radius:9px; z-index:60; box-shadow:0 10px 28px rgba(0,0,0,.5)}

/* ---------------- main / canvas ---------------- */
.sh-main{flex:1; min-width:0; display:flex; flex-direction:column}
.sh-top{height:58px; display:flex; align-items:center; gap:14px; padding:0 22px;
  border-bottom:1px solid var(--sh-line); background:rgba(255,255,255,.02); position:sticky; top:0; z-index:20;
  backdrop-filter:blur(8px)}
.sh-crumb{font-size:13px; color:var(--sh-mut)}
.sh-crumb b{color:#fff}
.sh-units{display:inline-flex; margin-left:auto; border:1px solid var(--sh-line); border-radius:9px; overflow:hidden}
.sh-units .u-opt{font-size:12px; font-weight:800; color:var(--sh-mut); padding:6px 12px; cursor:pointer}
.sh-units .u-opt:hover{color:#fff}
.sh-units .u-opt.on{background:linear-gradient(120deg,var(--sh-blue),var(--sh-blue2)); color:#fff}
.sh-top .pill{margin-left:10px; font-size:12px; font-weight:800; color:#04122e; border-radius:999px; padding:6px 13px;
  background:linear-gradient(120deg,var(--sh-emerald),#37e0ff)}
.sh-canvas{flex:1; min-width:0; padding:0 14px 60px}
/* a calculator's own centered .shell keeps working inside the canvas */
.sh-canvas > .shell{padding-top:22px}

/* ---------------- unlock modal ---------------- */
.sh-modal-ov{position:fixed; inset:0; background:rgba(4,7,22,.6); backdrop-filter:blur(4px); z-index:200;
  display:none; align-items:center; justify-content:center; padding:20px}
.sh-modal-ov.show{display:flex}
.sh-modal{position:relative; max-width:430px; width:100%; border:1px solid var(--sh-line); border-radius:20px; padding:26px;
  text-align:center; background:linear-gradient(180deg,rgba(20,26,64,.95),rgba(10,13,34,.95)); color:var(--sh-txt);
  box-shadow:0 30px 70px rgba(2,4,18,.7)}
.sh-modal .lockwrap{width:58px; height:58px; margin:0 auto 14px; border-radius:16px; display:flex; align-items:center;
  justify-content:center; background:linear-gradient(135deg,rgba(59,91,255,.25),rgba(55,224,255,.12));
  border:1px solid rgba(107,139,255,.4)}
.sh-modal .lockwrap svg{width:26px; height:26px; color:var(--sh-cyan)}
.sh-modal h4{margin:4px 0 6px; font-size:18px}
.sh-modal p{color:var(--sh-mut); font-size:13px; margin:0 0 18px; line-height:1.6}
.sh-modal .cta{display:flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; font-weight:800;
  font-size:14px; color:#04122e; padding:13px; border-radius:12px;
  background:linear-gradient(120deg,var(--sh-cyan),var(--sh-blue2)); box-shadow:0 10px 30px rgba(55,224,255,.4)}
.sh-modal .later{display:block; margin-top:10px; color:var(--sh-dim); font-size:13px; text-decoration:none; cursor:pointer}

@media (max-width:820px){
  .sh-rail{position:fixed; z-index:120; left:0; top:0; box-shadow:0 0 60px rgba(0,0,0,.6)}
  .appshell:not(.mobile-open) .sh-rail{transform:translateX(-100%)}
}