/* Site-wide styles: the navbar, menus, footer, accessibility menu and shared typography.
   Moved out of base.html's inline <style> block into this static file so the browser downloads it
   once and caches it, instead of receiving it again inside the HTML of every single page.
   Order in <head>: Bootstrap -> Font Awesome -> ym-polish.css -> this file -> the page's own CSS. */

/* Order matters: the browser takes each glyph from the first family
   that has it, so Hebrew and Latin come from Heebo and Arabic falls
   through to Noto Kufi. One stack, no per-element switching needed. */
body {
    font-family: 'Heebo', 'Noto Kufi Arabic', sans-serif;
    background-color: var(--ym-bg); color: var(--ym-ink-2);
    /* No transition on font-size here any more. The accessibility
       "larger text" switch rescales the root font, and animating it
       re-laid out the WHOLE page on every frame for 0.3s - the page
       visibly shuddered while it grew. The switch is now instant,
       which is also what iOS does with Dynamic Type. */
}

/* ---- Stacking order ----
   Bootstrap's own layers are fixed: modal-backdrop 1050, modal 1055,
   tooltip 1080. The navbar was sitting at 1080, ABOVE the modal, which
   is why the dark header covered the top of an open article and hid its
   title. Anything that must appear over page content but UNDER a modal
   belongs below 1050; Bootstrap's own value for .sticky-top is 1020. */
.navbar { background-color: var(--ym-navy); box-shadow: 0 4px 12px rgba(0,0,0,0.08); padding: 0.8rem 0; z-index: 1020; }
/* The navbar is sticky, so anything scrolled to by an anchor or by
   the browser restoring a position ends up UNDERNEATH it. scroll-padding
   on the scroll container reserves that height, so headings land below
   the bar instead of behind it. */
/* Scaling the root font size widens fixed-width children; without this
   the page can be scrolled sideways, showing an empty white strip. */
/* Kills the small sideways drag on phones.

   `overflow-x: clip` rather than `hidden` on purpose: hidden turns the
   element into a scroll container, which breaks `position: sticky` on
   the navbar and clips absolutely positioned dropdowns - both of which
   happened here earlier. `clip` prevents the scroll WITHOUT creating a
   scroll container, so sticky and the dropdowns keep working.
   Browsers without clip support simply fall back to the current
   behaviour: a barely visible drag, not a broken layout. */
/* iOS Safari inflates the font of long text blocks on its own
   ('text autosizing'). The ruled-paper passages pin line-height to an
   exact pixel value to line up with a background gradient, so an
   inflated font pushes every line off its rule - which is why the
   passages looked broken on iPhone and iPad but fine on a laptop. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Opening a modal makes Bootstrap hide the page scrollbar and pad the
   body to compensate - which shifts everything sideways, then back on
   close. Reserving the gutter permanently means there is nothing to
   compensate for, so the page stays still. */
/* scrollbar-gutter was reserving space to stop the modal shift, but
   combined with the collapsing navbar it made the whole page - footer
   included - re-lay out on every menu toggle. Forcing a permanent
   scrollbar achieves the same thing without the reflow. */
html { overflow-y: scroll; }
body.modal-open { padding-right: 0 !important; }

html, body { max-width: 100%; overflow-x: clip; }

/* Phone side margins: 16px, the standard iPhone layout margin. (This
   rule used to say 10px, but it never took effect - see .main-content
   below - so on a phone every card ran edge to edge.) */
@media (max-width: 575.98px) {
    .container-fluid, .container { padding-left: 16px; padding-right: 16px; }
}
/* The navbar stays on ONE line and at ONE size.

   Two things were wrong here before:

   1. flex-wrap: wrap let the bar break onto a second row.
   2. overflow-x: auto on .navbar-collapse CLIPPED the dropdowns. A
      dropdown is absolutely positioned and hangs BELOW the bar, so an
      overflow container cuts it off - which is why the notification
      bell and the personal-details menu stopped opening.

   Neither is needed, because the header no longer grows at all: the
   accessibility control is for page CONTENT. The header and footer are
   already large and legible, and scaling them only broke the layout.

   The sizes below are in PIXELS on purpose. The magnifier works by
   scaling the root font size, which is what every rem resolves against;
   pinning these in px makes them immune to it while the page body still
   scales normally. */
/* nowrap belongs ONLY to the expanded bar. Applied at every width it
   also squeezed the COLLAPSED panel, so on a phone the menu items were
   laid out in a narrow column that overflowed off the left edge instead
   of stacking full width. */
