/* ===========================================================================
   THE site header — ONE definition, used by every page.

   There used to be three: the landing had these rules inline, static/site.css
   had a DIVERGED copy (its .lx-head.is-solid was light glass where the landing
   is dark), and the two search templates had a third clone under .lxih-* class
   names. Same markup, three different looks.

   This file is the single source. It is linked LAST on every page so it wins
   over any older copy still present in site.css, without needing to edit that
   file. Landing-only behaviour (transparent over the hero, the dark theme
   variants) stays in home.html.
   ========================================================================= */
/* ---------------------------------------------------------------------------
   THE ACCENT, AND WHY IT LIVES HERE.

   This file is linked on every page (pages.shell(), the three templates, the
   accounts pages, and server.py splices it into the proxied store), and it is
   linked LAST — so this is the one :root every page is guaranteed to read.
   That makes it the right home for the accent family, and every other
   stylesheet's accent token now points AT these rather than repeating a hex.

   ONE accent per COUNTRY, not one accent full stop. Lebanon is the crimson the
   site was built in; the Emirates are gold; Kuwait is blue; Qatar is purple
   (#731266 — NOT the flag's maroon, which shipped and was replaced; see
   lib/country.py). The old rule — "one red, #981B31,
   and tints are hardcoded rgba(152,27,49,a)" — was what made that impossible:
   ~90 literals scattered across nine files, none of which follow a variable.
   So the tints get a channel-triplet token of their own and are written
   rgba(var(--lx-accent-rgb),a); the hex family keeps the shades the design
   already used, named for the job they do rather than for "how red".

     --lx-accent        the accent itself
     --lx-accent-dark   ~10% down — the far end of the accent gradients
     --lx-accent-deep   ~12% down — pressed/active fills
     --lx-accent-shade  ~28% down — accent-as-TEXT on paper, where the accent
                        itself has too little contrast to read
     --lx-accent-lift   the one lifted tone, for the comet-trail cells only

   These are the DEFAULTS. The live, per-country family is emitted by
   lib/country.py (country.accent_style()) as a <style> after this file, so it
   wins on document order — see the note there for why it is a <style> and not
   an attribute on <html>. Keeping the defaults here matters for the same
   reason the accent lives here at all: a stylesheet that asks for a token
   nobody declared paints nothing, not the old colour. */
:root{
  --lx-accent:#981B31;
  --lx-accent-rgb:152,27,49;
  --lx-accent-dark:#891826;       --lx-accent-dark-rgb:137,24,38;
  --lx-accent-deep:#861723;
  --lx-accent-shade:#6E1624;      --lx-accent-shade-rgb:110,22,36;
  --lx-accent-lift:#CE2E45;       --lx-accent-lift-rgb:206,46,69;
  --lx-accent-pale-rgb:216,120,140;
  /* The two calligraphic wordmarks (المجلة القضائية, الجريدة الرسمية) are inlined
     as SVG so their SECOND word can carry the accent while the first stays ink —
     and each file asks for it by name, `fill:var(--mj-accent,#981B31)`. Nothing
     answered in light mode, so both fell through to their baked crimson and the
     المجلة page kept a red word under an Emirati header. Answering here rather
     than at each section is the point of the hook: the mark is drawn once and
     recoloured by whoever renders it. */
  --mj-accent:var(--lx-accent);
  --gz-accent:var(--lx-accent);
  --lx-black:#FFFFFF;
  --lx-on-dark:#16140F;
  --lx-on-dark-soft:rgba(22,20,15,.60);
  --lx-line-d:rgba(20,18,12,.13);
  --lx-ease:cubic-bezier(.16,1,.3,1);
  /* The header's own height: its two padding-blocks plus the 44px wordmark, the
     tallest thing in the row. Kept here, beside the rules that produce it, so a
     change to either padding or logo size moves the clearance below with it. */
  --lx-head-h: calc(clamp(.9rem, 2vw, 1.4rem) * 2 + 44px);
  /* How far the FIRST hero on a page starts from the top of the viewport — the
     landing's figure, now the site's. Its partner above is why it lives here:
     a page either offsets its hero by this (the landing, بحث شامل) or gets
     --lx-head-h back on <main> and makes up the difference (pages.shell()), and
     both readings have to come from the same two numbers or the ١٨٦٣ eyebrow
     sits at a different height per page — which is exactly what it did. */
  --lx-hero-pad: clamp(5.5rem, 12svh, 8rem);
}
@keyframes lxLive{ 0%{transform:scale(1);opacity:.55} 70%{opacity:0} 100%{transform:scale(3);opacity:0} }
body.theme-dark .lx-head.is-solid{ background:#0C0C0D; border-block-end-color:rgba(238,234,224,.14);
    box-shadow:0 6px 24px -14px rgba(0,0,0,.55); }
