/* From partials/header.dj.html, where it was inline on every page (2026-11-01). */
      .f2m-nav-open { display: none; }

      /* The three icon-only buttons in the header - drawer, notifications, */
      /* search. The theme gives .btn a 50px box, a 50px line-height and */
      /* `padding: 0 .25rem`, so the icon inside was laid out as inline text: */
      /* centred down the box but sitting at its start across it, which is why */
      /* none of the three looked centred in its own square. Grid centres both */
      /* axes, and 42px with a 20px glyph is a lighter row at every width */
      /* while staying above the 40px a thumb needs. */
      /* grid-auto-flow is column on purpose: .btn-default::after draws a */
      /* chevron for the dropdown variants, and in a single-column grid that */
      /* chevron would drop onto a second row and stretch the button. */
      #siteHead .f2m-nav-open,
      #siteHead .user-notification-toggle,
      #siteHead .btn-open-folat-search {
        display: inline-grid;
        grid-auto-flow: column;
        place-items: center;
        width: 42px;
        min-width: 42px;
        height: 42px;
        padding: 0;
        line-height: 1;

        /* Transparent with a hairline round it, rather than a filled square. */
        /* --btn-color is the theme's own handle on a button's fill - */
        /* bootstrap.css reads background-color: var(--btn-color) - so setting */
        /* that is what .btn-default was already doing, just with */
        /* var(--border-color) in it. The border itself is declared by .btn as */
        /* 1px solid transparent, so only its colour is needed here. */
        --btn-color: rgba(255, 255, 255, .09);
        -webkit-backdrop-filter: blur(14px) saturate(150%);
        backdrop-filter: blur(14px) saturate(150%);
        border-color: rgba(255, 255, 255, .4);
        border-radius: 12px;
      }

      /* Behind a hover query on purpose: a phone reports a hover it cannot */
      /* do, and the state then sticks on whatever was tapped last. */
      @media (hover: hover) {
        #siteHead .f2m-nav-open:hover,
        #siteHead .user-notification-toggle:hover,
        #siteHead .btn-open-folat-search:hover {
          --btn-color: rgba(255, 255, 255, .16);
          border-color: rgba(255, 255, 255, .6);
        }
      }

      #siteHead .f2m-nav-open svg,
      #siteHead .user-notification-toggle svg,
      #siteHead .btn-open-folat-search svg {
        width: 20px;
        height: 20px;
      }

      /* The unread dot is positioned against the button, so it has to move */
      /* with the smaller box rather than stay where the 50px one put it. */
      #siteHead .user-notification-toggle { position: relative; }

      /* The logo is the home link, and on a phone it was being squeezed to */
      /* 26px wide by everything else in the row - a mark nobody can read or */
      /* aim at. It keeps its own width now, and the subtitle button, which */
      /* took a third of the row, steps aside on the narrowest screens (it is */
      /* the first item in the drawer). */
      @media (max-width: 991.98px) {
        /* flex: 0 1 auto, not 0 0 auto. The logo refusing to shrink is what */
        /* made a 320px header overflow: the five items and their gaps come */
        /* to more than the screen, and with nothing able to give, the logo */
        /* simply overlapped the buttons on both sides of it. */
        #siteHead .custom-logo-link { display: inline-flex; flex: 0 1 auto; min-width: 0; }
        #siteHead .custom-logo-link svg { width: 112px; max-width: 100%; height: auto; }
      }

      /* ---- The phone header's running order ------------------------
         Left to right on screen: night mode, search, logo, notifications,
         subtitles. The page is right-to-left, so the flex main axis starts at
         the right and a *higher* order sits further left - the run below is
         that list read backwards.

         The controls ride together in one column, which would keep them on
         one side of the logo whatever their order. display: contents takes
         that box out of the layout and leaves its children as items of the
         header row itself, each free to be placed on its own.
         ------------------------------------------------------------- */
      @media (max-width: 991.98px) {
        /* The drawer's trigger is in the bottom bar now. Not below 1200px, */
        /* which is where it used to stop: between 992 and 1199 there is no */
        /* bottom bar and no desktop menu either, so it is the only way in */
        /* and it stays. */
        #siteHead .row > .col-auto.d-xl-none { display: none !important; }

        #siteHead .row > .col-auto.d-flex { display: contents !important; }

        /* Bootstrap gives every direct child of a .row width: 100% and lets
           the row wrap, which is how a 12-column grid stacks on a phone. Here
           it meant the logo took the full width and everything else was
           pushed onto a second line - the order below was being applied to
           items that were not on the same line to begin with. */
        #siteHead .row { flex-wrap: nowrap; }
        #siteHead .row > * { width: auto; }

        /* Room between them. The controls were sitting edge to edge - the
           search button against the night-mode switch, the subtitles button
           against the bell - because the gap that used to separate them
           belonged to the column they shared, and that column is display:
           contents now, so it has none to give. The row keeps the spacing
           instead, and the two at the ends are held off the screen edge. */
        #siteHead .row {
          gap: .5rem;
          padding-inline: .5rem;
        }

        
        /* The theme sizes the night-mode switch with a plain .switch, which
           an id-prefixed rule outranks - so taking width: 100% off the row's
           children collapsed it to its padding. Its own size, back. */
        #siteHead .row > .switch { flex: 0 0 60px; width: 60px; margin-left: 0; }

        #siteHead .f2m-head-extra { order: 1; }
        #siteHead .f2m-head-notify { order: 2; }
        #siteHead .row > .col { order: 3; }
        #siteHead .f2m-head-search { order: 4; }
        #siteHead .switch { order: 5; }

        /* The logo takes what is left between the two pairs and sits in the */
        /* middle of it. */
        #siteHead .row > .col {
          display: flex;
          justify-content: center;
          flex: 1 1 auto;
          min-width: 0;
        }

        /* An icon button like the other three, rather than a text button. */
        #siteHead .f2m-head-extra {
          display: inline-grid;
          grid-auto-flow: column;
          place-items: center;
          width: 42px;
          min-width: 42px;
          height: 42px;
          padding: 0;
          line-height: 1;
          --btn-color: rgba(255, 255, 255, .09);
          -webkit-backdrop-filter: blur(14px) saturate(150%);
          backdrop-filter: blur(14px) saturate(150%);
          border-color: rgba(255, 255, 255, .4);
          border-radius: 12px;
        }

        /* Five tabs rather than four, so the labels are kept on one line and */
        /* given a little less room each. */
        .appnav > a {
          min-width: 0;
          padding-inline: 2px;
          font-size: 11px;
          white-space: nowrap;
        }
      }

      @media (max-width: 575.98px) {
        /* the row's own gutters were taking 96px of a 320px screen */
        #siteHead .row > * { padding-inline: 5px; }
      }

      /* above the bottom tab bar (z-index 2000), which would otherwise sit on */
      /* top of the drawer and cover the sign-in button at its foot */
      .f2m-nav { position: fixed; inset: 0; z-index: 2100; }
      .f2m-nav[hidden] { display: none; }
      .f2m-nav-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .62); opacity: 0; transition: opacity .2s ease; }
      .f2m-nav.is-open .f2m-nav-scrim { opacity: 1; }

      /* Physical sides on purpose, not inset-inline-end. A transform is always */
      /* physical - translateX(100%) moves right whatever the direction - so */
      /* pairing it with a logical side is what put this drawer on the wrong */
      /* edge: on this right-to-left page inset-inline-end resolves to left, so */
      /* the panel was pinned to the left edge and slid in from the left, while */
      /* the button that opens it sits top-right. Right + translateX(100%) is */
      /* the pair that hides it off the right edge and brings it back from */
      /* there; the ltr override flips both together. */
      .f2m-nav-panel {
        position: absolute; top: 0; bottom: 0; right: 0; left: auto;
        width: min(86vw, 330px); display: flex; flex-direction: column;
        background: var(--bg-card, #16181a);
        border-left: 1px solid rgba(255, 255, 255, .08); border-right: 0;
        overflow-y: auto; overscroll-behavior: contain;
        transform: translateX(100%); transition: transform .22s ease;
      }
      html[dir="ltr"] .f2m-nav-panel {
        right: auto; left: 0;
        border-left: 0; border-right: 1px solid rgba(255, 255, 255, .08);
        transform: translateX(-100%);
      }
      .f2m-nav.is-open .f2m-nav-panel { transform: none; }

      .f2m-nav-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
        padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
      .f2m-nav-title { font-size: 15px; font-weight: 700; }
      .f2m-nav-logo { display: inline-flex; align-items: center; color: inherit; }
      .f2m-nav-logo svg { width: 112px; height: auto; }
      .f2m-nav-close { display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px;
        background: rgba(255, 255, 255, .06); color: inherit; cursor: pointer; }

      .f2m-nav-list, .f2m-nav-sub { margin: 0; padding: 0; list-style: none; }
      .f2m-nav-list { flex: 1 0 auto; padding: 6px 0; }
      .f2m-nav-list > li > a, .f2m-nav-fold > summary {
        display: flex; align-items: center; min-height: 48px; padding: 0 16px;
        font-size: 15px; color: inherit; text-decoration: none; cursor: pointer;
      }
      .f2m-nav-fold > summary { justify-content: space-between; list-style: none; }
      .f2m-nav-fold > summary::-webkit-details-marker { display: none; }
      /* Physical borders, not logical ones. A chevron drawn from two borders */
      /* points wherever the rotation sends its corner, and the rotation is */
      /* physical too - so pairing it with border-inline-end, which is the left */
      /* border on this page, aimed the closed arrow sideways and the open one */
      /* off to the right. With border-right and border-bottom the angles are */
      /* fixed: 45deg down, -45deg right, 135deg left, -135deg up. */
      /* Closed points along the reading direction, open points down at the */
      /* list it has just unrolled. */
      .f2m-nav-fold > summary::after { content: ""; width: 8px; height: 8px; margin-inline-start: 8px;
        border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
        transform: rotate(135deg); opacity: .6; transition: transform .15s ease; }
      .f2m-nav-fold[open] > summary::after { transform: rotate(45deg); }
      html[dir="ltr"] .f2m-nav-fold > summary::after { transform: rotate(-45deg); }
      html[dir="ltr"] .f2m-nav-fold[open] > summary::after { transform: rotate(45deg); }
      .f2m-nav-group { margin: 10px 16px 2px; font-size: 12px; font-weight: 700; color: var(--text-muted, #9aa08e); }
      /* The indent that marks a child item belongs on the side the reader */
      /* starts from - the right on this page. `padding: 0 26px` indented both */
      /* sides equally, so a nested item read as flush with its parent. */
      .f2m-nav-sub > li > a { display: flex; align-items: center; min-height: 42px;
        padding-block: 0; padding-inline: 26px 16px; font-size: 14px; color: inherit; text-decoration: none; }
      /* The drawer is the phone menu, so this is the one hover rule on the page */
      /* most likely to be seen by a device that cannot hover: a tap would latch */
      /* the highlight onto the row and leave it there. Pointer-only. */
      @media (hover: hover) {
        .f2m-nav-list > li > a:hover, .f2m-nav-sub > li > a:hover, .f2m-nav-fold > summary:hover { background: rgba(150, 242, 7, .1); color: #96F207; }
      }

      .f2m-nav-foot { display: flex; flex-direction: column; gap: 8px;
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid rgba(255, 255, 255, .08); }
      .f2m-nav-foot .btn { justify-content: center; min-height: 46px; }

      /* 16px is the line under which iOS zooms the page in on focus, and the */
      /* zoom does not come back out on its own */
      @media (max-width: 991.98px) {
        .float-search input[type="search"] { font-size: 16px !important; }
      }

      @media (max-width: 1199.98px) {
        .f2m-nav-open { display: inline-flex; }
      }

      /* a desktop has the bar itself; the drawer must not survive a resize */
      @media (min-width: 1200px) {
        .f2m-nav { display: none; }
      }