/* ============================================================
   PASSAGE by Khoshà — MEGA MENU (mn- prefix)
   Owned by: meganav.js / meganav.css. Nothing else may write here.

   Replaces the 228px left rail on screens wider than 760px with a
   brand-mark trigger in the topbar and one full-width panel that
   shows all 27 destinations at once, grouped exactly as the rail
   grouped them, with the same faint record counts.

   Everything below is scoped to (min-width:761px). At 760px and
   under, mobile.css already hides .side and mobile.js's own
   full-screen tile menu is the navigation — that overlay is
   already a mega panel, it is already tested, and mobile-shell.js
   hangs "+ New" / EN-FR off it. Do not fight it.

   TO REVERT THE WHOLE CHANGE: remove the meganav.css <link> and the
   meganav.js <script> from index.html. The rail markup was never
   deleted; it comes straight back.
   ============================================================ */

/* ---------- hide the rail (runtime only — markup untouched) ---------- */
@media (min-width:761px){
  html.mn-on .side{ display:none !important; }
  /* .topbar is justify-content:space-between and had two children; with the
     trigger added as a third, "between" would strand .crumb in the middle of
     the bar. Pack from the left and push the tools to the right instead. The
     .view keeps its own 30px gutters — the reclaimed 228px goes to content. */
  html.mn-on .topbar{ justify-content:flex-start; }
  html.mn-on .topbar .crumb{ margin-right:4px; }
  html.mn-on .topbar .top-tools{ margin-left:auto; }
}

/* ---------- the trigger: brand mark + where you are ---------- */
.mn-trigger{
  display:none;                 /* shown only by the min-width rule below */
  align-items:center; gap:11px;
  flex:0 0 auto; order:-3;
  padding:6px 12px 6px 6px;
  border:1px solid var(--stroke-soft);
  border-radius:99px;
  background:rgba(255,255,255,.55);
  color:var(--ink);
  transition:border-color .22s, background .22s, box-shadow .22s;
  max-width:min(46vw,430px);
}
@media (min-width:761px){
  html.mn-on .mn-trigger{ display:flex; }
}
.mn-trigger:hover{ border-color:rgba(169,130,76,.42); background:rgba(255,255,255,.8); box-shadow:var(--shadow-soft); }
.mn-trigger:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.mn-trigger[aria-expanded="true"]{ border-color:var(--gold); background:rgba(216,184,119,.16); }

.mn-orb{
  width:34px; height:34px; flex:0 0 34px; border-radius:50%;
  display:grid; place-items:center; color:var(--paper);
  background:radial-gradient(circle at 32% 28%,var(--gold-hi),var(--gold) 58%,var(--gold-deep));
  box-shadow:var(--shadow-soft);
}
.mn-orb svg{ width:19px; height:19px; }

.mn-word{
  font-family:var(--disp); font-weight:800; font-size:13px; letter-spacing:.2em;
  white-space:nowrap; flex:0 0 auto;
}
.mn-sep{ width:1px; height:20px; flex:0 0 1px; background:var(--stroke); }

/* Where you are, with the menu shut. The rail said this by highlighting a
   row; the topbar has to say it in words, so it does — the section here,
   the screen itself in .crumb immediately to the right. */
.mn-here{
  display:flex; flex-direction:column; gap:1px; min-width:0; text-align:left;
}
.mn-here-k{
  font-size:8.5px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:700; line-height:1;
}
.mn-here-sec{
  font-size:12.5px; font-weight:600; letter-spacing:.01em; color:var(--gold-deep);
  line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mn-caret{ width:14px; height:14px; flex:0 0 14px; color:var(--ink-faint); transition:transform .25s; }
.mn-trigger[aria-expanded="true"] .mn-caret{ transform:rotate(180deg); }
.mn-kbd{
  flex:0 0 auto; font-family:var(--body); font-size:10px; font-weight:600;
  letter-spacing:.05em; color:var(--ink-faint);
  border:1px solid var(--stroke-soft); border-radius:6px; padding:2px 6px;
  background:var(--bone); white-space:nowrap;
}
@media (max-width:1180px){
  .mn-kbd{ display:none; }
  .mn-word{ display:none; }
  .mn-sep{ display:none; }
}

/* ---------- scrim ---------- */
.mn-scrim{
  position:fixed; inset:0; z-index:190;
  background:rgba(26,27,24,.20); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden;
  /* visibility is transitioned with a DELAY, not a duration. Given a duration
     Chrome flips it at the halfway point, so for ~130ms after opening the
     panel is still visibility:hidden and therefore not focusable — which
     silently swallowed the focus() call that puts the cursor in the filter.
     Delay 0 on open, delay = the fade on close. */
  transition:opacity .28s ease, visibility 0s .28s;
}
.mn-scrim.mn-open{ opacity:1; visibility:visible; transition:opacity .28s ease, visibility 0s 0s; }

/* ---------- the panel ---------- */
.mn-panel{
  position:fixed; z-index:200;
  top:var(--mn-top,72px); left:14px; right:14px;
  max-height:calc(100vh - var(--mn-top,72px) - 18px);
  display:flex; flex-direction:column;
  border:1px solid var(--stroke);
  border-radius:var(--r-lg);
  background:linear-gradient(165deg,rgba(251,249,244,.98) 0%,rgba(244,240,233,.98) 60%,rgba(237,231,220,.98) 100%);
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-10px) scale(.995); transform-origin:top left;
  /* see the note on .mn-scrim: visibility gets a delay, never a duration */
  transition:opacity .26s cubic-bezier(.2,.9,.3,1), transform .26s cubic-bezier(.2,.9,.3,1), visibility 0s .26s;
  overflow:hidden;
}
.mn-panel.mn-open{
  opacity:1; visibility:visible; pointer-events:auto; transform:none;
  transition:opacity .26s cubic-bezier(.2,.9,.3,1), transform .26s cubic-bezier(.2,.9,.3,1), visibility 0s 0s;
}

