/* The signed-in workspace uses the screening-room palette. */
.authenticated-studio {
  --rail-width: clamp(12.25rem, 16vw, 14.25rem);
  --header-h: 3.65rem;
  --stage-gutter: clamp(1.1rem, 2.4vw, 2.75rem);
  --dock-height: calc(3.75rem + env(safe-area-inset-bottom));
  min-height: 100svh;
}
.studio--workspace {
  display: grid;
  grid-template-columns: var(--rail-width) minmax(0, 1fr);
  min-height: 100svh;
  align-items: start;
}
.studio--workspace .workspace-rail {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100dvh;
  border-right: 1px solid var(--line);
  background: var(--surface);
  min-width: 0;
  z-index: var(--z-header);
}
.rail-brand { display: flex; align-items: center; min-height: var(--header-h); padding: 0 1rem; }
.rail-brand .brand { font-size: clamp(1.28rem, 1.65vw, 1.5rem); gap: .5rem; }
.rail-brand .brand__mark { width: 1.35rem; height: 1.35rem; }
.rail-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: .7rem .65rem 1.5rem; }
.workspace-rail .workspace-nav, .rail-recent { display: grid; position: static; gap: .18rem; padding: 0; }
.rail-label {
  color: var(--fg-3);
  font: 500 .67rem/1.4 var(--font-sans);
  padding: 0 .6rem;
  margin: 1.35rem 0 .4rem;
}
.rail-label:first-child { margin-top: 0; }
.rail-recent { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 1.1rem; }
.workspace-nav .workspace-tab, .rail-project, .rail-credits, .workspace-dock .studio-help__link {
  display: flex;
  align-items: center;
  gap: .65rem;
  border-radius: 8px;
  min-height: 2.35rem;
  padding: .42rem .6rem;
  line-height: 1.3;
  font-size: .8rem;
  font-weight: 500;
  color: var(--fg-2);
  text-decoration: none;
}
.workspace-nav .workspace-tab:hover, .rail-project:hover, .rail-credits:hover, .workspace-dock .studio-help__link:hover {
  background: var(--well);
  color: var(--fg);
}
.workspace-nav .workspace-tab[aria-current], .rail-project[aria-current], .rail-credits[aria-current] {
  color: var(--fg);
  background: var(--ink-soft);
}
.workspace-nav .workspace-tab .icon, .rail-credits > .icon, .workspace-dock .studio-help__link .icon { width: 1rem; height: 1rem; }
.workspace-nav .workspace-tab[aria-current] .icon { color: var(--cf-300); }
.rail-project { min-width: 0; font-size: .76rem; font-weight: 400; }
.rail-project > img, .rail-project__mark { width: 1.35rem; height: 1.35rem; border-radius: 5px; flex: none; }
.rail-project > img { object-fit: cover; }
.rail-project__mark { display: grid; place-items: center; background: var(--ink-soft); color: var(--fg-3); }
.rail-project__mark .icon { width: .9rem; height: .9rem; }
.rail-project__name, .workspace-crumb [aria-current] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.workspace-dock { flex: none; padding: .65rem .65rem .9rem; border-top: 1px solid var(--line); }
.rail-credits { margin-bottom: .5rem; border: 1px solid var(--line); background: var(--well); }
.rail-credits > .icon:first-child { color: var(--cf-300); }
.rail-credits strong { margin-left: auto; font-size: .74rem; color: var(--fg); }
.rail-credits > .icon:last-child { width: .8rem; color: var(--fg-3); }
.workspace-dock .studio-help { position: static; display: grid; gap: 0; padding: 0; background: transparent; }
.workspace-dock .studio-help__link { width: 100%; border: 0; background: transparent; box-shadow: none; justify-content: flex-start; }
.workspace-dock .studio-help__question {
  display: grid; place-items: center; width: 1rem; height: 1rem; border-radius: 50%;
  border: 1.5px solid currentColor; font: 600 .65rem/1 var(--font-sans);
}
.workspace-dock .help-short, .workspace-top .credit-chip, .mobile-brand { display: none; }
.workspace-stage { min-width: 0; }
.workspace-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--header-h);
  position: sticky;
  top: 0;
  z-index: calc(var(--z-header) - 1);
  padding: 0 var(--stage-gutter);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(12px);
}
.workspace-crumb, .workspace-account { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.workspace-crumb { font: 500 .72rem/1.3 var(--font-sans); }
.workspace-crumb a { font-weight: 400; color: var(--fg-3); text-decoration: none; }
.workspace-crumb a:hover { color: var(--fg); }
.workspace-crumb .icon { color: var(--fg-3); width: .65rem; height: .65rem; }
.workspace-account { flex: none; }
.workspace-account .account summary { font-size: .76rem; padding: .25rem .35rem; gap: .5rem; }
.workspace-account .account summary:hover, .workspace-account .account[open] summary { background: var(--well); }
.account__avatar { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--cf-200); color: var(--cf-900); font: 650 .77rem/1 var(--font-sans); }
.workspace-account .account__menu { background: var(--surface); border-radius: var(--r-control); overflow-wrap: anywhere; }
.studio--workspace .studio__main {
  width: min(calc(100% - 2 * var(--stage-gutter)), var(--wrap-wide));
  padding-block: clamp(1.3rem, 2.5vw, 2.35rem) 3rem;
}
.studio--workspace .costbar { left: var(--rail-width); bottom: 0; }
.studio--workspace .studio__main:has(.costbar) { padding-bottom: 8rem; }
body:has(.studio--workspace) { background: var(--ink); }
body:has(.studio--workspace) .toasts { bottom: 1rem; }
body:has(.studio--workspace .costbar) .toasts { bottom: 6rem; }
.authenticated-studio .toast { background: var(--well); border: 1px solid var(--line-2); }
.authenticated-studio .dialog { color: var(--fg); border: 1px solid var(--line-2); background: var(--surface); }
.authenticated-studio .dialog__close { background: var(--well); color: var(--fg-2); }
.authenticated-studio .dialog__close:hover { background: var(--ink-soft); color: var(--fg); }
.authenticated-studio .lesson__track { background: var(--line); }
.authenticated-studio .lesson__track i { background: var(--cf-400); }
.authenticated-studio .lesson__example { background: var(--well); }
.authenticated-studio .field__error { color: color-mix(in srgb, var(--bad) 30%, var(--paper)); }
@media (max-width: 47.99rem) {
  .authenticated-studio { --stage-gutter: 1rem; --header-h: 3.4rem; }
  .studio--workspace { display: block; }
  .studio--workspace .workspace-rail {
    position: fixed; inset: auto 0 0; height: auto; border-right: 0; z-index: var(--z-float);
  }
  .workspace-rail .rail-brand, .workspace-rail .rail-scroll, .workspace-dock .rail-credits, .workspace-crumb, .workspace-dock .help-full { display: none; }
  .workspace-dock { display: grid; grid-template-columns: 3fr 2fr; padding: .15rem .35rem calc(.15rem + env(safe-area-inset-bottom)); height: var(--dock-height); }
  .workspace-dock .tabbar, .workspace-dock .studio-help {
    position: static; display: grid; align-items: stretch; gap: .1rem;
    padding: 0; border: 0; background: transparent; backdrop-filter: none;
  }
  .workspace-dock .tabbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .workspace-dock .studio-help { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-dock .tabbar a, .workspace-dock .studio-help__link {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .3rem; min-width: 0; padding: .15rem; min-height: 2.75rem;
    font: 500 .63rem/1.2 var(--font-sans); color: var(--fg-2);
    border-radius: 8px; text-decoration: none;
  }
  .workspace-dock .tabbar a[aria-current] { color: var(--cf-300); background: var(--well); }
  .workspace-dock .tabbar .icon, .workspace-dock .studio-help__link .icon { width: 1.15rem; height: 1.15rem; color: inherit; }
  .workspace-dock .tabbar a[aria-current] .icon { color: inherit; }
  .workspace-dock .help-short, .mobile-brand { display: block; }
  .mobile-brand .brand { font-size: 1.24rem; gap: .4rem; }
  .mobile-brand .brand__mark { width: 1.22rem; height: 1.22rem; }
  .workspace-top .credit-chip { display: inline-flex; min-height: 2rem; font-size: .69rem; padding: .25rem .6rem; gap: .35rem; }
  .workspace-top .credit-chip .icon { width: .85rem; color: var(--cf-300); }
  .workspace-account { gap: .3rem; }
  .studio--workspace .costbar { left: 0; bottom: var(--dock-height); }
  .studio--workspace .studio__main { padding-bottom: calc(var(--dock-height) + 1.5rem); }
  .studio--workspace .studio__main:has(.costbar) { padding-bottom: calc(var(--dock-height) + 9.5rem); }
  body:has(.studio--workspace) .toasts { bottom: calc(var(--dock-height) + .5rem); }
  body:has(.studio--workspace .costbar) .toasts { bottom: calc(var(--dock-height) + 8rem); }
}

.profile-settings { max-width: 32rem; }
.profile-photo { width: 6rem; height: 6rem; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--cf-200); color: var(--cf-900); font-size: 2rem; }
.profile-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.profile-settings input { max-width: 100%; }