/* ═══════════════════════════════════════════════════════════════════════════
   site-chrome.css — the rules every page was carrying its own copy of.

   Before this file, .grid-dot was byte-identical in 55 pages, the body base and
   .hiviz-gradient in 47, and the twelve rules behind the products dropdown and
   the mobile drawer in 46. One design decision, forty-six edits. That is the
   reason a nav tweak was expensive and the reason the pages drifted apart.

   CASCADE POSITION IS LOAD-BEARING. Pages link this immediately before their own
   inline <style>, which puts it after src/tailwind.css and before
   panel-polish.css and mobile-app.css — exactly where the inline copies sat.
   Do not move the <link>, and do not merge this into src/tailwind.css: that file
   loads before panel-polish.css, so .hiviz-gradient here would lose to
   panel-polish's !important copy and #mobile-menu a would lose to mobile-app's
   #mobile-menu.mp-drawer rules. Both of those files say so in their own headers.

   A page that deliberately re-tunes one of these keeps its own rule in its inline
   <style> below, where it still wins on source order. Print and mobile overrides
   inside @media were never lifted here for the same reason.
   ═════════════════════════════════════════════════════════════════════════ */

body {
  background-color: #1c1c1c;
  color: #f1f1f1;
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* The drafting-paper dot grid was REMOVED 9 Sep 2026 along with the box grid
   in site-system.css §8. The class is left defined-but-empty because
   adopt-system.mjs is documented to drop `grid-dot` from a section's class
   attribute when it rewrites one, and a missing selector would make that
   silent removal indistinguishable from an intentional one. Deleting the rule
   outright is safe once no markup references it. */
.grid-dot {
  /* intentionally empty — see above */
}

/* Hi-viz orange ramp for primary CTAs. panel-polish.css re-declares this with
   !important, so treat that file as the source of truth if the two disagree. */
.hiviz-gradient {
  background: linear-gradient(135deg, #c2410c 0%, #9a3412 100%);
}

/* The orange rule down the left of a pulled-out paragraph. */
.tape-line {
  border-left: 3px solid #f97316;
  padding-left: 1rem;
}

/* ── Products / More dropdown ──────────────────────────────────────────────
   The visual gap under the trigger is the wrapper's own padding, NOT a margin
   on the menu: the menu is positioned with top:100%, which resolves against the
   padding box, so a margin here would push the menu down and reopen the dead
   strip the pointer falls through. */
[data-mp-products],
[data-mp-more] {
  padding-bottom: .55rem;
  margin-bottom: -.55rem;
}

.mp-products-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -.75rem;
  height: .75rem;
}

/* Hidden by default and shown on hover/focus, so the links still work with JS
   disabled. src/tailwind.css re-tunes these under html.mp-fluid, which wins on
   specificity from wherever it loads — see its note at the products-menu rules. */
[data-mp-products] .mp-products-menu,
[data-mp-more] .mp-products-menu {
  visibility: hidden;
  opacity: 0;
  transition: opacity .14s ease, visibility 0s linear .22s;
}

[data-mp-products]:hover .mp-products-menu,
[data-mp-products]:focus-within .mp-products-menu,
[data-mp-more]:hover .mp-products-menu,
[data-mp-more]:focus-within .mp-products-menu {
  visibility: visible;
  opacity: 1;
  transition: opacity .14s ease, visibility 0s;
}

[data-mp-products]:hover .mp-chev,
[data-mp-products]:focus-within .mp-chev,
[data-mp-more]:hover .mp-chev,
[data-mp-more]:focus-within .mp-chev { transform: rotate(180deg); }

.mp-mi { transition: background-color .15s ease, color .15s ease; }
.mp-mi:hover { background: #1d1d1d; color: #f97316; }

.mp-pi { transition: background-color .15s ease; }
.mp-pi:hover { background: #1d1d1d; }
.mp-pi:hover .text-chalk { color: #f97316; }

/* ── Mobile drawer ────────────────────────────────────────────────────────
   mobile-app.css loads after this and outranks it with #mobile-menu.mp-drawer,
   which is deliberate: these are the fallback metrics for a page whose drawer
   JS has not upgraded the menu. */
#mobile-menu a { padding-top: .45rem; padding-bottom: .45rem; }
#mobile-menu a.bg-hiviz { padding-top: .6rem; padding-bottom: .6rem; }

/* ── Clearance for the sticky mobile CTA ──────────────────────────────────
   The bar is `position: fixed; bottom: 0`, so it sits over the page rather
   than in it — and with no padding under the content, the last ~52px of the
   document is behind it and cannot be scrolled into view. On the homepage
   that is the foot of the footer; on the product pages it is whatever their
   last row happens to be. Nothing about the bar hints that anything is under
   it, which is what made this survive: the page simply ends slightly too
   early, and it looks deliberate.

   Matched to the bar's own metrics: `py-3.5` twice plus its line box measures
   52px, and it adds `env(safe-area-inset-bottom)` for the home indicator, so
   the reserve has to add the same or the notch eats the gap again.

   `:has()` rather than a body class, so this stays true for any page that
   carries the bar and adds no dead space to any page that does not — six
   pages have it today and the next one to get it needs no second edit.

   Bounded at 1023px to match the bar's own `lg:hidden`. */
@media (max-width: 1023px) {
  body:has(> a.fixed.bottom-0) {
    padding-bottom: calc(3.25rem + env(safe-area-inset-bottom));
  }
  /* A page carrying the bar AND the floating #sticky-cta (the homepage) showed
     both below lg: the pill sat at bottom-6, 16px taller than the bar, so its
     top edge poked out above the bar — the same link twice, one half-hidden.
     The bar is the phone CTA; the pill is the desktop one. */
  body:has(> a.fixed.bottom-0) #sticky-cta {
    display: none !important;
  }
  /* The floating pill itself (bottom-6, 44px tall) sat over the footer's last
     line — the copyright — at the very end of the page on six pages, the one
     place nobody scrolls past. Same reserve idea as the bar above. */
  body:not(:has(> a.fixed.bottom-0)):has(#sticky-cta:not(.hidden)) {
    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom));
  }
}