/* =========================================================================
   MOBILE LAYER  (phones and small tablets, Android and iOS)

   Loaded last, and it only ever speaks inside a max-width media query, so the
   desktop layout is untouched. Nothing here edits an existing rule: it
   overrides them on small screens, and deleting this file (and its <link>)
   restores the site exactly as it was.

   What it fixes
   1. Menu       The open menu was taller than a phone's visible area with no way
                 to scroll it, so "Join / Login" sat under the browser toolbar,
                 out of reach. The panel now scrolls inside itself, and Join /
                 Login is pinned to its foot so it is always tappable.
   2. Language   The English | తెలుగు pill floated over every page's heading and
                 over the open menu. On phones it sits inside the header bar,
                 beside the menu button.
   3. Home       The hero had a tall empty band above and below the artwork. It
                 now takes the artwork's own shape.
   4. Footer     The bar wrapped to three lines and was clipped. It is one row.
   5. Contact    The tab on the right edge covered cards and form fields. It is
                 an icon-only tab now.
   6. Touch      44px targets, no double-tap zoom delay, and 16px form text so
                 iPhone Safari does not zoom the page when a field is focused.
   ========================================================================= */

/* ---- everywhere on touch screens ---------------------------------------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@media (hover: none), (pointer: coarse) {
  a, button, summary, label, select, [role="button"], [role="tab"] {
    touch-action: manipulation;                 /* no 300ms delay, no double-tap zoom */
    -webkit-tap-highlight-color: rgba(227, 30, 36, .14);
  }
}

/* Older iOS (< 15.4) has no svh; 100vh would run under the Safari toolbar. */
@supports not (height: 100svh) {
  body { height: 100%; min-height: -webkit-fill-available; }
  html { height: -webkit-fill-available; }
}