body.theme-dark .lx-head, body.theme-dark .lx-nav a,
  body.theme-dark .lx-brand, body.theme-dark .lx-lang a{ color:#EEEAE0; }
body.theme-dark .lx-lang a[aria-current]{ color:var(--lx-accent); }
/* ...and the pieces of .lx-lang that are not links: the wrapper's own colour and
   the 1px divider between ع and EN, both on paper-ink tokens (see the note by
   .lx-country below) and so invisible on the dark bands. */
body.theme-dark .lx-lang{ color:rgba(238,234,224,.62); }
body.theme-dark .lx-lang span{ background:rgba(238,234,224,.24); }
body.theme-dark .lx-burger span{ background:#EEEAE0; }
/* ====================== HEADER (bespoke, red) ======================= */
  .lx-head{
    position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 900;
    display: flex; align-items: center; justify-content: space-between;
    /* THIS GAP IS THE GROUP BOUNDARY, and it must be the LARGEST gap in the row.
       The header holds three groups — wordmark / the tab row / the per-visitor
       controls (language, cart, account) — and the eye reads grouping from
       relative distance alone. It used to be a flat 1rem, which made it SMALLER
       than both the gap between two tabs (up to 1.35rem) and the gap inside the
       control cluster (1.5rem): the tightest space in the header sat exactly
       where the biggest separation belonged. That is why the last tab read as
       part of the language switch rather than as the end of the nav.
       Now: boundary 24-40px vs tab gap 8-21.6px vs cluster gap 11-17px, so the
       boundary stays ~1.8x the widest sibling gap at every viewport. The vw term
       is 1.9 rather than a rounder 2.2 because the boundary is paid TWICE out of
       the same row budget that decides whether the tabs collapse; 2.2vw looked
       no different and cost 1280px-wide laptops their nav.
       No var(): a literal cannot be undefined on the pages that lack tokens.css
       (see the note on .lx-head__right for what that used to cost). */
    gap: clamp(1.75rem, 2.4vw, 3.25rem);
    padding-block: clamp(.9rem, 2vw, 1.4rem); padding-inline: clamp(.85rem,2.2vw,2.25rem);
    transition: background-color .5s var(--lx-ease), border-color .5s var(--lx-ease), padding .5s var(--lx-ease);
    border-block-end: 1px solid transparent;
  }
/* position:fixed above means the header is OUT of flow and reserves no space,
   so each page has to give that height back at the top or its first element
   rides up underneath the nav.

   This regressed when the four headers were merged into this file: the copy in
   site.css was position:STICKY, which is in-flow and reserved the space by
   itself, so the shell()-rendered pages (every category, study and document
   page) never needed a top offset and never had one. Inheriting the landing's
   fixed header silently took their clearance away, and the ١٨٦٣ stamp row —
   the first thing in .cat-hero — landed on top of the nav.

   The landing and searchall build their own offset into their heroes and are
   deliberately not listed here. .main-wrapper (search.html) had 2rem, which is
   less than the header, so it is corrected rather than added to. */
main.page{ padding-block-start: var(--lx-head-h); }
.main-wrapper{ padding-block-start: calc(var(--lx-head-h) + 1rem); }
.lx-head::before{
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background: linear-gradient(to bottom, rgba(255,255,255,.72), rgba(255,255,255,0));
    transition: opacity .5s var(--lx-ease);
  }
/* Scrolled state: translucent glass, NOT a flat fill.
   --lx-black is a PAPER token (home.html paints panels and the page body with
   it) and it resolves to #FFFFFF, so filling the header with it produced an
   opaque white slab pasted over the animated backgrounds on بحث شامل and the
   landing. Both headers this file replaced were glass here — site.css had
   rgba(255,255,255,.68) + blur and searchall's .lxih clone had exactly the
   same — so the consolidation, not the design, is what changed the colour.
   Use a literal, not a token: nothing else on the site wants this value, and
   pointing at a paper token is what caused the drift in the first place. */
.lx-head.is-solid{ background: rgba(255,255,255,.68); border-block-end-color: var(--lx-line-d);
    box-shadow: 0 6px 24px -14px rgba(20,18,12,.28);
    -webkit-backdrop-filter: saturate(1.25) blur(14px); backdrop-filter: saturate(1.25) blur(14px); }
.lx-head.is-solid::before{ opacity: 0; }
.lx-brand{ display:inline-flex; align-items:center; gap:.55rem; color:var(--lx-on-dark); }
.lx-brand__logo{ block-size:44px; inline-size:auto; display:block; }
/* Dark theme uses the purpose-built dark wordmark (cream #EEEAE0 + the brighter
     accent #C0223C) rather than filtering the light one — brightness(0) invert(1)
     flattened everything to white and killed the red "لكس". Both files ship in the
     markup so the swap is instant when the theme flips mid-scroll.
     NB these must stay AFTER the .lx-brand__logo rule above: same specificity, so
     source order decides which display wins. */
  .lx-brand__logo--dark{ display:none; }
body.theme-dark .lx-brand__logo--light{ display:none; }
body.theme-dark .lx-brand__logo--dark{ display:block; }
/* The text wordmark, superseded by the SVG logo above — kept for any page still
   emitting it. Fallback for the same token reason as the gaps. */
.lx-brand__mark{ font-family: var(--font-display, Georgia, 'Times New Roman', serif); font-weight:600; font-size:1.45rem; letter-spacing:.30em; padding-inline-start:.30em; }
.lx-brand__dot{ position:relative; flex:0 0 auto; align-self:center; inline-size:9px; block-size:9px; border-radius:50%; background:var(--lx-accent); }
/* The "live LED" beside the wordmark: a solid dot with a ring that expands and
   fades out of it, once every 1.8s.
   THE `animation:none` BELOW MUST STAY INSIDE THE MEDIA QUERY. It used to sit
   bare on the next line — a reduced-motion rule that had lost its @media
   wrapper — and since this file is linked LAST on every page, it switched the
   pulse off site-wide: every header, every footer, both languages, both themes.
   It was invisible as a bug because the dot itself still renders; only the ring
   was gone, so the mark just looked static rather than broken. */
.lx-brand__dot::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--lx-accent); animation:lxLive 1.8s ease-out infinite; }
@media (prefers-reduced-motion:reduce){ .lx-brand__dot::after{ animation:none; } }
/* NEVER INHERIT text-decoration HERE — ASSERT IT.
   This header is dropped into pages with four different CSS foundations. The
   landing and shell pages reset anchors (site.css / vendor base.css), but بحث
   شامل resets nothing, so the browser default underlined every tab; and the AI
   page loads Bootstrap, which sets `a{text-decoration:underline}` outright.
   Result: the same header was underlined on two pages and clean on the rest.
   The header owns its own look — exactly the rule static/site-foot.css already
   had to learn for the same reason. Covers the brand, the tabs, the language
   switcher and the cart, i.e. every anchor this file renders. */
