/* The cookie notice.
 *
 * Hand-written, like _ours.css, _listing.css, _links.css and _arrive.css. No
 * design file draws this; its mock is the sheet at /design-2026/cookies/,
 * built by build-cookies.py. Jack chose B5 on 10 September: bottom right,
 * cask ground, one button.
 *
 * Why one button and not accept-and-reject. This site sets two cookies. One
 * signs you in. One lets the trip planner know a guest coming back to a
 * shared link. There is no analytics, no advertising, no pixel and nothing
 * embedded from another company - checked in the code, not assumed. Cookies
 * that are strictly necessary need no consent, so a gate would be asking
 * permission for something we do not do, and config/legal.php already tells
 * readers in plain words that we track nobody.
 *
 * The gate is drawn on the sheet as S3 and S4 and is not built. The day
 * something non-essential arrives, `.ck-do` grows the second row and
 * Consent::allows() starts being asked. Until then the honest thing is a
 * notice.
 *
 * Two class names cost an afternoon before this file existed, both the same
 * mistake. `.forest` is the system's band class and fills a button with
 * paper, which left Shell words on a paper button. `.pair` carries an 81px
 * margin elsewhere and made the card half as tall again as it should be, so
 * its heading sat outside the frame. Every class here is ck- prefixed for
 * that reason. Nothing in this file is allowed to be a word the system
 * already owns.
 */

/* ONE LINE AND ONE BUTTON (Jack, 14 October 2026: "can the cookies pop up be a bit neater in the corner and can you
   make it as consise as legally possible"). The card is the size of what it says: the sentence, the link to /cookies,
   and OK beside it. The old card (heading, two sentences, a 380px panel) is kept in
   scratchpad/site-walk/out/cookies-css-before.css. */
.ck {
    position: fixed;
    right: clamp(16px, 3vw, 32px);

    /* In the corner itself; above the Desk's bell only where the bell is on the page (a signed-out reader has none,
       and the card floated 106px up for nothing). The bell is 56px square, clamp(16px,3vw,32px) from both edges. */
    bottom: clamp(16px, 3vw, 32px);
    z-index: 70;                    /* over the page, under the menu and the Desk */
    width: max-content;
    max-width: min(420px, calc(100vw - 32px));

    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 12px 12px 18px;

    background: var(--cask, #392916);
    color: var(--on-forest, #F1EDE8);
    border: 1px solid rgba(241, 237, 232, .2);
    border-radius: 0;               /* the house is square */
    box-shadow: 0 12px 28px rgba(65, 64, 66, .26);
}

.ck p {
    margin: 0;
    font-family: var(--serif);
    font-size: 14px;
    line-height: 1.45;
    color: var(--on-forest, #F1EDE8);
    text-wrap: pretty;
}

/* The house button, on a dark ground: Shell line, Shell words, and the wipe
   fills Shell with cask words. Stated rather than inherited - a card is not
   a band, and the band rules are not written for it. */
.ck .btn {
    flex: 0 0 auto;
    height: 36px;
    min-width: 56px;
    padding: 0 16px;
    font-size: 13px;
    white-space: nowrap;
    background: transparent;
    border-color: var(--on-forest, #F1EDE8);
    color: var(--on-forest, #F1EDE8);
    --hover-bg: var(--on-forest, #F1EDE8);
    --hover-color: var(--cask, #392916);
}

.ck-more {
    color: var(--on-forest-55, rgba(241, 237, 232, .72));
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.ck-more:hover {
    color: var(--on-forest, #F1EDE8);
}

.ck :focus-visible {
    outline: 2px solid var(--august, #A0BAD4);
    outline-offset: 3px;
}

/* It arrives rather than appearing: the page should be read first. */
@keyframes ck-in {
    from {
        opacity: 0;
        transform: translate3d(0, 10px, 0);
    }
}

.ck {
    animation: ck-in .45s var(--ease, cubic-bezier(.22, .8, .24, 1)) .9s both;
}

@media (prefers-reduced-motion: reduce) {
    .ck {
        animation: none;
    }
}

body:has(.bellfab) .ck {
    bottom: calc(clamp(16px, 3vw, 32px) + 56px + 18px);
}

/* A phone: the same one row, across the foot. */
@media (max-width: 720px) {
    .ck {
        left: 16px;
        right: 16px;
        bottom: 16px;
        width: auto;
        max-width: none;
        justify-content: space-between;
        padding: 10px 10px 10px 14px;
    }

    .ck p {
        font-size: 13.5px;
    }
}

@media (max-width: 720px) {
    body:has(.bellfab) .ck {
        bottom: calc(16px + 56px + 14px);   /* clear of the bell here too */
    }
}