/* ============================================================================
   ScrapAssure — shared application shell
   ----------------------------------------------------------------------------
   One header and one footer for every page. Before this, each of the five pages
   carried its own bespoke header markup and no footer at all, so the product
   read as five separately-built pages rather than one system.

   Constraints this file works under:
   • No build step. These are plain static files served by express.static, on a
     961 MB box that also runs two other production apps. No framework, no
     preprocessor, nothing to compile.
   • Every page defines its OWN :root palette (--sc-green / --gold / --accent /
     --s1… — five different vocabularies for the same ScrapCart colours). The
     shell therefore owns a private, prefixed --sa-* set instead of borrowing
     any of them, so it looks identical whichever page it is mounted on.
   • Page stylesheets contain bare element selectors (`nav{}`, `header{}`,
     `button{}`, `a{}`, `input{}`). The shell uses <div class="sa-…"> containers
     with ARIA roles rather than <header>/<nav>/<footer> elements so those rules
     cannot reach it, and it re-declares every property a bare `a` or `button`
     rule could otherwise leak in.

   Contrast: every colour pair here was measured by compositing alpha over the
   real parent chain, not eyeballed. Figures are in the commit message.
   ========================================================================== */

:root{
  --sa-page:#ffffff;
  --sa-tint:#f6faf6;
  --sa-tint-2:#eef7ee;
  --sa-border:#e0ede0;
  --sa-border-2:rgba(35,107,35,.28);
  --sa-ink:#1a2e1a;                 /* 14.6:1 on white  */
  --sa-ink-2:rgba(26,46,26,.78);    /*  7.1:1 on white  — nav links, body meta */
  --sa-ink-3:rgba(26,46,26,.72);    /*  5.7:1 on tint   — footer text          */
  --sa-accent:#236b23;              /*  6.6:1 on white, 6.0:1 on tint-2        */
  --sa-accent-2:#4d9e2f;            /* decoration only — never used as text    */
  --sa-danger:#b3261e;
  --sa-head:'Outfit',system-ui,-apple-system,sans-serif;
  --sa-sans:'Inter',system-ui,-apple-system,sans-serif;
  --sa-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
}

/* Page-supplied header chrome (the scanner's step pill, the metals desk's
   "last updated" box) is declared inline in the page so the ids exist at parse
   time for scripts that run before DOMContentLoaded; the shell then moves the
   nodes into its own header. Hidden here rather than with [hidden] because
   several of those children carry display:flex of their own. */
#sa-slot-src{display:none!important}

/* ── Header ───────────────────────────────────────────────────────────────── */
.sa-shell{
  position:sticky;top:0;z-index:400;
  background:var(--sa-page);
  border-bottom:1px solid var(--sa-border);
  font-family:var(--sa-sans);
  display:flex;align-items:center;
  /* reserve the bar before shell.js fills it, so nothing jumps on load */
  min-height:51px;
}
.sa-shell-in{
  flex:1 1 auto;max-width:1280px;margin:0 auto;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:9px 22px;
}
/* Source order is brand → burger → right block → nav, so that on a narrow
   screen the nav can drop to its own full-width row underneath without any
   absolute positioning. `order` puts them back in reading order on desktop. */
.sa-brand{order:1}
.sa-nav{order:2}
.sa-burger{order:3}
.sa-shell-right{order:4}

.sa-brand{
  display:flex;flex-direction:column;gap:1px;
  text-decoration:none;border:0;background:none;padding:0;margin:0;
  flex-shrink:0;line-height:1.15;
}
.sa-brand:hover .sa-brand-wm{color:var(--sa-accent)}
.sa-brand-wm{
  font-family:var(--sa-head);font-size:18px;font-weight:700;
  letter-spacing:-.2px;color:var(--sa-ink);text-transform:none;
  transition:color .15s;
}
.sa-brand-tg{
  font-family:var(--sa-sans);font-size:9px;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--sa-accent);
}

