/* ============================================================
   SLIM MENU (draft 2026-10-13)
   The hamburger fold-out only: a slim drawer that slides in from the right.
   Nothing else on the page is touched. Markup lives in includes/header.php.
   ============================================================ */
.slimnav {
    --sn-panel: rgba(17, 17, 22, .94);
    --sn-hover: rgba(255, 255, 255, .055);
    --sn-line: rgba(255, 255, 255, .08);
    --sn-ink: #f2f2f7;
    --sn-ink-2: #d2d2dc;
    --sn-ink-3: #8c8c9c;
    --sn-active-bg: rgba(255, 0, 90, .13);
    --sn-active-ink: #ff5c93;
    --sn-sans: 'Space Grotesk', system-ui, sans-serif;
    --sn-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

    position: fixed; z-index: 2000;
    top: calc(12px + var(--sh-safe-t, 0px)); right: calc(12px + var(--sh-safe-r, 0px)); bottom: calc(12px + var(--sh-safe-b, 0px)); left: auto;
    width: min(300px, calc(100vw - 24px)); height: auto; margin: 0; padding: 16px 12px 12px;
    display: flex; flex-direction: column;
    border-radius: 22px;
    background: var(--sn-panel);
    -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .75), 0 0 0 1px var(--sn-line);
    color: var(--sn-ink); font: 500 15px/1.35 var(--sn-sans);
    -webkit-font-smoothing: antialiased;
    opacity: 1; visibility: hidden; overflow: hidden;
    transform: translateX(calc(100% + 28px));
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .45s;
}
.slimnav.active { visibility: visible; transform: none; transition: transform .45s cubic-bezier(.2, .8, .2, 1), visibility 0s; }

[data-theme="light"] .slimnav {
    --sn-panel: rgba(251, 250, 248, .96);
    --sn-hover: rgba(20, 18, 16, .05);
    --sn-line: rgba(20, 18, 16, .09);
    --sn-ink: #1a1816;
    --sn-ink-2: #4a4640;
    --sn-ink-3: #8f897f;
    --sn-active-bg: rgba(255, 0, 90, .08);
    --sn-active-ink: #e0004f;
    font-weight: 400;
    box-shadow: 0 40px 90px -34px rgba(40, 30, 20, .3), 0 0 0 1px var(--sn-line);
}

.slimnav .sn-i { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* head */
.sn-head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 6px 6px; flex: none; }
.sn-brand { display: flex; align-items: center; gap: 11px; color: var(--sn-ink) !important; text-decoration: none; }
.sn-mark { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(140deg, #ff2a73, #c3004a); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.sn-mark span { width: 11px; height: 11px; border: 1.7px solid #fff; border-radius: 3px; transform: rotate(45deg); }
.sn-word { font: 500 13px/1 var(--sn-mono); letter-spacing: .3em; }
.sn-x { width: 36px; height: 36px; border: 0; border-radius: 10px; display: grid; place-items: center; background: none; color: var(--sn-ink-3); cursor: pointer; }
.sn-x:hover { background: var(--sn-hover); color: var(--sn-ink); }

/* body */
.sn-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px; scrollbar-width: none; }
.sn-body::-webkit-scrollbar { display: none; }
.sn-group + .sn-group { border-top: 1px solid var(--sn-line); margin-top: 12px; }
.sn-lbl { font: 500 10.5px/1 var(--sn-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--sn-ink-3); padding: 0 12px; margin: 18px 0 8px; }

.sn-item {
    position: relative; display: flex; align-items: center; gap: 13px;
    min-height: 42px; padding: 0 12px; border-radius: 11px;
    color: var(--sn-ink-2) !important; text-decoration: none; cursor: pointer; list-style: none;
    transition: background-color .15s, color .15s;
}
.sn-item::-webkit-details-marker { display: none; }
.sn-item:hover { background: var(--sn-hover); color: var(--sn-ink) !important; }
.sn-item[aria-current="page"] { background: var(--sn-active-bg); color: var(--sn-active-ink) !important; font-weight: 600; }
[data-theme="light"] .sn-item[aria-current="page"] { font-weight: 500; }
.sn-t { flex: 1; white-space: nowrap; letter-spacing: .01em; }
.sn-chev { width: 15px !important; height: 15px !important; opacity: .55; transition: transform .2s; }
.sn-fold[open] > summary .sn-chev { transform: rotate(90deg); }

.sn-sub { display: flex; flex-direction: column; margin: 2px 0 6px 21px; padding-left: 19px; border-left: 1px solid var(--sn-line); }
.sn-sub a {
    display: block; padding: 8px 10px; border-radius: 9px;
    font-size: 14px; font-weight: inherit; color: var(--sn-ink-3) !important; text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-theme="dark"] .sn-sub a, :root:not([data-theme]) .sn-sub a { color: #b4b4c2 !important; }
.sn-sub a:hover { background: var(--sn-hover); color: var(--sn-ink) !important; }
.sn-sub a[aria-current="page"] { color: var(--sn-active-ink) !important; }

/* foot */
.sn-foot { flex: none; padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--sn-line); display: flex; flex-direction: column; gap: 8px; }
.sn-world { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border-radius: 12px; background: var(--sn-hover); box-shadow: inset 0 0 0 1px var(--sn-line); }
.sn-world button {
    display: flex; align-items: center; justify-content: center; gap: 7px; height: 36px;
    border: 0; border-radius: 9px; background: none; cursor: pointer;
    font: 500 10.5px/1 var(--sn-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sn-ink-3);
}
.sn-world button .sn-i { width: 14px; height: 14px; }
.sn-world button[aria-pressed="true"] { background: var(--sn-panel); color: var(--sn-ink); box-shadow: 0 0 0 1px var(--sn-line), 0 2px 6px rgba(0, 0, 0, .15); }
.sn-world button[aria-pressed="true"] .sn-i { color: #ff2a73; }
.sn-translate:empty { display: none; }
.sn-out { color: #ff6b6b !important; }

/* entrance */
.slimnav .sn-group, .slimnav .sn-foot { opacity: 0; transform: translateX(10px); transition: opacity .3s, transform .4s cubic-bezier(.2, .8, .2, 1); }
.slimnav.active .sn-group, .slimnav.active .sn-foot { opacity: 1; transform: none; }
.slimnav.active .sn-group:nth-child(2) { transition-delay: .04s; }
.slimnav.active .sn-group:nth-child(3) { transition-delay: .08s; }
.slimnav.active .sn-foot { transition-delay: .12s; }

@media (max-width: 767px) {
    .slimnav { width: min(320px, calc(100vw - 20px)); right: 10px; top: calc(10px + var(--sh-safe-t, 0px)); bottom: calc(10px + var(--sh-safe-b, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
    .slimnav, .slimnav .sn-group, .slimnav .sn-foot { transition: none !important; }
}
@media print { .slimnav { display: none !important; } }