/* TC204 — Global readable contrast + light/dark surface safety.
   Principle: light surfaces use dark text/icons; dark saturated surfaces use light text.
   Defaults use :where() so intentional component colors still win by specificity. */
:root{
  --stt-ink-strong:#172033;
  --stt-ink:#344054;
  --stt-muted-readable:#475467;
  --stt-border-readable:#cbd5e1;
  --stt-focus:#2563eb;
}

/* Interactive text must never accidentally inherit white from a colored ancestor when the control itself is light. */
:where(body:not(.creative-stage-body) button,
       body:not(.creative-stage-body) summary,
       body:not(.creative-stage-body) input,
       body:not(.creative-stage-body) select,
       body:not(.creative-stage-body) textarea){color:var(--stt-ink-strong)}
:where(input,textarea)::placeholder{color:#667085;opacity:1}

/* TC188 help controls were originally dark-surface-only. Make them readable on normal light pages. */
body:not(.creative-stage-body) .ui-help-button,
body:not(.creative-stage-body) .ui-question-only>summary{
  background:#fff!important;
  color:var(--stt-ink-strong)!important;
  border-color:var(--stt-border-readable)!important;
  box-shadow:0 5px 14px rgba(20,35,75,.09)!important;
}
body:not(.creative-stage-body) .ui-help-button:hover,
body:not(.creative-stage-body) .ui-question-only>summary:hover{background:#f8fafc!important;border-color:#98a2b3!important}
body:not(.creative-stage-body) .ui-help-dialog,
body:not(.creative-stage-body) .ui-question-only>.ui-disclosure-body,
body:not(.creative-stage-body) .ui-question-only>div{
  background:#fff!important;
  color:var(--stt-ink-strong)!important;
  border-color:var(--stt-border-readable)!important;
  box-shadow:0 20px 55px rgba(15,23,42,.22)!important;
}
body:not(.creative-stage-body) .ui-help-dialog p{color:var(--stt-muted-readable)!important}
body:not(.creative-stage-body) .ui-help-close{
  background:#fff!important;color:var(--stt-ink-strong)!important;border-color:var(--stt-border-readable)!important;
}

/* Common light utility surfaces: increase muted-copy legibility without changing brand colors. */
.creator-os-body{--co-muted:#475467}
.creator-os-body :where(.maker-hint,.empty-creator,.portfolio-backup-status){color:var(--stt-muted-readable)}
.ui-disclosure>summary,.ui-action-menu>summary{color:var(--stt-ink)!important;background:#fff!important}
.ui-disclosure>summary:after,.ui-action-menu>summary:after{color:#667085!important}

/* Disabled controls remain visibly disabled but readable. */
:where(button:disabled,[aria-disabled="true"]){opacity:.58}

/* Consistent keyboard focus, especially useful on Chromebook/tablet keyboards. */
:where(button,summary,a,input,select,textarea):focus-visible{outline:3px solid rgba(37,99,235,.32);outline-offset:2px}

/* Creator top hamburger: one compact management entry instead of explanatory blocks. */
.creator-top-menu{position:relative;flex:0 0 auto}
.creator-top-menu>summary{
  list-style:none;width:44px;height:44px;min-height:44px;padding:0!important;border:1px solid #d0d5dd!important;
  border-radius:16px!important;background:#fff!important;color:var(--stt-ink-strong)!important;display:grid!important;place-items:center!important;
  font-size:23px;font-weight:950;cursor:pointer;box-shadow:0 5px 14px rgba(20,35,75,.06)
}
.creator-top-menu>summary::-webkit-details-marker{display:none}.creator-top-menu>summary:after{display:none!important}
.creator-top-menu-body{position:absolute;right:0;top:calc(100% + 8px);z-index:90;width:min(82vw,290px);display:grid;gap:7px;padding:9px;border:1px solid #d0d5dd;border-radius:16px;background:#fff;box-shadow:0 18px 45px rgba(15,23,42,.18)}
.creator-top-menu:not([open]) .creator-top-menu-body{display:none}
.creator-top-menu-body a{min-height:44px;display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #eef2f6;border-radius:11px;background:#fff;color:var(--stt-ink)!important;text-decoration:none;font-weight:850}
.creator-top-menu-body a:hover{background:#f8fafc}

/* Music top header: only one title. Help and hamburger live beside it. */
.music-top-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.music-studio-help-button,.music-studio-menu-button{
  width:44px;height:44px;min-width:44px;border:1px solid #d0d5dd;border-radius:14px;background:#fff!important;
  color:var(--stt-ink-strong)!important;display:grid;place-items:center;font:inherit;font-size:20px;font-weight:950;cursor:pointer;
  box-shadow:0 5px 14px rgba(20,35,75,.07)
}
.music-studio-menu-button{font-size:23px}
.music-studio-mode .creator-topbar{gap:9px}
.music-studio-mode .creator-topcopy{min-width:0}
.music-studio-mode .creator-topcopy h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music-studio-mode .creator-topcopy p{display:none!important}
.music-studio-mode .maker-title{display:none!important}
.music-studio-mode #makerRoot{margin-top:0!important}
.music-studio-mode .maker-shell>.maker-panel:first-of-type{padding-top:10px!important}
.music-studio-help-dialog{width:min(92vw,480px);border:1px solid #d0d5dd;border-radius:20px;padding:0;background:#fff;color:var(--stt-ink-strong);box-shadow:0 24px 70px rgba(15,23,42,.28)}
.music-studio-help-dialog::backdrop{background:rgba(15,23,42,.45);backdrop-filter:blur(4px)}
.music-studio-help-dialog-inner{position:relative;padding:20px}.music-studio-help-dialog h2{margin:0 46px 9px 0;font-size:19px}.music-studio-help-dialog p{margin:0;color:var(--stt-muted-readable);line-height:1.55;font-size:13px}
.music-studio-help-close{position:absolute;right:11px;top:11px;width:40px;height:40px;border:1px solid #d0d5dd;border-radius:12px;background:#fff!important;color:var(--stt-ink-strong)!important;font-size:22px;font-weight:900}
@media(max-width:430px){.music-studio-help-button,.music-studio-menu-button{width:42px;height:42px;min-width:42px}.music-top-actions{gap:5px}.music-studio-mode .creator-topbar{gap:6px}.music-studio-mode .creator-topbar h1{font-size:18px}}


/* TC205 — Hub + Music tool contrast hardening.
   Cards/panels with light surfaces always render dark readable copy. */
.clean-hub-page{
  color-scheme:light;
  color:var(--stt-ink-strong)!important;
}
.clean-hub-page .clean-app-card{
  background:#fff!important;
  color:var(--stt-ink-strong)!important;
  border-color:#cbd5e1!important;
  box-shadow:0 6px 17px rgba(20,35,75,.07)!important;
}
.clean-hub-page .clean-app-card strong{color:var(--stt-ink-strong)!important}
.clean-hub-page .clean-app-card-visual{
  background:linear-gradient(145deg,#f8fafc,#e8eefc)!important;
  color:var(--stt-ink-strong)!important;
  border:1px solid #d8e0ec;
}
.clean-hub-page .clean-section-heading h2,
.clean-hub-page .clean-page-title-wrap h1{color:var(--stt-ink-strong)!important}

/* Music fullscreen stage is dark, but its work panels are intentionally light. */
.music-stage .music-tool-panel{
  background:#fff!important;
  color:var(--stt-ink-strong)!important;
  border-color:#d7dee8!important;
}
.music-stage .music-tool-panel .tool-display{
  color:var(--stt-ink-strong)!important;
  background:linear-gradient(135deg,#f3f0ff,#e8f4ff)!important;
  border:1px solid #d7e2f0;
}
.music-stage .music-tool-panel :where(.bpm-value,.beat-dots,label,p){color:var(--stt-ink-strong)!important}
.music-stage .music-tool-panel :where(.music-tip,small){color:var(--stt-muted-readable)!important}
.music-stage .music-tool-panel select{
  background:#fff!important;
  color:var(--stt-ink-strong)!important;
  border-color:#cbd5e1!important;
}