/*
 * site-menu.css: the site menu behind the "M" button (see site-menu.js).
 *
 *   .cs-m     the square M button in the top-right corner of the page's
 *             first content element (.cs-anchor makes that element the
 *             positioning box when it was position: static).
 *   .cs-pop   the menu panel, fixed under the M, with every tab in one
 *             continuous flat list (.cs-item). It unrolls from the top
 *             right; with prefers-reduced-motion it just appears.
 *   .cs-gone  the page's own row of site links, hidden once the M exists.
 *
 * Pages can move the M with --cs-m-top / --cs-m-right / --cs-m-size on the
 * anchor element, or pick the anchor with data-cs-anchor.
 * Without JS nothing gets .cs-ready and the plain tab row shows.
 */

/* Before site-menu.js runs: hide the site-link rows so the page doesn't jump
   (only when scripting is on, so a no-JS visitor still sees the links). */
@media (scripting: enabled) {
    .cdc-menu-host:not(:has(.cs-ready)) { display: none !important; }
    .tabbar:not(.cs-ready):not(:has([data-tab])) { display: none !important; }
    .tabbar:not(.cs-ready) .tab-btn:not([data-tab]) { display: none !important; }
}
.cs-gone { display: none !important; }
.cs-anchor { position: relative; }
/* Room for the M when it would sit on the anchor's own text (site-menu.js). */
.cs-pad-top { padding-top: var(--cs-pad, 46px) !important; }
.cs-pad-right { padding-right: var(--cs-pad, 46px) !important; }
.cs-pad-right > .cs-m { top: calc(50% - var(--cs-m-size, 30px) / 2); }

/* ---- the M button ---- */
.cs-m {
    position: absolute !important; z-index: 40;
    top: var(--cs-m-top, 8px); right: var(--cs-m-right, 8px); left: auto; bottom: auto;
    box-sizing: border-box; display: flex !important; align-items: center; justify-content: center;
    width: var(--cs-m-size, 30px) !important; height: var(--cs-m-size, 30px) !important; min-width: 0 !important; max-width: none !important;
    margin: 0 !important; padding: 0 !important;
    border: 1px solid #000 !important; border-radius: 0 !important;
    background: #000 !important; color: #fff !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .7) !important;   /* readable on dark pages too */
    font: 700 14px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
    letter-spacing: 0 !important; text-indent: 0 !important; text-transform: none !important; text-decoration: none !important;
    cursor: pointer; transform: none; transition: background-color .15s ease, color .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.cs-m:hover, .cs-m[aria-expanded="true"] { background: #fff !important; color: #000 !important; }
.cs-m:focus-visible { outline: 2px solid #000 !important; outline-offset: 2px !important; }
.cs-m.cs-m-fixed { position: fixed !important; }

/* ---- the panel ---- */
.cs-pop {
    --ink: #000; --paper: #fff; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    position: fixed; z-index: 2147483000;
    top: var(--cs-top, 46px); right: var(--cs-right, 8px); left: auto; bottom: auto;
    box-sizing: border-box; width: min(280px, calc(100vw - 16px));
    max-height: calc(100vh - var(--cs-top, 46px) - 8px); max-height: calc(100dvh - var(--cs-top, 46px) - 8px);
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    margin: 0; padding: 0; text-align: left;
    background: var(--paper); color: var(--ink);
    border: 1px solid var(--ink); border-radius: 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 6px 6px 0 rgba(0, 0, 0, .18);
    font: 12px/1.3 var(--mono);
    -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
    /* closed */
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    clip-path: inset(0 0 100% 0);
    transition: opacity .18s ease, transform .2s ease, clip-path .22s ease, visibility 0s linear .22s;
}
.cs-pop.cs-open {
    opacity: 1; visibility: visible; transform: none; clip-path: inset(0 -12px -12px -12px);
    transition: opacity .18s ease, transform .2s ease, clip-path .26s cubic-bezier(.2, .7, .2, 1), visibility 0s;
}
.cs-pop[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
    .cs-pop, .cs-pop.cs-open, .cs-m { transition: none !important; }
    .cs-pop { transform: none; }
}
.cs-pop *, .cs-pop *::before, .cs-pop *::after { box-sizing: border-box; }
.cs-pop .cs-list { display: flex; flex-direction: column; margin: 0; padding: 0; }

/* Flat continuous rows. */
.cs-pop .cs-item {
    display: flex !important; align-items: center !important; gap: 8px;
    width: 100% !important; max-width: none !important; min-width: 0 !important; height: auto !important;
    margin: 0 !important; padding: 11px 12px !important; position: static !important; float: none !important;
    border: 0 !important; border-top: 1px solid var(--ink) !important; border-radius: 0 !important;
    background: var(--paper) !important; color: var(--ink) !important; box-shadow: none !important;
    text-align: left !important; font: 12px/1.3 var(--mono) !important; white-space: normal !important;
    letter-spacing: 1.4px !important; text-transform: uppercase !important; text-decoration: none !important;
    text-indent: 0 !important; cursor: pointer; opacity: 1 !important; transform: none !important;
}
.cs-pop .cs-list > .cs-item:first-child { border-top: 0 !important; }
.cs-pop .cs-item.is-on { background: var(--ink) !important; color: var(--paper) !important; }
.cs-pop .cs-item:hover:not(.is-on) { background: #e6e6e6 !important; }
.cs-pop .cs-item:focus-visible { outline: 2px solid var(--ink) !important; outline-offset: -4px !important; }
.cs-pop .cs-item.is-on:focus-visible { outline-color: var(--paper) !important; }

/*
 * .cdc-menu-host: wrapper site-menu.php adds on pages without their own
 * tabbar (homepage, login, static pages). Hidden once the M exists; without
 * JS it shows the plain tab row below.
 */
.cdc-menu-host {
    position: relative; z-index: 2147483000; box-sizing: border-box;
    width: 100%; align-self: stretch; flex: 0 0 auto;
    max-width: 1200px; margin: 0 auto; padding: 10px 12px; text-align: left;
}
.cdc-menu-host .tabbar:not(.cs-ready) { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; }
.cdc-menu-host .tabbar:not(.cs-ready) .tab-btn {
    display: inline-block; padding: 9px 18px; margin: 0 -1px 0 0; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: 1.4px; text-transform: uppercase; text-decoration: none; box-shadow: none;
    background: #fff; color: #000; border: 1px solid #000;
}
.cdc-menu-host .tabbar:not(.cs-ready) .tab-btn.is-on { background: #000; color: #fff; }