/* The full menu: one hamburger on the right of the bar, and a drawer under it holding every screen and every
   setting. It borrows the bar's colours so it reads as part of the header in both skins.
   Opening it steps the page back in two stages, which is what gives the drawer its depth: the scrim blurs the page
   only a little, so it still reads as the page, and the drawer's own blur lands on top of that — so the ground
   behind the glass is far softer than the ground beside it. Matte: an even veil, a hairline edge, no gloss, no
   shadow. Keep the two apart; one blur for both flattens the drawer onto the page. */
.full-menu-button { display: inline-grid; place-items: center; }
.full-menu-bars { display: grid; gap: 3px; width: 15px; }
.full-menu-bars i { display: block; height: 1.5px; background: currentColor; border-radius: 1px; }
.full-menu-button[aria-expanded="true"] { background: rgba(255,255,255,.12); }

/* The scrim sits under the bar (z-index 30) and over everything else, so the header the drawer hangs from stays
   crisp while the page behind it goes soft. It is painted from the body class, which open() and close() already set. */
.full-menu-scrim { position: fixed; inset: 0; z-index: 29; background: rgba(4,13,22,.22); -webkit-backdrop-filter: blur(8px) saturate(94%); backdrop-filter: blur(8px) saturate(94%); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility .3s; }
.full-menu-scrim.on, body.full-menu-open .full-menu-scrim { opacity: 1; visibility: visible; pointer-events: auto; }

/* The board's map draws its own layers, some with z-indexes of their own; isolating the shell keeps them inside it so
   they cannot paint over the scrim and stay sharp while the rest of the page softens. */
.map-shell, .decision-viewport { isolation: isolate; }

.full-menu { position: absolute; top: 100%; right: 0; left: 0; z-index: 60; max-height: min(78vh, 720px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background: rgba(7,21,34,.78); -webkit-backdrop-filter: blur(32px) saturate(115%); backdrop-filter: blur(32px) saturate(115%); border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.08); border-radius: 0 0 14px 14px; box-shadow: none; color: #e6eef2; }
.full-menu[hidden] { display: none; }
.full-menu:not([hidden]) { animation: full-menu-in .26s cubic-bezier(.22,.61,.36,1) both; }
@keyframes full-menu-in { from { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .full-menu:not([hidden]) { animation: none; } .full-menu-scrim { transition: none; } .full-menu-pages a, .full-menu-choices button { transition: none; } }
.full-menu-inner { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; padding: 26px 32px 32px; max-width: 1400px; margin: 0 auto; }
.full-menu-screens { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px 26px; align-content: start; }
.full-menu-branch h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.full-menu-pages { display: grid; gap: 2px; }
.full-menu-pages a { display: grid; gap: 2px; padding: 7px 9px; border-radius: 7px; color: inherit; text-decoration: none; transition: background-color .12s ease, box-shadow .12s ease; }
.full-menu-pages a:hover, .full-menu-pages a:focus-visible { background: rgba(158,209,210,.12); box-shadow: inset 0 0 0 1px rgba(158,209,210,.8); outline: none; }
.full-menu-pages strong { font-size: 13px; font-weight: 500; }
.full-menu-pages span { font-size: 11px; line-height: 1.5; color: #9dafbb; }

.full-menu-settings { display: grid; gap: 18px; align-content: start; border-left: 1px solid rgba(255,255,255,.1); padding-left: 26px; }
.full-menu-settings h3 { margin: 0 0 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #9dafbb; font-weight: 500; }
.full-menu-choices { display: grid; gap: 2px; }
.full-menu-choices button { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; color: inherit; text-align: left; transition: background-color .12s ease, box-shadow .12s ease; }
.full-menu-choices button:hover, .full-menu-choices button:focus-visible { background: rgba(158,209,210,.12); box-shadow: inset 0 0 0 1px rgba(158,209,210,.8); outline: none; }
.full-menu-choices button[aria-checked="true"] { background: rgba(158,209,210,.22); }
.full-menu-choices strong { display: block; font-size: 13px; font-weight: 500; }
.full-menu-choices small { display: block; margin-top: 2px; font-size: 11px; color: #9dafbb; }
.full-menu-note { margin: 8px 0 0; font-size: 11px; line-height: 1.6; color: #8ea1ad; }
.full-menu-row { display: flex; align-items: center; gap: 12px; }
.full-menu-row-label { font-size: 13px; }

@media (max-width: 900px) {
  .full-menu-inner { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 20px; }
  .full-menu-settings { border-left: 0; border-top: 1px solid rgba(255,255,255,.1); padding-left: 0; padding-top: 20px; }
}

html[data-skin="ember"] .full-menu-scrim { background: rgba(6,6,7,.24); }
html[data-skin="ember"] .full-menu { background: rgba(28,29,31,.55); border-top: 1px solid var(--em-hair); border-bottom: 1px solid var(--em-hair); box-shadow: none; -webkit-backdrop-filter: blur(32px) saturate(115%); backdrop-filter: blur(32px) saturate(115%); color: var(--em-text); border-radius: 0 0 10px 10px; }
html[data-skin="ember"] .full-menu-settings { border-left-color: var(--em-hair); }
html[data-skin="ember"] .full-menu-pages a:hover, html[data-skin="ember"] .full-menu-pages a:focus-visible, html[data-skin="ember"] .full-menu-choices button:hover, html[data-skin="ember"] .full-menu-choices button:focus-visible { background: rgba(255,77,0,.10); box-shadow: inset 0 0 0 1px var(--em-brand); }
html[data-skin="ember"] .full-menu-choices button[aria-checked="true"] { background: rgba(255,77,0,.18); box-shadow: none; }
html[data-skin="ember"] .full-menu-choices button[aria-checked="true"]:hover, html[data-skin="ember"] .full-menu-choices button[aria-checked="true"]:focus-visible { background: rgba(255,77,0,.24); box-shadow: inset 0 0 0 1px var(--em-brand); }
html[data-skin="ember"] :is(.full-menu-pages span, .full-menu-choices small, .full-menu-settings h3, .full-menu-note) { color: var(--em-text2); font-family: var(--em-mono); letter-spacing: .04em; }