.lx-head a{ text-decoration:none; }
.lx-head a:hover, .lx-head a:focus{ text-decoration:none; }

/* 9 tabs have to fit one row before nav.js gives up and collapses to a burger,
   so the gap and the type tighten on narrow desktops instead of holding the
   fixed 2.1rem / .95rem this had when there were four visible tabs and a
   dropdown hiding the rest. */
/* The gap is a CUSTOM PROPERTY, not just a `gap` value, because the tab dividers
   below have to sit in the MIDDLE of it — they read it back as `/ -2`. Declaring
   it once means the snug rung retunes the dividers along with the spacing, with
   no second number to keep in step. */
.lx-nav{ display:flex; align-items:center; --lx-navgap: clamp(.7rem, 1.4vw, 2rem); gap: var(--lx-navgap); }
/* Rung 2 of nav.js's ladder: close the tabs up a little rather than lose them.
   A STATE, not a smaller clamp — this only applies on the viewports that would
   otherwise collapse to a burger, so wide screens keep the roomier spacing
   instead of paying for a narrow one. The group boundary above stays put, so
   even snug the tabs read as one group separated from the controls. */
html.nav-snug .lx-nav{ --lx-navgap: clamp(.45rem, .9vw, 1.1rem); }
/* Rung 2 tightens the GROUP BOUNDARY too, not just the tabs. The boundary is
   paid twice out of the row budget, so leaving it at the roomy value is what
   costs a 1280px laptop its nav. Tightened it stays ~2x the snug tab gap, so
   the grouping still reads at the width where it matters most. */
