/* The shell every page wears: the sticky nav, the brand, the language switch,
   the one button, the footer and the soft background circles.
   Extracted from landing.css so that the landing page and the app pages cannot
   wear two different headers — there is one implementation and both use it. */

/* ============================================================
   EXAMUST — landing page
   Mobile first. Everything below 721px is the default; wider
   screens only add columns and air. Nothing here is decorative
   for its own sake: the pastels carry meaning (lime = ready,
   lavender = the action, peach = waiting).
   ============================================================ */

/* 1080px left a wide screen empty down both sides — the nav worst of all,
   with the logo stranded a third of the way in from the edge. The container
   is now 1600 and the gutter grows with the window, so the page reaches
   toward the edges instead of sitting in a column in the middle.
   The nav uses this same width, so the logo lines up with the content under
   it rather than floating on its own margin.
   Long lines are prevented separately, by capping the text — never by
   starving the whole page of width. */
.wrap{width:100%;max-width:1600px;margin:0 auto;padding:0 var(--gut)}

/* ------------------------------------------------------------
   Decorative blobs — the reference design floats soft circles
   behind the page. They are pure ornament, so they sit in an
   aria-hidden layer that never intercepts a tap.
   ------------------------------------------------------------ */
.blobs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.blob{position:absolute;border-radius:50%;opacity:.75}
.blob.ring{background:none;border:1.5px solid var(--line-2);opacity:.9}

/* ------------------------------------------------------------
   Shared shapes
   ------------------------------------------------------------ */
.cta, .btn{border:0;border-radius:var(--pill);background:var(--accent);color:#fff;
  font-family:var(--f);font-weight:800;font-size:14px;letter-spacing:.01em;
  padding:13px 22px;min-height:46px;cursor:pointer;white-space:nowrap;
  box-shadow:0 10px 22px rgba(111,103,214,.26);
  transition:transform .14s ease,box-shadow .14s ease,background .14s ease}
.cta:hover, .btn:hover{background:var(--accent-d);transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(111,103,214,.32)}
.cta:active, .btn:active{transform:translateY(0)}
/* THE OUTLINE IS DRAWN INSIDE, NOT ADDED OUTSIDE.
 *
 * The solid button above is `border:0`; this one added `border:1.5px`, and a
 * border is outside the padding box — so a ghost button came out 51.4px tall
 * against its solid twin's 48.4px. Three pixels, on every pair of buttons
 * standing next to each other, on every page. It reads as "something is
 * slightly off" rather than as anything you can name, which is the worst
 * kind of wrong.
 *
 * An inset box-shadow paints the same 1.5px line and occupies no space, so
 * the two heights are identical by construction rather than by remembering
 * to subtract 1.5px of padding here and nowhere else. `.p-cta.ghost` in
 * landing.css was already doing exactly this; this is the rest of the
 * product catching up with the one that got it right. */
.cta.ghost, .btn.ghost{background:var(--paper);color:var(--ink);border:0;
  box-shadow:inset 0 0 0 1.5px var(--line-2), var(--shadow-sm)}
.cta.ghost:hover, .btn.ghost:hover{background:var(--lav-soft);
  box-shadow:inset 0 0 0 1.5px var(--lav-line), var(--shadow-sm)}
.cta.lime, .btn.lime{background:var(--lime);color:var(--ink);box-shadow:0 10px 22px rgba(178,214,96,.35)}
.cta.lime:hover, .btn.lime:hover{background:var(--lime-line)}

/* ------------------------------------------------------------
   Nav
   ------------------------------------------------------------ */
