/* =====================================================================================================
   uco-header.css - 20 Sep 2026. THE HEADER, ONE SET OF RULES FOR EVERY PAGE AND BOTH CONTROL PANELS.

   Tony, 20 Sep, looking at three pages side by side: *"they should all be identical"* and then, precisely:

     - *"we should be on one line everywhere for UCO flush left"*
     - *"sign in was always flush right - it should be"*
     - *"when those two buttons fall on top of UCO... two options, drop them below as you have here
        (swapped) or remove the words get the app if they still wont fit on the same top line"*
     - *"if Match/Style/Quick Score/Scorer are an issue anywhere, they are secondary and would need to be
        re-housed case by case"*

   Every page carries its own copy of the header markup, so before this file each page's header drifted:
   the brand wrapped onto one, two or three lines depending on what sat beside it, the control panels said
   "Sign in / Create account" while the public pages said "Sign Up / Sign In", and the buttons sat in a
   different order. Nothing about a header should change when somebody moves from one page to another.

   LOADED AFTER each page's own <style> block, so these rules win without needing !important.

   HOW IT BEHAVES, WIDEST TO NARROWEST:
     1. Brand on ONE line, flush left. It never wraps; it scales down with the viewport instead, with a
        floor so it stays readable on the narrowest phone.
     2. Sign Up / Sign In flush RIGHT, the app button inboard of it (row-reverse: the markup order is left
        alone, so no page's script has to change).
     3. No room for both sets of words? The app button drops its label and shows its icon only - Tony's
        second option, taken BEFORE the row is broken, because keeping the top line intact is worth more
        than the words.
     4. Still no room? The buttons drop onto their own line, still flush right. That is his first option,
        and the last resort here.
   ===================================================================================================== */

/* 0. THE SAME SIDE MARGINS ON EVERY PAGE. They were 16, 20 or 40px depending on the page, which is
   exactly the kind of drift this file exists to stop. One rule, scaling with the screen. */
header { padding: 20px clamp(16px, 4vw, 40px); }

/* The whole brand block is one invisible link home - Tony, 20 Sep: "clicking anywhere on the uco logo
   should link back to home but just an invisible hyperlink". Both lines, and the space around them, in
   one target; no underline, no link colour, nothing that reads as a link. */
header a:has(.brand-logo) { display: inline-block; text-decoration: none; color: inherit; }
header a:has(.brand-logo):hover .brand-logo { filter: brightness(1.12); }
header a:has(.brand-logo):focus-visible { outline: 2px solid #3b82f6; outline-offset: 4px; border-radius: 6px; }

/* 1. THE BRAND: one line, always. */
header .brand-logo {
    white-space: nowrap;
    font-size: clamp(14px, 4.2vw, 20px);
    line-height: 1.15;
}
header .console-tag { white-space: nowrap; }

/* The header itself: one row while it fits, wrapping only when it must. */
header { flex-wrap: wrap; gap: 10px 16px; }

/* 1b. THE SECONDARY BUTTONS (the control panels' Match / Style / Camera jumps) sit CENTRED between the
   brand and the pair on the right - Tony, 20 Sep: "the header is the lead with the other buttons secondary,
   in this case they should be centered". They used to hug the brand, which read as part of it. Taking the
   leftover space and centring within it keeps them equally clear of both, at every width, without any page
   needing to know what the others are doing. */
header .uco-jump { flex: 1 1 auto; display: flex; justify-content: center; }
header .uco-jump[hidden] { display: none; }
/* Tony chose the PAGE's centre over the midpoint between its neighbours - 20 Sep, looking at a narrow
   window: *"centered on page not gaps either side"*. The first version only did that above 1100px, on the
   reasoning that a narrower bar had no clear space to spare; he looked at the fallback and it reads as
   off-centre, because it is. So the true centre now applies at EVERY width the header still fits on one row.

   A 1fr / auto / 1fr grid rather than the absolute pin that was here before: the middle column's centre IS
   the bar's centre whatever the brand or the buttons measure, it cannot overlap them the way an absolutely
   positioned box can, and it needs no magic number. Scoped with :has() to headers that actually carry a jump
   nav - only the two control panels - so the eleven public pages keep the flex header above, untouched.
   Below 700px the header wraps and the grid is dropped; a centred nav on a phone is not the ask. */
@media (min-width: 1101px) { header { position: sticky; } }
@media (min-width: 701px) {
    header:has(.uco-jump:not([hidden])) {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }
    header:has(.uco-jump:not([hidden])) > * { grid-column: 1; justify-self: start; }
    /* margin:0 matters - the panels give this nav a 12px side margin of its own, and in a centred column
       that margin is a 12px shove off centre. Measured, not assumed: it read 705 against a centre of 693
       until this line. */
    header:has(.uco-jump:not([hidden])) > .uco-jump { grid-column: 2; justify-self: center; margin: 0; flex: 0 0 auto; }
    header:has(.uco-jump:not([hidden])) > .header-right,
    header:has(.uco-jump:not([hidden])) > .acct-status { grid-column: 3; justify-self: end; }
}

/* 2. THE BUTTONS: flush right, sign-in outermost, app button inboard of it.
   row-reverse flips the pair visually without touching anybody's markup. */
header .header-right,
header .acct-status {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    flex-shrink: 0;
}

/* The control panels keep an empty status slot (#acctStatusText) beside their button - it used to print
   "Not signed in". Empty, it still took a gap, and in this right-to-left pair it sat OUTSIDE the button,
   holding Sign Up 12px off the edge while every other page sat flush. Tony spotted it in a screenshot.
   Nothing prints there any more, so it never takes space. */
header .acct-status #acctStatusText:empty { display: none; }

/* Both buttons share one height so the pair reads as one object, and both clear the 44px finger target. */
header .signin-link,
header .uco-app-btn {
    min-height: 44px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* 3. TIGHT: the app button keeps its icon and loses its words, so the top line survives.
   uco-install.js already does this below 640px; this is the same rule, stated here so the header's
   behaviour is readable in one place, and so it starts a little earlier where the brand is also shrinking. */
@media (max-width: 760px) {
    header .uco-app-btn .uco-app-label { display: none; }
    header .uco-app-btn { padding: 0 12px; }
}

/* 4. NARROWEST: the pair drops onto its own line - still flush right, still the same two buttons. */
@media (max-width: 520px) {
    header .signin-link { padding: 0 14px; font-size: 12px; }
}

/* =====================================================================================================
   THE FOOTER, same job - Tony, 20 Sep: *"Footer should be the same - prevent any drift"*.
   Every page already carries the same links in the same order; what drifted was the heading (the control
   panels said "Universal Interoperability Certification Profile", fixed in those two files) and the
   spacing, which each page set for itself. These rules set the shape once, for all of them.
   ===================================================================================================== */
.compatibility-bar { border-top: 1px solid #1e293b; background: #090d16; padding: 40px clamp(16px, 4vw, 40px);
    text-align: center; margin-top: 60px; }
.compatibility-title { font-size: 11px; font-weight: 800; color: #475569; text-transform: uppercase;
    letter-spacing: 1.5px; margin-bottom: 20px; }
.compatibility-badges { display: flex; justify-content: center; align-items: center; gap: 40px; flex-wrap: wrap; }
.compat-item { font-size: 12px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.5px; }
a.compat-item { color: #64748b; text-decoration: none; border-bottom: 1px solid transparent; }
a.compat-item:hover { color: #f8fafc; border-bottom-color: #3b82f6; }
@media (max-width: 700px) { .compatibility-badges { gap: 18px; } }