html.nav-snug .lx-head{ gap: clamp(1.4rem, 1.85vw, 2.4rem); }

/* ---- the tab dividers -----------------------------------------------------
   A small round dot in INK, not in the accent — the editorial byline separator.

   It was first drawn as a tapered crimson lens, and it read cheap for a reason
   worth keeping written down: the accent was doing DECORATIVE work. On this site
   crimson means one of two things — the current tab, and a primary action — so
   eight more crimson marks in the same row dilute both, and they competed
   directly with the accent underline that marks where you are. A divider is
   punctuation, not emphasis: it should be the quietest mark in the row, which
   means the text colour, held well back.

   A dot rather than a rule because it takes up no vertical space of its own: a
   vertical stroke sets a second, competing height against nine tall Arabic
   labels, while a dot just marks the midpoint of the gap. It is round rather
   than tapered for the same reason the lens failed — a shape with a silhouette
   invites you to look at it.

   CRIMSON, Joe's call (2026-08-06), after the tapered crimson lens was rejected
   as cheap. What failed there was the SHAPE, not the colour: a 3px round dot has
   no silhouette to draw the eye, so it can carry the accent where the lens could
   not. Held at 72% rather than full so nine of them still sit below the
   full-strength accent underline that marks the current tab — that underline has
   to stay the loudest crimson in the row or "you are here" stops reading.

   `a + a` puts one BETWEEN tabs only — never before the first or after the
   last, so the row is not fenced at its edges and the group boundary to the
   language switch stays the clear separation. It is placed by logical inset off
   --lx-navgap, so it stays centred in the gap on every rung of the ladder, and
   RTL and the English LTR flip both land it correctly with no physical offset
   (the trap recorded for the header's centring). */
.lx-nav a + a::before{
  content:""; position:absolute; pointer-events:none;
  inset-inline-start: calc(var(--lx-navgap) / -2);
  inset-block-start: 50%; translate: 0 -50%;
  inline-size: 3px; block-size: 3px; border-radius: 50%;
  background: color-mix(in srgb, var(--lx-accent) 72%, transparent);
}
/* ONE ACCENT PER COUNTRY, and no second tone within one. Lebanon's #981B31 is
   roughly 1.9:1 against the landing's dark passage, so these dots go quiet
   there — and that is the ACCEPTED answer, not a bug to fix. Lifting the red
   for legibility is precisely the move that has been rejected before ("your
   shitty pink"): if the accent is too dark for a surface, the surface changes
   or the mark goes quiet; the accent does not.
   Full alpha here rather than 72% is the whole permitted adjustment — it recovers
   what little it can without inventing a second crimson. */
body.theme-dark .lx-nav a + a::before{
  background: var(--lx-accent);
}
/* The dropdown stacks the tabs vertically, where a divider sized for a gap that
   no longer exists would sit on top of the previous label. The collapsed list
   has its own rhythm and wants none. */
html.nav-collapsed:not(.nav-measuring) .lx-nav a + a::before{ display:none; }
.lx-nav a{ position:relative; color: var(--lx-on-dark); font-size: .88rem; font-weight:700; padding-block:.4rem; white-space:nowrap; }
/* The hover rule is the ONLY underline this header wants, and it is drawn as a
   pseudo-element in the accent colour rather than a text-decoration — which is
   why the real `text-decoration` above can be switched off unconditionally. */
.lx-nav a::after{ content:""; position:absolute; inset-inline:0; inset-block-end:0; block-size:1px; background:var(--lx-accent); transform:scaleX(0); transform-origin:center; transition:transform .3s var(--lx-ease); }
.lx-nav a:hover{ color:var(--lx-on-dark); }
.lx-nav a:hover::after{ transform:scaleX(1); }
/* current tab: a permanent version of that same underline, so you can see where
   you are. It used to be carried by the dropdown's `.is-current` colour only. */
