/* 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); }
/* A thumb cannot easily reach the bar's 32px hamburger once the drawer has scrolled, so on a phone the drawer carries
   its own ✕ in its top-right corner and the hamburger itself gets a 44px target (user 2026-09-26). The selector
   outweighs the ember skin's icon-button size, which is loaded after this file. */
@media (max-width: 760px) {
  html .full-menu-button[aria-controls], html[data-skin] .full-menu-button[aria-controls] { width: 44px; height: 44px; }
}
.full-menu-close { display: none; position: sticky; top: 0; z-index: 2; width: 44px; height: 44px; margin: 8px 10px -18px auto; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: rgba(7,21,34,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: inherit; font: inherit; font-size: 17px; line-height: 1; cursor: pointer; }
.full-menu-close:hover { background: rgba(255,255,255,.12); }
@media (max-width: 900px) { .full-menu-close { display: grid; } }

/* 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; }

/* As in WSTiger: each setting is one short line, the name beside its switch. */
.full-menu-settings { gap: 8px; }
.full-menu-settings > section { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 10px; }
.full-menu-settings h3 { margin: 0; }
.full-menu-choices { display: flex; gap: 2px; padding: 3px; border: 1px solid rgba(255,255,255,.14); border-radius: 9999px; }
.full-menu-choices button { flex: 1 1 auto; min-width: 0; min-height: 30px; padding: 5px 8px; border-radius: 9999px; text-align: center; }
.full-menu-choices strong { font-size: 12px; white-space: nowrap; }
html[data-skin="ember"] .full-menu-choices { border-color: var(--em-hair); }
@media (max-width: 900px) { .full-menu-settings > section { grid-template-columns: 62px minmax(0, 1fr); gap: 8px; } }

/* One RISCON account for the nine sites. Drawn in the menu's own ink, with the family's one owner accent. */
.riscon-account-row { flex-wrap: wrap; gap: 10px; font-size: 13px; }
.riscon-account-name { font-weight: 600; max-width: 12em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.riscon-account-role, .riscon-account-pending { padding: 1px 6px; border: 1px solid currentColor; border-radius: 999px; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.riscon-account-role { color: #ec7948; }
.riscon-account-pending { opacity: .6; }
.riscon-account-row a, .riscon-account-row button { display: inline-flex; align-items: center; min-height: 26px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: none; cursor: pointer; }
.riscon-account-strong { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.riscon-account-quiet { opacity: .68; }
.riscon-account-row a:hover, .riscon-account-row button:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.riscon-account-waiting { display: block; width: 92px; height: 9px; border-radius: 999px; background: currentColor; opacity: .12; }