/* TNPSC lane nav — one bar, two shapes.
 *
 * TOP ON A WIDE SCREEN, BOTTOM ON A PHONE. Not a style choice: on a phone the
 * five destinations have to be reachable by a thumb on a page that is already
 * scrolled, and a top bar is the one place a thumb cannot go. On a desktop the
 * bottom edge is the furthest point from where the eye is, and a floating bar
 * there reads as a cookie notice. Same markup, same order, same active state —
 * the breakpoint only moves it.
 *
 * The lane is dark (reels, arena) and light (daily test, topics, dashboard), so
 * the bar carries its own surface rather than inheriting one. It is deliberately
 * the same object on both: a learner crossing from a dark page to a light one
 * should not have to re-find the nav.
 */

.bgn {
  --bgn-h: 58px;
  /* `top: auto` is not redundant. This bar lands on pages that style bare
     selectors, and it is a div precisely so none of that reaches it — but it also
     has to be immune to whatever the next page does, so every edge it depends on
     is stated rather than defaulted. */
  position: fixed; left: 0; right: 0; top: auto; z-index: 9000;
  display: flex; align-items: stretch;
  background: #10091d;
  border-top: 1px solid rgba(255,255,255,.10);
  /* iOS home-bar. The padding is INSIDE the bar so the surface still reaches the
     screen edge — a bar that stops short of the bottom on an iPhone looks broken,
     not safe. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  font-family: inherit;
  /* It sits above anything else claiming the floor. NOT --bg-bottom-inset: this
     bar is itself part of that sum now, so reading it would make the bar offset
     itself by its own height and climb the screen. tnpsc-nav.js sets this to the
     total MINUS its own slot — today, the cookie notice. */
  bottom: var(--bgn-below, 0px);
}

.bgn a {
  /* `flex: 1 1 0` with min-width:0 and overflow:hidden is what keeps five equal
     columns equal. Content-sized flex let the longest Tamil label push its
     neighbours over, and the fifth item's icon was clipped off the right edge of
     the screen — the columns were never equal, they just looked it in English. */
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-width: 0; overflow: hidden; padding: 0 2px; height: var(--bgn-h);
  color: rgba(255,255,255,.62); text-decoration: none;
  font-size: .62rem; font-weight: 800; letter-spacing: .01em;
  -webkit-tap-highlight-color: transparent;
}
.bgn a .bgn-ic { font-size: 1.18rem; line-height: 1; transition: transform .09s ease }
.bgn a:active .bgn-ic { transform: scale(.88) }

/* The label is the whole point of five items rather than five glyphs — an icon
   alone cannot distinguish "Mock" from "Practice". So it never truncates into
   an ellipsis; it shrinks. */
.bgn a .bgn-lb {
  max-width: 100%; overflow: hidden; text-overflow: clip; white-space: nowrap;
  /* Tamil hangs vowel marks below the baseline and they were touching the bar's
     bottom edge. Line-height, not padding, so the row stays vertically centred. */
  line-height: 1.35;
}
/* the short label on the floor, the full one on the strip — both are in the DOM
   so nothing has to be re-written when the breakpoint is crossed */
.bgn .bgn-lb-f { display: none }
@media (min-width: 820px) {
  .bgn .bgn-lb-s { display: none }
  .bgn .bgn-lb-f { display: inline }
}

.bgn a.on { color: #fff }
.bgn a.on .bgn-ic { transform: translateY(-1px) }
/* the active mark rides the TOP edge on a bottom bar, so it points at the bar's
   boundary with the page rather than into the phone's home bar */
.bgn a.on::before {
  content: ''; position: absolute; top: 0; width: 34px; height: 3px;
  background: var(--bgr-gold, #ffb703); border-radius: 0 0 4px 4px;
}
.bgn a { position: relative }

/* Tamil sets wider than English at the same size and these are five columns on a
   360px screen. One step down keeps "தலைப்புப் பயிற்சி" on one line instead of
   letting it clip mid-word. */
.bgn[data-lang="ta"] a { font-size: .55rem }

/* ============================ wide screen ============================
   820px is where the lane's own pages stop being a single phone column. Above it
   the bar detaches from the floor and becomes a strip under the site header. */
@media (min-width: 820px) {
  .bgn {
    /* Sticky, and in the DOM directly after the site header, so the two stack:
       the header holds top:0 and this comes to rest against its underside. Fixed
       would have meant reserving space for it by hand on every page. */
    position: sticky; top: var(--bgn-top-offset, 0px); bottom: auto; padding-bottom: 0;
    border-top: 0; border-bottom: 1px solid rgba(255,255,255,.10);
    justify-content: center; gap: 4px;
  }
  .bgn a {
    flex: 0 0 auto; flex-direction: row; gap: 8px; height: 46px; padding: 0 18px;
    font-size: .78rem; border-radius: 0;
  }
  .bgn[data-lang="ta"] a { font-size: .74rem }
  .bgn a .bgn-ic { font-size: 1rem }
  .bgn a:hover { color: #fff; background: rgba(255,255,255,.06) }
  /* on a top bar the mark belongs on the bottom edge, for the same reason it sat
     on the top edge of the bottom bar: against the page, not against the frame */
  .bgn a.on::before { top: auto; bottom: 0; border-radius: 4px 4px 0 0; width: 100% }
}

/* THE REELS PAGE IS NOT A DOCUMENT. `body.fit` never scrolls and #shell is fixed
   over the whole viewport, so a sticky bar has no scroll to stick to — it sat
   wherever the empty body flow left it, at y=427, behind the shell. It is fixed
   to the top there instead, and the shell gives up that strip below. */
@media (min-width: 820px) {
  body.fit .bgn { position: fixed; top: 0; bottom: auto }
}

/* The reels page is a fixed full-screen shell that does not scroll, so nothing
   about it moves out from under a bottom bar on its own. Its shell stops short
   instead, which also keeps the snap points a full card tall. */
#shell.bgn-inset {
  bottom: calc(var(--bgn-own-h, 0px) + env(safe-area-inset-bottom, 0px));
  /* on a wide screen the bar is the strip at the top, so the shell yields there
     instead — a full-height fixed shell would simply cover it */
  top: var(--bgn-top-h, 0px);
}