/* ============================================================================
   site-header.css — the SHARED CabDesign suite chrome
   ----------------------------------------------------------------------------
   Two things live here, both driven ENTIRELY by the theme tokens that
   shared/theme.css owns (never a hardcoded palette hex — the fixed white bevel
   on the accent mark is the one deliberate, theme-independent effect and is
   annotated):

     1. .suite-brand  — the reusable brand mark used by BOTH headers:
                          the accent glyph tile + "CabDesign" (the primary
                          wordmark) + an optional page/module sub-line and an
                          optional "built by Bespoke Woodcraft Studio" credit.
                        CabDesign is always the loud line; Bespoke Woodcraft
                        Studio is a small, muted "built by" credit — never the
                        primary brand. (Guarded by site-lint R7.)

     2. .topbar       — the dark-walnut app-bar SHELL that was copy-pasted
                        verbatim into 9 tool pages. Extracted here unchanged so
                        the app bar looks identical after the refactor; only the
                        brand text hierarchy is corrected.

   USAGE
     App tool page (dark bar):
       <link rel="stylesheet" href="/shared/site-header.css">
       <header class="topbar">
         <a class="suite-brand" href="/index.html"
            aria-label="CabDesign home, built by Bespoke Woodcraft Studio">
           <span class="suite-brand-mark" aria-hidden="true">✸</span>
           <span class="suite-brand-text">
             <span class="suite-brand-name">CabDesign</span>
             <span class="suite-brand-sub">Materials Library</span>
             <span class="suite-brand-credit">built by Bespoke Woodcraft Studio</span>
           </span>
         </a>
         <nav data-tool-nav data-module="materials" aria-label="CabDesign modules"></nav>
         <div data-account-chip></div>
       </header>

     Marketing header (light bar) — keep the page's own .nav/.nav-links/.nav-cta
     layout, just drop the shared brand mark in (no .suite-brand-sub):
       <a class="suite-brand" href="#top"
          aria-label="CabDesign home, built by Bespoke Woodcraft Studio">
         <span class="suite-brand-mark serif" aria-hidden="true">✸</span>
         <span class="suite-brand-text">
           <span class="suite-brand-name">CabDesign</span>
           <span class="suite-brand-credit">built by Bespoke Woodcraft Studio</span>
         </span>
       </a>

     Guide / content page (light breadcrumb) — drop the brand mark into the page's
     own slim nav bar as class="suite-brand suite-breadcrumb"; full recipe +
     verified contrast are documented at variant 3 near the end of this file.

   Any page-specific tweak (e.g. cabinet-designer.html spans the app bar across a
   CSS grid) stays on that page as a SCOPED, higher-specificity override
   (.page-layout > .topbar { … }) so it wins over this shared base regardless of
   stylesheet order — this file never needs to know about a page's layout.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. The reusable brand mark. Base styles = the LIGHT context (marketing nav):
      the wordmark inherits the page ink; the sub/credit use light-safe muted
      tokens. The dark app-bar context is layered on under `.topbar` below.
   --------------------------------------------------------------------------- */
.suite-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.suite-brand:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 6px;
}

/* The accent glyph tile. --on-accent-fill / --on-accent are the theme's
   verified-AA fill+text pair for any accent-filled chip, so the mark reads on
   both the light nav and the dark bar with one rule. */
.suite-brand-mark {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: var(--on-accent-fill);
  color: var(--on-accent);
  font-size: 14px;
  line-height: 1;
}

.suite-brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;             /* let a long wordmark wrap instead of pushing the bar */
  line-height: 1.06;
}

/* "CabDesign" — the primary wordmark, always the loudest line. */
.suite-brand-name {
  font-weight: 800;
  font-size: .96rem;
  letter-spacing: -0.01em;
  color: inherit;
}

/* Page / module name (app pages only). */
.suite-brand-sub {
  font-weight: 700;
  font-size: .72rem;
  color: var(--accent-text);
}

/* "built by Bespoke Woodcraft Studio" — clearly secondary: small + muted. */
.suite-brand-credit {
  margin-top: 1px;
  font-weight: 600;
  font-size: .62rem;
  letter-spacing: .01em;
  color: var(--ink-soft);
  white-space: nowrap;
}