@media (max-width: 820px) {

  /* ---- 1. menu ---------------------------------------------------------- */
  .menu-toggle {
    display: block;
    width: 46px; height: 46px; padding: 11px;
    flex: 0 0 auto;
    position: relative; z-index: 2;
  }

  .primary-nav {
    left: 10px; right: 10px;
    top: calc(100% + 6px);
    /* never taller than what is actually visible; scroll inside instead */
    max-height: calc(100vh - var(--hdr, 77px) - 16px);
    max-height: calc(100dvh - var(--hdr, 77px) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 8px 14px 0;
    z-index: 200;
  }

  .primary-nav > a:not(.auth-link):not(.nav-tollfree),
  .primary-nav .nav-menu > a {
    min-height: 48px;
    display: flex; align-items: center;
    padding: 10px 6px;
    font-size: 17px;
  }

  /* About Us' sub-pages: shown as an indented list, tighter than the top level */
  .primary-nav .nav-drop a,
  .primary-nav .nav-drop button {
    min-height: 48px;
    padding: 8px 6px 8px 18px;
  }
  .primary-nav .nav-drop small { font-size: 12.5px; }

  .primary-nav .nav-tollfree {
    min-height: 48px;
    padding: 8px 6px;
    margin: 4px 0 0;
  }

  /* Join / Login stays at the foot of the panel while it scrolls. */
  .site-header .primary-nav > a.auth-link,
  .site-header.scrolled .primary-nav > a.auth-link {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex; align-items: center; justify-content: center;
    width: 100%;
    min-height: 52px;
    margin: 8px 0 0;
    border-radius: 14px;
    box-shadow: 0 0 0 8px #fff, 0 -2px 0 8px #fff;   /* white cushion so rows slide under it cleanly */
  }

  /* ---- 2. language switch: into the header bar -------------------------- */
  .lsw {
    top: 16px;
    right: 62px;
    z-index: 210;                 /* above the header (100), below modals */
  }
  .lsw .lsw-seg { padding: 2px; gap: 2px; box-shadow: 0 3px 10px rgba(31, 31, 31, .16); }
  .lsw .lsw-item { width: 36px; height: 38px; border-radius: 11px; }
  .lsw .lsw-g { font-size: 15px; }
  .lsw .lsw-item:nth-child(2) .lsw-g { font-size: 15px; }
  .lsw .lsw-l { font-size: 7px; }
  .lsw .lsw-seg::before { top: 8px; bottom: 8px; }

  /* the header row must leave room for it on the narrowest phones */
  .brand-lockup { max-width: calc(100vw - 170px); }

  /* ---- 5. contact tab: icon only ---------------------------------------- */
  .contact-rail { padding: 11px 6px 11px 5px; gap: 0; border-left-width: 3px; z-index: 50; }
  .contact-rail .cr-label {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .cr-icon svg { width: 17px; height: 17px; }

  /* ---- 4. footer: same content as the laptop, laid out in two rows ------
     Row 1: copyright line + tagline.   Row 2: email on the left, social icons
     on the right. The footer is taller here (the variable is shared, so the
     floating Join button and the screen panel adjust with it). */
  :root { --app-footer-h: 84px; }
  .app-footer-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "copy copy" "mail social";
    align-items: center;
    gap: 2px 10px;
    padding-top: 4px; padding-bottom: 4px;
  }
  .app-footer-bar .foot-copy { grid-area: copy; font-size: 12px; line-height: 1.3; }
  .app-footer-bar .foot-contact { grid-area: mail; min-width: 0; display: block; }
  .app-footer-bar .foot-contact-link { max-width: 100%; }
  .app-footer-bar .foot-contact-link strong {
    font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
  }
  .app-footer-bar .app-social { grid-area: social; margin-left: 0; }

  /* ---- 6. forms: 16px stops iOS from zooming on focus ------------------- */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea { font-size: 16px; }
  input, select, textarea, button { max-width: 100%; }

  /* no sideways page wobble from a stray wide child */
  .app-shell, .screen { overflow-x: hidden; }
  img, video, svg { max-width: 100%; }
}

/* ---- 3. home hero ------------------------------------------------------- */
@media (max-width: 700px) {
  .screen[data-route="home"] .hero-slider {
    flex: 0 0 auto;
    height: 54vw;
    min-height: 200px;
    max-height: 340px;
  }
  .screen[data-route="home"] .home-slider-shell { min-height: 0; }
  .screen[data-route="home"] .quick-dock { margin-bottom: 24px; }
}

@media (max-width: 380px) {
  .lsw { right: 56px; }
  .lsw .lsw-item { width: 33px; height: 36px; }
  .brand-lockup { max-width: calc(100vw - 156px); }
}

/* landscape phones: short screens need a shorter header menu */
@media (max-width: 900px) and (max-height: 480px) {
  .primary-nav { max-height: calc(100vh - 70px); max-height: calc(100dvh - 70px); }
  .screen[data-route="home"] .hero-slider { height: 44vw; max-height: 60vh; }
}

/* =========================================================================
   JOIN / SIGN IN on phones
   Tapping "Join / Login" opened a page whose first screenful was marketing
   (headline, paragraph, membership card) with the actual Join | Sign in switch
   and the form pushed below the fold, so new visitors could not tell where to
   register or log in. On phones the panel now comes first: heading, then the
   Join | Sign in switch and the form, with the card and benefits underneath.
   Source order is untouched; this only changes the visual order, and only
   below 900px, so the laptop layout is exactly as before.
   ========================================================================= */
@media (max-width: 900px) {
  .join-screen { padding: 18px 0 40px; }
  .join-wrap { display: flex; flex-direction: column; gap: 12px; padding: 0 16px; }
  .join-aside { display: contents; }               /* its children join the column */
  .join-aside .section-kicker { order: 1; margin: 0; }
  .join-aside .join-title { order: 2; margin: 0; font-size: 26px; line-height: 1.1; }
  .join-aside .join-lead  { order: 3; margin: 0 0 4px; font-size: 14px; line-height: 1.5; max-width: none; }
  .join-panel   { order: 4; }
  .join-aside .mcard { order: 5; margin-top: 10px; }
  .join-aside .join-benefits { order: 6; }
}

/* Join | Sign in switch: full width, thumb-sized, on every auth screen */
@media (max-width: 820px) {
  .auth-switch { display: flex; width: 100%; max-width: none; }
  .auth-switch a {
    flex: 1 1 0; display: flex; align-items: center; justify-content: center;
    min-height: 46px; padding: 8px 12px; font-size: 15px; text-align: center;
  }
}

/* =========================================================================
   PHONE HEADER:  logo  ·  language  ·  [Register Free]  ·  [≡]
   The menu button becomes a soft yellow rounded tile with red bars, with a
   red "Register Free" button beside it, so joining is one tap from any page.
   Wide screens never show the button (display:none outside the query).
   ========================================================================= */
.m-register { display: none; }

@media (max-width: 820px) {
  .nav-wrap { gap: 8px; }
  .brand { margin-right: auto; min-width: 0; }

  .m-register {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    width: 112px; height: 44px; padding: 0 8px;
    border-radius: 12px;
    background: linear-gradient(160deg, #F50A14 0%, #C4060F 100%);
    color: #fff;
    font: 800 14px/1 'Montserrat', system-ui, sans-serif;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    box-shadow: 0 6px 14px rgba(196, 6, 15, .28);
    position: relative; z-index: 2;
  }
  .m-register:active { transform: scale(.97); }
  body[data-member="in"] .m-register { display: none; }

  /* menu button: pale tile, red bars */
  .site-header .menu-toggle {
    width: 44px; height: 44px; padding: 0;
    border-radius: 12px;
    background: #FFF3C7;
    box-shadow: 0 2px 8px rgba(120, 80, 0, .18);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px;
  }
  .site-header .menu-toggle span:not(.sr-only),
  .site-header.scrolled .menu-toggle span:not(.sr-only) {
    width: 22px; height: 3px; margin: 0; border-radius: 2px;
    background: #E31E24;
    transition: transform .22s ease, opacity .18s ease;
  }
  /* turns into an X while the menu is open */
  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* language pill: sits just left of Register (14 gutter + 44 + 8 + 112 + 8) */
  .lsw { right: 186px; top: 17px; }
  .lsw .lsw-item { width: 33px; height: 36px; }
  body[data-member="in"] .lsw { right: 66px; }
  .brand-lockup { max-width: calc(100vw - 300px); }
}

/* narrow phones: "Register" alone, so the logo keeps room */
@media (max-width: 430px) {
  .m-register { width: 84px; font-size: 13.5px; }
  .m-register .mr-free { display: none; }
  .lsw { right: 158px; }
  body[data-member="in"] .lsw { right: 66px; }
}
@media (max-width: 360px) {
  .lsw { right: 154px; }
  .lsw .lsw-item { width: 30px; height: 34px; }
  .lsw .lsw-g { font-size: 14px; }
}

/* =========================================================================
   HEADER LOGO STAYS ONE SIZE WHILE SCROLLING (phones)
   Scrolling adds .scrolled to the header, and the existing rule
   `.site-header.scrolled .brand-banner { height: 48px }` out-ranks the
   small-screen size (40px), so the logo GREW as the page moved and ran into
   the language pill. Pinned here to the same size in both states.
   ========================================================================= */
@media (max-width: 820px) {
  .site-header .brand-banner,
  .site-header.scrolled .brand-banner { height: 48px; }
  .site-header .brand-emblem,
  .site-header.scrolled .brand-emblem { height: 30px; }
}
@media (max-width: 520px) {
  .site-header .brand-banner,
  .site-header.scrolled .brand-banner { height: 40px; max-width: 100%; }
  .site-header .brand-emblem,
  .site-header.scrolled .brand-emblem { height: 26px; }
}

/* very narrow phones (≤380px, e.g. iPhone SE / small Android): tighten the row */
@media (max-width: 380px) {
  .nav-wrap { gap: 6px; }
  .m-register { width: 76px; font-size: 13px; }
  .site-header .brand-banner,
  .site-header.scrolled .brand-banner { height: 35px; }
  .site-header .brand-emblem,
  .site-header.scrolled .brand-emblem { height: 23px; }
  .site-header .brand { gap: 3px; }
  .lsw { right: 142px; }
  .lsw .lsw-item { width: 29px; height: 34px; }
  .lsw .lsw-g, .lsw .lsw-item:nth-child(2) .lsw-g { font-size: 14px; }
  body[data-member="in"] .lsw { right: 64px; }
}

/* =========================================================================
   LANGUAGE SWITCH STAYS UNDER PANELS (phones)
   It was raised to z-index 210 to sit above the header, which put it above
   the chapter-profile drawer (140) and its dimmed backdrop (130) as well, so
   the pill floated over an open profile. 125 is still above the header (100)
   and below the backdrop, the drawer and every modal.
   ========================================================================= */
@media (max-width: 820px) {
  .lsw { z-index: 125; }
}

/* =========================================================================
   PHONE HEADER, language switch placement + size
   Same order as the laptop: the switch sits at the far right, after the
   Register button and menu tile (which shift left to make room). The toggle
   is also made smaller (medium) so it no longer crowds the logo.
   Placed last so it wins over the earlier .lsw offsets; the switch's own
   code and behaviour are untouched.
   ========================================================================= */
@media (max-width: 820px) {
  .nav-wrap { padding-right: 72px; }               /* room for the switch */
  .lsw, body[data-member="in"] .lsw { right: 14px; top: 20px; }
  .lsw .lsw-item { width: 28px; height: 30px; border-radius: 9px; }
  .lsw .lsw-g, .lsw .lsw-item:nth-child(2) .lsw-g { font-size: 13px; }
  .lsw .lsw-l { font-size: 6px; }
  .lsw .lsw-seg::before { top: 6px; bottom: 6px; }
}
@media (max-width: 380px) {
  .nav-wrap { padding-right: 68px; }
  .lsw, body[data-member="in"] .lsw { right: 10px; }
  .lsw .lsw-item { width: 26px; height: 30px; }
}

/* =========================================================================
   TELUGU (Google-translated) TEXT ON PHONES
   Telugu glyphs are much wider and taller than Latin ones, so the same
   font-size reads oversized and overflows buttons (e.g. "Register").
   Google Translate adds .translated-ltr to <html> only while a translation is
   active, so these rules apply to Telugu only; English is untouched.
   ========================================================================= */
@media (max-width: 820px) {
  html.translated-ltr .m-register { font-size: 11.5px; letter-spacing: 0; padding: 0 4px; }
  html.translated-ltr .m-register font { font-size: inherit !important; }
  html.translated-ltr .m-register .mr-free { display: none; }

  html.translated-ltr h1 { font-size: clamp(24px, 7.4vw, 32px) !important; line-height: 1.3 !important; letter-spacing: 0 !important; }
  html.translated-ltr h2 { font-size: clamp(22px, 6.6vw, 28px) !important; line-height: 1.3 !important; letter-spacing: 0 !important; }
  html.translated-ltr h3 { font-size: 17px !important; line-height: 1.35 !important; letter-spacing: 0 !important; }
  html.translated-ltr h4 { font-size: 15px !important; line-height: 1.4 !important; }
  html.translated-ltr p, html.translated-ltr li { font-size: 14px; line-height: 1.6; }
  html.translated-ltr small { font-size: 11px; line-height: 1.35; }
  html.translated-ltr .section-kicker { font-size: 11px; letter-spacing: .04em; }
  html.translated-ltr .btn, html.translated-ltr button:not(.lsw-item):not(.menu-toggle) { font-size: 13px; line-height: 1.3; }
  html.translated-ltr .primary-nav a { font-size: 15px; line-height: 1.4; }
  html.translated-ltr .stats-strip strong { font-size: 24px; }
  html.translated-ltr .stats-strip small { font-size: 10.5px; }
}

/* Telugu "Register" label is longer than the fixed-width button, so it was
   cut off and ran together. While translated, the button sizes to its text
   (never clipped); the logo, which can shrink, gives up the extra room. */
@media (max-width: 820px) {
  html.translated-ltr .m-register {
    width: auto; min-width: 84px; padding: 0 10px;
    overflow: visible; text-overflow: clip; white-space: nowrap;
    font-size: 11px; line-height: 1.2; word-spacing: 0;
  }
  html.translated-ltr .brand-lockup { max-width: calc(100vw - 330px); }
}
@media (max-width: 380px) {
  html.translated-ltr .m-register { padding: 0 7px; font-size: 10.5px; min-width: 76px; }
  html.translated-ltr .brand-lockup { max-width: calc(100vw - 300px); }
}

/* Telugu: keep a clear gap between the Register button and the language
   switch (the switch is fixed to the right edge, so the header row reserves
   room for it; a little more is reserved while translated). */
@media (max-width: 820px) {
  html.translated-ltr .nav-wrap { padding-right: 88px; gap: 10px; }
  html.translated-ltr .brand-lockup { max-width: calc(100vw - 345px); }
}
@media (max-width: 380px) {
  html.translated-ltr .nav-wrap { padding-right: 82px; gap: 8px; }
  html.translated-ltr .brand-lockup { max-width: calc(100vw - 315px); }
}

/* Telugu: the header's side padding did not move the Register button clear of
   the fixed language switch, so they still touched. A margin on the button
   itself always does, whatever the container's padding is. */
@media (max-width: 820px) {
  html.translated-ltr .m-register { margin-right: 26px; }
  html.translated-ltr .brand-lockup { max-width: calc(100vw - 370px); }
}
@media (max-width: 380px) {
  html.translated-ltr .m-register { margin-right: 22px; }
  html.translated-ltr .brand-lockup { max-width: calc(100vw - 335px); }
}

/* Telugu: FINAL spacing guarantee between Register and the language switch.
   The switch is ~76px wide, fixed 14px from the right edge, so everything in
   the header row must end at least ~100px from that edge. !important so no
   other rule can undo it. */
@media (max-width: 820px) {
  html.translated-ltr .nav-wrap { padding-right: 96px !important; box-sizing: border-box; }
  html.translated-ltr .m-register {
    margin-right: 0 !important; flex: 0 0 auto;
    padding: 0 8px !important; font-size: 10.5px !important;
  }
  html.translated-ltr .brand-lockup { max-width: calc(100vw - 340px) !important; }
}

/* Telugu: a visible gap (~12px) between Register and the language switch. */
@media (max-width: 820px) {
  html.translated-ltr .nav-wrap { padding-right: 110px !important; }
  html.translated-ltr .brand-lockup { max-width: calc(100vw - 355px) !important; }
}

/* Telugu: wider gap (~28px) so the Register button and the language switch
   are clearly separate. */
@media (max-width: 820px) {
  html.translated-ltr .nav-wrap { padding-right: 128px !important; }
  html.translated-ltr .brand-lockup { max-width: calc(100vw - 372px) !important; }
}

/* Telugu: shrink the Register button itself instead of pushing it around.
   Same footprint as the English button (84px), label on two lines at a
   smaller size, so it can never reach the language switch. Header spacing
   goes back to the English values. */
@media (max-width: 820px) {
  html.translated-ltr .nav-wrap { padding-right: 72px !important; gap: 8px !important; }
  html.translated-ltr .brand-lockup { max-width: calc(100vw - 300px) !important; }
  html.translated-ltr .m-register {
    width: 84px !important; min-width: 0 !important; max-width: 84px;
    padding: 0 4px !important; margin: 0 !important;
    font-size: 10.5px !important; line-height: 1.25 !important;
    white-space: normal !important; text-align: center; overflow: hidden;
  }
}

/* =========================================================================
   FLOATING "Join NRI TDP" BUTTON, smaller on phones
   Same button, same link and behaviour; just a more compact size so it
   covers less of the page.
   ========================================================================= */
@media (max-width: 820px) {
  .member-cta { padding: 7px 12px !important; gap: 8px !important; }
  .member-cta .mc-ico { width: 22px !important; height: 22px !important; font-size: 10px !important; }
  .member-cta .mc-copy strong { font-size: 11.5px !important; line-height: 1.2 !important; }
  .member-cta .mc-arrow { font-size: 12px !important; }
}

/* =========================================================================
   SIGNED-IN PORTAL (admin / member) TOP BAR on phones
   The bar wrapped awkwardly: the language switch sat on top of "Post news",
   and Back / Sign out dropped to a second row on their own. Now:
     row 1:  [menu]  Title ........................ [A | అ]
     row 2:  [Post news] ........................ [back] [sign out]
   Only the arrangement changes; every button, link and handler is the same.
   ========================================================================= */
@media (max-width: 820px) {
  body[data-route="admin"] .ac-top,
  body[data-route="account"] .ac-top {
    flex-wrap: wrap; align-items: center;
    padding: 12px 14px !important; row-gap: 10px; column-gap: 10px;
  }
  body[data-route="admin"] .ac-top .ac-burger,
  body[data-route="account"] .ac-top .ac-burger { order: 1; }
  body[data-route="admin"] .ac-top h1,
  body[data-route="account"] .ac-top h1 {
    order: 2; flex: 1 0 calc(100% - 56px); min-width: 0;
    box-sizing: border-box; padding-right: 88px;      /* clear of the language switch */
  }
  body[data-route="admin"] .ac-top .ac-top-actions,
  body[data-route="account"] .ac-top .ac-top-actions {
    order: 3; margin: 0 auto 0 0; justify-content: flex-start;
  }
  body[data-route="admin"] .ac-top .ac-top-back,
  body[data-route="account"] .ac-top .ac-top-back { order: 4; margin-left: auto; }
  body[data-route="admin"] .ac-top .ac-top-signout,
  body[data-route="account"] .ac-top .ac-top-signout { order: 5; margin-left: 0; }

  body[data-route="admin"] .lsw,
  body[data-route="account"] .lsw { top: 15px; right: 14px; }
}

/* Portal top bar on phones, positions swapped as requested:
     row 1:  [menu]  Title ........................ [sign out]
     row 2:  [Post news] ................. [A | అ] [back to site]
   i.e. language switch -> where Back to site was, Back to site -> where Sign
   out was, Sign out -> where the language switch was. Only positions change. */
@media (max-width: 820px) {
  body[data-route="admin"] .ac-top h1,
  body[data-route="account"] .ac-top h1 { flex: 1 0 calc(100% - 96px); padding-right: 0; }
  body[data-route="admin"] .ac-top .ac-top-signout,
  body[data-route="account"] .ac-top .ac-top-signout { order: 3; margin-left: 0; }
  body[data-route="admin"] .ac-top .ac-top-actions,
  body[data-route="account"] .ac-top .ac-top-actions { order: 4; }
  body[data-route="admin"] .ac-top .ac-top-back,
  body[data-route="account"] .ac-top .ac-top-back { order: 5; margin-left: auto; }

  /* the switch sits in row 2, just left of Back to site (14px edge + 36px
     button + 10px gap = 60px) */
  body[data-route="admin"] .lsw { top: 74px; right: 60px; }
  body[data-route="account"] .lsw { top: 64px; right: 60px; }
}

/* Portal top bar on phones: Back to site and Sign out trade places.
     row 1:  [menu]  Title ........................ [back to site]
     row 2:  [Post news] ................. [A | అ] [sign out]            */
@media (max-width: 820px) {
  body[data-route="admin"] .ac-top .ac-top-back,
  body[data-route="account"] .ac-top .ac-top-back { order: 3; margin-left: 0; }
  body[data-route="admin"] .ac-top .ac-top-signout,
  body[data-route="account"] .ac-top .ac-top-signout { order: 5; margin-left: auto; }
}

/* Portal top bar on phones: show the full "← Back to site" pill (as on the
   laptop) instead of the arrow-only button. Same link, same behaviour. */
@media (max-width: 820px) {
  body[data-route="admin"] .ac-top .ac-top-back,
  body[data-route="account"] .ac-top .ac-top-back { padding: 8px 14px; border-radius: 999px; gap: 8px; }
  body[data-route="admin"] .ac-top .ac-top-back span,
  body[data-route="account"] .ac-top .ac-top-back span { display: inline; white-space: nowrap; }
  body[data-route="admin"] .ac-top h1,
  body[data-route="account"] .ac-top h1 { flex: 1 0 calc(100% - 184px); }
}

/* Portal top bar: the "Back to site" pill is wider than the arrow button it
   replaced, so it no longer fitted on the first row and dropped down beside
   Post news. The title area now leaves it enough room, which puts it back at
   the top right:
     row 1:  [menu]  Title ............... [← Back to site]
     row 2:  [Post news] ............ [A | అ] [sign out]            */
@media (max-width: 820px) {
  body[data-route="admin"] .ac-top h1,
  body[data-route="account"] .ac-top h1 { flex: 1 0 calc(100% - 206px); }
  body[data-route="admin"] .ac-top .ac-top-back,
  body[data-route="account"] .ac-top .ac-top-back { flex: 0 0 auto; }
}

/* Portal top bar on phones: language switch and Sign out trade places.
     row 2:  [Post news] ................. [sign out] [A | అ]
   The switch is fixed ~76px wide at the right edge, so Sign out keeps a
   matching margin to sit just left of it. */
@media (max-width: 820px) {
  body[data-route="admin"] .lsw,
  body[data-route="account"] .lsw { right: 14px; }
  body[data-route="admin"] .ac-top .ac-top-signout,
  body[data-route="account"] .ac-top .ac-top-signout { margin-left: auto; margin-right: 86px; }
}

/* Portal top bar on phones: line the language switch up with the Sign out
   button on the same row (it was sitting ~9px lower). */
@media (max-width: 820px) {
  body[data-route="admin"] .lsw { top: 65px; }
  body[data-route="account"] .lsw { top: 62px; }
}

/* Portal menu drawer (phones): the language switch is fixed to the viewport,
   so it floated on top of the dimmed backdrop and the drawer's menu. While
   the drawer is open the switch is tucked away, and it returns as soon as the
   drawer closes. Nothing else is affected. */
@media (max-width: 900px) {
  body:has(.ac.is-drawer-open) .lsw {
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s ease, visibility 0s linear .2s;
  }
  .lsw { transition: opacity .2s ease; }
}

/* =========================================================================
   PORTAL MENU DRAWER (phones): stay pinned to the screen
   Scrolling the drawer to its end showed the "All requests" page below it:
   the drawer and its dimmed backdrop are position:fixed, but an ancestor's
   transform/filter turns that into "fixed to the scrolled page", so they
   ended partway down the screen. While the drawer is open those effects are
   switched off on the drawer's ancestors, so it is pinned to the real screen
   top to bottom; scrolling inside it no longer drags the page.
   ========================================================================= */
@media (max-width: 900px) {
  body:has(.ac.is-drawer-open) .app-shell,
  body:has(.ac.is-drawer-open) .screen,
  body:has(.ac.is-drawer-open) .ac {
    transform: none !important; filter: none !important;
    backdrop-filter: none !important; perspective: none !important;
    contain: none !important; will-change: auto !important;
    animation: none !important;
  }
  .ac-side { top: 0; bottom: 0; height: 100vh; height: 100dvh; overscroll-behavior: contain; }
  .ac-drawer-scrim { overscroll-behavior: contain; }
  /* the page behind does not scroll while the menu is open */
  body:has(.ac.is-drawer-open) .screen[data-route="admin"],
  body:has(.ac.is-drawer-open) .screen[data-route="account"] { overflow-y: hidden; }
}

/* Portal pop-ups (Edit user, New user, etc.): the language switch is fixed to
   the screen and showed on top of the dialog's heading. It is tucked away
   while a pop-up is open and returns when it closes. Same approach as for the
   menu drawer. */
body:has(.ac .ac-scrim) .lsw {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, visibility 0s linear .2s;
}