.nav{position:sticky;top:0;z-index:60;background:rgba(251,250,246,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:8px;min-height:62px;
  max-width:1600px;margin:0 auto;padding:8px var(--gut)}
/* The new mark is rendered on its own soft gradient rather than on
   transparency, so it is framed as a tile instead of being left to sit as a
   pale rectangle on the cream. Rounded and faintly outlined, it reads as one
   deliberate object — the same language as the clay icons further down. */
.brand{display:inline-flex;align-items:center;gap:10px;flex:none;
  text-decoration:none;color:var(--ink)}
.brand-t{font-family:var(--f);font-size:19px;font-weight:900;letter-spacing:-.025em;
  line-height:1}
.brand-t i{font-style:normal;color:var(--lime-ink)}

/* ── WHAT THE NAME IS FOR, UNDER THE NAME ────────────────────────────────
 *
 * The wordmark and the strapline are one block beside the logo, so they stack
 * against each other rather than against the bar: the pair stays centred on
 * the mark whatever either line does. Deliberately quiet — it is a label, not
 * a second brand, and it must never out-weigh the name it sits under or the
 * one button on this bar anybody is meant to press. */
.brand-w{display:flex;flex-direction:column;gap:3px;min-width:0}
.brand-s{
  font-family:var(--f);font-size:9.5px;font-weight:800;line-height:1;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;
}
@media (max-width:520px){ .brand-t{font-size:16px} .brand{gap:8px}
  .brand-s{font-size:8.5px;letter-spacing:.08em} }

/* ── THE NAV HAS TO FIT A 320px PHONE ────────────────────────────────────
 *
 * It did not. At 360 — a Pixel, most Galaxies — the bar needed 376px, so the
 * whole page got a sideways scroll and the reader had to pinch to fit it.
 * It was missed because the phone checks were run at 390, which is an iPhone
 * and happens to be just wide enough to hide the problem.
 *
 * The brand, the language switch and the one button worth pressing all have
 * to survive. So the padding goes first, then the wordmark — never the CTA,
 * which is the only thing on this bar anybody is meant to press. */
@media (max-width:430px){
  /* The strapline is the first thing to go: it is the only piece on the bar
     that nobody needs in order to get anywhere. */
  .brand-s{display:none}
  .lang{padding:2px}
  .lang button{padding:6px 8px;font-size:11.5px}
  .nav .cta{padding:10px 12px;font-size:12.5px}
}
@media (max-width:370px){
  /* The mark still says Examust and still goes home. The word is what goes,
     and only on the narrowest phones there are. */
  .brand-t{display:none}
}
.logo{height:38px;width:auto;border-radius:11px;
  box-shadow:0 0 0 1px rgba(122,118,96,.10),0 2px 6px -2px rgba(122,118,96,.22)}
@media (min-width:721px){ .logo{height:46px;border-radius:13px} }
.nav .sp{flex:1}
.lang{display:flex;background:var(--paper);border:1.5px solid var(--line-2);
  border-radius:var(--pill);padding:3px;flex:none}
.lang button{border:0;background:none;border-radius:var(--pill);padding:7px 12px;
  font-family:var(--f);font-size:12px;font-weight:800;color:var(--muted);cursor:pointer;
  transition:background .14s,color .14s}
.lang button.on{background:var(--lav);color:var(--lav-ink)}
.nav .cta{padding:11px 16px;font-size:13px;min-height:42px}

/* ------------------------------------------------------------
   Footer
   The legal line is the point of it: an exam-prep site that does
   not say plainly what it is not has already lost the argument.
   ------------------------------------------------------------ */
footer > .page{padding-block:0}
footer{border-top:1px solid var(--line);margin-top:var(--sec);padding:36px 0 40px;
  color:var(--ink-2);font-size:13px}
.f-top{display:grid;grid-template-columns:1fr;gap:28px}
@media (min-width:620px){ .f-top{gap:30px} }
/* stacked in one column the footer runs longer than the page it sits under,
   so the link lists pair up as soon as there is room for two */
@media (min-width:460px){
  .f-top{grid-template-columns:1fr 1fr;gap:26px}
  .f-brand{grid-column:1/-1}
}
/* Five columns now: brand, exams, product, Examust, follow. The brand column
   keeps the most room because it carries a paragraph; the link lists only need
   enough for their longest line. */
@media (min-width:940px){
  .f-top{grid-template-columns:1.6fr 1fr 1fr .8fr 1fr;gap:30px}
  .f-brand{grid-column:auto}
}
/* Wide enough for the five social pieces to stand in one row: 5 × 50 + 4 × 11.
   minmax rather than a bigger fr, because what that column needs is a measured
   width and not a share of whatever is going — the link columns give it up. */
@media (min-width:1080px){
  .f-top{grid-template-columns:1.5fr 1fr 1fr .8fr minmax(294px,1fr)}
}

.f-brand .logo{height:52px;margin-bottom:14px;border-radius:13px}
.f-brand p{margin:0 0 18px;max-width:36ch;line-height:1.65;color:var(--ink-2)}
.f-col h3{font-family:var(--f);font-size:11px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.f-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
/* THE COLUMN LINKS — About, Contact, Refunds. `:not(.s-ic)` because the social
   pieces live in a .f-col too and are not links in a column: this rule carries
   an element selector, so it outranks .s-ic's own single class and was quietly
   handing the icons `display:inline-block` and `color:var(--ink-2)`. That is
   why the glyphs sat dark in the top-left corner of their gradient instead of
   white in the middle of it. */
.f-col a:not(.s-ic),.f-col button{display:inline-block;background:none;border:0;padding:0;
  font:inherit;text-align:left;color:var(--ink-2);text-decoration:none;cursor:pointer;
  transition:color .14s}
.f-col a:not(.s-ic):hover,.f-col button:hover{color:var(--lav-ink)}

/* ── FOOTER LINKS, THUMB-SIZED ───────────────────────────────
 *
 * Twenty of these, all 21px tall — the height of the text and
 * nothing more. On a laptop with a pointer that is fine. On a
 * phone it is a column of targets half the size a thumb lands
 * on, stacked 10px apart, and the footer is where somebody goes
 * when they are already looking for something specific.
 *
 * The list gap does the work: each link gets padding instead of
 * the `ul` getting gap, so the targets touch each other and
 * there is no dead strip between them to mis-hit. Nothing moves
 * visually — the text sits where it sat. */
@media (hover:none),(max-width:640px){
  .f-col ul{gap:0}
  .f-col li a:not(.s-ic),
  .f-col li button{
    display:block;padding:9px 0;min-height:22px;
  }
}
.f-col .f-note{margin:0;font-size:12.5px;color:var(--muted);line-height:1.6;max-width:30ch}
.f-legal{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);
  display:grid;gap:12px;font-size:12px;line-height:1.65;color:var(--muted)}
@media (min-width:860px){ .f-legal{grid-template-columns:1fr auto;align-items:end;gap:30px} }
.f-legal p{margin:0}
.f-copy{font-family:var(--f);font-weight:800;color:var(--ink-2);white-space:nowrap}
/* ---- social ----------------------------------------------------------
 *
 * THE WHOLE TREATMENT LIVES HERE, beside the footer it belongs to.
 *
 * It used to be split: the gradients and the hover were here, and the
 * centring, the base shadow and the sheen were in landing.css, folded into a
 * selector list with the landing page's own clay pieces. The footer is on
 * eleven pages and that stylesheet is on one — so everywhere except the front
 * page the glyph sat in the top-left corner of a flat gradient square, because
 * `place-items:center` had never been loaded. The same fault as `.rowline` in
 * console.css: a class that means one thing on one page and nothing anywhere
 * else. A shared element is styled with the shared shell.
 */
.f-sh{margin-top:20px!important}
/* A GRID, NOT A WRAPPING ROW. Five pieces in a footer column that fits four
   put X alone on a second line, which reads as a mistake rather than as a
   layout. Three across is the shape everywhere there is not room for five, so
   the break is always 3 + 2 and always looks meant. */
.socials{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:11px}
@media (min-width:1080px){ .socials{grid-template-columns:repeat(5,auto)} }

.s-ic{
  /* THE CENTRING, which is the part that was missing. .f-col a sets
     display:inline-block and text-align:left for the footer's link columns,
     and an icon is not a link in a column — it is a piece with a glyph in the
     middle of it. Grid rather than flex so a one-child box needs no other
     property to hold it dead centre. */
  display:grid;place-items:center;flex:none;position:relative;
  width:50px;height:50px;border-radius:17px;color:#fff;
  /* The clay recipe, from tokens.css. */
  box-shadow:var(--clay);
  transition:transform .16s ease,box-shadow .16s ease}
/* The light falling across the top-left of a moulded surface. */
.s-ic::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:var(--clay-sheen)}
.s-ic>*{position:relative;z-index:1}
/* A flat white glyph on a gradient still reads as a sticker. Giving it its own
   shadow — light above, dark below — is what puts it on top of the clay. */
