/* ══════════════════════════════════════════════════════════════════════════════════════════
   mobilenav.css — the phone menu, redesigned.
   Ava, 10 Sep 2026: "the menu bar is covering whats underneath and its scrollable, so the
   menu needs to be redesigned"
   ══════════════════════════════════════════════════════════════════════════════════════════
   WHAT WAS WRONG, measured on a 375×812 screen before touching anything:
     • The menu was a sideways scroller: 1027px of items inside a 347px box, so exactly
       THREE of the ten pages were reachable without dragging it, and the tenth was invisible
       with no hint it existed. A menu you have to scroll to discover is not a menu.
     • It was cut off mid-word ("Mand…"), which reads as breakage rather than as "more here".
     • The fixed header stood 154px tall — a fifth of the screen gone before any content, and
       because it is fixed it sat over the page as you scrolled.

   WHAT IT IS NOW: the strip is gone on a phone and the same ten items open as a full-screen
   list from one button. Ten big tap targets you can read, instead of three you can reach.

   ⭐ THE PANEL HOLDS THE REAL MENU, not a copy of it. Cloning the items would have left the
   clones without their click handlers and their dropdowns, and would silently drift the day
   somebody adds an eleventh page. This restyles the actual `.rk-menu` in place, so anything
   that works on a laptop works here, for ever, with no second list to maintain.

   Loads AFTER index.html's own styles, so these override without editing that 4MB file.  */

/* One breakpoint, and it is the same one the app already used to switch to the scroller —
   so this replaces a known-bad state and changes nothing above it. */
