/* Shared Mayvel portal menu. One look for every page, copied from the Learning Hub.
   Pages include this file last and put <header class="mv-topbar" data-mv-active="..."> in their markup. */
/* Own font name, so a page that embeds a different "Inter" can't change the menu */
@font-face{font-family:'MV Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

.mv-topbar{
  --mv-bar:rgba(7,9,10,.78); --mv-line:rgba(255,255,255,.09); --mv-txt:#f2f5ef; --mv-mut:#a9b2a7;
  --mv-lime:#c8ff37; --mv-lime-soft:rgba(200,255,55,.14); --mv-lime-edge:rgba(200,255,55,.3);
  --mv-hover:rgba(255,255,255,.06); --mv-pop:#0e1214; --mv-ease:cubic-bezier(.16,1,.3,1);
}
html[data-theme="light"] .mv-topbar{
  --mv-bar:rgba(244,243,236,.82); --mv-line:rgba(24,28,18,.14); --mv-txt:#171a15; --mv-mut:#555a50;
  --mv-lime:#55730a; --mv-lime-soft:rgba(85,115,10,.13); --mv-lime-edge:rgba(85,115,10,.3);
  --mv-hover:rgba(24,28,18,.065); --mv-pop:#fbfaf5;
}

header.mv-topbar{
  display:flex; align-items:center; gap:12px; height:62px; min-height:62px; box-sizing:border-box;
  padding:0 clamp(16px,3vw,34px); margin:0; flex:0 0 auto;
  background:var(--mv-bar); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--mv-line); color:var(--mv-txt);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-family:'MV Inter','Inter',system-ui,-apple-system,sans-serif; white-space:nowrap; z-index:60;
}
header.mv-topbar *{box-sizing:border-box}

/* brand */
header.mv-topbar a.mv-brand{display:inline-flex; align-items:center; gap:11px; flex:0 0 auto; text-decoration:none; color:var(--mv-txt); opacity:1}
header.mv-topbar a.mv-brand:hover{opacity:.85}
header.mv-topbar .mv-logo{height:26px; width:auto; display:block; color:var(--mv-txt)}
header.mv-topbar .mv-sub{color:var(--mv-mut); font:500 12.5px/1 'MV Inter','Inter',system-ui,sans-serif; letter-spacing:.06em; text-transform:uppercase;
  border-left:1px solid var(--mv-line); padding-left:11px}

/* right-hand controls keep to one line */
header.mv-topbar > :not(.mv-brand):not(.mv-menu){flex-shrink:0}
header.mv-topbar .theme-btn{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; margin:0;
  border:1px solid var(--mv-line); border-radius:10px; background:transparent; color:var(--mv-mut); cursor:pointer; transition:.2s var(--mv-ease)}
header.mv-topbar .theme-btn:hover{color:var(--mv-lime); border-color:var(--mv-lime)}

/* the menu: one button that opens a grouped dropdown */
header.mv-topbar .mv-menu{position:relative; display:block; flex:0 0 auto; margin:0 auto 0 14px}
header.mv-topbar .mv-menu-btn{display:inline-flex; align-items:center; gap:9px; height:40px; padding:0 13px 0 14px; border-radius:100px; cursor:pointer;
  border:1px solid var(--mv-lime-edge); background:var(--mv-lime-soft); color:var(--mv-lime); white-space:nowrap;
  font:600 13.5px/1 'MV Inter','Inter',system-ui,sans-serif; transition:.2s var(--mv-ease)}
header.mv-topbar .mv-menu-btn:hover,header.mv-topbar .mv-menu.open .mv-menu-btn{border-color:var(--mv-lime)}
header.mv-topbar .mv-menu-btn:focus-visible,header.mv-topbar .mv-pi:focus-visible{outline:2px solid var(--mv-lime); outline-offset:2px}
header.mv-topbar .mv-gi{width:16px; height:16px; flex:0 0 auto}
header.mv-topbar .mv-chev{width:14px; height:14px; flex:0 0 auto; transition:transform .2s var(--mv-ease)}
header.mv-topbar .mv-menu.open .mv-chev{transform:rotate(180deg)}
header.mv-topbar .mv-pop{position:absolute; top:calc(100% + 8px); left:0; width:330px; max-width:calc(100vw - 24px); max-height:calc(100vh - 84px); overflow:auto;
  padding:8px; border-radius:18px; display:none; flex-direction:column; gap:4px; background:var(--mv-pop); border:1px solid var(--mv-line);
  box-shadow:0 24px 56px rgba(0,0,0,.38); z-index:80}
