/* 2026-10-13: Cookie consent banner + settings dialog. Self-contained
   (no dependency on precision-home.css or site.css tokens) so it renders
   identically on all 12 pages regardless of which design system they use.
   Loaded by every page via the central partials/consent.html + sync-partials.js. */

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Shared button base - accept and reject share this unmodified, so they
   carry identical visual weight. Only fill vs outline differs. */
.consent-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 22px;font:600 13px 'Inter','Segoe UI',Arial,sans-serif;letter-spacing:.01em;border-radius:3px;border:1.5px solid transparent;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.consent-btn--accept{background:#bb1369;color:#fff;border-color:#bb1369}
.consent-btn--accept:hover{background:#9e1262;border-color:#9e1262}
.consent-btn--reject{background:transparent;color:#fff;border-color:#8fa3ab}
.consent-btn--reject:hover{background:rgba(255,255,255,.1);border-color:#fff}
.consent-btn--settings{background:transparent;color:#c4d0d8;border:0;min-height:auto;padding:12px 4px;text-decoration:underline;text-underline-offset:4px;font-weight:600}
.consent-btn--settings:hover{color:#fff}
.consent-btn:focus-visible{outline:3px solid #e64199;outline-offset:3px}

/* Banner */
.consent-banner{position:fixed;left:0;right:0;bottom:0;z-index:200;background:#111921;color:#f3f6f7;border-top:1px solid #3d4b58;box-shadow:0 -10px 34px rgba(0,0,0,.4);padding:26px clamp(20px,4vw,48px);animation:consentIn .4s cubic-bezier(.19,1,.22,1)}
.consent-banner[hidden]{display:none}
@keyframes consentIn{from{transform:translateY(100%)}to{transform:translateY(0)}}
.consent-banner__inner{max-width:1280px;margin-inline:auto;display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.consent-banner__copy{flex:1 1 440px;max-width:720px}
.consent-banner__copy h2{color:#fff;font-family:'Inter','Segoe UI',Arial,sans-serif;font-size:19px;font-weight:700;margin:0 0 8px}
.consent-banner__copy p{color:#c4d0d8;font-size:14px;line-height:1.6;margin:0}
.consent-banner__actions{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
@media(max-width:760px){
  .consent-banner{padding:22px 18px}
  .consent-banner__inner{flex-direction:column;align-items:stretch}
  .consent-banner__actions{justify-content:space-between}
  .consent-banner__actions .consent-btn--accept,.consent-banner__actions .consent-btn--reject{flex:1}
}
@media(prefers-reduced-motion:reduce){.consent-banner{animation:none}}

/* Settings dialog */
.consent-dialog[hidden]{display:none}
.consent-dialog{position:fixed;inset:0;z-index:210;display:flex;align-items:center;justify-content:center;padding:20px}
.consent-dialog__backdrop{position:absolute;inset:0;background:rgba(7,12,18,.72)}
.consent-dialog__panel{position:relative;background:#111921;color:#f3f6f7;border:1px solid #3d4b58;max-width:540px;width:100%;max-height:min(680px,86vh);overflow-y:auto;padding:36px clamp(22px,4vw,40px);box-shadow:0 30px 80px rgba(0,0,0,.5);animation:consentDialogIn .25s ease}
@keyframes consentDialogIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.consent-dialog__close{position:absolute;top:16px;right:16px;width:36px;height:36px;background:transparent;border:1px solid #3d4b58;color:#fff;font-size:20px;line-height:1;border-radius:3px;cursor:pointer}
.consent-dialog__close:hover{border-color:#8fa3ab}
.consent-dialog__close:focus-visible{outline:3px solid #e64199;outline-offset:2px}
.consent-dialog h2{color:#fff;font-family:'Inter','Segoe UI',Arial,sans-serif;font-size:22px;margin:0 0 14px;padding-right:40px}
.consent-dialog__intro{color:#c4d0d8;font-size:14px;line-height:1.6;margin:0 0 24px}
.consent-dialog__category{border-top:1px solid #334353;padding:20px 0}
.consent-dialog__category-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}
.consent-dialog__category h3{color:#fff;font-size:15px;margin:0;font-family:'Inter','Segoe UI',Arial,sans-serif}
.consent-dialog__category p{color:#8fa3ab;font-size:13px;line-height:1.6;margin:0}
.consent-pill{font:600 10px 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.06em;color:#8fa3ab;border:1px solid #334353;padding:5px 10px;border-radius:999px;white-space:nowrap}
.consent-dialog__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;padding-top:22px;border-top:1px solid #334353}
.consent-dialog__actions .consent-btn{flex:1}

/* Toggle switch (Analytics only - Essential uses the static pill above) */
.consent-switch{position:relative;display:inline-flex;align-items:center;cursor:pointer;flex:0 0 auto}
.consent-switch input{position:absolute;inset:0;width:44px;height:24px;margin:0;opacity:0;cursor:pointer}
.consent-switch__track{width:44px;height:24px;background:#334353;border-radius:999px;position:relative;transition:background .2s}
.consent-switch__thumb{position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .2s}
.consent-switch input:checked+.consent-switch__track{background:#bb1369}
.consent-switch input:checked+.consent-switch__track .consent-switch__thumb{transform:translateX(20px)}
.consent-switch input:focus-visible+.consent-switch__track{outline:3px solid #e64199;outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  .consent-dialog__panel{animation:none}
  .consent-switch__track,.consent-switch__thumb{transition:none}
}