/* ============================================================
   Brand Pack parent shell — pinned top menu bar that WRAPS (never
   scrolls horizontally) and collapses to a bottom-sheet popup on
   mobile, plus the content area. Scoped under .pxbrand-shell so it
   cannot collide with the app's main nav (.nav-*) or the brand
   content (.pxbrand).

   Lifted out of the form's <style> block when the screen became an
   HTML form: the server strips the text out of a template <style>, so
   these rules only reach a browser as a head <link>. Every selector
   already named .pxbrand-shell as its ancestor and is now wrapped in
   :where(), which costs each one a class — (0,2,0) becomes (0,1,0).
   Audited, and nothing ties: .pxbs-* is declared in this file alone,
   the brand CSS the screen injects at runtime scopes everything it
   has under .pxbrand, and the one non-.pxbs-* class these rules name
   (.n, the tab number) keeps a .pxbs-* ancestor in both of them. The
   root's own rule stays a bare class so it outranks the scoped reset.
   ============================================================ */
/* The root is a flex item of the layout's scroll port (.px-nav-content,
   a definite height). `height:100%` here would resolve, pin the bar and move
   the scroll inside .pxbs-content, so the root carries no height and no
   `min-height:0`; `position:relative` and `flex:1 0 auto` are what every
   HTML-form screen's root carries so the port scrolls. */
.pxbrand-shell{
  display:flex;
  flex-direction:column;
  width:100%;
  position:relative;
  flex:1 0 auto;
  font-family:var(--px-font-brand);
  box-sizing:border-box;
}
:where(.pxbrand-shell) *{box-sizing:border-box}

