/* XM 4 — module mega menu.
   Built by /lib/theme/xm-4/js/mega-menu.js from the hidden nav.xm4-module-nav rendered by
   <xm:navbar>, opened from the module icon and title (.page-head .xm4-page-title).
   All classes are xm4-mega prefixed. Colors come from the xm-4 tokens, so dark mode is automatic. */
.xm4-mega, .xm4-mega *, .xm4-mega *::before, .xm4-mega *::after {box-sizing:border-box;}
.xm4-mega-backdrop {position:fixed; inset:0; z-index:1048; margin:0; padding:0; border:0; background:#07122740; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .16s ease;}
.xm4-mega-backdrop.xm4-mega-show {opacity:1; pointer-events:auto;}
.xm4-mega {position:fixed; z-index:1049; display:flex; flex-direction:column; width:min(1180px,calc(100vw - 28px)); max-height:min(760px,calc(100dvh - 90px)); background:var(--xm4-surface); color:var(--xm4-text); border:1px solid var(--xm4-line); border-radius:16px; box-shadow:var(--xm4-shadow-lg); font:400 .8125rem/1.45 var(--bs-body-font-family); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px) scale(.985); transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s; overflow:hidden;}
/* a closed panel must never sit invisibly over the page (it would swallow clicks) */
.xm4-mega.xm4-mega-show {opacity:1; visibility:visible; pointer-events:auto; transform:none; transition-delay:0s;}
/* header: module identity, search, close */
.xm4-mega-head {display:flex; align-items:center; gap:12px; flex:none; padding:12px 14px; border-bottom:1px solid var(--xm4-line-2);}
.xm4-mega-title {display:flex; align-items:center; gap:10px; flex:none; min-width:0; max-width:34%;}
.xm4-mega-title-mark {flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:var(--xm4-accent); color:#fff; font-size:15px; box-shadow:0 8px 20px -12px color-mix(in srgb,var(--xm4-accent) 85%,transparent);}
.xm4-mega-title b {display:block; font-size:.9375rem; font-weight:700; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.xm4-mega-title small {display:block; margin-top:1px; font-size:.625rem; font-weight:700; color:var(--xm4-faint); letter-spacing:.1em; text-transform:uppercase;}
.xm4-mega-search {position:relative; flex:1 1 auto; min-width:120px;}
.xm4-mega-search > i {position:absolute; top:50%; left:13px; transform:translateY(-50%); font-size:14px; color:var(--xm4-faint); pointer-events:none;}
input.xm4-mega-input {width:100%; height:40px; margin:0; padding:0 36px 0 38px!important; font:400 .875rem/1.4 var(--bs-body-font-family); color:var(--xm4-text); background:var(--xm4-soft); border:1px solid var(--xm4-line); border-radius:11px; outline:none; box-shadow:none; transition:border-color .15s,background .15s,box-shadow .15s;}
input.xm4-mega-input:focus {border-color:var(--xm4-accent); background:var(--xm4-surface); box-shadow:0 0 0 3px color-mix(in srgb,var(--xm4-accent) 14%,transparent);}
input.xm4-mega-input::placeholder {color:var(--xm4-muted);}
.xm4-mega-search-clear {position:absolute; top:50%; right:8px; transform:translateY(-50%); display:none; width:24px; height:24px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--xm4-muted); font-size:13px; line-height:24px; cursor:pointer;}
.xm4-mega-search-clear:hover {background:var(--xm4-line-2); color:var(--xm4-text);}
.xm4-mega-searching .xm4-mega-search-clear {display:block;}
.xm4-mega-close {flex:none; width:36px; height:36px; padding:0; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--xm4-muted); font-size:16px; cursor:pointer; transition:background .15s,color .15s;}
.xm4-mega-close:hover {background:var(--xm4-soft); color:var(--xm4-text);}
/* body */
.xm4-mega-body {display:flex; align-items:stretch; flex:1 1 auto; min-height:0;}
.xm4-mega-main {flex:1 1 auto; min-width:0; padding:12px 14px 14px; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:thin;}
.xm4-mega-quick {display:flex; flex-wrap:wrap; gap:7px; margin:0 0 12px;}
.xm4-mega-quick:empty {display:none;}
a.xm4-mega-chip {display:inline-flex; align-items:center; gap:7px; padding:7px 12px; font:600 .75rem/1.2 var(--bs-body-font-family); color:var(--xm4-ink-2); background:var(--xm4-soft); border:1px solid var(--xm4-line); border-radius:999px; text-decoration:none; white-space:nowrap; transition:border-color .15s,background .15s,color .15s;}
a.xm4-mega-chip i {font-size:11px; color:var(--xm4-faint);}
a.xm4-mega-chip:hover, a.xm4-mega-chip:focus-visible {background:var(--xm4-tint); border-color:color-mix(in srgb,var(--xm4-accent) 45%,transparent); color:var(--xm4-accent); text-decoration:none;}
a.xm4-mega-chip:hover i {color:var(--xm4-accent);}
a.xm4-mega-chip.is-active {background:var(--xm4-tint); border-color:var(--xm4-accent); color:var(--xm4-accent);}
a.xm4-mega-chip.is-pin i.fa-star {color:#f5a623;}
.xm4-mega a.xm4-mega-icon-only {display:inline-flex; align-items:center; justify-content:center; min-width:40px; min-height:40px;}
.xm4-mega a.xm4-mega-icon-only > i {font-size:14px;}
.xm4-mega a.xm4-mega-card-title.xm4-mega-icon-only {flex:none;}
/* bento grid: masonry columns pack cards without row gaps */
.xm4-mega-grid {column-width:258px; column-gap:10px;}
.xm4-mega-card {display:inline-block; width:100%; vertical-align:top; margin:0 0 10px; break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid; min-width:0; padding:10px 10px 8px; background:var(--xm4-surface); border:1px solid var(--xm4-line); border-radius:12px; transition:border-color .15s,box-shadow .15s;}
.xm4-mega-card:hover {border-color:var(--xm4-faint); box-shadow:var(--xm4-shadow);}
.xm4-mega-card.is-active-card {border-color:color-mix(in srgb,var(--xm4-accent) 45%,transparent); box-shadow:0 0 0 1px color-mix(in srgb,var(--xm4-accent) 18%,transparent);}
.xm4-mega-card-head {display:flex; align-items:center; gap:8px; margin:0 0 7px;}
.xm4-mega-card-icon {flex:none; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; background:var(--xm4-tint); color:var(--xm4-accent); font-size:13px;}
.xm4-mega-card.is-recent-card .xm4-mega-card-icon, .xm4-mega-card.is-pinned-card .xm4-mega-card-icon {background:var(--xm4-soft); color:var(--xm4-muted);}
.xm4-mega-card.is-pinned-card .xm4-mega-card-icon {color:#f5a623;}
.xm4-mega-card-title {flex:1 1 auto; min-width:0; font:700 .6875rem/1.3 var(--bs-body-font-family); letter-spacing:.07em; text-transform:uppercase; color:var(--xm4-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:none;}
a.xm4-mega-card-title:hover {color:var(--xm4-accent); text-decoration:none;}
.xm4-mega-badge {flex:none; display:inline-block; min-width:20px; padding:2px 7px; font:700 .6875rem/1.3 var(--bs-body-font-family); text-align:center; color:var(--xm4-accent); background:var(--xm4-tint); border-radius:999px;}
.xm4-mega-badge.is-danger {color:#fff; background:var(--xm4-danger);}
.xm4-mega-list {list-style:none; margin:0; padding:0;}
.xm4-mega-list > li {position:relative; min-width:0;}
a.xm4-mega-link {position:relative; display:flex; align-items:center; gap:8px; padding:6px 26px 6px 8px; font:500 .8125rem/1.3 var(--bs-body-font-family); color:var(--xm4-ink-2); border-radius:8px; text-decoration:none; transition:background .12s,color .12s;}
a.xm4-mega-link .xm4-mega-time {flex:none; margin-left:auto; font-size:.65rem; color:var(--xm4-faint);}
a.xm4-mega-link > i {flex:0 0 16px; font-size:11.5px; color:var(--xm4-faint); text-align:center;}
a.xm4-mega-link > .xm4-mega-link-text {flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
a.xm4-mega-link > .xm4-mega-link-text strong {margin-left:6px; color:var(--xm4-muted); font-weight:600;}
a.xm4-mega-link > .xm4-mega-badge {margin-left:auto;}
a.xm4-mega-link:hover, a.xm4-mega-link:focus-visible {background:var(--xm4-tint); color:var(--xm4-accent); text-decoration:none;}
a.xm4-mega-link:hover > i {color:var(--xm4-accent);}
a.xm4-mega-link.is-active {background:var(--xm4-tint); color:var(--xm4-accent); font-weight:600;}
a.xm4-mega-link.is-active::before {content:""; position:absolute; top:6px; bottom:6px; left:0; width:3px; border-radius:3px; background:var(--xm4-accent);}
a.xm4-mega-link mark, a.xm4-mega-chip mark, .xm4-mega-card-title mark {padding:0; background:color-mix(in srgb,#f5a623 35%,transparent); color:inherit; border-radius:2px;}
button.xm4-mega-pin {position:absolute; top:50%; right:4px; transform:translateY(-50%); width:22px; height:22px; padding:0; border:0; border-radius:6px; background:transparent; color:var(--xm4-faint); font-size:11px; line-height:22px; cursor:pointer; opacity:0; transition:opacity .12s,color .12s;}
.xm4-mega-list > li:hover button.xm4-mega-pin, button.xm4-mega-pin:focus-visible, button.xm4-mega-pin.is-on {opacity:1;}
button.xm4-mega-pin:hover, button.xm4-mega-pin.is-on {color:#f5a623;}
.xm4-mega-subgroup {margin:4px 0 2px; padding:5px 0 0 7px; border-top:1px dashed var(--xm4-line-2);}
.xm4-mega-subgroup-label {display:flex; align-items:center; gap:6px; margin:2px 0; font:700 .625rem/1.3 var(--bs-body-font-family); letter-spacing:.08em; text-transform:uppercase; color:var(--xm4-muted); text-decoration:none;}
a.xm4-mega-subgroup-label:hover {color:var(--xm4-accent);}
.xm4-mega-subgroup .xm4-mega-list {padding-left:2px;}
/* footer */
.xm4-mega-foot {display:flex; align-items:center; justify-content:space-between; gap:10px; flex:none; padding:8px 14px; border-top:1px solid var(--xm4-line-2); background:var(--xm4-soft); font:400 .6875rem/1.4 var(--bs-body-font-family); color:var(--xm4-muted);}
.xm4-mega-foot .xm4-mega-hints {display:flex; flex-wrap:wrap; gap:12px;}
.xm4-mega-foot kbd {display:inline-block; min-width:17px; margin:0 1px; padding:1px 5px; font:600 .625rem/1.4 var(--bs-body-font-family); color:var(--xm4-ink-2); background:var(--xm4-surface); border:1px solid var(--xm4-line); border-bottom-width:2px; border-radius:4px; box-shadow:none; text-align:center;}
.xm4-mega-empty {display:none; padding:26px 10px; text-align:center; color:var(--xm4-muted); font:400 .875rem/1.4 var(--bs-body-font-family);}
.xm4-mega-empty i {display:block; margin:0 auto 8px; font-size:22px; color:var(--xm4-faint);}
.xm4-mega-no-results .xm4-mega-empty {display:block;}
.xm4-mega-no-results .xm4-mega-grid, .xm4-mega-no-results .xm4-mega-quick {display:none;}
.xm4-mega .xm4-mega-hide {display:none!important;}
.xm4-mega a:focus-visible, .xm4-mega button:focus-visible, .xm4-mega input:focus-visible {outline:2px solid var(--xm4-accent); outline-offset:1px;}
body.xm4-mega-lock {overflow:hidden;}
@media(max-width:767.98px) {
  .xm4-mega {top:0!important; left:0!important; right:0!important; bottom:0!important; width:100vw!important; max-height:none; height:100%; border:0; border-radius:0;}
  .xm4-mega-title {max-width:none;}
  .xm4-mega-title b {font-size:.875rem;}
  .xm4-mega-head {flex-wrap:wrap;}
  .xm4-mega-search {order:3; flex-basis:100%;}
  .xm4-mega-close {margin-left:auto;}
  .xm4-mega-body {flex-direction:column; overflow-y:auto;}
  .xm4-mega-main {flex:0 0 auto; overflow:visible;}
  .xm4-mega-grid {column-width:232px;}
  .xm4-mega-foot .xm4-mega-hints {display:none;}
  button.xm4-mega-pin {opacity:1;}
}
@media(prefers-reduced-motion:reduce) {.xm4-mega, .xm4-mega-backdrop {transition:none;}}
@media print {.xm4-mega, .xm4-mega-backdrop {display:none!important;}}
