/* GreenLoop UI v2 — overrides for v1's inline responsive layer.

   components/responsive.html (v1, kept because pages and tests rely on its
   table-cards, hint and quick-bar behaviour) is an unlayered inline <style>,
   so the layered design system cannot outrank it. This file is unlayered too
   and loads after it: only colours, radii and type are changed here, never
   layout or display, so the behaviour stays exactly as v1. */

/* responsive.html sizes `.gl-logo` for the v1 navbar (38px / 30px); the v2
   sidebar and auth logos keep that class (tests look for it) but size themselves. */
.gl-nav-brand .gl-logo { height: 46px; width: auto; max-width: 120px; display: block; }
html.gl-mini .gl-nav-brand .gl-logo { height: 24px; max-width: 56px; }
@media (max-width: 1199.98px) { html.gl-mini .gl-nav-brand .gl-logo { height: 46px; max-width: 120px; } }
.gl-login-mobile-logo .gl-logo { height: 40px; width: auto; }

@media (max-width: 575.98px) {
  .mobile-bar {
    background: rgb(255 255 255 / 0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgb(145 158 171 / 0.16);
    box-shadow: 0 -8px 24px -8px rgb(145 158 171 / 0.24);
  }
  .mobile-bar a { color: var(--gl-text-secondary); font-family: var(--gl-font-primary); }
  .mobile-bar a:active { background: var(--gl-action-hover); }
  .mobile-bar a.is-here { color: var(--gl-primary-dark); }
  .gl-info { border-color: rgb(145 158 171 / 0.32); color: var(--gl-text-secondary); }
  .gl-info[aria-expanded="true"] { background: rgb(0 167 111 / 0.08); border-color: rgb(0 167 111 / 0.32); color: var(--gl-primary-dark); }
  /* Toasts sit above the quick bar instead of on it. */
  .gl-toasts { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}