Side navigation

.adminwrap { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.demobar { background: var(--bg-subtle); border-bottom: 1px solid var(--border); padding: var(--space-1) var(--gutter); font-size: var(--text-xs); color: var(--text-secondary); text-align: right; }
.appbar__inner { max-width: none; font-size: var(--text-sm); line-height: var(--lh-sm); }
.appheader { flex-wrap: nowrap; }
.appheader__left { min-width: 0; gap: var(--space-2); }
.appheader__right { min-width: 0; }
.appsuffix { font-size: var(--text-sm); white-space: nowrap; }
.appname { font-weight: var(--weight-bold); font-size: var(--text-lg); color: var(--text); }
/* A 44px target, anywhere. Named for the rule it satisfies rather than the
   menu toggle it was first written for. .toggle44 is the former name and
   keeps working, so nothing already shipped breaks. */
.target44, .toggle44 { min-height: 2.75rem; min-width: 2.75rem; }
.navtoggle { padding: 0; cursor: pointer; }
.navtoggle__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.navtoggle__input:focus-visible ~ .appbar .navtoggle { box-shadow: var(--focus-ring); }

/* Endorsement: placed asset via tokens, dark swap under BOTH triggers */
.brandmark { display: block; height: var(--logo-height); width: 132px; background: var(--logo-master-colour) center/contain no-repeat; flex: 0 0 auto; }
[data-theme="dark"] .brandmark { background-image: var(--logo-master-white); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .brandmark { background-image: var(--logo-master-white); } }
[data-theme="light"] .brandmark { background-image: var(--logo-master-colour); }

.adminbody { flex: 1; width: 100%; padding: var(--space-5) var(--gutter) var(--space-8); font-size: var(--text-sm); line-height: var(--lh-sm); }
.adminmain { min-width: 0; }
@media (min-width: 900px) {
  .adminbody { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-6); align-items: start; }
  /* Collapsed at desktop width: a rail of icons, never nothing (feature 009). */
  .adminwrap:has(.navtoggle__input:checked) .adminbody { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .adminwrap:has(.navtoggle__input:checked) .adminnav { align-items: center; }
  .adminwrap:has(.navtoggle__input:checked) .navlink { justify-content: center; gap: 0; width: 2.75rem; padding: 0; border-inline-start: 0; border-radius: var(--radius-md); }
  .adminwrap:has(.navtoggle__input:checked) .navlink > span,
  .adminwrap:has(.navtoggle__input:checked) .navgroup__label > span,
  .adminwrap:has(.navtoggle__input:checked) .navgroup__chevron { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .adminwrap:has(.navtoggle__input:checked) .navgroup { border-top-color: transparent; }
  .adminwrap:has(.navtoggle__input:checked) .navgroup:last-child { border-bottom-color: transparent; }
  .adminwrap:has(.navtoggle__input:checked) .navgroup__label { justify-content: center; padding: 0; min-height: 0; height: var(--space-4); cursor: default; }
  .adminwrap:has(.navtoggle__input:checked) .navgroup__label .icon { display: none; }
  .adminwrap:has(.navtoggle__input:checked) .navgroup > .navlink { padding-inline-start: 0; }
  /* A closed group still shows its destinations in the rail: the browser stops painting a
     closed details subtree, so the rail asks for it back. Rail mode only, so the phone
     drawer keeps ordinary group behaviour. */
  .adminwrap:has(.navtoggle__input:checked) .navgroup::details-content { content-visibility: visible; block-size: auto; }
  .navscrim { display: none; }
}
@media (max-width: 899.98px) {
  .navscrim { position: fixed; inset: 0; z-index: 60; background: var(--scrim); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; }
  .adminwrap:has(.navtoggle__input:checked) .navscrim { opacity: 1; visibility: visible; }
  body:has(.navtoggle__input:checked) { overflow: hidden; }
}
/* Two-mark rule below 520px: divider and suffix drop, endorsement steps down, never disappears */
@media (max-width: 519.98px) {
  .appsuffix, .appheader__sep { display: none; }
  .brandmark { height: 20px; width: 65px; }
  .appbar__inner, .appheader__right { gap: var(--space-2); }
}

/* Icon theme toggle (moon in light, sun in dark), mirrored under both triggers */
.themetoggle .ic-sun { display: none; }
[data-theme="dark"] .themetoggle .ic-moon { display: none; }
[data-theme="dark"] .themetoggle .ic-sun { display: inline-block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .themetoggle .ic-moon { display: none; }
  :root:not([data-theme]) .themetoggle .ic-sun { display: inline-block; }
}
[data-theme="light"] .themetoggle .ic-moon { display: inline-block; }
[data-theme="light"] .themetoggle .ic-sun { display: none; }

.adminnav { display: flex; flex-direction: column; }
.adminnav__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 3.5rem; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); margin-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
@media (min-width: 900px) {
  .adminnav { position: sticky; top: var(--space-4); max-height: calc(100vh - var(--space-6)); overflow-y: auto; }
  .adminnav__head { display: none; }
}
@media (max-width: 899.98px) {
  .adminnav { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 70; width: min(20rem, 85vw); padding-bottom: var(--space-6); overflow-y: auto; background: var(--surface); border-inline-end: 1px solid var(--border); box-shadow: var(--shadow-3); transform: translateX(-100%); visibility: hidden; transition: transform 0.2s ease, visibility 0.2s ease; }
  .adminwrap:has(.navtoggle__input:checked) .adminnav { transform: none; visibility: visible; }
}
.navlink { display: flex; align-items: center; gap: var(--space-2); min-height: 2.25rem; padding: var(--space-2) var(--space-3); color: var(--text-secondary); text-decoration: none; white-space: nowrap; border-inline-start: 2px solid transparent; transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }
.navlink:hover { color: var(--text); background: var(--bg-subtle); text-decoration: none; }
.navlink[aria-current="page"], .navlink.active { color: var(--accent-text); background: var(--accent-subtle); border-inline-start-color: var(--accent); font-weight: var(--weight-bold); }
.navlink:focus-visible, .navgroup__label:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.navgroup { border-top: 1px solid var(--border); }
.navgroup:last-child { border-bottom: 1px solid var(--border); }
.navgroup__label { list-style: none; display: flex; align-items: center; gap: var(--space-2); min-height: 2.25rem; padding: var(--space-2) var(--space-3); cursor: pointer; font-size: var(--text-xs); font-weight: var(--weight-regular); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-secondary); white-space: nowrap; transition: color 0.15s ease, background-color 0.15s ease; }
.navgroup__label::-webkit-details-marker { display: none; }
.navgroup__label > span { flex: 1; }
.navgroup__label:hover { color: var(--text); background: var(--bg-subtle); }
.navgroup__chevron { transition: transform 0.15s ease; }
.navgroup[open] > .navgroup__label .navgroup__chevron { transform: rotate(180deg); }
.navgroup > .navlink { padding-inline-start: calc(var(--space-3) + 1rem + var(--space-2)); }
@media (pointer: coarse) { .navlink, .navgroup__label { min-height: 2.75rem; } }
/* Variant: flat. For a product whose destinations are peers with no grouping to
   nest (a monitoring surface), the nav is one flat list. Its collapse control is
   a chevron pinned to the sidebar's own edge, not an appbar hamburger: collapsing
   hides only labels, so the button belongs beside the thing it collapses. It
   drives the same hidden checkbox, so every rail rule above applies unchanged. */
.adminnav--flat { position: relative; padding-block-start: var(--space-6); }
.navtoggle--edge { position: absolute; inset-block-start: var(--space-3); inset-inline-start: 100%; z-index: 5; translate: -50% 0; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; padding: 0; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-2); color: var(--text-secondary); cursor: pointer; }
.navtoggle--edge:hover { color: var(--text); }
.navtoggle--edge .icon { width: 1rem; height: 1rem; }
.navtoggle--edge .ic-expand { display: none; }
.adminwrap:has(.navtoggle__input:checked) .navtoggle--edge .ic-collapse { display: none; }
.adminwrap:has(.navtoggle__input:checked) .navtoggle--edge .ic-expand { display: block; }
@media (min-width: 900px) {
  .adminwrap:has(.adminnav--flat) .navtoggle { display: none; }
}
@media (max-width: 899.98px) {
  .navtoggle--edge { display: none; }
}