/* Shared quality floor only. The two profiles share no visual language. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

/* Needed because .grid and .chips set display, which otherwise beats [hidden]. */
[hidden] { display: none !important; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--focus, currentColor);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------ top menu
   Structure only — each profile paints it in its own colours. */

.menu { position: relative; flex: 0 0 auto; }

.menu-btn {
  width: 44px; height: 44px; display: grid; place-content: center;
  border: 1px solid currentColor; border-radius: 8px;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.menu-btn svg { width: 22px; height: 22px; fill: currentColor; }

.menu-pop {
  position: absolute; top: calc(100% + .4rem); right: 0; z-index: 40;
  min-width: 190px; padding: .3rem; border-radius: 10px;
  border: 1px solid currentColor; display: grid; gap: .1rem;
}
.menu-pop a {
  display: flex; align-items: center; gap: .65rem;
  padding: .7rem .8rem; border-radius: 7px; text-decoration: none;
  font-size: .95rem; white-space: nowrap;
}
.menu-pop a svg { width: 18px; height: 18px; fill: currentColor; flex: 0 0 18px; }