/* ════════════════════════════════════════════════════════════════
   layout.css · Perfumed Pages canonical chrome
   Generated 2026-05-22 · Nav unification sweep
   ════════════════════════════════════════════════════════════════
   Loaded by every page in the dashboard. Provides:
     · --page-max-width tokens by [data-layout]
     · .masthead + .subnav (canonical top nav)
     · .partners-bar (direct-response pages only)
     · .site-footer (canonical bottom)
     · Auth-aware stub via [data-auth]

   Existing CSS variables expected on each page:
     --teal --teal-dark --lime --cream --rule --text --muted --mint
     --serif --mono --sans
   Fallbacks declared below in case the page is missing any.
   ════════════════════════════════════════════════════════════════ */

:root {
  --teal:      #004751;
  --teal-dark: #002E36;
  --lime:      #D3F781;
  --cream:     #FAF9F5;
  --rule:      #D0CAC0;
  --text:      #1C2B2E;
  --muted:     #3D5A5F;
  --mint:      #EEF5F0;
  --serif:     'Instrument Serif', Georgia, serif;
  --mono:      'Space Mono', ui-monospace, monospace;
  --sans:      'DM Sans', system-ui, sans-serif;
}

/* ─── Width tokens by page layout ─── */
body                                     { --page-max-width: 800px; } /* default: long-form */
body[data-layout="direct-response"]      { --page-max-width: 1080px; }
body[data-layout="long-form"]            { --page-max-width: 800px; }
body[data-layout="focused-work"]         { --page-max-width: 760px; }

/* ─── Canonical content wrapper (opt-in) ─── */
.canonical-content {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ════════════════════════════════════════════════════════════════
   CANONICAL TOP NAV · single row
   Brand mark on the left, nav links on the right, all in one bar.
   The legacy two-row .masthead+.subnav structure is collapsed via
   .subnav-v2 (one element holds brand + links).
   ════════════════════════════════════════════════════════════════ */

/* Hide the old two-row structure if any page still has it */
.masthead { display: none; }
.subnav   { display: none; }

/* The new single-row nav */
.subnav-v2 {
  background: var(--teal);
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 1.5rem;
  height: 48px;
  border-bottom: 2px solid var(--lime);
  position: sticky;
  top: 0;
  z-index: 100;
  flex-wrap: wrap;
}
.subnav-v2 .subnav-brand {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--lime);
  text-decoration: none;
  margin-right: auto;
  padding: 0 0.75rem 0 0;
  letter-spacing: 0;
  text-transform: none;
  border-right: none;
}
.subnav-v2 .subnav-brand:hover { color: var(--cream); }
.subnav-v2 a:not(.subnav-brand) {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(250, 249, 245, 0.55);
  text-decoration: none;
  padding: 0 0.9rem;
  height: 100%;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.subnav-v2 a:not(.subnav-brand):hover { color: var(--lime); }
.subnav-v2 a.active {
  color: var(--lime);
  background: rgba(211, 247, 129, 0.08);
}

/* Auth-aware stub: when auth wires, set body[data-auth="signed-out"] */
body[data-auth="signed-out"] .subnav-v2 a[data-members] { display: none; }
/* Mirror image: the Sign in link is for signed-out visitors only. Injected by
   auth-nav.js on public pages. Hidden by default so it never flashes visible
   to a member before /auth/me answers. */
body[data-auth="signed-in"] .subnav-v2 a[data-guest] { display: none; }
.subnav-v2 a[data-guest] { margin-left: auto; font-weight: 600; }

/* ════════════════════════════════════════════════════════════════
   PARTNERS MINI-BAR · direct-response pages only
   ════════════════════════════════════════════════════════════════ */

.partners-bar {
  background: transparent;
  border-bottom: 1px solid var(--rule);
  padding: 6px 1.5rem;
  display: flex;
  gap: 14px;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: 12px;
  font-family: var(--sans);
  color: var(--muted);
  line-height: 1.3;
}
.partners-bar .partners-bar-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 700;
}
.partners-bar .partners-bar-text {
  color: var(--muted);
  flex: 1;
  font-size: 12px;
}
.partners-bar a {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 71, 81, 0.4);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.partners-bar a:hover {
  border-bottom-color: var(--teal);
}

