/* HAND-WRITTEN. BOOKMARK AND ADD TO TRIP, ONE CONTROL ON EVERY CARD (11 October 2026; components/design/card-keep.tsx;
   chosen as E1 from /design-2026/card-keep/; the model in docs/decisions.md the same day). On every page, beside
   _trip-kit (HandleInertiaRequests). Prefix hk-. Square corners throughout; no lines between things. */
:root { --hk-h: 50px; --hk-fs: 14.5px; --hk-pad: 22px; --hk-gap: 10px; --hk-dim: .38; }

/* the cards it sits on hold it: Explore's photograph, Days Out's card, the Bookmarks card */
.ex-p, .dor6-pin, .hk-card { position: relative; }

/* POINTED AT: the photograph dims and the pair stands in its middle */
.hk-acts { position: absolute; z-index: 4; inset: 0; display: flex; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; gap: var(--hk-gap); padding: 12px;
    opacity: 0; pointer-events: none; transition: opacity .25s cubic-bezier(.22, .8, .24, 1); }
:is(.ex-c, .dor6-pin, .hk-card):is(:hover, :focus-within) .hk-acts { opacity: 1; pointer-events: auto; }
:is(.ex-c, .hk-card) img, :is(.ex-c) video { transition: filter .3s cubic-bezier(.22, .8, .24, 1), transform .9s cubic-bezier(.22, .8, .24, 1); }
.ex-c:is(:hover, :focus-within):has(.hk-acts) .ex-p :is(img, video), .hk-card:is(:hover, :focus-within) > img { filter: brightness(calc(1 - var(--hk-dim))); }
.ex-c:has(.hk-acts) .ex-p::after { display: none; }

.hk-b { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--hk-h); padding: 0 var(--hk-pad); box-sizing: border-box; border: 1px solid #F9F5EE; border-radius: 0;
    font: 500 var(--hk-fs)/1 'Jost', Helvetica, Arial, sans-serif; letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer; text-decoration: none; }
