/* v4.4.7: shared workspace geometry and readable UI colors.
   These rules style interface controls, never editable chart/SVG artwork. */
:root { --workspace-space:24px; }

/* Private workspaces use the full area below the shared header. */
html[data-theme][data-site-theme] body.account-body .page-shell {height:100dvh!important;min-height:0!important}
body.account-body .account-layout {grid-template-columns:var(--workspace-sidebar-width,260px) minmax(0,1fr)!important}
html[data-theme][data-site-theme] body.account-body .account-main,
html[data-theme][data-site-theme] body.dashboard-page .workspace {
  padding:var(--workspace-space)!important;min-width:0;min-height:0;
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;
}
html[data-theme][data-site-theme] body.account-body .account-head,
html[data-theme][data-site-theme] body.dashboard-page .workspace-head {
  position:relative!important;top:auto!important;margin:0 0 20px!important;
  padding:22px 24px!important;min-width:0;gap:16px 20px;
  border:1px solid var(--site-line)!important;border-radius:14px;
  background:var(--site-surface)!important;box-shadow:none!important;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
html[data-theme][data-site-theme] body.account-body .account-head h1,
html[data-theme][data-site-theme] body.dashboard-page .workspace-head h1 {
  font-size:clamp(26px,2.2vw,32px)!important;line-height:1.2!important;
  margin:10px 0 12px!important;letter-spacing:-.7px!important;
}
html[data-theme][data-site-theme] body.dashboard-page .workspace-head p {margin:0!important;line-height:1.6}
body.dashboard-page .workspace-head>.row {flex-wrap:wrap;justify-content:flex-end}
body.account-body .account-section-track {margin:0!important}
body.account-body :is(.metric-grid,.metric-row),body.dashboard-page .stat-grid {gap:16px!important;margin:0 0 20px!important}
html[data-theme][data-site-theme] body.account-body .metric-grid>article,
html[data-theme][data-site-theme] body.account-body .metric-row>div,
html[data-theme][data-site-theme] body.dashboard-page .stat-grid>article {min-width:0;padding:18px 20px!important;border-radius:14px;box-shadow:none!important}
body.dashboard-page .dashboard-section {margin-top:24px!important}
body.dashboard-page .account-grid {margin:0 0 20px!important;gap:20px!important}
body.dashboard-page .account-workspace .panel {margin-bottom:20px!important;padding:24px!important;border-radius:14px}
body.dashboard-page .account-grid>.panel {margin-bottom:0!important}
body.dashboard-page .free-allowance-card {margin:0!important;padding:20px!important}
body.account-body .account-side,body.dashboard-page .app-sidebar {padding:20px 16px 16px!important;gap:16px!important;min-width:0;min-height:0}
body.account-body .account-nav,body.dashboard-page .sidebar-top {min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;gap:6px!important}
body.account-body .account-nav a,body.dashboard-page .sidebar-top a {padding:11px 12px!important;min-height:42px;line-height:1.45}
body.dashboard-page .sidebar-top .side-section-title {margin:0 10px 12px!important;padding:0!important}
body.dashboard-page .sidebar-profile {flex-shrink:0}
body.dashboard-page .sidebar-profile .profile-copy b {font-size:13px!important}
body.dashboard-page .sidebar-profile .profile-copy small {font-size:11px!important}
body.dashboard-page .sidebar-profile .profile-actions {padding-top:12px!important;margin-top:4px!important}
body.dashboard-page .workspace :is(#overview,#projects,#fonts,#account-profile,#account-requests,#saved-data,#payment-history) {scroll-margin-top:24px}
body.account-body .account-main:focus-visible,body.dashboard-page .workspace:focus-visible {outline:2px solid var(--site-accent);outline-offset:-3px}

/* Let the editor title/actions wrap before they intrude into the inspector. */
body.editor-page :is(.editor-shell,.editor-main,.editor-top,.editor-title-wrap,.editor-actions,.inspector,.learning-controls) {min-width:0;max-width:100%;box-sizing:border-box}
body.editor-page .editor-top {flex-direction:row!important;flex-wrap:wrap!important;gap:8px 12px!important}
body.editor-page .editor-title-wrap {flex:1 1 270px!important;min-width:0!important}
body.editor-page #projectTitle {width:100%!important;min-width:0!important;flex:1 1 0!important;text-overflow:ellipsis}
body.editor-page #saveState {flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
body.editor-page .editor-actions {flex:0 0 auto;flex-wrap:wrap;margin-left:auto}
body.editor-page .editor-actions .btn {font-size:15px!important;padding:10px 14px!important}
body.editor-page .inspector {overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;scrollbar-gutter:stable}
body.editor-page .inspector :is(.row,.two,.lab-command-pad,.sticker-palette,.loop-palette) {min-width:0;max-width:100%}
body.editor-page .inspector :is(.two,.lab-command-pad) {grid-template-columns:repeat(2,minmax(0,1fr))!important}
body.editor-page .inspector :is(input,select,textarea,button,.btn,label) {min-width:0!important;max-width:100%;box-sizing:border-box}
body.editor-page .inspector .btn {white-space:normal;overflow-wrap:anywhere}
body.editor-page .inspector :is(.lab-instructions,.lab-tip,.lab-note) {overflow-wrap:anywhere}
html[data-theme][data-site-theme] body.editor-page .editor-shell.learning-mode .canvas-wrap {background:var(--site-bg)!important}
body.editor-page #learningHost .lab-header {flex:0 0 auto;margin-bottom:16px!important;gap:12px}
body.editor-page #learningHost .lab-header h2 {font-size:clamp(18px,1.65vw,25px)!important}
body.editor-page #learningHost .lab-header-icon {width:44px;height:44px;flex-shrink:0}
body.editor-page #learningHost .lab-scorebar {margin-bottom:16px!important}

/* The entire story illustration fits its available stage, including its bottom.
   Container units preserve the SVG ratio without changing drag coordinates. */
body.editor-page .editor-shell[data-visual="storybookLab"] #labStage {
  display:flex;flex-direction:column;overflow:hidden!important;scrollbar-gutter:auto!important;padding:3px!important;
}
body.editor-page .editor-shell[data-visual="storybookLab"] #labStage>.lab-scorebar {flex:0 0 auto}
body.editor-page .editor-shell[data-visual="storybookLab"] .story-panel-tabs {flex:0 0 auto;flex-wrap:wrap;margin:0 0 12px!important;gap:6px}
body.editor-page .editor-shell[data-visual="storybookLab"] #learningHost .storybook {
  display:flex!important;align-items:center;justify-content:center;flex:1 1 0;
  min-width:0;min-height:0;width:100%!important;height:auto!important;container-type:size;padding:4px;
}
body.editor-page .editor-shell[data-visual="storybookLab"] #learningHost .storybook .story-panel {
  flex:0 0 auto;width:min(620px,calc(100cqw - 8px),calc((100cqh - 8px) * 340 / 270))!important;
  height:auto!important;min-height:0!important;max-width:100%!important;max-height:100%!important;
  aspect-ratio:340 / 270!important;margin:0!important;box-sizing:border-box;
}
body.editor-page .editor-shell[data-visual="storybookLab"] #learningHost .storybook .story-panel-svg {width:100%!important;height:100%!important;display:block}

