/* =====================================================================
   UX layer (Fable 5.2 edition). Works with or without the motion layer.
   Active only when ux.js adds the "ux" class to <html>.
   ===================================================================== */

/* ---------- Coaching tabs ---------- */
.ux-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:28px 0 18px; width:100%; }
.ux-tab { flex:1 1 180px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:14px 18px 12px; min-height:64px; background:#101923; border:1px solid #354352; border-bottom:3px solid #354352; color:#acb8c5; cursor:pointer; text-align:left; clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%); transition:background .18s, color .18s, border-color .18s; }
.ux-tab small { font:12px var(--font-mono); letter-spacing:.12em; }
.ux-tab b { font:600 26px/1 var(--font-display); letter-spacing:.03em; color:#f1eee8; }
.ux-tab:hover { background:#17222d; border-color:#526171; }
.ux-tab[aria-selected="true"] { background:#1c2935; border-color:var(--red); color:var(--red-pale); }
.ux-tab[aria-selected="true"] b { color:#fff; }
.ux-tab:focus-visible { outline:3px solid var(--teal); outline-offset:2px; }
html.ux .coaching-lab .coaching-services.ux-tabbed { grid-template-columns:1fr; }
html.ux .ux-tabbed > .service-card[hidden] { display:none !important; }
@media (min-width:1000px) {
  html.ux .coaching-lab .ux-tabbed > .service-card { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); column-gap:34px; align-content:start; padding:0 34px 0 0; }
  html.ux .coaching-lab .ux-tabbed > .service-card > * { grid-column:2; }
  html.ux .coaching-lab .ux-tabbed > .service-card > .service-art { grid-column:1; grid-row:1 / span 12; margin:0 !important; border-radius:0; border-right:1px solid #354352; }
  html.ux .coaching-lab .ux-tabbed > .service-card > .card-header { margin-top:34px; }
  html.ux .coaching-lab .ux-tabbed > .service-card > .session-link { margin-bottom:34px; }
}
@media (max-width:600px) {
  .ux-tabs { display:grid; grid-template-columns:1fr 1fr; }
  .ux-tab { min-height:58px; padding:12px; }
  .ux-tab b { font-size:21px; }
  .ux-tab small { letter-spacing:.06em; }
}

/* ---------- Session request builder ---------- */
.ux-builder { margin:22px 0; padding:20px; background:#101a24; border:1px solid var(--border); border-left:3px solid var(--red); }
.ux-builder h4 { margin:0 0 4px; font:600 24px/1 var(--font-display); letter-spacing:.04em; color:#f1eee8; }
.ux-builder > p { margin:0 0 16px; font-size:14px; color:#acb8c5; }
.ux-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ux-fields label { display:flex; flex-direction:column; gap:6px; font:12px var(--font-mono); letter-spacing:.1em; color:#acb8c5; text-transform:uppercase; }
.ux-fields .wide { grid-column:1 / -1; }
.ux-fields select, .ux-fields input { min-height:44px; padding:8px 12px; background:#0d141c; color:#f1eee8; border:1px solid #526171; border-radius:3px; font:15px var(--font-body); text-transform:none; letter-spacing:0; width:100%; box-sizing:border-box; }
.ux-fields select:focus-visible, .ux-fields input:focus-visible { outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal); }
.ux-preview { margin:14px 0; padding:14px 16px; background:#0d141c; border:1px dashed #526171; font:13px/1.65 var(--font-mono); color:#ced6de; white-space:pre-wrap; overflow-wrap:anywhere; }
.ux-builder-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.ux-builder-actions .btn-card { min-height:44px; }
.ux-builder-actions .ux-go { background:var(--red); border-color:var(--red); color:#0a1017; font-weight:700; }
.ux-builder-actions small { font:12px var(--font-mono); color:#acb8c5; }
@media (max-width:520px) { .ux-fields { grid-template-columns:1fr; } }

/* ---------- Mobile menu ---------- */
.ux-menu-btn, .ux-nav-book { display:none; }
@media (max-width:900px) {
  html.ux .glitch-nav { flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:space-between; position:sticky; top:0; z-index:90; background:#0a1017fa; padding-block:10px !important; }
  html.ux .glitch-nav .nav-links { display:none !important; }
  html.ux .glitch-nav .logo { order:1; }
  html.ux .ux-nav-right { order:2; }
  html.ux .glitch-nav .logo { text-align:left; align-self:center; font-size:1.5rem !important; }
  html.ux .glitch-nav::after { display:none; }
  html.ux .ux-nav-right { display:flex; align-items:center; gap:8px; margin-left:auto; }
  html.ux .ux-nav-book { display:inline-flex; align-items:center; min-height:44px; padding:0 14px; background:var(--red); color:#0a1017; font:700 13px var(--font-mono); letter-spacing:.08em; text-decoration:none; clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%); }
  html.ux .ux-menu-btn { display:grid; place-items:center; width:44px; height:44px; background:#17222d; border:1px solid #526171; border-radius:3px; color:#f1eee8; cursor:pointer; }
  html.ux .ux-menu-btn i, html.ux .ux-menu-btn i::before, html.ux .ux-menu-btn i::after { display:block; width:20px; height:2px; background:currentColor; content:""; }
  html.ux .ux-menu-btn i { position:relative; }
  html.ux .ux-menu-btn i::before { position:absolute; top:-6px; }
  html.ux .ux-menu-btn i::after { position:absolute; top:6px; width:13px; }
  html.ux main > section { scroll-margin-top:70px; }
}
#ux-menu { width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; padding:20px 6% 28px; border:0; background:#090f16; color:#f1eee8; box-sizing:border-box; overflow:auto; }
#ux-menu::backdrop { background:#090f16; }
#ux-menu[open] { display:flex; flex-direction:column; }
#ux-menu .ux-menu-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; font:12px var(--font-mono); letter-spacing:.2em; color:#acb8c5; }
#ux-menu .ux-close { min-height:44px; padding:0 16px; background:#17222d; color:#fff; border:1px solid #526171; border-radius:3px; font:13px var(--font-mono); cursor:pointer; }
#ux-menu ol { list-style:none; margin:0; padding:0; flex:1; }
#ux-menu ol a { display:flex; align-items:baseline; gap:14px; padding:11px 0; border-bottom:1px solid #ffffff14; color:#f1eee8; text-decoration:none; font:600 30px/1.05 var(--font-display); letter-spacing:.03em; }
#ux-menu ol a b { font:400 12px var(--font-mono); color:var(--red); letter-spacing:.1em; }
#ux-menu ol a:active { color:var(--red); }
#ux-menu .btn-primary { margin-top:20px; display:flex; justify-content:center; min-height:52px; align-items:center; }
html.fx #ux-menu[open] ol li { animation:fxUp .5s var(--ease-out) both; animation-delay:calc(var(--i)*40ms + 60ms); }

/* ---------- Sticky booking bar (phones) ---------- */
.ux-cta { display:none; }
@media (max-width:768px) {
  html.ux .ux-cta { position:fixed; left:0; right:0; bottom:0; z-index:80; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px)); background:#0a1017f5; border-top:1px solid var(--red); translate:0 110%; transition:translate .35s cubic-bezier(.16,1,.3,1); }
  html.ux .ux-cta.on { translate:0 0; }
  html.ux .ux-cta span { font:12px/1.4 var(--font-mono); letter-spacing:.06em; color:#ced6de; }
  html.ux .ux-cta span b { display:block; font:600 20px/1 var(--font-display); letter-spacing:.04em; color:#fff; }
  html.ux .ux-cta a { flex:none; display:inline-flex; align-items:center; min-height:44px; padding:0 20px; background:var(--red); color:#0a1017; font:700 14px var(--font-mono); letter-spacing:.08em; text-decoration:none; clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%); }
  html.ux body.ux-cta-on .music-controller, html.ux body.ux-cta-on #back-to-top { bottom:calc(78px + env(safe-area-inset-bottom,0px)); transition:bottom .35s; }
  html.ux body.ux-cta-on .copy-status { bottom:150px; }
}