.lx-nav a.is-current{ color:var(--lx-accent); }
.lx-nav a.is-current::after{ transform:scaleX(1); }
/* The per-visitor cluster: language, cart, account. These are ONE group, so they
   sit closer together than the group sits to the nav — the inverse of what a flat
   1.5rem gave, where the cluster was internally looser than its own boundary.

   Tightening also buys back width where it is scarcest. The two side blocks are
   equal tracks (see the centring note below), so the header has to reserve TWICE
   the wider side; this cluster is the wider side (346px signed-out vs the brand's
   141px), and every pixel taken out of it is worth two in the row's budget.

   A literal, not var(--space-5): --space-5 lives in the vendored store tokens.css,
   which ONLY the landing and /account load. On shell pages and the two search
   templates it was undefined, so `gap` fell back to `normal` -> 0 and the account
   pill sat flush against the language switcher. A stylesheet shared by pages with
   different token sets should not depend on a token at all. */
.lx-head__right{ display:flex; align-items:center; gap: clamp(.7rem, 1.05vw, 1.05rem); }
.lx-lang{ display:flex; align-items:center; gap:.55rem; color:var(--lx-on-dark-soft); font-size:.8rem; letter-spacing:.06em; }
.lx-lang a{ color:inherit; }
.lx-lang a[aria-current]{ color: var(--lx-accent); }
.lx-lang span{ inline-size:1px; block-size:11px; background:var(--lx-line-d); }
.lx-burger{ display:none; flex-direction:column; gap:5px; padding:8px; background:none; border:0; cursor:pointer; z-index:22; }
.lx-burger span{ inline-size:24px; block-size:1.5px; background:var(--lx-on-dark); transition:transform .32s var(--lx-ease), opacity .2s var(--lx-ease); transform-origin:center; }
.lx-burger.is-open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.lx-burger.is-open span:nth-child(2){ opacity:0; }
.lx-burger.is-open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
/* THE TABS SIT IN THE SAME PLACE ON EVERY PAGE, IN EVERY SIGNED-IN STATE.
   The two side blocks share the leftover space equally from a zero basis, so
   the nav's centre is the header's centre no matter how wide the brand or the
   account controls happen to be. Signing in adds a name pill to the right —
   that must not shove the tabs leftwards.

   This replaces `html.nav-centred{position:absolute;left:50%}`, which centred
   on the VIEWPORT and therefore had to be given up (nav.js's `canCentre`) as
   soon as a side block grew enough to be overlapped by the centred nav — and
   giving up dropped the tabs back to space-between, which is exactly the jump.
   Centring in FLOW cannot overlap, so it never has to be abandoned.
   The store's copy of this header does the same thing; see
   SaderStore/jcc/StoreHeader.ascx. Keep them in step. */
.lx-head__left,
.lx-brand,
.lx-head__right{ flex:1 1 0; min-inline-size:0; }
/* ...but the brand must NOT stretch inside that wrapper, or the switch is
   pushed to the far edge of the left track instead of sitting beside it. */
.lx-head__left{ display:flex; align-items:center; gap: clamp(.6rem, 1.1vw, 1rem); }
.lx-head__left .lx-brand{ flex:0 0 auto; }
.lx-head__right{ justify-content:flex-end; }
.lx-nav{ flex:0 0 auto; }
/* while measuring, drop the nav out of flow so it reports its natural row
     width and the header's other children report their expanded widths.
     The sides must go back to content width here too: left at `flex:1 1 0`
     with the nav absent they would each swell to half the header and nav.js
     would measure `others` as the whole row, concluding nothing ever fits. */
  html.nav-measuring .lx-nav{ position:absolute; visibility:hidden; }
  html.nav-measuring .lx-head__left,
  html.nav-measuring .lx-brand,
  html.nav-measuring .lx-head__right{ flex:0 0 auto; }
/* doesn't fit: collapse to a hamburger + dropdown */
  html.nav-collapsed:not(.nav-measuring) .lx-burger{ display:flex; }
