/* =====================================================================
   Ureka Studio -- shell / auth / dashboard-banner / designer polish pass.

   Loaded after app.css. Targets existing ids/classes only (nothing here
   renames or removes a selector app.js, qa/*.mjs, or any other js/ file
   depends on -- see redesign audit notes). Uses the new --uss2-* tokens
   from redesign-tokens.css. Existing --bg/--uss-*/--color-*/--lux-*/--v10-*
   rules in app.css are left untouched; this file only adds higher-
   specificity presentation rules for the surfaces in this pass's scope:
   auth, billing, the app shell (sidebar/topbar/mobile nav), the "Before
   Your Show" dashboard banner, and the Board Designer overlay.
   ===================================================================== */

/* ---------- Global base ---------- */
body{font-family:var(--uss2-font);}
:focus-visible{outline:3px solid var(--uss2-gold-400);outline-offset:2px;}

/* ================= AUTH OVERLAY ================= */
.uss-auth-overlay{
  background:
    radial-gradient(circle at 78% 8%,rgba(58,140,255,.14),transparent 42%),
    radial-gradient(circle at 15% 85%,rgba(117,103,255,.10),transparent 40%),
    var(--uss2-navy-950)!important;
}
.uss-auth-card{
  background:linear-gradient(180deg,rgba(17,31,51,.92),rgba(8,18,32,.96))!important;
  border:1px solid var(--uss2-line)!important;
  border-radius:var(--uss2-radius-lg)!important;
  box-shadow:var(--uss2-shadow-md)!important;
  padding:36px 34px!important;
}
.uss-auth-brand img{filter:none;}
.uss-auth-eyebrow{
  color:var(--uss2-faint)!important;
  font-size:.62rem!important;
  font-weight:700!important;
  letter-spacing:.1em!important;
  text-transform:uppercase;
  opacity:.72;
  margin-bottom:4px;
}
#ussAuthTitle,#ussBillingTitle{
  color:var(--uss2-text)!important;
  letter-spacing:-.02em;
  font-weight:850;
}
.uss-auth-subtitle,.uss-billing-subtitle{color:var(--uss2-muted)!important;}

.uss-auth-tabs{
  display:flex;gap:4px;padding:4px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--uss2-line);
  border-radius:var(--uss2-radius-sm);
  margin:20px 0 22px;
}
.uss-auth-tab{
  flex:1;min-height:var(--uss2-tap);
  border:0;border-radius:9px;background:transparent;
  color:var(--uss2-muted);font-weight:800;font-size:.88rem;
  transition:background var(--uss2-ease),color var(--uss2-ease);
}
.uss-auth-tab.is-active{
  color:#fff;
  background:linear-gradient(145deg,rgba(58,140,255,.4),rgba(117,103,255,.32));
  box-shadow:0 4px 14px rgba(0,0,0,.24);
}

.uss-auth-form label span{
  display:block;margin-bottom:6px;color:var(--uss2-muted);
  font-size:.8rem;font-weight:700;
}
.uss-auth-form input,#ussAuthRecoveryForm input{
  width:100%;min-height:var(--uss2-tap);
  padding:0 14px;font-size:16px; /* 16px avoids iOS input zoom */
  background:rgba(255,255,255,.04);
  border:1px solid var(--uss2-line);
  border-radius:var(--uss2-radius-sm);
  color:var(--uss2-text);
  transition:border-color var(--uss2-ease);
}
.uss-auth-form input:focus,#ussAuthRecoveryForm input:focus{
  border-color:var(--uss2-blue-400);
}
.uss-auth-form label,#ussAuthRecoveryForm label{display:block;margin-bottom:14px;}

