/* In document flow: these controls leave the viewport when the page scrolls. */
.site-toolbar {
  padding: .75rem max(1rem, calc((100% - 1440px) / 2));
  border-bottom: 1px solid #343434;
  background: #101010;
}
.site-toolbar-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .75rem;
  /* Reserve the top-right area for the external preferences launcher. */
  padding-right: 19rem;
  min-height: 3rem;
}
.site-toolbar-name {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  margin: 0 auto 0 0;
  color: #f2f2f2;
  font-size: .9rem;
  line-height: 1.5;
  text-align: left;
  overflow-wrap: anywhere;
}
.site-toolbar-name span {
  display: block;
  font-size: inherit;
}
.site-toolbar .motion-toggle {
  position: static;
  font-size: .9rem;
  min-height: 44px;
  margin: 0;
}
.language-toggle, .language-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 44px;
  padding: .6rem .8rem;
  border: 1px solid #666;
  border-radius: .4rem;
  background: #080808;
  color: #f2f2f2;
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
}
.language-toggle[hidden], .language-fallback[hidden] { display: none; }
.language-flag { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.language-toggle:hover, .language-close:hover { border-color: #e8c95b; }
.site-toolbar :focus-visible, .language-dialog :focus-visible, .skip-link:focus-visible {
  outline: 3px solid #e8c95b;
  outline-offset: 4px;
}
.language-dialog {
  width: min(38rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: clamp(1rem, 4vw, 2rem);
  border: 1px solid #666;
  border-radius: 1rem;
  background: #171717;
  color: #f2f2f2;
  overflow: auto;
  font-size: 1rem;
}
.language-dialog::backdrop { background: rgb(0 0 0 / .75); }
.language-dialog-header { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.language-dialog h2 { margin: 0; flex: 1; font-size: 1.5rem; line-height: 1.4; color: #e8c95b; }
.language-close { flex-shrink: 0; min-width: 44px; }
.language-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; padding: 0; margin: 0; list-style: none; }
.language-list a {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 64px;
  height: 100%;
  padding: .8rem;
  border: 1px solid #666;
  border-radius: .4rem;
  color: #f2f2f2;
  text-decoration: none;
  overflow-wrap: anywhere;
  font-size: 1rem;
}
.language-list a:hover { background: #303030; }
.language-list [aria-current] { border-color: #e8c95b; background: #34301e; }
.language-check { margin-left: auto; color: #e8c95b; }
.language-fallback { font-size: .9rem; }
.language-fallback summary { cursor: pointer; padding: .75rem; }
.language-fallback ul { padding-left: 1.5rem; }
.language-fallback a { color: #f2f2f2; display: inline-block; padding: .5rem; }
.skip-link { position: absolute; left: 1rem; top: -12rem; z-index: 100; padding: 1rem; background: #171717; color: #fff; }
.skip-link:focus { top: 1rem; }
@media (max-width: 800px) {
  .site-toolbar-inner { padding-right: 0; padding-top: 4rem; }
  .site-toolbar-name { flex-basis: 100%; }
}
@media (max-width: 480px) {
  .language-list { grid-template-columns: 1fr; }
  .site-toolbar-inner { gap: .5rem; }
}
@media print {
  .site-toolbar, .language-dialog, .skip-link { display: none; }
}

/* Native disclosure: navigation remains available without JavaScript. */
.site-toolbar { position: relative; z-index: 10; }
.site-navigation { position: relative; flex: 0 0 auto; margin-right: auto; }
.site-toolbar-inner:has(.site-toolbar-name) .site-navigation { margin-right: 0; }
.site-navigation > summary { display: flex; align-items: center; gap: .5rem; min-height: 44px; padding: .6rem .8rem; border: 1px solid #666; border-radius: .4rem; background: #080808; color: #f2f2f2; font-size: 1rem; cursor: pointer; list-style: none; }
.site-navigation > summary::-webkit-details-marker { display: none; }
.site-navigation > summary:hover, .site-navigation[open] > summary { border-color: #e8c95b; color: #e8c95b; }
.site-navigation-panel { position: absolute; top: calc(100% + .6rem); left: 0; width: min(28rem, calc(100vw - 2.5rem)); max-height: min(42rem, 70dvh); overflow-y: auto; padding: .75rem; border: 1px solid #786c42; border-radius: .6rem; background: #171717; color: #f2f2f2; box-shadow: 0 .75rem 2rem #0006; }
.site-navigation-panel ul { margin: 0; padding: 0; list-style: none; }
.site-navigation-panel ul ul { margin: .25rem 0 .5rem .8rem; padding-left: .7rem; border-left: 2px solid #786c42; }
.site-navigation-panel a { display: block; min-height: 44px; padding: .65rem .7rem; border-radius: .25rem; color: #f2f2f2; font-size: 1rem; line-height: 1.45; text-decoration: none; overflow-wrap: anywhere; }
.site-navigation-panel > ul > li > a { font-weight: 700; }
.site-navigation-panel a:hover { background: #34301e; color: #f3d977; text-decoration: underline; text-underline-offset: .2em; }
.site-navigation-panel a:focus-visible { outline-offset: -3px; }
@media (max-width: 800px) {
  .site-toolbar-inner { justify-content: flex-start; }
  .site-toolbar-name { flex: 1 1 calc(100% - 8rem); }
}