/* =============================================================================
   calc-shell.css — the ONE source of truth for the calculator "command card"
   header (brand plate + ENGINEERING MODE + account / My Projects / Save / Sign out
   + step bar). Extracted verbatim from the live Windows/Doors calculator so every
   calculator (W/D, MWFRS, Roofs, Specialized, Solar) renders byte-identical chrome.
   Injected by calc-shell.js. Do NOT hand-edit a page's header — edit here.
   ============================================================================= */
:root{
  --blue:#0018FF; --blue-deep:#181E57; --navy:#0d1233;
  --ink:#0f172a; --muted:#475569; --muted2:#64748b; --line:#e2e8f0; --surface:#f8fafc;
  --em1:#34D399; --em2:#10B981; --em3:#059669;
  --emerald:linear-gradient(145deg,#34D399,#10B981 40%,#059669);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---- the white command card + dark step bar ---- */
.cmd{background:#fff; border-radius:18px 18px 0 0; box-shadow:0 22px 60px rgba(8,12,40,.34); overflow:hidden}
.cmd-row1{display:flex; align-items:center; justify-content:space-between; gap:14px 18px; padding:15px 24px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:13px}
.brand .plate{background:#fff; border:1px solid var(--line); border-radius:9px; padding:4px 8px; display:flex}
.brand .plate img{height:56px; width:auto; display:block}
.brand .bt{font-size:17px; font-weight:800; letter-spacing:-.01em; color:var(--ink)}
.brand .bs{font-size:12px; color:var(--muted2); font-weight:500; margin-top:1px}
.brand .badge-admin{display:inline-block; font-size:10px; font-weight:900; color:#7a2e00; background:#ffce5a;
  border-radius:6px; padding:2px 7px; margin-left:8px; vertical-align:middle}
.row1-right{display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end}
.eng-pill{display:inline-flex; align-items:center; gap:7px; background:#d1fae5; color:#065f46;
  font-size:12px; font-weight:700; padding:8px 13px; border-radius:999px}
.eng-pill .dot{width:8px; height:8px; border-radius:50%; background:#059669; box-shadow:0 0 0 3px rgba(5,150,105,.25)}
.btn-group{display:flex; background:#f1f5f9; border:1px solid var(--line); border-radius:11px; overflow:hidden; position:relative}
.grp{display:inline-flex; align-items:center; gap:6px; padding:9px 14px; font-size:13px; font-weight:700;
  color:var(--muted); cursor:pointer; background:transparent; border:none; border-right:1px solid var(--line)}
.grp:last-child{border-right:none}
.grp:hover{background:#e8eefc; color:var(--blue)} .grp.save{color:#065f46} .grp.save:hover{background:#d1fae5}

.cmd-row2{background:linear-gradient(135deg,#0d1233,#181E57); display:flex; padding:0 14px; overflow-x:auto}
.step{display:flex; align-items:center; gap:8px; padding:13px 15px; font-size:12.5px; font-weight:600;
  color:rgba(255,255,255,.6); white-space:nowrap; border-bottom:3px solid transparent; cursor:pointer}
.step:hover{color:rgba(255,255,255,.92)}
.step .num{width:19px; height:19px; border-radius:50%; font-size:11px; font-weight:800; display:inline-flex;
  align-items:center; justify-content:center; background:rgba(255,255,255,.14); color:rgba(255,255,255,.8)}
.step.active{color:#fff; border-bottom-color:#34D399}
.step.active .num{background:var(--emerald); color:#fff}
.step.done .num{background:#10B981; color:#fff}

/* ---- account chip + dropdown ---- */
.who{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--muted);
  background:#f1f5f9; border:1px solid var(--line); border-radius:999px; padding:7px 12px 7px 8px; max-width:280px;
  cursor:pointer; transition:.12s}
.who:hover{background:#e8eefc; border-color:#cbd6f5}
.who #who_txt{overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.who .av{width:20px; height:20px; border-radius:50%; background:var(--emerald); color:#fff; font-size:10px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto}
.who .car{font-size:9px; color:var(--muted2); margin-left:1px}
/* position:fixed so the header overflow:hidden can't clip it */
.acct-menu{display:none; position:fixed; width:240px; background:#fff; border:1px solid var(--line);
  border-radius:13px; box-shadow:0 24px 60px rgba(8,12,40,.28); z-index:300; padding:13px}
.acct-menu.show{display:block; animation:rise .16s var(--ease)}
.am-email{font-size:13px; font-weight:800; color:var(--ink); word-break:break-all}
.am-role{font-size:11.5px; color:var(--muted2); margin:2px 0 11px; text-transform:capitalize}
.am-signout{width:100%; background:#fff7ed; color:#9a3412; border:1px solid #fed7aa; border-radius:10px;
  padding:10px; font-size:13px; font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px}
.am-signout:hover{background:#fee2e2; border-color:#fecaca; color:#b91c1c}

.signout-btn{display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 12px; border-radius:9px;
  background:#fff7ed; color:#9a3412; border:1px solid #fed7aa; cursor:pointer; flex:0 0 auto; font-size:12.5px; font-weight:800}
.signout-btn:hover{background:#fee2e2; color:#b91c1c; border-color:#fecaca}
.signout-btn svg{width:16px; height:16px}

/* ---- My Projects dropdown (position:fixed so the header overflow can't clip it) ---- */
.proj-menu{display:none; position:fixed; width:340px; max-width:calc(100vw - 24px); max-height:460px; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:13px; box-shadow:0 24px 60px rgba(8,12,40,.28); z-index:300; padding:6px}
.proj-menu.show{display:block; animation:rise .18s var(--ease)}
.pm-head{font-size:10.5px; font-weight:800; color:var(--muted2); letter-spacing:.06em; text-transform:uppercase; padding:9px 12px 6px}
.pm-tools{padding:2px 6px 8px; border-bottom:1px solid var(--line); margin-bottom:4px}
.pm-search{width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:9px; padding:8px 11px; font-size:12.5px; font-family:inherit; color:var(--ink); outline:none}
.pm-search:focus{border-color:#0018FF; box-shadow:0 0 0 3px rgba(0,24,255,.12)}
.pm-chips{display:flex; flex-wrap:wrap; gap:5px; margin-top:7px}
.pm-chip{border:1px solid var(--line); background:#f8fafc; color:var(--muted2); font-size:10px; font-weight:800; letter-spacing:.02em; padding:3px 9px; border-radius:999px; cursor:pointer; transition:.12s}
.pm-chip:hover{background:#eef2ff}
.pm-chip.sel{background:#0018FF; border-color:#0018FF; color:#fff}
.pm-list{max-height:340px; overflow:auto}
.pm-viewall{display:block; text-align:center; text-decoration:none; font-size:12px; font-weight:800; color:#0018FF; padding:9px 12px 5px; border-top:1px solid var(--line); margin-top:4px}
.pm-viewall:hover{color:#0d1233}
.pm-item{padding:10px 12px; border-radius:9px; cursor:pointer; transition:.12s; display:flex; align-items:center; gap:8px}
.pm-item:hover{background:#eef2ff}
.pm-main{flex:1; min-width:0}
.pm-del{flex:none; border:none; background:transparent; cursor:pointer; font-size:14px; line-height:1; padding:6px 7px; border-radius:8px; opacity:.5; transition:.12s}
.pm-del:hover{opacity:1; background:#fee2e2}
.pm-del:disabled{opacity:.4; cursor:default}
.pm-name{font-size:13.5px; font-weight:800; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pm-tag{display:inline-block; font-size:9.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:#0018FF; background:#eef2ff; border:1px solid #dbe1ff; border-radius:6px; padding:1px 6px; margin-left:6px; vertical-align:middle}
.pm-sub{font-size:11.5px; color:var(--muted2); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pm-empty{padding:20px 14px; text-align:center; color:var(--muted2); font-size:12.5px}

/* ---- save / status toast ---- */
.toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); opacity:0; pointer-events:none;
  background:#0d1233; color:#fff; font-size:13px; font-weight:700; padding:12px 20px; border-radius:12px;
  box-shadow:0 18px 44px rgba(8,12,40,.4); z-index:200; transition:.25s var(--ease)}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.err{background:#9a3412}

@keyframes rise{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* ---- mobile (identical breakpoints to the live W/D header) ---- */
@media(max-width:760px){
  .cmd-row1{padding:13px 14px}
  .brand{gap:10px} .brand .bt{font-size:15px} .brand .bs{font-size:10.5px}
  .brand .plate img{height:46px}
  .who{max-width:60vw}
}
@media(max-width:430px){
  .row1-right{width:100%; justify-content:space-between; gap:8px}
  .eng-pill{display:none}
  .btn-group{flex:1; justify-content:center}
  .grp{flex:1; justify-content:center; padding:9px 8px}
}