/* FAQ: topic navigation and a single raised answer surface. */
#studio-console .sc-panel--faq > header,
#studio-console .sc-panel--faq .sc-heading {
  display:none;
}
#studio-console .sc-panel--faq {
  display:grid;grid-template-rows:minmax(0,1fr);gap:0;
  min-height:0;overflow:hidden;align-content:stretch;
}
#studio-console .sc-faq-board {
  display:grid;grid-template-columns:minmax(190px,.30fr) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);gap:0;margin:0;min-height:0;
  align-self:stretch;
}
#studio-console .sc-faq-board::before {content:none;display:none;}
#studio-console .sc-faq-topics {
  display:grid;grid-template-rows:repeat(8,minmax(36px,1fr));
  min-width:0;min-height:0;padding:0 0 4px;align-self:stretch;
}
#studio-console .sc-faq-trigger {
  display:grid;grid-template-columns:30px minmax(0,1fr);grid-column:auto;
  min-width:0;min-height:36px;width:100%;padding:9px 18px;
  border:1px solid transparent;border-radius:7px 0 0 7px;
  color:#acbbd2!important;background:none;box-shadow:none;transform:none;
  font-size:.84rem;line-height:1.35;text-align:left;
  transition:background-color 180ms ease,color 180ms ease;
}
#studio-console .sc-faq-trigger span:first-child {font-size:.56rem;color:#7f9ec9;}
#studio-console .sc-faq-trigger strong {font-weight:500;}
#studio-console .sc-faq-trigger:hover {background:#adcfff0a;color:#eef4ff!important;transform:none;}
#studio-console .sc-faq-trigger[aria-selected="true"] {
  background:linear-gradient(105deg,#34487299,#2b3b5d);color:#f3f6ff!important;
  border-color:#bdd6ff12;box-shadow:inset 0 1px #dce8ff0d;
}
#studio-console .sc-faq-trigger[aria-selected="true"] span:first-child {color:#9bbcff;}
#studio-console .sc-faq-answers {
  min-width:0;min-height:0;border:1px solid #adc6ef2b;border-radius:12px;
  background:linear-gradient(155deg,#2b3a5a,#1b2844 68%,#17223a);
  box-shadow:inset 0 1px #e6efff21,inset 0 -1px #030c2180,
    -5px 3px 12px -7px #03091fbb,0 16px 26px -20px #01091ac4;
  overflow:auto;scrollbar-width:thin;scrollbar-color:#7188ad55 transparent;
}
#studio-console .sc-faq-detail {
  position:relative;display:block;grid-area:auto;width:auto;max-width:none;
  height:auto!important;min-height:100%;padding:clamp(24px,3vw,42px);
  box-sizing:border-box;overflow:visible;
  color:#d7e1f0!important;
}
#studio-console .sc-panel--faq.is-active .sc-faq-detail:not([hidden]) {
  visibility:visible;pointer-events:auto;
}
#studio-console .sc-faq-detail[hidden] {display:none!important;}
#studio-console .sc-faq-count {display:block;margin:0 0 16px;color:#8da7d2;font-size:.58rem;letter-spacing:.13em;}
#studio-console .sc-faq-detail h3 {
  max-width:25ch;margin:0;color:#f3f6fc;font-size:clamp(1.7rem,2.6vw,2.5rem);
  font-weight:400;line-height:1.1;letter-spacing:-.03em;text-wrap:balance;
}
#studio-console .sc-faq-detail p:last-child {
  max-width:66ch;margin:22px 0 0;color:#c6d2e6;font-size:clamp(.9rem,1.12vw,1rem);line-height:1.7;
}
#studio-console .sc-faq-trigger:focus-visible,
#studio-console .sc-faq-detail:focus-visible {outline:2px solid #a4c6ff;outline-offset:-4px;}

/* Testimonials stay in-flow for height. FAQ overlays only while active. */
#studio-console .sc-panel--testimonials {
  position:relative;
  z-index:1;
}
#studio-console .sc-panel--faq {
  position:absolute;
  inset:0;
  z-index:0;
}
#studio-console[data-sc-mode="testimonials"] .sc-panel--faq,
#studio-console .sc-panel--faq:not(.is-active) {
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
  z-index:0!important;
}
#studio-console[data-sc-mode="testimonials"] .sc-panel--faq *,
#studio-console .sc-panel--faq:not(.is-active) * {
  visibility:hidden!important;
  pointer-events:none!important;
}
#studio-console[data-sc-mode="faq"] .sc-panel--faq,
#studio-console .sc-panel--faq.is-active {
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  z-index:2;
}
#studio-console[data-sc-mode="faq"] .sc-panel--testimonials,
#studio-console .sc-panel--testimonials:not(.is-active) {
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
  position:relative!important;
  inset:auto!important;
  z-index:0!important;
}
#studio-console[data-sc-mode="faq"] .sc-panel--testimonials *,
#studio-console .sc-panel--testimonials:not(.is-active) * {
  visibility:hidden!important;
  pointer-events:none!important;
}

