/* Interaction hardening without changing the visual direction. */
summary:focus-visible, [role="tabpanel"]:focus-visible, #main:focus-visible {
  outline: 3px solid var(--terracotta); outline-offset: 4px;
}
nav { flex-wrap: wrap; }
nav a { display: inline-flex; align-items: center; min-height: 44px; }
.tabs button { min-height: 44px; flex-shrink: 0; }
.tabs { scroll-padding-inline: 8px; }
.menu-category summary { min-height: 44px; scroll-margin-top: 90px; }
.menu-panel { scroll-margin-top: 90px; }
dialog { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
dialog .close { min-width: 44px; min-height: 44px; }
body:has(dialog[open]) { overflow: hidden; }
.invitation > *, .evening-copy > *, .visit > * { min-width: 0; }
@media (max-width: 650px) {
  nav { justify-content: flex-start; column-gap: 16px; row-gap: 4px; font-size: 14px; }
  nav .small { margin-left: auto; min-height: 44px; font-size: 14px; }
  .tabs button:focus-visible { outline-offset: -3px; }
  .sketch-opening .actions .button { height: auto; min-height: 56px; overflow-wrap: anywhere; }
}