.sa-nav{display:flex;align-items:center;gap:2px;flex:1 1 auto;min-width:0;flex-wrap:wrap}
.sa-link{
  font-family:var(--sa-sans);font-size:13px;font-weight:500;line-height:1;
  letter-spacing:0;text-transform:none;text-decoration:none;white-space:nowrap;
  color:var(--sa-ink-2);background:transparent;
  border:1px solid transparent;border-radius:999px;
  padding:8px 12px;margin:0;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.sa-link:hover{background:var(--sa-tint);color:var(--sa-ink);text-decoration:none}
.sa-link.is-active{
  background:var(--sa-tint-2);border-color:var(--sa-border-2);
  color:var(--sa-accent);font-weight:600;
}
.sa-link:focus-visible,.sa-brand:focus-visible,.sa-out:focus-visible,.sa-burger:focus-visible{
  outline:2px solid var(--sa-accent);outline-offset:2px;
}

.sa-shell-right{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto}
.sa-slot{display:flex;align-items:center;gap:8px}

/* generic pill for whatever a page parks in the slot */
.sa-pill{
  font-family:var(--sa-sans);font-size:11px;font-weight:500;line-height:1.5;
  color:var(--sa-ink-2);background:var(--sa-tint);
  border:1px solid var(--sa-border);border-radius:999px;padding:4px 12px;
  white-space:nowrap;text-transform:none;letter-spacing:0;
}
.sa-pill b,.sa-pill span{color:var(--sa-accent);font-weight:600}
.sa-pill.ok{background:var(--sa-tint-2);border-color:var(--sa-border-2);color:var(--sa-accent)}
.sa-pill.warn{background:rgba(179,38,30,.07);border-color:rgba(179,38,30,.32);color:var(--sa-danger)}

/* "signed in as" — only rendered when there actually is a session */
.sa-who{
  display:flex;align-items:center;gap:7px;
  font-family:var(--sa-sans);font-size:11.5px;color:var(--sa-ink-2);
  background:var(--sa-tint);border:1px solid var(--sa-border);
  border-radius:999px;padding:4px 6px 4px 11px;max-width:270px;
}
.sa-who-dot{
  width:6px;height:6px;border-radius:50%;background:var(--sa-accent-2);
  flex-shrink:0;box-shadow:0 0 0 2px rgba(77,158,47,.22);
}
.sa-who-name{
  font-weight:600;color:var(--sa-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px;
}
.sa-out{
  font-family:var(--sa-sans);font-size:11px;font-weight:500;line-height:1;
  letter-spacing:0;text-transform:none;text-decoration:none;white-space:nowrap;
  color:var(--sa-ink-2);background:var(--sa-page);
  border:1px solid var(--sa-border);border-radius:999px;
  padding:5px 10px;margin:0;cursor:pointer;
}
.sa-out:hover{border-color:var(--sa-danger);color:var(--sa-danger);background:var(--sa-page)}

/* anonymous: a quiet hint, never a list of admin destinations */
.sa-anon{
  font-family:var(--sa-sans);font-size:11.5px;color:var(--sa-ink-2);
  white-space:nowrap;
}
.sa-anon a{color:var(--sa-accent);text-decoration:none;font-weight:600}
.sa-anon a:hover{text-decoration:underline}

.sa-burger{
  display:none;align-items:center;justify-content:center;gap:6px;
  font-family:var(--sa-sans);font-size:12px;font-weight:600;line-height:1;
  letter-spacing:0;text-transform:none;
  color:var(--sa-ink-2);background:var(--sa-page);
  border:1px solid var(--sa-border);border-radius:8px;
  padding:8px 11px;margin:0;cursor:pointer;
}
.sa-burger:hover{background:var(--sa-tint);color:var(--sa-ink)}
.sa-burger-i{display:block;width:14px;height:9px;position:relative;flex-shrink:0}
.sa-burger-i::before,.sa-burger-i::after,.sa-burger-i i{
  content:'';position:absolute;left:0;right:0;height:1.5px;background:currentColor;border-radius:2px;
}
.sa-burger-i::before{top:0}
.sa-burger-i i{top:3.75px}
.sa-burger-i::after{bottom:0}

/* ── Footer ───────────────────────────────────────────────────────────────── */
/* Sticky footer. On a short page (verify, the signed-out dashboard) the footer
   was landing directly under the content with a screen of blank white beneath
   it, which reads as a broken page rather than a short one.

   Flex column on <body> rather than the usual `position:sticky; top:100vh`
   trick: index.html sets `overflow-x:hidden` on <body>, which computes
   overflow-y to `auto`, and a scrollable ancestor silently kills sticky
   positioning. Flex is unaffected by that.

   `margin:0` because metals.html is the one page that never zeroed the UA's
   default 8px — harmless before, but with min-height:100vh it would mean a
   permanent scrollbar. */
body{min-height:100vh;margin:0;display:flex;flex-direction:column}
body>*{flex-shrink:0}   /* content taller than the viewport must not squash the chrome */

.sa-foot{
  font-family:var(--sa-sans);
  background:var(--sa-tint);
  border-top:1px solid var(--sa-border);
  /* Takes up the slack on a short page. On a long page there is no slack, so
     this collapses to nothing and the footer simply follows the content — its
     own 32px top padding and border carry the separation. */
  margin-top:auto;
  padding:32px 22px 22px;
  color:var(--sa-ink-3);
}
.sa-foot-in{
  max-width:1280px;margin:0 auto;
  display:flex;gap:38px;flex-wrap:wrap;align-items:flex-start;
}
.sa-foot-brand{flex:1 1 260px;min-width:220px}
.sa-foot-brand .sa-brand{margin-bottom:9px}
.sa-foot-note{font-size:12.5px;line-height:1.65;color:var(--sa-ink-3);max-width:34em;margin:0}
.sa-foot-note a{color:var(--sa-accent);font-weight:600;text-decoration:none}
.sa-foot-note a:hover{text-decoration:underline}
.sa-foot-col{flex:0 0 auto;min-width:130px}
.sa-foot-h{
  font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--sa-ink-3);margin:0 0 10px;
}
.sa-foot-col ul{list-style:none;margin:0;padding:0}
.sa-foot-col li{margin:0 0 7px}
.sa-foot-col a,.sa-foot-bar a{
  font-size:12.5px;font-weight:500;line-height:1.4;letter-spacing:0;text-transform:none;
  color:var(--sa-ink-3);text-decoration:none;
}
.sa-foot-col a:hover,.sa-foot-bar a:hover{color:var(--sa-accent);text-decoration:underline}
.sa-foot-col a[target]::after{content:' ↗';font-size:10px;opacity:.75}
.sa-foot-bar{
  max-width:1280px;margin:26px auto 0;padding-top:15px;
  border-top:1px solid var(--sa-border);
  display:flex;gap:8px 20px;flex-wrap:wrap;justify-content:space-between;
  font-size:11.5px;color:var(--sa-ink-3);
}
.sa-foot-bar p{margin:0}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media(max-width:900px){
  .sa-shell-in{gap:12px;padding:9px 16px}
  .sa-burger{display:inline-flex;order:2}
  .sa-shell-right{order:3}
  .sa-anon-lead{display:none}          /* "Staff?" — the link alone is enough */
  .sa-nav{
    display:none;order:9;flex-basis:100%;flex-direction:column;align-items:stretch;
    gap:2px;padding:6px 0 4px;border-top:1px solid var(--sa-border);margin-top:2px;
  }
  .sa-nav.is-open{display:flex}
  .sa-link{padding:11px 12px;border-radius:8px;font-size:14px}
  .sa-shell-right{gap:8px}
  .sa-who{max-width:190px}
  .sa-who-name{max-width:88px}
  .sa-foot{padding:26px 16px 20px}   /* margin-top stays auto — see the rule above */
  .sa-foot-in{gap:26px}
}
/* At phone width the header has to stay ONE row — a sticky bar that wraps to
   two eats a quarter of the viewport. Everything optional gets dropped until
   brand + menu + who fit across 375px. */
@media(max-width:560px){
  .sa-anon{display:none}          /* the nav already carries the same two links */
  .sa-brand-tg{display:none}
  .sa-burger-t{display:none}      /* icon only; aria-label still says "Main menu" */
  .sa-burger{padding:9px 10px}
  .sa-brand-wm{font-size:16px}
  .sa-shell-in{gap:9px;padding:8px 13px}
  .sa-who{max-width:none;padding:3px 4px 3px 9px;font-size:11px}
  .sa-who-name{max-width:76px}
  .sa-out{padding:5px 8px}
  .sa-foot-col{min-width:calc(50% - 19px)}
}

/* The certificate print stylesheet on the scanner already hides page chrome;
   the shell has to opt out of print everywhere, on every page, by itself. */
@media print{
  .sa-shell,.sa-foot,#sa-slot-src{display:none!important}
}