/* ----- pinned top menu bar (wraps to multiple rows when tight) ----- */
:where(.pxbrand-shell) .pxbs-bar{
  position:sticky;
  top:0;
  /* Sits above the scrolling brand content (which tops out at z-index 2)
     but must stay BELOW the drawer and top bar of the app's page shell
     (the shared dependency's Layouts.PxNavDrawerLayout, both at
     z-index 40), otherwise this bar and the Copy-link button
     paint over the mobile menu. */
  z-index:3;
  flex:0 0 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  padding:11px 18px;
  background:linear-gradient(180deg,#fff,#faf8f4);
  border-bottom:1px solid #e4e4e0;
  box-shadow:0 1px 2px rgba(2,1,52,.05),0 6px 16px rgba(2,1,52,.04);
}

/* ----- tab buttons ----- */
:where(.pxbrand-shell) .pxbs-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
  white-space:nowrap;
  text-decoration:none;
  color:#58585a;
  font-family:var(--px-font-brand);
  font-size:.95rem;
  font-weight:500;
  line-height:1;
  padding:10px 16px;
  border:2px solid transparent;
  border-radius:10px;
  background:transparent;
  cursor:pointer;
  transition:background-color .15s,color .15s,border-color .15s;
}
:where(.pxbrand-shell) .pxbs-btn .n{
  color:#888888;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
/* Home: set apart, no number */
:where(.pxbrand-shell) .pxbs-btn.pxbs-home{font-weight:700;color:#020134}
:where(.pxbrand-shell) .pxbs-btn:hover{background:#fff6ec;color:#020134}
/* Selected gets a full orange border. */
:where(.pxbrand-shell) .pxbs-btn.active{
  color:#020134;
  background:#fff6ec;
  border-color:#f68b1f;
}

/* ----- mobile trigger (opens the bottom sheet); hidden on desktop ----- */
:where(.pxbrand-shell) .pxbs-trigger{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  padding:12px 16px;
  border:2px solid #f68b1f;
  border-radius:10px;
  background:#fff;
  color:#020134;
  font-family:var(--px-font-brand);
  font-weight:700;
  font-size:1rem;
  cursor:pointer;
}
:where(.pxbrand-shell) .pxbs-trigger .pxbs-trigger-icon{color:#f68b1f;font-size:1.1rem;line-height:1}

/* ----- content below the bar ----- */
:where(.pxbrand-shell) .pxbs-content{
  flex:1 1 auto;
  min-width:0;
  min-height:0;
  overflow-y:auto;
}

/* ----- bottom-sheet popup (mobile) ----- */
:where(.pxbrand-shell) .pxbs-backdrop{
  position:fixed;
  inset:0;
  background:rgba(2,1,52,.45);
  z-index:9998;
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease,visibility .2s ease;
}
:where(.pxbrand-shell) .pxbs-backdrop.open{opacity:1;visibility:visible}
:where(.pxbrand-shell) .pxbs-sheet{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:9999;
  background:#fff;
  border-radius:18px 18px 0 0;
  box-shadow:0 -10px 40px rgba(2,1,52,.25);
  padding:8px 14px max(18px,env(safe-area-inset-bottom)) 14px;
  max-height:75vh;
  overflow-y:auto;
  transform:translateY(110%);
  transition:transform .26s cubic-bezier(.4,0,.2,1);
}
:where(.pxbrand-shell) .pxbs-sheet.open{transform:translateY(0)}
:where(.pxbrand-shell) .pxbs-sheet-handle{width:42px;height:5px;border-radius:3px;background:#e4e4e0;margin:6px auto 12px}
:where(.pxbrand-shell) .pxbs-sheet-item{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  text-align:left;
  padding:14px;
  border:2px solid transparent;
  border-radius:10px;
  background:transparent;
  cursor:pointer;
  color:#58585a;
  font-family:var(--px-font-brand);
  font-size:1.02rem;
  font-weight:500;
}
:where(.pxbrand-shell) .pxbs-sheet-item .n{color:#888888;font-weight:600;font-variant-numeric:tabular-nums;min-width:24px}
:where(.pxbrand-shell) .pxbs-sheet-item.pxbs-home{font-weight:700;color:#020134}
:where(.pxbrand-shell) .pxbs-sheet-item:hover{background:#fff6ec;color:#020134}
:where(.pxbrand-shell) .pxbs-sheet-item.active{background:#fff6ec;color:#020134;border-color:#f68b1f;font-weight:700}

/* ----- mobile: swap the inline tabs for the trigger + sheet ----- */
@media(max-width:640px){
  :where(.pxbrand-shell) .pxbs-bar .pxbs-btn:not(.pxbs-copy){display:none}
  :where(.pxbrand-shell) .pxbs-trigger{display:flex;flex:1 1 auto;width:auto}
  :where(.pxbrand-shell) .pxbs-bar{padding:10px 14px}
  :where(.pxbrand-shell) .pxbs-copy .pxbs-copy-label{display:none}
}

/* ----- injected content: one section visible at a time ----- */
:where(.pxbrand-shell) .pxbs-section{display:none}
:where(.pxbrand-shell) .pxbs-section.active{display:block}

/* ----- "Copy API link" action (signed 24h share link) ----- */
:where(.pxbrand-shell) .pxbs-copy{
  margin-left:auto;
  border-color:#f68b1f;
  color:#ef700e;
  background:#fff6ec;
  font-weight:600;
}
:where(.pxbrand-shell) .pxbs-copy:hover{background:#f68b1f;color:var(--px-ink-on-bright)}
:where(.pxbrand-shell) .pxbs-copy.loading{background:var(--px-bg-disabled);border-color:var(--px-border-disabled);color:var(--px-text-disabled);pointer-events:none}
:where(.pxbrand-shell) .pxbs-copy .pxbs-copy-ico{font-size:1rem;line-height:1}

:where(.pxbrand-shell) .pxbs-btn:focus-visible,
:where(.pxbrand-shell) .pxbs-trigger:focus-visible,
:where(.pxbrand-shell) .pxbs-sheet-item:focus-visible{outline:2px solid var(--px-focus-ring);outline-offset:2px}

/* ----- copy confirmation toast ----- */
:where(.pxbrand-shell) .pxbs-toast{
  position:fixed;left:50%;bottom:26px;
  transform:translateX(-50%) translateY(12px);
  background:#020134;color:#fff;
  font-family:var(--px-font-brand);font-size:.92rem;font-weight:500;
  padding:12px 20px;border-radius:10px;
  box-shadow:0 10px 30px rgba(2,1,52,.3);
  opacity:0;visibility:hidden;
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
  z-index:10000;
}
:where(.pxbrand-shell) .pxbs-toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

/* ===== E34 dark variant, brand colours: Midnight Navy #020134, warm paper #faf8f4, Xpress Orange #f68b1f.
   Lives in branding_html.css, which loads BEFORE the injected PX_BRAND_CSS, so content rules win on specificity, not order.
   Fixed in both themes: brand hues (--px-orange, --px-orange-deep, --px-graphite), navy fills, swatch chips, ramp,
   plain .logo-stage, .dont .vis (--cloud), .hero-sample. ===== */
[data-theme="dark"] .pxbrand-shell{
  --pxbd-page:#020134;
  --pxbd-page-2:#0e0d3e;
  --pxbd-card:#161543;
  --pxbd-raised:#201f4b;
  --pxbd-footer:#01011d;
  --pxbd-line:#34325a;
  --pxbd-line-2:#4c4b6e;
  --pxbd-heading:#faf8f4;
  --pxbd-ink:#f5f3ee;
  --pxbd-slate:#cdccd1;
  --pxbd-grey:#bab8c2;
  --pxbd-grey-2:#a6a4b3;
  --pxbd-grey-3:#9290a3;
  --pxbd-amber-50:#1f1231;
  --pxbd-amber-100:#381f2f;
  --pxbd-amber-200:#703f2b;
  --pxbd-error:#dd9890;
  --pxbd-success:#a2c6b1;
  --pxbd-graphite-ink:var(--pxbd-slate);
  --pxbd-shadow-sm:0 1px 2px rgba(0,0,0,.35),0 4px 12px rgba(0,0,0,.25);
  --pxbd-shadow-md:0 6px 24px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.3);
  --pxbd-shadow-lg:0 24px 60px -20px rgba(0,0,0,.6);
  color-scheme:dark;
}
/* shell: tab bar, sheet, toast */
[data-theme="dark"] :where(.pxbrand-shell) .pxbs-bar{background:linear-gradient(180deg,var(--pxbd-card),var(--pxbd-page-2));border-bottom-color:var(--pxbd-line);box-shadow:0 1px 2px rgba(0,0,0,.4),0 6px 16px rgba(0,0,0,.3)}
[data-theme="dark"] :where(.pxbrand-shell) .pxbs-btn{color:var(--pxbd-grey)}
[data-theme="dark"] :where(.pxbrand-shell) .pxbs-btn .n{color:var(--pxbd-grey-3)}
[data-theme="dark"] :where(.pxbrand-shell) .pxbs-btn.pxbs-home{color:var(--pxbd-heading)}
[data-theme="dark"] :where(.pxbrand-shell) .pxbs-btn:hover{background:var(--pxbd-amber-50);color:var(--pxbd-heading)}
[data-theme="dark"] :where(.pxbrand-shell) .pxbs-btn.active{color:var(--pxbd-heading);background:var(--pxbd-amber-50)}
[data-theme="dark"] :where(.pxbrand-shell) .pxbs-copy{color:#ef700e;background:var(--pxbd-amber-50)}
[data-theme="dark"] :where(.pxbrand-shell) .pxbs-copy:hover{background:#f68b1f;color:var(--px-ink-on-bright)}
[data-theme="dark"] :where(.pxbrand-shell) .pxbs-copy.loading{background:var(--px-bg-disabled);color:var(--px-text-disabled)}
[data-theme="dark"] :where(.pxbrand-shell) .pxbs-trigger{background:var(--pxbd-card);color:var(--pxbd-heading)}
[data-theme="dark"] :where(.pxbrand-shell) .pxbs-backdrop{background:rgba(0,0,0,.6)}
[data-theme="dark"] :where(.pxbrand-shell) .pxbs-sheet{background:var(--pxbd-card);box-shadow:0 -10px 40px rgba(0,0,0,.5)}
[data-theme="dark"] :where(.pxbrand-shell) .pxbs-sheet-handle{background:var(--pxbd-line-2)}
[data-theme="dark"] :where(.pxbrand-shell) .pxbs-sheet-item{color:var(--pxbd-grey)}
[data-theme="dark"] :where(.pxbrand-shell) .pxbs-sheet-item .n{color:var(--pxbd-grey-3)}
[data-theme="dark"] :where(.pxbrand-shell) .pxbs-sheet-item.pxbs-home{color:var(--pxbd-heading)}
[data-theme="dark"] :where(.pxbrand-shell) .pxbs-sheet-item:hover,
[data-theme="dark"] :where(.pxbrand-shell) .pxbs-sheet-item.active{background:var(--pxbd-amber-50);color:var(--pxbd-heading)}
[data-theme="dark"] :where(.pxbrand-shell) .pxbs-toast{background:var(--pxbd-raised);color:var(--pxbd-heading);border:1px solid var(--pxbd-line-2);box-shadow:0 10px 30px rgba(0,0,0,.5)}

/* content: neutral and amber tokens re-pointed (reaches .pxbrand, .pxicons, .pxillus and the --pxh-* locals) */
[data-theme="dark"] .pxbrand-shell .pxbrand{
  --ink:var(--pxbd-ink);--slate:var(--pxbd-slate);--grey:var(--pxbd-grey);--grey-2:var(--pxbd-grey-2);--grey-3:var(--pxbd-grey-3);
  --line:var(--pxbd-line);--line-2:var(--pxbd-line-2);--surface:var(--pxbd-card);--paper:var(--pxbd-page);--paper-2:var(--pxbd-page-2);
  --amber-50:var(--pxbd-amber-50);--amber-100:var(--pxbd-amber-100);--amber-200:var(--pxbd-amber-200);
  --shadow-sm:var(--pxbd-shadow-sm);--shadow-md:var(--pxbd-shadow-md);--shadow-lg:var(--pxbd-shadow-lg);
  --pxh-navy:var(--pxbd-heading);--pxh-slate:var(--pxbd-slate);--pxh-grey:var(--pxbd-grey-2);--pxh-paper:var(--pxbd-page);--pxh-amber:var(--pxbd-amber-50);--pxh-line:var(--pxbd-line);
}
/* --px-navy as text -> warm paper (the inline navy text in server_code/brandpack/sections.py).
   Navy fills keep the real navy: .pxillus's --navy (pillars, hero art, chips, bars), the navy button,
   the dark logo stage, the dark icon panel and the inline navy card (style="background:var(--px-navy)"). */
[data-theme="dark"] .pxbrand-shell .pxbrand{--px-navy:var(--pxbd-heading)}
[data-theme="dark"] .pxbrand-shell .pxbrand.pxillus{--navy:#020134}
[data-theme="dark"] .pxbrand-shell .pxbrand .btn-navy,
[data-theme="dark"] .pxbrand-shell .pxbrand .logo-stage.dark,
[data-theme="dark"] .pxbrand-shell .pxbrand.pxicons .dark,
[data-theme="dark"] .pxbrand-shell .pxbrand [style*="background:var(--px-navy)"]{--px-navy:#020134}
/* navy used as text -> warm paper */
[data-theme="dark"] .pxbrand-shell .pxbrand h1,
[data-theme="dark"] .pxbrand-shell .pxbrand h2,
[data-theme="dark"] .pxbrand-shell .pxbrand h3,
[data-theme="dark"] .pxbrand-shell .pxbrand h4,
[data-theme="dark"] .pxbrand-shell .pxbrand .cover .meta b,
[data-theme="dark"] .pxbrand-shell .pxbrand .sw .meta .nm,
[data-theme="dark"] .pxbrand-shell .pxbrand .specimen .row .lab b,
[data-theme="dark"] .pxbrand-shell .pxbrand table.spec th,
[data-theme="dark"] .pxbrand-shell .pxbrand .qitem .qt,
[data-theme="dark"] .pxbrand-shell .pxbrand .pillrow .pill b,
[data-theme="dark"] .pxbrand-shell .pxbrand.pxillus footer b{color:var(--pxbd-heading)}
[data-theme="dark"] .pxbrand-shell .pxbrand .hero-sample h3,
[data-theme="dark"] .pxbrand-shell .pxbrand .bookftr h3{color:#fff}
/* white literals -> card */
[data-theme="dark"] .pxbrand-shell .pxbrand .card,
[data-theme="dark"] .pxbrand-shell .pxbrand .sw,
[data-theme="dark"] .pxbrand-shell .pxbrand .specimen,
[data-theme="dark"] .pxbrand-shell .pxbrand .flag,
[data-theme="dark"] .pxbrand-shell .pxbrand .qitem,
[data-theme="dark"] .pxbrand-shell .pxbrand table.spec,
[data-theme="dark"] .pxbrand-shell .pxbrand .voicegrid,
[data-theme="dark"] .pxbrand-shell .pxbrand.pxicons .note,
[data-theme="dark"] .pxbrand-shell .pxbrand.pxicons .mini,
[data-theme="dark"] .pxbrand-shell .pxbrand.pxillus .swatch,
[data-theme="dark"] .pxbrand-shell .pxbrand.pxillus .scene{background:var(--pxbd-card)}
[data-theme="dark"] .pxbrand-shell .pxbrand:not(.pxillus) .dont{background:var(--pxbd-card)}
[data-theme="dark"] .pxbrand-shell .pxbrand .btn-ghost{background:transparent}
[data-theme="dark"] .pxbrand-shell .pxbrand .btn-ghost:hover{background:var(--pxbd-amber-50)}
/* the orange hero sample keeps its light-mode white ghost button */
[data-theme="dark"] .pxbrand-shell .pxbrand .hero-sample .btn-row .btn-ghost{background:#fff}
[data-theme="dark"] .pxbrand-shell .pxbrand .hero-sample .btn-row .btn-ghost:hover{background:#fff6ec}
[data-theme="dark"] .pxbrand-shell .pxbrand .btn-navy{border-color:var(--pxbd-line-2)}
[data-theme="dark"] .pxbrand-shell .pxbrand section:nth-of-type(even){background:linear-gradient(180deg,var(--pxbd-page-2),var(--pxbd-page))}
[data-theme="dark"] .pxbrand-shell .pxbrand .cover,
[data-theme="dark"] .pxbrand-shell .pxbrand .pxhero{background:radial-gradient(1200px 500px at 88% -10%,var(--pxbd-amber-50),transparent 60%),linear-gradient(180deg,var(--pxbd-page-2),var(--pxbd-page))}
[data-theme="dark"] .pxbrand-shell .pxbrand .pxhero::before{border-color:var(--pxbd-amber-100)}
[data-theme="dark"] .pxbrand-shell .pxbrand .badge.draft{background:repeating-linear-gradient(45deg,var(--pxbd-amber-50),var(--pxbd-amber-50) 8px,var(--pxbd-card) 8px,var(--pxbd-card) 16px)}
/* items on a fixed light field keep light-mode ink */
[data-theme="dark"] .pxbrand-shell .pxbrand .sw .copy{color:#1c1c22}
[data-theme="dark"] .pxbrand-shell .pxbrand .sw .chip{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
[data-theme="dark"] .pxbrand-shell .pxbrand .card .ico{background:#fff6ec;border-color:#fde8cf}
/* official trust marks keep their own colours on a white backing, as in the Logo section */
[data-theme="dark"] .pxbrand-shell .pxbrand table.spec td img{background:#fff;box-shadow:0 0 0 6px #fff;border-radius:2px}
/* E36: icon tiles and the logo panel stay white; the icon strips go dark */
[data-theme="dark"] .pxbrand-shell .pxbrand.pxicons .card{background:#fff;border-color:#e4e4e0}
[data-theme="dark"] .pxbrand-shell .pxbrand.pxicons .card:hover{border-color:#fbcf9c}
[data-theme="dark"] .pxbrand-shell .pxbrand.pxicons .card span{color:#424242}
/* E37: strips swap to the light-on-dark icon set; sections.py hides .ondark inline so light and the standalone page need no rule */
[data-theme="dark"] .pxbrand-shell .pxbrand.pxicons .mini img.onlight{display:none}
[data-theme="dark"] .pxbrand-shell .pxbrand.pxicons .mini img.ondark{display:block!important}
/* navy fills on a navy page get an edge */
[data-theme="dark"] .pxbrand-shell .pxbrand footer.bookftr{background:var(--pxbd-footer);border-top:1px solid var(--pxbd-line)}
[data-theme="dark"] .pxbrand-shell .pxbrand.pxicons .dark,
[data-theme="dark"] .pxbrand-shell .pxbrand.pxillus .hero-art{border:1px solid var(--pxbd-line-2)}
[data-theme="dark"] .pxbrand-shell .pxbrand.pxillus .pillar{box-shadow:inset 0 0 0 1px var(--pxbd-line-2)}
/* M-06: the navy and graphite swatches and the navy sample stroke fade in dark; grey-3 ring 5.5:1 on the card, ink stroke 16.5:1 on page-2.
   11px = the shared .pxillus .swatch radius (12px, px_brand_css.py) minus its 1px border, so the ring follows the clip. */
[data-theme="dark"] .pxbrand-shell .pxbrand.pxillus .swatch .chip[style*="var(--navy)"],
[data-theme="dark"] .pxbrand-shell .pxbrand.pxillus .swatch .chip[style*="var(--graphite)"]{box-shadow:inset 0 0 0 1px var(--pxbd-grey-3);border-radius:11px 11px 0 0}
[data-theme="dark"] .pxbrand-shell .pxbrand.pxillus .motif-strip span[style*="var(--navy)"]{box-shadow:inset 0 0 0 1px var(--pxbd-grey-3)}
[data-theme="dark"] .pxbrand-shell .pxbrand.pxillus .spec-frame line[stroke="#020134"]:not([opacity]){stroke:var(--pxbd-ink)}
[data-theme="dark"] .pxbrand-shell .pxbrand.pxillus header.hero{border-bottom-color:var(--pxbd-line-2)}
[data-theme="dark"] .pxbrand-shell .pxbrand.pxillus footer{border-top-color:var(--pxbd-line-2)}
/* status colours lifted for dark */
[data-theme="dark"] .pxbrand-shell .pxbrand .dont .lab b{color:var(--pxbd-error)}
[data-theme="dark"] .pxbrand-shell .pxbrand .voicegrid .h.we{color:var(--pxbd-success);background:rgba(29,122,77,.22)}
[data-theme="dark"] .pxbrand-shell .pxbrand .voicegrid .h.not{color:var(--pxbd-error);background:rgba(192,57,43,.22)}
[data-theme="dark"] .pxbrand-shell .pxbrand.pxillus .checklist{--success:var(--pxbd-success);--error:var(--pxbd-error)}
/* .pxillus reads --graphite (#5b5e60) as text; it stays a fill in the swatches */
[data-theme="dark"] .pxbrand-shell .pxbrand.pxillus header.hero p.lede,
[data-theme="dark"] .pxbrand-shell .pxbrand.pxillus .sec-head p,
[data-theme="dark"] .pxbrand-shell .pxbrand.pxillus .card p,
[data-theme="dark"] .pxbrand-shell .pxbrand.pxillus .swatch .hex,
[data-theme="dark"] .pxbrand-shell .pxbrand.pxillus .swatch .role,
[data-theme="dark"] .pxbrand-shell .pxbrand.pxillus .func,
[data-theme="dark"] .pxbrand-shell .pxbrand.pxillus .rules-list li,
[data-theme="dark"] .pxbrand-shell .pxbrand.pxillus .checklist li,
[data-theme="dark"] .pxbrand-shell .pxbrand.pxillus .scene p,
[data-theme="dark"] .pxbrand-shell .pxbrand.pxillus footer{color:var(--pxbd-grey-2)}
[data-theme="dark"] .pxbrand-shell .pxbrand.pxillus .checklist li{border-bottom-color:rgba(255,255,255,.06)}
[data-theme="dark"] .pxbrand-shell .pxbrand.pxillus .spec-frame text[fill="#5b5e60"]{fill:var(--pxbd-grey-2)}