/* pgb-compliance-gate — age-gate modal.
   Brand values read pgb-theme tokens, with the old hand-copied literal kept as
   the fallback so the modal still renders if the theme stylesheet fails to
   load. The theme redefines those tokens under html[data-theme="dark"], so the
   modal follows dark mode without a second rule here. Markup, JS, class names,
   cookie/REST behavior are frozen — anything inside this file may change.
   (Phase 3 re-brand, 2026-06-11; dark mode, 2026-07-25.) */
:root {
    /* A FILL is a plate carrying white text, so it stays deep in dark mode.
       INK is the same brand navy drawn against the card, so it goes light.
       One variable cannot do both — hence the split. */
    --pgb-cg-primary:        var(--color-primary-fill, #16304F);
    --pgb-cg-primary-hover:  var(--color-primary-fill-hover, #1F3E63);
    --pgb-cg-ink:            var(--color-primary-ink, #16304F);
    --pgb-cg-on-primary:     var(--color-on-primary, #fff);
    --pgb-cg-card-bg:        var(--color-surface, #ffffff);
    --pgb-cg-text:           var(--color-ink-2, #2C3A48);
    --pgb-cg-muted:          var(--color-ink-soft, #56636F);
    --pgb-cg-accent:         var(--color-steel, #5E89A3);   /* 3.76:1 on white, 4.78:1 on the dark card */
    --pgb-cg-accent-wash:    var(--color-steel-50, #EAF0F3);
    --pgb-cg-radius:         14px;      /* = --radius-card */
    --pgb-cg-radius-btn:     999px;     /* = --radius-pill */
    --pgb-cg-shadow:         0 10px 30px rgba(0, 0, 0, 0.25);
}

.pgb-cg-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(13, 24, 38, 0.88);   /* navy-tinted scrim — already dark, so no dark-mode counterpart */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
    font-family: inherit;
}

.pgb-cg-card {
    box-sizing: border-box;   /* 90vw + 4rem padding must not exceed tiny viewports */
    background: var(--pgb-cg-card-bg, #fff);
    color: var(--pgb-cg-text, #2C3A48);
    max-width: 500px;
    width: 90vw;
    padding: 2.25rem 2rem;
    border-radius: var(--pgb-cg-radius, 14px);
    box-shadow: var(--pgb-cg-shadow, 0 10px 30px rgba(0, 0, 0, 0.25));
}

.pgb-cg-title {
    margin: 0 0 0.75rem;
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--pgb-cg-ink, #16304F);
}

.pgb-cg-intro,
.pgb-cg-disclaimer {
    margin: 0 0 1rem;
    line-height: 1.55;
    font-size: 0.95rem;
}

.pgb-cg-disclaimer {
    font-size: 0.85rem;
    color: var(--pgb-cg-muted, #56636F);
}

.pgb-cg-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.pgb-cg-btn {
    display: inline-block;
    box-sizing: border-box;
    min-height: 44px;
    padding: 0.85rem 1.5rem;
    text-align: center;
    text-decoration: none;
    border-radius: var(--pgb-cg-radius-btn, 999px);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.95rem;
}

.pgb-cg-btn-primary {
    background: var(--pgb-cg-primary, #16304F);
    color: var(--pgb-cg-on-primary, #fff);
    border: 1px solid var(--pgb-cg-primary, #16304F);
}

.pgb-cg-btn-primary:hover,
.pgb-cg-btn-primary:focus {
    background: var(--pgb-cg-primary-hover, #1F3E63);
    color: var(--pgb-cg-on-primary, #fff);
}

.pgb-cg-btn-secondary {
    background: transparent;
    color: var(--pgb-cg-ink, #16304F);
    border: 1.5px solid var(--pgb-cg-accent, #5E89A3);   /* ≥3:1 UI border */
}

.pgb-cg-btn-secondary:hover,
.pgb-cg-btn-secondary:focus {
    background: var(--pgb-cg-accent-wash, #EAF0F3);
}

.pgb-cg-btn:focus-visible {
    outline: 2px solid var(--pgb-cg-accent, #5E89A3);
    outline-offset: 2px;
}

/* Force body lock while modal is up — prevents background scroll */
html.pgb-cg-locked,
html.pgb-cg-locked body {
    overflow: hidden !important;
}