/* The header, one for every page of theauctioneer.ai: the landing page and its position screen (index.html),
   the docs and the two legal pages (docs.css), and the 404. Carl, 10 October 2026: "the header has smaller
   margins than rest of page", then "between docs and home page there is different margin and also style of
   auctioneer text and logo, i want synchronicity across all pages". Each page had carried its own copy of
   these values, and the copies had drifted: a 15px wordmark on the docs and an 18px one on the landing page,
   the mark 24px in on the docs and 32px in on the landing page, 20px down and 18px down, and a pure white
   wordmark on the 404.

   Each of those pages loads this sheet, and none of them sets the lockup, the side margin or the top clear
   space itself (test/site-header.test.mjs). It is under /shared/, which _headers serves revalidating, so a
   change here needs no ?v= bump. Its selectors lead with "header", so they outrank the pages' own
   single-class rules whatever the load order.

   The mark is the app icon with its ink square taken away (assets/brand/auctioneer-mark-paper.svg): hard
   corners, no border or shadow, 40px (32px on phones), never under 24px, and clear space of half its height
   (the R36 brand kit). */

:root {
  --page-x: 18px;   /* the page's side margin: the header's, and the position screen's own content margin */
  --hdr-top: 16px;  /* the clear space above the mark: half its height */
}
@media (min-width: 641px) { :root { --hdr-top: 20px; } }
@media (min-width: 721px) { :root { --page-x: 24px; } }
/* from 901px the position screen is the golden split (position-golden.css), whose margin is 6.2vw, 24 to 89px */
@media (min-width: 901px) { :root { --page-x: clamp(24px, 6.2vw, 89px); } }

/* the lockup: the mark, 12px, the name. 36px high at least, the height of the header's buttons: on a phone,
   where the mark is 32px, the buttons hold the landing page's row at 36px and nothing holds the docs' row
   open, so without this the mark would sit 2px lower on the one than on the other. The mark's shape starts
   25.2% in from its box's edge (x=504 of 2000 in the SVG): 10px at 40px, 8px at 32px, so the lockup is pulled
   left by that much, and the mark itself, not its empty box, lands on the margin, in line with the text under it. */
header .brand { display: flex; align-items: center; gap: 12px; flex: none; min-height: 36px; margin-left: -10px; color: var(--paper, #F3F2F2); text-decoration: none; }
header .brand:hover { color: #fff; }
header .brand img, header .brand svg { display: block; flex: none; width: 40px; height: 40px; }
header .wordmark { font-weight: 600; font-size: 18px; letter-spacing: normal; white-space: nowrap; }

/* where the header sits: the landing page's and the 404's float over the page, the docs' and the legal
   pages' are a bar in the flow; both start the mark the same distance in and down */
header.nav { top: var(--hdr-top); left: var(--page-x); right: var(--page-x); }
header.top { padding: var(--hdr-top) var(--page-x); }

/* a phone: the mark alone, at 32px */
@media (max-width: 720px) { header .wordmark { display: none; } }
@media (max-width: 640px) {
  header .brand img, header .brand svg { width: 32px; height: 32px; }
  header .brand { margin-left: -8px; }
}