/* BayRen — the logo at the top of every app (25 Sep 2026).

   Asaf: the brand looked different in every app — a chip with the logo
   squeezed to 30px beside a typed "BayRen Reading" (so BayRen twice), a
   sunrise with a typed "BayRen", a typed wordmark with no logo at all. "It
   all must be the same." He liked Vocabulary and Writing, and picked
   Vocabulary's way: the whole logo straight on the bar, the app's name beside
   it. These numbers ARE Vocabulary's (Vocabulary/static/css/main.css, .brand
   rules); BayRen Platform/test_brand_everywhere.py fails if they drift apart.

     <a class="br-brand" href="…">
       <img class="br-brand-logo" src="{{ brand_url('logo.svg') }}" alt="BayRen Education">
       <span class="br-brand-name">Reading</span>
     </a>

   The name is the app's name alone: the logo already says BayRen.

   Two grounds. On a white bar (every signed-in page) the logo sits straight
   on it. On a navy bar (the front pages kept their navy-and-gold look on 4
   Sep; Listening is navy throughout) the logo sits on a white plate, as it
   always has there, at the same size, and the name is white:
     .br-brand--dark          always on navy (Listening)
     .br-brand--skin          navy until the page wears the white skin
                              (body.br-skin), then white — one header for both
     .br-brand--compact       one step smaller, for a bar with no room (below)
*/

.br-brand {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none; min-width: 0; flex: 0 1 auto;
}
.br-brand:hover, .br-brand:focus { text-decoration: none; }
.br-brand-logo {
  height: 58px; width: auto; display: block; flex-shrink: 0;
  box-sizing: content-box; max-width: none;
}
/* Georgia, because that is what Vocabulary shows: its sheet names Cormorant
   first but never ships the font, so every student sees Georgia there. */
.br-brand-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.45rem; font-weight: 700; line-height: 1.2;
  color: #0a1622; letter-spacing: .01em;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* On navy: the logo on its white plate, the name in white. */
.br-brand--dark .br-brand-logo,
body:not(.br-skin) .br-brand--skin .br-brand-logo {
  height: 50px; padding: 4px 7px; background: #fff; border-radius: 9px;
}
.br-brand--dark .br-brand-name,
body:not(.br-skin) .br-brand--skin .br-brand-name {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  color: #fff;
}

/* Compact: a dense bar that cannot give the logo 58px (the Control Center's
   52px top bar, full of controls) takes Vocabulary's phone size at every
   width — the same logo and the same name, one step smaller. */
.br-brand--compact .br-brand-logo { height: 40px; }
.br-brand--compact.br-brand--dark .br-brand-logo,
body:not(.br-skin) .br-brand--compact.br-brand--skin .br-brand-logo { height: 34px; padding: 3px 5px; }
.br-brand--compact .br-brand-name { font-size: 1.15rem; }

/* Phones — Vocabulary's own steps. */
@media (max-width: 600px) {
  .br-brand-logo { height: 40px; }
  .br-brand--dark .br-brand-logo,
  body:not(.br-skin) .br-brand--skin .br-brand-logo { height: 34px; padding: 3px 5px; }
  .br-brand-name { font-size: 1.15rem; }
}
@media (max-width: 480px) {
  .br-brand { gap: .4rem; }
  .br-brand-logo { height: 38px; }
  .br-brand--dark .br-brand-logo,
  body:not(.br-skin) .br-brand--skin .br-brand-logo { height: 32px; }
  .br-brand-name { font-size: 1.02rem; }
}
@media (max-width: 420px) {
  .br-brand-logo { height: 34px; }
  .br-brand--compact .br-brand-logo { height: 34px; }
  .br-brand--dark .br-brand-logo,
  body:not(.br-skin) .br-brand--skin .br-brand-logo { height: 28px; }
  /* The name and the buttons beside it do not fit together here; the name
     goes, the logo still says BayRen. */
  .br-brand-name { display: none; }
}
@media (pointer: coarse) {
  .br-brand { min-height: 44px; }
}