.uss-auth-submit,#ussAuthUpdatePassword{
  width:100%;min-height:48px;margin-top:4px;
  border:0;border-radius:13px;font-weight:800;font-size:.95rem;
  background:linear-gradient(135deg,var(--uss2-blue-500),var(--uss2-violet-500));
  box-shadow:0 12px 28px rgba(58,140,255,.24);
  color:#fff;
  transition:transform var(--uss2-ease);
}
.uss-auth-submit:hover,#ussAuthUpdatePassword:hover{transform:translateY(-1px);}
.uss-auth-link-btn{
  display:block;width:100%;margin-top:14px;text-align:center;
  color:var(--uss2-muted);font-size:.85rem;font-weight:700;
  min-height:var(--uss2-tap);
}
.uss-auth-link-btn:hover{color:#fff;}
.uss-auth-message{color:var(--uss2-danger);font-size:.85rem;margin-top:12px;}
.uss-auth-message:empty{margin:0;}

/* ================= BILLING OVERLAY ================= */
.uss-billing-overlay{background:var(--uss2-navy-950)!important;}
.uss-billing-card{
  background:linear-gradient(180deg,rgba(17,31,51,.92),rgba(8,18,32,.96))!important;
  border:1px solid var(--uss2-line)!important;
  border-radius:var(--uss2-radius-lg)!important;
  box-shadow:var(--uss2-shadow-md)!important;
}
.uss-billing-eyebrow{
  color:var(--uss2-gold-400)!important;font-size:.72rem!important;
  font-weight:800!important;letter-spacing:.14em;text-transform:uppercase;
}
.uss-plan-card{
  border:1px solid var(--uss2-line)!important;
  border-radius:var(--uss2-radius-md)!important;
  background:rgba(255,255,255,.03)!important;
  transition:border-color var(--uss2-ease),transform var(--uss2-ease);
  min-height:var(--uss2-tap);
}
.uss-plan-card:hover{transform:translateY(-2px);}
.uss-plan-card.is-selected{
  border-color:var(--uss2-blue-400)!important;
  background:linear-gradient(145deg,rgba(58,140,255,.14),rgba(117,103,255,.08))!important;
}
.uss-plan-badge{
  background:var(--uss2-gold-500)!important;color:#1a1304!important;
  font-weight:800;border-radius:999px;padding:2px 8px;font-size:.62rem;
}
.uss-billing-primary{
  background:linear-gradient(135deg,var(--uss2-blue-500),var(--uss2-violet-500))!important;
  border:0!important;border-radius:13px!important;font-weight:800!important;
  min-height:48px!important;color:#fff!important;
  box-shadow:0 12px 28px rgba(58,140,255,.24);
}
.uss-billing-secondary{
  border:1px solid var(--uss2-line)!important;
  background:rgba(255,255,255,.04)!important;
  border-radius:13px!important;min-height:var(--uss2-tap)!important;
  color:var(--uss2-muted)!important;
}
.uss-billing-secondary:hover{color:#fff!important;}
.uss-billing-fineprint{color:var(--uss2-faint)!important;font-size:.78rem;}

/* ================= APP SHELL: SIDEBAR ================= */
.sidebar{
  background:linear-gradient(180deg,var(--uss2-navy-900),var(--uss2-navy-950))!important;
  border-right:1px solid var(--uss2-line)!important;
}
/* app.css's own final-era `.brand{}` (line ~5256) sets padding/margin/border-bottom
   as !important, which beats a plain descendant selector regardless of load
   order -- so margin-bottom/border-bottom must be !important here too to
   actually take effect (confirmed via getComputedStyle before this fix). */
.sidebar .brand{display:flex;align-items:center;gap:10px;padding-bottom:18px;margin-bottom:6px!important;border-bottom:1px solid var(--uss2-line)!important;}
.sidebar .brand-lockup{height:28px;width:auto;}

.nav button{
  /* min-height stays !important: this is a deliberate, cross-cutting >=44px
     tap-target floor (accessibility requirement) that should hold even
     against denser existing variants like .uss-nav-text-only's 40px. */
  min-height:var(--uss2-tap)!important;
  border-radius:11px;
  font-weight:750;
  color:var(--uss2-muted);
  transition:background var(--uss2-ease),color var(--uss2-ease),border-color var(--uss2-ease);
}
.nav button:hover{background:rgba(255,255,255,.05);color:#fff;}
/* Intentionally NOT restyling .nav button.active's colors: app.css's
   current, real (and !important) active-nav treatment is a gold-tinted
   background (see the last of its several .nav button.active eras) --
   that's already on-brand ("gold for emphasis") and is what production
   actually ships today. An earlier draft of this file fought that with its
   own !important blue/violet override, which only won because it was
   ALSO !important; removed so the existing, intentional design shows
   through. Only the new left accent bar below is additive. */
.nav button.active::before{
  content:"";position:absolute;left:-12px;width:3px;height:18px;border-radius:2px;
  background:var(--uss2-gold-400);
}
.nav button{position:relative;}

.sidebar-source{
  border-top:1px solid var(--uss2-line);
  margin-top:14px;padding-top:16px;
}
.sidebar-source .kicker{color:var(--uss2-gold-400)!important;font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:.66rem;}
.release-version{
  color:var(--uss2-faint)!important;
  font-size:.62rem!important;
  opacity:.6;
  letter-spacing:.02em;
}

/* ================= TOPBAR ================= */
.topbar{
  border-bottom:1px solid var(--uss2-line)!important;
  background:rgba(5,11,20,.5)!important;
  backdrop-filter:blur(14px);
}
.topbar .kicker{color:var(--uss2-gold-400)!important;font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:.68rem;}
.topbar .h1{color:var(--uss2-text)!important;font-weight:800;letter-spacing:-.01em;}

.board-design-control-stack #openBoardDesigner{
  background:linear-gradient(135deg,var(--uss2-blue-500),var(--uss2-violet-500))!important;
  border:0!important;font-weight:800!important;
  box-shadow:0 8px 22px rgba(58,140,255,.22);
  min-height:var(--uss2-tap)!important;
}
.board-design-helper,.properties-helper{color:var(--uss2-faint)!important;}

/* The first pass styled .uss-quick-start / .uss-quick-step / .uss-step-number /
   .uss-setup-chip. Measured against the real signed-in app, every one of those
   elements is present in the DOM but zero-visible: start-break-phase1 builds
   #urekaStartBreakHome and hides all seven .module sections behind it. Those
   rules were therefore styling markup no signed-in user ever sees, and have
   been removed. The equivalent real surfaces are styled in
   redesign-runtime.css instead. */

/* ================= BOARD DESIGNER OVERLAY (visual polish only --
   structure/breakpoints already handled well by app.css, untouched) ===== */
.uss-designer-shell{
  border:1px solid var(--uss2-line)!important;
  box-shadow:var(--uss2-shadow-md)!important;
}
.uss-designer-header{border-bottom:1px solid var(--uss2-line)!important;}
.uss-designer-header-actions #ussDesignerDone{
  background:linear-gradient(135deg,var(--uss2-gold-500),#c58d12)!important;
  color:#1a1304!important;font-weight:800!important;border:0!important;
}
.uss-designer-tabs [data-designer-category].active,
.uss-designer-tabs [data-designer-category][aria-selected="true"]{
  background:linear-gradient(145deg,rgba(58,140,255,.4),rgba(117,103,255,.3))!important;
  color:#fff!important;
}

/* ================= MOBILE NAV: hamburger + off-canvas drawer =================
   Only active at <=1180px (js/redesign-mobile-nav.js's BREAKPOINT constant --
   the two are the single source of truth for each other and must stay in
   sync). Above that width the toggle/scrim stay hidden and the sidebar
   renders exactly as before. */
.uss-mobile-nav-toggle{
  display:none;
  position:fixed;top:12px;left:12px;z-index:120;
  width:44px;height:44px;
  border:1px solid var(--uss2-line);border-radius:11px;
  background:rgba(7,17,31,.92);backdrop-filter:blur(10px);
  flex-direction:column;align-items:center;justify-content:center;gap:4px;
}
.uss-mobile-nav-toggle span{width:18px;height:2px;background:#fff;border-radius:2px;transition:transform .18s ease,opacity .18s ease;}
.uss-mobile-nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.uss-mobile-nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.uss-mobile-nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

.uss-mobile-nav-scrim{
  position:fixed;inset:0;z-index:95;
  background:rgba(2,5,10,.6);backdrop-filter:blur(2px);
}

/* Background-scroll lock while the drawer is open. Only the html/body
   scrollport is frozen -- #ussPrimarySidebar keeps its own overflow-y:auto
   (set in the breakpoint block below) so the drawer itself still scrolls
   on short screens. */
html.uss-scroll-locked{overflow:hidden!important;height:100%;}
html.uss-scroll-locked body{overflow:hidden!important;height:100%;}

/* `inert` already removes an element from focus/AT and pointer interaction;
   this is just a defensive visual backstop in case a future style change
   ever makes an inert-but-still-positioned element paintable. */
[inert]{pointer-events:none;}
.uss-mobile-nav-toggle[inert]{opacity:0;}

@media(max-width:1180px){
  /* app.css's own <=1180px rule (!important-heavy) turns the sidebar into a
     squeezed horizontal bar -- exactly the "don't just squeeze the desktop
     nav" anti-pattern this pass is fixing. Everything below re-asserts a
     proper off-canvas drawer with matching !important weight so it wins
     regardless of load order. */
  .uss-mobile-nav-toggle{display:flex!important;}
  #ussPrimarySidebar,body.sidebar-collapsed #ussPrimarySidebar{
    display:flex!important;flex-direction:column!important;
    position:fixed!important;inset:0 auto 0 0!important;
    width:min(300px,84vw)!important;min-width:0!important;height:100vh!important;
    grid-template-columns:none!important;
    transform:translateX(-101%);
    transition:transform .22s ease;
    box-shadow:var(--uss2-shadow-md);
    padding:max(20px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom))!important;
    border-right:1px solid var(--uss2-line)!important;
    border-bottom:0!important;
    overflow-y:auto;
    z-index:100;
  }
  body.uss-mobile-nav-open #ussPrimarySidebar{transform:translateX(0)!important;}
  body:not(.uss-mobile-nav-open) .uss-mobile-nav-scrim{display:none;}
  #ussPrimarySidebar .brand,body.sidebar-collapsed #ussPrimarySidebar .brand{
    min-height:auto!important;margin:0 0 18px!important;padding:0 0 18px!important;
    justify-content:flex-start!important;border-bottom:1px solid var(--uss2-line);
  }
  #ussPrimarySidebar .brand-icon-img{display:none!important;}
  #ussPrimarySidebar .sidebar-collapse-btn{display:none!important;}
  #ussPrimarySidebar .release-version{display:block!important;}
  #ussPrimarySidebar .nav{
    display:grid!important;grid-template-columns:1fr!important;
    align-items:stretch!important;justify-content:flex-start!important;
    gap:6px!important;flex-wrap:nowrap!important;
  }
  #ussPrimarySidebar .nav .uss-nav-group-label{display:block!important;}
  #ussPrimarySidebar .nav button{width:100%!important;justify-content:flex-start!important;}
  #ussPrimarySidebar .nav button .txt{display:inline!important;}
  .topbar{padding-left:64px!important;}
}