.s-ic svg{display:block;filter:drop-shadow(0 1.5px 1px rgba(40,30,70,.34)) drop-shadow(0 -1px 0 rgba(255,255,255,.30))}
.s-ic:hover,.s-ic:focus-visible{transform:translateY(-4px) scale(1.03);
  box-shadow:
    inset 0 2.5px 0 rgba(255,255,255,.9),
    inset 0 7px 10px -6px rgba(255,255,255,.6),
    inset 0 -5px 9px -3px rgba(74,64,102,.32),
    0 16px 26px -8px rgba(74,64,102,.52),
    0 3px 6px -1px rgba(74,64,102,.24)}
/* pressed: the lip flattens and the piece sinks toward the page */
.s-ic:active{transform:translateY(0) scale(.97);
  box-shadow:
    inset 0 2px 5px rgba(74,64,102,.30),
    inset 0 -1px 0 rgba(255,255,255,.45),
    0 2px 5px -2px rgba(74,64,102,.35)}
/* Brand colours, softened to sit inside this palette rather than shouting
   over it — recognisable at a glance, which is all a footer icon must do. */
.s-ic.ig{background:linear-gradient(150deg,#F5B06A,#E46A8A 46%,#B85BC4)}
.s-ic.li{background:linear-gradient(158deg,#3F9BD4,#1668A8)}
.s-ic.fb{background:linear-gradient(158deg,#5B8FE3,#2E5FBF)}
.s-ic.wa{background:linear-gradient(158deg,#5FD37A,#1FA855)}
/* X has no brand colour but black. Near-black rather than pure, and warmed
   toward the ink this palette already uses, so it sits in the row instead of
   punching a hole in it. */
.s-ic.xx{background:linear-gradient(158deg,#3E3B4A,#18161F)}
.s-ic.xx::after{background:var(--clay-sheen-dark)}

/* Smaller pieces on a phone, where 50px each is most of the column. Three
   across still: 3 × 42 + 2 × 9. This lived in landing.css too, so the icons
   shrank on the front page and stayed full size on the other ten. */
@media (max-width:560px){
  .socials{gap:9px}
  .s-ic{width:42px;height:42px;border-radius:15px}
}

@media (prefers-reduced-motion:reduce){ .s-ic{transition:none} .s-ic:hover{transform:none} }

/* the ₹49 rung, above the two real prices */
.nav-l{flex:none;text-decoration:none;font-family:var(--f);font-size:13px;font-weight:800;
  color:var(--ink-2);padding:8px 12px;border-radius:var(--pill);white-space:nowrap;
  transition:background .14s,color .14s}
.nav-l:hover{background:var(--lime-soft);color:var(--lime-ink)}
/* The links used to be hidden here. They are not any more — the bar wraps
   them onto a second row instead, so both doors survive on a phone; see THE
   BAR ON A PHONE further down. This rule was left behind when that changed
   and did nothing, because a later block sets `display` again outside any
   query and outranked it by position. Two rules disagreeing about whether
   something is visible is how the bar came to be 519px wide on a 390px
   screen. */

/* The app pages call it .btn and the landing calls it .cta. Rather than rename
   eighteen buttons or keep two definitions that drift, both names resolve to
   the one rule above. Sizes the app needs: */
.btn.sm, .cta.sm{padding:8px 15px;min-height:36px;font-size:13px}
.btn:disabled, .cta:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn:disabled:hover, .cta:disabled:hover{background:var(--accent);transform:none}
.btn.ghost:disabled:hover{background:var(--paper)}
a.btn, a.cta{display:inline-flex;align-items:center;justify-content:center;
  gap:8px;text-decoration:none}
a.btn:hover, a.cta:hover{text-decoration:none}

/* ------------------------------------------------------------
   The account control
   Signed out it is a Sign in button. Signed in it is the person's
   own name with a menu under it — and the way out is in that menu,
   not three clicks deep inside a collapsed panel on another page.
   ------------------------------------------------------------ */
.who{position:relative;flex:none}
.who-b{display:inline-flex;align-items:center;gap:8px;min-height:42px;
  padding:5px 12px 5px 5px;border:1.5px solid var(--line-2);border-radius:var(--pill);
  background:var(--paper);font:inherit;font-family:var(--f);font-size:13px;font-weight:800;
  color:var(--ink);cursor:pointer;transition:border-color .14s,box-shadow .14s}
.who-b:hover{border-color:var(--lav-line)}
.who-b[aria-expanded="true"]{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.who-i{position:relative;overflow:hidden;
  display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;
  background:var(--lav);color:var(--lav-ink);font-size:13px;font-weight:900;line-height:1}
/* The picture covers the initial rather than replacing it, so a file that does
   not load leaves the initial showing instead of a gap. Sits ON the circle's
   own fill, which is also the colour behind a drawing with a pale background —
   they are cut to the same round shape. */
.who-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:50%;display:block}
.who-n{max-width:13ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-v{flex:none;color:var(--muted)}
@media (max-width:520px){ .who-n,.who-v{display:none} .who-b{padding:5px} }

.who-m{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;z-index:70;
  background:var(--paper);border:1.5px solid var(--line-2);border-radius:var(--r-sm);
  box-shadow:var(--shadow);padding:6px;display:grid;gap:2px}
.who-m a,.who-m button{display:block;width:100%;text-align:left;border:0;background:none;
  border-radius:10px;padding:10px 12px;font:inherit;font-family:var(--f);font-size:13.5px;
  font-weight:700;color:var(--ink-2);text-decoration:none;cursor:pointer}
.who-m a:hover,.who-m button:hover{background:var(--cream-2);color:var(--ink)}
.who-m .who-out{margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 10px 10px;
  padding-top:12px;color:var(--rose-ink)}
.who-m .who-out:hover{background:var(--rose-soft);color:var(--rose-ink)}
.who-m .who-h{margin:2px 2px 6px;padding:0 10px;font-size:11.5px;font-weight:800;
  letter-spacing:.04em;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-i svg{display:block}
/* Signed out the nav offers both doors. "Sign in" alone reads as a wall to
   somebody who has never been here. */
.nav-in .who{display:flex;align-items:center;gap:8px}
@media (max-width:640px){ .who #navIn{display:none} }

/* The cart, in the nav. Only there when it holds something. */
.nav-cart{position:relative;display:grid;place-items:center;width:38px;height:38px;
  border-radius:var(--pill);color:var(--ink);text-decoration:none;
  border:1.5px solid var(--line-2);background:var(--paper);flex:none}
.nav-cart:hover{background:var(--lav-soft);border-color:var(--lav-line);color:var(--lav-ink)}
.nav-cart-n{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;
  border-radius:var(--pill);background:var(--accent);color:#fff;
  font-family:var(--f);font-size:10.5px;font-weight:800;line-height:18px;text-align:center}

/* The policy links in the legal strip. People look for these at the very
   bottom, so they are there as well as in their own column. */
.f-legal .f-links{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0}
.f-legal .f-links a{color:var(--muted);text-decoration:none;font-size:12.5px}
.f-legal .f-links a:hover{color:var(--ink);text-decoration:underline}
/* Terms · Privacy · Refunds, along the bottom of every page. Small type on
   purpose; a small TARGET by accident. The row's gap absorbs the padding, so
   nothing moves. */
@media (hover:none),(max-width:640px){
  .f-legal .f-links{gap:0 14px}
  .f-legal .f-links a{display:inline-flex;align-items:center;min-height:36px}
}

/* ── THE BELL ─────────────────────────────────────────────────────────────
 * Beside the cart, and hidden the same way: something that is always there
 * and always empty teaches people to stop looking at it. The dot is the whole
 * signal — the number inside it is a courtesy. */
.bell{position:relative;flex:none}
.bell-b{
  position:relative;display:grid;place-items:center;
  width:36px;height:36px;border-radius:50%;cursor:pointer;
  border:1.5px solid var(--line-2);background:var(--paper);color:var(--ink-2);
  transition:border-color .14s,color .14s;
}
.bell-b:hover{border-color:var(--lav-line);color:var(--ink)}
.bell-b[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}
.bell.has .bell-b{border-color:var(--lav-line)}
.bell-n{
  position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;
  border-radius:999px;background:var(--accent);color:#fff;
  font-family:var(--f);font-size:10px;font-weight:800;line-height:17px;text-align:center;
  box-shadow:0 0 0 2px var(--cream);
}
.bell-m{
  position:absolute;right:0;top:calc(100% + 8px);width:min(88vw,330px);z-index:70;
  max-height:70vh;overflow:auto;
  background:var(--paper);border:1.5px solid var(--line-2);border-radius:var(--r-sm);
  box-shadow:var(--shadow);padding:6px;display:grid;gap:2px;
}
.bell-i{
  display:flex;align-items:flex-start;gap:11px;padding:11px 12px;border-radius:10px;
  text-decoration:none;color:var(--ink-2);
}
.bell-x{display:grid;gap:2px;min-width:0;flex:1}
/* The kind, as one character. Coloured by what it is about: money is lime,
   something taken back is rose, a queue is peach. */
.bell-k{
  flex:none;display:grid;place-items:center;width:26px;height:26px;margin-top:1px;
  border-radius:9px;font-family:var(--f);font-size:13px;font-weight:900;line-height:1;
  background:var(--lav-soft);color:var(--lav-ink);
}
.bell-k.k-sale,.bell-k.k-payout{background:var(--lime-soft);color:var(--lime-ink)}
.bell-k.k-refund{background:var(--rose-soft);color:var(--rose-ink)}
.bell-k.k-queue{background:var(--peach-soft);color:var(--peach-ink)}
.bell-k.k-review{background:var(--peach-soft);color:var(--peach-ink)}
a.bell-i:hover{background:var(--cream-2)}
/* Unread is a stripe rather than a colour swap: the row still has to be
   readable, and a whole row in accent is a row nobody reads twice.
   It moved to the wrapper when the cross arrived, so the stripe runs the
   whole height of the row rather than stopping short of the button. */
.bell-r.new{background:var(--lav-soft);box-shadow:inset 3px 0 0 var(--accent)}

/* ── THE ROW, AND THE CROSS THAT IS NOT PART OF THE LINK ─────────
 * A button inside an anchor is a control that navigates when you
 * meant to dismiss — the one mistake a delete must never make. So
 * they are siblings, and the wrapper is what carries the state. */
.bell-r{display:flex;align-items:stretch;border-radius:10px;overflow:hidden}
.bell-r .bell-i{flex:1;min-width:0}
.bell-r:hover{background:var(--cream-2)}
.bell-del{
  flex:none;align-self:center;
  width:26px;height:26px;margin-right:8px;
  border:0;border-radius:8px;background:transparent;cursor:pointer;
  font:700 17px/1 var(--f);color:var(--muted);
  /* Invisible until the row is under the cursor: eight crosses down the side
     of a list is a list that looks like it is asking to be emptied. On a
     touch screen there is no hover, so it is always there. */
  opacity:0;transition:opacity .12s,background .12s,color .12s;
}
.bell-r:hover .bell-del,.bell-del:focus-visible{opacity:1}
@media(hover:none){ .bell-del{opacity:.55} }
.bell-del:hover{background:var(--rose-soft);color:var(--rose-ink)}

/* Mark-all and clear-all, side by side at the foot of the list. */
.bell-f{display:flex;gap:6px;padding:6px 4px 2px;border-top:1px solid var(--line)}
.bell-f button{
  flex:1;border:0;background:transparent;cursor:pointer;border-radius:9px;padding:9px 8px;
  font:800 12px/1 var(--f);letter-spacing:.04em;color:var(--muted);
}
.bell-f button:hover{background:var(--cream-2);color:var(--ink-2)}
/* The two are not the same act and must not look it. Marking read tidies a
   number; clearing throws the list away and cannot be undone — so it carries
   the colour this product uses for taking something back, and only on hover,
   where the hand already is. */
.bell-all:hover{color:var(--accent)}
.bell-clear:hover{background:var(--rose-soft);color:var(--rose-ink)}
.bell-t{font-family:var(--f);font-size:13.5px;font-weight:800;color:var(--ink);line-height:1.4}
.bell-b2{font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.bell-w{font-size:11px;color:var(--muted)}
.bell-all{
  margin-top:4px;border:0;border-top:1px solid var(--line);background:none;cursor:pointer;
  border-radius:0 0 10px 10px;padding:10px 12px;text-align:left;width:100%;
  font:inherit;font-family:var(--f);font-size:12.5px;font-weight:800;color:var(--muted);
}
.bell-all:hover{background:var(--cream-2);color:var(--ink)}
@media (max-width:430px){ .bell-b{width:32px;height:32px} }

/* ============================================================
   THE BAR, MADE ONE THING

   It had grown a piece at a time and it showed: the exam link
   was 33px tall, the cart 38, the bell 36, the language switch
   35 and the account button 42 — five heights on one line, three
   of them bordered and two not. Nothing lined up with anything,
   which is what makes a bar look assembled rather than designed.

   One height for every control, one border weight, one radius,
   and one hover. The links become controls too, so the row reads
   left to right as a single row instead of two text links and
   then some buttons.

   Set last in this file on purpose: it is a correction to the
   rules above it and has to win without them being unpicked
   one by one.
   ============================================================ */
:root{ --navh:40px }

.nav{
  background:color-mix(in srgb,var(--cream) 78%,transparent);
  backdrop-filter:saturate(1.6) blur(16px);
  -webkit-backdrop-filter:saturate(1.6) blur(16px);
  /* A hairline rather than a rule: the bar should separate from the page by
     being slightly lifted, not by being underlined. */
  border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
}
.nav-in{gap:6px;min-height:68px;align-items:center}

/* Every control on the bar, whatever it is made of. */
.nav-l,
.nav-cart,
.bell-b,
.lang,
.who-b{
  height:var(--navh);
  border-radius:var(--pill);
  box-sizing:border-box;
}

/* ── the links ───────────────────────────────────────────────
 * Same height as the buttons so the row has one baseline, and a
 * hover that fills rather than merely tints — a link on a bar
 * has to look pressable before it is pressed. */
.nav-l{
  display:inline-flex;align-items:center;
  padding:0 14px;font-size:13.5px;font-weight:800;
  color:var(--ink-2);border:1.5px solid transparent;
  transition:background .15s,color .15s,border-color .15s;
}
.nav-l:hover{
  background:var(--paper);border-color:var(--line-2);color:var(--ink);
}

/* ── THE BAR ON A PHONE ──────────────────────────────────────
 *
 * 519px of controls in a 390px bar. The two text links are 214px
 * of that, and there was a rule hiding them below 640px — which
 * this block overrode, because it sets `display` again further
 * down the same file at the same specificity. Every page in the
 * product scrolled sideways by 183px as a result.
 *
 * Re-hiding them would fix the overflow and lose the two doors
 * that matter most — the exams and the marketplace — for the
 * majority of this audience, who are on a phone. The footer has
 * them, but the bottom of a long page is not navigation.
 *
 * So the bar WRAPS. The brand and the round controls keep row
 * one; the two links drop to a row of their own and share it
 * half and half, which reads as a deliberate segmented control
 * rather than as a bar that broke. It costs 38px of height and
 * keeps everything reachable with one thumb. */
/* 860, NOT 640. Measured rather than guessed: the bar needs 847px to stand
   in one row, so anything narrower than about 860 has to wrap. The first
   attempt broke at 640 and left every tablet — 768 is the commonest screen
   after a phone — overflowing by 62px with no sign of it in a phone test. */
@media (max-width:860px){
  .nav-in{flex-wrap:wrap;row-gap:0;padding-bottom:6px}
  /* A zero-height item that is the full width of the row: the plain way to
     force a break in a flex line, so the links below can be their own natural
     width instead of being stretched to fill one. */
  .nav-in::after{content:"";flex:0 0 100%;order:2;height:0;margin:0}
  .nav-l{
    order:3;margin-top:6px;
    background:var(--paper);border-color:var(--line);
  }
  /* Sign in lives inside `.who`; it must not be dragged onto the second row
     by the rule above. */
  .who .nav-l{order:0;margin-top:0;background:none;border-color:transparent}
}

/* On a phone the two links share the second row half and half, which reads as
   a segmented control. On a tablet there is room for them to sit at their own
   width, so they do. */
@media (max-width:640px){
  .nav-l{flex:1 1 calc(50% - 3px);justify-content:center;font-size:13px}
  .who .nav-l{flex:0 0 auto}
}

/* Narrower still: the links stay, the brand word goes first —
   see the rule further up. Nothing here is ever hidden. */
@media (max-width:360px){
  .nav-in{gap:5px;padding-left:12px;padding-right:12px}
  .nav-l{font-size:12.5px;padding:0 8px}
}

/* ── the round ones ──────────────────────────────────────────
 * The cart and the bell are the same object with different
 * insides, so they stop being 38 and 36. */
.nav-cart,
.bell-b{
  width:var(--navh);height:var(--navh);
  display:grid;place-items:center;
  border:1.5px solid var(--line-2);background:var(--paper);
  color:var(--ink-2);
  transition:background .15s,border-color .15s,color .15s;
}
.nav-cart:hover,
.bell-b:hover{background:var(--lav-soft);border-color:var(--lav-line);color:var(--lav-ink)}
.bell-b[aria-expanded="true"]{background:var(--lav-soft);border-color:var(--accent);color:var(--accent)}
/* The dot sits on the ring rather than outside it, so a count does not push
   the bar's height around. */
.nav-cart-n,.bell-n{top:-2px;right:-2px;box-shadow:0 0 0 2.5px var(--cream)}

/* ── the language switch ─────────────────────────────────────
 * One control, two halves. It was a pill holding two pills. */
.lang{
  display:inline-flex;align-items:center;padding:3px;gap:2px;
  border:1.5px solid var(--line-2);background:var(--paper);
}
.lang button{
  height:calc(var(--navh) - 8px);display:inline-flex;align-items:center;
  padding:0 12px;border-radius:var(--pill);font-size:12.5px;font-weight:800;
  color:var(--muted);transition:background .15s,color .15s;
}
.lang button:hover{color:var(--ink)}
.lang button.on{background:var(--lav);color:var(--lav-ink)}

/* ── BIG ENOUGH TO HIT WITH A THUMB ──────────────────────────
 *
 * The two halves of this were 41×28 and 45×28 on a phone — the
 * smallest controls in the product, on every page, and the one
 * a reader of हिन्दी has to find first. Twenty-eight pixels is
 * under every guideline there is and well under what a thumb
 * lands on.
 *
 * The visible pill is not enlarged, because a fat language
 * switch would take the bar over; the TARGET is, by padding the
 * button out to 44px and pulling the extra back with a negative
 * margin so the row's height does not change. The thing you can
 * press is bigger than the thing you can see, which is the right
 * way round on a touchscreen. */
@media (hover:none),(max-width:640px){
  .lang button{
    height:36px;padding:0 14px;font-size:13px;
    position:relative;
  }
  .lang button::after{
    content:"";position:absolute;left:0;right:0;
    top:50%;transform:translateY(-50%);height:44px;
  }
}

/* ── the account ─────────────────────────────────────────────
 * The one control that carries a face, so it keeps its shape and
 * only loses its odd height. */
.who-b{
  min-height:0;padding:0 14px 0 4px;gap:9px;
  border:1.5px solid var(--line-2);background:var(--paper);
  font-size:13.5px;
}
.who-i{width:calc(var(--navh) - 10px);height:calc(var(--navh) - 10px);font-size:13px}
.who-b:hover{background:var(--lav-soft);border-color:var(--lav-line)}
.who-b[aria-expanded="true"]{background:var(--lav-soft);border-color:var(--accent);box-shadow:none}

/* ── the two groups ──────────────────────────────────────────
 * Where you can go, then who you are. A wider gap between the
 * groups than inside them is what tells somebody there are two. */
.nav-in .who{margin-left:6px}
.nav .cta{height:var(--navh);min-height:0;padding:0 18px;display:inline-flex;align-items:center}

/* ── the mark ────────────────────────────────────────────────
 * The strapline was set at 9.5px, which is smaller than anything
 * else on the page and read as a mistake. Given room and the
 * same letter-spacing as every other label in the product. */
.brand{gap:12px}
.brand-w{gap:4px}
.brand-t{font-size:20px}
.brand-s{font-size:10px;letter-spacing:.13em;color:var(--mut)}

@media (max-width:640px){
  :root{ --navh:38px }
  .nav-in{min-height:60px;gap:5px}
}
@media (max-width:430px){
  :root{ --navh:36px }
  .who-b{padding:0 4px}
}