/* The header's accessibility pass (tester, 2026-10-10: "the navigation menu needs to be more accessible") and its
   "My creations" link (base.html, signed in only). Loaded on every page after app.css.

   Contrast (WCAG AA, measured): nav text ink-2 on the header 8.1 light / 9.9 dark; the current page's blue on its tint
   4.7 light / 5.8 dark; the Make button's navy on amber 8.7. Focus rings: app.css's --focus (primary-400) is only 2.4:1
   on white, so the header and the account menu ring in --blue instead (5.5:1 light, 6.6:1 dark), above the 3:1 needed. */

.site-header :focus-visible, .menu :focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.site-header .nav a.nav-cta:focus-visible { outline-offset: 3px; }
.menu a:focus-visible, .menu button:focus-visible { outline-offset: -3px; background: var(--surface-3); }

/* My creations: a plain nav link with an icon, right after the Make button */
.nav a.nav-mine { display: inline-flex; align-items: center; gap: 6px; }
.nav a.nav-mine .i { width: 1.05em; height: 1.05em; flex: none; }

/* the header between the phone menu (760 px) and a wide screen: the account button shows just its picture, so the
   links never push it off the edge */
@media (min-width: 761px) and (max-width: 1040px) {
  .site-header .avatar-btn .name { display: none; }
  .site-header .avatar-btn { padding: 3px; }
  .nav { margin-left: 4px; }
  .nav a { padding: 8px 10px; }
}

/* tap targets: at least 44 x 44 px on touch screens */
@media (max-width: 760px) {
  .site-header .icon-btn { width: 44px; height: 44px; }
  .site-header .avatar-btn { min-width: 44px; min-height: 44px; justify-content: center; }
  .nav a, .nav .nav-theme { min-height: 44px; }
  .menu a, .menu button { min-height: 44px; }
}
@media (pointer: coarse) {
  .site-header .icon-btn { width: 44px; height: 44px; }
  .site-header .avatar-btn { min-width: 44px; min-height: 44px; }
  .menu a, .menu button { min-height: 44px; }
}