@media(prefers-reduced-motion:reduce){
  #ussPrimarySidebar,.uss-mobile-nav-toggle span{transition-duration:.01ms!important;}
}

/* ================= NARROW-WIDTH HARDENING (320 / 375 / 390) =================
   Belt-and-suspenders on top of app.css's existing responsive rules: keep
   dialogs inside the viewport and prevent any accidental horizontal
   overflow from fixed-width children at very small widths. */
@media(max-width:480px){
  .uss-auth-card,.uss-billing-card{
    width:min(92vw,420px)!important;
    padding:28px 22px!important;
  }
  /* Pre-existing bug, not introduced by this pass: .v103-copy-source has a
     fixed height:38px in app.css, so its full label wraps to 3 lines at
     narrow widths and gets clipped rather than growing. Let it size to its
     content while keeping a >=44px tap target. */
  .v103-copy-source{
    height:auto!important;min-height:var(--uss2-tap)!important;
    padding-top:8px!important;padding-bottom:8px!important;
    line-height:1.25!important;white-space:normal!important;
    text-align:center;
  }
  .v103-statusbar{flex-wrap:wrap!important;row-gap:8px!important;padding-bottom:max(10px,env(safe-area-inset-bottom))!important;}
}

/* `overflow-x:hidden` was removed here (previously present on html,body).
   A full-page element-by-element scan at 320/375/390/768px, on the auth
   screen, the app shell, and with the Board Designer open, found zero real
   horizontal overflow (document.documentElement.scrollWidth exactly matches
   clientWidth at every one of those widths and states) -- app.css's own 85
   existing @media rules already prevent it. Blanket overflow-x:hidden would
   only have masked a future regression rather than fixed anything, so it's
   left off; max-width:100% stays as a harmless normalization. */
html,body{max-width:100%;}