/* ---- WHICH LAYOUT THE BAR USES IS DECIDED BY MEASURING, NOT GUESSING ----
   Every nav item carries Hebrew AND Arabic, so how much room the bar
   needs depends on the fonts, the Windows display scaling (125% / 150%
   turns a 1920px laptop into a 1536px or 1280px browser), the browser
   zoom, the scrollbar and the accessibility text size - none of which
   a fixed breakpoint can know. The script right after the <nav>
   measures the real bar and puts ONE class on it:

     (none)          everything fits: the full bar, as before
     .nav-tight      it almost fits: the "שלום, ..." text is hidden,
                     the avatar and its menu stay
     .nav-collapsed  it does not fit: the hamburger menu, at ANY width

   Below 1200px the bar is always .nav-collapsed, exactly like before.
   Without JavaScript the old breakpoint behaviour still applies. */
.navbar:not(.nav-collapsed) .nav-shell { flex-wrap: nowrap; }
.navbar.nav-tight .nav-greeting { display: none !important; }
/* Set only for the instant the script measures, so a link that is
   still animating its padding is not measured mid-animation. */
.navbar.nav-measuring, .navbar.nav-measuring * { transition: none !important; animation: none !important; }

/* The bar may use the whole screen width (up to a sensible maximum),
   instead of Bootstrap's .container, which caps it at 1140px on any
   screen between 1200px and 1400px wide - a typical laptop. */
.nav-shell { max-width: 1560px; padding-left: clamp(12px, 1.6vw, 28px); padding-right: clamp(12px, 1.6vw, 28px); }

/* Just above the collapse breakpoint the bar fits, but only just.
   Trimming the padding here keeps every item on screen between
   1200px and 1400px instead of letting the last one clip. */
@media (min-width: 1200px) and (max-width: 1400px) {
    .navbar .nav-link { padding: 0.45rem 0.55rem !important; font-size: 0.92rem; }
    .navbar-nav { gap: 0 !important; }
    .navbar-brand { font-size: 1.35rem; }
}

/* The collapsed panel is a vertical list, so it must not inherit the
   nowrap and horizontal scrolling meant for the expanded bar. */
/* Collapsed (hamburger) layout: the panel is a full-width vertical
   list, so the row must be allowed to wrap and every child must take
   the whole width. */
/* nowrap, even collapsed. The panel itself is position: absolute in
   this layout (see below), so nothing in the row ever needs to wrap -
   and allowing it let the bell / avatar / menu buttons drop onto a
   second row whenever the brand was a few pixels too wide. That
   happened on every first visit on a phone: the page was first drawn
   in the stand-in font (slightly wider than Heebo), the bar doubled
   in height and pushed the whole page down 44px, then jumped back up
   when Heebo arrived. Now the brand gives way instead (it may lose a
   few pixels for that instant), and the page never moves. */
