/* THE CARD'S OWN X (Steven 2026-11-12: "It should just ahve a close button
   on the top right like this, when you close it you go back."): a card
   opened from the Cards page stands alone in the deck's frame, no bar
   over it, and one round X sits in its top right, 14px in from the card's
   top and right edges (the card fills the window less the deck's slide
   inset, --ds-slide-pad, and is centred at --ds-card-w from 600px:
   components/deck-shell.css), over the card's frame, clear of the title
   and the right column. See-through dark round, white line X, a hairline
   ring, as on a card's picture. components/_card_x.html. Tokens only. */
.card-x {
    position: fixed;
    top: calc(max(var(--ds-slide-pad, 4px), env(safe-area-inset-top, 0px)) + 14px);
    right: calc((100vw - var(--ds-card-w, calc(100vw - 8px))) / 2 + 14px);
    z-index: calc(var(--z-dropdown, 100) + 2);
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    border: 1px solid rgb(255 255 255 / 0.45);
    border-radius: var(--radius-full, 9999px);
    background: rgb(10 14 26 / 0.42);
    color: var(--color-white, #fff);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    -webkit-tap-highlight-color: transparent;
}
.card-x:hover { background: rgb(10 14 26 / 0.6); }
.card-x:focus-visible { outline: 2px solid var(--interactive-focus-ring); outline-offset: 2px; }
.card-x__icon { display: block; width: 18px; height: 18px; pointer-events: none; }
/* the title at the card's top stops short of the X (its 40px and 14px in,
   less the card's own inset to the words) */
.app-shell--deck-shell .pdpc .has-cf .tb-card__art > .tb-card__top { padding-right: 44px; }
/* nothing else closes the card: a turned card's back keeps its own words */