/* ==========================================================
   BusinessCardStudio v2.0 — Phase 3 Studio Experience
   Loaded last so it safely refines the existing editor.
   ========================================================== */

:root{
  --studio-navy:#243b55;
  --studio-navy-2:#2e4965;
  --studio-navy-3:#355570;
  --studio-paper:#f7f9fc;
  --studio-card:#ffffff;
  --studio-line:#cad5e2;
  --studio-text:#1f3348;
  --studio-muted:#64788d;
  --studio-blue:#3f78bd;
  --studio-teal:#4e9698;
  --studio-shadow:0 14px 38px rgba(18,39,61,.18);
}

/* Desktop shell: two independently scrollable columns. */
#appShell.app{
  height:calc(100dvh - 38px)!important;
  min-height:620px!important;
  display:grid!important;
  grid-template-columns:clamp(310px,29vw,390px) minmax(0,1fr)!important;
  overflow:hidden!important;
  background:linear-gradient(145deg,var(--studio-navy),var(--studio-navy-2))!important;
}

#editorSidebar.sidebar{
  height:100%!important;
  min-height:0!important;
  display:grid!important;
  grid-template-rows:auto auto minmax(0,1fr)!important;
  overflow:hidden!important;
  background:#edf1f5!important;
  border-right:1px solid rgba(255,255,255,.14)!important;
  box-shadow:10px 0 30px rgba(10,26,43,.18)!important;
}

#editorSidebar .brand{
  padding:14px 16px!important;
  background:linear-gradient(135deg,#263f59,#355773)!important;
  color:#fff!important;
  border-bottom:1px solid rgba(255,255,255,.12)!important;
}
#editorSidebar .brand strong{color:#fff!important}
#editorSidebar .brand small{color:#d6e0ea!important}
#editorSidebar .brand-nav{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
#editorSidebar .brand-nav .album-link{
  background:rgba(255,255,255,.1)!important;
  border-color:rgba(255,255,255,.22)!important;
  color:#fff!important;
}

#editorSidebar .tabs{
  display:flex!important;
  gap:7px!important;
  overflow-x:auto!important;
  padding:10px!important;
  background:#dfe6ed!important;
  border-bottom:1px solid #c4d0dc!important;
  scrollbar-width:thin;
}
#editorSidebar .tabs button{
  flex:0 0 auto!important;
  min-width:82px!important;
  min-height:40px!important;
  padding:8px 11px!important;
  border-radius:10px!important;
  background:#f8fafc!important;
  border:1px solid #c6d1dc!important;
  color:#304b65!important;
  font-size:12px!important;
  font-weight:750!important;
}
#editorSidebar .tabs button.active{
  background:linear-gradient(135deg,var(--studio-blue),var(--studio-teal))!important;
  color:#fff!important;
  border-color:transparent!important;
  box-shadow:0 6px 16px rgba(44,100,155,.2)!important;
}

#editorSidebar .panel-scroll{
  min-height:0!important;
  height:auto!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:16px 15px 130px!important;
  background:#edf1f5!important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
#editorSidebar .tab-panel{
  max-width:100%!important;
  color:var(--studio-text)!important;
}
#editorSidebar .tab-panel h2{
  color:#203950!important;
  margin-top:0!important;
}
#editorSidebar .tab-panel h3{color:#3a627f!important}
#editorSidebar .builder-card,
#editorSidebar .contact-editor-card,
#editorSidebar .library-item,
#editorSidebar .layer,
#editorSidebar .hint{
  background:rgba(255,255,255,.82)!important;
  border-color:#cbd6e1!important;
  box-shadow:0 5px 16px rgba(28,55,81,.05)!important;
}
#editorSidebar input,
#editorSidebar select,
#editorSidebar textarea{
  min-height:43px!important;
  background:#fff!important;
  color:#1f344a!important;
  border-color:#becbd8!important;
}
#editorSidebar button,
#editorSidebar .panel-link{
  min-height:41px;
}

/* Workspace keeps the card visible and gives the user a true scroll area. */
#appShell .workspace{
  height:100%!important;
  min-height:0!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 50% 12%,rgba(111,167,218,.22),transparent 35%),
    linear-gradient(145deg,#2a435d,#34546f)!important;
}
#appShell .topbar{
  min-height:68px!important;
  height:auto!important;
  padding:10px 15px!important;
  background:rgba(36,59,85,.96)!important;
  color:#fff!important;
  border-bottom:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 8px 25px rgba(12,30,48,.16)!important;
}
#appShell .topbar strong{color:#fff!important}
#appShell .topbar span{color:#d7e2ec!important}
#appShell .topbar button,
#appShell .studio-tools-menu summary{
  background:rgba(255,255,255,.1)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.24)!important;
}
#appShell .studio-tools-popover{
  background:#f8fafc!important;
  color:#20384f!important;
  border-color:#c5d1de!important;
}

/* The repeated full-width launch bars are available in Tools, not stacked over the card. */
#appShell .always-visible-studio-bars,
#appShell .always-visible-history-bar,
#appShell .always-visible-health-bar,
#appShell .always-visible-sides-bar,
#appShell .always-visible-print-bar,
#appShell .always-visible-alignment-bar{
  display:none!important;
}

