/* Consent notice — a quiet bar at the bottom, not a wall over the page.

   It sits above the chart page's bottom navigation, so on a phone it must
   not cover the menu: the padding below accounts for the safe area and the
   bar is dismissed with one tap.
*/

.consent {
    position: fixed;
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 900;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    max-width: 720px; margin: 0 auto;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--border, #2a2a4a);
    background: var(--bg-card, #1a1a2e);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
    /* Starts just below its resting place and fades in. */
    opacity: 0; transform: translateY(12px);
    transition: opacity .22s ease, transform .22s ease;
}
.consent-in { opacity: 1; transform: translateY(0); }

.consent-text {
    flex: 1 1 260px; min-width: 0;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: .82rem; line-height: 1.55;
    color: var(--text, #e0e0e0);
}
.consent-text strong { color: var(--text-heading, #c9b1ff); font-weight: 600; }
.consent-text a { color: var(--accent-light, #a78bfa); }

.consent-ok {
    flex-shrink: 0;
    min-height: 44px; padding: 10px 22px;
    border: none; border-radius: 10px; cursor: pointer;
    background: var(--accent, #7c3aed); color: #fff;
    font-family: inherit; font-size: .84rem; font-weight: 600;
    transition: background-color .15s ease;
}
.consent-ok:hover { background: var(--accent-hover, #6d28d9); }
.consent-ok:focus-visible {
    outline: none; box-shadow: var(--focus-ring, 0 0 0 3px rgba(124, 58, 237, .28));
}

.consent-actions {
    flex-shrink: 0;
    display: flex; align-items: center; gap: 8px;
}
.consent-no {
    min-height: 44px; padding: 10px 16px;
    border: 1px solid var(--border, #2a2a4a); border-radius: 10px; cursor: pointer;
    background: transparent; color: var(--text, #e0e0e0);
    font-family: inherit; font-size: .84rem; font-weight: 600;
    transition: border-color .15s ease, color .15s ease;
}
.consent-no:hover { border-color: var(--accent-light, #a78bfa); color: var(--accent-light, #a78bfa); }
.consent-no:focus-visible {
    outline: none; box-shadow: var(--focus-ring, 0 0 0 3px rgba(124, 58, 237, .28));
}

@media (max-width: 600px) {
    /* A storage notice should not cost a fifth of the screen. Keeping the
       button beside the text rather than under it, and trimming the padding,
       holds the bar to roughly two lines — small enough that the page needs
       only a modest amount of room made for it. */
    .consent {
        bottom: max(10px, env(safe-area-inset-bottom));
        gap: 10px; padding: 11px 13px; border-radius: 12px;
    }
    .consent-text { flex: 1 1 auto; font-size: .76rem; line-height: 1.45; }
    .consent-actions { gap: 6px; }
    .consent-ok { padding: 9px 16px; font-size: .78rem; }
    .consent-no { padding: 9px 12px; font-size: .78rem; }
    /* The script sets this class while the notice is on screen. A :has()
       selector would be neater but is not safe on every phone browser. */
    body.consent-open { padding-bottom: 120px; }
    /* The landing hero fills the first screen on its own, so bottom padding
       on the body cannot lift it — the notice would sit on the sign-in link.
       We let the hero keep its own padding (no shift) and rely on the body
       padding for scroll room; the notice is fixed and dismissible. */
}

@media (prefers-reduced-motion: reduce) {
    .consent { transition: none; }
}