/* Shared accessibility and navigation additions to the printed-page theme.
   Page widths, colours, headings, buttons and forms come from style.css. */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 30;
  background: var(--paper-pale);
  border: 1px solid var(--rule);
  padding: .6rem 1rem;
}
.skip-link:focus { top: 1rem; }
.mainnav { max-width: 60rem; margin-inline: auto; line-height: 1.9; }
.mainnav a[aria-current="page"] { color: var(--accent); border-bottom: 1px solid var(--rule); }
.mainnav.secondary-nav { font-size: 13px; letter-spacing: .04em; padding-bottom: 10px; }
.mainnav + .secondary-nav { margin-top: -6px; }
/* Each separated link remains together when the catalogue navigation wraps. */
.mainnav .sep { display: inline-block; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
button:disabled, .btn:disabled { opacity: .55; cursor: not-allowed; }
main > *, main section, main article { min-width: 0; }
@media (max-width: 640px) {
  .mainnav { padding-inline: 12px; }
  .mainnav .sep { margin-inline: .35em; }
  .mainnav.secondary-nav { font-size: 12px; }
  .plate.side, .plate.side.wide { width: 150px; margin-left: 18px; }
  .plates.two { gap: 18px; }
  .plates.two .plate img { width: 100%; height: auto; max-height: 300px; }
}
@media (max-width: 400px) {
  .plate.side, .plate.side.wide { float: none; margin: 0 auto 22px; }
}
/* Wide reference tables scroll on their own sheet, keeping the surrounding
   page within the viewport. The region remains reachable from the keyboard. */
.table-scroll { max-width: 100%; overflow-x: auto; margin: 20px 0; }
.table-scroll > table { margin: 0; }
.table-scroll > table:not(.def) { min-width: 36rem; }
.table-scroll:focus-visible { outline: 2px solid var(--rule); outline-offset: 3px; }
.table-scroll th, .table-scroll td { overflow-wrap: normal; }
.connection-settings { margin: 20px 0; }
.connection-settings summary { cursor: pointer; font-family: var(--display); font-variant: small-caps; letter-spacing: .04em; }
.connection-settings[open] summary { margin-bottom: 15px; }
.research-page .table-scroll { clear: both; }

/* Social marks use the same ink and oxblood as the printed catalogue. */
.social-links { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; }
.social-links a, .social-links a:visited {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; min-height: 32px; color: var(--muted); border: 0;
}
.social-links a:hover, .social-links a:focus-visible { color: var(--accent); border: 0; }
.social-links .sep { color: var(--rule); font-size: 13px; }
.social-icon { display: block; width: 19px; height: 19px; fill: currentColor; }
.mainnav .session-logout { display: inline; }
.mainnav .session-logout button {
  font: inherit; letter-spacing: inherit; font-variant: inherit;
  color: var(--ink-soft); text-decoration: none; padding: 0 2px;
}
.mainnav .session-logout button:hover { color: var(--accent); text-decoration: underline; }