/* Shared control variants. Page layout stays in its section stylesheet. */
@media screen{
:where(.editor,.bank-panel,.home-view,.students-view,dialog,.site-sidebar,.project-toolbar,.desktop-app-bar,.top,.mobile-mode-switch) .primary,.editor .primary,.preflight-actions .primary{background:var(--ui-teal);color:#fff;min-height:var(--ui-control-height)}
:where(.editor,.bank-panel,.home-view,.students-view,dialog,.site-sidebar,.project-toolbar,.desktop-app-bar,.top,.mobile-mode-switch) .primary:hover,.editor .primary:hover,.preflight-actions .primary:hover{background:var(--ui-teal-dark)}
:where(.editor,.bank-panel,.home-view,.students-view,dialog,.site-sidebar,.project-toolbar,.desktop-app-bar,.top,.mobile-mode-switch) .subtle,.history-actions button,.project-item button,.home-project-tools button,.name-actions button{background:var(--ui-surface);border:1px solid var(--ui-button-border);color:var(--ui-button-text);min-height:40px}
:where(.editor,.bank-panel,.home-view,.students-view,dialog,.site-sidebar,.project-toolbar,.desktop-app-bar,.top,.mobile-mode-switch) .subtle:hover,.history-actions button:hover,.project-item button:hover,.home-project-tools button:hover,.name-actions button:hover{background:var(--ui-teal-soft)}
:where(.editor,.bank-panel,.home-view,.students-view,dialog,.site-sidebar,.project-toolbar,.desktop-app-bar,.top,.mobile-mode-switch) .add{background:var(--ui-teal-soft);border:1px dashed #69adb0;color:#075d65;min-height:46px}
:where(.editor,.bank-panel,.home-view,.students-view,dialog,.site-sidebar,.project-toolbar,.desktop-app-bar,.top,.mobile-mode-switch) .add:hover{background:#d5edeb;border-color:var(--ui-teal)}
:where(.editor,.bank-panel,.home-view,.students-view,dialog,.site-sidebar,.project-toolbar,.desktop-app-bar,.top,.mobile-mode-switch) .danger{border:1px solid var(--ui-danger-border);background:var(--ui-danger-surface);color:var(--ui-danger-text);min-height:40px}
:where(.editor,.bank-panel,.home-view,.students-view,dialog,.site-sidebar,.project-toolbar,.desktop-app-bar,.top,.mobile-mode-switch) .danger:hover{background:var(--ui-danger-hover)}
:where(.editor,.bank-panel,.home-view,.students-view,dialog,.site-sidebar,.project-toolbar,.desktop-app-bar,.top,.mobile-mode-switch) :where(button,input,select,textarea,a):focus-visible{outline:3px solid var(--ui-focus);outline-offset:2px}
:where(.editor,.bank-panel,.home-view,.students-view,dialog,.site-sidebar,.project-toolbar,.desktop-app-bar,.top,.mobile-mode-switch) button:disabled{opacity:.58;cursor:not-allowed}
}