@media(max-width:899px) {
  #studio-console[data-sc-mode="faq"] .sc-frame {height:auto!important;min-height:0!important;}
  #studio-console[data-sc-mode="faq"] .sc-main {min-height:0;padding:18px 20px 22px;}
  #studio-console[data-sc-mode="faq"] .sc-stage {height:auto;min-height:0;}
  #studio-console .sc-panel--faq.is-active {
    position:absolute!important;inset:0!important;height:auto!important;min-height:100%!important;
    display:flex!important;flex-direction:column;justify-content:flex-start;gap:12px;
    overflow:auto!important;z-index:2;visibility:visible;opacity:1;
  }
  #studio-console .sc-panel--faq:not(.is-active) {
    position:absolute!important;inset:0!important;height:auto!important;
    overflow:hidden!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;z-index:0!important;
  }
  #studio-console .sc-panel--faq header {display:none;}
  #studio-console .sc-panel--faq .sc-heading {display:none;}
  #studio-console .sc-faq-board {grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:12px;margin:0;min-height:0;flex:1;}
  #studio-console .sc-faq-topics {
    display:flex;gap:7px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    padding:2px 1px 5px;scroll-padding-inline:1px;min-height:0;flex:none;
  }
  #studio-console .sc-faq-topics::-webkit-scrollbar {display:none;}
  #studio-console .sc-faq-trigger {
    display:flex;flex:0 0 auto;gap:8px;width:auto;min-height:42px;padding:11px 15px;
    border:1px solid #9cb8e31f;border-radius:24px;background:#839ecc0c;
    font:500 .62rem/1.2 var(--mono);letter-spacing:.02em;white-space:nowrap;
  }
  #studio-console .sc-faq-trigger strong {font-weight:500;}
  #studio-console .sc-faq-trigger span:first-child {font-size:.49rem;}
  #studio-console .sc-faq-trigger[aria-selected="true"] {
    background:linear-gradient(180deg,#628eeb,#3d67c9);border-color:#b1cfff5c;
    box-shadow:inset 0 1px #e7f1ff40,0 3px 7px -4px #050d2f99;
  }
  #studio-console .sc-faq-trigger[aria-selected="true"] span:first-child {color:#d8e7ff;}
  #studio-console .sc-faq-answers {min-height:0;flex:1;overflow:auto;border-radius:12px;}
  #studio-console .sc-faq-detail {padding:18px 18px 22px;height:auto!important;min-height:0;}
  #studio-console .sc-faq-count {margin-bottom:12px;}
  #studio-console .sc-faq-detail h3 {max-width:24ch;font-size:clamp(1.35rem,6.2vw,1.75rem);line-height:1.12;}
  #studio-console .sc-faq-detail p:last-child {font-size:.9rem;line-height:1.6;margin-top:14px;}
}
@media(max-width:360px) {
  #studio-console[data-sc-mode="faq"] .sc-main {padding-inline:15px;}
  #studio-console .sc-faq-detail {padding:22px 18px 28px;}
}
@media(prefers-reduced-motion:reduce) {
  #studio-console .sc-faq-trigger {transition:none;}
}

/* The FAQ surfaces are tuned against the cream page, where the console reads as
   one dark object. On the night page they were the brightest thing on screen:
   the answer card sat 50 luminance points above the background and the selected
   row 52. Same materials, dropped to sit on the frame instead of floating off it. */
html[data-skin="nocturne"] #studio-console .sc-faq-answers {
  border-color: #adc6ef1f;
  background: linear-gradient(155deg, #18223a, #131c32 68%, #101830);
  box-shadow: inset 0 1px #e6efff14, inset 0 -1px #02081699,
    -5px 3px 12px -7px #02071899, 0 16px 26px -20px #010614cc;
}

html[data-skin="nocturne"] #studio-console .sc-faq-trigger[aria-selected="true"] {
  background: linear-gradient(105deg, #1e2a4699, #1b2740);
  border-color: #bdd6ff0f;
  box-shadow: inset 0 1px #dce8ff08;
}

html[data-skin="nocturne"] #studio-console .sc-faq-trigger:hover {
  background: #adcfff08;
}