:root{
    --bg:#fcfbf9; --surface:#ffffff; --raise:#f6f4ee; --ink:#1b1a20; --muted:#5f5c68; --faint:#928e9a; --line:#ece9e2;
    --accent:#ef5a3c; --accent-ink:#ffffff; --accent-soft:#fdeee9;
    /* --line disappears against --raise, which is where the ghost buttons sit. One step darker,
       derived from the palette rather than picked by eye. */
    --line-strong:color-mix(in srgb, var(--faint) 42%, var(--line));
    --mint:#0f9f76; --mint-soft:#e6f5ef; --mint-bar:#18b184;
    --display:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;
    --sans:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --r:16px;
    color-scheme:light;   /* light only — no dark mode */
  }
  /* Hebrew gets a face that actually has Hebrew in it. Assistant carries both the headings and the
     body: the design's weight contrast comes from size and colour, not from two families, so one
     well-drawn Hebrew sans does the whole job. The Latin faces stay for Latin pages. */
  :root:lang(he){
    --display:"Assistant",system-ui,-apple-system,"Segoe UI",sans-serif;
    --sans:"Assistant",system-ui,-apple-system,"Segoe UI",sans-serif;
  }

  :root:lang(ar){
    --display:"Noto Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
    --sans:"Noto Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation-duration:.001ms!important;transition-duration:.001ms!important} }
  body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
  .wrap{max-width:1080px;margin:0 auto;padding:0 22px}
  a{color:inherit;text-decoration:none}
  /* A code fragment is always left-to-right, whatever the page is. Without this, ".html" inside a
     right-to-left sentence renders as "html." — the leading dot is neutral, so it drifts to the
     wrong end of the run. */
  code{direction:ltr;unicode-bidi:isolate}
  h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;margin:0;text-wrap:balance}
  h1{font-size:clamp(34px,6vw,58px);line-height:1.02;font-weight:800}
  h2{font-size:clamp(26px,3.4vw,36px);line-height:1.05;font-weight:700}
  h3{font-size:19px;font-weight:700}
  p{margin:0}
  /* line-height is NOT optional here. A <button> gets line-height:normal from the browser while an
     <a> inherits the page's 1.6 — so the same .btn class produced a 47px button next to a 53.6px
     link, measured, every time one of each sat side by side. 1.2 is what `normal` resolves to for
     this face, so the buttons keep the height they had and the links come into line with them. */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-family:var(--sans);line-height:1.2;border-radius:12px;padding:13px 20px;cursor:pointer;border:1px solid transparent;font-size:16px;transition:transform .08s ease,background .15s}
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:var(--accent);color:var(--accent-ink)}
  .btn-primary:hover{filter:brightness(1.05)}
  .btn-ghost{background:transparent;border-color:var(--line-strong);color:var(--ink)}
  .btn-ghost:hover{border-color:var(--faint)}
  .eyebrow{font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.02em;color:var(--accent);text-transform:none}
  .muted{color:var(--muted)}

  /* header */
  header.site{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  /* One height for every control in this bar, declared once. The CTA had height:34px and the
     language button was sized by its padding instead — 29px against 34px, measured — so two controls
     that sit side by side in a toolbar did not line up. A toolbar's controls have to agree, and they
     only agree if one number says so. */
  /* ONE gap for the whole bar. The CTA used to sit 18px out while the two utilities were 10px
     apart, on the theory that the primary action wants separating — but it is already filled and
     orange among two outlined controls, so the colour has done that job and the extra space only
     reads as a measurement nobody checked. A difference that small looks like a mistake rather than
     a grouping; if separation were ever genuinely needed it would have to be unmistakable. */
  .nav{display:flex;align-items:center;gap:10px;height:66px;--navctl:34px}
  /* The wordmark is pinned to the Latin display face — it is the same mark in every language and must
     not re-draw itself at the language border. The LOCKUP, though, follows the page: on a
     right-to-left page the logomark leads from the right and the name sits beside it, the way the
     eye arrives. Only the logomark itself is held left-to-right, below — pinning the whole lockup
     put the mark on the wrong side. */
  /* Never the shock absorber. Everything else in this bar refuses to shrink, so the brand was the
     one item left to squeeze, and between about 430 and 720px it was giving up width to keep the
     others whole. It keeps its size now; where the bar truly cannot hold everything the LAYOUT
     changes instead — the wordmark goes below 430px (further down this file, and long-standing) and
     the library link takes a row of its own below 720px. A decision, not a collapse. */
  .brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;font-size:20px;letter-spacing:-.02em}
  .brand svg{display:block}
  /* Held left-to-right whatever the page does: these are angle brackets around a cap, and mirrored
     they come out as </cap> — the slash jumps to the front and the mark reads backwards. */
  .brand .logomark{direction:ltr;unicode-bidi:isolate;font-family:var(--display);font-weight:800;font-size:1.12em;letter-spacing:-2px;line-height:1;display:inline-flex;align-items:center}
  .brand .logomark .brk{color:var(--accent);font-family:var(--sans);font-weight:400}
  .brand .logomark .brk:last-child{margin-inline:-3px}
  /* the width is given, not taken from the file: width:auto is 0 until cap.svg arrives, and the name
     and everything beside it then jumped sideways on every first visit. The cap is square (0 0 128 128). */
  .brand .logomark .cap{height:1.05em;width:1.05em;margin:0 1px;vertical-align:-.2em}
  .nav .spacer{flex:1}
  /* The utility group — language, and log in. Quieter than the CTA on purpose: our primary action
     needs no account, so signing in is what a RETURNING teacher does, not a step to push a new one
     towards. Grouped and top-right, per NN/g on utility navigation. */
  /* The same 10px as the bar itself: three controls, evenly spaced. 6px made the two bordered
     controls read as one segmented control, which they are not. */
  .nav .utils{display:flex;align-items:center;gap:10px}
  /* Nothing in the bar may wrap. Without this the header breaks across lines the moment the words
     get longer than English's — which is every other language. */
  .nav .utils a,.nav .btn{white-space:nowrap;flex:0 0 auto}
  /* The two utilities wear ONE treatment. Before this the globe was a bordered box and Log in was
     bare text, so the row had three different looks for three controls — and a thing you click that
     looks like running text does not read as a control at all. Outlined for both, filled for the one
     primary action: two levels, which is the hierarchy, rather than three, which is an accident. */
  /* The one section link in the bar. NOT dressed as a utility — it is a destination, not a tool —
     so it is plain text at the bar's weight, sitting next to the brand where primary navigation
     goes. It never hides on a narrow screen: it is one of only two ways into the product, and the
     phone reader is exactly the one who has no activity of their own to publish. */
  .nav .navmain{display:inline-flex;align-items:center;gap:8px;height:var(--navctl);padding:0 2px;
    color:var(--muted);font-weight:600;font-size:14.5px;text-decoration:none;white-space:nowrap;flex:0 0 auto}
  /* The mark is quieter than the words and stays that way — it is a hint at what is behind the link,
     never the thing carrying the meaning. It lifts with the words on hover so the two read as one
     control rather than as an icon sitting next to some text. */
  .nav .navmain svg{opacity:.55;flex:0 0 auto;transition:opacity .12s}
  .nav .navmain:hover{color:var(--ink)}
  .nav .navmain:hover svg{opacity:.9}
  .nav .navmain.on{color:var(--ink)}
  .nav .navmain.on svg{opacity:.9}
  /* The rule that makes it a link instead of a tagline. The brand and this sat a few pixels apart in
     the same weight, and the eye read them as one lockup — reported as simply looking wrong. A
     hairline is the whole fix: it costs no height, adds no colour, and says these are two things. */
  .nav .navsep{width:1px;height:20px;background:var(--line-strong);opacity:.65;flex:0 0 auto;
    margin-inline:14px}

  /* Below the width where the bar fits, the rest moves behind a button.
     MEASURED, not guessed: with everything in the row it overflows by 124px at 561, 85 at 600, 45 at
     640, 5 at 680, and fits from 700 up — in Hebrew, which is the widest of the three. 720 is that
     number with a little room. The bar then keeps the brand and the ONE primary action; the library,
     sign-in and the languages are a tap away instead of a squeeze away. */
  .burger{display:none;align-items:center;justify-content:center;width:var(--navctl);height:var(--navctl);
    border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--muted);
    cursor:pointer;flex:0 0 auto;padding:0}
  .burger:hover{color:var(--ink);background:var(--raise)}
  .burger svg{display:block}
  .burger .ico-close{display:none}
  header.site.menuopen .burger{color:var(--ink);background:var(--raise)}
  header.site.menuopen .burger .ico-open{display:none}
  header.site.menuopen .burger .ico-close{display:block}

  /* The panel drops from the bar and belongs to it — same surface, one hairline between them, full
     width. Not a floating card: at this width the bar IS the page's whole top edge, and a card
     hovering under it would have to invent an edge the header already has. */
  .navmenu{display:none;border-top:1px solid var(--line);background:var(--surface);
    box-shadow:0 14px 28px -20px rgba(20,15,10,.45)}
  .navmenu .mrow{display:flex;align-items:center;gap:11px;padding:15px 22px;
    font-family:var(--sans);font-weight:600;font-size:15.5px;color:var(--ink);text-decoration:none;
    border-bottom:1px solid var(--line)}
  .navmenu .mrow svg{opacity:.5;flex:0 0 auto}
  .navmenu .mrow:hover{background:var(--raise)}
  .navmenu .mrow[aria-current]{color:var(--accent)}
  .navmenu .mrow[aria-current] svg{opacity:1}
  /* The languages, listed flat. A popup inside a panel is two taps on a phone for a list three lines
     long, and each name is written in its own script — which is the whole point of a language list:
     the person who needs it cannot read the current one. */
  .navmenu .mlangs{display:flex;flex-wrap:wrap;gap:8px;padding:13px 22px 15px}
  .navmenu .mlang{font-family:var(--sans);font-weight:600;font-size:14px;color:var(--muted);
    border:1px solid var(--line-strong);border-radius:999px;padding:6px 14px;text-decoration:none}
  .navmenu .mlang:hover{color:var(--ink);background:var(--raise)}
  .navmenu .mlang.on{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}

  @media(max-width:719px){
    /* The bar keeps the brand, the language control and the one primary action. The language button
       stays out here because it is the one control whose whole job is to be findable by someone who
       cannot read the page it is on — behind a button labelled in that same language, it is not.
       It costs 33px at this width, which the bar has. */
    .nav .navsep,.nav .navmain{display:none}
    .nav .utils .navauth{display:none}
    .burger{display:inline-flex}
    .navmenu{display:block}
    .navmenu[hidden]{display:none}
    /* …and the languages therefore leave the panel: two ways to the same list, one of them a list
       inside a menu, is a choice nobody should have to make. */
    .navmenu .mlangs{display:none}
  }
  .nav .navauth{display:inline-flex;align-items:center;height:var(--navctl);padding:0 13px;border-radius:9px;
    border:1px solid var(--line);color:var(--muted);font-weight:600;font-size:14px;text-decoration:none}
  .nav .navauth:hover{color:var(--ink);background:var(--raise)}
  /* A toolbar's controls have to agree: the CTA is pinned to the same height and radius as the
     language button beside it, rather than inheriting the 54px in-page button size. */
  /* No extra margin here. .nav already has gap:18px, so a 10px margin on top of it put 28px between
     the language button and the CTA — measured, and in both signed-in and signed-out states. Some
     separation is right, because the utility group and the one primary action are different in kind,
     but 28px reads as a mistake rather than as a grouping. The nav's own gap is the separation. */
  .nav .btn-primary{height:var(--navctl);padding:0 16px;font-size:14.5px;border-radius:9px}
  /* NOTHING in this header disappears. Everything left in it is either the brand, a tool a teacher
     may need (sign in, language) or the one action the page exists for — and NN/g's warning about
     hiding utilities applies to all three: "Test for both comprehension and interaction if you hide
     mission-critical tools." Log in was hidden on every phone until this row was rebuilt. */
  @media(max-width:980px){ .nav .btn-primary{padding:0 14px;font-size:14px} }
  @media(max-width:560px){ .nav .navauth{padding:0 8px} }

  /* hero. The headline sits ABOVE the two columns and spans the whole measure — inside the text
     column it broke over three lines and left a hole the size of a card at the other end. The demo
     panel still overhangs the boundary into the band below, so depth comes from overlap rather than
     from a stack of shadows. */
  .hero{padding:72px 0 40px}
  .hero h1{font-size:clamp(34px,6.4vw,72px);line-height:1.0;letter-spacing:-.035em;margin-bottom:34px}
  .hero h1 em{font-style:normal;color:var(--accent)}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
  @media(max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:36px} }
  .hero .lede{font-size:clamp(17px,1.5vw,19px);color:var(--muted);margin:0 0 26px;max-width:44ch}
  .hero .lede .hl{color:var(--accent);font-weight:700;white-space:nowrap}
  .hero .lede .hl .spk{width:.82em;height:.82em;fill:currentColor;display:inline-block;vertical-align:-1px;margin:0 1px 0 0}
  .hero .lede b{color:var(--ink);font-weight:700}
  .hero .cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
  .hero .fine{color:var(--faint);font-size:13.5px;margin-top:16px}
  /* The panel sits a little below the top of the copy beside it rather than level with it — the two
     columns hold different kinds of thing, and starting them on the same line makes the panel read
     as a second paragraph. Reset when the grid stacks: there the 36px row gap already separates them. */
  /* The demo panel hangs 130px INTO the section below it — that overlap is where the page's depth
     comes from, instead of a flat stack of bands. Whichever section comes FIRST therefore has to
     clear it, and carries padding-top:130px in the template. That is "how it works" again: the
     library sat there for a day, inherited the overlap without the clearance, and its heading was
     under the panel. Move the section, move the padding — the two belong together. */
  .hero .demo{margin-top:32px;margin-bottom:-130px;position:relative;z-index:2;box-shadow:0 30px 70px -40px rgba(20,15,10,.45)}
  @media(max-width:900px){ .hero .demo{margin-top:0;margin-bottom:-100px} }

  /* demo */
  .demo{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 24px 50px -30px rgba(20,15,10,.35);overflow:hidden}
  .demo-top{display:flex;align-items:center;gap:8px;padding:11px 15px;border-bottom:1px solid var(--line);background:var(--raise);font-size:13px;color:var(--muted);font-weight:600}
  .demo-top .live{margin-inline-start:auto;display:inline-flex;align-items:center;gap:6px;color:var(--mint);font-weight:700}
  .demo-top .live b{width:7px;height:7px;border-radius:50%;background:var(--mint);display:inline-block;animation:pulse 1.8s infinite}
  @keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
  .demo-body{display:grid;grid-template-columns:1fr .84fr}
  @media(max-width:520px){ .demo-body{grid-template-columns:1fr} }
  .activity{padding:20px 18px;border-inline-end:1px solid var(--line)}
  @media(max-width:520px){ .activity{border-inline-end:0;border-bottom:1px solid var(--line)} }
  .activity .q{font-family:var(--display);font-weight:700;font-size:20px;margin:2px 0 14px}
  .opts{display:flex;flex-direction:column;gap:9px}
  .opt{text-align:start;background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:12px 14px;font:inherit;font-weight:600;cursor:pointer;transition:.12s}
  .opt:hover{border-color:var(--accent);background:var(--accent-soft)}
  .opt.right{border-color:var(--mint);background:var(--mint-soft);color:var(--ink)}
  .opt.wrong{border-color:#e0483c;opacity:.7}
  .progress-dots{display:flex;gap:6px;margin-top:16px}
  .progress-dots i{width:22px;height:5px;border-radius:3px;background:var(--line)}
  .progress-dots i.on{background:var(--accent)}
  .done{padding:26px 18px;text-align:center}
  .done .big{font-family:var(--display);font-weight:800;font-size:22px;margin-bottom:6px}
  .report{padding:16px 16px}
  .report .rh{font-weight:700;font-size:13px;color:var(--muted);display:flex;justify-content:space-between;margin-bottom:12px}
  .row{display:grid;grid-template-columns:52px 1fr 34px;gap:8px;align-items:center;margin:9px 0;font-size:13px}
  .row .nm{color:var(--muted);font-weight:600}
  .row.you .nm{color:var(--accent);font-weight:800}
  .bar{height:8px;border-radius:5px;background:var(--line);overflow:hidden}
  .bar i{display:block;height:100%;width:0;background:var(--mint-bar);border-radius:5px;transition:width .5s cubic-bezier(.2,.7,.2,1)}
  .row .sc{text-align:end;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted)}
  .row.you .sc{color:var(--ink)}

  /* sections. A band alternates the ground colour instead of a rule doing all the work. */
  section{padding:0;border-top:0}
  .band{background:var(--raise)}
  .padtop{padding-top:76px} .padbot{padding-bottom:76px}
  @media(max-width:760px){ .padtop{padding-top:52px} .padbot{padding-bottom:52px} }

  /* A hairline with a small-caps label sitting on it — print, not SaaS. */
  .rulelabel{display:flex;align-items:center;gap:16px;margin:0 0 34px}
  .rulelabel .n{font-family:var(--display);font-weight:700;font-size:12px;color:var(--accent);letter-spacing:.1em}
  .rulelabel .t{font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--faint);white-space:nowrap}
  .rulelabel .r{flex:1;height:1px;background:var(--line)}
  .sec-head{max-width:52ch;margin-bottom:40px}
  .sec-head h2{font-size:clamp(28px,3.6vw,40px);letter-spacing:-.03em;max-width:15ch;margin-bottom:8px}
  .sec-head p{color:var(--muted);max-width:46ch}

  /* Steps: an editorial sequence. Not three cards — see docs/DESIGN.md §4. The numerals are
     outlined in the ACCENT: at 1.5px of --line on an off-white band they were invisible, which
     makes them decoration rather than wayfinding. */
  .seq{border-top:1px solid var(--line)}
  .seq .row{display:grid;grid-template-columns:auto 1fr 1.25fr;gap:28px;align-items:start;
    padding:30px 0;border-bottom:1px solid var(--line)}
  @media(max-width:760px){ .seq .row{grid-template-columns:auto 1fr;gap:16px 20px}
                           .seq .row p{grid-column:2} }
  .seq .num{font-family:var(--display);font-weight:800;font-size:clamp(40px,5vw,62px);line-height:.8;
    color:transparent;-webkit-text-stroke:2px var(--accent);width:1.6em;transition:color .15s}
  .seq .row:hover .num{color:var(--accent)}
  @supports not (-webkit-text-stroke: 1px #000){ .seq .num{color:var(--accent);opacity:.35} }
  .seq h3{font-size:clamp(20px,2.4vw,26px);font-weight:700;letter-spacing:-.02em;padding-top:.15em}
  .seq p{color:var(--muted);font-size:16.5px;padding-top:.35em}

  /* The argument: one lead, two supporting. Again, not three equal boxes. */
  .arg{display:grid;grid-template-columns:1.4fr 1fr;gap:0 56px;align-items:start}
  @media(max-width:860px){ .arg{grid-template-columns:1fr;gap:34px} }
  .arg .lead h2{font-size:clamp(30px,4.2vw,46px);line-height:1.04;letter-spacing:-.03em;max-width:16ch}
  .arg .lead p{color:var(--muted);margin-top:18px;max-width:42ch;font-size:17.5px}
  .arg .side{display:flex;flex-direction:column}
  .arg .side .it{padding:22px 0;border-top:1px solid var(--line)}
  .arg .side .it:first-child{border-top:0;padding-top:0}
  @media(max-width:860px){ .arg .side .it:first-child{border-top:1px solid var(--line);padding-top:22px} }
  .arg .side h3{font-size:18px;margin-bottom:7px}
  .arg .side p{color:var(--muted);font-size:15.5px}

  .schools{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
  @media(max-width:760px){ .schools{grid-template-columns:1fr;gap:24px;align-items:start} }
  .schools .btn{justify-self:start}
  .schools h2{font-size:clamp(28px,3.6vw,40px);letter-spacing:-.03em;max-width:14ch}
  .schools p{color:var(--muted);margin-top:16px;max-width:52ch}

  /* .schools caps its heading at 14ch, which is right for two words and wrong for a question.
     This one is a sentence and gets the room to be one. */
  #library h2{max-width:24ch}
  .libfine{margin-top:18px}

  /* No border-top here: the rule-label sits directly above the first question and already draws a
     line. Two hairlines a few pixels apart read as a mistake, not as structure. (The step sequence
     keeps its top border — there a heading and a paragraph sit between the label and the list.) */
  .faq details{border-bottom:1px solid var(--line)}
  .faq summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;gap:18px;align-items:baseline;
    font-family:var(--display);font-weight:700;font-size:clamp(18px,2vw,21px);letter-spacing:-.015em}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";margin-inline-start:auto;color:var(--accent);font-family:var(--sans);
    font-weight:600;font-size:22px;line-height:1}
  .faq details[open] summary::after{content:"\2212"}
  .faq details p{color:var(--muted);padding:0 0 24px;max-width:66ch;font-size:16.5px}

  footer{padding:40px 0 64px;border-top:1px solid var(--line);color:var(--muted);font-size:15px}
  footer .frow{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
  footer a{color:var(--muted)}footer a:hover{color:var(--ink)}
  footer .spacer{flex:1}

/* ---- Language ---------------------------------------------------------------------------------
   The switcher is always in the nav, so every language is one click away from anywhere. Nothing
   interrupts: no modal, no interstitial, and since the layout-shift fix, no bar either — a visitor
   who reads another language we publish gets a dot on the globe and nothing more. */
/* The language control: one fixed-width button whatever the number of languages, so the header does
   not grow with the locale directory and does not break on a phone. Globe, never a flag; endonyms,
   never two-letter codes. On a narrow screen the label drops and the globe carries it alone. */
.langmenu{position:relative;display:inline-flex}
.langbtn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:14px;font-weight:600;
  color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:9px;
  padding:5px 10px;cursor:pointer;white-space:nowrap}