.navbar.nav-collapsed .nav-shell { flex-wrap: nowrap; }
.navbar.nav-collapsed .navbar-brand { min-width: 0; overflow: hidden; text-overflow: clip; white-space: nowrap; }
.navbar.nav-collapsed .navbar-collapse { flex-basis: 100%; width: 100%; }
.navbar.nav-collapsed .navbar-nav { width: 100%; }
.navbar.nav-collapsed .navbar-nav .nav-item { width: 100%; }
.navbar.nav-collapsed .nav-link {
    width: 100%; text-align: right; border-radius: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* The bell and the user menu live OUTSIDE this panel now, so it
   holds nothing but the link list. */

/* ---- NAVBAR ACTIONS (bell, user menu, hamburger) ----
   Always in the bar, never inside the collapsible panel, so their
   dropdowns are anchored to the navbar and cannot be clipped by the
   panel's own scroll box. */
.navbar-actions { flex: 0 0 auto; }
.navbar-actions .dropdown-menu { z-index: 1035; }

/* Bootstrap does not use Popper for a dropdown whose ancestor is
   `.navbar` - straight from its own docs ("Popper isn't used in
   navbars"), and confirmed in its source: .dropdown-menu only gets
   `top`/`left` inside a `&[data-bs-popper]` rule, an attribute
   Popper adds and a navbar dropdown never gets. So there is no
   runtime "keep this on screen" logic here at all - .dropdown-menu-
   end (itself also [data-bs-popper]-scoped) never takes effect
   either, and the menu is simply anchored to the TOGGLE's own ~40px
   box. On a narrow phone, with the bell sitting mid-navbar rather
   than flush against the screen's own edge, a 340px-wide menu
   growing from that anchor runs off the side - which is the
   notification panel being cut off on the left.

   The fix: remove `position: relative` from just these two
   `.dropdown` wrappers, so the nearest POSITIONED ancestor for their
   menus becomes `.navbar` itself (it has `position: sticky`, which -
   like relative/absolute/fixed - still establishes a containing
   block for absolutely-positioned descendants). `.navbar` spans the
   full screen width, so anchoring to ITS edge keeps the menu fully
   on screen no matter where the icon itself sits. `top`/`inset-
   inline-*` are set explicitly rather than left to Bootstrap's
   conditional rule, so this does not depend on whether Popper
   happens to run.

   Scoped to the collapsed layout (where the icon cluster sits close
   together) rather than applied everywhere: the full desktop bar
   has never shown this symptom, so it is left exactly as it was. */
.navbar.nav-collapsed .navbar-actions .dropdown { position: static; }

.navbar.nav-collapsed .navbar-actions .dropdown-menu {
    position: absolute;
    top: 100%;
    inset-inline-end: 12px !important;
    inset-inline-start: auto !important;
}

/* The full bar keeps the roomier spacing it had before. */
.navbar:not(.nav-collapsed) .navbar-actions { gap: 1rem !important; }

/* On a phone the bar carries the brand plus three controls, so the
   controls shrink rather than letting the brand wrap to a second line. */
@media (max-width: 575.98px) {
    .navbar-brand { font-size: 1.25rem; }
    .navbar .user-avatar { width: 36px; height: 36px; font-size: 1rem; }
    .navbar .nav-icon-btn { width: 36px; height: 36px; font-size: 1.05rem; }
    .navbar-toggler { padding: 0.25rem 0.5rem; }
}
/* 360-375px phones (Android, iPhone SE / mini): brand + bell + avatar
   + menu came to ~380px, so the controls dropped onto a second row and
   the bar doubled in height. A smaller brand keeps one line. */
@media (max-width: 380px) {
    /* `.navbar .navbar-brand`, not `.navbar-brand`: the base brand rule
       (font-size 1.6rem) comes later in this file and silently won
       over a plain `.navbar-brand` here. */
    .navbar .navbar-brand { font-size: 1.15rem; }
    .navbar .navbar-actions { gap: 6px !important; }
}

html.acc-font-large .navbar { font-size: 16px; padding: 0.8rem 0; }
html.acc-font-large .navbar-brand { font-size: 25.6px; }
html.acc-font-large .navbar .nav-link { font-size: 16px; padding: 8px 16px !important; }
html.acc-font-large .user-avatar { width: 42px; height: 42px; font-size: 19.2px; }
html.acc-font-large .notification-badge { font-size: 10.4px; }
html.acc-font-large .nav-icon-btn { font-size: 20.8px; }
html.acc-font-large footer,
html.acc-font-large footer * { font-size: 16px; }
html.acc-font-large .footer-links a { font-size: 16px; }
html { scroll-padding-top: 90px; }
:target { scroll-margin-top: 90px; }
h1, h2, h3, h4, h5, h6 { scroll-margin-top: 90px; }
.navbar-brand { font-weight: 800; color: var(--ym-orange) !important; font-size: 1.6rem; letter-spacing: 0.5px; }
/* Scoped to .navbar. Unscoped, these white / orange !important colours
   also landed on every tab strip inside the pages (the notebook tabs,
   the simulation and demo result tabs): inactive tabs came out white
   on a white background - invisible - and the active one orange on
   blue. */
.navbar .nav-link { 
    color: #ecf0f1 !important; 
    font-weight: 500; 
    padding: 0.5rem 1rem !important; 
    border-radius: 8px; 
    /* Colour only. `all` also animated the padding whenever the bar
       switched layout (.nav-tight / the 1200-1400px trim), so the
       links slid around for 0.3s after every resize. */
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap; 
}
.navbar .nav-link:hover, .navbar .nav-link.active { background-color: rgba(255, 255, 255, 0.1); color: var(--ym-orange) !important; }

.user-avatar { background-color: var(--ym-accent); color: white; border-radius: 50%; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: 0 2px 5px rgba(0,0,0,0.2); transition: transform 0.2s; }
.dropdown-toggle { cursor: pointer; text-decoration: none; }
.dropdown-toggle:hover .user-avatar { transform: scale(1.05); }
.dropdown-toggle::after { display: none; }

        /* Just above the navbar it belongs to, still far below a modal. */
/* The hamburger panel and the dropdowns felt laggy on iOS because they
   appeared with no transition: a long first paint reads as a stall.
   A short transform+opacity transition gives immediate feedback and
   runs on the compositor, so it costs nothing.

   prefers-reduced-motion is honoured - some people get motion sickness
   from sliding panels, and an exam site should not induce that. */
/* Height only. An opacity fade on the panel read as a "glow" while it
   opened, and a transform made it slide from the wrong place. Bootstrap
   already animates the height; it just needed a defined duration. */
/* ---- COLLAPSED MENU: OVERLAY, NO DISPLAY SWITCH ----

   Two separate problems produced the flash:

   1. Bootstrap animates HEIGHT, which re-lays out everything below the
      panel on every frame - the juddering page and footer.
   2. It also switches display none -> block. A display change cannot be
      transitioned, so the panel appeared at full size instantly and THEN
      the fade ran: two paints, which reads as a flash.

   The panel is therefore taken out of the flow AND kept displayed at all
   times, hidden with opacity/visibility instead. Toggling .show then just
   flips CSS state, so the slide runs on the compositor with nothing else
   on the page being laid out again. */
.navbar.nav-collapsed { position: sticky; }

    .navbar.nav-collapsed .navbar-collapse,
    .navbar.nav-collapsed .navbar-collapse.collapse,
    .navbar.nav-collapsed .navbar-collapse.collapsing {
        display: block !important;   /* never none - that is the flash */
        height: auto !important;
        position: absolute;
        top: 100%;
        inset-inline: 0;
        background: var(--ym-navy);
        box-shadow: 0 12px 24px rgba(0,0,0,0.25);
        border-radius: 0 0 12px 12px;
        padding: 8px 16px 16px;
        max-height: 75vh;
        overflow-y: auto;
        z-index: 1022;

        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        /* Same curve family as every other surface (ym-polish.css):
           quick to answer the tap, soft to settle, no overshoot. */
        transform-origin: top center;
        transition: opacity .2s ease, transform .22s cubic-bezier(0.2, 0.8, 0.2, 1),
                    visibility 0s linear .22s;
    }

    .navbar.nav-collapsed .navbar-collapse.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity .2s ease, transform .22s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
    }

