/* Cookie consent banner. Sits on the chrome tokens (core/css/tokens.css), the
   same ink band as the site header and footer, so it reads the same in both
   themes and on the standalone tools, which load tokens.css but not Tailwind.
   Every page that includes the banner links tokens.css first. */

#cookie-consent-banner.hidden {
    display: none;
}

#cookie-consent-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding: 0.9rem 1.25rem;
    background: rgb(var(--pe-chrome));
    color: rgb(var(--pe-on-chrome));
    border-top: 2px solid rgb(var(--pe-accent));
    /* JetBrains Mono is the indicator board's face (it loads no Space Mono). */
    font-family: 'Space Mono', 'JetBrains Mono Variable', 'Courier New', monospace;
    font-size: 0.8rem;
    line-height: 1.5;
}

#cookie-consent-banner p {
    margin: 0;
    max-width: 60ch;
}

#cookie-consent-banner a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgb(var(--pe-accent));
    text-underline-offset: 3px;
}

#cookie-consent-banner .cookie-consent-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

#cookie-consent-banner button {
    font-family: inherit;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid rgb(var(--pe-on-chrome) / .35);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

#cookie-consent-banner button:hover {
    background: rgb(var(--pe-on-chrome) / .08);
}

#cookie-consent-banner button:focus-visible {
    outline: 2px solid rgb(var(--pe-accent));
    outline-offset: 2px;
}

#cookie-consent-banner #cookie-consent-accept {
    background: rgb(var(--pe-accent));
    color: rgb(var(--pe-on-accent));
    border-color: rgb(var(--pe-accent));
}

#cookie-consent-banner #cookie-consent-accept:hover {
    background: rgb(var(--pe-accent-hover));
    border-color: rgb(var(--pe-accent-hover));
}