/* ════════════════════════════════════════════════════════════════
   BOTTOM CHROME · canonical · 2026-07-31 consistency sweep
   ----------------------------------------------------------------
   An audit of the LIVE site found the bottom of the page rendering
   six different ways. Measured, not guessed. Root causes:

     1. .footer-nav (the "← Archive / Page / All Tools →" bar) had
        six visual variants across the site:
          materials (44 pp) teal   + 3px lime  + 1.1rem/2rem, static
          tools/index       teal-dark, no border, 1rem/2rem, static
          flashcards        teal,  no border,  14px/24px,     static
          classifieds,
          sniff-notepad,
          smell-word-cloud  teal-dark, STICKY bottom:0, 12px/0
          hall-of-fame      teal   + 3px GOLD  + gold links
          origins maps v5/v6 teal  + 3px lime  + 0.65rem/2rem
        …and was missing entirely from seven tools pages that still
        shipped the CSS for it. Measured heights ran 39-54px.

     2. .site-footer measured 52-148px tall page to page, because
        terms.html, thanks.html and tools/members-library.html style
        a bare `footer {}` element selector, and enroll.html,
        welcome-back.html and events-archive.html kept legacy
        `.site-footer` class rules alongside a duplicate footer.
        terms.html additionally had `footer em { display:block }`,
        which broke the wordmark onto two lines.

     3. Four tools pages set padding on <body>, so the top nav and
        the footer rendered 1225px wide inset 20px from the window
        edge instead of running full-bleed like everywhere else.

   These rules are AUTHORITATIVE and deliberately over-specified so
   they win against page-level leftovers without depending on link
   order. Page-level rules for these two components are now dead;
   delete them when you next touch a page.

   Verified after this change: every page renders the legal footer
   at exactly 53 x 1265 at a 1280px viewport.
   ════════════════════════════════════════════════════════════════ */

/* ─── Section nav bar ───
   Sits at the foot of the content column, above the legal footer.
   Accent colour is a variable so Hall of Fame can keep its gold
   without forking the geometry. */
.footer-nav {
  --footer-nav-accent: var(--lime);
  position: static;
  background: var(--teal);
  border-top: 3px solid var(--footer-nav-accent);
  border-bottom: none;
  padding: 1.1rem 2rem;
  /* The bar caps the page's content sheet rather than running full-bleed.
     Where it already lives inside the sheet this is a no-op; where it sits
     outside one (React roots we can't inject markup into) the page sets
     --sheet-width and the bar centres to match.
     width:100% + align-self are load-bearing: several of these bars are
     flex items in a column, where auto margins alone would collapse the
     bar to its content width instead of filling the sheet. */
  width: 100%;
  max-width: var(--sheet-width, none);
  margin-left: auto;
  margin-right: auto;
  align-self: center;
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  box-shadow: none;
}

/* classifieds / sniff-notepad / smell-word-cloud wrap their links in
   .footer-nav-inner (a centred 860px 3-col grid). display:contents
   dissolves the wrapper so its children become flex items of
   .footer-nav — no markup surgery needed on those pages. */
.footer-nav .footer-nav-inner { display: contents; }

