/* 40 · deck: the card table, its navigation and the pull counter.
   Layout (perceive.layout): the table is a container and every size inside it is a share of its width. A card is
   --card-w wide (its 5:7 sets its height); the gap between a pack's two cards and the air round them scale with it,
   and the air is the reach of a pull's light, so a pull is never cut. Wide, a pack's two cards sit side by side;
   when the table cannot hold both at their floor, they stack, the same order top to bottom. The frame closes round
   the cards: no band of empty table under them. */

[data-pack="place"]{--pk:var(--rose)}
[data-pack="plot"]{--pk:var(--g-peri-3)}
[data-pack="voice"]{--pk:var(--g-teal-3)}
[data-pack="sheet"]{--pk:var(--g-gold-3)}
[data-pack="twist"]{--pk:var(--g-amethyst-3)}

/* the table lets a card's light pass its edge; only its ground (the swirl) is clipped to its shape */
.rw-table{position:relative;isolation:isolate;container-type:inline-size;border-radius:22px;background:var(--rw-table);
  box-shadow:inset 0 3px 22px var(--rw-table-shade),inset 0 0 0 .5px rgba(255,255,255,.04),0 0 11px color-mix(in srgb,var(--rw-table-shade) 50%,transparent)}
/* the swirl: three soft clouds on a square much larger than the table, turning about its middle. The clouds are
   soft by their own gradients (no blur filter) and the square turns as a whole, so the loop costs no repaint;
   the square is big enough that its corners never pass inside the table */
.rw-table__ground{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;pointer-events:none;
  --rw-px:inherit;--rw-py:inherit;--rw-pulse:inherit}
.rw-table__ground::before{content:"";position:absolute;left:-60%;top:50%;width:220%;aspect-ratio:1;margin-top:-110%;
  --rw-px:inherit;--rw-py:inherit;--rw-pulse:inherit;
  background:radial-gradient(22% 22% at 38% 40%,var(--rw-table-swirl-a),transparent),radial-gradient(20% 20% at 62% 46%,var(--rw-table-swirl-b),transparent),
    radial-gradient(18% 18% at 50% 64%,var(--rw-table-swirl-c),transparent);
  opacity:calc(.85 + var(--rw-pulse) * .15);animation:rw-swirl calc(var(--rw-beat) * 16) linear infinite;
  translate:calc(var(--rw-px) * -10px) calc(var(--rw-py) * -8px)}
@keyframes rw-swirl{to{rotate:360deg}}

/* the sizes, as shares of the table's width (cqi). Side by side: two cards, one gap and the air on both sides fill
   the width, so a card is (width - gap) / 2.36 (air = .18 of a card); a card also never grows past what lets the
   whole pack fit the screen's height, nor past 440 px. When centered by a cap, the air grows */
.rw-table__viewport,.rw-table__nav{
  --gap:clamp(10px,3cqi,34px);
  --card-w:min(calc((100cqi - var(--gap)) / 2.36),calc((92svh - 56px) / 1.8),440px);
  --air:calc(var(--card-w) * .18)}

/* the arrows are the Button type (06-button.css --nav); here only where they sit */
.rw-table__nav{position:absolute;top:50%;z-index:4;margin-top:calc(var(--nav-s,36px) / -2)}
#rw-deck-prev{left:max(4px,calc((50cqi - var(--card-w) - var(--gap) / 2 - var(--nav-s,36px)) / 2))}
#rw-deck-next{right:max(4px,calc((50cqi - var(--card-w) - var(--gap) / 2 - var(--nav-s,36px)) / 2))}

/* the viewport clips sideways only (the next pack waits beyond the edge); up and down a pull's light may spread
   into the air it was given */
.rw-table__viewport{overflow-x:clip;overflow-y:visible;min-width:0;touch-action:pan-y;cursor:grab;padding-block:calc(var(--card-w) * .2)}
.rw-table__viewport:active{cursor:grabbing}
.rw-table__track{display:flex;align-items:flex-start;transition:transform .45s var(--e);will-change:transform}
.rw-pack{flex:0 0 100%;min-width:0;display:flex;flex-direction:column;align-items:center;gap:calc(var(--card-w) * .07)}
/* the head spans exactly the cards it titles: the tag as its eyebrow, then the pack's name, big enough that a
   stranger knows at a glance which pack lies on the table (the reader, 2026-10-13: "we build for fools"). One line
   each, so every pack is the same height */
.rw-pack__head{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  width:calc(var(--card-w) * 2 + var(--gap))}
.rw-pack__name,.rw-pack__tag{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rw-pack__name{font-size:clamp(28px,calc(var(--card-w) * .14),48px);line-height:1.1;color:var(--rw-title-ink)}
.rw-pack__tag{font-family:var(--f-data);font-size:clamp(11px,calc(var(--card-w) * .042),13px);color:var(--rw-eyebrow-ink);letter-spacing:.12em;text-transform:uppercase}
.rw-pack__pair{display:grid;grid-template-columns:repeat(2,var(--card-w));gap:var(--gap);justify-content:center}
/* a pulled card rises over its neighbour (its light falls on it), never over the titles */
.rw-pack__pair .rw-card[data-state="pulling"]{z-index:1}

/* narrow: the cards stack, one above the other; each takes the width less its air */
@container (max-width:560px){
  .rw-table__viewport,.rw-table__nav{--card-w:min(calc(100cqi / 1.36),440px)}
  .rw-pack__pair{grid-template-columns:var(--card-w)}
  .rw-pack__head{width:var(--card-w)}
  .rw-table__nav{display:none}
}

.rw-dots{display:flex;justify-content:center;gap:8px;padding:10px 14px;border-radius:999px;background:var(--rw-dots-bg);width:max-content;margin:14px auto 0;
  box-shadow:inset 0 2px 10px var(--rw-table-shade),0 0 5px color-mix(in srgb,var(--rw-table-shade) 50%,transparent)}
.rw-dots__dot{width:26px;height:6px;border-radius:3px;border:0;background:var(--rw-dot);padding:0;transition:background-color .2s}
.rw-dots__dot[aria-current="true"]{background:var(--pk)}
.rw-pulled{text-align:center;font-family:var(--f-data);font-size:12px;letter-spacing:.08em;color:var(--rw-pulled-ink);min-height:18px;margin-top:10px}
.rw-pulled__link{color:var(--rw-pulled-link);text-decoration:none;border-bottom:1px solid currentColor}

@media (prefers-reduced-motion:reduce){.rw-table__ground::before{animation:none}.rw-table__track{transition:none}}