/* TradeDraft — THE SHARED CHROME: nav, drawer, footer, skip-link.
   Linked by all 39 pages that carry the marketing chrome — the 20 that use site.css and the 19
   guide-family pages that use guide.css.

   Why this file exists (1 Aug 2026). These rules lived TWICE: once in site.css and once in
   guide.css, because the guide family does not link site.css. A rule-for-rule comparison found
   119 selectors present in both, 119 of them byte-identical in effect — and exactly ONE that had
   drifted: footer{} used var(--navy) in one file and var(--ink-navy) in the other. Those two
   tokens happen to hold the same #0A2340, so nothing rendered differently, but nothing was
   stopping them diverging either. Rebuilding the footer earlier the same day meant making every
   change in both files by hand, with no guard that would fail if only one was updated: the guide
   pages would simply have kept an old footer.

   THE RULE: chrome belongs here. If you are about to add a .nav / .drawer / .foot- rule to
   site.css or guide.css, it goes in this file instead — that is the whole point of it.

   LOAD ORDER MATTERS. This file must come BEFORE site.css / guide-body.css and after the tokens,
   because pages legitimately override chrome classes at equal specificity: site.css's
   .ss-name-mid .wm-t is the same weight as .wordmark .wm-t and must still win. Loading chrome
   last would silently reverse that. Order is: fonts -> tokens (or guide.css) -> chrome -> page CSS.

   Verified by a computed-style diff over 14,377 elements across all 39 pages before and after the
   extraction: zero differences. */