header.mv-topbar .mv-menu.open .mv-pop{display:flex; animation:mvPop .16s var(--mv-ease)}
@keyframes mvPop{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:none}}
header.mv-topbar .mv-pg + .mv-pg{border-top:1px solid var(--mv-line); margin-top:4px; padding-top:4px}
header.mv-topbar .mv-ph{padding:8px 12px 4px; font:600 11px/1 'MV Inter','Inter',system-ui,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--mv-mut)}
header.mv-topbar a.mv-pi{display:flex; flex-direction:column; gap:3px; padding:10px 12px; border-radius:11px; text-decoration:none; color:var(--mv-txt); border:1px solid transparent}
header.mv-topbar a.mv-pi b{font:600 14px/1.2 'MV Inter','Inter',system-ui,sans-serif}
header.mv-topbar a.mv-pi small{font:400 12.5px/1.3 'MV Inter','Inter',system-ui,sans-serif; color:var(--mv-mut)}
header.mv-topbar a.mv-pi:hover{background:var(--mv-hover)}
header.mv-topbar a.mv-pi:hover b{color:var(--mv-lime)}
header.mv-topbar a.mv-pi.active{background:var(--mv-lime-soft); border-color:var(--mv-lime-edge)}
header.mv-topbar a.mv-pi.active b{color:var(--mv-lime)}

@media (max-width:1280px){ header.mv-topbar .mv-sub{display:none} }
@media (max-width:640px){
  /* the hub bar holds only what fits: theme, user and log out live in the menu on phones */
  header.mv-topbar .gprog .theme-btn, header.mv-topbar .gprog .userchip, header.mv-topbar .gprog .lab{display:none}
}
@media (max-width:560px){
  header.mv-topbar .mv-menu-lbl{display:none}
  header.mv-topbar .mv-menu-btn{padding:0 12px}
  header.mv-topbar .mv-menu{position:static}
  header.mv-topbar .mv-pop{position:fixed; left:12px; right:12px; top:70px; width:auto; max-width:none}
}

/* sun / moon swap for the theme button */
header.mv-topbar .theme-btn .moon{display:none}
html[data-theme="light"] header.mv-topbar .theme-btn .sun{display:none}
html[data-theme="light"] header.mv-topbar .theme-btn .moon{display:inline}

/* pages that float the menu over full-screen content (5 Big Ideas deck) */
header.mv-topbar.mv-fixed{position:fixed; top:0; left:0; right:0}

/* ---------- feedback icon (in the menu bar) ---------- */
header.mv-topbar .mv-fb-btn{display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:38px; height:38px; margin:0;
  border:1px solid var(--mv-line); border-radius:10px; background:transparent; color:var(--mv-mut); cursor:pointer; transition:.2s var(--mv-ease)}
header.mv-topbar .mv-fb-btn:hover{color:var(--mv-lime); border-color:var(--mv-lime)}
header.mv-topbar .mv-fb-btn:focus-visible{outline:2px solid var(--mv-lime); outline-offset:2px}

/* ---------- feedback form ---------- */
.mv-fb-overlay{
  --fb-bg:#0e1214; --fb-txt:#f2f5ef; --fb-mut:#a9b2a7; --fb-line:rgba(255,255,255,.14); --fb-field:rgba(255,255,255,.05);
  --fb-lime:#c8ff37; --fb-ink:#04140a; --fb-soft:rgba(200,255,55,.14); --fb-err:#ff7b7b;
  position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center; padding:16px;
  background:rgba(0,0,0,.6); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  font-family:'MV Inter','Inter',system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased;
}
html[data-theme="light"] .mv-fb-overlay{
  --fb-bg:#fbfaf5; --fb-txt:#171a15; --fb-mut:#555a50; --fb-line:rgba(24,28,18,.18); --fb-field:rgba(24,28,18,.045);
  --fb-lime:#55730a; --fb-ink:#f6f6ef; --fb-soft:rgba(85,115,10,.13); --fb-err:#b42318; background:rgba(20,22,16,.45);
}
.mv-fb-overlay *{box-sizing:border-box}
.mv-fb{position:relative; width:min(520px,100%); max-height:calc(100vh - 32px); overflow:auto; background:var(--fb-bg); color:var(--fb-txt);
  border:1px solid var(--fb-line); border-radius:20px; padding:28px 28px 24px; box-shadow:0 30px 80px rgba(0,0,0,.45)}