@media (prefers-reduced-motion: reduce) {
    .navbar.nav-collapsed .navbar-collapse,
    .navbar.nav-collapsed .navbar-collapse.show { transition: none; transform: none; }
}

/* Fades in and drops 4px out of the bar it hangs from. No scaling:
   a scaled menu re-draws its text and icons on every frame, which is
   what made the words shimmer as it opened. Fill mode `backwards`
   (not `both`): once the animation ends the menu keeps NO transform,
   so its text goes back to being drawn crisp, as plain page text. */
.dropdown-menu.show { animation: ym-fade-in .2s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
@keyframes ym-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .navbar-collapse.show, .dropdown-menu.show { animation: none; }
    .navbar-collapse.collapsing { transition: none; opacity: 1; }
}

/* Menu as a floating panel: hairline edge, layered shadow, 6px inset
   so each row's highlight is its own rounded pill (the solid white
   background is set in ym-polish.css). */
.dropdown-menu { border: 1px solid var(--ym-hairline); box-shadow: var(--ym-shadow-3); border-radius: 14px; padding: 6px; z-index: 1021; transform-origin: top center; }
.dropdown-item { font-weight: 500; padding: 0.65rem 1rem; border-radius: 9px; transition: background-color .16s ease, color .16s ease; }
.dropdown-item:hover { background-color: rgba(52, 152, 219, 0.08); color: var(--ym-blue-text); }
.dropdown-item i { width: 20px; text-align: center; }

/* ---- PASSAGE PROSE ----
   Paragraphs produced by the `passage` filter. The text must re-wrap to
   whatever width it is given, so no pre-wrap and no fixed line breaks -
   the paragraph spacing is the only thing declared here. */
.passage-prose { white-space: normal; overflow-wrap: break-word; text-align: start; }
.passage-prose p { margin: 0 0 1em; }
.passage-prose p:last-child { margin-bottom: 0; }
.passage-prose strong { font-weight: 800; }

/* Top and bottom ONLY. The old shorthand `padding: 50px 0` also set
   the left/right padding of this .container to zero, at every width.
   Every Bootstrap .row inside it has -12px side margins that rely on
   that padding, so each row stuck out 12px past the screen on a phone
   (cut off by overflow-x: clip) and the cards touched the edges. */
.main-content { min-height: 75vh; padding-top: 50px; padding-bottom: 50px; }
@media (max-width: 575.98px) { .main-content { padding-top: 28px; padding-bottom: 36px; } }
/* Most pages open with their own .container inside this one. The
   outer container now supplies the side margin, so an inner one adds
   none of its own - otherwise phones would get a doubled, 32px margin. */
