/**
 * The signed-in navigation bar in the frontpage look: the MG Mini
 * logomark and wordmark from the homepage, plain links in a row on
 * desktop, a numbered card panel under a burger below xl, dropdowns as
 * cards. Bootstrap still drives the behaviour (collapse, dropdown) through
 * the navbar-expand-xl / collapse / dropdown classes; everything visual is
 * here, so it looks the same on the pages that load mg-look.css and on the
 * ones that still use the classic Bootstrap look.
 *
 * Tokens are declared on .mg-nav itself so the bar does not depend on
 * mg-look.css being present.
 */
.mg-nav {
  --paper: #F4F9F9; --paper-2: #E8F3F3; --paper-3: #D5E9E9;
  --ink: #0D2126; --ink-2: #1C3236; --ink-soft: #456770; --ink-mute: #4e666a;
  --rule: #C9DFE0; --rule-soft: #E1ECEC;
  --accent: #53a3a4; --accent-ink: #027497; --accent-soft: #CFE5E6; --accent-2: #286F6F;
  --shadow-2: 0 2px 0 rgba(13,33,38,.05), 0 18px 40px -18px rgba(13,33,38,.25);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  font-family: "Instrument Sans", system-ui, sans-serif;
  color: var(--ink);
  padding: 0;
  position: relative;
  z-index: 1050;
}
.mg-nav .mg-nav-inner {
  max-width: 1100px; margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: nowrap;
  position: relative;
}

/* Brand: the homepage logomark and wordmark, same geometry. */
.mg-nav .mg-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex: 0 0 auto; }
.mg-nav .mg-logomark {
  width: 38px; height: 38px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 2px;
  background: var(--ink); padding: 2px; border-radius: 6px; box-shadow: 0 1px 0 rgba(0,0,0,.1);
}
.mg-nav .mg-logomark span {
  background: var(--paper); display: grid; place-items: center;
  font-family: "Instrument Serif", serif; font-weight: 400; font-size: 13px; line-height: 1; overflow: hidden; color: var(--ink); border-radius: 1px;
}
.mg-nav .mg-logomark span.dot { background: var(--ink);
  /* custom.css has a site-wide .dot (the result modal's dartboard) that is
     position: absolute at the top centre; without this reset the logomark's
     square floated to the top middle of every signed-in page. */
  position: static; width: auto; height: auto; top: auto; left: auto; transform: none; z-index: auto; border-radius: 1px; }
.mg-nav .mg-logomark span.accent { background: var(--accent); color: var(--ink); }
.mg-nav .mg-brand-text { display: flex; flex-direction: column; line-height: 1; }
.mg-nav .mg-brand-name { font-family: "Instrument Serif", serif; font-size: 22px; letter-spacing: -0.01em; }
.mg-nav .mg-brand-tag { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 3px; }

/* Links. */
.mg-nav .mg-nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.mg-nav .mg-nav-link {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--ink-soft); font-size: 14px; font-weight: 500; text-decoration: none;
  padding: 8px 12px; border-radius: 999px; border: 1px solid transparent;
  transition: color .15s, background .15s, border-color .15s; white-space: nowrap;
}
.mg-nav .mg-nav-link:hover, .mg-nav .mg-nav-link:focus-visible { color: var(--ink); background: var(--paper-2); }
.mg-nav .mg-nav-link[aria-current="page"] { color: var(--ink); background: #fff; border-color: var(--rule); }
.mg-nav .mg-nav-link .mg-nav-lock {
  font: 500 9px "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-mute); border: 1px solid var(--rule); border-radius: 999px; padding: 2px 6px; background: #fff;
}
.mg-nav .mg-nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: #fff; padding: 9px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: transform .15s, background .15s;
}
.mg-nav .mg-nav-cta:hover { transform: translateY(-1px); background: var(--ink-2); color: #fff; }
.mg-nav .mg-nav-cta .mg-avatar {
  width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--ink);
  display: grid; place-items: center; font: 600 11px "Instrument Sans", sans-serif; text-transform: uppercase;
}
.mg-nav a:focus-visible, .mg-nav button:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }

