/* =====================================================================
   Hungry Lion — the few places the kit needs more than tokens.

   Load AFTER console.css. The kit itself (../console-kit/) is vendored
   and stays unedited, so a new kit version drops in; every Hungry Lion
   departure from it lives here, and each one says why.
   ===================================================================== */

/* ---- The app bar is Hungry Lion red --------------------------------
   The logo is drawn on its own red field; putting it on red is how the
   brand book's artwork is used, and it makes the console unmistakably
   Hungry Lion without a single red button in the content. White text
   on this red is 5.16:1, so everything secondary on the bar goes white
   rather than the kit's pale tint (which drops to 4.4:1 here).        */
.appbar { background: var(--hl-red); }
.appbar .tag,
.appbar .who-mini small { color: #fff; }
.appbar .tag { border-color: rgba(255,255,255,.55); }
.railtoggle { color: #fff; }
.railtoggle:hover { background: rgba(0,0,0,.14); }
.railtoggle:focus-visible { outline-color: #fff; }

/* The lion itself, no box: the kit frames a monogram, but a real mark
   on its own field needs no frame. */
.appbar .brand .mark {
  width: 40px; height: 40px; flex-basis: 40px;
  background: none; border: 0;
}
.appbar .brand .mark img { width: 40px; height: 40px; display: block; }

/* HUNGRY in white, LION in yellow: the logotype, set in the UI face.
   Logotype is exempt from text contrast rules; it is still 3.8:1.     */
.appbar .brand .wordmark { font-weight: 800; letter-spacing: .06em; }
.appbar .brand .wordmark span { color: var(--hl-yellow); font-weight: 800; }

/* ---- Eyebrows carry the brand red on light surfaces -----------------
   7.4:1 on white, 6.8:1 on the page. The one place red is text in the
   content, and it is never clickable, so it cannot be mistaken for a
   destructive action.                                                  */
.eyebrow, legend { color: var(--hl-red-deep); }

/* ---- Focus ring: the kit's is a cool blue wash ----------------------- */
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(58, 42, 37, .14);
}

/* ---- Sidebar counts: yellow badge for "needs you" --------------------
   The kit prints counts as pale numbers. In a recruiter's day the count
   IS the call to action (6 documents waiting), so it gets the accent.
   Yellow on the dark chrome, dark text on yellow: 14.6:1.              */
.navlink .count {
  background: var(--hl-yellow); color: var(--chrome-deep);
  border-radius: var(--r-pill); padding: .05rem .45rem;
  font-weight: 700; font-size: .7rem; opacity: 1;
}
.navlink .count:empty, .navlink .count[data-zero] { display: none; }

/* ---- Warm the chrome's text tints -------------------------------------
   The kit's nav and footer tints are cool greys tuned for navy. On the
   brown-black sidebar they read as blue-grey; these are the same
   lightness, warmed. 11.2:1 and 9.4:1 on --chrome.                    */
.navlink { color: rgba(240, 228, 222, .84); }
.side-foot { border-top-color: rgba(240, 228, 222, .12); }
.side-foot .tagline { color: rgba(245, 236, 230, .72); }
body.nav-rail .side-label { background: rgba(240, 228, 222, .16); }