/* Site-wide menu bar and footer (home, tool pages, blog). Markup is written by scripts/build-tool-pages.mjs.
   Uses the colour tokens each page already defines (--bg, --surface, --ink, --muted, --line, --accent). */
.sitenav { display: flex; align-items: center; gap: 4px; margin: 0 auto 0 22px; min-width: 0; }
.sitenav > a { font-size: 13px; color: var(--ink); opacity: .8; text-decoration: none; padding: 6px 9px; border-radius: 8px; white-space: nowrap; }
.sitenav > a:hover { opacity: 1; background: var(--bg2); text-decoration: none; }
.tools-menu > summary { list-style: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink); padding: 6px 12px; margin-right: 6px;
  border: 1px solid var(--line); border-radius: 8px; display: flex; align-items: center; gap: 7px; white-space: nowrap; user-select: none; }
.tools-menu > summary::-webkit-details-marker { display: none; }
.tools-menu > summary::before { content: ""; width: 12px; height: 12px; background: radial-gradient(circle, currentColor 1.4px, transparent 1.6px) 0 0 / 4px 4px; }
.tools-menu > summary::after { content: ""; border: 4px solid transparent; border-top-color: currentColor; margin-top: 4px; }
.tools-menu[open] > summary { background: var(--bg2); }
.tools-menu[open] > summary::after { transform: rotate(180deg); margin-top: -4px; }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 40px -18px rgba(0,0,0,.25); max-height: calc(100vh - 56px); overflow-y: auto; padding: 22px 28px 20px; }
.toolcols { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 28px; }
.toolcols h3 { font-size: 12px; font-weight: 500; color: var(--muted); margin: 0 0 8px; letter-spacing: 0; }
.toolcols ul { list-style: none; margin: 0; padding: 0; }
.toolcols li { margin: 0; }
.toolcols a { display: flex; align-items: center; gap: 9px; padding: 6px 8px; margin: 0 -8px; border-radius: 8px; font-size: 14px; line-height: 1.3; color: var(--ink); text-decoration: none; }
.toolcols a:hover { background: var(--bg2); text-decoration: none; }
.toolcols .e { flex: none; width: 22px; text-align: center; }
.mega .all { display: block; max-width: 1120px; margin: 14px auto 0; font-size: 13px; }

footer.site-footer { text-align: left; padding: 40px 28px 26px; margin-top: 56px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.site-footer .toolcols { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.site-footer .toolcols a { font-size: 13px; padding: 5px 8px; }
.site-footer .fguides { grid-column: 1 / -1; margin-top: 14px; }
.site-footer .fguides ul { columns: 3; column-gap: 28px; }
.site-footer .fguides li { break-inside: avoid; }
.fgroup > summary { list-style: none; font-size: 12px; font-weight: 500; color: var(--muted); margin: 0 0 8px; pointer-events: none; }
.fgroup > summary::-webkit-details-marker { display: none; }
.site-footer .legal { max-width: 1120px; margin: 26px auto 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12px; text-align: center; }
.site-footer .legal a { color: inherit; }

/* The five quick links need the room; below this width the Tools menu carries them. */
@media (max-width: 1240px) { .sitenav > a { display: none; } }
/* The home page header also carries the status, Blog, Browse agents, Ask and the language switch; the quick links
   do not fit beside them below this width (German labels are long). They stay in the Tools menu and the footer. */
@media (max-width: 1440px) { header:has(.topnav) .sitenav > a { display: none; } }
@media (max-width: 1000px) {
  .toolcols, .site-footer .toolcols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .site-footer .fguides ul { columns: 2; }
}
@media (max-width: 560px) {
  .sitenav { margin-left: 10px; }
  /* Room for the Tools menu on a phone: the vote sheet stays reachable from the page, the blog from the footer. */
  header .navbtn, header .nav a:first-child { display: none; }
  .tools-menu > summary { padding: 6px 9px; }
  .mega { padding: 16px 16px 18px; }
  footer.site-footer { padding: 28px 16px 22px; }
}
@media (max-width: 420px) { .toolcols, .site-footer .toolcols { grid-template-columns: 1fr; } }
/* Phone: the footer's sections become a tap-to-open list instead of 40 links in a row. */
@media (max-width: 720px) {
  .site-footer .toolcols { grid-template-columns: 1fr; row-gap: 0; }
  .site-footer .fguides { margin-top: 0; }
  .site-footer .fguides ul { columns: 1; }
  .fgroup { border-bottom: 1px solid var(--line); }
  .fgroup > summary { pointer-events: auto; cursor: pointer; display: flex; align-items: center; margin: 0; padding: 14px 0; font-size: 15px; color: var(--ink); }
  .fgroup > summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-2px) rotate(45deg); }
  .fgroup[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
  .fgroup ul { padding: 0 0 12px; }
  .site-footer .toolcols a { font-size: 14px; padding: 8px; }
}
/* Language switcher in the footer (native language names) and the header menu when there are many languages. */
.site-footer .langs { max-width: 1120px; margin: 22px auto 0; font-size: 13px; text-align: center; }
.site-footer .langs a { color: inherit; padding: 2px 4px; }
.site-footer .langs a[aria-current="true"] { color: var(--ink); font-weight: 600; }
.lang select { border: 0; background: transparent; color: var(--muted); font: 600 13px Inter, sans-serif; padding: 6px 8px; cursor: pointer; }