/* Fixed white legacy cards must use the same palette as their dialog/lab. */
html[data-theme][data-site-theme] body[class] :is(.export-choice,.typing-passage,.flash-study-card,.match-card,.code-block,.lab-note,.modal-message>.notice,.app-modal .notice) {
  background:var(--site-soft)!important;color:var(--site-ink)!important;border-color:var(--site-line)!important;
}
html[data-theme][data-site-theme] body[class] :is(.export-choice b,.flash-study-card strong,.match-card,.typing-passage span) {color:var(--site-ink)!important}
html[data-theme][data-site-theme] body[class] :is(.export-choice span,.flash-study-card small,.flash-study-card>span,.lab-eyebrow,.lab-scorebar>span,.maze-legend,.block-index,.block-label,.typing-passages>small,.lab-instructions p,.lab-note p,.lab-tip,.lab-feedback,.rhythm-transport span,.beat-count,.sequence-label,.program-panel>.row small) {color:var(--site-muted)!important}
html[data-theme][data-site-theme] body[class] :is(.free-allowance-grid span,.free-allowance-grid small,.tool-directory-card small,.data-profile span,.series-color-title,.inspector output) {color:var(--site-muted)!important}
html[data-theme][data-site-theme] body[class] .data-profile>div {background:var(--site-soft)!important;color:var(--site-ink)!important;border-color:var(--site-line)!important}
html[data-theme][data-site-theme] body[class] .guides-v42-grid span {color:var(--site-accent)!important}
html[data-theme][data-site-theme] body[class] .showcase-kicker>span {background:var(--site-accent-soft)!important;color:var(--site-ink)!important;box-shadow:none}
html[data-theme][data-site-theme] body[class] :is(.export-choice:hover,.export-choice:focus-visible,.flash-study-card:hover,.match-card.selected) {background:var(--site-accent-soft)!important;border-color:var(--site-accent)!important}
html[data-theme][data-site-theme] body[class] .typing-passage .typed-correct {color:var(--site-success)!important}
html[data-theme][data-site-theme] body[class] .typing-passage .typed-wrong {color:var(--site-danger)!important;background:var(--site-danger-bg)!important;text-decoration:underline}
html[data-theme][data-site-theme] body[class] .typing-passage .typing-cursor {color:var(--site-ink)!important;background:var(--site-accent-soft)!important;border-bottom-color:var(--site-accent)!important}
html[data-theme][data-site-theme] body[class] :is(.match-card.matched,.lab-feedback.success) {color:var(--site-success)!important}
html[data-theme][data-site-theme] body[class] .match-card.matched {background:var(--site-success-bg)!important;opacity:1}
html[data-theme][data-site-theme] body[class] .lab-feedback.error {color:var(--site-danger)!important}
html[data-theme][data-site-theme] body[class] :is(.modal-x,.app-modal-close) {background:var(--site-soft)!important;color:var(--site-ink)!important;border-color:var(--site-line)!important}
body[class] .export-choice {min-width:0;text-align:left;padding:18px!important;cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .18s ease}
body[class] .export-choice b {display:block;font-size:16px;line-height:1.4}
body[class] .export-choice span {display:block;margin-top:5px;font-size:12px;line-height:1.5}
body[class] :is(.modal,.app-modal,.cookie-modal) {max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}
body[class] :is(.export-grid,.form-grid) {min-width:0}
body[class] .export-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
body[class] :is(.export-choice,.flash-study-card,.match-card):focus-visible {outline:2px solid var(--site-accent);outline-offset:3px}

/* Keep the public hire form aligned while giving its hero a real inset. */
html[data-theme][data-site-theme] body.public-body .public-page-main>.hire-hero {
  padding:32px!important;min-height:0!important;margin-bottom:24px!important;
  grid-template-columns:minmax(0,1fr) minmax(240px,.38fr)!important;gap:28px!important;align-items:start;
}
body.public-body .hire-hero>div {min-width:0}
body.public-body .hire-hero aside {min-width:0;align-self:start}
body.public-body .hire-hero h1 {margin:14px 0!important}
body.public-body .hire-hero p {margin:0 0 16px!important}
html[data-theme][data-site-theme] body.public-body .public-page-main>.hire-form-wrap {
  padding:0 0 32px!important;background:transparent!important;box-shadow:none!important;
  grid-template-columns:minmax(0,1fr) minmax(260px,.38fr)!important;gap:20px!important;align-items:start;
}
body.public-body .hire-form {padding:24px!important;border-radius:14px}
html[data-theme][data-site-theme] body.public-body .hire-side-card {padding:24px!important;background:var(--site-surface)!important;color:var(--site-ink)!important;border:1px solid var(--site-line)!important;border-radius:14px}
body.public-body .hire-notes {gap:10px 16px;flex-wrap:wrap}

@media(max-width:1000px) {
  html[data-theme][data-site-theme] body.public-body .public-page-main>:is(.hire-hero,.hire-form-wrap) {grid-template-columns:minmax(0,1fr)!important}
  body.public-body .hire-side-card {position:static!important}
}
@media(max-width:820px) {body.account-body .account-layout {grid-template-columns:minmax(0,1fr)!important}}
@media(max-width:700px) {
  :root {--workspace-space:16px}
  html[data-theme][data-site-theme] body.account-body .account-head,
  html[data-theme][data-site-theme] body.dashboard-page .workspace-head {padding:18px!important;margin-bottom:16px!important}
  body.dashboard-page .workspace-head>.row {justify-content:flex-start;width:100%}
  body.account-body :is(.metric-grid,.metric-row),body.dashboard-page .stat-grid {gap:12px!important}
  html[data-theme][data-site-theme] body.account-body .metric-grid>article,
  html[data-theme][data-site-theme] body.account-body .metric-row>div,
  html[data-theme][data-site-theme] body.dashboard-page .stat-grid>article {padding:16px!important}
  body.dashboard-page .account-workspace .panel {padding:18px!important}
  body.editor-page .site-header {gap:10px!important;padding-inline:12px!important}
  body.editor-page .site-header .brand {min-width:0;max-width:50%;gap:7px}
  body.editor-page .site-header .brand img {width:28px!important;height:28px!important}
  body.editor-page .site-header .brand span {font-size:16px!important;white-space:normal;line-height:1.2}
  body.editor-page .site-header .visual-byline {display:none}
  body.editor-page .site-header .header-actions {min-width:0;gap:6px}
  body.editor-page .site-header .header-actions>.btn {font-size:12px;min-height:36px;padding:7px 8px}
  body.editor-page .editor-title-wrap {flex-basis:100%!important}
  body.editor-page .editor-actions {flex:1 1 100%!important;width:100%!important;margin:0!important;justify-content:flex-end}
  body.editor-page #projectTitle {font-size:15px!important}
  body.editor-page #saveState {max-width:85px;font-size:10px}
  body.editor-page .editor-actions .btn {font-size:12px!important;min-height:34px;padding:7px 10px!important}
  body.editor-page #learningHost .lab-header {margin-bottom:10px!important}
  body.editor-page #learningHost .lab-header p {font-size:12px!important}
  body.editor-page #learningHost .lab-scorebar {padding:10px!important;gap:10px!important;margin-bottom:12px!important}
  body.editor-page #learningHost .lab-scorebar>span {font-size:10px}
  html[data-theme][data-site-theme] body.public-body .public-page-main>.hire-hero {padding:22px!important;gap:20px!important}
  body.public-body .hire-form,html[data-theme][data-site-theme] body.public-body .hire-side-card {padding:20px!important}
}
@media(max-width:460px) {body[class] .export-grid {grid-template-columns:minmax(0,1fr)}body[class] .export-choice {padding:14px!important}}
@media(prefers-reduced-motion:reduce) {body[class] .export-choice {transition:none}}