/* Dropdowns: cards. Bootstrap positions and toggles them. */
.mg-nav .mg-nav-link.dropdown-toggle::after { margin-left: 2px; opacity: .55; transition: transform .3s cubic-bezier(.22, 1.25, .36, 1); }
.mg-nav .mg-nav-link.dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.mg-nav .dropdown-menu {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow-2);
  padding: 6px; min-width: 260px; width: max-content; margin-top: 8px; font-family: inherit;   /* wide enough for its longest item ("Amazon · India & elsewhere") */
}
.mg-nav .dropdown-item {
  display: flex; align-items: center; gap: 10px; border-radius: 10px; padding: 9px 12px;
  color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.3; background: none;
}
.mg-nav .dropdown-item .mdi { color: var(--accent-ink); font-size: 17px; width: 20px; text-align: center; }
.mg-nav .dropdown-item:hover, .mg-nav .dropdown-item:focus { background: var(--paper-2); color: var(--ink); }
.mg-nav .dropdown-item small { display: block; font: 500 10px "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-mute); margin-top: 2px; }
.mg-nav .dropdown-divider { border-color: var(--rule); margin: 6px 4px; }
.mg-nav .dropdown-header { font: 500 10px "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-mute); padding: 8px 12px 4px; }

/* Motion: a menu swings open with a little overshoot and its entries
   follow one after another; the burger turns; all off under reduced motion. */
@keyframes mg-nav-menu-in { from { opacity: 0; transform: translateY(-14px) scale(.96); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
/* The More menu is placed by Popper with an inline transform, so it may only fade; the mobile panel above is CSS-positioned and may move. */
@keyframes mg-nav-menu-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mg-nav-item-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes mg-nav-panel-item-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.mg-nav .dropdown-menu.show { animation: mg-nav-menu-fade .22s ease-out backwards; }
.mg-nav .dropdown-menu.show > li { animation: mg-nav-item-in .3s ease-out both; }
.mg-nav .dropdown-menu.show > li:nth-child(1) { animation-delay: .05s; }
.mg-nav .dropdown-menu.show > li:nth-child(2) { animation-delay: .10s; }
.mg-nav .dropdown-menu.show > li:nth-child(3) { animation-delay: .15s; }
.mg-nav .dropdown-menu.show > li:nth-child(4) { animation-delay: .20s; }
.mg-nav .dropdown-menu.show > li:nth-child(5) { animation-delay: .25s; }
.mg-nav .dropdown-menu.show > li:nth-child(n+6) { animation-delay: .30s; }

/* Burger: inline SVG, hidden on desktop by Bootstrap's navbar-expand-xl. */
.mg-nav .mg-nav-burger {
  background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: 8px 11px; cursor: pointer; color: var(--ink);
  line-height: 1; transition: background .15s, border-color .15s, color .15s; box-shadow: none;
}
.mg-nav .mg-nav-burger svg { width: 22px; height: 22px; display: block; transition: transform .35s cubic-bezier(.22, 1.25, .36, 1); }
.mg-nav .mg-nav-burger[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.mg-nav .mg-nav-burger[aria-expanded="true"] svg { transform: rotate(90deg); }
.mg-nav .mg-nav-label { display: none; }

/* Below xl: the panel is a card under the bar, entries numbered like
   crossword cells, the Profile pill full width at the bottom. */
@media (max-width: 1199.98px) {
  .mg-nav .mg-nav-links {
    position: absolute; top: calc(100% + 8px); left: 20px; right: 20px; z-index: 60;
    background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; padding: 6px 8px 8px;
    box-shadow: var(--shadow-2); counter-reset: navitem;
  }
  .mg-nav .mg-nav-links.show { animation: mg-nav-menu-in .32s cubic-bezier(.22, 1.25, .36, 1) both; transform-origin: top right; }
  .mg-nav .mg-nav-label {
    display: block; font-family: "JetBrains Mono", monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .12em;
    color: var(--ink-mute); padding: 8px 10px 10px;
  }
  .mg-nav .mg-nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .mg-nav .mg-nav-list > li { animation: mg-nav-panel-item-in .38s cubic-bezier(.22, 1.1, .36, 1) both; }
  .mg-nav .mg-nav-list > li:nth-child(1) { animation-delay: .04s; }
  .mg-nav .mg-nav-list > li:nth-child(2) { animation-delay: .10s; }
  .mg-nav .mg-nav-list > li:nth-child(3) { animation-delay: .16s; }
  .mg-nav .mg-nav-list > li:nth-child(4) { animation-delay: .22s; }
  .mg-nav .mg-nav-list > li:nth-child(5) { animation-delay: .28s; }
  .mg-nav .mg-nav-list > li:nth-child(6) { animation-delay: .34s; }
  .mg-nav .mg-nav-list > li:nth-child(7) { animation-delay: .40s; }
  .mg-nav .mg-nav-list > li:nth-child(n+8) { animation-delay: .46s; }
  .mg-nav .mg-nav-link {
    display: flex; gap: 12px; padding: 12px 10px; font-size: 15px; border-radius: 0; border: 0;
    border-bottom: 1px solid var(--rule);
  }
  .mg-nav .mg-nav-link[aria-current="page"] { background: none; }
  .mg-nav .mg-nav-link[aria-current="page"]::before { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .mg-nav .mg-nav-link:not(.dropdown-toggle)::before, .mg-nav .mg-nav-link.dropdown-toggle::before {
    counter-increment: navitem; content: counter(navitem);
    flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center;
    background: #fff; border: 1px solid var(--rule); border-radius: 4px;
    font-family: "JetBrains Mono", monospace; font-size: 9px; line-height: 1; color: var(--ink-mute);
  }
  .mg-nav .mg-nav-link.dropdown-toggle::after { margin-left: auto; }
  .mg-nav .mg-nav-list > li:last-of-type > .mg-nav-link { border-bottom: 0; }
  .mg-nav .mg-nav-link:hover { background: var(--paper-2); }
  .mg-nav .dropdown-menu { position: static !important; transform: none !important; box-shadow: none; border: 0; border-radius: 0;
    background: #fff; margin: 0 0 6px; padding: 4px 0 4px 32px; width: auto; min-width: 0; }
  .mg-nav .dropdown-menu.show { animation: none; }
  .mg-nav .dropdown-menu::before { display: none; }   /* no hover gap to bridge inside the panel */
  .mg-nav .mg-nav-cta { margin: 10px 2px 4px; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .mg-nav .dropdown-menu.show, .mg-nav .dropdown-menu.show > li, .mg-nav .mg-nav-links.show, .mg-nav .mg-nav-list > li { animation: none; }
  .mg-nav .mg-nav-burger svg, .mg-nav .mg-nav-link.dropdown-toggle::after, .mg-nav .mg-nav-cta { transition: none; }
}