/* Tetrahedron glass topbar component.
   Opt in with data-tetra-topbar="glass" on body and load this stylesheet
   after tetra-kairos-skin.css. The existing topbar-shell.js data contract is
   unchanged, so the component can be adopted page by page. */
body[data-tetra-topbar="glass"] .topbar{
  height:auto!important;
  min-height:76px;
  margin:0!important;
  padding:10px 18px!important;
  border-radius:0!important;
  background:linear-gradient(90deg,rgba(82,190,255,.025),rgba(143,92,255,.018) 48%,rgba(255,255,255,.008))!important;
  border-bottom:1px solid rgba(255,255,255,.055)!important;
  box-shadow:none!important;
  backdrop-filter:blur(12px) saturate(105%)!important;
  -webkit-backdrop-filter:blur(12px) saturate(105%)!important;
}
/* In Midnight dark mode the page canvas is the topbar surface. Keeping the
   component transparent prevents the legacy blue glass layer from creating a
   second horizontal band while preserving its spacing and controls. */
:root[data-tetra-theme="dark"] body[data-tetra-topbar="glass"] .topbar{
  background:transparent!important;
  background-image:none!important;
  border-bottom-color:var(--tts-line)!important;
}
body[data-tetra-topbar="glass"] .topbar-left{
  gap:10px;
  min-width:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
body[data-tetra-topbar="glass"] .topbar-left .school-logo{
  width:42px;
  height:42px;
  padding:4px;
  border:1px solid rgba(255,255,255,.88);
  border-radius:999px;
  background:#fff;
  box-shadow:0 4px 14px rgba(5,4,18,.24);
}
body[data-tetra-topbar="glass"] .topbar-left .school-logo img{
  width:100%;
  height:100%;
  border-radius:999px;
  object-fit:contain;
  object-position:center;
}
body[data-tetra-topbar="glass"] .topbar-left .school-name,
body[data-tetra-topbar="glass"] .topbar-left .topbar-school-name{
  color:rgba(255,255,255,.96);
  font-size:14px;
  font-weight:800;
}
body[data-tetra-topbar="glass"] .topbar-left .school-sub{
  margin-top:3px;
  color:rgba(255,255,255,.58);
  font-size:10.5px;
  font-weight:650;
  letter-spacing:.025em;
}
@media(max-width:719px){
  body[data-tetra-topbar="glass"] .topbar{min-height:64px;margin:0!important;padding:8px 10px!important;border-radius:0!important}
  body[data-tetra-topbar="glass"] .topbar-left{min-width:0;max-width:56%;padding:0;border-radius:0}
  body[data-tetra-topbar="glass"] .topbar-left .school-logo{width:36px;height:36px}
  body[data-tetra-topbar="glass"] .topbar-left .school-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
}