.mv-fb h2{margin:0 36px 6px 0; font-size:22px; font-weight:700; letter-spacing:-.02em; line-height:1.2}
.mv-fb-sub{margin:0 0 18px; color:var(--fb-mut); font-size:14px; line-height:1.5}
.mv-fb-x{position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:10px; border:1px solid var(--fb-line); background:transparent;
  color:var(--fb-mut); font-size:20px; line-height:1; cursor:pointer}
.mv-fb-x:hover{color:var(--fb-lime); border-color:var(--fb-lime)}
.mv-fb-fs{border:0; margin:0 0 16px; padding:0; min-width:0}
.mv-fb-fs legend,.mv-fb-lbl{display:block; padding:0; margin:0 0 8px; font-size:13px; font-weight:600; color:var(--fb-txt)}
.mv-fb-lbl span{font-weight:400; color:var(--fb-mut)}
.mv-fb-ri,.mv-fb-ci{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.mv-fb-rate{display:flex; align-items:center; gap:2px}
.mv-fb-star{font-size:34px; line-height:1; padding:2px 3px; cursor:pointer; color:var(--fb-line); transition:color .15s, transform .15s}
.mv-fb-star:hover{transform:scale(1.12)}
.mv-fb-star.on{color:var(--fb-lime)}
.mv-fb-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.mv-fb-rw{margin-left:10px; font-size:13px; color:var(--fb-mut)}
.mv-fb-cats{display:flex; flex-wrap:wrap; gap:8px}
.mv-fb-chip{font-size:13px; font-weight:600; padding:8px 14px; border-radius:100px; border:1px solid var(--fb-line); color:var(--fb-mut); cursor:pointer; transition:.15s}
.mv-fb-chip:hover{color:var(--fb-txt); border-color:var(--fb-mut)}
.mv-fb-ci:checked + .mv-fb-chip{background:var(--fb-soft); border-color:var(--fb-lime); color:var(--fb-lime)}
.mv-fb-ri:focus-visible + .mv-fb-star,.mv-fb-ci:focus-visible + .mv-fb-chip{outline:2px solid var(--fb-lime); outline-offset:2px; border-radius:8px}
.mv-fb-ta{display:block; width:100%; resize:vertical; min-height:96px; max-height:240px; padding:12px 14px; border-radius:12px; border:1px solid var(--fb-line);
  background:var(--fb-field); color:var(--fb-txt); font:400 14.5px/1.5 'MV Inter','Inter',system-ui,sans-serif; outline:none}
.mv-fb-ta:focus{border-color:var(--fb-lime); box-shadow:0 0 0 3px var(--fb-soft)}
.mv-fb-ta::placeholder{color:var(--fb-mut); opacity:.8}
.mv-fb-count{text-align:right; font-size:12px; color:var(--fb-mut); margin:4px 2px 0}
.mv-fb-who{margin:12px 0 0; font-size:12.5px; color:var(--fb-mut); line-height:1.5; overflow-wrap:anywhere}
.mv-fb-who b{color:var(--fb-txt); font-weight:600}
.mv-fb-err{margin:10px 0 0; min-height:18px; font-size:13px; color:var(--fb-err); line-height:1.4}
.mv-fb-send{display:inline-flex; align-items:center; justify-content:center; width:100%; margin-top:6px; padding:13px 18px; border-radius:12px; border:0; cursor:pointer;
  background:var(--fb-lime); color:var(--fb-ink); font:700 14.5px 'MV Inter','Inter',system-ui,sans-serif; text-decoration:none; transition:.2s}
.mv-fb-send:hover{transform:translateY(-1px); box-shadow:0 10px 26px -12px var(--fb-lime)}
.mv-fb-send:disabled{opacity:.6; cursor:default; transform:none; box-shadow:none}
.mv-fb-send:focus-visible{outline:2px solid var(--fb-txt); outline-offset:2px}
.mv-fb-note p{margin:0 0 16px; font-size:14.5px; line-height:1.55}
.mv-fb-done{text-align:center; padding:14px 0 4px}
.mv-fb-done h2{margin:0 0 6px}
.mv-fb-done p{margin:0 0 18px; color:var(--fb-mut); font-size:14.5px}
.mv-fb-tick{display:inline-grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--fb-soft); color:var(--fb-lime); font-size:26px; font-weight:700; margin-bottom:12px}
@media (max-width:480px){ .mv-fb{padding:24px 18px 20px; border-radius:16px} .mv-fb-star{font-size:30px} }
@media (prefers-reduced-motion:reduce){ .mv-fb-star,.mv-fb-send,.mv-fb-chip{transition:none} }


