/* Shared application navigation. Teacher prototype styling lives in teacher-dashboard.css. */
:root { --app-header-height: 64px; }
.app-header { position: absolute; inset: 0 0 auto; height: var(--app-header-height); z-index: 30; display: flex; align-items: center; gap: var(--kyj-space-24); padding: 0 var(--kyj-space-24); background: var(--kyj-color-panel); border-bottom: 1px solid var(--kyj-color-border-panel); }
.app-brand { font: var(--kyj-font-label-weight) var(--kyj-font-label-size)/var(--kyj-font-label-line) var(--kyj-font-family); flex-shrink: 0; min-height: var(--kyj-control-height); }
#feature-nav { display: flex; align-self: stretch; gap: var(--kyj-space-24); }
#feature-nav button { position: relative; font-size: var(--kyj-font-label-size); white-space: nowrap; }
#feature-nav button[aria-current] { font-weight: var(--kyj-font-label-weight); }
#feature-nav button[aria-current]::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--kyj-color-brand); }
.app-demo-label { margin-left: auto; font-size: var(--kyj-font-caption-size); white-space: nowrap; }
.explorer, .selection.detail-prototype { top: var(--app-header-height); }
#loading { top: var(--app-header-height); }
#app[data-mode]:not([data-mode=graph]) :is(.explorer,#selection,#universe,#labels,#empty-state) { visibility: hidden; pointer-events: none; }
.wf-actions { display: flex; flex-wrap: wrap; gap: var(--kyj-space-8); margin-top: var(--kyj-space-16); }
.wf-button { display: inline-flex; justify-content: center; align-items: center; min-height: var(--kyj-control-height); border: 1px solid var(--kyj-color-text-secondary); border-radius: var(--kyj-radius-control); padding: var(--kyj-space-8) var(--kyj-space-16); font: inherit; }
.wf-button.primary { color: var(--kyj-color-panel); background: var(--kyj-color-action-primary); border-color: var(--kyj-color-action-primary); }
.wf-button:hover { background: var(--kyj-color-surface-hover); }
.wf-button.primary:hover { background: var(--kyj-color-action-hover); }
@media (max-width: 767px) {
  :root { --app-header-height: 108px; }
  .app-header { padding: var(--kyj-space-8) var(--kyj-space-16) 0; flex-direction: column; align-items: flex-start; gap: 0; }
  .app-brand { min-height: 44px; }
  #feature-nav { min-height: 56px; width: 100%; }
  #feature-nav button, .wf-button { min-height: 44px; }
}