/* ============================================================
   Cookie consent banner.

   Design constraint that is legal, not aesthetic: "Reject" and
   "Accept" must be equally prominent - same size, same row, same
   visual weight class. A muted reject link next to a big green
   accept button is what regulators treat as invalid consent.
   ============================================================ */

.ck { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: end center; }
.ck[hidden] { display: none; }

.ck__backdrop {
    position: absolute; inset: 0;
    background: rgba(10, 37, 64, 0.32);
    backdrop-filter: blur(2px);
    animation: fade-in var(--t-med) var(--ease-out);
}

.ck__panel {
    position: relative;
    width: min(520px, calc(100% - 2 * var(--sp-4)));
    margin: var(--sp-4);
    padding: var(--sp-5);
    background: var(--c-surface-raised, #fff);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-modal);
    animation: ck-rise var(--t-slow) var(--ease-out);
    max-height: calc(100vh - 2 * var(--sp-4));
    overflow-y: auto;
}
.ck__panel:focus { outline: none; }

@keyframes ck-rise {
    from { opacity: 0; transform: translateY(24px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ck__icon {
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: var(--r-md);
    background: var(--grad-primary);
    color: #fff;
    margin-bottom: var(--sp-3);
    box-shadow: var(--shadow-btn);
}

.ck__title { font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
.ck__text { color: var(--c-text-soft); font-size: var(--fs-sm); margin-bottom: var(--sp-4); }

/* ---- Per-category options ---- */
.ck__options { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--sp-4); }
/* Must come AFTER the rule above: `display:flex` on a class beats the user
   agent's `[hidden] { display: none }` on specificity, so the attribute
   silently stops working without this. */
.ck__options[hidden] { display: none; }
.ck__opt {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    padding: 12px; border: 1px solid var(--c-border); border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.ck__opt:hover { border-color: var(--c-primary); background: var(--c-surface); }
.ck__opt--locked { cursor: default; background: var(--c-surface); }
.ck__opt--locked:hover { border-color: var(--c-border); }
.ck__opt-main { display: flex; align-items: flex-start; gap: 10px; }
.ck__opt input { margin-top: 3px; accent-color: var(--c-primary); width: 16px; height: 16px; flex: none; }
.ck__opt strong { display: block; font-size: var(--fs-sm); color: var(--c-ink); }
.ck__opt small { display: block; font-size: 12px; color: var(--c-text-faint); line-height: 1.45; margin-top: 2px; }

/* ---- Actions: equal weight, side by side ----
   minmax(0, 1fr), NOT 1fr. Plain `1fr` is `minmax(auto, 1fr)`, so a column
   refuses to shrink below its content - and "Accept all" is a longer word
   than "Reject", which quietly makes the accept button bigger. That size
   difference is precisely what makes consent invalid, so the equality has to
   be enforced by the grid rather than left to the copy. */
.ck__actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.ck__btn { width: 100%; justify-content: center; }
.ck__actions .ck__btn[hidden] { display: none; }

.ck__foot {
    display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center;
    margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--c-border);
}
.ck__link {
    font-size: 12px; color: var(--c-text-faint); text-decoration: underline;
    background: none; border: 0; padding: 0; cursor: pointer;
}
.ck__link:hover { color: var(--c-primary); }

@media (max-width: 480px) {
    /* Stacked, full width, still identical to each other. */
    .ck__actions { grid-template-columns: minmax(0, 1fr); }
    .ck__panel { padding: var(--sp-4); }
}

/* ---- Cookie policy tables ---- */
.ck-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin: var(--sp-3) 0 var(--sp-5); }
.ck-table th {
    text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--c-text-faint); padding: 8px; border-bottom: 1px solid var(--c-border);
}
.ck-table td { padding: 10px 8px; border-bottom: 1px solid var(--c-border); vertical-align: top; }
.ck-table code { font-family: var(--font-mono); font-size: 12px; }
/* Storage names such as __<key>_visitor_session_event_uuid: break them rather than widen the table on a phone. */
.ck-table__storage { overflow-wrap: anywhere; min-width: 10em; }