.footer-nav a,
.footer-nav .footer-nav-left,
.footer-nav .footer-nav-right {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--footer-nav-accent);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.footer-nav a:hover { opacity: 0.7; }
.footer-nav a:focus-visible {
  outline: 2px solid var(--footer-nav-accent);
  outline-offset: 3px;
}
.footer-nav .footer-center,
.footer-nav .footer-nav-center {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.5px;
  text-transform: none;
  color: rgba(250, 249, 245, 0.35);
  text-align: center;
  /* Keep the bar a fixed height. Where the prev/next link names are long
     (materials/24-helional has "← 23. Methyl Pamplemousse" one side and
     "25. Mandarine Aldehyde →" the other) the centre label was wrapping
     to a second line and pushing the bar to 67px against 54px everywhere
     else. Same on origins-map-v6 at mobile widths: 112px against 97px.
     The label is decorative, so truncate it rather than grow the bar. */
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hall of Fame runs a gold accent through the whole page. Keep the
   accent, inherit the geometry. */
.footer-nav.footer-nav-gold { --footer-nav-accent: var(--gold, #C8A96E); }

/* sniff-notepad and smell-word-cloud pad .page-wrapper itself, so a
   bar placed inside it would float off the sheet edges. */
.footer-nav.footer-nav-bleed { margin: 1.5rem -30px 0; }

/* Note: the content sheets themselves are 760 / 860 / 960px depending on
   the tool. That drift is real but deliberately out of scope here —
   reflowing it would change the interior layout of every tool. Logged as
   a follow-up rather than fixed blind. */

/* ════════════════════════════════════════════════════════════════
   CANONICAL SITE FOOTER · same on every page
   Dark teal register, mono 9px utility nav style. Full-bleed, 53px.
   ════════════════════════════════════════════════════════════════ */

.site-footer {
  display: block;
  position: static;
  background: var(--teal-dark);
  border-top: 1px solid rgba(211, 247, 129, 0.15);
  border-bottom: none;
  margin: 0;
  padding: 0;
  width: auto;
  max-width: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
  grid-template-columns: none;
  box-shadow: none;
}
.site-footer .site-footer-inner {
  padding: 16px 2rem;
  margin: 0;
  width: auto;
  max-width: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  line-height: 1.4;
}
.site-footer .site-footer-inner .site-footer-mark {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  color: var(--lime);
  text-decoration: none;
  opacity: 0.7;
  margin: 0;
  padding: 0;
  height: auto;
}
/* terms.html has `footer em { display:block; margin-top:8px }`, which
   stacked "Perfumed / Pages" and made that one footer 148px tall. */
.site-footer .site-footer-inner .site-footer-mark em {
  display: inline;
  font-style: italic;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none;
  color: inherit;
  margin: 0;
  padding: 0;
}
.site-footer .site-footer-mark:hover { opacity: 1; }
.site-footer .site-footer-links {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1.4;
}
.site-footer .site-footer-inner .site-footer-links a {
  display: inline-block;
  line-height: 1.4;
  color: rgba(250, 249, 245, 0.45);
  padding: 0 1rem;
  margin: 0;
  border: none;
  text-decoration: none;
  transition: color 0.15s;
}
.site-footer .site-footer-links a:hover { color: var(--lime); }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  .masthead { grid-template-columns: 1fr auto; padding: 0 1rem; }
  .masthead .mast-r { display: none; }
  .subnav { height: auto; padding: 6px 0; flex-wrap: wrap; justify-content: center; }
  .subnav a { padding: 4px 0.75rem; border-right: none; border-left: none; }
  .subnav a:first-child { border-left: none; }

  /* ── Mobile nav fix, 2026-07-31 ──────────────────────────────────────
     The rules above target .masthead and .subnav, both of which are
     display:none. The nav actually in use is .subnav-v2 — and it had NO
     mobile rules at all. It was locked at height:48px with flex-wrap:wrap,
     so on a narrow screen the links wrapped onto a second row and were
     clipped out of the fixed-height box. Pages with more nav items lost
     more links, which is why it looked broken on some pages and fine on
     others. Fix: let the bar grow to fit its rows.                      */
  .subnav-v2 {
    height: auto;
    min-height: 48px;
    padding: 6px 0.75rem 8px;
    row-gap: 2px;
    align-items: center;
  }
  .subnav-v2 .subnav-brand {
    /* Own the full first row so the links wrap beneath it as a clean block
       rather than crowding the wordmark. */
    flex: 0 0 100%;
    margin-right: 0;
    padding: 2px 0 4px;
    font-size: 17px;
  }
  .subnav-v2 a:not(.subnav-brand) {
    height: auto;
    /* Comfortable tap targets — 10px mono at 0.9rem padding was a thin
       target for a thumb. */
    padding: 7px 0.7rem;
    font-size: 10px;
    letter-spacing: 1.1px;
    /* Brighter than the desktop 0.55 alpha: the teal bar washes out badly
       in daylight on a phone, which is the other half of "kind of
       invisible." */
    color: rgba(250, 249, 245, 0.78);
  }
  .subnav-v2 a.active { background: rgba(211, 247, 129, 0.14); }
  .partners-bar { padding: 10px 1rem; }
  .site-footer .site-footer-inner { flex-direction: column; align-items: center; padding: 14px 1rem; gap: 10px; }
  .site-footer .site-footer-links { flex-wrap: wrap; justify-content: center; }

  /* Bottom chrome, mobile — 2026-07-31 sweep.
     The bar stacks to two rows; keep the centre label between the two
     links rather than letting it collapse to the left. */
  .footer-nav {
    flex-direction: column;
    gap: 8px;
    padding: 1rem 1.25rem;
    text-align: center;
  }
  .footer-nav.footer-nav-bleed { margin: 1.25rem -20px 0; }
}