/* Moved verbatim from templates/_partials/therapy_brand_menu.html (inline <style>) so it can be
   cached. Keep in sync with that template; cascade position = the
   <link> that replaced the <style> block. */
  /* Cream-themed drawer. Mobile-first: slides up from above the
     bottom-nav. Desktop ≥768px: anchors top-right under the header
     hamburger. */
  .brand-menu{
    position:fixed; left:0; right:0; bottom:60px; z-index:699;
    margin:0 10px;
    padding:16px 16px calc(20px + env(safe-area-inset-bottom,0));
    background:var(--ts-paper, #EFE6D2);
    color:var(--ts-ink, #0F1623);
    border:1px solid rgba(14,14,16,0.10);
    border-radius:22px;
    box-shadow:0 -18px 48px rgba(14,14,16,0.18),
               0 2px 8px rgba(14,14,16,0.05);
    max-height:calc(100vh - 130px); overflow-y:auto;
    transform:translateY(0); opacity:1;
    transition:transform 0.32s cubic-bezier(0.2,0.7,0.2,1),
               opacity 0.22s linear;
    will-change:transform;
  }
  /* Closed state — overlay [hidden] so we keep the semantic attribute
     for screen readers/JS while still animating in/out. */
  .brand-menu[hidden]{
    display:block !important;
    transform:translateY(calc(100% + 80px));
    opacity:0;
    pointer-events:none;
  }
  .brand-menu-section{padding:10px 0;}
  .brand-menu-section + .brand-menu-section{
    border-top:1px solid rgba(14,14,16,0.08);
  }
  .brand-menu-label{
    font-family:var(--mono, 'Hanken Grotesk'), sans-serif;
    font-size:0.62rem;letter-spacing:0.26em;text-transform:uppercase;
    color:var(--ts-rust, #EA6A2C);
    margin-bottom:10px;
  }

  /* Admin dropdown — single native select holding every admin surface.
     Native option list scrolls and floats above the drawer (never clipped). */
  .bm-admin-select{
    -webkit-appearance:none; appearance:none;
    width:100%; box-sizing:border-box;
    padding:13px 40px 13px 14px;
    font-family:var(--body, 'Hanken Grotesk'), sans-serif;
    font-size:0.95rem; font-weight:600;
    color:var(--ts-ink, #0F1623);
    background:var(--ts-paper-hi, #F3EDDF);
    border:1px solid rgba(14,14,16,0.16);
    border-radius:12px; cursor:pointer; line-height:1.2;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%23EA6A2C' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center;
  }
  .bm-admin-select:focus{outline:none;border-color:var(--ts-rust, #EA6A2C);}

  /* Greeting block — small ink eyebrow, big display name, rust chip. */
  .bm-greet-section{padding-bottom:6px;}
  .bm-greet-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
  .bm-greet-eyebrow{
    font-family:var(--mono, 'Hanken Grotesk'), sans-serif;
    font-size:0.62rem;letter-spacing:0.26em;text-transform:uppercase;
    color:var(--ts-ink-soft, #3A4250);
    margin-bottom:2px;
  }
  .bm-greet-name{
    font-family:var(--slab, 'Hanken Grotesk'), sans-serif;
    font-weight:800;
    font-size:1.5rem;letter-spacing:-0.01em;
    color:var(--ts-ink, #0F1623);
    line-height:1.05;
  }
  .bm-greet-actions{display:flex;gap:8px;flex-wrap:wrap;}
  .bm-chip{
    display:inline-flex;align-items:center;gap:6px;
    padding:7px 12px;border-radius:99px;
    font-size:0.78rem;letter-spacing:0.04em;
    text-decoration:none;
    border:1px solid rgba(14,14,16,0.18);
    background:transparent;
    color:var(--ts-ink, #0F1623);
    transition:background 0.15s,border-color 0.15s,color 0.15s;
  }
  .bm-chip i{font-size:0.95rem;}
  .bm-chip--logout{
    border-color:var(--ts-rust, #EA6A2C);
    color:var(--ts-rust, #EA6A2C);
  }
  .bm-chip--logout:hover{
    background:var(--ts-rust, #EA6A2C);
    border-color:var(--ts-rust, #EA6A2C);
    color:#fff;
  }
  .bm-chip--acct{
    border-color:rgba(14,14,16,0.22);
    color:var(--ts-ink, #0F1623);
    background:transparent;
    cursor:pointer;
  }
  .bm-chip--acct:hover{
    background:rgba(14,14,16,0.06);
    border-color:rgba(14,14,16,0.32);
  }
  .bm-chip--acct[aria-expanded="true"]{
    background:rgba(14,14,16,0.06);
    border-color:var(--ts-rust, #EA6A2C);
    color:var(--ts-rust, #EA6A2C);
  }
  .bm-chip-chev{
    font-size:0.7rem;
    transition:transform 0.2s;
  }
  .bm-chip--acct[aria-expanded="true"] .bm-chip-chev{
    transform:rotate(180deg);
  }
  .bm-acct-panel{
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid rgba(14,14,16,0.08);
  }

  /* Link rows — ink text on cream tile, rust accent on hover. */
  .brand-menu-links{display:flex;flex-direction:column;gap:4px;}
  .brand-menu-links a{
    display:flex;align-items:center;gap:12px;
    padding:11px 14px;border-radius:12px;
    color:var(--ts-ink, #0F1623);
    text-decoration:none;font-size:0.95rem;
    background:rgba(14,14,16,0.025);
    border:1px solid rgba(14,14,16,0.06);
    transition:background 0.15s,color 0.15s,border-color 0.15s;
  }
  .brand-menu-links a:hover{
    background:rgba(234,106,44,0.10);
    color:var(--ts-rust, #EA6A2C);
    border-color:rgba(234,106,44,0.32);
  }
  /* Disabled / coming-soon entries — visible but inert; the inline
     onclick handler intercepts the navigation and shows a one-line
     alert. */
  .brand-menu-links a.is-disabled,
  .brand-menu-links a.is-disabled:hover,
  .brand-menu-links a.is-disabled:hover i{
    background:transparent;
    color:rgba(15,22,35,0.36);
    border-color:rgba(15,22,35,0.12);
    cursor:not-allowed;
  }
  .brand-menu-links a.is-disabled i{color:rgba(15,22,35,0.36);}
  .brand-menu-links a i{
    font-size:1.1rem;
    color:var(--ts-ink-soft, #3A4250);
    width:22px;text-align:center;
    transition:color 0.15s;
  }
  .brand-menu-links a:hover i{color:var(--ts-rust, #EA6A2C);}
  /* Inline-SVG icon slot: matches the Bootstrap-icon <i> footprint above
     so custom marks (e.g. .bm-icon--partnership) sit on the same grid
     as the bi-* glyphs and inherit the colour via currentColor. */
  .brand-menu-links a i.bm-icon{
    display:inline-flex;align-items:center;justify-content:center;
    width:22px;height:1.1rem;font-style:normal;line-height:1;
  }
  .brand-menu-links a i.bm-icon svg{width:1.2em;height:1.2em;display:block;}
  .brand-menu-links--grid{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;
  }

  /* Social row — icon-only pills. Cream tile, ink icon, rust on
     hover. Title attribute renders the native browser tooltip with
     the platform name; aria-label keeps it screen-reader-friendly. */
  .brand-menu-socials.brand-menu-socials--icons{
    display:flex;align-items:center;justify-content:center;gap:10px;
    flex-wrap:wrap;
  }
  .brand-menu-socials.brand-menu-socials--icons a{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;border-radius:50%;
    border:1px solid rgba(14,14,16,0.12);
    background:rgba(14,14,16,0.025);
    color:var(--ts-ink, #0F1623);
    text-decoration:none;
    transition:background 0.15s,color 0.15s,border-color 0.15s,transform 0.15s;
  }
  .brand-menu-socials.brand-menu-socials--icons a:hover{
    background:rgba(234,106,44,0.10);
    border-color:rgba(234,106,44,0.32);
    color:var(--ts-rust, #EA6A2C);
    transform:translateY(-1px);
  }
  .brand-menu-socials.brand-menu-socials--icons a i{
    font-size:1.15rem;
    color:var(--ts-ink-soft, #3A4250);
    transition:color 0.15s;
  }
  .brand-menu-socials.brand-menu-socials--icons a:hover i{
    color:var(--ts-rust, #EA6A2C);
  }

  /* Desktop ≥768px — anchor the drawer to the burger on the right
     instead of sliding up from the bottom. */
  @media (min-width: 768px){
    .brand-menu{
      left:auto; right:18px; bottom:auto;
      top:calc(var(--ts-head-h, 64px) + 8px);
      margin:0; max-width:340px; width:max-content;
      border-radius:18px;
      transform:translateY(0); opacity:1;
      box-shadow:0 24px 48px rgba(14,14,16,0.18),
                 0 2px 8px rgba(14,14,16,0.05);
    }
    .brand-menu[hidden]{
      transform:translateY(-8px);
      opacity:0;
    }
  }
  /* Respect reduced-motion users — drop the slide animation. */
  @media (prefers-reduced-motion: reduce){
    .brand-menu{transition:opacity 0.18s linear;}
    .brand-menu[hidden]{transform:none;}
  }

  /* Hide-on-mobile helper used by individual menu items (e.g. the
     public DJ Contest link is hidden on phones per user direction —
     it stays visible on desktop where there's more real estate). */
  @media (max-width: 767px){
    .brand-menu .ts-hide-mobile{display:none !important;}
  }

  /* ── Dark-mode skin (Therapy 2026 redesign) ────────────────────
     Flips the cream drawer to noir on every device so the menu
     matches the rest of the dark Therapy chrome (schedule, RSVP
     slide-up, etc.). All overrides scoped to `.brand-menu`. */
  .brand-menu{
    background:var(--ts-noir, #0D0B09);
    color:var(--ts-paper-hi, #F0EADC);
    border:1px solid rgba(244,236,218,.10);
    box-shadow:0 -18px 48px rgba(0,0,0,.55),
               0 2px 8px rgba(0,0,0,.35);
  }
  .brand-menu-section + .brand-menu-section{
    border-top:1px solid rgba(244,236,218,.08);
  }
  .brand-menu-label{color:var(--ts-teal-300, #6FAFAE);}

  .bm-admin-select{
    background-color:rgba(244,236,218,.06);
    color:var(--ts-paper-hi, #F0EADC);
    border-color:rgba(244,236,218,.18);
  }
  .bm-admin-select option{color:#111;}

  .bm-greet-eyebrow{color:rgba(244,236,218,.62);}
  .bm-greet-name{color:var(--ts-paper-hi, #F0EADC);}
  .bm-chip{
    border-color:rgba(244,236,218,.20);
    color:var(--ts-paper-hi, #F0EADC);
  }
  .bm-chip--logout{
    border-color:var(--ts-teal-300, #6FAFAE);
    color:var(--ts-teal-300, #6FAFAE);
  }
  .bm-chip--logout:hover{
    background:var(--ts-teal-500, #1F8C8C);
    border-color:var(--ts-teal-500, #1F8C8C);
    color:#fff;
  }
  .bm-chip--acct{
    border-color:rgba(244,236,218,.22);
    color:var(--ts-paper-hi, #F0EADC);
  }
  .bm-chip--acct:hover{background:rgba(244,236,218,.06);border-color:rgba(244,236,218,.36);}
  .bm-chip--acct[aria-expanded="true"]{
    background:rgba(244,236,218,.06);
    border-color:var(--ts-teal-300, #6FAFAE);
    color:var(--ts-teal-300, #6FAFAE);
  }
  .bm-acct-panel{border-top:1px solid rgba(244,236,218,.08);}

  .brand-menu-links a{
    color:var(--ts-paper-hi, #F0EADC);
    background:rgba(244,236,218,.04);
    border:1px solid rgba(244,236,218,.10);
  }
  .brand-menu-links a:hover{
    background:rgba(31,140,140,.18);
    color:var(--ts-paper-hi, #F0EADC);
    border-color:var(--ts-teal-500, #1F8C8C);
  }
  .brand-menu-links a i{color:rgba(244,236,218,.7);}
  .brand-menu-links a:hover i{color:var(--ts-teal-300, #6FAFAE);}
  .brand-menu-links a.is-disabled,
  .brand-menu-links a.is-disabled:hover,
  .brand-menu-links a.is-disabled:hover i{
    background:transparent;
    color:rgba(244,236,218,.32);
    border-color:rgba(244,236,218,.10);
  }
  .brand-menu-links a.is-disabled i{color:rgba(244,236,218,.32);}

  .brand-menu-socials.brand-menu-socials--icons a{
    border-color:rgba(244,236,218,.12);
    background:rgba(244,236,218,.04);
    color:var(--ts-paper-hi, #F0EADC);
  }
  .brand-menu-socials.brand-menu-socials--icons a:hover{
    background:rgba(31,140,140,.18);
    border-color:var(--ts-teal-500, #1F8C8C);
    color:var(--ts-paper-hi, #F0EADC);
  }
  .brand-menu-socials.brand-menu-socials--icons a i{color:rgba(244,236,218,.72);}
  .brand-menu-socials.brand-menu-socials--icons a:hover i{color:var(--ts-teal-300, #6FAFAE);}