.main-content .container, .main-content .container-fluid { padding-left: 0; padding-right: 0; }
footer { background-color: var(--ym-navy-2); border-top: 4px solid var(--ym-orange); }
.footer-links a { color: var(--ym-subtle); text-decoration: none; margin: 0 10px; transition: 0.3s; }
.footer-links a:hover { color: white; }

/* Social icons: small, restrained, brand colour only on hover. Large
   coloured logos in a footer read as clutter and pull attention away
   from the legal links beside them. */
.social-row { display: flex; justify-content: center; gap: 10px; margin-bottom: 16px; }
.social-link {
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.07); color: var(--ym-subtle);
    font-size: 0.95rem; text-decoration: none;
    transition: transform .2s ease, background-color .2s ease, color .2s ease;
}
.social-link:hover { transform: translateY(-2px); color: #fff; }
.social-link:focus-visible { outline: 2px solid var(--ym-orange); outline-offset: 2px; }

/* Arabic reads smaller than Hebrew at an identical font-size, and its
   descenders need more room, so it gets a nudge up and more leading
   rather than being left to look cramped beside the Hebrew. */
.ar-text, .ar-title, [lang="ar"], :lang(ar) {
    font-family: 'Noto Kufi Arabic', 'Heebo', sans-serif;
    line-height: 1.9;
}
.ar-text { font-size: 0.9em; font-weight: 400; }

/* Noto Kufi is wider than the system fallback Arabic used to resolve
   to, so the 0.9em bump above overflowed the navbar and pushed the
   greeting off the edge. Page content keeps the larger, more readable
   size; the navbar goes back to the tighter one it was built for. */
.navbar .ar-text { font-size: 0.78em; }
.navbar .nav-link { letter-spacing: -0.1px; }
.ar-title { font-size: 0.92em; }

/* Arabic and Hebrew are both RTL, so no direction switch is needed -
   but a Latin fragment inside Arabic (a brand name, a URL) needs
   isolating or it reorders the line around it. */
.ltr-inline { unicode-bidi: isolate; direction: ltr; display: inline-block; }

/* ======== עיצוב לפעמון ההתראות ======== */
.nav-icon-btn { position: relative; color: white; font-size: 1.2rem; cursor: pointer; text-decoration: none; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; transition: background 0.2s;
                /* Needed now that this is a <button>, not an <a>: a
                   button carries its own border, background and
                   padding by default, none of which existed on the
                   anchor this replaced. Font is reset too - buttons
                   do not inherit the page's font-family the way
                   other elements do. */
                border: none; background: none; padding: 0; font: inherit; }
.nav-icon-btn:hover { background: rgba(255,255,255,0.1); color: var(--ym-orange); }
.notification-badge { position: absolute; top: 5px; right: 5px; background: var(--ym-red-solid); color: white; font-size: 0.65rem; font-weight: bold; padding: 2px 5px; border-radius: 50px; line-height: 1; border: 2px solid var(--ym-ink); display: none; }

@keyframes ring {
    0% { transform: rotate(0); }
    10% { transform: rotate(15deg); }
    20% { transform: rotate(-15deg); }
    30% { transform: rotate(10deg); }
    40% { transform: rotate(-10deg); }
    50% { transform: rotate(5deg); }
    60% { transform: rotate(-5deg); }
    70% { transform: rotate(0); }
    100% { transform: rotate(0); }
}
/* Rings three times when the page opens, then rests - the red badge
   stays as the lasting signal. An endless loop in the corner of the
   eye pulls attention off the lesson the whole time it is open, and
   Apple's guidance is to avoid continuous motion for that reason. */
.bell-shake { animation: ring 2.2s ease-in-out .6s 3; display: inline-block; transform-origin: top center; }

/* ======== עיצוב לתפריט הנגישות ======== */
/* The button is a real <button> now (keyboard-focusable, announced
   as a button), sits clear of the iPhone home indicator, and presses
   in on touch. Only transform / opacity / colour animate. */
.accessibility-fab {
    position: fixed;
    bottom: calc(24px + env(safe-area-inset-bottom));
    left: calc(24px + env(safe-area-inset-left));
    z-index: 1040; background-color: var(--ym-accent); color: white;
    width: 50px; height: 50px; border-radius: 50%; border: 0; padding: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
    box-shadow: 0 6px 18px rgba(52, 152, 219, 0.35), 0 2px 6px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transition: transform .35s var(--ym-ease-out), opacity .25s ease, background-color .2s ease;
}
.accessibility-fab:hover { background-color: var(--ym-accent-hover); transform: scale(1.06); }
.accessibility-fab:active { transform: scale(0.92); transition-duration: 90ms; }
.accessibility-fab[aria-expanded="true"] { background-color: var(--ym-navy); }

/* A popover that rises out of the button that opened it and sinks
   back into it - fade plus 8px of slide, never scaled, so its labels
   and icons stay perfectly still while it moves. It is always laid
   out and only hidden with opacity / visibility, so opening it never
   runs layout - the old display:none -> flex switch painted once at
   full size, then animated. Solid white: a live blur behind it cost
   a full repaint of everything underneath on every frame. */
.accessibility-menu {
    position: fixed;
    bottom: calc(88px + env(safe-area-inset-bottom));
    left: calc(24px + env(safe-area-inset-left));
    background: var(--ym-card);
    border-radius: 18px; box-shadow: var(--ym-shadow-3);
    padding: 16px; width: min(300px, calc(100vw - 32px)); z-index: 1041;
    display: flex; flex-direction: column; border: 1px solid var(--ym-hairline);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .22s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear .22s;
}
.accessibility-menu.show {
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    transition: opacity .2s ease, transform .22s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
}

/* Phones and tablets: a 44px button (Apple's minimum touch target),
   16px from the edges like the page content - and it tucks away while
   the student scrolls DOWN through a lesson or a question (it was
   sitting on top of the answer options), coming back the moment they
   scroll up. Same behaviour as Safari's own toolbar. */
@media (max-width: 991.98px) {
    .accessibility-fab {
        width: 44px; height: 44px; font-size: 1.3rem;
        bottom: calc(16px + env(safe-area-inset-bottom));
        left: calc(16px + env(safe-area-inset-left));
    }
    .accessibility-fab.fab-tucked {
        transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom)));
        opacity: 0; pointer-events: none;
    }
    .accessibility-menu {
        bottom: calc(72px + env(safe-area-inset-bottom));
        left: calc(16px + env(safe-area-inset-left));
    }
}
@media (prefers-reduced-motion: reduce) {
    .accessibility-fab, .accessibility-menu, .accessibility-menu.show { transition: opacity .2s ease, visibility 0s; transform: none; }
    .accessibility-fab:hover, .accessibility-fab:active { transform: none; }
    .accessibility-fab.fab-tucked { transform: none; }
}