@media (max-width: 640px) {

  /* ── the strip stands down ─────────────────────────────────────────────────────────── */
  html[data-theme="light"] #rk-nav .rk-menu { display: none; }

  /* Those hardcoded offsets in index.html (`margin-top:150px; height:calc(100vh - 150px)`)
     assumed the strip was there. Measured: the header is 101px without it. Give the 53px
     back to the page rather than leaving a band of nothing.
     dvh, not vh: on iOS Safari `vh` includes the address bar that then slides away, so a
     `100vh` page is permanently a little too tall and the bottom of every screen — the box
     you type in — sits under the browser chrome. */
  html[data-theme="light"] .main {
    margin-top: 101px;
    height: calc(100dvh - 101px);
  }

  /* ── the button that opens it ──────────────────────────────────────────────────────── */
  #mnav-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0;
    width: 38px; height: 38px; flex: 0 0 38px;
    border: 1px solid #1B1416; border-radius: 30px; background: none;
    cursor: pointer; padding: 0; position: relative;
  }
  #mnav-btn span {
    display: block; width: 16px; height: 1.5px; background: #1B1416; border-radius: 2px;
    position: relative;
  }
  /* Three lines drawn from one element, so there is nothing to fall out of alignment. */
  #mnav-btn span:before,
  #mnav-btn span:after {
    content: ""; position: absolute; left: 0; width: 16px; height: 1.5px;
    background: #1B1416; border-radius: 2px;
  }
  #mnav-btn span:before { top: -5px; }
  #mnav-btn span:after  { top: 5px; }
  #mnav-btn:focus-visible { outline: 2px solid #A24F6C; outline-offset: 2px; }
  /* The dot appears only when something is genuinely waiting for you, so the button is worth
     glancing at rather than being permanently decorated. */
  #mnav-btn .mnav-dot {
    position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%;
    background: #A24F6C; border: 1.5px solid #fff;
  }
  #mnav-btn .mnav-dot[hidden] { display: none; }

  /* ── the panel ─────────────────────────────────────────────────────────────────────── */
  html[data-theme="light"] body.mnav-open #rk-nav .rk-menu {
    display: flex;
    position: fixed; inset: 0; z-index: 200;
    flex-direction: column; flex-wrap: nowrap;
    align-items: stretch; justify-content: flex-start;
    gap: 0; row-gap: 0;
    margin: 0; padding: 78px 0 32px;
    overflow-y: auto; overscroll-behavior: contain;
    background: #FDFBFA;
    border: 0;
    -webkit-overflow-scrolling: touch;
  }
  /* The strip's right-hand fade only made sense on a scroller. */
  html[data-theme="light"] body.mnav-open #rk-nav .rk-menu::after { display: none; }

  html[data-theme="light"] body.mnav-open #rk-nav .rk-menu .rk-item {
    width: 100%; flex: 0 0 auto;
  }
  /* 52px rows: a comfortable thumb target, and ten of them fit a phone screen without
     scrolling, which is the whole point of the change. */
  html[data-theme="light"] body.mnav-open #rk-nav .rk-menu .rk-item > button {
    display: flex; align-items: center; gap: 10px;
    width: 100%; min-height: 52px;
    text-align: left; justify-content: flex-start;
    font-family: 'Lora', Georgia, serif; font-size: 18px; font-weight: 500;
    padding: 0 22px; border-radius: 0;
    border-bottom: 1px solid #F1ECEB;
  }
  /* On a laptop the current page is an underline under a horizontal item. In a vertical list
     an underline reads as nothing at all, so "you are here" becomes a rose bar down the side
     and a heavier weight — the same fact, said in a way that works in this shape. */
  html[data-theme="light"] body.mnav-open #rk-nav .rk-menu .rk-item > button.on {
    font-weight: 700; color: #1B1416;
    box-shadow: inset 3px 0 0 0 #B0587A;
    background: #FBF7F8;
  }
  html[data-theme="light"] body.mnav-open #rk-nav .rk-menu .rk-item > button.on:after {
    display: none;                       /* kill the horizontal underline */
  }
  /* The little dropdown caret points down for a menu that opens sideways on desktop; in the
     panel the submenu opens below the row, so down is still honest. Just give it room. */
  html[data-theme="light"] body.mnav-open #rk-nav .rk-menu .rk-item > button svg { margin-left: auto; }

  /* the panel's own header: a title and a way out */
  #mnav-head {
    position: fixed; top: 0; left: 0; right: 0; z-index: 201;
    height: 78px; display: flex; align-items: center; justify-content: space-between;
    padding: 0 18px 0 22px; background: #FDFBFA; border-bottom: 1px solid #EBE6E5;
  }
  #mnav-head b {
    font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: #9E5069;
  }
  #mnav-close {
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid #E7E3E5;
    background: #fff; cursor: pointer; font-size: 20px; line-height: 1; color: #1B1416;
    display: grid; place-items: center; padding: 0;
  }
  #mnav-close:focus-visible { outline: 2px solid #A24F6C; outline-offset: 2px; }
  body:not(.mnav-open) #mnav-head { display: none; }

  /* A panel that lets the page scroll behind it feels broken on a phone. */
  body.mnav-open { overflow: hidden; }

  /* The chat panel's edge handle has no place on a phone: it sat over the content, and the
     full-screen Messages page is one tap away in the menu now. */
  #ch-handle { display: none !important; }

  /* ── buttons that ran off the edge of the screen ──────────────────────────────────────
     `.rk-io` is the action row at the top of a register — Add / Save as list / Export /
     Import / Merge duplicates / Print. It was `flex-wrap: nowrap` with `overflow: visible`,
     so on a 375px screen it simply ran past the edge and the last buttons could not be
     reached AT ALL — not scrolled to, not tapped. Measured:
        Firms     515px wide → "Merge duplicates" and "Print" unreachable
        Contacts  404px wide → "Print" unreachable
        Lists     401px wide → "Build Ambrus" unreachable
     Note the difference from the old menu strip: that was a scroller, so its items were at
     least reachable by dragging. These were not reachable by any means.
     Wrapping is the fix rather than scrolling: six buttons of unpredictable width have no
     natural reading order, so a hidden second row is worse than a second line you can see. */
  [data-theme="light"] .rk-io { flex-wrap: wrap; row-gap: 7px; }
}

/* The button belongs to the phone layout only — above the breakpoint the real strip is back
   and a hamburger beside it would be two menus for one job. */
@media (min-width: 641px) {
  #mnav-btn, #mnav-head { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="light"] body.mnav-open #rk-nav .rk-menu { transition: none; }
}