.hk-b.fill { background: #F9F5EE; color: #414042; }
.hk-b.fill:hover { background: #fff; }
.hk-b.line { background: transparent; color: #F9F5EE; }
.hk-b.line:hover { background: rgba(249, 245, 238, .16); }
.hk-b:focus-visible { outline: 2px solid #F9F5EE; outline-offset: 2px; }
.hk-b svg, .hk-sb svg, .hk-one svg, .hk-mark svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.hk-b.on svg, .hk-sb.on svg { fill: currentColor; }
.hk-b.line.on svg { fill: #C08C3D; stroke: #C08C3D; }

/* AT REST: a small square for each thing it is already in, bottom right */
.hk-marks { position: absolute; z-index: 3; right: 0; bottom: 0; display: flex; pointer-events: none; }
.hk-mark { display: grid; place-items: center; width: 40px; height: 40px; background: #F9F5EE; color: #414042; }
.hk-mark svg { fill: #C08C3D; stroke: #C08C3D; }
.hk-mark.bm svg { fill: #414042; stroke: #414042; }
/* Days Out's name stands clear of them */
.dor6-pin.pic:has(.hk-marks) .dor6-t { right: 56px; }
.dor6-pin.pic:has(.hk-mark + .hk-mark) .dor6-t { right: 96px; }
/* the old controls the pair replaces, where a page still draws them */
.ex-c:has(.hk-acts) :is(.ex-save, .ex-trip) { display: none; }

/* NO POINTER (a phone): one square in the corner; the pair and the marks stand down */
.hk-one { display: none; }
@media (hover: none) {
    .hk-acts, .hk-marks { display: none; }
    .hk-one { position: absolute; z-index: 5; right: 0; bottom: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; background: #F9F5EE; color: #414042; cursor: pointer; }
    .hk-one svg { width: 19px; height: 19px; }
    .hk-one.on svg { fill: #C08C3D; stroke: #C08C3D; }
    .dor6-pin.pic:has(.hk-one) .dor6-t { right: 56px; }
}
/* the sheet from the foot: the name, the two, Close */
.hk-sheet-wrap { position: fixed; inset: 0; z-index: 1100; background: rgba(14, 12, 10, .42); animation: hk-fade .25s ease both; }
.hk-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: #FFFFF7; color: #414042; padding: 22px 16px calc(14px + env(safe-area-inset-bottom)); animation: hk-up .3s cubic-bezier(.22, .8, .24, 1) both; }
.hk-sheet-h { margin: 0 0 16px; font: 400 26px/1.12 'Larken', Georgia, serif; }
.hk-sb { display: flex; width: 100%; height: 54px; margin: 0 0 8px; align-items: center; justify-content: center; gap: 9px; border: 1px solid #414042; border-radius: 0; background: #FFFFF7; color: #414042;
    font: 500 15.5px/1 'Jost', Helvetica, Arial, sans-serif; cursor: pointer; }
.hk-sb.fill { background: #AFA065; border-color: #AFA065; color: #2B301D; }
.hk-sheet-x { display: block; width: 100%; height: 48px; border: 0; background: none; font: 500 15px/1 'Jost', Helvetica, Arial, sans-serif; color: rgba(65, 64, 66, .62); cursor: pointer; }
@keyframes hk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hk-up { from { transform: translateY(100%); } to { transform: none; } }

/* THE NOTE AT THE FOOT: "Bookmarked." and the way to them */
.hk-note { position: fixed; z-index: 1150; left: 50%; bottom: 22px; display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 8px 0 10px; box-sizing: border-box; max-width: calc(100vw - 32px);
    background: #2B301D; color: #F9F5EE; font: 400 17px/1 'Lora', Georgia, serif; white-space: nowrap; box-shadow: 0 10px 40px rgba(14, 12, 10, .28);
    opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: opacity .3s cubic-bezier(.22, .8, .24, 1), transform .3s cubic-bezier(.22, .8, .24, 1); }
.hk-note.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.hk-note.over-dock { bottom: 96px; }
.hk-note img { width: 40px; height: 40px; object-fit: cover; display: block; }
.hk-note img[hidden] { display: none; }
.hk-note span:first-of-type { padding-left: 4px; }
.hk-note a { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; background: #AFA065; color: #2B301D; font: 500 14.5px/1 'Jost', Helvetica, Arial, sans-serif; text-decoration: none; }
.hk-note a:hover { background: #392916; color: #F9F5EE; }
.hk-note:not(:has(img:not([hidden]))) { padding-left: 20px; }
@media (max-width: 760px) { .hk-note { bottom: 16px; font-size: 16px; } .hk-note.over-dock { bottom: 84px; } }
@media (prefers-reduced-motion: reduce) { .hk-note, .hk-acts, .hk-sheet, .hk-sheet-wrap { transition: none; animation: none; } }

/* THE TRIP'S CHOICE (several trips, none in hand): the dock, its menu open on the trips by name */
.sfx-bar.is-choose .sfx-bar-menu p { font: 400 15px/1.4 'Jost', Helvetica, Arial, sans-serif; color: #682114; }
.sfx-bar.is-choose .sfx-bar-new { font: 500 15px/1.3 'Jost', Helvetica, Arial, sans-serif; margin-top: 8px; }

/* THE BOOKMARKS CARD: Days Out's card (Jack, 11 October 2026: "the card widgets could be more like the listings on
   days out"): the photograph fills it, what it is and where across its top, the name in Larken at its foot */
.hk-card { display: block; overflow: hidden; aspect-ratio: 342 / 427; background: #E9E2D6; color: #F9F5EE; text-decoration: none; }
.hk-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hk-card::after { content: ''; position: absolute; inset: 30% 0 0; z-index: 1; background: linear-gradient(180deg, rgba(14, 12, 10, 0), rgba(14, 12, 10, .28) 45%, rgba(14, 12, 10, .66)); pointer-events: none; }
.hk-card::before { content: ''; position: absolute; inset: 0 0 72%; z-index: 1; background: linear-gradient(180deg, rgba(14, 12, 10, .32), rgba(14, 12, 10, 0)); pointer-events: none; }
.hk-tag { position: absolute; z-index: 2; left: 20px; right: 20px; top: 18px; display: flex; justify-content: space-between; gap: 12px;
    font: 500 12.5px/1.25 'Jost', Helvetica, Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #F9F5EE; }
.hk-tag > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hk-name { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 18px; font: 300 min(clamp(26px, 2vw, 34px), 28px + (clamp(26px, 2vw, 34px) - 28px) * 0.6)/1.08 'Larken', Georgia, serif; color: #F9F5EE; }
.hk-card:has(.hk-marks) .hk-name { right: 56px; }
@media (hover: none) { .hk-card .hk-name { right: 56px; } }
@media (max-width: 760px) { .hk-tag { left: 14px; right: 14px; top: 13px; font-size: 11px; } .hk-name { left: 14px; bottom: 13px; font-size: 22px; } }

/* under a Bookmarks card: the collections it is in, or the way to put it in one (the drawer, collections only) */
.hk-into { display: block; margin-top: 12px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: inherit; font: inherit;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(65, 64, 66, .35); }
.hk-into:hover { text-decoration-color: currentColor; }

/* the pair is two equal halves, side by side on any card (Explore's at 1920 is 278 wide), never stacked; 150 each at most */
.hk-acts { flex-wrap: nowrap; padding: 10px; }
.hk-acts .hk-b { flex: 0 0 min(150px, calc(50% - var(--hk-gap) / 2)); padding: 0 8px; min-width: 0; }
.hk-acts .hk-b:only-child { flex-basis: min(180px, 100%); }

/* on a phone the card is two to a row (158 wide at 375): the top line keeps what it is and lets the region go, never
   two words cut short ("TO S...", "ISLE OF S...", seen 11 October 2026) */
@media (max-width: 560px) { .hk-tag > span + span { display: none; } }

/* ONE AFTER THE OTHER, AND BIGGER (Jack, 11 October 2026: "maybe the add and remove button on the cards could be one
   after the other rather than side by side so they can be bigger, and remove the love heart"): the two stacked in the
   middle of the photograph, each 54 tall and as wide as the card allows up to 240, words alone. This replaces the
   side-by-side halves above. */
.hk-acts { flex-direction: column; flex-wrap: nowrap; gap: 10px; padding: 20px; }
.hk-acts .hk-b, .hk-acts .hk-b:only-child { flex: 0 0 auto; width: min(240px, 100%); height: 54px; padding: 0 16px; font-size: 15.5px; }
.hk-mark.trip svg { fill: none; stroke: #C08C3D; stroke-width: 2; }
.hk-one svg { fill: none; }
.hk-one.on svg { fill: none; stroke: #C08C3D; }
.hk-one:not(.on) svg path[d^="M2.5"] { fill: none; }

/* THE NOTE, BOTTOM LEFT AND BIGGER (Jack, 11 October 2026: "maybe the bookmarked animation card can go bottom left then
   stay a little longer before dissapearing and be bigger"): a card in the corner, clear of the trip's dock in the
   middle, the place's photograph 64 square, the words at 20px, rising in from below. */
.hk-note { left: 24px; bottom: 24px; transform: translateY(16px); height: auto; min-height: 88px; padding: 12px 12px 12px 12px; gap: 20px; font-size: 20px; }
.hk-note.on { transform: none; }
.hk-note.over-dock { bottom: 24px; }
.hk-note img { width: 64px; height: 64px; }
.hk-note a { height: 48px; padding: 0 22px; font-size: 15.5px; }
.hk-note:not(:has(img:not([hidden]))) { padding-left: 24px; }
@media (max-width: 760px) { .hk-note { left: 16px; right: 16px; bottom: 16px; max-width: none; min-height: 76px; font-size: 18px; gap: 14px; }
    .hk-note img { width: 52px; height: 52px; } .hk-note a { margin-left: auto; } .hk-note.over-dock { bottom: 84px; } }

/* where the name is written on the photograph (Days Out, Find your stay, Bookmarks) the stack would sit on a long name
   (5 of 48 Days Out cards are short landscapes no placing clears, measured 11 October 2026), so the name steps back while
   the card is pointed at; the reader has just read it */
.dor6-pin .dor6-t, .hk-card .hk-name { transition: opacity .25s cubic-bezier(.22, .8, .24, 1); }
.dor6-pin:is(:hover, :focus-within):has(.hk-acts) .dor6-t, .hk-card:is(:hover, :focus-within) .hk-name { opacity: 0; }
@media (hover: none) { .dor6-pin .dor6-t, .hk-card .hk-name { opacity: 1 !important; } }

/* THREE: Bookmark (or Add to trip), Add to trip (or Remove), More info (Jack, 11 October 2026: "maybe should be add remove
   and more info for the buttons"); a little closer together so the three stand on the shortest card */
.hk-acts { gap: 8px; padding: 14px 20px; }
.hk-acts .hk-b, .hk-acts .hk-b:only-child { height: 52px; }
a.hk-sb { text-decoration: none; box-sizing: border-box; }

/* LESS HEIGHT (Jack, 11 October 2026, of the stack on staging: "i think these buttons are too big, make them less height"):
   42 tall, 6 apart, the words a little smaller; the width stays */
.hk-acts { gap: 6px; }
.hk-acts .hk-b, .hk-acts .hk-b:only-child { height: 42px; font-size: 14.5px; }

/* ALL THREE ALIKE (Jack, 11 October 2026: "why is book mark white all the time, they should be same style"): each an
   outline in shell on the dimmed photograph, filling shell with ink words under the pointer */
.hk-acts .hk-b.fill, .hk-acts .hk-b.line { background: transparent; color: #F9F5EE; border-color: #F9F5EE; }
.hk-acts .hk-b.fill:hover, .hk-acts .hk-b.line:hover { background: #F9F5EE; color: #414042; }

/* A LITTLE LARGER (Jack, 11 October 2026: "i think the bookmark, add to trip, more info buttons can be a little larger"):
   48 tall, the words at 15.5, up to 256 wide */
.hk-acts .hk-b, .hk-acts .hk-b:only-child { height: 48px; font-size: 15.5px; width: min(256px, 100%); }
.hk-acts { gap: 7px; }

/* ON A CLICK, NOT A POINT (Jack, 15 October 2026, of a trip's Things to do: "instead of buttons appears on hover over can
   the buttons appears when you click on a card"): on a wall marked hk-tap (a trip's own page, explore-wall.tsx) pointing
   at a card only lifts its photograph a little; a click dims it, fades its name and stands the buttons on it, and the
   card held open is hk-open. Reached by keyboard, the buttons still show, so they can be tabbed to. */
@media (hover: hover) {
    .hk-tap .dor6-pin.pic:not(.hk-open):is(:hover, :focus-within) > img { filter: none; }
    .hk-tap .dor6-pin:not(.hk-open) .hk-acts { opacity: 0; pointer-events: none; }
    .hk-tap .dor6-pin:not(.hk-open) .dor6-t { opacity: 1; }
    .hk-tap .dor6-pin.hk-open .hk-acts, .hk-tap .dor6-pin:has(:focus-visible) .hk-acts { opacity: 1; pointer-events: auto; }
    .hk-tap .dor6-pin.hk-open .dor6-t, .hk-tap .dor6-pin:has(:focus-visible) .dor6-t { opacity: 0; }
    .hk-tap .dor6-pin.pic.hk-open > img, .hk-tap .dor6-pin.pic:has(:focus-visible) > img { filter: brightness(.62); }
}