.acc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px; }
.acc-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--ym-fill); border: 1px solid var(--ym-edge); padding: 15px 5px; border-radius: 12px; cursor: pointer; text-align: center; transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .2s var(--ym-ease-out); color: var(--ym-ink-2); }
.acc-btn:hover { background: var(--ym-fill-2); }
.acc-btn:active { transform: scale(0.96); transition-duration: 90ms; }
.acc-btn.active { background: var(--ym-tint-blue); border-color: var(--ym-blue); color: var(--ym-ink); box-shadow: inset 0 0 0 1px var(--ym-blue); }

/* ---- Light / dark switch: an iOS segmented control ----
   A sunken track with the chosen segment raised on top of it as a small
   card - the same control iOS uses for Light / Dark / Automatic. */
.theme-switch-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 8px; color: var(--ym-ink-2); }
.theme-segmented {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
    padding: 3px; border-radius: 11px; background: var(--ym-fill-2);
}
.theme-segmented button {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    border: 0; border-radius: 9px; padding: 7px 4px 6px;
    background: transparent; color: var(--ym-muted); font: inherit; font-size: 0.82rem; font-weight: 700;
    line-height: 1.25; cursor: pointer;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.theme-segmented button i { font-size: 0.95rem; margin-bottom: 2px; }
.theme-segmented button .ar-text { font-weight: 400; font-size: 0.72rem; line-height: 1.4; }
.theme-segmented button:hover { color: var(--ym-ink-2); }
.theme-segmented button.active {
    background: var(--ym-card); color: var(--ym-ink);
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12), 0 0 0 0.5px var(--ym-line);
}
.theme-segmented button.active i { color: var(--ym-orange); }
.theme-segmented button:focus-visible { outline: 2px solid var(--ym-accent); outline-offset: 1px; }

