/*!
 * TaLoad Creator Studio Shell — v3.3.44
 * ---------------------------------------------------------------------------
 * Separate stylesheet, loaded after taload.css. Kept out of the 20k-line
 * append-ordered file on purpose: this is new surface area, so it gets a clean
 * token-driven file that can be deleted wholesale to revert.
 *
 * Every rule is scoped under `.fai-tal-creator-studio.is-studio-shell`, a class
 * that only exists once the shell JS has successfully initialised. If the JS
 * bails, none of this applies and the studio renders exactly as v3.3.43.
 *
 * Light and Dark both derive from one token set. The dark values are the
 * defaults because Creator Studio has always been dark; light is opted into
 * via the existing TaLoad theme contract, so no creator's current appearance
 * changes on upgrade.
 */

.fai-tal-creator-studio.is-studio-shell{
  --studio-bg:            #0b0e14;
  --studio-surface:       rgba(255,255,255,.038);
  --studio-surface-hover: rgba(255,255,255,.068);
  --studio-surface-solid: #12161f;
  --studio-line:          rgba(255,255,255,.09);
  --studio-line-strong:   rgba(255,255,255,.17);
  --studio-ink:           #ffffff;
  --studio-ink-soft:      rgba(255,255,255,.66);
  --studio-ink-faint:     rgba(255,255,255,.44);
  --studio-accent:        #fbeb14;
  --studio-accent-ink:    #090b10;
  --studio-nav-w:         236px;
  --studio-radius:        18px;
  --studio-gap:           clamp(14px, 2vw, 22px);
}

/* Light theme. Hooks into the existing TaLoad Light/Dark contract rather than
   introducing a competing switch — the same body/root markers the rest of the
   app already sets. Only tokens are reassigned; no layout differs. */
/* v3.3.46: superseded by the measured `.is-theme-light` class defined lower in
   this file. Retained only as a no-JS fallback for hosts that do set these
   hooks; the measured class always wins because it is declared later. */
html[data-tal-theme="light"] .fai-tal-creator-studio.is-studio-shell:not(.is-theme-dark),
body.fai-tal-theme-light .fai-tal-creator-studio.is-studio-shell:not(.is-theme-dark){
  --studio-bg:            #f6f7fa;
  --studio-surface:       #ffffff;
  --studio-surface-hover: #f1f3f8;
  --studio-surface-solid: #ffffff;
  --studio-line:          #e3e7ee;
  --studio-line-strong:   #cfd6e2;
  --studio-ink:           #101828;
  --studio-ink-soft:      #4a5567;
  --studio-ink-faint:     #737f92;
  --studio-accent:        #1c1f26;
  --studio-accent-ink:    #ffffff;
}

/* ==========================================================================
   Shell layout
   ========================================================================== */
.fai-tal-studio-shell{
  display:grid;
  grid-template-columns:var(--studio-nav-w) minmax(0,1fr);
  gap:var(--studio-gap);
  align-items:start;
  width:100%;
  min-width:0;
  margin:var(--studio-gap) 0 0;
}

/* --------------------------------------------------------------------------
   Sidebar — desktop
   -------------------------------------------------------------------------- */
.fai-tal-studio-shell__nav{
  position:sticky;
  top:var(--studio-gap);
  min-width:0;
  padding:10px;
  border:1px solid var(--studio-line);
  border-radius:var(--studio-radius);
  background:var(--studio-surface);
}
.fai-tal-studio-shell__nav-list{
  display:grid;
  gap:2px;
}
.fai-tal-studio-shell__nav-item{
  position:relative;
  display:grid;
  grid-template-columns:22px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  width:100%;
  min-height:44px;
  padding:9px 11px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:var(--studio-ink-soft);
  font:inherit;
  font-size:14px;
  font-weight:600;
  text-align:left;
  cursor:pointer;
  transition:background .16s ease, color .16s ease;
}
.fai-tal-studio-shell__nav-item svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.fai-tal-studio-shell__nav-item:hover{
  background:var(--studio-surface-hover);
  color:var(--studio-ink);
}
.fai-tal-studio-shell__nav-item.is-active{
  background:var(--studio-surface-hover);
  color:var(--studio-ink);
}
/* Active state is not colour-only: an accent bar marks the current section. */
.fai-tal-studio-shell__nav-item.is-active::before{
  content:"";
  position:absolute;
  top:11px;
  bottom:11px;
  left:0;
  width:3px;
  border-radius:0 3px 3px 0;
  background:var(--studio-accent);
}
.fai-tal-studio-shell__nav-item:focus-visible{
  outline:2px solid var(--studio-accent);
  outline-offset:2px;
}
.fai-tal-studio-shell__badge{
  display:grid;
  place-items:center;
  min-width:19px;
  height:19px;
  padding:0 5px;
  border-radius:999px;
  background:var(--studio-accent);
  color:var(--studio-accent-ink);
  font-size:11px;
  font-style:normal;
  font-weight:800;
  line-height:1;
}
.fai-tal-studio-shell__badge[hidden]{display:none}

/* --------------------------------------------------------------------------
   Main column
   -------------------------------------------------------------------------- */
