/* Phones and small tablets (≤860px): one tidy navy-and-gold header row on every page, in every language.
   Loaded last, so it settles the earlier phone rules spread over styles.css, home.css and internal.css
   (those let the controls wrap onto a second line, which made a tall white band under the logo, and kept the
   home page header white while every other page was navy).
   - The row never wraps: the logo gives up width first (it scales down), the controls are fixed round icons.
   - Same navy header as the inner pages, with the light wordmark; controls are quiet outlined icons, gold on focus.
   - Signed in on the narrowest phones (≤350px) the bell steps aside: notifications stay one tap away in the
     account menu and the bottom bar. */
@media (max-width:860px){
  html body header.top,
  html body header.top.is-scrolled{background:linear-gradient(90deg,#071827,#0B2239);border-bottom:1px solid rgba(232,182,92,.22);box-shadow:0 4px 18px rgba(4,16,30,.28);-webkit-backdrop-filter:none;backdrop-filter:none}
  html body header.top .wrap{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:8px;height:auto;min-height:60px;padding-block:8px;padding-inline:max(14px,env(safe-area-inset-left)) max(14px,env(safe-area-inset-right))}
  html body header.top .wrap>.nav{flex-wrap:nowrap;flex:none;gap:6px;margin-inline-start:auto;max-width:none;row-gap:0}
  html body header.top #navArea{gap:6px;flex-wrap:nowrap}

  /* the logo: light wordmark, shrinks before anything else does */
  html body header.top .logo{flex:1 1 auto;min-width:0;max-width:170px;background:none;box-shadow:none;padding:0;margin:0;border-radius:0;display:flex;align-items:center}
  html body header.top .logo .logo-word{display:flex;min-width:0;width:100%}
  html body header.top .logo img.logo-mark{display:none}
  html body header.top .logo img.logo-mark.logo-mark-light{display:block;width:100%;max-width:170px;height:auto;filter:none}
  html body header.top .logo .logo-tag{display:none}

  /* the controls: equal round icon buttons */
  html body header.top .nav .btn,
  html body header.top .nav .lang-trigger,
  html body header.top .nav .currency-trigger,
  html body header.top .nav .notif-trigger,
  html body header.top .nav .nav-menu-btn,
  html body header.top .nav .acct-trigger{box-sizing:border-box;min-width:38px;height:38px;min-height:38px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;gap:4px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);color:#fff;font-size:.8rem;line-height:1;box-shadow:none}
  html body header.top .nav .btn:hover,
  html body header.top .nav .btn:active{background:rgba(255,255,255,.14);border-color:rgba(244,210,139,.7)}
  html body header.top .nav :is(.btn,.lang-trigger,.currency-trigger,.notif-trigger,.nav-menu-btn,.acct-trigger):focus-visible{outline:2px solid #F4D28B;outline-offset:2px;box-shadow:none}
  html body header.top .nav .nav-ai-btn,
  html body header.top .nav .lang-trigger,
  html body header.top .nav .notif-trigger,
  html body header.top .nav .nav-menu-btn{width:38px;padding:0}
  html body header.top .nav .nav-ai-btn svg{width:17px;height:17px}
  html body header.top .nav .nav-ai-btn>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  html body header.top .nav .currency-trigger{font-weight:700;letter-spacing:.02em;padding:0 9px}
  html body header.top .nav .nav-menu-btn{font-size:1.05rem}
  html body header.top .nav .notif-trigger{font-size:1rem}
  html body header.top #langTriggerLabel{display:none}
  html body header.top .lang-trigger .flag-badge{width:22px;height:22px;background:#0B2239;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
  /* account chip: just the initial or photo, no name or caret */
  html body header.top #navArea .acct-trigger{width:38px;padding:0;font-size:0;gap:0}
  html body header.top #navArea .acct-trigger .avatar-sm{width:28px;height:28px;font-size:.78rem;background:#E8B65C;color:#071827}
  html body header.top #navArea .acct-trigger .hide-sm{display:none}
  /* signed-out "Sign in" / "Register" and Host Portal live in the ☰ menu and the bottom bar on phones */
  html body header.top #navHostPortal,
  html body header.top #navArea #navRegister,
  html body header.top #navArea #navSignIn{display:none}
  html body header.top .nav-menu{display:block}
  html body header.top .nav-menu[hidden]{display:none}
  /* dropdowns opened from the header stay white cards with dark text */
  html body header.top .menu-list{color:var(--ag-heading,#102A43)}
}
@media (max-width:380px){
  html body header.top .wrap{gap:6px;padding-inline:max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-right))}
  html body header.top .wrap>.nav,html body header.top #navArea{gap:4px}
  html body header.top .nav .btn,
  html body header.top .nav .lang-trigger,
  html body header.top .nav .currency-trigger,
  html body header.top .nav .notif-trigger,
  html body header.top .nav .nav-menu-btn,
  html body header.top .nav .acct-trigger{min-width:36px;height:36px;min-height:36px}
  html body header.top #navArea .acct-trigger{width:36px}
  html body header.top .nav .nav-ai-btn,
  html body header.top .nav .lang-trigger,
  html body header.top .nav .notif-trigger,
  html body header.top .nav .nav-menu-btn,
  html body header.top .nav .acct-trigger{width:36px}
  html body header.top .nav .currency-trigger{padding:0 7px;font-size:.74rem}
}
@media (max-width:350px){
  html body header.top #notifArea{display:none}
}

/* The fixed bottom bar never covers the page end: the page keeps exactly the bar's measured height free
   (--bn-h, set by app.js syncBottomNavHeight), plus breathing room under the footer's last line. */
@media (max-width:860px){
  html body:not(.bn-hidden){padding-bottom:var(--bn-h,calc(64px + env(safe-area-inset-bottom)))}
  html body:not(.bn-hidden) .site-footer{padding-bottom:24px}
}

/* A page shown in English because its reviewed translation is not ready yet (app.js syncEnglishFallback). */
html body [data-view] > p.en-fallback-note{margin:0 0 16px;border-radius:12px;padding:10px max(16px,env(safe-area-inset-left));background:#0B2239;color:#F4D28B;border-bottom:1px solid rgba(232,182,92,.3);font-size:.86rem;line-height:1.4;text-align:center}

/* Mobile footer, compact (2026-11-08): link rows ~17% closer together, same fonts, colours and layout. The copyright
   and operator lines keep the floating AI button's width free on the button's side (right in English, left in Arabic),
   and assistant.js fades the button while footer links scroll under it (body.as-foot-aside). */
@media (max-width:860px){
  html body[data-route] .site-footer .footer-links{row-gap:3px}
  html body[data-route] .site-footer .footer-help-links a{min-height:36px}
  html body[data-route] .site-footer .footer-help{margin-top:15px;padding-top:13px}
  html body[data-route] .site-footer .footer-bottom{margin-top:15px;padding-top:13px;row-gap:6px}
  html body[data-route]:has(#asLaunch:not([hidden])) .site-footer .footer-bottom{padding-inline-end:76px}
}
@media (max-width:860px){
  html body[data-route="about"]:not([data-route="home"]) .site-footer .footer-links a{min-height:37px}
}
.as-launch{transition:opacity .2s,visibility .2s}
body.as-foot-aside .as-launch{opacity:0;visibility:hidden;pointer-events:none}
@media (prefers-reduced-motion:reduce){.as-launch{transition:none}}