/* ============================ RESPONSIVE (phones/tablets) ============================ */ /* ---- Header overflow guard ------------------------------------------- The nav's three children need ~1289px (logo 182 + menu 777 + actions 286 + two 22px gaps) but `.wrap` caps the row at 1180px — so the row was ALWAYS wider than its container, at every viewport. `overflow-x:clip` then hid the excess, which pushed the right-hand controls off-screen: "Get Premium" lost 59px at 1280 and 16px at 1366, and at 375px the BURGER — the only navigation a phone has — sat entirely outside the viewport, leaving the site with no menu at all. Fix the shape rather than the symptom: pin the logo and actions at their natural size and let the primary menu absorb the shortfall. The menu is the one part with a full replacement (the mobile drawer), so truncating it is always recoverable — losing the burger never is. REVISED. The budget below was measured LOGGED OUT, and that is the whole problem: signed in, `.actions` also carries the account chip, and the chip's width IS THE USER'S NAME — data we do not control and cannot predict. So "pin actions, shrink the menu" handed the shortfall to the primary navigation and sized it from a stranger's Telegram profile: a student called "Abdulloh" saw the full menu, one called "IELTS BANDLY SUPPORT" had the Quiz link clipped off the end of it. Measured at 1440: the row needs 1352px signed-in with a short name and 1459px with a long one, against 1348px available — i.e. it never fitted for ANY signed-in user, and the name decided how badly. So the shortfall now lands on the name instead. The menu is rigid (it is the navigation, and it already has the drawer below the breakpoint), and the one flexible thing in the row is the piece of text whose length is not ours and which reads fine truncated. */ body > header .nav{ flex-wrap:nowrap; } body > header .nav .logo{ flex:0 0 auto; } /* `overflow-x:clip` (not `hidden`) keeps horizontal clipping when the menu row is tight — but leaves the vertical axis visible so the Writing AI drop-menu can spill below the header. `overflow:hidden` clipped it flat. The clip is now a backstop only: `flex:0 0 auto` means the menu is never handed less than it asks for, so there is nothing left to clip. */ body > header .nav .menu{ flex:0 0 auto; overflow-x:clip; overflow-y:visible; } /* Actions may give ground, but ONLY through the account name inside it. Every other child — burger, buttons, toggles — keeps its natural size, because the original note above is still exactly right: a truncated menu is recoverable from the drawer, a burger squeezed off-screen is not. */ body > header .nav .actions{ flex:0 1 auto; min-width:0; } body > header .nav .actions > *{ flex-shrink:0; } body > header .nav .actions .user-wrap{ flex-shrink:1; min-width:0; } /* `.wrap`'s 1180px cap leaves a 1128px content box, far short of what the full row needs, so the menu could never fit at ANY viewport and would clip mid-item. Give the header row (and only the header row — page content stays at 1180) enough width to lay the menu out properly. THE BUDGET, re-measured 2026-07-23. The menu grew when Profile was added to it, and these numbers did not follow: the row is logo 182 + menu 821 + actions 284 + two 22px gaps = 1331, plus `.wrap`'s 2×26px padding = 1383 to lay out without clipping. At the old 1360px cap the menu was handed 796px for 821px of items, so on a 1440px laptop — the single most common desktop width there is — the last item rendered as "Profi". Worse, it was specifically the Profile link, whose round-icon fallback is hidden above the burger breakpoint precisely BECAUSE the menu is supposed to carry it, so the header offered no intact route to Profile at all. 1400 gives the menu 838px against the 821px it needs — a 17px cushion for font fallback and longer labels, without a second row's worth of slack. 1424, not 1400: the cushion above was spent entirely on the menu and left nothing for the account chip, so a signed-in row came out ~11px short and the name ellipsised even when it was as ordinary as "Abdulloh". The extra 24px is what lets a normal name render in full while a long one still truncates. Kept under 1440 — the most common laptop width — so the row never runs edge to edge there. The burger breakpoint below stays at 1400 on purpose: it is what decides when the menu is replaced by the drawer, and raising it would take the full menu away from exactly those 1440px laptops a previous fix restored it for. */ body > header .wrap.nav{ max-width:1424px; } @media (max-width:920px){ .checker{ grid-template-columns:1fr; } .grid,.tests{ grid-template-columns:1fr 1fr; } } /* 1500, not 880. An admin's row carries this pill ON TOP of everything a student's row carries, and at 1440 that 122px is exactly what has no room left: the account chip was crushed to 19px and its avatar spilled out of the pill. Dropping to the gear alone frees ~82px and costs nothing — the button keeps its aria-label and title. */ @media (max-width:1500px){ .admin-go span.label{ display:none; } } /* Collapse to the burger while the full menu still FITS — it needs a 1383px viewport (see the budget above), so this has to sit at or above that, not at 760px where the menu had already been clipped for 500+ px. It was 1340px, which is 43px SHORT of what the menu actually measures now, so every viewport from 1341 to 1383 kept a menu it could not fit and clipped the last item. Keep this in step with the .wrap.nav cap above: below it the burger takes over, above it the full menu must lay out intact. */ @media (max-width:1400px){ .menu{ display:none; } /* hide full menu on small screens */ .burger{ display:block; } } /* Above the burger breakpoint the full menu carries its own Profile link, so the round .profile-go icon beside the theme toggle would be the SECOND way to the same page in one header row. Hiding it here also buys back the ~48px the nav item costs, which is what keeps the menu inside the budget above. Below this width the icon is the only Profile entry point (the menu is gone), so it comes straight back — which is why this boundary must stay exactly one pixel above the burger query and never drift from it. */ @media (min-width:1401px){ .profile-go{ display:none !important; } } @media (max-width:680px){ .grid,.tests{ grid-template-columns:1fr; } .topic-list{ grid-template-columns:1fr; } .actions .btn-ghost{ display:none; } .user-chip-name, .user-chip-caret{ display:none; } .user-chip{ padding:4px; } } /* Below ~560px even the collapsed header doesn't fit: logo (153) + theme + avatar + "Get Premium" (122) + burger (37) needs ~426px inside a 323px content box, which is what pushed the burger off a 375px screen. Drop the header's Get Premium here — the mobile drawer carries its own Get Premium button (index.html:249), so the CTA is not lost, only relocated. */ @media (max-width:560px){ body > header .actions .btn-primary{ display:none; } /* The header is already at its limit here (see the note above), and the Profile button is the one control with a full-size duplicate elsewhere: the mobile drawer carries its own Profile tile. So it steps aside rather than pushing the burger off a 375px screen. */ body > header .actions .profile-go{ display:none; } } @media (max-width:540px){ .nav{ gap:8px; } .logo{ font-size:18px; } .logo .mark{ width:28px; height:28px; font-size:14px; } .theme-toggle{ width:34px; height:34px; } .actions{ gap:6px; } } /* ---- Light-mode input backgrounds (the rgba(0,0,0,.35) defaults look harsh on cream) ---- */ :root[data-theme="light"] .otp-boxes input, :root[data-theme="light"] .modal input, :root[data-theme="light"] .modal textarea, :root[data-theme="light"] .checker textarea, :root[data-theme="light"] .admin select, :root[data-theme="light"] .admin input, :root[data-theme="light"] .admin textarea{ background:rgba(20,8,13,.03); } :root[data-theme="light"] .otp-boxes input:focus, :root[data-theme="light"] .modal input:focus, :root[data-theme="light"] .modal textarea:focus, :root[data-theme="light"] .checker textarea:focus{ background:#fff; }