/* rn-mnav v1 — Regulatory News mobile navigation drawer (2026-09-16, owner request: the phone menu follows
   Regulatory Events — search pill, large chevron rows, slide-in section panels, pinned newsletter CTA).
   Ported from Events' re-mnav layer (itself Academy's ra-mnav). Below 768px it overrides the legacy flat
   drawer in news.css / article.css; the 64px masthead itself is the estate-mhead block every page carries.
   THIS FILE IS THE SOURCE and is served as-is: templates/nav.html links it (and mnav.js) with a ?v=<md5-8>
   that scripts/surfaces.js stamps — edit here, then `npm run surfaces`, rebuild + adopt the articles. */
.rn-mnav-chev, .rn-mnav-head, .rn-mnav-foot, .rn-mnav-foot-li { display: none; }
@media (max-width: 768px) {
  :root { --rn-mnav-top: 64px; --rn-mnav-ease: cubic-bezier(0.22, 1, 0.36, 1); }

  html.rn-mnav-lock, html.rn-mnav-lock body { overflow: hidden !important; height: 100% !important; overscroll-behavior: none; }
  html.rn-mnav-lock .back-to-top, html.rn-mnav-lock #cc-banner, html.rn-mnav-lock .consent-banner { display: none !important; }
  html.rn-mnav-ready nav { z-index: 10000 !important; }

  /* ---- Level 1: the drawer ---- */
  html.rn-mnav-ready .nav-links {
    display: flex !important;
    position: fixed !important;
    top: var(--rn-mnav-top) !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 20px 0 !important;
    background: #ffffff !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 9990 !important;
    box-sizing: border-box !important;
    /* Never let the drawer become the containing block for the fixed section panels. */
    transform: none !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    perspective: none !important;
    contain: none !important;
    will-change: auto !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }
  html.rn-mnav-open .nav-links {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0s;
  }
  html.rn-mnav-ready .nav-links > li { width: 100% !important; margin: 0 !important; position: static !important; }
  html.rn-mnav-ready .nav-links > li > a:not(.nav-cta) {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px;
    min-height: 60px !important;
    padding: 0 2px 0 4px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    background: transparent !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.25 !important;
    color: var(--ink-deep) !important;
    text-decoration: none !important;
    position: static !important;
    -webkit-tap-highlight-color: transparent;
  }
  html.rn-mnav-ready .nav-links > li > a:not(.nav-cta)::before,
  html.rn-mnav-ready .nav-links > li > a:not(.nav-cta)::after { display: none !important; content: none !important; }
  html.rn-mnav-ready .nav-links > li > a:not(.nav-cta):active { background: var(--bg-soft) !important; }
  html.rn-mnav-ready .nav-links > li > a.is-active:not(.nav-cta) { color: var(--accent) !important; }
  .rn-mnav-chev {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 30px; height: 30px; flex: 0 0 30px;
    border-radius: 50%;
    color: var(--accent);
    background: rgba(16, 109, 55, 0.1);
  }
  .rn-mnav-chev svg { width: 14px; height: 14px; display: block; }

  /* Search pill sits at the top of the drawer (pill carries the ring; inner input never does). */
  html.rn-mnav-ready .nav-links > li.nav-search-item { order: -1 !important; display: block !important; padding: 12px 0 8px !important; }
  html.rn-mnav-ready .nav-search {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 50px !important;
    padding: 0 18px !important;
    box-sizing: border-box !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 999px !important;
    background: var(--bg-soft) !important;
    color: var(--text-light) !important;
  }
  html.rn-mnav-ready .nav-search:focus-within {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(16, 109, 55, 0.22) !important;
    color: var(--accent) !important;
  }
  html.rn-mnav-ready .nav-search svg { width: 17px !important; height: 17px !important; }
  html.rn-mnav-ready .nav-search input {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    font-size: 16px !important; /* 16px stops iOS zooming the page on focus */
    color: var(--text) !important;
    outline: none !important;
    box-shadow: none !important;
  }
  html.rn-mnav-ready .nav-search input:focus-visible { outline: none !important; box-shadow: none !important; }

  /* Pinned footer (injected): the header CTA moves here + the ecosystem line */
  html.rn-mnav-ready .nav-links > li.rn-mnav-foot-li {
    display: block !important;
    margin-top: auto !important;
    padding: 22px 0 calc(22px + env(safe-area-inset-bottom, 0px)) !important;
    position: sticky !important;
    bottom: 0 !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 26%) !important;
  }
  html.rn-mnav-ready .nav-links > li.rn-mnav-foot-li .nav-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 54px !important;
    min-width: 0 !important;
    border-radius: 999px !important;
    background: var(--accent) !important;
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
    text-decoration: none !important;
    box-shadow: 0 10px 26px rgba(16, 109, 55, 0.28) !important;
    transform: none !important;
  }
  .rn-mnav-foot {
    display: flex !important;
    justify-content: center;
    gap: 6px;
    margin: 14px 0 0;
    font-size: 12.5px;
    color: var(--text-light);
  }
  html.rn-mnav-ready .nav-links .rn-mnav-foot a {
    display: inline !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important;
    border: 0 !important; border-bottom: 1px solid var(--border-strong) !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important;
    font-size: 12.5px !important; font-weight: 600 !important; color: var(--text-muted) !important; text-decoration: none !important;
  }

  /* ---- Level 2: section panels (slide in from the right) ---- */
  html.rn-mnav-ready .nav-links > li > div[class*="-dropdown"] {
    display: block !important;
    position: fixed !important;
    top: var(--rn-mnav-top) !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: auto !important; max-width: none !important; height: auto !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 20px calc(28px + env(safe-area-inset-bottom, 0px)) !important;
    background: #ffffff !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 9995 !important;
    opacity: 1 !important;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(100%);
    transition: transform 0.3s var(--rn-mnav-ease), visibility 0s linear 0.3s;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  html.rn-mnav-ready .nav-links > li.rn-mnav-open > div[class*="-dropdown"] {
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    transition: transform 0.3s var(--rn-mnav-ease), visibility 0s;
  }
  html.rn-mnav-ready .nav-links > li > div[class*="-dropdown"]::before { display: none !important; content: none !important; }

  /* Panel header (injected): back button + section title */
  .rn-mnav-head {
    display: block !important;
    position: sticky; top: 0; z-index: 2;
    margin: 0 -20px 4px;
    padding: 10px 20px 12px;
    background: #ffffff;
    border-bottom: 1px solid var(--border);
  }
  .rn-mnav-back {
    display: inline-flex; align-items: center; gap: 4px;
    min-height: 36px; padding: 0 10px 0 4px; margin-left: -4px;
    border: 0; border-radius: 999px; background: transparent;
    font: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--accent); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .rn-mnav-back:active { background: rgba(16, 109, 55, 0.1); }
  .rn-mnav-back svg { width: 16px; height: 16px; }
  .rn-mnav-title {
    display: block; margin: 2px 0 0;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05;
    color: var(--ink-deep);
    outline: none !important;
    box-shadow: none !important;
  }
  .rn-mnav-title:focus, .rn-mnav-title:focus-visible { outline: none !important; box-shadow: none !important; }

  /* "View all" row (Topics → Browse the library) */
  html.rn-mnav-ready .nav-links a[class*="-dropdown-all"] {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px;
    width: 100% !important;
    min-height: 52px !important;
    margin: 6px 0 4px !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 12px !important;
    background: var(--bg-soft) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--ink-deep) !important;
    grid-column: auto !important;
    position: static !important;
  }
  html.rn-mnav-ready .nav-links a[class*="-dropdown-all"]::before,
  html.rn-mnav-ready .nav-links a[class*="-dropdown-all"]::after { display: none !important; content: none !important; }
  html.rn-mnav-ready .nav-links a[class*="-dropdown-all"] svg { width: 16px !important; height: 16px !important; color: var(--accent); transform: none !important; }

  /* Groups */
  html.rn-mnav-ready .nav-links > li > div[class*="-dropdown"] > div[class*="-dropdown-col"] { min-width: 0 !important; display: block !important; }
  html.rn-mnav-ready .nav-links > li > div[class*="-dropdown"] h4 {
    display: block !important;
    position: static !important;
    margin: 22px 0 0 !important;
    padding: 0 0 8px 2px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    background: transparent !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--accent) !important;
    z-index: auto !important;
  }
  html.rn-mnav-ready .nav-links > li > div[class*="-dropdown"] h4::before,
  html.rn-mnav-ready .nav-links > li > div[class*="-dropdown"] h4::after { display: none !important; content: none !important; }
  html.rn-mnav-ready .nav-links > li > div[class*="-dropdown"] ul {
    display: block !important;
    list-style: none !important;
    margin: 0 !important; padding: 0 !important;
    columns: auto !important;
  }
  html.rn-mnav-ready .nav-links > li > div[class*="-dropdown"] ul li { margin: 0 !important; padding: 0 !important; display: block !important; }
  html.rn-mnav-ready .nav-links > li > div[class*="-dropdown"] ul li a {
    display: flex !important;
    align-items: center !important;
    min-height: 50px !important;
    padding: 12px 8px 12px 2px !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.7) !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    color: var(--text) !important;
    text-decoration: none !important;
    white-space: normal !important;
    -webkit-tap-highlight-color: transparent;
  }
  html.rn-mnav-ready .nav-links > li > div[class*="-dropdown"] ul li:last-child a { border-bottom: 0 !important; }
  html.rn-mnav-ready .nav-links > li > div[class*="-dropdown"] ul li a:active { background: var(--bg-soft) !important; }
  html.rn-mnav-ready .nav-links > li > div[class*="-dropdown"] ul li a.is-active {
    color: var(--accent) !important;
    font-weight: 700 !important;
    box-shadow: inset 3px 0 0 var(--accent) !important;
    padding-left: 12px !important;
  }
  html.rn-mnav-ready .nav-links > li > div[class*="-dropdown"] ul li a::before,
  html.rn-mnav-ready .nav-links > li > div[class*="-dropdown"] ul li a::after { display: none !important; content: none !important; }

  /* ---- News specifics ---- */
  /* The foot carries both utilities as buttons — newsletter, then Advertise (owner ruling 2026-09-16) —
     so the two utility rows that say the same things step aside. Same width, stacked (estate-cta). */
  html.rn-mnav-ready .nav-links > li.nav-util--newsletter,
  html.rn-mnav-ready .nav-links > li.nav-util--advertise { display: none !important; }
  html.rn-mnav-ready .nav-links > li.rn-mnav-foot-li .nav-cta.rn-mnav-cta--ghost {
    margin-top: 10px !important;
    background: #ffffff !important;
    color: var(--accent) !important;
    border: 1.5px solid var(--accent) !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
  }
  html.rn-mnav-ready .nav-links > li.rn-mnav-foot-li .nav-cta.rn-mnav-cta--ghost:active { background: rgba(16, 109, 55, 0.08) !important; }
  /* Panel rows carry the section name and one line on what it covers. */
  html.rn-mnav-ready .nav-links > li > div[class*="-dropdown"] ul li a {
    flex-direction: column !important; align-items: flex-start !important; justify-content: center !important;
    gap: 2px; min-height: 62px !important;
  }
  .rn-mnav-name { font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-deep); }
  .rn-mnav-desc { font-size: 13px; font-weight: 400; line-height: 1.35; color: var(--text-light); }
  html.rn-mnav-ready .nav-links a.is-active .rn-mnav-name { color: var(--accent); font-weight: 700; }
  .rn-mnav-star { display: inline-flex; align-items: center; gap: 8px; }
  .rn-mnav-star svg { width: 17px; height: 17px; flex: none; color: var(--accent); }
  /* Short phones: six rows + the two pinned buttons fit without scrolling. */
  @media (max-height: 700px) {
    html.rn-mnav-ready .nav-links > li > a:not(.nav-cta) { min-height: 54px !important; }
  }
  .rn-mnav-name svg { width: 13px; height: 13px; margin-right: 6px; vertical-align: -1px; color: var(--accent); }

  @media (prefers-reduced-motion: reduce) {
    html.rn-mnav-ready .nav-links,
    html.rn-mnav-ready .nav-links > li > div[class*="-dropdown"] { transition: none !important; }
  }
}