/* ============================================================
   tell_logo.css — TELL brand mark (.tell-logo) component
   Deploy to: website/static/css/tell_logo.css

   Standalone copy of the .tell-logo styles so areas that DON'T load
   layout.css (login, student) can render the _brand_logo.html macro
   and look identical to the sidebar logo. Every --tell-* reference
   carries a hex fallback, so it works even where those tokens aren't
   defined (e.g. the student theme, which uses --s-* tokens).

   Teacher/institution already get these rules from layout.css. If you
   want a single source of truth, delete the ".tell-logo" block from
   layout.css and load THIS file there too — but that's optional; the
   rules are identical, so duplication is harmless until the logo changes.
   ============================================================ */

.tell-logo {
    display: inline-flex;
    align-items: flex-end;
    gap: 7px;
    line-height: 1;
    user-select: none;
}

.tell-logo__bars { display: block; flex-shrink: 0; width: auto; }

.tell-logo__bar--1 { fill: var(--tell-b2, #E0613A); }   /* coral  — shortest */
.tell-logo__bar--2 { fill: var(--tell-a2, #7FB84E); }   /* green  */
.tell-logo__bar--3 { fill: var(--tell-a1, #4F90D9); }   /* blue   */
.tell-logo__bar--4 { fill: var(--tell-b1, #F2B838); }   /* amber  */
.tell-logo__bar--5 { fill: #ffffff; }                   /* peak on dark */
.tell-logo--on-light .tell-logo__bar--5 { fill: var(--tell-navy, #1D3A5C); }

.tell-logo__word {
    font-family:    var(--font-main, "Rubik", system-ui, sans-serif);
    font-weight:    600;
    letter-spacing: -0.02em;
    line-height:    0.85;
    color:          #ffffff;
}
.tell-logo--on-light .tell-logo__word { color: var(--tell-navy, #1D3A5C); }
.tell-logo__e { color: var(--tell-coral, #E0613A); }

.tell-logo--sm .tell-logo__bars { height: 18px; }
.tell-logo--sm .tell-logo__word { font-size: 20px; }
.tell-logo--md .tell-logo__bars { height: 24px; }
.tell-logo--md .tell-logo__word { font-size: 25px; }
.tell-logo--lg .tell-logo__bars { height: 34px; }
.tell-logo--lg .tell-logo__word { font-size: 40px; }