/* Flip book (/demos/flipbook/, flipbook.js). The card is as big as the stage allows (container query units), with the
   strips' arrows beside it: previous on the left, next and a lock on the right. */
.fb { --pad: clamp(var(--space-3), 2vmin, var(--space-6)); display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--space-4); padding: var(--pad); }
.fb-book { container-type: size; display: flex; align-items: center; justify-content: center; min-height: 0; padding-top: 14px; }
.fb-book > * { --cw: min(100cqw - 104px, (100cqh - 14px) * 0.75, 560px); --ch: calc(var(--cw) * 4 / 3); }
.fb-side { position: relative; flex: none; width: 52px; height: var(--ch); }

.fb-card { position: relative; flex: none; width: var(--cw); height: var(--ch); border-radius: var(--radius-lg); background: var(--paper-3); box-shadow: 0 1px 0 hsl(0 0% 100% / 0.6) inset, var(--shadow-lg); perspective: 1400px; transition: background-color 700ms var(--ease-out); opacity: 0; }
.is-ready .fb-card { opacity: 1; transition: background-color 700ms var(--ease-out), opacity 400ms var(--ease-out); }
.fb-layer { position: absolute; inset: 0; z-index: 1; clip-path: inset(var(--t) 0 var(--b) 0); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fb-layer[data-strip="0"] { clip-path: inset(var(--t) 0 var(--b) 0 round var(--radius-lg) var(--radius-lg) 0 0); }
.fb-layer[data-strip="3"] { clip-path: inset(var(--t) 0 var(--b) 0 round 0 0 var(--radius-lg) var(--radius-lg)); }
.fb-layer.is-turning { z-index: 3; }
.fb-layer img { display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; }
/* the cuts between pages: a fine paper edge */
.fb-seam { position: absolute; left: 0; right: 0; z-index: 4; height: 1px; background: hsl(0 0% 100% / 0.55); box-shadow: 0 1px 0 hsl(0 0% 0% / 0.08); pointer-events: none; }
.fb-hit { position: absolute; left: 0; right: 0; z-index: 5; cursor: pointer; touch-action: pan-y; }
.fb-hit.is-locked { box-shadow: inset 3px 0 0 var(--accent); }
/* the binding along the top */
.fb-rings { position: absolute; left: 7%; right: 7%; top: -11px; z-index: 6; display: flex; justify-content: space-between; pointer-events: none; }
.fb-rings i { width: clamp(6px, calc(var(--cw) * 0.022), 10px); height: 20px; border: 2px solid var(--ink-3); border-radius: 6px; background: linear-gradient(to right, hsl(0 0% 100% / 0.6), transparent); }

.fb-btn { position: absolute; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink-2); box-shadow: var(--shadow-sm); cursor: pointer; transition: color var(--dur-fast) var(--ease-out), translate var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.fb-btn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fb-btn:hover { color: var(--ink); }
.fb-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fb-side .fb-btn { translate: 0 -50%; }
.fb-prev .fb-btn { right: 8px; }
.fb-next .fb-btn { left: 8px; }
.fb-prev .fb-btn:hover { translate: -2px -50%; }
.fb-next .fb-btn:hover { translate: 2px -50%; }
/* a strip's lock: at its right edge, faint until you point at the strip or it is on */
.fb-lock { right: 8px; top: 50%; width: 30px; height: 30px; translate: 0 -50%; border-color: transparent; background: hsl(0 0% 100% / 0.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--ink-2); box-shadow: none; opacity: 0.55; transition: opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.fb-lock svg { width: 15px; height: 15px; }
.fb-hit:hover .fb-lock, .fb-lock:focus-visible { opacity: 1; }
.fb-lock[aria-pressed="true"] { opacity: 1; background: var(--accent); color: #fff; }
@media (hover: none) { .fb-lock { opacity: 0.85; } }

.fb-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3) var(--space-6); min-width: 0; }
.fb-who { display: grid; justify-items: center; gap: var(--space-1); min-width: 0; text-align: center; }
.fb-name { font-size: clamp(var(--text-lg), 2.4vh, var(--text-2xl)); font-weight: 700; letter-spacing: var(--tracking-tight); line-height: 1.15; }
.fb-credits { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px var(--space-3); color: var(--ink-2); font-size: var(--text-sm); }
.fb-credits b { color: var(--ink-3); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.fb-hint { display: none; color: var(--ink-3); font-size: var(--text-xs); }
@media (hover: none), (max-width: 520px), (max-height: 560px) { .fb-hint { display: block; } }
.fb-shuffle { min-height: 48px; padding-inline: var(--space-8); font-size: var(--text-md); }

/* short screens: the name and the button side by side, smaller */
@media (max-height: 560px) {
  .fb { gap: var(--space-2); }
  .fb-credits { display: none; }
  .fb-shuffle { min-height: 40px; }
}
/* narrow or short screens: no arrows (the strips are too thin for them), the card as big as it gets; tap or swipe a strip */
@media (max-width: 520px), (max-height: 560px) {
  .fb-book > * { --cw: min(100cqw, (100cqh - 14px) * 0.75); }
  .fb-side { display: none; }
}