/* Shared chrome for the DadHax site: top nav, sheet tail, signup, CTA row.
 *
 * Deliberately additive — every page keeps its own <style> block and its own
 * :root tokens (including the light-mode flip). This file only styles the parts
 * that must look identical on every page, so there is one copy of them instead
 * of four drifting ones.
 *
 * NAV IS VISIBLE, NOT A HAMBURGER. NN/g, 179 participants: hidden navigation cut
 * discoverability ~20%, and users were 39% slower on desktop / 15% on mobile.
 * With three sheets there is nothing to hide. Revisit around sheet 8-10, and even
 * then the pattern is 3-5 visible items + overflow, never everything behind a tap.
 */

/* ---------- top nav ---------- */
/* Nav v2 (8/8). v1 failed for a reason worth remembering: the links were small grey
   monospace caps, identical in weight to the metadata strip beside them, so they read
   as LABELS, not buttons. Nick said three times he couldn't navigate the site. He was
   right. Visible navigation isn't enough — it has to LOOK tappable.
   Fixes: one brand only (it was printed twice), bordered chips, full contrast text,
   and the current page filled so you always know where you are. */
.nav { padding: 14px 0 12px; border-bottom: 1px solid var(--hair); margin-bottom: 4px; }
.navtop { display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap; margin-bottom: 11px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.navtop .brand { color: var(--signal); font-weight: 700; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px; }
.navtop .meta { color: var(--graphite); }

.navlinks { display: flex; flex-wrap: wrap; gap: 8px; }
.navlinks a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--hair); background: var(--panel); color: var(--bone);
  text-decoration: none; font-size: 14px; line-height: 1.2;
}
.navlinks a:hover, .navlinks a:focus-visible { border-color: var(--signal); }
/* [aria-current] matches both "page" (you are ON this page) and "true" (you are
   inside this section — e.g. a tool page marking the Toolbox chip). */
.navlinks a[aria-current] {
  background: var(--signal); color: #14100F; border-color: var(--signal); font-weight: 700;
}

/* ---------- the Toolbox icon ---------- */
/* Nick, 8/14: the nav button IS a toolbox — the lid pops open on hover/focus, and
   on the index #tools heading when it scrolls into view (that's the mobile show,
   since phones don't hover). One inline SVG per nav link; class is .tbx because
   .toolbox was already taken by the tool pages' tail link. */
.tbx { overflow: visible; flex: none; margin-right: 8px;
  stroke: currentColor; stroke-width: 1.5; fill: none; }
h2 .tbx { vertical-align: -2.5px; }
.tbx .lid { transform-box: view-box; transform-origin: 1px 7px;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.navlinks a:hover .tbx .lid, .navlinks a:focus-visible .tbx .lid,
.door:hover .tbx .lid, .door:focus-visible .tbx .lid,
#tools.open .tbx .lid, #doorcta.open .tbx .lid { transform: rotate(-35deg); }
@media (prefers-reduced-motion: reduce) { .tbx .lid { transition: none; } }

/* ---------- end-of-sheet tail ---------- */
.tail { margin-top: 40px; }
.tail-next {
  display: block; text-decoration: none; color: var(--bone);
  border: 1px solid var(--hair); border-left: 3px solid var(--signal);
  background: var(--panel); padding: 14px 16px; margin-bottom: 14px;
}
.tail-next:hover { border-color: var(--signal); }
.tail-next .k {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--signal); margin-bottom: 4px;
}
.tail-next b { font-size: 18px; letter-spacing: -.01em; }
.tail-next span.s { display: block; color: var(--graphite); font-size: 14.5px; margin-top: 3px; }

/* ---------- signup ---------- */
.optin { border: 1px solid var(--hair); background: var(--panel); padding: 18px 16px; margin-bottom: 14px; }
.optin h2 {
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--signal); margin: 0 0 10px; font-weight: 700;
}
.optin p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.55; }
.optin .free { color: var(--graphite); font-size: 14px; margin-bottom: 14px; }
.optin form { display: flex; gap: 8px; flex-wrap: wrap; }
.optin input[type=email] {
  flex: 1 1 190px; min-height: 48px; padding: 12px 13px; font: 16px/1.2 var(--sans);
  color: var(--bone); background: var(--carbon); border: 1px solid var(--hair);
}
.optin input[type=email]:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
.optin button {
  min-height: 48px; padding: 12px 18px; border: 0; cursor: pointer;
  background: var(--signal); color: #14100F;
  font: 700 13px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.optin button:hover { background: var(--signal-d); }
.optin .fine { color: var(--graphite); font-size: 13px; margin: 11px 0 0; }

/* The ask that comes FIRST and costs nothing. Nick, 8/8: lead with value, the price
   is passing it on. The email is optional and secondary. */
.pay-it { border: 1px solid var(--hair); border-left: 3px solid var(--signal);
  background: var(--panel-up, var(--panel)); padding: 16px; margin-bottom: 14px; }
.pay-it h2 { font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--signal); margin: 0 0 9px; font-weight: 700; }
.pay-it p { margin: 0 0 8px; font-size: 15.5px; line-height: 1.55; }
.pay-it p:last-child { margin-bottom: 0; }

/* "Here's what most lists cost you" -- the struck-out list. Costs, not prices. */
.costs { list-style: none; padding: 0; margin: 10px 0; }
/* display:block and the grid reset are LOAD-BEARING. The tool pages style their own
   `li` as a 44px-counter grid; without this the struck text auto-places into that
   44px column and renders ~6 characters wide. That is the exact bug audit.js was
   written after (start-with-ai, 2026-08-07). Caught again here on 8/8. */
ul.costs li { display: block; grid-template-columns: none; grid-column: auto;
  position: relative; padding-left: 20px; margin-bottom: 6px;
  font-size: 14.5px; line-height: 1.45; color: var(--graphite); }
.costs li s { text-decoration: line-through; text-decoration-thickness: 1px; }
.costs li::before { content: "✕"; position: absolute; left: 0; color: var(--signal-d);
  font-size: 13px; }
.optin .plain { font-size: 15px; line-height: 1.55; margin: 0 0 9px; }
.optin .plain b { color: var(--signal); }

/* ---------- secondary CTA row ---------- */
.ctas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ctas a {
  display: block; min-height: 48px; padding: 13px 14px; text-decoration: none;
  border: 1px solid var(--hair); background: var(--panel); color: var(--bone);
  font-size: 15px;
}
.ctas a:hover { border-color: var(--signal); }
.ctas a b { display: block; }
.ctas a span {
  display: block; color: var(--graphite); font-size: 13px; margin-top: 2px;
  font-family: var(--mono); letter-spacing: .04em;
}

/* The seller offer, on the tool pages -- where the Instagram traffic actually lands.
   Marketing audit 8/9: the money offer only existed on index + log, the two pages
   deep-linked traffic never sees. */
.buyhouses { border: 1px solid var(--signal); background: var(--panel);
  padding: 18px 16px; margin-bottom: 14px; }
.buyhouses h2 { font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--signal); margin: 0 0 10px; font-weight: 700; }
.buyhouses p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.55; }
.buyhouses .ctas { margin-top: 12px; }