/* ambient wash, same vocabulary as the rest of the app */
.mn-amb{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.5; pointer-events:none; }
.mn-amb1{ width:340px; height:340px; background:radial-gradient(circle,#EADFC8 0%,transparent 68%); top:-150px; right:-90px; }
.mn-amb2{ width:300px; height:300px; background:radial-gradient(circle,#E4EAE2 0%,transparent 66%); bottom:-140px; left:-80px; }

/* ---------- panel head: filter + hint + close ---------- */
.mn-head{
  position:relative; z-index:2; flex:0 0 auto;
  display:flex; align-items:center; gap:14px;
  padding:14px 16px 12px; border-bottom:1px solid var(--stroke-soft);
}
.mn-find{
  display:flex; align-items:center; gap:9px; flex:1 1 320px; max-width:380px;
  padding:8px 14px; border-radius:99px;
  border:1px solid var(--stroke-soft); background:rgba(255,255,255,.7);
  transition:border-color .2s, box-shadow .2s;
}
.mn-find:focus-within{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(216,184,119,.22); }
.mn-find svg{ width:15px; height:15px; flex:0 0 15px; color:var(--ink-faint); }
.mn-find input{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font-size:14px; color:var(--ink);
}
.mn-find input::placeholder{ color:var(--ink-faint); }
.mn-hint{
  flex:1 1 auto; font-size:10.5px; letter-spacing:.07em; color:var(--ink-faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mn-hint b{ font-weight:600; color:var(--ink-soft); }
.mn-close{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--stroke-soft); background:rgba(255,255,255,.65);
  color:var(--ink-soft); transition:all .2s;
}
.mn-close svg{ width:15px; height:15px; }
.mn-close:hover{ border-color:var(--gold); color:var(--gold-deep); }
.mn-close:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
@media (max-width:1000px){ .mn-hint{ display:none; } }

/* ---------- recents ---------- */
.mn-recent{
  position:relative; z-index:2; flex:0 0 auto;
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:11px 16px; border-bottom:1px solid var(--stroke-soft);
  background:rgba(216,184,119,.06);
}
.mn-recent[hidden]{ display:none; }
.mn-recent-t{
  font-size:9.5px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:700; flex:0 0 auto; margin-right:2px;
}
.mn-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 13px 5px 6px; border-radius:99px;
  border:1px solid var(--stroke-soft); background:rgba(255,255,255,.75);
  font-size:12.5px; font-weight:500; color:var(--ink-soft);
  transition:all .2s;
}
.mn-chip .orb{ width:22px; height:22px; flex:0 0 22px; border-radius:50%; display:grid; place-items:center;
  background:var(--bone); border:1px solid var(--stroke-soft); color:var(--gold-deep); }
.mn-chip .orb svg{ width:12px; height:12px; }
.mn-chip:hover{ color:var(--ink); border-color:rgba(169,130,76,.42); background:#fff; }
.mn-chip:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* ---------- the box: every destination, at once ---------- */
.mn-body{ position:relative; z-index:2; flex:1 1 auto; overflow-y:auto; padding:16px 16px 8px; }
.mn-cols{
  display:grid; gap:2px 20px;
  /* auto-FIT, not auto-fill: auto-fill keeps the empty tracks it can fit and
     left a 260px hole to the right of the last group. auto-fit collapses
     them so the groups that exist share the whole panel. */
  /* 190px, not 206: at 1100px (where the rail used to collapse to icons)
     206 only fits four tracks, so the Firm group wrapped under Practice and
     hid behind the footer. 190 fits all five across from 1090px up. */
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  align-items:start;
}
/* Capped so a filtered panel showing two groups does not stretch each into a
   700px-wide row of nothing. Never binds at full width, where five groups
   already share the space. */
.mn-col{ break-inside:avoid; margin-bottom:14px; max-width:360px; }
.mn-col[hidden]{ display:none; }
.mn-col-t{
  font-size:9.5px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:700; font-family:var(--body);
  padding:4px 10px 7px; border-bottom:1px solid var(--stroke-soft); margin-bottom:5px;
}
.mn-it{
  display:flex; align-items:center; gap:10px;
  padding:6px 10px; border-radius:13px;
  color:var(--ink-soft); font-weight:500; font-size:13.5px;
  transition:background .2s, color .2s;
}
.mn-it[hidden]{ display:none; }
.mn-it .orb{
  width:30px; height:30px; flex:0 0 30px; border-radius:50%;
  display:grid; place-items:center; background:var(--bone);
  border:1px solid var(--stroke-soft); color:var(--gold-deep);
  transition:all .25s cubic-bezier(.2,.9,.3,1.4);
}
.mn-it .orb svg{ width:15px; height:15px; }
.mn-it .mn-lbl{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Same faint count the rail carried, same rule: nothing rather than a zero. */
.mn-n{
  margin-left:auto; font-size:11px; font-weight:600; letter-spacing:.02em;
  font-variant-numeric:tabular-nums; color:var(--ink-faint); flex:0 0 auto;
}
.mn-it:hover{ color:var(--ink); background:rgba(169,130,76,.08); }
.mn-it:hover .orb{ transform:translateY(-1px) scale(1.06); box-shadow:var(--shadow-soft); }
.mn-it:hover .mn-n{ color:var(--ink-soft); }
.mn-it:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }
/* keyboard cursor — distinct from "you are here" so they can coexist */
.mn-it.mn-cursor{ background:rgba(169,130,76,.13); color:var(--ink); box-shadow:inset 0 0 0 1px rgba(169,130,76,.30); }
.mn-it.on{ color:var(--ink); background:rgba(169,130,76,.10); }
.mn-it.on .orb{
  background:radial-gradient(circle at 32% 28%,var(--gold-hi),var(--gold) 58%,var(--gold-deep));
  color:var(--paper); border-color:transparent; box-shadow:var(--shadow-soft);
}
.mn-it.on .mn-lbl{ font-weight:600; }
.mn-it.on .mn-n{ color:var(--gold-deep); }

.mn-empty{
  padding:26px 12px 34px; text-align:center; color:var(--ink-faint); font-size:13.5px;
}

/* ---------- panel foot: what the rail's footer used to carry ---------- */
.mn-foot{
  position:relative; z-index:2; flex:0 0 auto;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 16px 12px; border-top:1px solid var(--stroke-soft);
}
.mn-rcic{
  font-size:11px; letter-spacing:.05em; color:var(--green);
  background:rgba(30,58,51,.08); padding:3px 11px; border-radius:99px;
}
.mn-ver{ font-size:10.5px; color:var(--ink-faint); letter-spacing:.05em; margin-left:auto; }

@media (prefers-reduced-motion:reduce){
  .mn-panel{ transition:opacity .12s !important; transform:none !important; }
  .mn-scrim{ transition:opacity .12s !important; }
  .mn-it .orb, .mn-caret{ transition:none !important; }
  .mn-it:hover .orb{ transform:none !important; }
}

/* ============================================================
   PHONE PARITY — the record count on mobile.js's tiles.
   meganav.js mirrors the rail's .nav-n onto .mb-menu-tile; this is
   the only styling that needs. Scoped to the tile so it can never
   affect the desktop panel's own .mn-n.
   ============================================================ */
.mb-menu-tile{ position:relative; }
.mb-menu-tile > .mn-n{
  position:absolute; top:12px; right:14px; margin-left:0;
  font-size:11px; font-weight:600; font-variant-numeric:tabular-nums;
  letter-spacing:.02em; color:var(--ink-faint);
}
.mb-menu-tile.on > .mn-n{ color:var(--gold-deep); }

/* ============================================================
   #authWhoAmI, re-homed.
   auth.js styles this block (auth.css) for a vertical sidebar footer:
   its own bottom border, its own margin. Both are wrong in a horizontal
   strip, so they are neutralised here rather than in auth.css — that
   file is not ours, and this is the only place the block is ever moved.
   ============================================================ */
.mn-foot > .mn-whoami{
  padding:0; margin:0; border-bottom:0; gap:9px; flex:0 1 auto; max-width:340px;
}
.mn-foot > .mn-whoami .auth-whoami-user{ flex:0 1 auto; }

.mb-menu-overlay > .mn-whoami{
  position:relative; z-index:2; flex:0 0 auto;
  margin:0; border-bottom:0; border-top:1px solid var(--stroke-soft);
  padding:12px 18px calc(14px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.5);
}

/* ---- module switched off for this practice (meganav.js, round 15) ---- */
.mn-off-panel .empty p{margin-top:8px}
.mn-off-panel .empty a{text-decoration:underline}