/* ---------- account block inside the menu ---------- */
header.mv-topbar .mv-acct{margin-top:8px; padding:12px 12px 4px; border-top:1px solid var(--mv-line)}
header.mv-topbar .mv-who{font:400 13px/1.4 'MV Inter','Inter',system-ui,sans-serif; color:var(--mv-mut); overflow-wrap:anywhere}
header.mv-topbar .mv-who b{color:var(--mv-txt, inherit); font-weight:600}
header.mv-topbar .mv-acts{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
header.mv-topbar .mv-act{flex:1 1 auto; min-height:40px; padding:0 14px; font:600 13.5px 'MV Inter','Inter',system-ui,sans-serif;
  color:inherit; background:transparent; border:1px solid var(--mv-line); border-radius:10px; cursor:pointer}
header.mv-topbar .mv-act:hover{border-color:var(--mv-lime); color:var(--mv-lime)}
header.mv-topbar .mv-act:focus-visible{outline:2px solid var(--mv-lime); outline-offset:2px}

/* ---------- accessibility basics for every page ---------- */
:where(a,button,input,select,textarea,summary,[role="button"],[tabindex]):focus-visible{outline:2px solid #b7fe02; outline-offset:2px}
html[data-theme="light"] :where(a,button,input,select,textarea,summary,[role="button"],[tabindex]):focus-visible{outline-color:#3d6b00}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}
@media (pointer:coarse){
  header.mv-topbar .mv-fb-btn{width:42px; height:42px}
}

header.mv-topbar a.mv-brand{min-height:44px; display:inline-flex; align-items:center}

/* breadcrumb */
.mv-crumbs{font-family:'MV Inter','Inter',system-ui,-apple-system,sans-serif;font-size:13.5px;line-height:1.3;
  padding:10px clamp(16px,3vw,34px);color:#a9b2a7;background:transparent;position:relative;z-index:5}
.mv-crumbs.mv-fixed{position:fixed;top:62px;left:0;right:0;z-index:55;background:rgba(7,9,10,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.mv-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px 0}
.mv-crumbs li{display:inline-flex;align-items:center;min-width:0}
.mv-crumbs li+li::before{content:'\203A';margin:0 9px;opacity:.55}
.mv-crumbs a{color:#c8ff37;text-decoration:none;padding:3px 0;border-bottom:1px solid transparent}
.mv-crumbs a:hover,.mv-crumbs a:focus-visible{border-bottom-color:currentColor;outline:none}
.mv-crumbs span{color:#f2f5ef;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60vw}
html[data-theme="light"] .mv-crumbs{color:#555a50}
html[data-theme="light"] .mv-crumbs.mv-fixed{background:rgba(244,243,236,.82)}
html[data-theme="light"] .mv-crumbs a{color:#55730a}
html[data-theme="light"] .mv-crumbs span{color:#171a15}
@media (max-width:560px){.mv-crumbs{font-size:12.5px;padding:8px 16px}.mv-crumbs li+li::before{margin:0 6px}}