#appShell .stage{
  min-height:0!important;
  height:100%!important;
  overflow:auto!important;
  padding:clamp(22px,4vw,54px)!important;
  display:grid!important;
  place-items:center!important;
  align-content:center!important;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    radial-gradient(circle at center,rgba(255,255,255,.09),transparent 58%)!important;
  background-size:32px 32px,32px 32px,auto!important;
  scrollbar-color:#8ca4bb #29435d;
}
#appShell .card-wrap{
  margin:auto!important;
  flex:0 0 auto!important;
  filter:drop-shadow(0 22px 38px rgba(8,22,37,.35));
}
#appShell .mobile-quick-actions{
  position:relative!important;
  display:flex!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  padding:10px 12px max(10px,env(safe-area-inset-bottom))!important;
  background:rgba(34,55,78,.97)!important;
  border-top:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 -8px 24px rgba(12,28,45,.16)!important;
}
#appShell .mobile-quick-actions button{
  min-height:42px!important;
  min-width:105px!important;
  background:#f7f9fc!important;
  color:#27435e!important;
  border:1px solid #bcc9d6!important;
  border-radius:11px!important;
}
#appShell .mobile-quick-actions .primary{
  background:linear-gradient(135deg,var(--studio-blue),var(--studio-teal))!important;
  color:#fff!important;
  border-color:transparent!important;
}

/* Tablet: card first, tools below, natural page scrolling. */
@media (max-width:900px){
  html,body{
    height:auto!important;
    min-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }
  #appShell.app{
    height:auto!important;
    min-height:calc(100dvh - 38px)!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:visible!important;
  }
  #appShell .workspace{
    order:1!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
    display:flex!important;
    flex-direction:column!important;
  }
  #appShell .topbar{
    position:sticky!important;
    top:0!important;
    z-index:60!important;
    flex-wrap:wrap!important;
  }
  #appShell .top-actions{
    width:100%!important;
    overflow-x:auto!important;
    justify-content:flex-start!important;
    padding-bottom:2px!important;
  }
  #appShell .stage{
    order:2!important;
    height:auto!important;
    min-height:clamp(340px,62vw,620px)!important;
    max-height:none!important;
    overflow:auto!important;
    padding:28px 16px!important;
    align-content:center!important;
  }
  #appShell .mobile-quick-actions{
    order:3!important;
    position:sticky!important;
    bottom:0!important;
    z-index:55!important;
  }
  #editorSidebar.sidebar{
    order:4!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
    display:block!important;
    border-right:0!important;
    border-top:1px solid #c4d0dc!important;
    box-shadow:none!important;
  }
  #editorSidebar .brand{
    position:relative!important;
    flex-wrap:wrap!important;
  }
  #editorSidebar .tabs{
    position:sticky!important;
    top:0!important;
    z-index:50!important;
  }
  #editorSidebar .panel-scroll{
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    padding-bottom:120px!important;
  }
  .sidebar-scrim,
  .mobile-panel-toggle,
  .mobile-panel-close,
  .mobile-top-tools{
    display:none!important;
  }
}

/* Phone: larger touch targets, compact header, full-width controls. */
@media (max-width:600px){
  #appShell .topbar{
    padding:9px 10px!important;
    gap:8px!important;
  }
  #appShell .topbar-title{
    width:100%!important;
    min-width:0!important;
  }
  #appShell .topbar-title .compact-logo{
    transform:scale(.9);
    transform-origin:left center;
  }
  #appShell .history-controls,
  #appShell .zoom-controls{
    display:flex!important;
    flex:0 0 auto!important;
  }
  #appShell .top-actions{
    gap:7px!important;
  }
  #appShell .top-actions button,
  #appShell .studio-tools-menu summary{
    min-height:42px!important;
    min-width:42px!important;
  }
  #appShell .stage{
    min-height:330px!important;
    padding:20px 10px!important;
  }
  #appShell .mobile-quick-actions{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
  }
  #appShell .mobile-quick-actions button{
    min-width:0!important;
    width:100%!important;
    padding:9px 6px!important;
    font-size:12px!important;
  }
  #editorSidebar .brand{
    padding:12px!important;
  }
  #editorSidebar .brand-nav{
    width:100%!important;
    overflow-x:auto!important;
    flex-wrap:nowrap!important;
  }
  #editorSidebar .tabs{
    padding:8px!important;
  }
  #editorSidebar .tabs button{
    min-width:86px!important;
    min-height:44px!important;
  }
  #editorSidebar .panel-scroll{
    padding:13px 12px 125px!important;
  }
  #editorSidebar .button-grid{
    grid-template-columns:1fr!important;
  }
  #editorSidebar .grid2{
    grid-template-columns:1fr!important;
  }
}

/* Short laptop screens still expose all save/export controls. */
@media (min-width:901px) and (max-height:720px){
  #appShell .topbar{min-height:58px!important;padding-block:7px!important}
  #appShell .stage{padding:18px!important}
  #appShell .mobile-quick-actions{padding-block:7px!important}
  #editorSidebar .brand{padding-block:10px!important}
  #editorSidebar .panel-scroll{padding-top:12px!important}
}