/* ═══════════════════════════════════════════════════════════════════════════
   The two things EVERY page on this deployment carries, whichever site it
   belongs to: the cookie sheet, and a route to the legal documents.

   WHY THIS IS A THIRD STYLESHEET. css/style.css dresses the Las Vegas
   invitation and css/site.css dresses the company site. These two components
   have to appear on both, plus the survey, the calculators and the Philippine
   pages — so they cannot live in either one. Every value here is written out
   rather than taken from a custom property, because the event pages do not
   load the file that defines those properties.

   WHAT IT FIXED, 2026-10-09. Fourteen built pages had no link to the privacy
   policy at all — including /interest, /ph, /ph/teams, the team roster form
   and The AI Leverage Check, every one of which collects personal data. That
   was not a rule nobody had written down; it was a rule with nothing enforcing
   it. scripts/inject-chrome.js now writes the strip into any page that does
   not already carry a footer with those links, so a page added next month gets
   one by being built.

   AND IT IS WHAT MAKES THE CONSENT GATE HONEST EVERYWHERE. The analytics
   injector was changed the same day to write a consent gate instead of the two
   tracking tags. Without a sheet on these pages, the gate would never be
   answered and the event pages would silently report zero visitors forever —
   trading one invisible failure for another.

   CLASS NAMES ARE SCOPED SO THEY CANNOT COLLIDE with either of the other two
   stylesheets: .consent*, .legal-strip*, and nothing else.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── THE COOKIE SHEET ──────────────────────────────────────────────────
   A short bar, not a card. It must never cover the page's primary button —
   on a phone that button sits near the bottom of the first screen, so the
   words collapse to one line and the three choices stay on one row.

   THE SHEET STEPS OVER A PAGE'S OWN BOTTOM-FIXED CONTROLS, and that is what
   --img-bottom-chrome is for. A page that pins something to the bottom of the
   screen for keeps declares how tall that lane is, next to the rule that pins
   it, and the sheet sits above it. Default 0px, so every page without such a
   control is unchanged.

   WHY THE SHEET MOVES AND NOT THE CONTROL. Measured on the built page at
   390x844 with no choice stored: this sheet is fixed at z-index 150 occupying
   y 676-832, The AI Leverage Check's Back/Forward nav is fixed at z-index 5
   occupying y 784-828, and document.elementFromPoint over the middle of Back
   returned this sheet's "Choose" button. Both controls were completely covered
   and a real tap on Back hung until the test runner gave up. Raising the
   survey's nav above 150 would have cleared the tap and put the nav on top of
   "Choose" instead -- trading a dead Back button for a cookie sheet a visitor
   cannot finish answering, which is the worse defect of the two and a legal
   one: scripts/inject-analytics.js really does hold the tags behind this
   choice, so a sheet nobody can reach measures nothing and consents to
   nothing. Moving the sheet keeps both reachable. */

.consent {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + var(--img-bottom-chrome, 0px));
  z-index: 150;
  max-width: 1100px;
  margin-inline: auto;
  padding: 16px 20px;
  background: #FFFFFF;
  color: #0F1B2D;
  border: 1px solid #CFCEC7;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(15, 27, 45, .18);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
}
.consent[hidden] { display: none; }
.consent a { color: #095993; }
.consent .consent-copy { flex: 1 1 360px; min-width: 0; }
.consent h2 {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: #0F1B2D;
  margin: 0 0 4px;
  letter-spacing: 0;
  text-transform: none;
}
.consent p { font-size: 0.88rem; margin: 0; color: #0F1B2D; }

.consent-actions { display: flex; flex-wrap: wrap; gap: 10px; flex: 0 0 auto; }
.consent-actions button {
  font: inherit;
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1;
  padding: 12px 20px;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  width: auto;
}
.consent-actions .btn-primary { background: #095993; color: #FFFFFF; border-color: #095993; }
.consent-actions .btn-primary:hover { background: #07487A; }
.consent-actions .btn-ghost { background: transparent; color: #0F1B2D; border-color: #0F1B2D; }
.consent-actions .btn-ghost:hover { background: #0F1B2D; color: #FFFFFF; }

.consent-detail { flex: 1 1 100%; }
.consent-detail[hidden] { display: none; }
.consent-cats { margin: 0 0 14px; padding: 0; list-style: none; font-size: 0.9rem; }
.consent-cats li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.consent-cats label { font-weight: 600; }
.consent-cats .cat-note { display: block; font-weight: 400; color: #61676D; font-size: 0.86rem; }

body.consent-up { padding-bottom: calc(150px + var(--img-bottom-chrome, 0px)); }

@media (max-width: 620px) {
  /* The long half of the explanation goes, so the bar stays about 145px tall
     and clears the call to action on a 390px screen. The short half still says
     the thing that matters: nothing is set until you choose. */
  .consent .consent-long { display: none; }
  .consent { padding: 14px 16px; gap: 10px; }
  .consent-actions { width: 100%; }
  .consent-actions button { flex: 1 1 0; padding: 12px 8px; }
  body.consent-up { padding-bottom: calc(190px + var(--img-bottom-chrome, 0px)); }
}

/* ─── THE LEGAL STRIP ───────────────────────────────────────────────────
   For pages that are not part of the company site and therefore do not carry
   its full footer: the event pages, the Philippine pages, the interest form,
   the survey and the calculators. Dark, quiet, and the same links in the same
   order as the full footer's legal column. */

.legal-strip {
  background: #0B1626;
  color: #8D98A5;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  padding: 22px 20px;
}
.legal-strip-inner {
  max-width: 1160px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  justify-content: space-between;
}
.legal-strip nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.legal-strip a { color: #C9D1DB; text-decoration: none; }
.legal-strip a:hover { color: #FFFFFF; text-decoration: underline; }
.legal-strip p { margin: 0; }
.legal-strip button {
  background: none;
  border: 1px solid rgba(201, 209, 219, .35);
  border-radius: 4px;
  color: #C9D1DB;
  font: inherit;
  padding: 5px 11px;
  cursor: pointer;
}
.legal-strip button:hover { border-color: #FFFFFF; color: #FFFFFF; }