.langbtn:hover{color:var(--ink);background:var(--raise)}
.langbtn .globe{flex:0 0 auto}
/* Inside the nav it is one of the toolbar's controls and takes the toolbar's height. Elsewhere (the
   footer once had one) it stays sized by its own padding. */
.nav .langbtn{height:var(--navctl);padding-top:0;padding-bottom:0}
.langbtn .car{display:inline-flex;align-items:center;color:var(--faint)}
.langpop{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:30;min-width:170px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:6px;
  box-shadow:0 18px 44px -18px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:2px}
/* An author `display` beats the user-agent [hidden] rule outright, so the panel would sit open
   forever. Say it here rather than toggling inline styles. */
.langpop[hidden]{display:none}
/* …and it happened again, worse: the dashboard's "saved to your account" banner is display:flex, so it
   showed on EVERY visit — and its button is only wired when the page arrived from saving, so on every
   other visit it was a banner nobody could explain with a button that did nothing. Every test arrived
   the one way that worked. `hidden` means hidden, everywhere, whatever display a class declares. */
[hidden]{display:none !important}
/* Scoped through .nav on purpose: it sits inside the header's utility group, whose own anchor rule
   would otherwise win and paint every option the same muted grey, current one included.
   text-align:start with no per-option dir, so every language sits on the same edge whatever script
   it is written in — a list where each row starts somewhere different is not a list. */
