/* The mobile dock keeps its existing layout; only the desktop rail meets the edge. */
@media screen and (min-width:1180px) {
  :root {
    --desktop-rail-width:74px;
    --desktop-page-gutter:24px;
    --desktop-rail-surface:#f4f5f5;
    --desktop-rail-line:#dfe4e7;
    --desktop-rail-icon:#65727b;
    --desktop-rail-hover:#e8edf0;
    --desktop-rail-accent:linear-gradient(125deg,#f1e7ee,#e8edf3 48%,#d1e9f3);
  }

  body:not(.camera-mode):has(#navigation:not([hidden]))>.shell {
    margin-left:var(--desktop-rail-width);
    padding-inline:var(--desktop-page-gutter);
  }
  body:not(.camera-mode):has(#navigation:not([hidden]))>.site-header {
    margin-left:calc(var(--desktop-rail-width) + var(--desktop-page-gutter));
    margin-right:var(--desktop-page-gutter);
  }

  #navigation.bottom-nav {
    inset:0 auto 0 0;
    width:var(--desktop-rail-width);
    max-width:none;
    height:100vh;
    height:100dvh;
    min-height:0;
    padding:20px 0 18px;
    border:0;
    border-right:1px solid var(--desktop-rail-line);
    border-radius:0;
    background:var(--desktop-rail-surface);
    color:var(--desktop-rail-icon);
    box-shadow:none;
    transform:none;
    backdrop-filter:none;
    overflow:visible;
  }
  #navigation .desktop-nav-shell {gap:15px}
  #navigation .desktop-nav-brand {
    flex:none;
    width:44px;
    height:44px;
    min-height:44px;
    border:0;
    border-radius:50%;
    background:transparent;
    box-shadow:none;
  }
  #navigation .desktop-brand-mark {width:32px;height:32px;object-fit:contain}
  #navigation .desktop-nav-context {display:none}
  #navigation .desktop-nav-list {
    flex:1;
    gap:9px;
    justify-content:center;
    justify-content:safe center;
    width:100%;
    min-height:0;
    padding:0;
    overflow:visible;
  }
  #navigation :is(.desktop-nav-link,.desktop-theme-toggle,.desktop-logout) {
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
    border:1px solid var(--desktop-rail-line);
    border-radius:50%;
    background:transparent;
    color:var(--desktop-rail-icon);
    box-shadow:none;
  }
  #navigation :is(.desktop-nav-link,.desktop-theme-toggle,.desktop-logout):is(:hover,:focus-visible) {
    border-color:var(--desktop-rail-line);
    background:var(--desktop-rail-hover);
    color:var(--ink);
    transform:none;
  }
  #navigation .desktop-nav-link.active,
  #navigation .desktop-theme-toggle[aria-checked="true"] {
    border-color:transparent;
    background:var(--desktop-rail-accent);
    color:#354752;
  }
  #navigation :is(.desktop-nav-link,.desktop-theme-toggle,.desktop-logout,.desktop-nav-brand):focus-visible {
    outline:2px solid #87afc7;
    outline-offset:3px;
  }
  #navigation :is(.desktop-nav-icon,.desktop-nav-link svg,.desktop-theme-toggle>svg,.desktop-logout>svg) {width:19px;height:19px}
  #navigation .desktop-nav-footer {
    flex:none;
    gap:9px;
    margin-top:0;
    padding:12px 0 0;
    border-top:1px solid var(--desktop-rail-line);
  }
  #navigation :is(.desktop-brand-copy,.desktop-nav-link>span:last-child,.desktop-theme-toggle .theme-toggle-label,.desktop-logout>span) {
    left:calc(50% + 45px);
    z-index:5;
  }

  html[data-theme="dark"] {
    --desktop-rail-surface:#16191c;
    --desktop-rail-line:#2b3238;
    --desktop-rail-icon:#aebbc5;
    --desktop-rail-hover:#252c32;
  }
  html[data-theme="dark"] #navigation.bottom-nav {
    border-color:var(--desktop-rail-line);
    background:var(--desktop-rail-surface);
    color:var(--desktop-rail-icon);
    box-shadow:none;
  }
}

@media screen and (min-width:1600px) {
  :root {--desktop-page-gutter:32px}
}

@media screen and (min-width:1180px) and (max-height:740px) {
  #navigation.bottom-nav {padding-block:16px}
  #navigation .desktop-nav-shell {gap:10px}
  #navigation .desktop-nav-list {gap:5px}
  #navigation :is(.desktop-nav-link,.desktop-theme-toggle,.desktop-logout) {width:40px;height:40px;min-width:40px;min-height:40px}
  #navigation .desktop-nav-footer {gap:7px;padding-top:10px}
}

@media screen and (min-width:1180px) and (max-height:600px) {
  #navigation.bottom-nav {padding-block:12px}
  #navigation .desktop-nav-shell {gap:8px}
  #navigation .desktop-nav-brand {width:38px;height:38px;min-height:38px}
  #navigation .desktop-brand-mark {width:28px;height:28px}
  #navigation .desktop-nav-list {gap:3px}
  #navigation :is(.desktop-nav-link,.desktop-theme-toggle,.desktop-logout) {width:34px;height:34px;min-width:34px;min-height:34px}
  #navigation :is(.desktop-nav-icon,.desktop-nav-link svg,.desktop-theme-toggle>svg,.desktop-logout>svg) {width:17px;height:17px}
  #navigation .desktop-nav-footer {gap:5px;padding-top:8px}
}

@media screen and (min-width:1180px) and (max-height:520px) {
  #navigation .desktop-nav-list {overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:var(--desktop-rail-line) transparent}
  #navigation .desktop-nav-link>span:last-child {position:fixed;left:calc(var(--desktop-rail-width) + 8px);top:auto;transform:translateY(0)}
}

@media screen and (min-width:1180px) and (prefers-reduced-motion:reduce) {
  #navigation :is(.desktop-nav-link,.desktop-theme-toggle,.desktop-logout,.desktop-brand-copy) {transition:none}
}