/* =============================================================================
   SuperFile sub-nav — THE single source of truth for every localbar's design.
   Loaded by the marketing shell (RealShell) AND every self-contained console page.
   Behavior comes from localnav.js (adds .lb, the chevron, the dropdown).
   No page should hardcode its own .localbar styles.

   Layers:
     .localbar            base bar (pre-enhancement / fallback)
     .localbar.lb         Apple "localnav": 48px bar, 21px title, 12px links, dropdown
     .localbar.lb[data-adminnav]  admin console-switcher tweaks (compact, badges, active pill)
   ============================================================================= */

/* ---- base bar (applies before localnav.js enhances, and as a fallback) ---- */
.localbar{border-bottom:1px solid var(--hair,#e8e8ed);background:#fff}
.localbar .in{max-width:1024px;margin:0 auto;padding:0 22px;height:52px;display:flex;align-items:center;justify-content:space-between}
.localbar .t{font-size:19px;font-weight:600;color:var(--ink,#1d1d1f)}
.localbar .r{display:flex;gap:26px;font-size:13px}
.localbar .r a{color:var(--ink,#1d1d1f)}
.localbar .r a.act{color:var(--grey-l,#86868b);pointer-events:none}

/* ---- Apple "localnav" (added by localnav.js via .lb) ----
   Frosted background lives on ::before, NOT on .localbar.lb — iOS Safari clips
   absolutely-positioned descendants of a backdrop-filter element, which hid the dropdown. */
.localbar.lb{position:sticky;top:0;z-index:31;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.localbar.lb::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);pointer-events:none}
.localbar.lb .in{height:52px;overflow:visible}   /* matches Apple discussions localnav */
.localbar.lb .t{font-size:21px;font-weight:600;letter-spacing:-.012em;line-height:1.10;color:var(--ink,#1d1d1f);cursor:default;touch-action:manipulation}
.lb-right{display:flex;align-items:center;gap:16px;flex:none}
.localbar.lb .r{margin-left:auto;gap:30px;font-size:12px}
.localbar.lb .r a{font-weight:400;letter-spacing:-.01em;color:rgba(29,29,31,.86);transition:color .1s ease}
.localbar.lb .r a:hover{color:var(--ink,#1d1d1f);text-decoration:none}
.localbar.lb .r a.act{color:var(--ink,#1d1d1f);font-weight:400;pointer-events:auto}
.localbar.lb .r a.lb-btn,.lb-right .lb-act{display:inline-flex;align-items:center;justify-content:center;background:var(--blue,#0071e3);color:#fff!important;font-size:12px;font-weight:400;line-height:1;letter-spacing:-.01em;padding:5px 12px;border-radius:980px;text-decoration:none;white-space:nowrap;pointer-events:auto!important;border:0;transition:background .12s ease}
.localbar.lb .r a.lb-btn:hover,.lb-right .lb-act:hover{background:var(--blue-h,#0077ed);color:#fff!important;text-decoration:none}
/* chevron toggle — hidden on desktop, shown on mobile */
.lb-tog{display:none;align-items:center;justify-content:center;width:28px;height:40px;margin:0;padding:0;background:transparent;border:0;color:var(--ink,#1d1d1f);cursor:pointer;flex:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.lb-tog svg{width:11px;height:7px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .28s cubic-bezier(.4,0,.6,1)}
.localbar.lb.open .lb-tog svg{transform:rotate(180deg)}
.lb-scrim{position:fixed;inset:0;z-index:20;background:rgba(17,19,24,.24);backdrop-filter:blur(6px) saturate(.92);-webkit-backdrop-filter:blur(6px) saturate(.92);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s cubic-bezier(.4,0,.6,1),visibility 0s .3s}
.lb-scrim.on{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}

/* ---- admin console switcher (data-adminnav): compact many-item bar + badges ---- */
/* smaller title than the marketing localnav so all 15 consoles fit without cropping */
.localbar.lb[data-adminnav] .t{font-size:16px;letter-spacing:-.01em}
.localbar.lb[data-adminnav] .anav-badge{display:none;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;margin-left:6px;border-radius:999px;background:#FF3B30;color:#fff;font-size:10.5px;font-weight:700;line-height:1;vertical-align:1px}
.localbar.lb[data-adminnav] .anav-badge.on{display:inline-flex}
/* Blue = new since you last looked (clears when you open it). Red = a queue with work in it. */
.localbar.lb[data-adminnav] .anav-badge.fresh{background:#0071E3}

@media (min-width:834px){
  .lb-scrim{display:none!important}
  /* admin: title left, then a compact, scrollable strip of all consoles */
  .localbar.lb[data-adminnav] .r{margin-left:16px;gap:2px;font-size:13px;flex:1;min-width:0;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .localbar.lb[data-adminnav] .r::-webkit-scrollbar{display:none}
  .localbar.lb[data-adminnav] .r a{padding:6px 11px;border-radius:8px;font-size:13px;color:#6E6E73;white-space:nowrap;transition:background .12s,color .12s}
  .localbar.lb[data-adminnav] .r a:hover{background:#F2F2F4;color:#1D1D1F}
  .localbar.lb[data-adminnav] .r a.act{background:#1D1D1F;color:#fff;font-weight:500}
  .localbar.lb[data-adminnav] .r a#out{color:#B0392A;margin-left:4px}
  .localbar.lb[data-adminnav] .r a#out:hover{background:#FBEDEB;color:#B0392A}
}

@media (max-width:833px){
  /* on mobile the sub-nav carries sign-in, so drop the duplicate from the top nav
     (avatar still shows when signed in). On desktop the top-nav "Sign in" stays. */
  #navAuth.sipill{display:none!important}
  .localbar.lb .t{font-size:19px;cursor:pointer}
  .lb-tog{display:inline-flex}
  .lb-right{gap:12px;margin-left:auto}
  /* collapse the link row into a full-bleed dropdown below the bar */
  .localbar.lb .r{position:absolute;left:0;right:0;top:100%;display:block;flex-direction:column;gap:0!important;margin:0;padding:8px 0 max(10px,env(safe-area-inset-bottom))!important;overflow:visible!important;background:#fff;border-bottom:1px solid rgba(0,0,0,.08);box-shadow:0 26px 40px -28px rgba(0,0,0,.26);transform:translateY(-10px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .26s cubic-bezier(.4,0,.6,1),transform .28s cubic-bezier(.4,0,.6,1),visibility 0s .28s;max-height:76vh;overflow-y:auto}
  .localbar.lb.open .r{transform:none;opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
  .localbar.lb .r a{display:block;padding:11px 22px!important;font-size:16px!important;font-weight:400;line-height:1.35;letter-spacing:-.01em;color:var(--ink,#1d1d1f)!important;white-space:normal;border:0!important;background:none!important}
  .localbar.lb .r a.act{font-weight:600;color:var(--ink,#1d1d1f)!important;pointer-events:auto}
  .localbar.lb .r a.lb-btn{display:block;margin:12px 22px 6px;padding:13px 18px!important;text-align:center;background:var(--blue,#0071e3)!important;color:#fff!important;border-radius:12px;font-size:16px!important;font-weight:500}
  /* admin: active console highlighted, sign-out separated */
  .localbar.lb[data-adminnav] .r a.act{background:#1D1D1F;color:#fff!important;border-radius:10px;margin:0 12px;padding:11px 14px!important}
  .localbar.lb[data-adminnav] .r a#out{color:#B0392A!important;margin-top:4px;border-top:1px solid #F0F0F2}
}

/* Keep the localbar title (e.g. "Legal") and its links clearly separated at every
   width. When space is tight the links scroll internally (hidden scrollbar) instead
   of crowding the title or clipping. Fixes Legal/Terms touching in the 834-1024px range. */
.localbar .in{gap:22px}
@media (min-width:834px){
  .localbar.lb .r{min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .localbar.lb .r::-webkit-scrollbar{display:none}
}