/**
 * The binder as an object.
 *
 * Extracted from design/binder-experience/reference/binder-reference.css, which
 * is the approved study. Two things changed on the way in, and both matter:
 *
 * Everything is scoped to .binder-view rather than to a `#binder-motion` id.
 * The shelf draws one of these per binder, so a unique id would have collapsed
 * the moment there were two.
 *
 * Geometry is derived rather than fixed. The study hard-codes a 320px board and
 * widens to 410 for 3x4; a real binder can be anything from 1x1 to 6x6, so the
 * width comes from the page's own aspect ratio and the space available.
 *
 * The materials themselves — weave, padded edge, tonal stitch, narrow spine,
 * deboss, pocket sheen — are kept as approved.
 */

.binder-view {
  --hide: #078eae;          /* the cover colour, set per instance */
  --grain: 0.21;            /* weave */
  --press: 0.6;             /* how deep the symbol sits */
  --lx: 38%;                /* light, follows the tilt */
  --ly: 25%;
  --sheen: 0.05;
  --rows: 3;
  --cols: 3;
  --board: 320px;           /* one leaf, derived by the controller */

  position: relative;
  color-scheme: light dark;
}

.binder-view * { box-sizing: border-box; }

.binder-view__stage {
  position: relative;
  perspective: 1600px;
  isolation: isolate;
  touch-action: pan-y;
  /* A page dragged by hand would otherwise select everything it crosses. */
  user-select: none;
  -webkit-user-select: none;
}

.binder-view__shadow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--board) - 13px);
  height: var(--leaf, 420px);
  /* The study could write -200px here because its board was always 320. The
     shadow is half the rig's own height above centre, plus the 10px that makes
     it read as cast rather than painted on — so it is derived, like the rig. */
  margin: calc(var(--leaf, 420px) / -2 + 10px) 0 0 calc(var(--board) / -2 + 9px);
  background: #071511;
  border-radius: 21px;
  filter: blur(15px);
  opacity: 0.15;
  pointer-events: none;
  will-change: transform;
}

.binder-view__rig {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--board);
  /* Not a ratio of the width: how tall a leaf has to be depends on how many
     pockets are stacked in it, which is worked out in measure(). */
  height: var(--leaf, 420px);
  margin: calc(var(--leaf, 420px) / -2) 0 0 calc(var(--board) / -2);
  transform-style: preserve-3d;
  will-change: transform;
}

/* ---------- the body of the binder ---------- */

.binder-view__rear {
  position: absolute;
  inset: 0;
  border-radius: 10px 24px 24px 10px;
  background: var(--hide);
  transform: translateZ(-13px);
  box-shadow: inset 0 1px 1px #fff6, inset -1px -2px 2px #0005;
}