html.high-contrast .navbar,
html.high-contrast .main-content,
html.high-contrast footer,
html.high-contrast .modal-content { filter: contrast(135%) saturate(120%); }
html.large-cursor, html.large-cursor * { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="black" stroke="white" stroke-width="2" d="M4 0l16 16-7 1 5 7-3 2-5-7-3 5z"/></svg>'), auto !important; }
html.highlight-links a, html.highlight-links button { text-decoration: underline !important; font-weight: bold !important; border: 2px dashed var(--ym-orange) !important; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Pin button (review pages) ----
   From exams/partials/pin_script.html, which is included in the BODY of several review pages; its
   few rules live here so they are cached with the rest instead of being repeated in each page. */
.pin-btn {
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 34px; padding: 5px 14px; border-radius: 999px;
    border: 1px solid var(--ym-edge-strong); background: var(--ym-card); color: var(--ym-ink-2);
    font: inherit; font-size: 0.86rem; font-weight: 700; line-height: 1.2; white-space: nowrap; cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .15s ease;
}
.pin-btn i { color: var(--ym-blue); }
.pin-btn:hover { background: var(--ym-fill); }
.pin-btn:active { transform: scale(0.96); }
/* Saved: a warm, filled "bookmark" state - the notebook's own colour. */
.pin-btn.is-pinned { background: var(--ym-tint-orange); border-color: transparent; color: var(--ym-orange-text); }
.pin-btn.is-pinned i { color: var(--ym-orange); }
.pin-btn:disabled { opacity: 0.6; cursor: wait; }
/* An error message is longer than the label, so it may wrap instead of overflowing. */
.pin-btn.pin-failed { border-color: var(--ym-edge-strong); color: var(--ym-muted); white-space: normal; text-align: start; }

/* ---- Phone tab bar (base.html, logged-in pages, not on exam screens) ----
   The iOS tab bar: four sections across the bottom, where a thumb reaches.
   Solid surface with a hairline top edge (no live blur - it would be redrawn
   on every scroll frame). The current section has the brand-orange icon and
   a dark, bold label (orange TEXT would be too faint on white); the others
   are quiet grey. Below 768px only: wider screens keep the full navbar. */
.ym-tab-bar { display: none; }
@media (max-width: 767.98px) {
    :root { --ym-tab-bar-h: 60px; }
    .ym-tab-bar {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 1030;                       /* over the page, under menus (1035), the FAB (1040) and dialogs (1050+) */
        height: calc(var(--ym-tab-bar-h) + env(safe-area-inset-bottom));
        padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
        background: var(--ym-card);
        border-top: 1px solid var(--ym-line);
        box-shadow: 0 -6px 18px -12px rgba(16, 24, 40, 0.18);
        transition: transform .22s cubic-bezier(0.2, 0.8, 0.2, 1), opacity .2s ease;
    }
    .ym-tab {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        padding-top: 2px;
        color: var(--ym-muted);
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        -webkit-user-select: none; user-select: none;
        min-width: 0;
    }
    .ym-tab i {
        font-size: 19px; line-height: 1; margin-bottom: 4px;
        transition: transform .15s ease, color .15s ease;
    }
    .ym-tab-he { font-size: 11px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
    .ym-tab-ar {
        font-family: 'Noto Kufi Arabic', 'Heebo', sans-serif;
        font-size: 9.5px; line-height: 1.5; white-space: nowrap; opacity: 0.9;
    }
    .ym-tab.is-current { color: var(--ym-ink); }
    .ym-tab.is-current i { color: var(--ym-orange); }
    .ym-tab:active i { transform: scale(0.86); }
    .ym-tab:focus-visible { outline: 2px solid var(--ym-accent); outline-offset: -4px; border-radius: 12px; }

    /* While typing (html.ym-typing, set by base.html) the bar slides away so
       the keyboard never pushes it up over the field. */
    html.ym-typing .ym-tab-bar { transform: translateY(100%); opacity: 0; pointer-events: none; }

    /* Room for the bar: the page ends above it, and the accessibility button
       and its menu sit just above it. */
    body.has-tab-bar { padding-bottom: calc(var(--ym-tab-bar-h) + env(safe-area-inset-bottom)); }
    html.ym-typing body.has-tab-bar { padding-bottom: 0; }
    body.has-tab-bar .accessibility-fab { bottom: calc(var(--ym-tab-bar-h) + 14px + env(safe-area-inset-bottom)); }
    body.has-tab-bar .accessibility-menu { bottom: calc(var(--ym-tab-bar-h) + 68px + env(safe-area-inset-bottom)); }
    /* Tucked while scrolling down: it fades out in place instead of sliding
       down across the tab bar. */
    body.has-tab-bar .accessibility-fab.fab-tucked { transform: translateY(12px); opacity: 0; pointer-events: none; }

    /* The tabs ARE the menu now, so the hamburger (same four links) goes. */
    body.has-tab-bar .navbar-toggler,
    body.has-tab-bar #navbarNav { display: none !important; }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
    .ym-tab-bar, .ym-tab i { transition: none; }
}

/* ---- Empty states that guide (notebook tabs, statistics) ----
   An empty list is the moment a student most needs to know what to do next,
   so instead of a grey "nothing here" each one says what will appear, how to
   make it appear, and offers the one button that starts it. */
.ym-empty { text-align: center; padding: 36px 18px 30px; max-width: 470px; margin: 0 auto; }
.ym-empty-icon {
    width: 72px; height: 72px; border-radius: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 30px; margin-bottom: 18px;
    background: var(--ym-tint-blue); color: var(--ym-blue);
}
.ym-empty-icon.is-orange { background: var(--ym-tint-orange); color: var(--ym-orange); }
.ym-empty-icon.is-green { background: var(--ym-tint-green); color: var(--ym-green); }
.ym-empty-icon.is-purple { background: var(--ym-tint-purple); color: var(--ym-purple); }
.ym-empty-title { font-weight: 800; font-size: 1.2rem; color: var(--ym-ink); margin: 0 0 2px; }
.ym-empty-sub { font-size: 0.95rem; color: var(--ym-muted); margin: 0; }
.ym-empty-text { color: var(--ym-body); font-size: 0.97rem; line-height: 1.85; margin: 12px auto 22px; }
.ym-empty-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ym-empty-actions .btn { min-width: 210px; border-radius: 12px; padding: 0.6rem 1.4rem; font-weight: 700; }
.ym-empty-link { color: var(--ym-blue-text); font-weight: 600; font-size: 0.92rem; text-decoration: none; }
.ym-empty-link:hover { text-decoration: underline; }

/* ---- Segmented control (tab strips: notebook, simulation and demo review) ----
   Every segment in ONE row with equal widths at every screen size - the iOS
   segmented control. The chosen segment is a raised card on a sunken track.
   A segment may hold a title and a small second line (e.g. a part's score),
   so labels wrap inside their own segment instead of pushing a segment onto
   a second row. */
.ym-segmented {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px;
    list-style: none; margin: 0 auto 1.75rem; padding: 4px; max-width: 560px;
    background: var(--ym-fill-2); border-radius: 14px;
}
.ym-segmented > li { min-width: 0; display: flex; }
.ym-segmented .nav-link {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    min-height: 46px; margin: 0 !important; padding: 7px 6px !important;
    border: 0; border-radius: 10px; background: transparent; color: var(--ym-muted);
    font-size: 0.95rem; font-weight: 700; line-height: 1.25; text-align: center; white-space: normal;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.ym-segmented .nav-link i { font-size: 0.9em; margin: 0 0 2px; }
.ym-segmented .nav-link:hover:not(.active) { color: var(--ym-ink-2); }
.ym-segmented .nav-link.active {
    background: var(--ym-card); color: var(--ym-ink);
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12), 0 0 0 0.5px var(--ym-line);
}
.ym-segmented .nav-link.active i { color: var(--ym-orange); }
.ym-segmented .seg-sub { font-size: 0.8rem; font-weight: 600; color: var(--ym-muted); }
.ym-segmented .nav-link:focus-visible { outline: 2px solid var(--ym-accent); outline-offset: 1px; }

/* ---- Reviewed question: header row ----
   "Question 1" + topic chip + verdict, and the save button at the far end.
   Everything wraps as whole pills with even 8-10px gaps, so a narrow phone
   gets two tidy lines instead of overflowing or squeezed buttons. */
.rq-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
    padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--ym-line);
}
.rq-title { margin: 0; font-weight: 800; font-size: 1.15rem; color: var(--ym-ink); }
.rq-chip {
    display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
    background: var(--ym-fill-2); color: var(--ym-muted); font-size: 0.78rem; font-weight: 700; white-space: nowrap;
}
.rq-verdict {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
    font-size: 0.85rem; font-weight: 800; white-space: nowrap;
}
.rq-verdict.is-right { background: var(--ym-tint-green); color: var(--ym-green); }
.rq-verdict.is-wrong { background: var(--ym-tint-red); color: var(--ym-red); }
.rq-head .pin-btn { margin-inline-start: auto; }

/* ---- Review score summary (simulation review) ---- */
.review-score {
    display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 10px;
    padding: 10px 20px; border-radius: 16px; max-width: 100%;
    background: var(--ym-tint-green); color: var(--ym-green);
}
.review-score-value { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.review-score-label { font-size: 0.95rem; font-weight: 700; }
/* Dark mode: the chosen segment is RAISED, so it is lighter than its track -
   as on iOS. (A card-coloured segment would look sunken on the dark track.) */
html[data-theme="dark"] .ym-segmented, html[data-theme="dark"] .theme-segmented { background: var(--ym-fill); }
html[data-theme="dark"] .ym-segmented .nav-link.active,
html[data-theme="dark"] .theme-segmented button.active { background: #34424f; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }