/* One sizing rhythm for live text controls; illustrated scene targets are exempt. */
:root{--control-height:42px;--control-icon:40px;--control-gap:10px}
html body:is(.watercolor-home,.watercolor-cabinet) :is(#app,#modal,#header) .wc-ref-button:not([data-wc-no-skin]):not(.material):not(.wc-ref-icon):not(.avatar-edit){min-height:var(--control-height)!important;height:auto!important;padding:10px 18px!important;font-size:14px!important;line-height:1.35!important;flex-shrink:0;vertical-align:middle;overflow-wrap:anywhere}
html body:is(.watercolor-home,.watercolor-cabinet) :is(#app,#modal,#header) .wc-ref-icon:not(.theme-btn){width:var(--control-icon)!important;min-width:var(--control-icon)!important;height:var(--control-icon)!important;min-height:var(--control-icon)!important;padding:8px!important;flex-shrink:0}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-button-label{min-width:0;max-width:100%;line-height:1.35!important;overflow-wrap:anywhere}
html body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button:not(.wc-ref-painted):not(.wc-ref-nav)>.wc-ref-surface{background:linear-gradient(170deg,#f9faf0,#e0e9dd 57%,#c9dcd5)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:1px solid #a28a5d!important;box-shadow:inset 0 1px 1px #ffffffe6,inset 0 -2px 2px #5b8f8a40,0 2px 3px #173c4124!important}
html[data-theme=dark] body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button:not(.wc-ref-painted):not(.wc-ref-nav)>.wc-ref-surface{background:linear-gradient(170deg,#396573,#163e4c 57%,#245867)!important;border-color:#ad9c72!important}
html[data-theme=dark] body:is(.watercolor-home,.watercolor-cabinet) .wc-ref-button:not(.wc-ref-painted){color:#fff5dc!important;text-shadow:0 1px 1px #062733!important}
:is(.section-head,.page-head,.form-actions,.action-row,.inline-actions){gap:var(--control-gap);flex-wrap:wrap;align-items:center}
:is(.page-head,.section-head)>:is(div,h1,h2,h3){min-width:0;overflow-wrap:anywhere}
.section-head>:is(h2,h3){flex:1 1 160px}
.page-head>div:first-child{flex:1 1 260px}
:is(.form-actions,.action-row,.inline-actions)>:is(button,a){align-self:stretch}
:is(.grid,.dashboard-grid,.lesson-layout,.lesson-main,.lesson-aside,.column,.tile-copy){min-width:0}
.lesson-layout{grid-template-columns:minmax(0,1fr) minmax(250px,300px);align-items:start}
.lesson-main,.lesson-aside{display:grid;gap:18px;align-content:start}
.lesson-aside>section{min-width:0;overflow:visible}
.lesson-aside .assistant{display:grid!important;grid-template-columns:80px minmax(0,1fr)!important;gap:8px 12px!important;align-items:center;padding:20px!important;min-height:0!important}
.lesson-aside .assistant>img{position:static!important;grid-column:1;grid-row:1/4;width:80px!important;height:auto!important;max-height:150px;object-fit:contain;transform:none!important;margin:0!important}
.lesson-aside .assistant>:is(h2,small,p){grid-column:2;margin:0!important;position:static!important;width:auto!important;font-size:inherit}
.lesson-aside .assistant>h2{font-size:22px!important}
.lesson-aside .assistant>.primary{grid-column:1/-1;width:100%;margin:8px 0 0!important;position:relative!important;inset:auto!important}
.lesson-tabs,.category-tabs{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.material-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.material{min-width:0;overflow-wrap:anywhere;white-space:normal}
.vartl-bubble{padding-right:24px!important}.vartl-bubble>.icon-btn{position:absolute!important;right:8px!important;top:8px!important}.vartl-bubble>h3{padding-right:32px}.vartl-bubble>.primary{margin-top:12px}
#modal-body :is(input,textarea,select){max-width:100%;min-width:0}
/* Explicit grid areas keep legacy role-specific flex orders from placing the
   tools and navigation in the same grid track. This includes support view. */
html body:is(.watercolor-home,.watercolor-cabinet) #header.topbar{display:grid;grid-template-columns:210px minmax(0,1fr) auto;grid-template-areas:"brand nav tools";align-items:center;gap:16px 20px;padding-inline:0}
html body:is(.watercolor-home,.watercolor-cabinet) #header>.brand{grid-area:brand;order:0;justify-self:start;width:210px;max-width:100%;min-width:0}
html body:is(.watercolor-home,.watercolor-cabinet) #header>.brand img{width:100%;max-width:100%}
html body:is(.watercolor-home,.watercolor-cabinet) #header>.nav{grid-area:nav;order:0;display:flex;flex-wrap:wrap;align-items:stretch;min-width:0;width:100%;max-width:100%;overflow:visible;gap:4px;box-sizing:border-box}
html body:is(.watercolor-home,.watercolor-cabinet) #header>.nav>a{flex:1 1 115px;min-width:0;max-width:100%;white-space:normal;text-align:center}
html body:is(.watercolor-home,.watercolor-cabinet) #header>.tools{grid-area:tools;order:0;display:flex;flex-shrink:0;justify-self:end;justify-content:flex-end;align-items:center;min-width:0;gap:8px;margin:0}
html body:is(.watercolor-home,.watercolor-cabinet) #header .theme-btn{width:76px;min-width:76px;height:var(--control-icon);min-height:var(--control-icon);padding:5px!important;gap:6px}
html body:is(.watercolor-home,.watercolor-cabinet) :is(.form-actions,.action-row,.inline-actions){min-width:0;max-width:100%}
html body:is(.watercolor-home,.watercolor-cabinet) :is(.form-actions,.action-row,.inline-actions)>:is(button,a){min-width:0;max-width:100%;white-space:normal}
.wc-ref-sweep{animation:none!important}.wc-ref-button:hover .wc-ref-sweep{animation:wc-glass-sweep 1.2s ease-out 1!important}
@media(max-width:1400px){html body:is(.watercolor-home,.watercolor-cabinet) #header.topbar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand tools" "nav nav";row-gap:12px}html body:is(.watercolor-home,.watercolor-cabinet) #header>.nav>a{flex-basis:130px}}
@media(max-width:900px){.page-head>div:first-child{flex:0 1 auto;width:100%}.lesson-layout{grid-template-columns:1fr}.lesson-aside{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}}
@media(max-width:760px){html body:is(.watercolor-home,.watercolor-cabinet) #header>.brand{width:162px;height:62px}html body:is(.watercolor-home,.watercolor-cabinet) #header>.brand img{height:62px}html body:is(.watercolor-home,.watercolor-cabinet) #header>.tools{gap:6px}html body:is(.watercolor-home,.watercolor-cabinet) #header>.nav>a{flex-basis:145px}}
@media(max-width:520px){.section-head>.wc-ref-button,.page-head>.wc-ref-button{max-width:100%}.lesson-aside{grid-template-columns:1fr}.form-actions>:is(button,a){flex:1 1 140px}#modal{padding:18px}.vartl-reminder{max-width:calc(100vw - 24px)}html body:is(.watercolor-home,.watercolor-cabinet) #header.topbar{grid-template-columns:minmax(0,1fr);grid-template-areas:"brand" "tools" "nav";row-gap:10px;justify-items:center}html body:is(.watercolor-home,.watercolor-cabinet) #header>.brand,html body:is(.watercolor-home,.watercolor-cabinet) #header>.tools{justify-self:center}html body:is(.watercolor-home,.watercolor-cabinet) #header>.nav{border-radius:24px}html body:is(.watercolor-home,.watercolor-cabinet) #header>.nav>a{flex-basis:calc(50% - 4px)}}