/* Top bar: school logo and name, page links, signed-in user. Colors come from the school's branding. */
.bar {
   background: var(--bar);
   color: var(--bar-fg);
   padding-inline: 16px;
   transition:
      background 0.25s,
      color 0.25s;
}
.bar-in {
   max-width: 1280px;
   margin: 0 auto;
   display: flex;
   align-items: center;
   gap: 12px 16px;
   flex-wrap: wrap;
   padding-block: 10px;
}

/* Logo (also used by the Settings preview bar) */
.logo {
   display: flex;
   align-items: center;
   gap: 10px;
   font-family: var(--font-display);
   font-weight: 700;
   font-size: 22px;
   min-width: 0;
}
a.logo {
   color: inherit;
   text-decoration: none;
   border-radius: 8px;
}
a.logo:hover #brandName {
   text-decoration: underline;
   text-decoration-thickness: 2px;
   text-underline-offset: 4px;
   text-decoration-color: color-mix(in srgb, var(--bar-fg) 45%, transparent);
}
a.logo:focus-visible {
   outline: 2px solid var(--bar-fg);
   outline-offset: 4px;
}
.logo-mark {
   width: 30px;
   height: 30px;
   border-radius: 6px;
   background: var(--brand);
   display: grid;
   place-items: center;
   color: var(--bar);
}
.logo small {
   font-family: var(--font-body);
   font-weight: 500;
   font-size: 12px;
   opacity: 0.7;
   letter-spacing: 0.06em;
   text-transform: uppercase;
}
.logo-text {
   display: flex;
   align-items: baseline;
   gap: 2px 10px;
   flex-wrap: wrap;
   min-width: 0;
   overflow-wrap: anywhere;
}
.logo-mark.has-img {
   background: transparent;
   width: auto;
   height: 34px;
}
.logo-mark.has-img img {
   height: 34px;
   width: auto;
   max-width: 120px;
   object-fit: contain;
   display: block;
}

/* Page links */
.main-nav {
   display: flex;
   gap: 4px;
   flex-wrap: wrap;
}
.main-nav a {
   color: var(--bar-fg);
   text-decoration: none;
   font-weight: 600;
   font-size: 14px;
   padding: 6px 12px;
   border-radius: 6px;
   opacity: 0.78;
}
.main-nav a:hover {
   opacity: 1;
   background: color-mix(in srgb, var(--bar-fg) 10%, transparent);
}
.main-nav a[aria-current="page"] {
   opacity: 1;
   background: color-mix(in srgb, var(--bar-fg) 18%, transparent);
}

/* Signed-in user */
.who {
   margin-left: auto;
   font-size: 12px;
   opacity: 0.85;
   display: flex;
   align-items: center;
   gap: 8px;
}
.who .dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--idle);
}
.who .dot.live {
   background: var(--live);
}
.who .btn {
   padding: 3px 10px;
   font-size: 12px;
   background: transparent;
   color: var(--bar-fg);
   border-color: color-mix(in srgb, var(--bar-fg) 35%, transparent);
}
.who .btn:hover {
   background: color-mix(in srgb, var(--bar-fg) 12%, transparent);
}
.who-name {
   border: 0;
   background: none;
   padding: 2px 4px;
   border-radius: 4px;
   color: inherit;
   font-size: 12px;
   cursor: pointer;
   text-decoration: underline;
   text-decoration-color: color-mix(in srgb, var(--bar-fg) 35%, transparent);
   text-underline-offset: 3px;
}
@media (pointer: coarse) {
   .who .btn,
   .who-name {
      padding: 6px 10px;
   }
}
.who-name:disabled {
   cursor: default;
   text-decoration: none;
}
.who-name:not(:disabled):hover {
   background: color-mix(in srgb, var(--bar-fg) 12%, transparent);
}