.binder-view__rim {
  position: absolute;
  inset: 3px 3px 3px 0;
  border-radius: 8px 22px 22px 8px;
  background: #25272c;
  transform: translateZ(-9px);
  border: 3px solid color-mix(in srgb, var(--hide), #16151a 57%);
  box-shadow:
    0 1px 1px #0008,
    0 3px 0 color-mix(in srgb, var(--hide), #000 20%),
    inset 0 0 0 2px #5e60613d;
  overflow: hidden;
}

.binder-view__lining {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 50% 0, #ffffff09, transparent 70%),
    repeating-linear-gradient(45deg, #ffffff03 0 .5px, #0002 .6px 1px, transparent 1.1px 3px),
    #25262b;
}

/* The zip runs the outside only. The centre fold has none — that was explicit
   in the approval, and it is why each half opens its border on the hinge side. */
.binder-view__zip {
  position: absolute;
  inset: 5px;
  border: 3px dotted #73767875;
  border-radius: 6px 18px 18px 6px;
  box-shadow: 0 0 0 1px #0008, inset 0 0 0 1px #0009;
  pointer-events: none;
}

.binder-view__rim .binder-view__zip {
  left: -3px;
  border-left: 0;
  border-radius: 0 18px 18px 0;
  box-shadow: none;
}

.binder-view__inner .binder-view__zip {
  right: -3px;
  border-right: 0;
  border-radius: 18px 0 0 18px;
  box-shadow: none;
}

/* The two short runs that close the loop over the top and bottom of the fold,
   revealed only once the binder is all the way open. */
.binder-view__zip-link {
  position: absolute;
  left: -10px;
  width: 20px;
  height: 3px;
  background: repeating-linear-gradient(90deg, #737678aa 0 2px, transparent 2px 5px);
  transform: translateZ(1px);
  pointer-events: none;
  opacity: 0;
}

.binder-view__zip-link--top { top: 12px; }
.binder-view__zip-link--bottom { bottom: 12px; }

/* ---------- the cover ---------- */

.binder-view__hinge {
  position: absolute;
  inset: 0;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  will-change: transform;
}

/* ---------- where a click lands ----------
   The rig and the hinge are containers, not surfaces: boxes at z = 0 with
   nothing drawn in them. Every surface that matters sits behind them — the rim
   at -9px, the inside of the cover at -10px. A pointer entering the 3D context
   therefore meets an empty box before the page it is aimed at, and the card
   underneath never sees the click. (The study never noticed: nothing in it was
   clickable but the cover.) Making the two containers transparent to the
   pointer, and the surfaces inside them opaque to it again, puts every click
   back where it is painted. */
.binder-view__rig,
.binder-view__hinge { pointer-events: none; }

.binder-view__rim,
.binder-view__cover { pointer-events: auto; }

.binder-view__cover {
  position: absolute;
  inset: 0;
  border-radius: 9px 23px 23px 9px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.binder-view__outer {
  display: block;
  appearance: none;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  text-align: left;
  cursor: pointer;
  transform: translateZ(13px);
  background: var(--hide);
  box-shadow:
    inset 0 1px 1px #ffffff50,
    inset -1px -2px 2px #0005,
    0 0 0 1px color-mix(in srgb, var(--hide), #000 16%);
  overflow: hidden;
  color: inherit;
}

.binder-view--static .binder-view__outer { cursor: default; }

.binder-view__outer:focus-visible {
  outline: 3px solid light-dark(#1a5359, #c6e0d4);
  outline-offset: 7px;
}

.binder-view__grain {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--grain);
  mix-blend-mode: soft-light;
  background:
    repeating-linear-gradient(38deg, #fff9 0 .4px, #0008 .65px 1px, transparent 1.2px 2.5px),
    repeating-linear-gradient(-43deg, #fff8 0 .4px, #0009 .65px 1px, transparent 1.2px 2.5px);
}

.binder-view__light {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse at var(--lx) var(--ly), rgb(255 255 255 / var(--sheen)), transparent 72%),
    linear-gradient(115deg, #ffffff07, transparent 50%, #0000000c);
}

.binder-view__crease {
  position: absolute;
  inset: 0 auto 0 0;
  width: 16px;
  background: linear-gradient(90deg, #0002, #ffffff12 28%, transparent 56%, #00000024 83%, #ffffff17 92%, transparent);
  border-radius: 9px 0 0 9px;
}

.binder-view__stitches {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  pointer-events: none;
}

.binder-view__holes {
  stroke: color-mix(in srgb, var(--hide), #000 55%);
  stroke-width: 1.5;
  stroke-dasharray: 1 4;
  stroke-linecap: round;
  opacity: 0.68;
}

.binder-view__thread {
  stroke: color-mix(in srgb, var(--hide), #fff 21%);
  stroke-width: 0.65;
  stroke-dasharray: 2.4 2.6;
  stroke-linecap: round;
  filter: drop-shadow(0 .6px .2px #0007);
}

/* ---------- the set symbol, pressed into the cover ----------
   The study used a Keyrune glyph and text-shadow. Real symbols arrive as SVG
   files, so the deboss is built from two masked layers instead: a dark one
   offset up for the recess and a light one offset down for the lip. Masking
   rather than drawing keeps the cover's own colour showing through, which is
   what makes it read as pressed rather than printed. */

.binder-view__mark {
  position: absolute;
  left: 15.6%;
  bottom: 8.3%;
  width: 15.6%;
  aspect-ratio: 1;
  opacity: var(--press);
  pointer-events: none;
}

.binder-view__mark::before,
.binder-view__mark::after {
  content: '';
  position: absolute;
  inset: 0;
  -webkit-mask: var(--symbol) center / contain no-repeat;
  mask: var(--symbol) center / contain no-repeat;
}

.binder-view__mark::before {
  background: color-mix(in srgb, var(--hide), #000 52%);
}

.binder-view__mark::after {
  background: color-mix(in srgb, var(--hide), #fff 30%);
  transform: translateY(1px);
  opacity: 0.4;
  z-index: -1;
}

/* No symbol: the cover simply has none, which is the honest state for a binder
   built card by card. */
.binder-view__mark:not([style*="--symbol"]) { display: none; }

.binder-view__inner {
  transform: rotateY(180deg) translateZ(-10px);
  background: var(--hide);
  border: 3px solid var(--hide);
  box-shadow: inset 0 0 0 1px #ffffff28, 0 0 0 1px color-mix(in srgb, var(--hide), #000 25%);
  overflow: hidden;
  border-radius: 23px 9px 9px 23px;
}

/* ---------- spine and edges ---------- */

.binder-view__binding {
  position: absolute;
  left: -7px;
  top: 6px;
  width: 14px;
  height: calc(100% - 12px);
  transform: translateZ(-1px);
  border-radius: 6px;
  background: linear-gradient(90deg, #0005, #ffffff1c 30%, #0003 65%, #0006), var(--hide);
  box-shadow: inset 0 1px 1px #fff3;
}

.binder-view__side {
  position: absolute;
  left: calc(var(--board) - 14px);
  top: 5.5%;
  width: 26px;
  height: 89%;
  transform: rotateY(90deg);
  border-radius: 4px;
  background: linear-gradient(90deg, #0005, transparent 24%, #0006 49%, #fff1 60%, #0004), var(--hide);
  overflow: hidden;
}

.binder-view__teeth {
  position: absolute;
  left: 9px;
  top: 0;
  width: 8px;
  height: 100%;
  border-inline: 1px solid #0004;
  background: repeating-linear-gradient(0deg, #ffffff50 0 .7px, #0005 1px 1.6px, transparent 1.8px 3px);
}

.binder-view__teeth::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #0006;
}

.binder-view__zip-top {
  position: absolute;
  left: 14px;
  top: -12px;
  width: calc(var(--board) - 40px);
  height: 26px;
  transform: rotateX(90deg);
  border-radius: 7px;
  background: linear-gradient(#0004, transparent 25%, #0006 49%, #ffffff18 65%, #0004), var(--hide);
}

.binder-view__zip-top::after {
  content: '';
  position: absolute;
  inset: 9px 0;
  border-block: 1px solid #0004;
  background: repeating-linear-gradient(90deg, #ffffff45 0 .7px, #0005 1px 1.5px, transparent 1.8px 3px);
}

.binder-view__pull {
  position: absolute;
  right: 10px;
  bottom: 16px;
  width: 10px;
  height: 31px;
  border-radius: 4px;
  background: linear-gradient(90deg, #81868a, #3b4043 40%, #272b30);
  border: 1px solid #8889;
  transform: translateZ(-2px) rotate(-17deg);
  box-shadow: 1px 2px 2px #0006;
}

.binder-view__pull::after {
  content: '';
  position: absolute;
  inset: 6px 2px 10px;
  border-radius: 2px;
  background: #171b20;
}

/* ---------- pages ---------- */

.binder-view__sheet {
  position: absolute;
  inset: 25px 20px 24px 22px;
  border-radius: 5px;
  background:
    repeating-linear-gradient(45deg, #ffffff08 0 .6px, #0007 .7px 1px, transparent 1px 2.8px),
    #24252b;
  box-shadow: 0 2px 0 #101216, 0 3px 0 #575960, 0 5px 0 #191b20, 0 6px 0 #41434a, 0 8px 8px #0005;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
  gap: 6px;
  padding: 9px 7px;
  transform-origin: left center;
  transform: translateZ(0);
  overflow: hidden;
}

.binder-view__sheet--left {
  inset: 24px 22px 23px 19px;
  transform-origin: right center;
}

.binder-view__sheet::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, #0006, transparent 7%, transparent 95%, #ffffff0b);
}

.binder-view__sheet--left::after {
  background: linear-gradient(90deg, #ffffff08, transparent 5%, transparent 91%, #0006);
}

/* The interior only exists once the cover has begun to lift. */
.binder-view__interior { visibility: hidden; }
.binder-view[data-exposed="true"] .binder-view__interior { visibility: visible; }

/* ---------- the block of pages you are not looking at ----------
   A binder open at page one is two pages and the hundred behind them. The
   edges of those are what give the open object a middle; without them it is
   two rectangles facing each other. Each slab sits a little further back,
   a little further out and a little lower than the one in front, which is what
   a stack of sheets does. */

.binder-view__fan {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: left center;
  pointer-events: none;
}

.binder-view__fan--left { transform-origin: right center; }

.binder-view__edge {
  position: absolute;
  top: 30px;
  bottom: 29px;
  /* Page-sized slabs do not work here: each one's body covers the one behind
     it and the block collapses into a single dark rectangle. Only the outer
     few millimetres are ever seen anyway, so only that is drawn — one strip
     per sheet, side by side, each a little further back. */
  right: calc(19px - var(--i) * 2.6px);
  width: 2.6px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(90deg, #0f1014 0 38%, #43464f 74%, #2a2c33 100%);
  transform-origin: left center;
  transform: translate3d(0, calc(var(--i) * 0.6px), calc(var(--i) * -1.1px));
}

.binder-view__fan--left .binder-view__edge {
  right: auto;
  left: calc(18px - var(--i) * 2.6px);
  border-radius: 2px 0 0 2px;
  background: linear-gradient(270deg, #0f1014 0 38%, #43464f 74%, #2a2c33 100%);
  transform-origin: right center;
}

/* The outermost sheets of a thick block sit a touch lower, the way a stack
   settles. */
.binder-view__fan { --settle: 1; }

/* ---------- the bow ----------
   The rotation that makes the spread an arc is real, in paint(). This is the
   light that goes with it: paper falling away from the gutter catches less of
   it there, and the shading follows how open the binder is so a closed one is
   not lit as though it were flat on a table. */
.binder-view__sheet::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  opacity: var(--bow, 0);
  background: linear-gradient(90deg,
    rgb(0 0 0 / .34) 0%, rgb(0 0 0 / .13) 9%, transparent 26%,
    transparent 88%, rgb(255 255 255 / .035) 100%);
}

.binder-view__sheet--left::before {
  background: linear-gradient(270deg,
    rgb(0 0 0 / .34) 0%, rgb(0 0 0 / .13) 9%, transparent 26%,
    transparent 88%, rgb(255 255 255 / .035) 100%);
}

/* ---------- pockets ----------
   A pocket holds the app's own card element, so selection, ownership and the
   detail modal all keep working. The plastic is drawn around it. */

.binder-view__pocket {
  position: relative;
  min-width: 0;
  min-height: 0;
  border: 1px solid #c5cbd12d;
  border-top-color: #edf3f849;
  border-radius: 2px;
  box-shadow: inset 1px 0 1px #ffffff12, inset -1px -1px 1px #000b, 1px 0 0 #0009;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 2px 3px;
  background: #11151a38;
}

.binder-view__pocket::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 12%, rgb(255 255 255 / .015) 35%, rgb(255 255 255 / .1) 38%, rgb(255 255 255 / .025) 44%, transparent 67%);
  background-size: 210% 100%;
  background-position: var(--lx) 0;
  box-shadow: inset 0 1px 0 #e3eef03d, inset 1px 0 0 #e3eef012;
}

.binder-view__pocket::after {
  content: '';
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 1px;
  border-bottom: 1px dashed #c9d3da45;
  pointer-events: none;
}

/* An empty pocket is a position with no card in it — not a card you do not own.
   That distinction was explicit in the approval. */
.binder-view__pocket--empty { background: #12151a60; }

/* The card the app rendered, sized to the pocket without distorting it. */
.binder-view__pocket > *:not(.binder-view__pocket-plastic) {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: 100%;
  aspect-ratio: 63 / 88;
  margin: 0;
}

/* Until its picture arrives a card is a dark card, not a pale box: on a
   first visit the riffle runs ahead of the downloads, and pale boxes
   flashing through a dark binder read as something broken. */
.binder-view__pocket .card-slot {
  border-color: #ffffff14;
  background: linear-gradient(160deg, #262b33, #1a1e24);
}

.binder-view__pocket .card-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 3px;
}

/* ---------- the leaf that turns ----------
   A row of upright strips, each one a window onto both pages of the leaf,
   posed by the controller so together they bend like paper. */

.binder-view__leaf {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}

.binder-view__leaf[hidden] { display: none; }

.binder-view__strip {
  position: absolute;
  top: 0;
  bottom: 0;
  /* A hair wider than its share, so no seam opens where two strips meet at
     an angle. The windows are offset by the exact share, so nothing shifts. */
  width: calc(var(--strip-w) + 2px);
  transform-origin: left center;
  transform-style: preserve-3d;
}

.binder-view__leaf-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0.15px);
}

.binder-view__leaf-face--back { transform: rotateY(180deg) translateZ(0.15px); }

.binder-view__leaf-canvas {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--leaf-w);
}

.binder-view__leaf-face .binder-view__sheet {
  transform: none !important;
  box-shadow: 0 1px 0 #93999a55;
  inset: 31px 23px 30px 25px;
}

.binder-view__leaf-face--back .binder-view__sheet { inset: 27px 25px 26px 22px; }

/* The light on the strip: darker the further it turns from the window, read
   at both of its edges so the shading runs on across the strips rather than
   stepping from one to the next. */
.binder-view__leaf-face .binder-view__sheet::after {
  background:
    linear-gradient(90deg, rgb(0 0 0 / var(--s0, 0)), rgb(0 0 0 / var(--s1, 0)))
    var(--gx, 0) 0 / calc(var(--strip-w) + 2px) 100% no-repeat;
}

/* The page being uncovered sits in the leaf's shadow while it is lifted. */
.binder-view[data-turning="forward"] .binder-view__sheet--right.binder-view__interior,
.binder-view[data-turning="back"] .binder-view__sheet--left.binder-view__interior {
  filter: brightness(calc(1 - var(--cast, 0)));
}

/* ---------- past the capacity of the real binder ----------
   Marked, never hidden: the cards are there, counted and reachable. */

.binder-view__sheet--beyond {
  background:
    repeating-linear-gradient(-45deg, #131318 0 10px, #17171d 10px 20px);
  box-shadow: 0 0 0 1px var(--gold-deep, #8f6314), 0 8px 8px #0005;
}

.binder-view__sheet--beyond::before {
  content: attr(data-beyond);
  position: absolute;
  top: 4px;
  right: 8px;
  z-index: 3;
  font: 700 8px/1 var(--font-sans, system-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold, #c98a1e);
  pointer-events: none;
}

/* ---------- the inside of a cover ---------- */

/* The whole board, not the first pocket: the sheet is a grid of pockets and
   the plate used to sit in its top-left one. */
.binder-view__plate {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: grid;
  grid-template-columns: repeat(var(--per-row, 1), var(--mark));
  place-content: center;
  gap: 22px;
  width: 100%;
  height: 100%;
  --mark: clamp(48px, 30%, 120px);
}

/* Several sets share the board: the marks get smaller as there are more of
   them and settle into even rows — four is two by two, not three and one. */
.binder-view__plate[data-marks="2"] { --per-row: 2; --mark: clamp(36px, 22%, 88px); }
.binder-view__plate[data-marks="3"] { --per-row: 3; --mark: clamp(28px, 18%, 68px); }
.binder-view__plate[data-marks="4"] { --per-row: 2; --mark: clamp(32px, 20%, 76px); }
.binder-view__plate[data-marks="5"],
.binder-view__plate[data-marks="6"] { --per-row: 3; --mark: clamp(26px, 16%, 60px); }
.binder-view__plate[data-marks="many"] { --per-row: 4; --mark: clamp(20px, 12%, 44px); gap: 16px; }

.binder-view__plate-mark {
  /* The track is already the mark's size; a percentage here would be of it. */
  width: 100%;
  aspect-ratio: 1;
  opacity: 0.26;
  background: #ffffff;
  -webkit-mask: var(--symbol) center / contain no-repeat;
  mask: var(--symbol) center / contain no-repeat;
}

/* ---------- variants ---------- */

/* On the shelf: the object alone, no pages mounted. */
/* The extra room is for the lift and the tilt the cursor gives it. As a share
   of the object rather than a flat 58px, so a small binder on a phone does not
   carry a desktop's worth of empty space under it. */
.binder-view--cover .binder-view__stage { height: calc(var(--leaf, 420px) * 1.12); }

/* In the creation form: the same cover, fed by the draft. */
.binder-view--preview .binder-view__stage { height: calc(var(--leaf, 420px) + 72px); }

/* Open, holding the real pages. */
/* The reader is given the screen rather than a slot in the page: its stage
   fills whatever room the host has, and the board is derived from that instead
   of the other way round. Which also means the reader is the one variant whose
   stage height does not depend on --board, so measuring it can never feed the
   ResizeObserver its own output.

   It takes that room through flex rather than height: 100%. The host sits at
   the end of a chain of flex items with no definite height anywhere in it, so
   a percentage has nothing to resolve against and the stage collapses to zero
   — which puts the rig, centred on a stage of no height, half off the top of
   the screen. Flex needs no definiteness. */
.binder-view--reader {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.binder-view--reader .binder-view__stage { flex: 1 1 auto; min-height: 0; }

@media (prefers-reduced-motion: reduce) {
  .binder-view__stage { transition: none; }
}

/* ---------- the next free pocket ----------
   Empty, it looks like every other empty pocket. Under the pointer the plastic
   catches a little light and a + settles into the middle: that is where the
   next card goes. On a touch screen, where nothing hovers, the + rests there
   faintly all the time. */

.binder-view__pocket > .binder-view__add {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  transition: background-color 280ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.binder-view__add::after {
  content: '';
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background:
    url("icons/plus-glass.svg") center / 16px no-repeat,
    rgb(255 255 255 / 0.12);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22), 0 6px 16px rgb(0 0 0 / 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1), transform 420ms var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1));
}

.binder-view__add:hover,
.binder-view__add:focus-visible {
  outline: none;
  background: rgb(255 255 255 / 0.05);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14), inset 0 0 24px rgb(255 255 255 / 0.05);
}
.binder-view__add:hover::after,
.binder-view__add:focus-visible::after { opacity: 1; transform: none; }
.binder-view__add:active::after { transform: scale(0.92); }

@media (hover: none) {
  .binder-view__add::after { opacity: 0.55; transform: scale(0.85); }
}

/* While a card is being carried, the pocket is a place to drop, not a button. */
.is-card-dragging .binder-view__add { display: none; }

/* An open binder at rest paints at its real size (setMoving in binder-view.js):
   the layers are only held ready to transform while it moves. */
.binder-view--reader:not(.is-moving) .binder-view__rig,
.binder-view--reader:not(.is-moving) .binder-view__hinge,
.binder-view--reader:not(.is-moving) .binder-view__shadow { will-change: auto; }