/* Consent gate + shared legal footer links.
 * Included by index.html, about.html, login.html, admin.html.
 * Styles match the Nebula dark/gold UI and legal.css palette.
 */

/* Apple SF font stack (via system-ui) + rendering, shared by gate + footers */
:root{--sf-font:system-ui,-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}

/* ---------- legal links strip (footer on every page) ---------- */
.legal-links{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:13px;font-family:var(--sf-font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.legal-links a,.legal-links button.linklike{
  color:#66d4cf;text-decoration:none;font-size:13px;background:none;
  border:none;padding:0;cursor:pointer;font-family:inherit
}
.legal-links a:hover,.legal-links button.linklike:hover{text-decoration:underline}
.legal-links .dot{color:#48484a}

/* ---------- shared site footer bar (matches the map page footer) ----------
 * Layout: legal links left · credit/copyright right. Pages with a content
 * wrapper put .footer-bar inside it so the 18px gutters line up; the map
 * page's fixed #siteFooter reuses these tokens for its identical look. */
.footer-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding:14px 18px;margin-top:56px;
  background:rgba(0,0,0,.82);border-top:1px solid #2c2c2e;
  font-size:13px;color:#636366;border-radius:0;
  font-family:var(--sf-font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale
}
.footer-bar .credit{font-size:13px;color:#636366;letter-spacing:.3px;margin:0;white-space:nowrap}
.footer-bar .credit a{color:#66d4cf;text-decoration:none;border-bottom:1px dotted rgba(102,212,207,.4)}
.footer-bar .credit a:hover{color:#ffe066;border-bottom-color:rgba(255,214,10,.5)}
.footer-bar .muted{max-width:640px;margin:0;font-size:13px;color:#48484a}
@media (max-width:760px){
  .footer-bar{flex-direction:column;gap:6px;padding:12px}
}

/* ---------- consent gate ---------- */
#consentGate{
  position:fixed;inset:0;z-index:1000;display:grid;
  /* Docked bottom-left, not a full-screen wall: the map stays visible behind the
     card, so a first-time visitor can see what they are being asked to enter.
     The scrim still blocks the app underneath until acceptance — the gate is
     legal, it just no longer hides the product. No backdrop blur: blurring the
     map is what made this read as a wall rather than a card on a page. */
  place-items:end start;
  background:rgba(0,0,0,.45);padding:18px;
  font-family:var(--sf-font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility
}
#consentGate .cg-card{
  max-width:380px;width:100%;max-height:min(72vh,620px);overflow:auto;
  background:rgba(28,28,30,.97);border:1px solid #2c2c2e;
  border-radius:12px;padding:20px 22px;
  /* No drop shadow at rest: a border and a tone step separate the card. */
  box-shadow:none
}
#consentGate h2{font-size:18px;color:#ffd60a;margin-bottom:10px;letter-spacing:-.01em;font-weight:600}
#consentGate .cg-text{font-size:13px;color:#c7c7cc;margin:8px 0;text-wrap:pretty}
#consentGate .cg-check{
  display:flex;gap:9px;align-items:flex-start;font-size:13px;color:#d1d1d6;
  margin:12px 0;cursor:pointer
}
#consentGate .cg-check input{margin-top:2px;accent-color:#ffd60a}
#consentGate .cg-check a{color:#66d4cf}
#consentGate .cg-cookies{
  border:1px solid #2c2c2e;border-radius:10px;
  padding:12px 14px;margin:14px 0 4px
}
#consentGate .cg-cookies legend{font-size:13px;color:#ffd60a;padding:0 6px}
#consentGate .cg-radio{display:flex;gap:8px;align-items:center;font-size:13px;color:#c7c7cc;margin:6px 0;cursor:pointer}
#consentGate .cg-radio input{accent-color:#ffd60a}
#consentGate .cg-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
#consentGate .cg-actions button{
  flex:1;min-width:150px;padding:9px 14px;border-radius:8px;cursor:pointer;
  font-size:13px;font-weight:600;
  background:transparent;border:1px solid #2c2c2e;color:#ffd60a
}
#consentGate .cg-actions button:disabled{opacity:.35;cursor:not-allowed}
#consentGate .cg-actions button.cg-primary{background:#ffd60a;color:#000000;border:none}
#consentGate .cg-actions button.cg-primary:disabled{opacity:.35}
#consentGate .cg-actions button:not(:disabled):hover{filter:brightness(1.1)}
#consentGate .cg-fine{font-size:13px;color:#8e8e93;margin-top:12px}

/* ---------- AI disclosure (moved out of the page footer) ----------
 * It used to be a .ai-notice box in #siteFooter, which on a phone ran to 460px
 * tall. It belongs where a first-time visitor actually reads it, and it costs
 * the map nothing here. The sentence is wrapped in its own span so the flex
 * tag+text pair cannot break it up. */
#consentGate .cg-ai{
  display:flex;gap:8px;align-items:flex-start;
  margin:14px 0 0;padding:10px 12px;border-radius:8px;
  border:1px solid #2c2c2e;background:rgba(0,0,0,.4);
  font-size:13px;line-height:1.5;color:#8e8e93
}
#consentGate .cg-ai .ai-tag{
  flex:0 0 auto;margin-top:2px;padding:1px 5px;border-radius:4px;
  background:rgba(255,214,10,.15);border:1px solid #2c2c2e;
  color:#ffe066;font-size:13px;font-weight:700;letter-spacing:.06em
}
#consentGate .cg-ai strong{color:#d1d1d6;font-weight:600}

/* ---------- consent gate on a phone ----------
 * The gate is the first thing anyone sees on a phone, so it has to FIT. It was
 * running to 88% of the viewport with an inner scrollbar, which pushed the fine
 * print out of view and made the card read as a full-screen wall. Tightening
 * the type and padding brings the whole thing in under ~540px, so it sits as a
 * card with the page visible around it. */
@media (max-width:560px){
  /* Bottom sheet, not a wall: the map stays visible above the card. */
  #consentGate{place-items:end stretch;padding:10px}
  #consentGate .cg-card{max-width:none;max-height:min(78dvh,560px);padding:16px 16px 18px;border-radius:12px}
  #consentGate h2{font-size:16px;margin-bottom:8px}
  #consentGate .cg-text{font-size:13px;margin:6px 0}
  #consentGate .cg-check{font-size:13px;margin:10px 0}
  #consentGate .cg-radio{font-size:13px}
  #consentGate .cg-cookies{padding:10px 12px;margin:12px 0 4px}
  #consentGate .cg-actions{gap:8px;margin-top:12px}
  #consentGate .cg-actions button{flex:1 1 100%;min-width:0;padding:10px 14px}
}