/* briefing-mobile-nav.css — Phase 50c. Mobile primary navigation chrome that
   replaces the sidebar + hamburger on ≤800px. Built by briefing/mobile-nav.js:
   a sticky frosted block holding the relocated header (logo + auth), a tab
   strip (News/Manga/Comics/Settings) and a context filter chip row.
   Desktop (>800px) never shows .mobile-chrome (JS only inserts it on mobile),
   but it's display:none here as a belt-and-suspenders guard. */

.mobile-chrome{ display:none; }

@media (max-width: 800px){
  .mobile-chrome{
    display:block;
    position:sticky; top:0; z-index:40;
    margin:0 -12px 12px;           /* full-bleed: cancel .main's 12px side pad
                                      (must match .main padding in briefing-layout.css) */
    background:#fff;
    border-bottom:1px solid #d9dce6;
    box-shadow:0 1px 12px rgba(15,17,23,.06);
    overflow:hidden;               /* clip the aurora to the header */
  }
  /* Aurora — the reader's privacy-blackout effect, reborn as a soft pastel
     wash behind the header on a white base. Confined to the header
     (overflow:hidden on the chrome) and painted BEHIND the content
     (::before z-index:0, children lifted to z-index:1), with low-alpha tints
     so the dark wordmark + tab text stay fully legible. */
  .mobile-chrome::before{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(60% 130% at 16% 30%, rgba(70,120,245,.22), transparent 70%),
      radial-gradient(55% 130% at 82% 38%, rgba(170,80,225,.18), transparent 70%),
      radial-gradient(50% 130% at 55% 85%, rgba(40,195,205,.16), transparent 72%),
      radial-gradient(48% 130% at 36% 62%, rgba(235,90,155,.15), transparent 72%);
    background-size:180% 180%, 190% 190%, 170% 170%, 200% 200%;
    animation:header-aurora-wave 16s ease-in-out infinite alternate;
  }
  .mobile-chrome > *{ position:relative; z-index:1; }

  /* ── relocated header row (Reader wordmark + auth tile) ── */
  .mobile-chrome > .sidebar-header{
    display:flex; flex-direction:row; align-items:center; justify-content:space-between;
    gap:10px; margin:0; padding:10px 12px; background:transparent;
    /* position:relative + z-index:1 lifts the header (and the wordmark's white
       outline) ABOVE the aurora ::before. Without this the semi-transparent
       aurora painted over the wordmark and washed the white stroke out. */
    position:relative; z-index:1;
    border-bottom:1px solid #eef0f5;
  }
  .mobile-chrome > .sidebar-header > .title{
    /* `.sidebar .title` no longer matches once relocated — re-assert Alkatra. */
    font-family:'Alkatra',cursive; font-weight:600; color:#0f1117;
    font-size:34px; margin:0; text-align:left; flex:0 0 auto;
    /* Thick translucent-white outline tracing the letterforms, matching the
       desktop sidebar wordmark. White only (no dark halo — that read as
       blurry), with a soft white glow for the frosted feel. */
    -webkit-text-stroke:6px rgba(255,255,255,0.7);
    paint-order:stroke fill;
    text-shadow:0 0 7px rgba(255,255,255,0.4);
  }
  .mobile-chrome > .sidebar-header > #auth-mount{ min-width:0; }
  /* The username is redundant in the compact top bar — avatar + ADMIN chip +
     Sign out are enough. */
  .mobile-chrome .auth-name{ display:none; }
  /* Center-align the ADMIN pill + Sign out (stacked in .auth-meta) instead of
     left-aligning them. */
  .mobile-chrome .auth-meta{ align-items:center; }
  .mobile-chrome .auth-name-row{ justify-content:center; }
  .mobile-chrome .auth-signout-btn{ align-self:center; }

  /* ── tab strip ── */
  .mobile-tabs{
    display:flex; gap:2px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding:0 12px; border-bottom:2px solid #e8ecf4;
  }
  .mobile-tabs::-webkit-scrollbar{ display:none; }
  .m-tab{
    flex:0 0 auto; padding:11px 16px; background:transparent; border:none;
    border-bottom:2px solid transparent; margin-bottom:-2px;
    color:#5a6172; font-size:14px; font-weight:600; font-family:'Inter',sans-serif;
    text-decoration:none; cursor:pointer; white-space:nowrap;
  }
  /* First tab flush to the 12px gutter so "News" left-aligns with the Reader
     wordmark above it (drops the 16px inner left pad on item one only). */
  .mobile-tabs .m-tab:first-child{ padding-left:0; }
  .m-tab.active{ color:#2945d6; border-bottom-color:#2945d6; }
  .m-tab-link{ color:#8a93a6; }   /* Settings — leaves the page, dimmer */
  .m-tab .m-tab-count{
    display:inline-block; margin-left:6px; font-size:11px; font-weight:600;
    padding:1px 7px; border-radius:9px; background:#eef0f7; color:#5a6172;
  }
  .m-tab .m-tab-count:empty{ display:none; }
  .m-tab.active .m-tab-count{ background:#dbe1fa; color:#2945d6; }

  /* ── context filter chips ── */
  .mobile-filter{
    display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding:8px 12px;
  }
  .mobile-filter::-webkit-scrollbar{ display:none; }
  .mobile-filter:empty{ display:none; }
  .m-chip{
    flex:0 0 auto; padding:5px 12px; border-radius:16px;
    background:#eef0f7; border:1px solid #d9dce6; color:#3a4154;
    font-size:12px; font-weight:600; font-family:'Inter',sans-serif;
    white-space:nowrap; cursor:pointer;
  }
  .m-chip-topic{ background:#fff; }
  .m-chip.active{ background:#dbe1fa; border-color:#bccfee; color:#2945d6; }
  /* Red-tier content-warning genres — same treatment as the desktop portal
     chips (.portal-filter-chip-red) and the admin browse filters. */
  .m-chip.m-chip-red{ border-color:#e8a0a0; color:#7a1e16; }
  .m-chip.m-chip-red.active{ background:#fde2e0; border-color:#cc1e1e; color:#7a1e16; }
}

/* Header aurora drift — gentle, slow, confined to the header pseudo-element. */
@keyframes header-aurora-wave{
  0%   { background-position:   0% 0%, 100% 50%,  50% 100%,   0% 50%; }
  50%  { background-position: 100% 50%,   0% 50%, 100% 0%,  100% 50%; }
  100% { background-position:  50% 100%,  50% 0%,   0% 50%,   50% 0%; }
}
@media (prefers-reduced-motion: reduce){
  .mobile-chrome::before{ animation:none; }
}