.suite-brand:hover .suite-brand-name {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   2. The dark-walnut app-bar shell (extracted verbatim from the 9 tool pages).
      Uses the walnut / gold header aliases, all first-visit-safe in theme.css.
   --------------------------------------------------------------------------- */
.topbar {
  background: linear-gradient(160deg, var(--walnut) 0%, var(--walnut-2) 100%);
  color: var(--header-text);
  border-bottom: 3px solid var(--gold);
  padding: 12px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 40;
}

/* ---------------------------------------------------------------------------
   The brand mark inside the dark bar: scaled up, cream wordmark, gold kicker.
   Scoping under `.topbar` means every app page gets the dark treatment for free
   just by dropping <a class="suite-brand"> inside its .topbar.
   --------------------------------------------------------------------------- */
.topbar .suite-brand {
  margin-right: auto;   /* push the module switcher + account chip to the right */
  gap: 12px;
}
.topbar .suite-brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  font-size: 20px;
  /* fixed white top-bevel highlight on the accent mark — a deliberate,
     theme-independent sheen, matching the original hand-copied topbar. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.topbar .suite-brand-name {
  font-size: 1.06rem;
  line-height: 1.05;
  color: var(--header-text);
}
/* Page / module name — the most load-bearing "which tool is this?" line for a
   first-time visitor, so it stays clearly legible: mixed-case, gentle tracking,
   ~.8rem. It reads subordinate to the cream wordmark via size (.8 vs 1.06rem),
   the gold hue, and the lighter weight — not via an illegible tiny kicker. */
.topbar .suite-brand-sub {
  font-size: .8rem;
  line-height: 1.2;
  letter-spacing: .04em;
  color: var(--gold-soft);
}
.topbar .suite-brand-credit {
  margin-top: 0;
  font-size: .58rem;
  line-height: 1.15;
  letter-spacing: .04em;
  /* Muted cream: the bright --header-text at 72% alpha, composited over the walnut
     app-bar gradient. Verified WCAG AA >=4.5:1 on BOTH gradient stops (--walnut AND
     --walnut-2) across all 10 themes + the un-themed fallback: worst case 5.16:1
     (maple, at the lighter --walnut-2 stop), best 8.63:1. The prior ad-hoc 58% mix
     fell to 3.97:1 (maple), 4.14:1 (birch-sage) and 4.46:1 (porcelain-blue) at the
     --walnut-2 stop — sub-AA — which is why it is pinned by number here. */
  color: color-mix(in srgb, var(--header-text) 72%, transparent);
}

/* ---------------------------------------------------------------------------
   Mobile: ONE shared wordmark / app-bar scale-down for the narrow viewport.
   Consolidated here because it had been independently reinvented per page
   (systainer-bank.html at 768px, cut-list-optimizer.html at 720px, with
   divergent sizes; the other dark-topbar pages had none). 760px is the single
   suite breakpoint; page-local @media rules no longer touch the wordmark.
   Placed after the base .topbar rules so, at equal specificity, source order
   lets it win inside the query.
   --------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .topbar { padding: 10px 14px; gap: 12px; }
  .topbar .suite-brand-name { font-size: .98rem; }
  .topbar .suite-brand-mark { width: 32px; height: 32px; font-size: 17px; }
}

/* ---------------------------------------------------------------------------
   2b. THE RETURN CHIP (P114, D16 section 4) — "← Back to the Designer · <project>".
       Rendered ONCE by shared/tool-nav.js into every app page's [data-tool-nav]
       mount, adjacent to the Tools launcher, whenever the Designer recorded a
       fresh working project. A QUIET ghost-pill that borrows the launcher's own
       --header-text grammar (color-mix tints) so the two controls read as one
       family on the dark bar, in every theme, with zero new hex. The full label
       truncates a long project name with ellipsis (the title attribute + the
       homepage resume chip both carry the full name); below 720px it collapses
       to just "← Designer" so the bar never overflows.
   --------------------------------------------------------------------------- */
.bws-return-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  vertical-align: middle;
  margin-right: 10px;                 /* separate from the Tools pill that follows */
  text-decoration: none;
  font-family: inherit;
  font-weight: 700;
  font-size: .82rem;
  line-height: 1;
  color: var(--header-text);
  background: color-mix(in srgb, var(--header-text) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--header-text) 22%, var(--header-line));
  border-radius: 9px;
  padding: 8px 11px;
  min-height: 40px;
  max-width: 340px;
  white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.bws-return-chip:hover {
  background: color-mix(in srgb, var(--header-text) 16%, transparent);
}
.bws-return-chip:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}
.bws-return-ico { flex: none; font-size: .95rem; opacity: .9; }
.bws-return-full { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.bws-return-lead { flex: none; }
.bws-return-proj {
  min-width: 0;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  opacity: .82;
}
/* the " · " separator, kept out of the markup so the link's accessible name stays clean */
.bws-return-proj::before { content: "·"; margin-right: 6px; opacity: .6; font-weight: 400; }
.bws-return-short { display: none; }
@media (max-width: 719px) {
  .bws-return-chip { max-width: none; }
  .bws-return-full { display: none; }
  .bws-return-short { display: inline; }
}

/* ---------------------------------------------------------------------------
   3. GUIDE-PAGE BREADCRUMB variant  ( class="suite-brand suite-breadcrumb" )
      ----------------------------------------------------------------------
      The THIRD documented recipe, alongside the app-tool (.topbar) and the
      marketing-nav variants above. It is a LIGHT, single-line, NON-sticky,
      NO-gold-border brand lockup for the content / guide pages, which carry
      their own slim horizontal nav bar (home link + section anchors) rather
      than the dark .topbar app shell. Drop it in as the FIRST child of the
      guide page's existing <nav>, replacing the old back-link + page-title:

        <a class="suite-brand suite-breadcrumb" href="/index.html"
           aria-label="CabDesign home · LEGRABOX install · built by Bespoke Woodcraft Studio">
          <span class="suite-brand-mark" aria-hidden="true">✸</span>
          <span class="suite-brand-text">
            <span class="suite-brand-name">CabDesign</span>
            <span class="suite-brand-sub">LEGRABOX install</span>
            <span class="suite-brand-credit">built by Bespoke Woodcraft Studio</span>
          </span>
        </a>

      CabDesign is the bold PRIMARY line; the guide name + the "built by" credit
      follow inline, demoted by size + a lower opacity of the SAME ink — so the
      credit's contrast tracks the nav's own (already-AA) text colour rather than
      a fixed token, and stays legible on BOTH light and dark guide bars.

      Ink source: the lockup defaults to --text (the 5 light guide bars). The 2
      guide bars that paint a dark --header-bg background (drawer-fridge-options,
      quiet-workshop-fridge) add ONE scoped line in their own <style>:
        nav .suite-brand.suite-breadcrumb { color: var(--header-text); }
      which out-specifies the default (0,2,1 > 0,2,0) so the ink flips to cream.

      The double-class colour selector (0,2,0) intentionally out-specifies each
      guide nav's own `.nav a` / `nav a` link colour (0,1,1 / 0,0,2) so the
      wordmark reads at full strength, not the nav's muted link ink.

      Verified: the credit at .72 opacity clears WCAG AA 4.5:1 on every guide bar
      across all 10 themes — worst case 5.16:1 (maple, light bar) / 6.08:1 (maple,
      dark bar); the guide name at .82 opacity clears it with more room.
   --------------------------------------------------------------------------- */
.suite-brand.suite-breadcrumb {
  gap: 9px;
  margin-right: auto;                 /* brand left, the nav's section links to the right */
  color: var(--text);                 /* light-bar default ink; dark bars flip it per-page */
  white-space: nowrap;
  padding: 0;                          /* neutralise any `nav a` pill padding on the guide bars */
  opacity: 1;                          /* neutralise the dark fridge bars' `nav a{opacity:.7x}` dimming */
}
/* the wordmark is the brand, not a section link: no guide-nav hover-pill behind it. */
.suite-brand.suite-breadcrumb:hover { background: none; }
.suite-breadcrumb .suite-brand-mark {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 12px;
  box-shadow: none;                   /* the white bevel is a .topbar-only sheen */
}
.suite-breadcrumb .suite-brand-text {
  flex-direction: row;
  align-items: baseline;
  gap: 0;
  line-height: 1;
}
.suite-breadcrumb .suite-brand-name {
  font-size: .95rem;
  color: inherit;
}
.suite-breadcrumb .suite-brand-sub {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
  opacity: .82;
}
.suite-breadcrumb .suite-brand-credit {
  margin-top: 0;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  color: inherit;
  opacity: .72;
}
/* inline " · " separators before the sub + credit, kept OUT of the markup so the
   link's accessible name stays clean. They inherit each segment's ink + opacity. */
.suite-breadcrumb .suite-brand-sub::before,
.suite-breadcrumb .suite-brand-credit::before {
  content: "·";
  margin: 0 .5em;
  font-weight: 400;
}
@media (max-width: 760px) {
  /* keep the wordmark legible but tighten the inline credit on the smallest bars */
  .suite-breadcrumb .suite-brand-credit { display: none; }
}

/* ---------------------------------------------------------------------------
   4. PRINT IDENTITY BLOCK (P88, D9 OQ5) — the shop's own name/contact/logo on
      printed outputs. Populated by shared/print-identity.js from the
      company-standards doc (shared/bws-company.js); shared here so the cut
      list print, the sheet-layout print, and the Designer's own drawing
      print all carry the identity in the SAME place, in the SAME style,
      instead of three divergent headers.

      Markup (one line, wherever a page wants its printed masthead):
        <div class="print-identity" id="print-identity" hidden></div>
      print-identity.js fills it and clears the [hidden] attribute ONLY when
      a name is actually on file — so a signed-out visitor, a local-only
      session, or a shop that never filled in Company Standards prints with
      NO identity chrome at all (never an empty box).

      Screen-invisible always (this is print-only content); shown only
      under @media print, and only when not [hidden]. */
  .print-identity { display: none; }
/* lint-ok-hex-start: print media renders on physical white paper for every theme,
   matching the existing per-page print blocks (cabinet-designer.html,
   designer-outputs.html, cut-list-optimizer.html) — black ink on white regardless
   of the on-screen theme. */
@media print {
  .print-identity:not([hidden]) {
    display: block;
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 1.5px solid #888;
  }
  .print-identity-row { display: flex; align-items: center; gap: 12px; }
  .print-identity-logo { width: 44px; height: 44px; object-fit: contain; flex: none; }
  .print-identity-name { font-weight: 800; font-size: 15px; color: #000; }
  .print-identity-meta { font-size: 11px; color: #333; margin-top: 2px; }
}
/* lint-ok-hex-end */