/* Admin experiment: loaded only when Dev build AND V2 preview are on. */

:root { --header-haze:5px; }
nav.top { background: var(--ink-50); backdrop-filter: none; isolation: isolate; --header-band-colour:color-mix(in oklch,var(--accent-500),white 4%); }
html[data-liquid-header] nav.top { --nav-control-size:33px; }
nav.top .row { padding-block:13.5px; }
nav.top .logo { font-size:16.5px; gap:6px; }
nav.top .logo-word svg { display:block; }
/* Keep foreground ink on small composited layers while trackpad zoom scales
   the animated glass. Applying this to the row would also contain its menus. */
html[data-header-material] nav.top :is(.logo-svg,.logo-lettering,.logo-word svg,#navSearchInput,.search-icon) {
  transform:translateZ(0);
}
:root[data-theme="light"] nav.top { --header-band-colour:color-mix(in oklch,var(--ink-50),var(--accent-700) 68%); }
nav.top > .shell.row {
  display:grid; grid-template-columns:max-content minmax(0,1fr) max-content;
  column-gap:clamp(15px,2.25vw,36px); align-items:center;
}
nav.top .nav-actions { flex-shrink:0; gap:6px; }
html[data-v2-icons] nav.top :is(.nav-btn,.profile-btn) { font-size:10.5px; gap:6px; font-family:'JetBrains Mono','Courier New',monospace; }
nav.top .nav-btn { padding-inline:10.5px; }
nav.top .nav-btn.icon-only { padding-inline:6.75px; }
nav.top .profile-menu > .profile-btn { padding-inline:9px; }
html[data-v2-icons] nav.top .nav-btn .icon,
html[data-v2-icons] nav.top .nav-search .search-icon { font-size:16.5px; --r3d-icon-size:16.5px; }
html[data-v2-icons] nav.top .nav-search .search-icon { flex-basis:16.5px; }
html[data-v2-icons] nav.top .profile-btn .avatar { width:19.5px; height:19.5px; }
nav.top .nav-actions > :is(.nav-lang,.profile-menu) { display:flex; align-items:center; }
html[data-v2-icons] nav.top :is(.nav-btn,.profile-btn) {
  border-radius:calc(var(--nav-control-size,44px) / 4);
}
nav.top #navSearchToggle { display:none; }
nav.top #navSearchForm {
  position:relative; inset:auto; display:flex; align-items:center;
  width:100%; min-width:0; max-width:210px; height:var(--nav-control-size,33px);
  justify-self:center; gap:7.5px; margin:0; padding:0 9px;
  background:var(--ink-100); border:1px solid var(--ink-300);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  border-radius:calc(var(--nav-control-size,44px) / 4);
  transition:border-color .2s ease;
}
nav.top #navSearchForm:focus-within { border-color:var(--accent-500); }
nav.top #navSearchForm .search-icon { display:inline-flex; flex:0 0 16.5px; }
nav.top #navSearchForm input[type="search"] {
  width:100%; min-width:0; opacity:1; margin:0; padding:0;
  background:transparent; border:0; border-radius:0; font-size:12px;
}
nav.top #navSearchForm input[type="search"]::placeholder { color:var(--ink-700); opacity:1; }
.search-glass-canvas { display:block; visibility:hidden; position:absolute; inset:-1px; z-index:0; width:calc(100% + 2px); height:calc(100% + 2px); border-radius:inherit; pointer-events:none; }
html[data-header-gpu] .search-glass-canvas { visibility:visible; }
html[data-header-material] nav.top #navSearchForm { background:transparent; border-color:transparent; box-shadow:inset 0 0 0 1px color-mix(in srgb,white 13%,transparent); }
html[data-header-material] nav.top #navSearchForm:focus-within { box-shadow:0 0 0 1px var(--accent-500); }
html[data-header-gpu] #navSearchForm :is(.search-icon,input[type="search"]) { position:relative; z-index:1; }
html[data-header-gpu] #navSearchForm .search-icon .r3d-icon { --r3d-icon-tint:transparent; }
html[data-header-material] nav.top .nav-actions :is(.primary,#langToggle,#profileBtn) {
  background:transparent; border:1px solid transparent;
  box-shadow:inset 0 1px 1px color-mix(in srgb,white 10%,transparent),0 2px 5px color-mix(in srgb,var(--accent-700) 9%,transparent);
}
html[data-header-material] nav.top .nav-actions .primary { color:var(--ink-900); }
html[data-header-material] nav.top .nav-actions :is(#langToggle,#profileBtn) { color:var(--ink-900); }
html[data-header-material] nav.top :is(.profile-dropdown,.search-dropdown,.nav-lang-menu) {
  background:color-mix(in srgb,var(--ink-50) 72%,transparent);
  -webkit-backdrop-filter:blur(var(--header-haze)) saturate(.85);
  backdrop-filter:blur(var(--header-haze)) saturate(.85);
  color:var(--ink-900);
  transform:none; transition:visibility .15s;
  overscroll-behavior:none;
  border:1px solid color-mix(in srgb,var(--accent-500) 22%,var(--ink-300));
  border-radius:18px;
  box-shadow:inset 0 1px 1px color-mix(in srgb,white 22%,transparent),0 12px 32px color-mix(in srgb,var(--accent-700) 23%,transparent);
}
nav.top .profile-dropdown { inset-inline-end:0; inset-inline-start:auto; }
html[data-header-material] nav.top .profile-dropdown .pd-header {
  border-start-start-radius:17px; border-start-end-radius:17px;
}
/* Profile menu: a bright rim catches the light (top strongest), so the
   clearer lens reads as glass rather than a dim panel. */
html[data-header-material] nav.top .profile-dropdown {
  border-color:color-mix(in srgb,white 16%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,white 38%,transparent),inset 0 0 0 1px color-mix(in srgb,white 9%,transparent),inset 0 -1px 0 color-mix(in srgb,white 12%,transparent),0 12px 32px color-mix(in srgb,var(--accent-700) 23%,transparent);
}
/* clearer glass lets bright page text through; a soft halo in the menu's
   own colour keeps the labels readable over it */
html[data-header-material] nav.top .profile-dropdown :is(.pd-item,.pd-header,.pd-notif-hdr,.notif-empty,.notif-foot) {
  text-shadow:0 0 6px var(--ink-50),0 0 2px var(--ink-50);
}
nav.top .profile-menu:is(:hover,:focus-within,.open)::after { z-index:2; height:var(--header-profile-bridge,14px); }
html[data-header-gpu] nav.top :is(.profile-dropdown,.search-dropdown,.nav-lang-menu):not([data-menu-ready]) { opacity:0; }
html[data-header-gpu] nav.top [data-menu-glass] { background:color-mix(in srgb,var(--ink-50) 70%,transparent); backdrop-filter:blur(var(--header-haze)) saturate(.85); -webkit-backdrop-filter:blur(var(--header-haze)) saturate(.85); }
html[data-header-material] nav.top :is(.profile-dropdown .pd-header:not(:hover):not(:focus-visible) .pd-name,.search-dropdown .sd-title) { color:var(--ink-900); }
html[data-header-material] nav.top .profile-dropdown .pd-header:focus-visible .pd-name { color:var(--red-400); }
html[data-header-material] nav.top :is(.profile-dropdown .pd-sub,.profile-dropdown .pd-notif-hdr,.profile-dropdown .pd-notif-clear:not(:hover):not(:focus-visible):not(.is-armed),.profile-dropdown .notif-empty,.profile-dropdown .notif-foot,.search-dropdown .sd-section-head,.search-dropdown .sd-sub) { color:var(--ink-800); }
/* Keep semantic/hover colors from nav.css. Normal items inherit readable ink;
   neutral icons follow their row, while admin/Discord/Ko-fi keep native colors. */
html[data-header-material] nav.top .profile-dropdown .pd-item:not(:hover):not(:focus-visible):not(.sign-out) { color:var(--ink-900); }
html[data-header-material] nav.top .profile-dropdown .pd-item:not(.admin-item) .pd-icon:where(:not(.pd-icon-discord):not(.pd-icon-kofi)) { color:inherit; }
html[data-header-material] nav.top .profile-dropdown .admin-item .pd-icon { color:oklch(0.72 0.16 65); }
html[data-header-material] nav.top .profile-dropdown .admin-item:hover .pd-icon { color:oklch(0.82 0.19 65); }
html[data-header-material] nav.top .profile-dropdown .pd-item:focus-visible { color:var(--red-400); background:color-mix(in oklch,var(--red-400),transparent 90%); }
html[data-header-material] nav.top .nav-lang-opt {
  text-shadow:0 0 6px var(--ink-50),0 0 2px var(--ink-50);
}
html[data-header-material] nav.top .nav-lang-opt:not(.is-current):not(:hover) { color:var(--ink-900); }
@media(max-width:900px) {
  nav.top .profile-dropdown { top:calc(100% + 8px); inset-inline-end:16px; }
  nav.top > .shell.row { grid-template-columns:minmax(0,1fr) max-content; gap:9px 12px; }
  nav.top > .shell.row > .logo { grid-column:1; grid-row:1; }
  nav.top > .shell.row > .nav-actions { grid-column:2; grid-row:1; }
  nav.top #navSearchForm { grid-column:1 / -1; grid-row:2; max-width:none; }
}
@media(max-width:480px) { nav.top #navSearchForm input[type="search"] { font-size:16px; } }
.nav-band-field { position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; overflow:hidden; opacity:.46; }
.nav-band-point { transform-box:view-box; transform-origin:center; animation:nav-band-drift var(--drift-time) ease-in-out infinite alternate; animation-delay:var(--drift-delay); animation-play-state:paused; }
html[data-header-motion] .nav-band-point { animation-play-state:running; }
html[data-header-paused] .nav-band-point { animation-play-state:paused; }
@keyframes nav-band-drift { to { transform:translate(var(--drift-x),var(--drift-y)); } }
html[data-header-material]:not([data-header-original]) nav.top .logo .logo-mark.logo-mark-v2 {
  border-radius:34%;
  overflow:hidden;
}
html[data-header-relief] nav.top .logo-mark-v2 {
  box-shadow: 0 1px 4px color-mix(in oklch,var(--accent-700),transparent 82%);
}
html[data-header-relief] nav.top .logo-mark-v2::after {
  content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; pointer-events:none;
  background:radial-gradient(ellipse 92% 90% at 43% 37%,color-mix(in oklch,white,transparent 92%),transparent 78%),radial-gradient(ellipse 90% 90% at 48% 43%,transparent 38%,color-mix(in oklch,var(--accent-700),transparent 86%) 100%);
  box-shadow:inset 0 1px 6px color-mix(in oklch,white,transparent 94%),inset 0 -1px 6px color-mix(in oklch,var(--accent-700),transparent 86%);
}
html[data-header-material]:not([data-header-original]) nav.top .logo-svg :is(.lg-mid,.lg-light) { display:none; }
html[data-header-material]:not([data-header-original]) nav.top .logo-svg .lg-dark { fill:var(--ink-50); }
html[data-header-material]:not([data-header-original]) nav.top .logo-svg .lg-letters { fill:var(--ink-900); }
.logo-heat-surface { display:none; position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.90; pointer-events:none; }
.logo-heat-patch { opacity:.46; }
.nav-band-canvas { display:block; visibility:hidden; position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; }
.logo-glass-canvas { display:block; visibility:hidden; position:absolute; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; }
.logo-lettering { display:none; position:absolute; inset:0; z-index:2; width:100%; height:100%; fill:var(--ink-900); pointer-events:none; }
html[data-header-gpu] :is(.nav-band-canvas,.logo-glass-canvas) { visibility:visible; }
html[data-header-material] .logo-lettering { display:block; }
html[data-header-fallback] .logo-heat-surface { display:block; }
html[data-header-gpu]:not([data-header-original]) .nav-band-field,
html[data-header-gpu]:not([data-header-original]) .logo-heat-surface { display:none; }
/* Keep the flattened SVG lettering visible until its live replacement exists. */
html[data-header-material]:not([data-header-original]) nav.top .logo-svg.has-live-lettering { display:none; }
html[data-header-original] :is(.nav-band-canvas,.logo-glass-canvas,.logo-lettering) { display:none; }
html[data-header-original] .logo-heat-surface { display:none; }
html[data-header-original] .nav-band-field { display:none; }
html[data-header-original] nav.top { background:color-mix(in oklch,var(--ink-0),transparent 25%); backdrop-filter:blur(12px) saturate(140%); }
@media(prefers-reduced-motion:reduce) { .nav-band-point { animation:none; } }

html[data-header-material] nav.top .nav-actions :is(.nav-btn,.profile-btn):is(:hover,:active,:focus-visible) { transform:none; }
html[data-header-material] nav.top .nav-actions :is(.primary,#langToggle,#profileBtn)[data-header-pressed] {
  box-shadow:inset 0 2px 4px rgb(0 0 0/.25),inset 0 -1px 1px rgb(255 255 255/.08);
}

/* Retain the material when a decorative GPU context is unavailable. */
html[data-header-fallback] nav.top .logo-mark-v2 { background:var(--ink-50); }
html[data-header-fallback] nav.top .nav-actions .primary { background:color-mix(in srgb,var(--accent-500) 35%,transparent); }
html[data-header-fallback] nav.top .nav-actions :is(#langToggle,#profileBtn) { background:color-mix(in srgb,var(--accent-500) 14%,transparent); }
html[data-header-fallback] nav.top .nav-actions :is(.primary,#langToggle,#profileBtn):active { box-shadow:inset 0 2px 4px rgb(0 0 0/.25),inset 0 -1px 1px rgb(255 255 255/.08); }