html.nav-collapsed:not(.nav-measuring) .lx-nav{
    position:absolute; inset-block-start:100%; inset-inline-end:clamp(1rem,3vw,2.75rem);
    inline-size:min(300px,calc(100vw - 2rem)); margin-block-start:.55rem;
    flex-direction:column; align-items:stretch; gap:2px; padding:.5rem;
    border-radius:16px; background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:saturate(1.3) blur(20px); backdrop-filter:saturate(1.3) blur(20px);
    border:1px solid rgba(255,255,255,.72);
    box-shadow:0 26px 60px -20px rgba(20,18,12,.45), 0 10px 24px -14px rgba(20,18,12,.28);
    opacity:0; transform:translateY(-10px) scale(.98); transform-origin:top left;
    visibility:hidden; pointer-events:none;
    transition:opacity .28s var(--lx-ease), transform .28s var(--lx-ease), visibility 0s linear .28s;
    z-index:21; }
html.nav-collapsed:not(.nav-measuring) .lx-nav.is-open{ opacity:1; transform:none; visibility:visible; pointer-events:auto; transition-delay:0s; }
html.nav-collapsed:not(.nav-measuring) .lx-nav a{ padding:.72rem .95rem; border-radius:10px; font-size:1rem; text-align:start; color:#16140F; }
html.nav-collapsed:not(.nav-measuring) .lx-nav a::after{ display:none; }
html.nav-collapsed:not(.nav-measuring) .lx-nav a:hover{ background:rgba(var(--lx-accent-rgb),.07); color:var(--lx-accent); }
html.nav-collapsed:not(.nav-measuring) .lx-nav a.is-active,
  html.nav-collapsed:not(.nav-measuring) .lx-nav a.is-active:hover{ background:var(--lx-accent); color:#fff; }
/* Stagger driven by --i (set in nav.js) so any number of tabs animates in order.
     Deliberately NOT gated on :not(.nav-measuring) — a re-measure would otherwise
     drop and re-add the animation, restarting it under the user. */
  .lx-nav.is-open a{ animation:lxNavItem .34s var(--lx-ease) both; animation-delay:calc(var(--i,0) * .03s); }
.lx-nav-scrim{ position:fixed; inset:0; z-index:895; background:rgba(20,18,12,.3);
    opacity:0; visibility:hidden; transition:opacity .28s var(--lx-ease), visibility 0s linear .28s; }
.lx-nav-scrim.is-on{ opacity:1; visibility:visible; transition-delay:0s; }
html:not(.nav-collapsed) .lx-nav-scrim{ display:none; }
.lx-burger span, .lx-nav-scrim{ transition:none; }
.lx-nav{ transition:opacity .12s linear, visibility 0s; }
/* Kill only the DROPDOWN's entry transform. A blanket transform:none here also
       cancelled the centring translate(-50%,-50%), dropping the nav's left edge onto
       the 50% mark so it overlapped the logo for reduced-motion users. */
    html.nav-collapsed .lx-nav{ transform:none !important; }
.lx-nav.is-open a{ animation:none; }
/* (the stray .lx-foot__* rules that used to sit here moved to their own file,
   static/site-foot.css — the footer is not this stylesheet's business) */
/* ====================== ENGLISH (LTR) TYPOGRAPHY ======================
     The language toggle flips <html> to lang="en" dir="ltr". In English we use
     the design system's Latin pairing (Fraunces display + Inter body) instead
     of Almarai, and relax the tight Arabic tracking. */
  html[lang="en"] body,
  html[lang="en"] .lx-nav a,
  html[lang="en"] .lx-search input,
  html[lang="en"] .lx-hero__sub,
  html[lang="en"] .lx-hero__jump,
  html[lang="en"] .lx-panel__desc,
  html[lang="en"] .lx-stage__head p,
  html[lang="en"] .lx-study-feat__sum{ font-family:"Inter", system-ui, -apple-system, sans-serif; }
html[lang="en"] .lx-brand__mark{ letter-spacing:.18em; }

/* ===========================================================================
   THE CART — the basket's doorway, beside the language switcher.

   It replaces the old المتجر nav tab. A cart is per-visitor state, like the
   language and the account menu, so it belongs in .lx-head__right with them
   rather than in a row of legal collections; and with the store dormant the
   tab was advertising a section that no longer exists.

   Always rendered, empty or not: hiding it when the basket is empty is what
   made the store look like it had disappeared the last time.
   ========================================================================= */
/* .lx-store (the banknote, → /store/) shares every rule below with .lx-cart on
   purpose: they sit side by side, so any divergence in size, border or hover
   reads as a mistake. Only the count badge is cart-only. */
.lx-cart{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  inline-size:34px; block-size:34px; border-radius:999px;
  color:inherit; flex:0 0 auto;
  /* same currentColor derivation as .lx-acct__btn: this header is transparent
     over a light hero, glass once scrolled and dark in the landing's dark
     passage, so a fixed rgba() outline disappears in at least one of them. */
  border:1px solid color-mix(in srgb, currentColor 22%, transparent);
  transition:border-color .15s ease, background .15s ease;
}
.lx-cart:hover{ border-color:color-mix(in srgb, currentColor 50%, transparent);
  background:color-mix(in srgb, currentColor 8%, transparent); }
.lx-cart svg{ inline-size:17px; block-size:17px; }
.lx-cart::after{ display:none; }              /* not the nav tab underline */
/* LAITRON. Shares the 34px circle with .lx-cart/.lx-store, and now MATCHES them:
   a transparent, currentColor-outlined circle over the header — not a filled
   cream chip. (It was a cream disc because the glyph — Joe's artwork, see
   tools/build_laitron_ai.py — was lifted off a cream ground; Joe asked 2026-08-31
   for it to sit on the header like its siblings instead. The glyph PNG is already
   transparent, so the button just adopts .lx-cart's ring + hover. Trade-off: the
   fixed grey/crimson mark has less contrast on the landing's dark passage than it
   did on the cream disc — watch it there if the dark landing comes back.) */
.lx-ai-btn{
  background:transparent;
  border-color:color-mix(in srgb, currentColor 22%, transparent);
  transition:border-color .15s ease, background .15s ease;
}
.lx-ai-btn:hover,
.lx-ai-btn:focus-visible{
  border-color:color-mix(in srgb, currentColor 50%, transparent);
  background:color-mix(in srgb, currentColor 8%, transparent);
}
/* Sized by HEIGHT: the glyph is portrait (83x100), so height is what decides
   whether it clears the disc. 20px leaves ~7px of cream above and below, and
   16.6px of width inside a 34px disc.

   Do NOT centre this by eye with a transform — the asset is already padded so
   its centre of MASS lands near its own centre (see _optical_centre in
   tools/build_laitron_ai.py). Flex centring the box is therefore correct, and
   a nudge here would double the correction. */
.lx-ai-btn__m{
  block-size:20px; inline-size:auto; display:block;
}
/* NO .lx-cart__n HERE ANY MORE. The basket count is not a corner badge on a
   header icon: the header has no basket icon (lib/sitehead.py explains why),
   and the count is a row-end badge inside the account menu, styled — pop
   keyframes and all — by authnav.STYLE so the component travels whole. These
   rules were left behind switched off, which is how cart-pop.js came to hang
   the count off the only remaining .lx-cart in the header: the LAITRON button. */
/* The burger drawer is a light card in every theme, and the cart is NOT in it
   (it stays in the header row) — so it needs no collapsed variant, only room:
   at the narrowest sizes the language switcher is the thing that gives way. */
@media (max-width:420px){ .lx-lang{ display:none; } }

/* The "المراجع / References" dropdown that used to live here is GONE — every
   tab is a plain link now (see lib/sitehead.py). Its rules went with it rather
   than being left switched off: they styled a .lx-nav__grp / .lx-nav__menu that
   nothing renders any more, and dead selectors in a shared stylesheet are how
   the header ended up with three divergent copies in the first place. */

/* Country switch — the one place the corpus is chosen. Deliberately quieter
   than the search page's old in-row pills: it sits in the header all day, so it
   states which corpus you are in without competing with the tabs it governs.
   Crimson stays THE accent (there is no second brand colour); the selected
   country is simply the one that is not dimmed. */
/* A compact dropdown (was a two-button segmented pill): one label wide instead
   of two, which hands the tab row more room — nav.js budgets the header as
   2 x the wider side, so a narrower left block is a wider nav.

   It is OUR OWN button + menu, NOT a native <select>. A native select's OPEN
   list is an un-styleable OS popup — that boxy grey system list was "the old
   dropdown". So we draw the closed pill AND the open menu ourselves and theme
   both to match. The current label is server-rendered on the button, so the
   corpus still carries from the server with no flash; country.js toggles the
   [data-open] state on the wrapper and handles the choice + keyboard. */
.lx-country{position:relative;display:inline-block}
.lx-country__btn{
  display:inline-flex;align-items:center;gap:.4rem;
  font:inherit;font-size:.85rem;font-weight:700;letter-spacing:.04em;
  color:var(--lx-on-dark-soft);cursor:pointer;white-space:nowrap;line-height:1.2;
  border:1px solid var(--lx-line-d);border-radius:999px;
  padding:.38rem .95rem;background-color:rgba(0,0,0,.03);
  transition:color .25s var(--lx-ease),border-color .25s var(--lx-ease),background-color .25s var(--lx-ease)}
.lx-country__btn:hover,.lx-country[data-open] .lx-country__btn{
  color:var(--lx-on-dark);border-color:var(--lx-on-dark-soft);background-color:rgba(0,0,0,.06)}
.lx-country__btn:focus-visible{outline:2px solid var(--lx-accent);outline-offset:2px}
/* The caret is an inline SVG (currentColor, so it needs no per-theme copy) and
   flips when the menu is open. */
.lx-country__caret{inline-size:11px;block-size:7px;flex:0 0 auto;
  transition:transform .2s var(--lx-ease)}
.lx-country[data-open] .lx-country__caret{transform:rotate(180deg)}
/* THE MENU WE DRAW OURSELVES — the whole reason the native select is gone. A
   floating paper card in both themes (an OS-style light menu), positioned with
   logical props so it hangs from the button's start edge in AR and EN alike. */
.lx-country__menu{
  position:absolute;inset-block-start:calc(100% + .4rem);inset-inline-start:0;
  z-index:60;min-inline-size:100%;margin:0;padding:.25rem;list-style:none;
  background:#F4F1EA;border:1px solid rgba(0,0,0,.1);border-radius:.7rem;
  box-shadow:0 12px 30px rgba(0,0,0,.20);
  opacity:0;transform:translateY(-.3rem);pointer-events:none;
  transition:opacity .16s var(--lx-ease),transform .16s var(--lx-ease)}
.lx-country[data-open] .lx-country__menu{opacity:1;transform:none;pointer-events:auto}
.lx-country__opt{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  white-space:nowrap;cursor:pointer;
  font-size:.85rem;font-weight:700;letter-spacing:.04em;color:#3A342B;
  padding:.5rem .85rem;border-radius:.45rem;
  transition:background-color .15s var(--lx-ease),color .15s var(--lx-ease)}
.lx-country__opt:hover,.lx-country__opt:focus-visible{background:rgba(0,0,0,.06);outline:none}
/* The current corpus is the one NOT dimmed — crimson accent + a check. */
.lx-country__opt.is-on{color:var(--lx-accent)}
.lx-country__opt.is-on::after{content:"\2713";font-size:.85em}
.lx-country__opt:not(.is-on)::after{content:"";}
/* THE DARK PASSAGE. --lx-on-dark is PAPER ink (#16140F) and --lx-line-d is black
   at 13%; on the landing's dark bands the closed pill would read as a dim blob.
   Relit like .lx-nav / .lx-lang / .lx-burger above. The menu stays a light card. */
body.theme-dark .lx-country__btn{border-color:rgba(238,234,224,.24);
  color:rgba(238,234,224,.62);background-color:rgba(238,234,224,.06)}
body.theme-dark .lx-country__btn:hover,
body.theme-dark .lx-country[data-open] .lx-country__btn{
  color:#EEEAE0;border-color:rgba(238,234,224,.5);background-color:rgba(238,234,224,.12)}
/* The header collapses to a burger by MEASURED fit (see nav.js). The switch
   lives inside .lx-head__left, so it is measured automatically — but on the
   tightest rung the button padding is what gives, not a label. */
@media (max-width:520px){
  .lx-country__btn{padding:.32rem .75rem;font-size:.78rem}
}