.nav .langpop .langopt{display:block;padding:8px 12px;border-radius:8px;font-size:14px;font-weight:600;
  color:var(--ink);text-decoration:none;white-space:nowrap;text-align:start;unicode-bidi:isolate}
.nav .langpop .langopt:hover{background:var(--raise)}
.nav .langpop .langopt.on{color:var(--accent)}
/* Two groups: the languages this visitor plausibly reads, then everything else. */
.langgrp{display:flex;flex-direction:column;gap:2px}
.langgrp.rest{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.nav .langpop .langgrp.rest .langopt{color:var(--muted);font-weight:500}
.nav .langpop .langgrp.rest .langopt:hover{color:var(--ink)}
/* Past roughly ten languages the panel wants a search field — see nav.js. Until then it scrolls. */
.langpop{max-height:min(60vh,420px);overflow-y:auto}
/* Phone: the language control loses its label, and the WORDMARK comes down while the MARK does not.
   They used to shrink together, because the mark is sized in em off the brand — so making room by
   lowering the brand's font-size took the mark down with it, from 22px to 15, and below 430px the
   mark went to 19px while the word disappeared entirely. The mark is the thing a reader recognises
   and the thing they press to get home; the word beside it is the part that can afford to be small.
   So the mark is pinned to the size it has on a desktop (20px x 1.12) and the word is set on its own.
   14px is the floor for the word (Arik) — small enough to fit, large enough to read. At 14 it is 85px
   wide and Hebrew was 2px over at exactly 390, which is an iPhone; the 2px came out of the gap
   between the mark and the word rather than out of the word. */
@media(max-width:719px){ .langbtn .lbl,.langbtn .car{display:none} .langbtn{padding:0 8px}
                         .brand{font-size:14px;gap:6px}
                         .brand .logomark{font-size:22.4px} }
/* Below 390 the word goes anyway, and the mark still keeps its size. Measured in Hebrew, which is
   what exposes it — "פרסום פעילות" is longer than "Publish": with the word in, the row overflows by
   49px at 320, 9px at 360 and 13px at 376, and fits from 390, which is an iPhone. The word is 85px
   of that; nothing else in the row can give it up without becoming a control nobody can read. The
   mark is still the link home. The number is where it actually breaks, not a round one. */
@media(max-width:389px){ .brand .bname{display:none} .brand{gap:0} }
/* 320px is a real phone and Hebrew still wanted 6px more than it had there, even with the wordmark
   gone. The controls give up padding rather than the row giving up a control — losing the way to
   sign in is what this whole header rebuild was fixing. */
@media(max-width:360px){ .nav{gap:6px} .nav .utils{gap:6px}
                         .nav .navauth{padding:0 10px} .nav .btn-primary{padding:0 12px} }
/* A dot on the globe when the visitor's own browser says they read a language we publish and are
   not currently reading. It replaced a bar at the top of the document, which arrived a beat after
   first paint and pushed the whole page down — a layout shift on the fold, on every first visit. */
.langbtn.hasalt{position:relative}
.langbtn.hasalt::after{content:"";position:absolute;top:-3px;inset-inline-end:-3px;width:8px;height:8px;
  border-radius:50%;background:var(--accent);border:2px solid var(--bg)}