/* Moved verbatim from templates/_partials/therapy_bottom_nav.html (inline <style>) so it can be
   cached. Keep in sync with that template; cascade position = the
   <link> that replaced the <style> block. */
  /* ============ Design tokens (handoff README, verbatim) ============ */
  #tsbbRoot{
    --tsbb-bg: #15110D;
    --tsbb-surface: #1E1914;
    --tsbb-raise: #29221B;
    --tsbb-cream: #EFE9DC;
    --tsbb-cream-dim: #CCC5B4;
    --tsbb-muted: #948C7C;
    --tsbb-faint: #6E675A;
    --tsbb-teal: #2E837E;
    --tsbb-teal-d: #246B67;
    --tsbb-teal-bright: #5FB3AC;
    --tsbb-orange: #D27A45;
    --tsbb-orange-d: #B96834;
    --tsbb-border: rgba(239,233,220,0.10);
    --tsbb-border-strong: rgba(239,233,220,0.18);
    --tsbb-font: 'Hanken Grotesk', system-ui, sans-serif;
  }
  #tsbbRoot, #tsbbRoot *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

  /* Content must clear the bar (64px) + the FAB crest (22px above the
     bar's bottom edge → FAB top ≈86px) + breathing room. */
  body{ padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px)); }

  /* ============ Sticky bottom bar + Events FAB ============ */
  .tsbb-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:700;
    max-width:430px; margin:0 auto;
    display:flex; align-items:flex-end;
    height:calc(64px + env(safe-area-inset-bottom));
    padding:8px 8px calc(8px + env(safe-area-inset-bottom));
    background:color-mix(in srgb, var(--tsbb-surface) 94%, transparent);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-top:1px solid var(--tsbb-border);
  }
  /* color-mix fallback for older WebKit */
  @supports not (background: color-mix(in srgb, #000 94%, transparent)){
    .tsbb-bar{ background:rgba(30,25,20,0.94); }
  }
  .tsbb-tab{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
    padding:0 0 2px; color:var(--tsbb-muted); text-decoration:none;
    background:none; border:none; cursor:pointer;
    font-family:var(--tsbb-font);
    transition:color .12s, transform .08s;
  }
  .tsbb-tab:active{ transform:scale(.92); }
  .tsbb-tab svg{ width:21px; height:21px; }
  .tsbb-tab span{ font-size:8.5px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; }
  .tsbb-tab.on{ color:var(--tsbb-teal-bright); }
  .tsbb-gap{ width:76px; flex-shrink:0; }
  .tsbb-fab{
    position:absolute; left:50%; bottom:calc(env(safe-area-inset-bottom) + 22px);
    transform:translateX(-50%);
    width:64px; height:64px; border-radius:50%;
    background:#0F0C0A; color:var(--tsbb-cream); border:none; cursor:pointer;
    font-family:var(--tsbb-font); padding:0; overflow:hidden;
    box-shadow:0 12px 24px -8px rgba(46,131,126,.7), 0 0 0 5px var(--tsbb-surface);
    transition:box-shadow .2s, transform .34s cubic-bezier(.32,.72,.28,1);
  }
  .tsbb-fab:active{ transform:translateX(-50%) scale(.94); }
  /* Pre-cropped circular badge asset (handoff "Production notes") —
     plain cover fit replaces the prototype's oversize/translate crop. */
  .tsbb-fab img{
    width:100%; height:100%; object-fit:cover; display:block;
    transition:filter .25s, transform .25s;
  }
  @media (hover:hover){
    .tsbb-fab:hover{ box-shadow:0 14px 30px -8px rgba(95,179,172,.85), 0 0 0 5px var(--tsbb-surface); }
    .tsbb-fab:hover img{ transform:scale(1.08) rotate(-4deg); }
  }
  /* Active state while the Events sheet is open: the desaturation IS
     the treatment — no teal ring, nothing else. */
  body.tsbb-ev-open .tsbb-fab img{ filter:grayscale(1) brightness(.35); }
  /* T badge morphs to an X while the Events sheet is open — same close
     language as the sheets' X buttons (rotate-in, .25s). */
  .tsbb-fab-x{
    position:absolute; inset:0; margin:auto; width:24px; height:24px;
    color:var(--tsbb-cream); opacity:0; pointer-events:none;
    transform:rotate(-45deg) scale(.6);
    transition:opacity .25s, transform .25s cubic-bezier(.32,.72,.28,1);
  }
  body.tsbb-ev-open .tsbb-fab-x{ opacity:1; transform:rotate(0deg) scale(1); }

  /* ============ Sheet shell ============ */
  .tsbb-scrim{
    position:fixed; inset:0; z-index:698;
    background:rgba(8,6,4,0.55);
    opacity:0; pointer-events:none; transition:opacity .28s;
  }
  body.tsbb-ev-open .tsbb-scrim, body.tsbb-mn-open .tsbb-scrim, body.tsbb-ct-open .tsbb-scrim, body.tsbb-ar-open .tsbb-scrim{ opacity:1; pointer-events:auto; }

  .tsbb-sheet{
    position:fixed; left:0; right:0; z-index:699;
    max-width:430px; margin:0 auto;
    bottom:calc(64px + env(safe-area-inset-bottom));
    background:var(--tsbb-surface);
    border-top:1px solid var(--tsbb-border-strong);
    border-radius:20px 20px 0 0;
    box-shadow:0 -18px 50px -22px rgba(0,0,0,0.8);
    display:flex; flex-direction:column;
    transform:translateY(calc(100% + 80px + env(safe-area-inset-bottom)));
    transition:transform .34s cubic-bezier(.32,.72,.28,1);
    font-family:var(--tsbb-font); color:var(--tsbb-cream);
  }
  #tsbbEvSheet{ height:auto; max-height:min(68vh, 560px); }
  #tsbbMnSheet{ height:min(54vh, 445px); }
  #tsbbCtSheet{ height:auto; max-height:min(80vh, 640px); }
  #tsbbArSheet{ height:auto; max-height:min(76vh, 620px); }
  body.tsbb-ev-open #tsbbEvSheet, body.tsbb-mn-open #tsbbMnSheet, body.tsbb-ct-open #tsbbCtSheet, body.tsbb-ar-open #tsbbArSheet{ transform:translateY(0); }

  /* ── Scroll lock — the page behind must not scroll while a sheet is
     open (mirrors locksmith-callbar.css "Scroll lock"). Sheet interiors
     keep scrolling; overscroll-behavior stops the scroll chain; the
     scrim's touchmove preventDefault (JS below) kills iOS rubber-band. */
  body.tsbb-ev-open, body.tsbb-mn-open, body.tsbb-ct-open, body.tsbb-ar-open{ overflow:hidden; }
  .tsbb-ev-list, .tsbb-mn-list, .tsbb-ct-body, .tsbb-ar-body{ overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }

  .tsbb-handle{ position:absolute; top:8px; left:50%; transform:translateX(-50%); width:44px; height:4px; border-radius:99px; background:var(--tsbb-border-strong); }
  .tsbb-head{ display:flex; align-items:center; gap:10px; padding:22px 16px 12px; }
  .tsbb-head h3{ margin:0; font-size:18px; font-weight:800; letter-spacing:0.02em; text-transform:uppercase; }
  .tsbb-head h3 i{ font-style:normal; color:var(--tsbb-teal-bright); }
  .tsbb-count{ font-size:9.5px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--tsbb-faint); }
  .tsbb-close{ margin-left:auto; width:32px; height:32px; border-radius:8px; border:1px solid var(--tsbb-border-strong); background:var(--tsbb-raise); cursor:pointer; display:grid; place-items:center; color:var(--tsbb-cream); flex-shrink:0; padding:0; }
  .tsbb-close svg{ width:15px; height:15px; }

  /* ============ Events sheet ============ */
  .tsbb-ev-list{ flex:1; overflow-y:auto; padding:2px 16px 2px; display:flex; flex-direction:column; gap:10px; }
  .tsbb-ev-status{ padding:18px 4px 22px; font-size:10.5px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--tsbb-faint); text-align:center; }

  .tsbb-poster-ph{ background:repeating-linear-gradient(45deg, #221C16 0 10px, #1B1611 10px 20px); display:grid; place-items:center; position:relative; height:100%; overflow:hidden; }
  .tsbb-poster-ph > i{ font-style:normal; font-family:ui-monospace, monospace; font-size:8.5px; letter-spacing:0.08em; color:var(--tsbb-faint); text-transform:uppercase; }
  .tsbb-poster-ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .tsbb-price{ position:absolute; top:8px; left:8px; z-index:1; background:var(--tsbb-teal); color:#FFFFFF; border-radius:999px; padding:4px 9px; font-size:9px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; font-family:var(--tsbb-font); }
  .tsbb-price.free{ background:var(--tsbb-orange); color:#1A1208; }

  /* A — featured, full width */
  .tsbb-ev-feat{ display:grid; grid-template-columns:118px 1fr; background:var(--tsbb-raise); border:1px solid var(--tsbb-border-strong); border-radius:16px; overflow:hidden; cursor:pointer; text-align:left; font-family:var(--tsbb-font); color:var(--tsbb-cream); padding:0; text-decoration:none; }
  .tsbb-ev-feat:active{ background:#322A21; }
  .tsbb-ev-feat .fp{ position:relative; min-height:158px; }
  .tsbb-ev-feat .fm{ padding:14px 14px 13px; display:flex; flex-direction:column; gap:6px; min-width:0; }
  .tsbb-ev-feat .fpill{ align-self:flex-start; background:var(--tsbb-cream); color:#1A1610; border-radius:999px; padding:4px 10px; font-size:8.5px; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; }
  .tsbb-ev-feat .ft{ display:block; font-size:26px; font-weight:800; letter-spacing:-0.01em; line-height:1; }
  .tsbb-ev-feat .fv{ display:block; font-size:13px; font-weight:600; font-style:italic; color:var(--tsbb-teal-bright); }
  .tsbb-ev-feat .ffoot{ display:flex; align-items:flex-end; justify-content:space-between; gap:8px; margin-top:auto; }
  .tsbb-ev-feat .fdate{ display:flex; align-items:baseline; gap:6px; }
  .tsbb-ev-feat .fdate b{ font-size:24px; font-weight:800; line-height:1; }
  .tsbb-ev-feat .fdate span{ font-size:9.5px; font-weight:700; letter-spacing:0.1em; color:var(--tsbb-cream-dim); text-transform:uppercase; }
  .tsbb-ev-feat .fview{ background:var(--tsbb-orange); color:#1A1208; border-radius:999px; padding:9px 15px; font-size:9.5px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; white-space:nowrap; }

  /* B + C — two in a row */
  .tsbb-ev-pair{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .tsbb-ev-mini{ background:var(--tsbb-raise); border:1px solid var(--tsbb-border); border-radius:14px; overflow:hidden; cursor:pointer; text-align:left; font-family:var(--tsbb-font); color:var(--tsbb-cream); padding:0; display:flex; flex-direction:column; text-decoration:none; }
  .tsbb-ev-mini:active{ background:#322A21; }
  .tsbb-ev-mini .mp{ position:relative; height:112px; flex-shrink:0; }
  .tsbb-ev-mini .mm{ padding:10px 12px 12px; }
  .tsbb-ev-mini .mt{ display:block; font-size:14.5px; font-weight:800; letter-spacing:0.01em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tsbb-ev-mini .mv{ display:block; font-size:9px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--tsbb-muted); margin-top:4px; }
  .tsbb-ev-foot{ padding:10px 16px 18px; }
  .tsbb-btn-all{
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; background:var(--tsbb-cream); color:#1A1610; border:none; border-radius:999px;
    padding:16px 14px; font-family:var(--tsbb-font); font-size:12px; font-weight:800;
    letter-spacing:0.16em; text-transform:uppercase; cursor:pointer; text-decoration:none;
    transition:transform .08s;
  }
  .tsbb-btn-all:active{ transform:scale(.97); background:#DDD5C4; }
  .tsbb-btn-all svg{ width:15px; height:15px; }

  /* ============ Artists sheet ============ */
  .tsbb-ar-body{ flex:1; overflow-y:auto; padding:2px 16px 6px; display:flex; flex-direction:column; gap:16px; }
  .tsbb-ar-status{ padding:18px 4px 22px; font-size:10.5px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--tsbb-faint); text-align:center; }
  .tsbb-ar-label{ display:flex; align-items:center; gap:10px; font-size:9px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--tsbb-faint); }
  .tsbb-ar-label::after{ content:""; flex:1; height:1px; background:var(--tsbb-border); }
  /* 5-up avatar grid — two labeled sections (Residents · Artists),
     capped at 10 tiles (two rows) each by the JS renderer. */
  .tsbb-ar-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:12px 8px; margin-top:10px; }
  .tsbb-ar-tile{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; text-decoration:none; color:var(--tsbb-cream); font-family:var(--tsbb-font); transition:transform .08s; }
  .tsbb-ar-tile:active{ transform:scale(.94); }
  /* Striped placeholder circle = the handoff's .aa avatar treatment;
     a real photo (CF `avatar` variant) covers it edge to edge. */
  .tsbb-ar-tile .av{ width:52px; height:52px; border-radius:50%; overflow:hidden; display:grid; place-items:center; font-size:13px; font-weight:800; letter-spacing:0.04em; background:repeating-linear-gradient(45deg, #2E2620 0 6px, #261F19 6px 12px); color:var(--tsbb-cream-dim); border:1px solid var(--tsbb-border-strong); }
  .tsbb-ar-tile .av img{ width:100%; height:100%; object-fit:cover; display:block; }
  .tsbb-ar-tile .nm{ max-width:100%; font-size:8.5px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--tsbb-cream-dim); }
  .tsbb-ar-foot{ padding:10px 16px 18px; }

  /* ============ Menu sheet ============ */
  .tsbb-mn-list{ flex:1; overflow-y:auto; padding:2px 16px 18px; display:flex; flex-direction:column; gap:7px; }
  .tsbb-mn-row{ display:flex; align-items:center; gap:12px; background:var(--tsbb-raise); border:1px solid var(--tsbb-border); border-radius:13px; padding:14px; cursor:pointer; text-align:left; font-family:var(--tsbb-font); color:var(--tsbb-cream); text-decoration:none; width:100%; }
  .tsbb-mn-row:active{ background:#322A21; }
  .tsbb-mn-row .mi{ width:34px; height:34px; border-radius:9px; background:rgba(95,179,172,0.1); display:grid; place-items:center; color:var(--tsbb-teal-bright); flex-shrink:0; }
  .tsbb-mn-row .mi svg{ width:16px; height:16px; }
  .tsbb-mn-row b{ flex:1; min-width:0; font-size:13px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tsbb-mn-row b small{ display:block; font-size:9px; font-weight:700; letter-spacing:0.14em; color:var(--tsbb-muted); margin-top:3px; }
  .tsbb-mn-row .mchev{ color:var(--tsbb-faint); flex-shrink:0; }
  .tsbb-mn-row .mchev svg{ width:15px; height:15px; transition:transform .2s; }

  /* Collapsible groups in the Menu sheet — the signed-in account
     dropdown (My account / Edit profile / Sign out) and the
     masteradmin Admin group share one treatment. */
  .tsbb-admin-toggle, .tsbb-acct-toggle{ background:var(--tsbb-raise); border:1px solid var(--tsbb-border-strong); }
  .tsbb-admin-toggle[aria-expanded="true"] .mchev svg,
  .tsbb-acct-toggle[aria-expanded="true"] .mchev svg{ transform:rotate(90deg); }
  .tsbb-admin-links, .tsbb-acct-links{ display:flex; flex-direction:column; gap:5px; padding:2px 0 0 12px; }
  .tsbb-admin-links[hidden], .tsbb-acct-links[hidden]{ display:none; }
  .tsbb-admin-links a, .tsbb-acct-links a{
    display:flex; align-items:center; gap:10px;
    background:rgba(239,233,220,0.03); border:1px solid var(--tsbb-border);
    border-radius:11px; padding:11px 13px; color:var(--tsbb-cream-dim);
    text-decoration:none; font-size:11.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  }
  .tsbb-admin-links a:active, .tsbb-acct-links a:active{ background:#322A21; }

  /* ============ Contact sheet ============ */
  .tsbb-ct-body{ flex:1; overflow-y:auto; padding:2px 16px 18px; display:flex; flex-direction:column; gap:12px; }
  .tsbb-ct-mail{
    display:flex; align-items:center; gap:12px;
    background:var(--tsbb-raise); border:1px solid var(--tsbb-border-strong);
    border-radius:13px; padding:14px; text-decoration:none; color:var(--tsbb-cream);
    font-family:var(--tsbb-font);
  }
  .tsbb-ct-mail:active{ background:#322A21; }
  .tsbb-ct-mail .mi{ width:34px; height:34px; border-radius:9px; background:rgba(95,179,172,0.1); display:grid; place-items:center; color:var(--tsbb-teal-bright); flex-shrink:0; }
  .tsbb-ct-mail .mi svg{ width:16px; height:16px; }
  .tsbb-ct-mail b{
    flex:1; min-width:0; font-size:14.5px; font-weight:800; letter-spacing:0.01em;
    color:var(--tsbb-teal-bright); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .tsbb-ct-mail b small{ display:block; font-size:9px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--tsbb-muted); margin-top:3px; }
  .tsbb-ct-form{ display:flex; flex-direction:column; gap:10px; }
  .tsbb-ct-form label{
    display:flex; flex-direction:column; gap:5px;
    font-size:9px; font-weight:800; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--tsbb-muted); font-family:var(--tsbb-font);
  }
  .tsbb-ct-form input, .tsbb-ct-form select, .tsbb-ct-form textarea{
    width:100%; background:var(--tsbb-bg); color:var(--tsbb-cream);
    border:1px solid var(--tsbb-border-strong); border-radius:11px;
    padding:12px 13px; font-family:var(--tsbb-font); font-size:14px; font-weight:600;
  }
  .tsbb-ct-form input::placeholder, .tsbb-ct-form textarea::placeholder{ color:var(--tsbb-faint); font-weight:500; }
  .tsbb-ct-form input:focus, .tsbb-ct-form select:focus, .tsbb-ct-form textarea:focus{
    outline:none; border-color:var(--tsbb-teal-bright);
  }
  .tsbb-ct-form select{
    appearance:none; -webkit-appearance:none; cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23948C7C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 12px center; background-size:15px;
    padding-right:36px;
  }
  .tsbb-ct-form textarea{ min-height:96px; resize:vertical; }
  /* Honeypot — visually removed, still in the form for bots to fill. */
  .tsbb-hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; opacity:0; pointer-events:none; }
  .tsbb-ct-send{
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; background:var(--tsbb-teal); color:#FFFFFF; border:none; border-radius:999px;
    padding:15px 14px; margin-top:2px; font-family:var(--tsbb-font); font-size:12px; font-weight:800;
    letter-spacing:0.16em; text-transform:uppercase; cursor:pointer; transition:transform .08s;
  }
  .tsbb-ct-send:active{ transform:scale(.97); background:var(--tsbb-teal-d); }
  .tsbb-ct-send[disabled]{ opacity:.55; cursor:default; }
  .tsbb-ct-send svg{ width:15px; height:15px; }
  /* Pending-state spinner — swapped in by JS while the contact POST is in flight. */
  .tsbb-ct-send .tsbb-ct-spin{ width:16px; height:16px; animation:tsbb-spin .7s linear infinite; }
  @keyframes tsbb-spin{ to{ transform:rotate(360deg); } }
  @keyframes tsbb-pulse{ 0%, 100%{ opacity:1; } 50%{ opacity:.45; } }

  /* Mobile-only — portal_topbar / header nav takes over from 768px. */
  @media (min-width: 768px){
    .tsbb-bar, .tsbb-sheet, .tsbb-scrim{ display:none !important; }
    body{ padding-bottom:0; }
  }

  @media (prefers-reduced-motion: reduce){
    .tsbb-sheet, .tsbb-fab, .tsbb-fab img, .tsbb-fab-x, .tsbb-scrim, .tsbb-tab{ transition:none; }
    /* No rotation — pulse opacity instead so pending state stays perceivable. */
    .tsbb-ct-send .tsbb-ct-spin{ animation:tsbb-pulse 1.2s ease-in-out infinite; }
  }