/* Option 04 — Explore More drawer with a requirement brief (scoped: .xo4)
 * A right-side overlay drawer at every width. It is a modal <dialog> in the top layer, so it covers the page without
 * changing the page's width, layout or scroll position; o4.js makes the page inert and stops it scrolling (XM.lock). */
dialog.xo4 {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto; height: 100%; z-index: 1000;
    width: min(max(600px, 38vw), calc(100% - 72px));          /* a strip always stays free on the left for the close button */
    transition: width .2s ease;
}
dialog.xo4.is-wide { width: min(960px, max(860px, 58vw), calc(100% - 72px)); }
dialog.xo4::backdrop { background: rgba(2, 24, 28, .42); }  /* the page stays visible behind, clearly inactive */
dialog.xo4[open] { animation: xo4-in .32s cubic-bezier(.22, .8, .24, 1); }
dialog.xo4[open]::backdrop { animation: xo4-fade .32s ease; }
@keyframes xo4-in { from { transform: translateX(calc(100% + 80px)); } }   /* from the right, close button included */
@keyframes xo4-fade { from { opacity: 0; } }
dialog.xo4.is-instant, dialog.xo4.is-instant *, dialog.xo4.is-instant::backdrop { transition: none !important; animation: none !important; }   /* deep links: no animation on load */

/* close button: outside the drawer, beside its upper-left edge, clear of the browser's top area */
.xo4__x { position: absolute; top: 20px; left: -60px; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #122b30; box-shadow: 0 4px 16px rgba(0,0,0,.28); cursor: pointer; }
.xo4__x .xm-i { width: 22px; height: 22px; }
.xo4__x:hover { background: #eef5f6; color: #004a54; }
.xo4__x:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 3px #fff, 0 0 0 6px #006b7a; }

/* the toast shows over the drawer, above the requirement bar */
dialog.xo4 .xm-toast { left: auto; right: 16px; bottom: 84px; max-width: min(520px, calc(100% - 104px)); transform: translateY(20px); }
dialog.xo4 .xm-toast.is-on { transform: none; }

.xo4__panel { height: 100%; display: flex; flex-direction: column; background: #fff; border-left: 1px solid #d9e5e7; box-shadow: -16px 0 44px rgba(0,43,50,.2); font-family: "Nunito", sans-serif; }
.xo4__head { border-bottom: 1px solid #e3ecee; }
.xo4__row { display: flex; align-items: center; gap: 4px; padding: 10px 8px 6px 16px; min-height: 60px; }
.xo4__ttl { flex: 1; min-width: 0; padding-left: 2px; }
.xo4__ttl h2 { margin: 0; font: 700 18px/1.2 "Poppins", sans-serif; color: #122b30; outline: none; }
.xo4__ttl span { display: block; font-size: 13px; color: #546a6e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xo4__groups { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 0 8px 8px; }
.xo4__groups button { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; min-height: 56px; padding: 6px 2px; border: 0; border-radius: 8px; background: none; cursor: pointer; color: #546a6e; font: 700 12.5px "Nunito", sans-serif; }
.xo4__groups button .xm-i { width: 22px; height: 22px; }
.xo4__groups button:hover { background: #f4f9fa; color: #122b30; }
.xo4__groups button[aria-selected="true"] { background: #e6f2f4; color: #004a54; box-shadow: inset 0 -3px 0 #006b7a; }
.xo4__groups button:focus-visible, .xo4__o:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #006b7a; }
.xo4__body { flex: 1; overflow: auto; overscroll-behavior: contain; }   /* the drawer scrolls on its own; the page behind does not */
.xo4__list { padding: 14px 14px 20px; }
.xo4__gl { margin: 0 4px 12px; font-size: 13.5px; color: #546a6e; }
.xo4__gl b { display: block; font: 700 16px "Poppins", sans-serif; color: #122b30; margin-bottom: 2px; }
.xo4__list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.xo4__o { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; padding: 12px 12px; border: 1px solid #d9e5e7; border-radius: 10px; background: #fff; cursor: pointer; color: #122b30; font-family: inherit; min-height: 60px; }
.xo4__o:hover { border-color: #006b7a; background: #f8fbfb; }
.xo4__o > span { flex: 1; }
.xo4__o b { display: block; font: 600 15px "Poppins", sans-serif; }
.xo4__o small { display: block; font-size: 13px; color: #546a6e; margin-top: 2px; }
.xo4__o .xm-i { color: #006b7a; }
.xo4__content { padding: 18px 20px 24px; }
.xo4__content .xm-v__title { font-size: 22px; }
.xo4__brief { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid #d9e5e7; background: #f8fbfb; }
.xo4__bi { flex: 1; min-width: 0; display: flex; gap: 10px; align-items: center; }
.xo4__bi > .xm-i { width: 34px; height: 34px; padding: 7px; border-radius: 8px; background: #e6f2f4; color: #006b7a; flex: 0 0 auto; }
.xo4__bi b { display: block; font: 600 14px "Poppins", sans-serif; }
.xo4__bi span { display: block; font-size: 12.5px; color: #546a6e; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.xo4__brief .xm-shell-btn { flex: 0 0 auto; }
.xo4.is-quote .xo4__brief { display: none; }

/* phones: the same drawer, nearly full width; the strip on the left holds the close button */
@media (max-width: 767px) {
    dialog.xo4, dialog.xo4.is-wide { width: calc(100% - 60px); }
    .xo4__x { top: 14px; left: -52px; width: 44px; height: 44px; }
    .xo4__wide { display: none; }
    .xo4__row { padding: 8px 8px 6px 14px; min-height: 56px; }
    .xo4__groups { gap: 0; padding: 0 4px 8px; }
    .xo4__groups button { font-size: clamp(10px, 3.1vw, 12px); padding: 6px 0; }
    .xo4__list { padding: 12px 10px 18px; }
    .xo4__content { padding: 14px 14px 20px; }
    .xo4__brief { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
    .xo4__bi > .xm-i { display: none; }
    dialog.xo4 .xm-toast { right: 10px; bottom: 76px; max-width: calc(100% - 80px); }
}
@media (prefers-reduced-motion: reduce) {
    dialog.xo4, dialog.xo4.is-wide { transition: none !important; }
    dialog.xo4[open], dialog.xo4[open]::backdrop { animation: none !important; }
}
/* Windows high contrast: selected tab and focus stay visible */
@media (forced-colors: active) {
    .xo4__groups button[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
    .xo4__x { border: 2px solid ButtonText; }
    .xo4 :focus-visible, .xm-trigger:focus-visible { outline: 2px solid Highlight !important; outline-offset: 2px; }
}

/* printing the landing page while the drawer is open */
@media print {
    dialog.xm-dlg, .xm-toast { display: none !important; }
    html.xm-lock { overflow: visible !important; }
}