/* Skip link */
.skip-link{position:absolute;left:8px;top:-48px;z-index:2000;background:var(--navy);color:#fff;font-family:var(--sans);font-size:13px;font-weight:600;padding:10px 16px;border-radius:0 0 6px 6px;text-decoration:none;transition:top .15s ease}
.skip-link:focus{top:0;outline:2px solid var(--brass);outline-offset:2px}

/* Nav */
.nav{position:sticky;top:0;z-index:60;background:var(--ink-navy);border-bottom:2px solid var(--brass-soft)}
.nav-inner{margin:0 auto;padding:0 var(--pad);height:60px;display:flex;align-items:center;gap:28px}
.wordmark{font-family:var(--sans);font-size:21px;line-height:1;letter-spacing:.02em;display:flex;align-items:baseline}
.wordmark .wm-t{font-weight:700;color:#fff}
.wordmark .wm-d{font-weight:300;color:var(--brass)}
.wordmark .wm-tm{align-self:flex-start;font-size:.46em;font-weight:400;line-height:1;margin-left:2px;color:rgba(255,255,255,.55)}
.nav-links{display:flex;gap:22px;margin-left:auto;align-items:center}
.nav-link{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.66);padding:0 0 3px;border-bottom:1.5px solid transparent;transition:color .12s,border-color .12s}
.nav-link:hover{color:rgba(255,255,255,.92)}
.nav-link.active{color:#fff;border-bottom-color:var(--brass)}
/* Primary CTA button — the product door. Lives OUTSIDE .nav-links so it stays visible on mobile
   (next to the burger). Two anchors swap on the existing .nav.signed-in switch: signed-out shows
   --out (Try TradeDraft free → the app/trial); signed-in shows --in (Open TradeDraft → the portal).
   Each carries a full desktop label (.cta-lg) and a short mobile label (.cta-sm). */
.nav-cta{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 16px;border:1px solid transparent;border-radius:var(--rad);background:#fff;color:var(--navy);font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;text-decoration:none;transition:background .15s,border-color .15s,transform .14s var(--ease)}
.nav-cta:hover{background:#eef1f5;transform:translateY(-1px)}
.nav-cta svg{width:14px;height:14px;flex:none}
.nav-cta .cta-sm{display:none}
.nav-cta--in{display:none}
.nav.signed-in .nav-cta--out{display:none}
/* signed-in user is already a customer — quieten the CTA to a ghost outline (signed-out stays solid white) */
.nav.signed-in .nav-cta--in{display:inline-flex;position:relative;background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
.nav.signed-in .nav-cta--in:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.7)}
/* signed-in: the chip is the far-right element; this divider sits before the whole right cluster
   (button + chip), separating it from the nav tabs — mirrors the signed-out "Log in" divider */
.nav.signed-in .nav-cta--in::before{content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);width:1px;height:15px;background:rgba(255,255,255,.18)}
.nav-signin{position:relative;font-family:var(--sans);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.66);padding:0 0 3px;margin-left:32px;white-space:nowrap;transition:color .12s}
.nav-signin::before{content:"";position:absolute;left:-16px;top:50%;transform:translateY(-50%);width:1px;height:15px;background:rgba(255,255,255,.18)}
.nav-signin:hover{color:rgba(255,255,255,.95)}
.nav-signin[aria-current="page"]{color:#fff;border-bottom:1.5px solid var(--brass)}
/* ── Signed-in desktop account chip + dropdown ───────────────────────────────
   site.js adds .signed-in to header.nav when a session is stored, which swaps the"Sign in" text link OUT for this chip (business name + logo/initials from the cached profile —
   never the login email; marketing pages have no Supabase). The chip sits to the RIGHT of the CTA
   button (account in the far corner — the standard signed-in layout); the divider before the button
   separates the whole cluster from the tabs. Desktop-only — hidden below 860px (burger takes over). */
.acct-wrap{display:none}
.nav.signed-in .nav-signin{display:none}
.nav.signed-in .acct-wrap{position:relative;display:flex;align-items:center}
/* Pre-paint mirror (see the inline script in partials/nav.html): the same signed-in swap, driven off the
   <html>.td-auth-in flag set BEFORE first paint, so a signed-in user's nav is correct on load instead of
   flashing the signed-out "Try TradeDraft free" CTA. site.js still adds .nav.signed-in (chip data + wiring). */
html.td-auth-in .nav-cta--out{display:none}
html.td-auth-in .nav-cta--in{display:inline-flex;position:relative;background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
html.td-auth-in .nav-cta--in::before{content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);width:1px;height:15px;background:rgba(255,255,255,.18)}
html.td-auth-in .nav-signin{display:none}
html.td-auth-in .acct-wrap{position:relative;display:flex;align-items:center}
.acct-chip{display:flex;align-items:center;gap:9px;cursor:pointer;color:#fff;background:none;border:0;font-family:var(--sans);padding:0}
.acct-av{width:30px;height:30px;border-radius:50%;background:var(--brass);color:var(--navy);font-family:var(--sans);font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden}
.acct-av img{width:100%;height:100%;object-fit:cover}
.acct-name{font-family:var(--sans);font-size:12.5px;font-weight:500;color:rgba(255,255,255,.92);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-name .car{color:rgba(255,255,255,.5);margin-left:6px}
.acct-menu{position:absolute;top:46px;right:0;background:#fff;border:1px solid var(--rule);border-radius:12px;box-shadow:0 16px 40px rgba(10,35,64,.22);min-width:230px;padding:6px;display:none;z-index:70}
.acct-menu.open{display:block}
/* the menu sits inside .nav-links (uppercase links) — reset so the items read sentence-case */
.acct-menu a,.acct-menu button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;font-family:var(--prose);font-size:14px;font-weight:500;letter-spacing:normal;text-transform:none;color:var(--navy);background:none;border:0;border-bottom:0;padding:9px 12px;border-radius:8px;cursor:pointer;text-decoration:none}
.acct-menu a:hover,.acct-menu button:hover{background:rgba(10,35,64,.08);color:var(--navy)}
.acct-menu a svg,.acct-menu button svg{width:18px;height:18px;flex:none;color:var(--steel)}
/* "£" prices icon — rendered via ::before so the glyph isn't in the menu's text (keeps the parity guard reading the label as just "Prices") */
.acct-menu .am-pound{width:18px;height:18px;flex:none;display:inline-flex;align-items:center;justify-content:center;color:var(--steel);font-family:var(--sans);font-size:17px;font-weight:700;line-height:1}
.acct-menu .am-pound::before{content:"£"}
.acct-menu a:hover svg,.acct-menu button:hover svg{color:var(--navy)}
.acct-menu hr{border:0;border-top:1px solid var(--rule);margin:5px 4px}
.am-head{display:flex;align-items:center;gap:10px;padding:10px 12px 12px}
.am-av{width:36px;height:36px;border-radius:50%;background:var(--brass);color:var(--navy);font-family:var(--sans);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden}
.am-av img{width:100%;height:100%;object-fit:cover}
.am-id{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.am-id b{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-out{color:#9A3526}
.am-out svg{color:#9A3526!important}
.burger{display:none;margin-left:auto;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger span{width:22px;height:2px;background:#fff;border-radius:2px;transition:.2s}
@media(max-width:860px){
  .nav-links{display:none}
  .burger{display:flex;margin-left:14px}
  .nav-cta{margin-left:auto}
  .nav-cta .cta-lg{display:none}
  .nav-cta .cta-sm{display:inline}
  .nav.signed-in .acct-wrap,html.td-auth-in .acct-wrap{display:none}   /* chip is desktop-only; mobile uses the burger drawer */
}

/* Drawer */
/* Lighter, cleaner: the mobile drawer now mirrors the desktop account dropdown (.acct-menu) —
   a compact white card under the burger, sentence-case navy items with a soft hover, not the old
   full-width navy sheet. */
.drawer{position:fixed;top:62px;right:var(--pad);left:auto;z-index:65;width:min(300px,calc(100vw - 28px));background:#fff;display:flex;flex-direction:column;padding:8px;border:1px solid var(--rule);border-radius:14px;box-shadow:0 18px 44px rgba(10,35,64,.22);transform:translateY(-10px);opacity:0;visibility:hidden;transition:transform .2s var(--ease),opacity .2s var(--ease),visibility .2s}
.drawer.open{transform:translateY(0);opacity:1;visibility:visible}
.drawer a,.drawer button.dl{display:flex;align-items:center;gap:12px;font-family:var(--prose);font-size:15px;font-weight:500;color:var(--navy);letter-spacing:normal;text-transform:none;padding:11px 12px;border-radius:8px;text-align:left;width:100%;transition:background .12s}
.drawer a:hover,.drawer button.dl:hover{background:rgba(10,35,64,.06)}
.drawer a.cta{color:var(--brass-deep);font-weight:700}
.drawer a[data-td-signout]{color:#9A3526}
/* Leading icon on every drawer row — matches the in-app account menu (18px, muted steel). */
.drawer .dr-ico{width:18px;height:18px;flex:none;color:var(--steel)}
.drawer .dr-pound{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:700;font-size:17px;line-height:1}
.drawer a[data-td-signout] .dr-ico{color:#9A3526}
/* The single Log in / Quotes toggle carries both icons; CSS shows the right one for the auth state
   (the door-in icon signed-out, the clipboard signed-in) — site.js only swaps the .dr-t label text. */
.drawer .dr-ico-in{display:none}
.drawer.signed-in .dr-ico-in{display:block}
.drawer.signed-in .dr-ico-out{display:none}
/* Burger account section — the signed-in user's menu. Markup is static (per the no-build rule);
   site.js adds .signed-in to #drawer to reveal it (marketing pages don't load the auth library). */
.drawer .dr-in{display:none}
.drawer.signed-in a.dr-in{display:flex}
.drawer .dr-label{display:none;font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);margin-top:8px;padding:14px 12px 5px;border-top:1px solid var(--rule);width:100%}
.drawer.signed-in .dr-label{display:block}
/* Brand header at the top of the mobile menu — titles the panel (item 10). Navy/brass wordmark
   (the nav's .wm-t is white-on-navy, so it can't be reused on this white dropdown). */
.drawer .dr-brand{display:flex;align-items:baseline;font-family:var(--sans);font-size:18px;line-height:1;letter-spacing:.02em;padding:7px 12px 13px;margin:0 0 3px;border-bottom:1px solid var(--rule)}
.drawer .dr-brand .dr-wm-t{font-weight:700;color:var(--navy)}
/* the drawer is WHITE — small 18px/300 text needs the full 4.5:1 (was 2.61:1) */
.drawer .dr-brand .dr-wm-d{font-weight:300;color:var(--brass-deep)}
.drawer .dr-brand .dr-wm-tld{font-size:.6em;font-weight:500;letter-spacing:.01em;color:rgba(10,35,64,.5);margin-left:2px;align-self:center}
/* ── Centred menu sheet on mobile (owner, 16 Jul) ───────────────────────────────────────────
   The menu was a card pinned under the burger in the top-right — the hardest corner of a phone to
   reach one-handed, which is exactly how a trade uses this in a van. It now drops into the middle
   of the screen over a dimmed page: same rows, same fonts, same icons, just repositioned, a little
   larger, and with a backdrop so it reads as "this is the thing now".
   NB the backdrop is body::before, NOT a child of .drawer — a scrim inside the drawer would paint
   over the drawer's own white background and tint the card navy.
   ⚠️ This block is DUPLICATED in three places, because the drawer CSS already was: css/site.css
   (the 14 marketing pages), build-posts.js's template (the 9 generated guides) and the 5 hand-built
   guide pages. Change one → change all three, or the menu behaves differently on guides. */
@media(max-width:860px){
  .drawer{top:50%;left:50%;right:auto;width:min(380px,calc(100vw - 44px));padding:10px;border-radius:20px;
    box-shadow:0 30px 70px rgba(10,35,64,.4);transform:translate(-50%,-50%) scale(.97)}
  .drawer.open{transform:translate(-50%,-50%) scale(1)}
  .drawer a,.drawer button.dl{padding:13px 12px;font-size:15.5px}
  .drawer .dr-brand{justify-content:center;padding:9px 12px 14px}
  /* Dimmed page behind. site.js toggles body.drawer-open; a tap on it lands on <body>, which the
     existing "click outside closes" handler already catches — no extra listener needed. */
  body::before{content:"";position:fixed;inset:0;z-index:64;background:rgba(10,35,64,.44);
    opacity:0;visibility:hidden;transition:opacity .2s var(--ease),visibility .2s}
  body.drawer-open::before{opacity:1;visibility:visible}
  body.drawer-open{overflow:hidden}   /* stop the page scrolling under the open sheet */
}
@media(max-width:860px) and (prefers-reduced-motion:reduce){
  .drawer,.drawer.open{transform:translate(-50%,-50%)}
}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Footer ────────────────────────────────────────────────────────────────────────────────────
   The guide pages add one declaration of their own on top of this — footer{flex:none} in
   guide.css — because they lay out as a flex column. Everything else is shared. */
footer{background:var(--ink-navy);color:rgba(255,255,255,.6);padding:88px 0 calc(44px + env(safe-area-inset-bottom,0px));font-size:13px;border-top:2px solid var(--brass-soft)}
/* ── FULL-BLEED, to the same gutters as the nav (owner, 2 Aug 2026) ──────────────────────────────
   .wrap caps at 1100px and centres, but header.nav does NOT use .wrap — it is full width with a
   52px gutter. So on any screen wider than ~1200px the footer wordmark sat 80–450px to the RIGHT
   of the nav wordmark directly above it, and the footer used a shrinking fraction of the page.
   Releasing the cap here makes the two wordmarks share one left edge and gives the columns room.
   The gutter must stay in step with .nav's — change one and change the other. */
footer .wrap{max-width:none}
/* ── EQUAL GAPS, NOT EQUAL COLUMNS (owner, 2 Aug 2026) ───────────────────────────────────────────
   The tracks were 1fr, so the five COLUMNS were identical widths — but their contents are not, and
   what a reader sees is the space between blocks of text, not the invisible track edges. Measured
   at 1920px the gaps between TEXT ran 169 / 233 / 219 / 253px, an 84px spread, while the track gaps
   were a uniform 52px. "For your trade" holds three short words, so it left a 253px hole in front of
   "Company"; "Builder Fee Proposal" nearly filled its track and left 169px behind it.
   So the tracks are content-sized now and space-between divides the slack into four IDENTICAL gaps.
   ⚠️ justify-content is doing the sizing work here: `auto` tracks only stop stretching to fill the
   row because it is set to something other than normal/stretch. Remove it and the 1fr behaviour
   comes straight back. column-gap is the FLOOR the distribution is added to, so the columns can
   never touch at an awkward width; it is not the gap you see on a wide screen.
   The outer gutters stay at .wrap's 52px and are deliberately NOT part of this — that is what keeps
   the footer wordmark on the nav wordmark's left edge. A page margin is not a column gap. */
.foot-grid{display:grid;grid-template-columns:auto repeat(4,auto);justify-content:space-between;column-gap:32px;row-gap:56px;align-items:start}
.foot-links{display:contents}
@media(max-width:1080px){
  /* two fr tracks absorb all the slack, so there is nothing for space-between to distribute */
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:normal;gap:48px 40px}
  .foot-links{display:contents}}
/* ── The groups are plain divs — NO collapse/expand at any width (owner, 2 Aug 2026) ─────────────
   They were <details>/<summary>, folding into four tappable rows below 640px. Removed on the
   owner's instruction: the footer should read the same everywhere, and a link you have to unfold
   is a link most readers never see. Two things went with it — the chevron, and the 40-line script
   that re-opened the groups on desktop (three separate belts, because a group left closed at
   desktop width silently hid 19 links). Both existed only to make the disclosure safe; with no
   disclosure there is nothing to make safe, and the whole failure mode is gone by construction.
   ⚠️ Do NOT reintroduce <details> here. Besides the above, bare `details`/`summary` selectors in
   site.css styled the footer groups as FAQ rows — see the note where they were deleted. */
@media(max-width:640px){
  /* Two columns, not one: 22 links in a single file makes the footer a quarter of the phone's
     scroll, which is what the accordion was there to stop. Side by side they take half the height
     and stay fully visible. The brand block spans both. */
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:normal;gap:34px 24px}
  .foot-brand{grid-column:1/-1}
  /* the phone's link padding is NOT set here — see the note beside .foot-grid a below */
}
@media(max-width:360px){footer{padding-top:56px}
  .foot-legal{margin-top:40px}}
.foot-col .foot-h{margin-top:0}
.foot-grid .foot-h{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brass-soft);margin:0 0 20px}
.foot-grid a{display:block;color:rgba(255,255,255,.72);padding:7px 0;font-size:13px;line-height:1.5;text-decoration:none;transition:color .12s}
.foot-grid a:hover,.foot-grid a:focus-visible{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.55);text-underline-offset:3px}
/* 11px on a phone, not the desktop 7px: these are thumb targets, ~42px tall. It was 12px when the
   group headings were accordion summaries; two columns bought back the height that pays for it.
   ⚠️ THIS MUST STAY BELOW the base .foot-grid a rule. Both are (0,1,1), so source order decides —
   put it up in the @640 block with the grid rules and the 7px below silently wins on every phone. */
@media(max-width:640px){.foot-grid a{padding:11px 0}}
.foot-brand .wordmark{margin-bottom:8px}
.foot-brand .sub{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:18px}
.foot-email{display:block;color:rgba(255,255,255,.86);font-size:13px;text-decoration:none;transition:color .12s}
.foot-email:hover,.foot-email:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot-addr{font-size:13px;color:rgba(255,255,255,.66);margin-top:10px;line-height:1.65;max-width:30ch}
.foot-social{display:flex;align-items:center;gap:13px;margin-top:18px}
.foot-social a{display:inline-flex;align-items:center;padding:4px;color:var(--brass-soft);text-decoration:none}
.foot-social a:hover{color:#fff}
.foot-social a svg{width:20px;height:20px;max-width:none;flex:none;display:block}
@media(max-width:640px){.foot-social{gap:2px;margin-left:-12px}.foot-social a{padding:12px}}
.foot-handle{font-family:var(--sans);font-size:13px;color:rgba(255,255,255,.66);letter-spacing:.01em}
.foot-legal{border-top:1px solid rgba(255,255,255,.1);margin-top:64px;padding-top:26px;font-size:12px;color:rgba(255,255,255,.68);line-height:1.75}
/* A MEASURE, not decoration, and it arrived WITH the full-bleed wrap (2 Aug 2026): the rule above
   still spans the whole footer, but without this the disclaimer would set as one ~300-character
   line on a wide screen. Capped on the paragraphs, never on .foot-legal itself — that would drag
   the divider rule in with them and leave it stopping two-thirds of the way across. */
.foot-policies,.foot-disclaimer{max-width:880px}
.foot-disclaimer{margin:0}
.foot-legal a{color:rgba(255,255,255,.72);text-decoration:underline}
/* the three policies, moved here from the Company column (31 Jul 2026) — links inherit .foot-legal a */
.foot-policies{margin:0 0 14px}