.fai-tal-studio-shell__main{
  min-width:0;
}
.fai-tal-studio-shell__view-head{
  padding:0 2px 14px;
  border-bottom:1px solid var(--studio-line);
  margin-bottom:var(--studio-gap);
}
.fai-tal-studio-shell__view-title h2{
  margin:0;
  color:var(--studio-ink);
  font-size:clamp(24px,3vw,32px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.03em;
}
.fai-tal-studio-shell__view-title h2:focus{outline:none}
.fai-tal-studio-shell__view-title h2:focus-visible{
  outline:2px solid var(--studio-accent);
  outline-offset:4px;
  border-radius:4px;
}
.fai-tal-studio-shell__view-title p{
  margin:5px 0 0;
  color:var(--studio-ink-faint);
  font-size:14px;
  line-height:1.5;
}
.fai-tal-studio-shell__viewport{min-width:0}
.fai-tal-studio-shell__view{min-width:0}
/* v3.3.47 — THE navigation bug.
   `.is-studio-shell ...__view[data-tal-shell-view="home"]{display:grid}` scored
   (0,3,0) against this rule's (0,2,0), so the Home view stayed displayed even
   while hidden. Every tab therefore rendered Home's content under a new title,
   which is exactly what was reported. `[hidden]` is now authoritative and
   nothing may outrank it. Do not add a `display` rule for a view without
   excluding [hidden]. */
.fai-tal-studio-shell__view[hidden],
.is-studio-shell .fai-tal-studio-shell__view[hidden],
.fai-tal-creator-studio.is-studio-shell .fai-tal-studio-shell__view[hidden]{
  display:none!important;
}
.fai-tal-studio-shell__view>*{min-width:0;max-width:100%}

/* --------------------------------------------------------------------------
   Sections inside a view.
   The <details> element is retained for deep links, but its accordion chrome is
   redundant once each view shows one area — so the summary becomes a quiet
   section header rather than a control.
   -------------------------------------------------------------------------- */
.is-studio-shell .fai-tal-studio-shell__view .fai-tal-studio-accordion{
  margin:0 0 var(--studio-gap);
  border:1px solid var(--studio-line);
  border-radius:var(--studio-radius);
  background:var(--studio-surface);
  overflow:visible;
}
.is-studio-shell .fai-tal-studio-shell__view .fai-tal-studio-accordion>summary{
  cursor:pointer;
  list-style:none;
}
.is-studio-shell .fai-tal-studio-shell__view .fai-tal-studio-accordion>summary::-webkit-details-marker{display:none}
.is-studio-shell .fai-tal-studio-shell__view .fai-tal-studio-accordion__chevron{display:none}
.is-studio-shell .fai-tal-studio-shell__view .fai-tal-studio-accordion__status{pointer-events:auto}

/* A single section per view needs no repeated header — the view head already
   names it. Two or more keep their headers so the grouping stays legible. */
/* v3.3.48 — REMOVED. This hid the summary of a lone accordion. With the panel
   also closed, Bookings and Insights rendered as a heading over empty space.
   Sections are now genuinely opened in JS, and every summary stays visible. */

/* ==========================================================================
   Home dashboard
   ========================================================================== */
.is-studio-shell .fai-tal-studio-shell__view[data-tal-shell-view="home"]:not([hidden]){
  display:grid;
  gap:var(--studio-gap);
}
.is-studio-shell .fai-tal-studio-simple__cards{
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.is-studio-shell .fai-tal-studio-simple__cards button{
  min-height:88px;
  border-radius:14px;
}

/* ==========================================================================
   Mobile — the sidebar becomes a bottom tab bar
   ========================================================================== */
@media (max-width:900px){
  .fai-tal-studio-shell{
    grid-template-columns:minmax(0,1fr);
    gap:0;
  }
  .fai-tal-studio-shell__nav{
    position:fixed;
    z-index:80;
    right:0;
    bottom:0;
    left:0;
    top:auto;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    border:0;
    border-top:1px solid var(--studio-line-strong);
    border-radius:0;
    background:var(--studio-surface-solid);
    box-shadow:0 -8px 28px rgba(0,0,0,.22);
  }
  .fai-tal-studio-shell__nav-list{
    grid-auto-flow:column;
    grid-auto-columns:minmax(0,1fr);
    gap:2px;
  }
  .fai-tal-studio-shell__nav-item{
    grid-template-columns:minmax(0,1fr);
    justify-items:center;
    gap:3px;
    min-height:52px;
    padding:6px 2px;
    font-size:10.5px;
    font-weight:700;
    text-align:center;
  }
  .fai-tal-studio-shell__nav-item svg{width:22px;height:22px}
  .fai-tal-studio-shell__nav-item span{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  /* Tab bars mark the active item along the top edge, not the side. */
  .fai-tal-studio-shell__nav-item.is-active::before{
    top:0;
    right:auto;
    bottom:auto;
    left:50%;
    width:22px;
    height:3px;
    border-radius:0 0 3px 3px;
    transform:translateX(-50%);
  }
  .fai-tal-studio-shell__badge{
    position:absolute;
    top:3px;
    left:calc(50% + 7px);
  }
  /* Reserve room so the tab bar never covers the last control in a view. */
  .fai-tal-creator-studio.is-studio-shell{
    padding-bottom:calc(74px + env(safe-area-inset-bottom));
  }
  .fai-tal-studio-shell__view-head{
    padding-bottom:11px;
    margin-bottom:14px;
  }
}

/* Very narrow / fold: six tabs will not fit legibly, so labels drop and the
   accessible name is carried by aria-label on the button instead. */
@media (max-width:400px){
  .fai-tal-studio-shell__nav-item span{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }
  .fai-tal-studio-shell__nav-item{min-height:48px}
  .fai-tal-studio-shell__nav-item svg{width:23px;height:23px}
  .fai-tal-studio-shell__badge{left:calc(50% + 5px)}
}

/* Ultra-wide: a wider rail and a capped content measure. */
@media (min-width:1700px){
  .fai-tal-creator-studio.is-studio-shell{--studio-nav-w:262px}
  .fai-tal-studio-shell{
    max-width:1480px;
    margin-inline:auto;
  }
}

/* ==========================================================================
   Video FAQ editor (Creator Studio)
   ========================================================================== */
.fai-tal-faq-editor{
  display:grid;
  gap:12px;
  margin-top:14px;
  padding:clamp(13px,2vw,18px);
  border:1px solid var(--studio-line);
  border-radius:16px;
  background:var(--studio-surface);
}
.fai-tal-faq-editor__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.fai-tal-faq-editor__head h4{
  margin:0 0 4px;
  color:var(--studio-ink);
  font-size:16px;
  font-weight:700;
}
.fai-tal-faq-editor__head p{
  max-width:62ch;
  margin:0;
  color:var(--studio-ink-faint);
  font-size:12.5px;
  line-height:1.55;
}
.fai-tal-faq-row{
  display:grid;
  gap:8px;
  padding:12px;
  border:1px solid var(--studio-line);
  border-radius:13px;
  background:var(--studio-surface-hover);
}
.fai-tal-faq-row label{display:grid;gap:5px}
.fai-tal-faq-row label>span{
  color:var(--studio-ink-faint);
  font-size:11px;
  font-weight:700;
}
.fai-tal-faq-row input,
.fai-tal-faq-row textarea{
  width:100%;
  min-height:42px;
  padding:9px 11px;
  border:1px solid var(--studio-line-strong);
  border-radius:10px;
  background:var(--studio-surface-solid);
  color:var(--studio-ink);
  font:inherit;
  font-size:14px;
}
.fai-tal-faq-row textarea{min-height:88px;line-height:1.55;resize:vertical}
.fai-tal-faq-row input:focus-visible,
.fai-tal-faq-row textarea:focus-visible{
  outline:2px solid var(--studio-accent);
  outline-offset:1px;
}
.fai-tal-faq-row__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.fai-tal-faq-row__count{
  color:var(--studio-ink-faint);
  font-size:11px;
  font-variant-numeric:tabular-nums;
}
.fai-tal-faq-row__count.is-over{color:#ff9d9d;font-weight:700}
.fai-tal-faq-hint{
  display:grid;
  gap:4px;
  margin:0;
  padding:9px 11px;
  border-left:3px solid var(--studio-accent);
  border-radius:0;
  background:var(--studio-surface-hover);
  color:var(--studio-ink-soft);
  font-size:12px;
  line-height:1.5;
  list-style:none;
}
.fai-tal-faq-editor__actions{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
}
.fai-tal-faq-editor__status{
  margin:0;
  color:var(--studio-ink-faint);
  font-size:12px;
}
.fai-tal-faq-editor__status.is-error{color:#ff9d9d}
.fai-tal-faq-editor__status.is-success{color:#85efb7}
@media (max-width:520px){
  .fai-tal-faq-editor__actions>button{width:100%}
}

/* ==========================================================================
   Public video FAQ block
   ========================================================================== */
.fai-tal-video-faqs{
  margin:clamp(26px,4vw,40px) 0 0;
}
.fai-tal-video-faqs__heading{
  margin:0 0 14px;
  font-size:clamp(21px,3vw,28px);
  letter-spacing:-.03em;
}
.fai-tal-video-faqs__list{display:grid;gap:9px}
.fai-tal-video-faq{
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(255,255,255,.04);
  overflow:hidden;
}
.fai-tal-video-faq__q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:52px;
  padding:13px 16px;
  color:#fff;
  font-size:15.5px;
  font-weight:650;
  line-height:1.4;
  cursor:pointer;
  list-style:none;
}
.fai-tal-video-faq__q::-webkit-details-marker{display:none}
.fai-tal-video-faq__q:hover{background:rgba(255,255,255,.045)}
.fai-tal-video-faq__q:focus-visible{
  outline:2px solid #fbeb14;
  outline-offset:-2px;
}
.fai-tal-video-faq__q i{
  position:relative;
  flex:0 0 14px;
  width:14px;
  height:14px;
}
.fai-tal-video-faq__q i::before,
.fai-tal-video-faq__q i::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:13px;
  height:1.8px;
  border-radius:2px;
  background:currentColor;
  transform:translate(-50%,-50%);
  transition:transform .18s ease, opacity .18s ease;
}
.fai-tal-video-faq__q i::after{transform:translate(-50%,-50%) rotate(90deg)}
.fai-tal-video-faq[open] .fai-tal-video-faq__q i::after{
  transform:translate(-50%,-50%) rotate(0deg);
  opacity:0;
}
.fai-tal-video-faq__a{
  padding:0 16px 15px;
  color:rgba(255,255,255,.74);
  font-size:14.5px;
  line-height:1.65;
}
.fai-tal-video-faq__a p{margin:0 0 10px}
.fai-tal-video-faq__a p:last-child{margin-bottom:0}

/* Light surfaces on the public page (profile presets 2 and the light theme). */
html[data-tal-theme="light"] .fai-tal-video-faq,
body.fai-tal-theme-light .fai-tal-video-faq{
  border-color:#e3e7ee;
  background:#fff;
}
html[data-tal-theme="light"] .fai-tal-video-faq__q,
body.fai-tal-theme-light .fai-tal-video-faq__q{color:#101828}
html[data-tal-theme="light"] .fai-tal-video-faq__a,
body.fai-tal-theme-light .fai-tal-video-faq__a{color:#4a5567}

@media (prefers-reduced-motion:reduce){
  .fai-tal-studio-shell__nav-item,
  .fai-tal-video-faq__q i::before,
  .fai-tal-video-faq__q i::after{transition:none}
}

@media (forced-colors:active){
  .fai-tal-studio-shell__nav-item.is-active::before{background:Highlight}
  .fai-tal-studio-shell__badge{
    forced-color-adjust:none;
    background:Highlight;
    color:HighlightText;
  }
  .fai-tal-video-faq__q i::before,
  .fai-tal-video-faq__q i::after{background:ButtonText}
}


/* ==========================================================================
   v3.3.45 — corrections from device testing
   --------------------------------------------------------------------------
   Reported against the v3.3.44 build on Android Chrome and macOS Chrome:

     1. Studio nav rendered with pink borders, full-width yellow badge bars and
        overlapping labels. Root cause: taload.css declares button styling with
        `!important` throughout, so the plain declarations in this file lost the
        cascade. Every property the base sheet owns is now reclaimed explicitly.
     2. Bottom tab labels did not fit at 360px and collided with the badges.
     3. Reel Block/Report moved into an overflow menu (markup in taload.js).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Studio navigation — reclaim the cascade
   --------------------------------------------------------------------------
   Scoped through .fai-tal-creator-studio so these never leak to other buttons.
   `!important` is used only on properties the base sheet already claims with
   `!important`; everything else stays a plain declaration.
   -------------------------------------------------------------------------- */
.fai-tal-creator-studio.is-studio-shell .fai-tal-studio-shell__nav-item{
  display:grid!important;
  grid-template-columns:22px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:11px!important;
  width:100%!important;
  min-height:44px!important;
  margin:0!important;
  padding:9px 11px!important;
  border:1px solid transparent!important;
  border-radius:12px!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  color:var(--studio-ink-soft)!important;
  font-family:inherit!important;
  font-size:14px!important;
  font-weight:600!important;
  letter-spacing:0!important;
  text-align:left!important;
  text-transform:none!important;
  transform:none!important;
}
.fai-tal-creator-studio.is-studio-shell .fai-tal-studio-shell__nav-item:hover,
.fai-tal-creator-studio.is-studio-shell .fai-tal-studio-shell__nav-item.is-active{
  background:var(--studio-surface-hover)!important;
  border-color:var(--studio-line)!important;
  color:var(--studio-ink)!important;
  transform:none!important;
}
.fai-tal-creator-studio.is-studio-shell .fai-tal-studio-shell__nav-item svg{
  width:20px!important;
  height:20px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.7!important;
}
.fai-tal-creator-studio.is-studio-shell .fai-tal-studio-shell__nav-item>span{
  display:block!important;
  min-width:0!important;
  overflow:hidden!important;
  color:inherit!important;
  font:inherit!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

/* Badge: a compact count chip, not a full-width bar. */
.fai-tal-creator-studio.is-studio-shell .fai-tal-studio-shell__badge{
  display:grid!important;
  place-items:center!important;
  width:auto!important;
  min-width:19px!important;
  height:19px!important;
  margin:0!important;
  padding:0 5px!important;
  border:0!important;
  border-radius:999px!important;
  background:var(--studio-accent)!important;
  color:var(--studio-accent-ink)!important;
  font-size:11px!important;
  font-style:normal!important;
  font-weight:800!important;
  line-height:1!important;
}
.fai-tal-creator-studio.is-studio-shell .fai-tal-studio-shell__badge[hidden]{display:none!important}

/* Light theme: the accent chip becomes ink-on-neutral. A saturated yellow chip
   on white had insufficient contrast and read as a warning rather than a count. */
html[data-tal-theme="light"] .fai-tal-creator-studio.is-studio-shell .fai-tal-studio-shell__badge,
body.fai-tal-theme-light .fai-tal-creator-studio.is-studio-shell .fai-tal-studio-shell__badge{
  background:#eef1f6!important;
  color:#3d4757!important;
}
html[data-tal-theme="light"] .fai-tal-creator-studio.is-studio-shell .fai-tal-studio-shell__nav-item.is-active,
body.fai-tal-theme-light .fai-tal-creator-studio.is-studio-shell .fai-tal-studio-shell__nav-item.is-active{
  background:#eef1f6!important;
  border-color:#dde3ec!important;
}
html[data-tal-theme="light"] .fai-tal-creator-studio.is-studio-shell .fai-tal-studio-shell__nav-item.is-active::before,
body.fai-tal-theme-light .fai-tal-creator-studio.is-studio-shell .fai-tal-studio-shell__nav-item.is-active::before{
  background:#101828;
}

/* --------------------------------------------------------------------------
   2. Mobile tab bar that actually fits
   --------------------------------------------------------------------------
   Six tabs at 360px leaves 60px each. The label is sized to fit that budget,
   the badge becomes a corner dot rather than a chip competing for width, and
   below 380px the label is dropped entirely with the accessible name carried
   by the existing aria-current / text content.
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .fai-tal-creator-studio.is-studio-shell .fai-tal-studio-shell__nav-item{
    grid-template-columns:minmax(0,1fr)!important;
    grid-auto-rows:auto!important;
    justify-items:center!important;
    gap:2px!important;
    min-height:52px!important;
    padding:6px 3px!important;
    border:0!important;
    border-radius:10px!important;
    font-size:10px!important;
    font-weight:700!important;
    line-height:1.1!important;
    text-align:center!important;
  }
  .fai-tal-creator-studio.is-studio-shell .fai-tal-studio-shell__nav-item svg{
    width:21px!important;
    height:21px!important;
  }
  .fai-tal-creator-studio.is-studio-shell .fai-tal-studio-shell__nav-item>span{
    max-width:100%!important;
    text-align:center!important;
  }
  /* Badge sits over the icon corner so it never steals label width. */
  .fai-tal-creator-studio.is-studio-shell .fai-tal-studio-shell__badge{
    position:absolute!important;
    top:4px!important;
    left:50%!important;
    margin-left:4px!important;
    min-width:16px!important;
    height:16px!important;
    padding:0 4px!important;
    font-size:10px!important;
  }
  .fai-tal-studio-shell__nav{
    padding:5px 4px calc(5px + env(safe-area-inset-bottom))!important;
  }
  .fai-tal-studio-shell__nav-list{gap:0!important}
}

/* Fold and small phones: icons only. */
@media (max-width:399px){
  .fai-tal-creator-studio.is-studio-shell .fai-tal-studio-shell__nav-item>span{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    overflow:hidden!important;
    clip-path:inset(50%)!important;
    white-space:nowrap!important;
  }
  .fai-tal-creator-studio.is-studio-shell .fai-tal-studio-shell__nav-item{
    min-height:48px!important;
  }
  .fai-tal-creator-studio.is-studio-shell .fai-tal-studio-shell__nav-item svg{
    width:23px!important;
    height:23px!important;
  }
}

/* --------------------------------------------------------------------------
   3. Section bodies stay visible without the shell writing `open`
   --------------------------------------------------------------------------
   The shell no longer touches the open state (that caused the v3.3.44 flicker
   loop against phase1's accordion handler). The panel body is revealed here
   instead, so open state is left entirely to phase1.
   -------------------------------------------------------------------------- */
/* v3.3.48 — REMOVED. Forcing a closed <details> body visible with CSS does not
   work reliably: browsers apply content-visibility to closed slotted content,
   so the body stayed hidden regardless of `display`. Panels are opened properly
   in JS instead, which is also what a creator expects on selecting a section. */


/* ==========================================================================
   v3.3.46 — measured theming and contrast corrections
   --------------------------------------------------------------------------
   The v3.3.44 light palette was keyed off guessed hooks that do not match how
   the live site renders. The dark token set therefore stayed active on a light
   page, so --studio-ink resolved to white and view headings rendered
   white-on-white (reported on Bookings and Profile).

   The shell now measures the studio's effective background luminance and sets
   `.is-theme-light` or `.is-theme-dark` on the studio root. That class is the
   single source of truth below, so the palette follows what the page is
   actually doing instead of what we assumed it would do.
   ========================================================================== */

.fai-tal-creator-studio.is-studio-shell.is-theme-light{
  --studio-bg:            #f6f7fa;
  --studio-surface:       #ffffff;
  --studio-surface-hover: #eef1f6;
  --studio-surface-solid: #ffffff;
  --studio-line:          #e0e5ee;
  --studio-line-strong:   #c6cede;
  --studio-ink:           #0f172a;
  --studio-ink-soft:      #44506a;
  --studio-ink-faint:     #64708a;
  --studio-accent:        #111827;
  --studio-accent-ink:    #ffffff;
}
.fai-tal-creator-studio.is-studio-shell.is-theme-dark{
  --studio-bg:            #0b0e14;
  --studio-surface:       rgba(255,255,255,.038);
  --studio-surface-hover: rgba(255,255,255,.075);
  --studio-surface-solid: #12161f;
  --studio-line:          rgba(255,255,255,.09);
  --studio-line-strong:   rgba(255,255,255,.19);
  --studio-ink:           #ffffff;
  --studio-ink-soft:      rgba(255,255,255,.70);
  --studio-ink-faint:     rgba(255,255,255,.50);
  --studio-accent:        #fbeb14;
  --studio-accent-ink:    #090b10;
}

/* View heading and description must never inherit a colour from the host page.
   These were the elements reported as invisible. */
.fai-tal-creator-studio.is-studio-shell .fai-tal-studio-shell__view-title h2{
  color:var(--studio-ink)!important;
  opacity:1!important;
}
.fai-tal-creator-studio.is-studio-shell .fai-tal-studio-shell__view-title p{
  color:var(--studio-ink-faint)!important;
  opacity:1!important;
}
.fai-tal-creator-studio.is-studio-shell .fai-tal-studio-shell__view-head{
  border-bottom-color:var(--studio-line)!important;
}

/* --------------------------------------------------------------------------
   Light-theme contrast repairs
   --------------------------------------------------------------------------
   Reported: pale text on pale backgrounds across shortcut buttons and cards,
   with no visible hover state. Targets below are TaLoad's own components; all
   pairs now clear WCAG AA 4.5:1 for body text and 3:1 for large text.
   -------------------------------------------------------------------------- */
.is-theme-light.is-studio-shell .fai-tal-studio-shell__nav{
  background:#fff;
  border-color:var(--studio-line);
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.is-theme-light.is-studio-shell .fai-tal-studio-shell__nav-item{
  color:#44506a!important;
}
.is-theme-light.is-studio-shell .fai-tal-studio-shell__nav-item:hover{
  background:#eef1f6!important;
  color:#0f172a!important;
}
.is-theme-light.is-studio-shell .fai-tal-studio-shell__nav-item.is-active{
  background:#0f172a!important;
  border-color:#0f172a!important;
  color:#ffffff!important;
}
.is-theme-light.is-studio-shell .fai-tal-studio-shell__nav-item.is-active::before{
  background:#fbeb14;
}
.is-theme-light.is-studio-shell .fai-tal-studio-shell__nav-item.is-active .fai-tal-studio-shell__badge{
  background:#fbeb14!important;
  color:#0f172a!important;
}
.is-theme-light.is-studio-shell .fai-tal-studio-shell__badge{
  background:#0f172a!important;
  color:#ffffff!important;
}

/* Mobile tab bar in light theme: a solid dark bar reads as chrome and keeps the
   active item unambiguous, rather than pale-on-pale. */
@media (max-width:900px){
  .is-theme-light.is-studio-shell .fai-tal-studio-shell__nav{
    background:#0f172a!important;
    border-top-color:#0f172a!important;
    box-shadow:0 -8px 28px rgba(15,23,42,.18)!important;
  }
  .is-theme-light.is-studio-shell .fai-tal-studio-shell__nav-item{
    color:rgba(255,255,255,.72)!important;
  }
  .is-theme-light.is-studio-shell .fai-tal-studio-shell__nav-item:hover{
    background:rgba(255,255,255,.09)!important;
    color:#fff!important;
  }
  .is-theme-light.is-studio-shell .fai-tal-studio-shell__nav-item.is-active{
    background:rgba(255,255,255,.13)!important;
    border-color:transparent!important;
    color:#fff!important;
  }
  /* The floating site widget sits over the last tab; reserve its corner. */
  .is-studio-shell .fai-tal-studio-shell__nav-list{
    padding-right:6px;
  }
}

/* Shortcut cards: give a real border and a visible hover in both themes. */
.is-studio-shell .fai-tal-studio-simple__cards button{
  border:1px solid var(--studio-line)!important;
  background:var(--studio-surface)!important;
  color:var(--studio-ink)!important;
}
.is-studio-shell .fai-tal-studio-simple__cards button:hover,
.is-studio-shell .fai-tal-studio-simple__cards button:focus-visible{
  border-color:var(--studio-line-strong)!important;
  background:var(--studio-surface-hover)!important;
}
.is-studio-shell .fai-tal-studio-simple__cards button>strong{
  color:var(--studio-ink-faint)!important;
}

/* Shortcut pills ("My dashboard", "+ Add quick link") were mid-grey fills with
   white text — roughly 1.6:1. Restated as outlined controls. */
.is-theme-light.is-studio-shell .fai-tal-studio-quick-links button,
.is-theme-light.is-studio-shell .fai-tal-studio-quick-links a,
.is-theme-light.is-studio-shell [data-tal-open-studio-section]{
  color:#0f172a!important;
}
.is-theme-light.is-studio-shell .fai-tal-studio-quick-links button{
  border:1px solid #c6cede!important;
  background:#fff!important;
}
.is-theme-light.is-studio-shell .fai-tal-studio-quick-links button:hover{
  background:#eef1f6!important;
  border-color:#94a1ba!important;
}

/* Section headers inside a view. */
.is-studio-shell .fai-tal-studio-shell__view .fai-tal-studio-accordion>summary{
  color:var(--studio-ink)!important;
}
.is-studio-shell .fai-tal-studio-shell__view .fai-tal-studio-accordion{
  background:var(--studio-surface)!important;
  border-color:var(--studio-line)!important;
}

/* The viewport must not inherit a page background that fights the tokens. */
.is-studio-shell .fai-tal-studio-shell__viewport{background:transparent}


/* ==========================================================================
   Homepage hero creator strip — mobile
   --------------------------------------------------------------------------
   Three decorative creator cards were squeezed into a phone width, truncating
   every handle ("@maya_fr…") and hiding the role and duration entirely, so the
   strip carried no information at all. On mobile it becomes two cards with room
   to read. Desktop keeps all three, where they already work.
   ========================================================================== */
@media (max-width:760px){
  .fai-tal-concept-visual{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .fai-tal-concept-card{
    width:auto;
    min-width:0;
    max-width:none;
    margin:0;
    transform:none!important;
  }
  /* The third card is decorative and aria-hidden; removing it costs no content
     and buys the other two enough width to be legible. */
  .fai-tal-concept-card--c{display:none!important}
  .fai-tal-concept-card>span{min-width:0;overflow:hidden}
  .fai-tal-concept-card b{
    display:block;
    overflow:hidden;
    font-size:12.5px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .fai-tal-concept-card small{
    display:block;
    overflow:hidden;
    font-size:10.5px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}
@media (max-width:420px){
  .fai-tal-concept-visual{gap:8px}
  .fai-tal-concept-card b{font-size:11.5px}
  .fai-tal-concept-card small{font-size:10px}
}


/* ==========================================================================
   v3.3.50 — Home is the dashboard, not a titled section
   --------------------------------------------------------------------------
   "Home / Your studio at a glance" restated what the dashboard already shows
   and pushed the actual content down on every screen size. The heading is
   removed for Home only; every other view keeps its title and description,
   where the label does real work identifying the section.

   The heading element stays in the DOM and keeps its aria-live region intact,
   so the view change is still announced to screen readers.
   ========================================================================== */
.fai-tal-studio-shell[data-tal-current-view="home"] .fai-tal-studio-shell__view-head{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  border:0!important;
}

/* The dashboard renders identically at every width — no view is device-gated. */
.fai-tal-studio-shell__view[data-tal-shell-view="home"]:not([hidden]){
  display:grid!important;
}

/* ==========================================================================
   TaLoad 3.3.72 — Creator Studio IA + consistency QA pass
   --------------------------------------------------------------------------
   Feedback pack 227–237: clearer navigation semantics, less repetitive Home,
   one home for booking settings, consistent section surfaces and status badges
   that explain themselves. This is presentation/IA only; existing forms,
   endpoints and business logic remain untouched.
   ========================================================================== */
.fai-tal-creator-studio.is-studio-shell .fai-tal-studio-shell__site-home{
  text-decoration:none!important;
  border-bottom:1px solid var(--studio-line)!important;
  border-radius:10px!important;
  margin-bottom:6px!important;
  padding-bottom:12px!important;
  color:var(--studio-ink)!important;
  font-weight:800!important;
}
.fai-tal-creator-studio.is-studio-shell .fai-tal-studio-shell__site-home:hover{
  background:var(--studio-surface-hover)!important;
}
.fai-tal-studio-shell__badge-legend{
  display:block;
  margin:9px 8px 2px;
  padding-top:9px;
  border-top:1px solid var(--studio-line);
  color:var(--studio-ink-faint);
  font-size:10px;
  line-height:1.45;
}

/* Home should be useful at a glance, not repeat the same Creator Studio intro
   and shortcut labels immediately beneath the navigation. */
.fai-tal-studio-shell[data-tal-current-view="home"] .fai-tal-creator-studio__hero,
.fai-tal-studio-shell[data-tal-current-view="home"] .fai-tal-studio-simple{
  display:none!important;
}
.fai-tal-studio-shell__view[data-tal-shell-view="home"]{
  gap:18px!important;
}
.fai-tal-studio-shell__view[data-tal-shell-view="home"] .fai-tal-creator-glance-top,
.fai-tal-studio-shell__view[data-tal-shell-view="home"] .fai-tal-profile-strength-card{
  margin:0!important;
}

/* One visual language for Studio views: restrained cards, consistent radii,
   spacing and border weight in both themes. */
.fai-tal-creator-studio.is-studio-shell .fai-tal-studio-shell__view:not([data-tal-shell-view="home"]){
  display:grid;
  gap:14px;
}
.fai-tal-creator-studio.is-studio-shell .fai-tal-studio-shell__view .fai-tal-studio-accordion{
  overflow:hidden!important;
  border:1px solid var(--studio-line)!important;
  border-radius:18px!important;
  background:var(--studio-surface)!important;
  box-shadow:0 8px 24px rgba(15,23,42,.035)!important;
}
.fai-tal-creator-studio.is-studio-shell .fai-tal-studio-shell__view .fai-tal-studio-accordion>summary{
  min-height:58px!important;
  padding:13px 15px!important;
  border-bottom:1px solid var(--studio-line)!important;
  background:transparent!important;
}
.fai-tal-creator-studio.is-studio-shell .fai-tal-studio-shell__view .fai-tal-studio-accordion__body{
  padding:16px!important;
}
.fai-tal-creator-studio.is-studio-shell .fai-tal-studio-shell__view :is(.fai-tal-phase1-panel,.fai-tal-account-tools,.fai-tal-native-booking-manager,.fai-tal-profile-booking-setup){
  max-width:none!important;
  margin:0!important;
  border-radius:16px!important;
  box-shadow:none!important;
}

/* Bookings is now the day-to-day activity area. Configuration is linked from
   the Profile view instead of being duplicated in two places. */
.fai-tal-studio-booking-empty{
  display:grid;
  gap:9px;
  justify-items:start;
  padding:20px;
  border:1px solid var(--studio-line);
  border-radius:16px;
  background:var(--studio-surface-hover);
}
.fai-tal-studio-booking-empty>span{
  color:var(--studio-ink-faint);
  font-size:10px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.fai-tal-studio-booking-empty>strong{color:var(--studio-ink);font-size:18px;line-height:1.2}
.fai-tal-studio-booking-empty>button{margin-top:3px}

/* Videos: remove the feeling of unrelated nested boxes while retaining all
   existing upload, moderation and FAQ controls. */
.fai-tal-studio-shell[data-tal-current-view="videos"] :is(.fai-tal-phase1-uploads-panel,.fai-tal-phase1-stack){
  border-color:var(--studio-line)!important;
  background:transparent!important;
}
.fai-tal-studio-shell[data-tal-current-view="videos"] .fai-tal-phase1-uploads-panel__heading{
  padding-bottom:14px!important;
  margin-bottom:14px!important;
  border-bottom:1px solid var(--studio-line)!important;
}
.fai-tal-studio-shell[data-tal-current-view="videos"] .fai-tal-phase1-video-card{
  border-color:var(--studio-line)!important;
  border-radius:15px!important;
}

/* Settings and Profile use the same quiet surface treatment. */
.fai-tal-studio-shell[data-tal-current-view="settings"] .fai-tal-account-tools,
.fai-tal-studio-shell[data-tal-current-view="profile"] .fai-tal-studio-form{
  color:var(--studio-ink)!important;
}

@media(max-width:900px){
  /* The site header already provides a homepage path on phones. Keeping this
     external item out of the six-tab bottom bar preserves legibility. */
  .fai-tal-studio-shell__site-home{display:none!important}
  .fai-tal-studio-shell__badge-legend{display:none!important}
  .fai-tal-creator-studio.is-studio-shell .fai-tal-studio-shell__view .fai-tal-studio-accordion__body{padding:12px!important}
}

/* End TaLoad 3.3.72 Creator Studio QA pass. */


/* ==========================================================================
   TaLoad 3.3.73 — Bookings & Sales + mobile navigation repair
   ========================================================================== */
@media(max-width:900px){
  /* v3.3.72 intended to hide the separate website-home item on mobile, but the
     generic nav-item display:grid!important rule had greater specificity. The
     invisible item still consumed the first tab slot and clipped Studio. */
  .fai-tal-creator-studio.is-studio-shell .fai-tal-studio-shell__site-home{
    display:none!important;
  }
  .fai-tal-creator-studio.is-studio-shell .fai-tal-studio-shell__nav-list{
    width:100%!important;
    padding-inline:2px!important;
  }
}

.fai-tal-video-sales-intro{
  display:grid;
  gap:6px;
  margin-bottom:14px;
}
.fai-tal-video-sales-intro h3{margin:0;color:var(--studio-ink);font-size:22px;line-height:1.15}
.fai-tal-video-sales-intro p{max-width:760px;margin:0;color:var(--studio-ink-soft);font-size:13px;line-height:1.55}
.fai-tal-video-sales-list{display:grid;gap:12px}
.fai-tal-video-sales-card{
  display:grid;
  grid-template-columns:minmax(0,.75fr) minmax(190px,.55fr) minmax(0,1fr);
  gap:12px;
  align-items:end;
  padding:15px;
  border:1px solid var(--studio-line);
  border-radius:16px;
  background:var(--studio-surface-hover);
}
.fai-tal-video-sales-card__head{display:grid;gap:4px;align-self:center;min-width:0}
.fai-tal-video-sales-card__head>div{display:grid;gap:3px;min-width:0}
.fai-tal-video-sales-card__head span{color:var(--studio-ink-faint);font-size:9px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.fai-tal-video-sales-card__head strong{overflow:hidden;color:var(--studio-ink);font-size:14px;text-overflow:ellipsis;white-space:nowrap}
.fai-tal-video-sales-card__head small{color:var(--studio-ink-faint);font-size:10px}
.fai-tal-video-sales-card label{display:grid;gap:6px;min-width:0}
.fai-tal-video-sales-card label>span{color:var(--studio-ink-soft);font-size:10px;font-weight:800}
.fai-tal-video-sales-card select,.fai-tal-video-sales-card input{
  width:100%;min-width:0;min-height:44px;padding:9px 11px;border:1px solid var(--studio-line-strong);border-radius:11px;background:var(--studio-surface);color:var(--studio-ink);font:inherit;font-size:12px
}
.fai-tal-video-sales-card__link{display:grid;grid-template-columns:minmax(120px,.45fr) minmax(0,1fr);gap:10px;min-width:0}
.fai-tal-video-sales-card__link[hidden]{display:none!important}
.fai-tal-video-sales-card__actions{grid-column:1 / -1;display:flex;align-items:center;gap:10px;padding-top:2px}
.fai-tal-video-sales-card__actions .fai-tal-phase1-status{margin:0;font-size:11px}
@media(max-width:980px){
  .fai-tal-video-sales-card{grid-template-columns:minmax(0,1fr) minmax(180px,.65fr)}
  .fai-tal-video-sales-card__link{grid-column:1 / -1}
}
@media(max-width:640px){
  .fai-tal-video-sales-card{grid-template-columns:minmax(0,1fr);padding:12px}
  .fai-tal-video-sales-card__link{grid-column:1;grid-template-columns:1fr}
  .fai-tal-video-sales-card__actions{grid-column:1;align-items:stretch;flex-direction:column}
  .fai-tal-video-sales-card__actions button{width:100%!important}
}
/* End TaLoad 3.3.73. */