/**
 * The screens of the Figma redesign, built from system.css.
 *
 * Loaded last, so where a screen here and an older rule in style.css disagree,
 * this file is the design. When a screen has been fully moved here its old
 * rules in style.css can go.
 */

html { overflow-x: clip; }

body {
  background: var(--paper);
  transition: background-color var(--t-slow) var(--ease-out);
}

/* The shelf is the one white room; everything you go into is paper. */
body:has(.app[data-screen="collection"]),
body:has(.app[data-screen="welcome"]) { background: var(--sheet); }

/* ---------- shell: the design's 80px margins on a 1440 canvas ---------- */

.app {
  width: min(1440px, 100%);
  padding: 0 clamp(16px, 5.6vw, 80px) 40px;
}

.topbar { padding: 24px 0 0; min-height: 75px; }
.mark img { width: 39px; height: 52px; display: block; }

.account { display: flex; align-items: center; gap: 8px; }

.account__rule {
  width: 1px;
  height: 24px;
  background: rgba(120, 120, 120, 0.2);
}

.account__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 24px;
  background: transparent;
  transition: background-color var(--t-quick) var(--ease-out);
}

.account__btn:hover,
.account__btn[aria-expanded="true"] { background: rgba(120, 120, 128, 0.12); border: 0; }

/* The lights: a moon in the light, a sun in the dark. They cross on one
   axis — the one leaving turns away and shrinks as the other turns in — so
   the button reads as one thing changing, not two icons swapped. */
.theme-toggle { position: relative; color: var(--ink-title); cursor: pointer; }
.theme-toggle.hidden { display: none; }
.theme-toggle svg {
  position: absolute;
  inset: 0;
  margin: auto;
  transition: opacity 300ms var(--ease-out), transform 460ms var(--ease-spring);
}
.theme-toggle__sun { opacity: 0; transform: rotate(-90deg) scale(0.5); }
.theme-toggle[aria-pressed="true"] .theme-toggle__moon { opacity: 0; transform: rotate(90deg) scale(0.5); }
.theme-toggle[aria-pressed="true"] .theme-toggle__sun { opacity: 1; transform: none; }
.theme-toggle:focus-visible { outline: 2px solid var(--act-trail); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .theme-toggle svg { transition: opacity 120ms linear; } }

.account__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120;
  display: block;
  width: 240px;
  min-width: 0;
  padding: 14px 0 12px;
  border: 2px solid var(--glass-edge);
  border-radius: var(--r-glass);
  background: var(--glass-fill);
  box-shadow: none;
  color: var(--glass-ink);
  transform-origin: top right;
  animation: pop-in var(--t-base) var(--ease-spring) both;
}

.account__menu .account__email { color: var(--glass-quiet); }
.account__menu .glass-menu__item:disabled { opacity: 0.5; cursor: progress; }

/* Deleting asks in place, inside the glass, in the glass's own voice. */
.account__menu .account__confirm {
  display: grid;
  gap: 8px;
  width: auto;
  margin: 6px 12px 0;
  padding: 12px;
  border: 1px solid var(--glass-edge);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}
.account__menu .account__confirm.hidden { display: none; }
.account__menu .account__confirm-text { color: var(--glass-ink); font-size: 13px; line-height: 1.45; margin: 0; }
.account__menu .account__confirm-label { color: var(--glass-quiet); font-size: 12px; }
.account__menu .account__error { color: var(--act-off); }

.account__confirm-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--glass-edge);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--glass-ink);
  font: inherit;
  font-size: 14px;
}
.account__confirm-input:focus { outline: none; border-color: rgba(255, 255, 255, 0.5); }

/* Stacked, the way out last: side by side, "Delete everything" broke in two. */
.account__menu .account__confirm-actions { display: flex; flex-direction: column-reverse; gap: 6px; }
.account__confirm-btn {
  width: 100%;
  padding: 9px 14px;
  white-space: nowrap;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.1);
  color: var(--glass-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.account__confirm-btn:hover { background: rgba(255, 255, 255, 0.16); }
.account__confirm-btn--go { background: var(--act); }
.account__confirm-btn--go:hover:not(:disabled) { background: var(--act-solid); }
.account__confirm-btn:disabled { opacity: 0.4; cursor: default; }

.account__menu .account__legal { margin: 0 16px; padding-top: 2px; font-size: 12px; color: var(--glass-quiet); }
.account__menu .account__legal a { color: var(--glass-quiet); text-decoration: none; }
.account__menu .account__legal a:hover { color: var(--glass-ink); text-decoration: underline; }
/* Closing the account is there, and quiet: a line among the legal ones, not
   an item beside Sign out. It still asks before it does anything. */
.account__menu .account__legal-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--glass-quiet);
  font: inherit;
  cursor: pointer;
}
.account__menu .account__legal-link:hover,
.account__menu .account__legal-link:focus-visible { color: var(--glass-ink); text-decoration: underline; outline: none; }

/* ============================================================
   Home: all collections
   ============================================================ */

.rail-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 56px;
  text-align: center;
}

.rail-head__name {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--ink-title);
}

.rail-head__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-title);
  opacity: 0.8;
}

.rail-head__dot {
  width: 3px;
  height: 3px;
  margin: 0 6px;
  border-radius: 50%;
  background: rgba(44, 43, 48, 0.4);
}

.rail-head__mode {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.rail-head__mode:hover { opacity: 0.7; }

/* ---------- the carousel ---------- */

.rail-screen[data-mode="carousel"] .rail {
  display: block;
  position: relative;
  height: calc(var(--cw, 346px) * 1.36 + 92px);
  margin-top: 0;
  padding: 0;
  perspective: none;
  touch-action: pan-y;
  user-select: none;
}

.rail-screen[data-mode="carousel"] .rail-item {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--cw, 346px);
  margin-left: calc(var(--cw, 346px) / -2);
  /* The middle of the cover, not of the cover and its caption together. */
  transform-origin: 50% 36%;
  transition:
    transform 680ms var(--ease-spring),
    opacity 420ms var(--ease-out);
  will-change: transform;
}

.rail-screen[data-mode="carousel"] .rail-item__open { -webkit-user-drag: none; }

.rail-screen[data-mode="carousel"] .rail-item__meta,
.rail-screen[data-mode="carousel"] .rail-item.is-current .rail-item__meta {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-slow) var(--ease-spring);
}

.rail-screen[data-mode="carousel"] .rail-item.is-front .rail-item__meta {
  opacity: 1;
  transform: none;
  transition-delay: 120ms;
}

/* The caption, as the design sets it. */
.rail-item__meta { margin-top: 10px; }

.rail-item__set {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.28;
  letter-spacing: 0;
  color: var(--ink-quiet);
}

.rail-item__name {
  margin: 4px auto 0;
  max-width: 224px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.28;
  color: var(--ink-max);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail-item__count {
  margin-top: 8px;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.32;
  color: var(--ink-quiet);
}

.rail-item__count b { color: var(--ink-max); font-weight: 600; }
.rail-item__count span { color: var(--ink-quiet); }
.rail-item__count i { font-style: normal; color: var(--ink-eyebrow); padding: 0 1px; }

/* ---------- add: the ember button and its glass menu ---------- */

.add { right: 40px; bottom: 40px; z-index: 150; }

/* The nav used to live in every screen's head; the shelf's head no longer has
   a slot for it, and a class that sets display beats [hidden]. */
.tabs[hidden] { display: none; }

@media (max-width: 600px) {
  .rail-head { padding-top: 40px; }
  .rail-head__name { font-size: 32px; }
  .add { right: 20px; bottom: 24px; }
}

/* ============================================================
   New binder: three steps, one cover
   ============================================================ */

.create {
  display: grid;
  grid-template-columns: minmax(0, 446px) minmax(0, 446px);
  column-gap: clamp(40px, 20vw, 287px);
  justify-content: center;
  align-content: start;
  padding: 72px 0 48px;
  min-height: calc(100vh - 75px);
}

/* Step one: the cover on the right, waiting for a colour. */
.create[data-step="color"] {
  grid-template-areas:
    "intro cover"
    "intro swatches"
    "intro cta";
}

/* Steps two and three: the cover crosses to the left, under the words, and
   the form takes the right. */
.create[data-step="details"],
.create[data-step="sections"] {
  grid-template-areas:
    "intro side"
    "cover side"
    "cover cta";
  grid-template-rows: auto auto 1fr;
}

.create__intro { grid-area: intro; display: flex; flex-direction: column; gap: 23px; }
.create[data-step="color"] .create__intro { align-self: center; margin-top: -40px; }
.create[data-step="details"] .create__intro,
.create[data-step="sections"] .create__intro { margin-bottom: 32px; }

.create__cover { grid-area: cover; align-self: start; width: 348px; max-width: 100%; }
.create[data-step="color"] .create__cover { justify-self: center; }

#preview-binder { width: 100%; min-height: 0; }

.create__swatches { grid-area: swatches; justify-self: center; margin-top: 22px; }
.create[data-step]:not([data-step="color"]) .create__swatches { display: none; }

.create__side { grid-area: side; display: flex; flex-direction: column; gap: 16px; }
.create[data-step="color"] .create__side { display: none; }

.create__panel { position: relative; overflow: visible; }

/* Only the current step's fields are in the panel. */
.create[data-step="details"] [data-for="sections"],
.create[data-step="sections"] [data-for="details"] { display: none; }

.create[data-first="true"] #create-colour-group { display: none; }

.create__cta {
  grid-area: cta;
  justify-self: center;
  align-self: end;
  margin-top: 40px;
  min-width: 113px;
}

.create[data-step="color"] .create__cta { align-self: start; margin-top: 30px; }

/* The field sits on top of its results, which tuck in under its edge. */
.create__panel .input { position: relative; z-index: 6; }

.create__results {
  left: 0;
  right: 0;
  top: 80px;
  padding: 35px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.create__result { padding: 0; }
.create__result.is-active { background: var(--hover); }
.create__none { margin: 0; font-size: 14px; color: var(--gray); }

.create__chosen { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.create__chosen:empty { display: none; }

.create__row-end { display: flex; align-items: center; gap: 2px; }

/* Remove only shows on the row you are on; the tuning control is always there. */
.create__remove {
  font-size: 18px;
  line-height: 1;
  color: var(--gray);
  opacity: 0;
  transition: opacity var(--t-quick) var(--ease-out);
}

.create__chosen-row:hover .create__remove,
.create__remove:focus-visible { opacity: 1; }
@media (hover: none) { .create__remove { opacity: 1; } }

.create__custom {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-muted);
}

.create__custom[hidden] { display: none; }

.create__fit {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-eyebrow);
}

.create__fit b { font-weight: 500; color: var(--ink-muted); }
.create__fit-over { color: var(--act); white-space: nowrap; }

.create__custom input {
  width: 56px;
  margin-left: 8px;
  padding: 8px 10px;
  border: 1px solid var(--rule-field);
  border-radius: 10px;
  font: inherit;
  color: var(--ink-body);
}

/* Room under the tiles for the check, clear of the panel's edge. */
.create__panel-swatches { gap: 19px; padding-bottom: 34px; }

.create__sections { gap: 0; }
.create__sections > .field-label { margin-bottom: 32px; }
.create__section-list { display: flex; flex-direction: column; gap: 24px; max-height: 439px; overflow-y: auto; }

/* ---------- section rows, wherever they are listed ---------- */

.row-group { display: flex; flex-direction: column; gap: 16px; }

/* A set's name heads its block; with several sets it carries a grip to move
   the whole block and a × to take it out. */
.row-group__head { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.row-group__head .row-group__title { flex: 1 1 auto; min-width: 0; }
.row-group__head--set .row-group__title { font-size: 13px; font-weight: 600; color: var(--ink-body); }
.row-group__count { flex: 0 0 auto; font-size: 12px; color: var(--gray); }
.row-group + .row-group { margin-top: 12px; }
.row-group__grip { flex: 0 0 auto; cursor: grab; touch-action: none; border-radius: 4px; }
.row-group__grip:focus-visible { outline: 2px solid var(--act-trail); outline-offset: 2px; }

.row-group__remove {
  flex: 0 0 auto;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--gray);
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-quick) var(--ease-out), background-color var(--t-quick) var(--ease-out), color var(--t-quick);
}
.row-group__head:hover .row-group__remove,
.row-group__remove:focus-visible,
.row-group__remove.is-armed { opacity: 1; }
@media (hover: none) { .row-group__remove { opacity: 1; } }
.row-group__remove:hover { background: var(--hover); color: var(--ink-body); }
.row-group__remove.is-armed { font-size: 12px; font-weight: 600; color: var(--act); background: var(--act-wash); }

/* The whole block lifts while it is carried, the way a row does. */
.row-group.is-dragging {
  position: relative;
  z-index: 2;
  border-radius: 12px;
  background: var(--sheet);
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.3);
}
.row-group__list { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 0; list-style: none; }

.section-row .row__label { transition: opacity var(--t-base) var(--ease-out); }
.section-row.is-hidden .row__label,
.section-row.is-hidden .row__tile { opacity: 0.4; }
.section-row__when { margin-left: 6px; font-size: 12px; color: var(--gray); }

.section-row__eye { opacity: 0; transition: opacity var(--t-quick) var(--ease-out); }
.section-row:hover .section-row__eye,
.section-row.is-hidden .section-row__eye,
.section-row__eye:focus-visible { opacity: 1; }
.section-row__eye:disabled { cursor: not-allowed; }
@media (hover: none) { .section-row__eye { opacity: 1; } }

.section-row:hover { background: var(--hover); }

.row__grip:focus-visible { outline: 2px solid var(--act-trail); outline-offset: 2px; border-radius: 4px; }

@media (max-width: 900px) {
  .create,
  .create[data-step] {
    grid-template-columns: minmax(0, 446px);
    grid-template-areas: "intro" "cover" "swatches" "side" "cta";
    grid-template-rows: none;
    row-gap: 24px;
    padding-top: 64px;
  }

  .create[data-step] .create__intro { align-self: start; margin: 0; }
  .create[data-step] .create__cover { width: min(240px, 60vw); justify-self: center; }
  .create[data-step] .create__swatches { margin-top: 12px; }
  .create[data-step] .create__cta { align-self: start; margin-top: 0; }
  .headline { font-size: 30px; }
  .swatch-row { gap: 12px; }
  .swatch-tile { width: 52px; height: 52px; }
}

/* ============================================================
   Inside a binder: two round controls a side, and a glass menu
   ============================================================ */

.reader-back,
.reader-tools {
  position: fixed;
  z-index: 30;
  left: max(16px, calc((100vw - 1440px) / 2 + clamp(16px, 5.6vw, 80px)));
  display: none;
}

.screen[data-name="binder"].is-active .reader-back { display: grid; }
.screen[data-name="binder"].is-active .reader-tools { display: flex; }

.reader-back { top: 120px; }

.reader-tools {
  bottom: 63px;
  flex-direction: column;
  gap: 20px;
}

.reader-add { transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-spring); }
.reader-tools.is-open .reader-add { opacity: 0; transform: scale(0.8); pointer-events: none; }

.reader-menu {
  --pop-origin: bottom left;
  position: absolute;
  left: 0;
  bottom: 64px;
  z-index: 2;
}

.reader-menu { overflow: hidden; }
.reader-menu__pane[hidden] { display: none; }
.reader-menu__pane#reader-menu-layout { padding-top: 2px; }
#reader-menu-layout .glass-menu__rule { margin-top: 16px; }

.glass-menu__item img.is-flipped { transform: scaleX(-1); }
.glass-menu__item[hidden] { display: none; }

/* The binder needs the margin the controls stand in. */
.screen[data-name="binder"] .binder-screen { padding-left: 76px; }

/* ---------- the sections drawer ---------- */

.drawer .headline { gap: 4px; }
.drawer__list { display: flex; flex-direction: column; gap: 24px; }
.drawer .row-group__list { gap: 8px; }
.drawer .section-row { padding: 8px; margin: 0 -8px; }

.drawer__search { display: flex; flex-direction: column; gap: 12px; }
.drawer__search[hidden] { display: none; }
.drawer__results { display: flex; flex-direction: column; gap: 4px; }
.drawer__results .row { padding: 6px 8px; margin: 0 -8px; }
.drawer__results .row:disabled { opacity: 0.45; cursor: default; }

/* Add a set: a row like the ones under it, its tile drawn dashed — an empty
   pocket waiting for something. Its hover is a pill with room around the tile
   and the two lines. It must not shrink: the drawer is a column that
   overflows, and a shrinking row gave its padding back down to 32px. */
button.row.drawer__add {
  flex-shrink: 0;
  justify-content: flex-start;
  width: calc(100% + 24px);
  margin: 0 -12px;
  padding: 12px;
  border-radius: 12px;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.drawer__add[hidden] { display: none; }
button.row.drawer__add:hover,
button.row.drawer__add:focus-visible { background: var(--hover); }
.drawer__add-tile {
  background: none;
  border: 1px dashed var(--rule-dashed);
  transition: transform var(--t-base) var(--ease-spring), border-color var(--t-quick);
}
.drawer__add-tile img { width: 16px; height: 16px; }
.drawer__add:hover .drawer__add-tile { border-color: var(--act-trail); transform: rotate(90deg); }
.drawer__add-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.drawer__add-hint { font-size: 12px; line-height: 1.3; color: var(--gray); }

@media (max-width: 760px) {
  .screen[data-name="binder"] .binder-screen { padding-left: 0; }
  .reader-back { top: 84px; }
  .reader-tools { bottom: 20px; flex-direction: row-reverse; }
  .reader-menu { bottom: 68px; }
  .drawer .headline { font-size: 30px; }
}

/* ---------- arriving ----------
   The mark breathes while the shelf is fetched; the shelf then gathers out of
   the middle, so the first thing that moves is the thing you came for. */

.boot { display: grid; place-items: center; min-height: 60vh; }

.boot__mark {
  width: 39px;
  height: 52px;
  animation: boot-breathe 1.4s var(--ease-in-out) infinite alternate;
}

@keyframes boot-breathe {
  from { opacity: 0.35; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) { .boot__mark { animation: none; } }

/* Loading is only the mark: the bar above appears with the screen it serves. */
.app[data-screen="loading"] .topbar,
.app:has(.binder-screen.is-loading) .topbar { visibility: hidden; }

@media (max-width: 600px) {
  .seg-group__btn { min-width: 0; padding: 8px 4px; font-size: 13px; }
  .seg-group__btn--wide { flex: 1.5 1 0; }
  .panel { padding: 20px 16px 24px; }
  .create__results { padding: 32px 12px 16px; }
}

/* ---------- renaming from the menu ---------- */

.glass-menu__name {
  display: block;
  width: calc(100% - 32px);
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: text;
  transition: background-color var(--t-quick) var(--ease-out);
}

.glass-menu__name:hover,
.glass-menu__name:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08);
}

.glass-menu__rename {
  display: block;
  width: calc(100% - 32px);
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  outline: none;
  animation: fade-in var(--t-quick) var(--ease-out) both;
}

.glass-menu__rename[hidden],
.glass-menu__name[hidden] { display: none; }

/* ---------- a way back, from every step that has somewhere to go back to ---------- */

/* Quiet, and out of the flow: it sits above the words without pushing them
   down, so the eyebrow lines up with the progress bar across the page. */
.create__intro { position: relative; }
.create__back { position: absolute; left: -6px; bottom: calc(100% + 18px); }

/* The very first step of the very first binder has nothing behind it. */
.create[data-first="true"][data-step="color"] .create__back { visibility: hidden; }

/* ---------- the hover preview, in the new skin ---------- */

.section-preview {
  z-index: 200;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--edge-soft);
  border-radius: 14px;
  background: var(--sheet);
  box-shadow: var(--shadow-panel), 0 24px 48px -20px rgba(0, 0, 0, 0.25);
  transform: translateY(6px) scale(0.96);
  transform-origin: top left;
  transition: opacity var(--t-quick) var(--ease-out), transform var(--t-base) var(--ease-spring);
}

.section-preview.is-visible { transform: none; }

.section-preview img {
  width: 92px;
  border-radius: 5px;
  background: var(--tile);
}

.section-preview img:nth-child(1) { transform: rotate(-2deg); }
.section-preview img:nth-child(3) { transform: rotate(2deg); }
.section-preview p { color: var(--gray); font-size: 13px; }
.create[data-step="color"] { padding-top: 72px; }

/* ---------- loading: the mark, and a word under it ---------- */

.boot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.boot__label {
  margin: 0;
  font-family: var(--font-eyebrow);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink-eyebrow);
}

.binder-boot { display: none; }
.binder-screen.is-loading .binder-boot { display: flex; position: fixed; inset: 0; z-index: 40; }

/* Nothing of the binder's furniture shows until there is a binder. */
.binder-screen.is-loading .reader-back,
.binder-screen.is-loading .reader-tools,
.binder-screen.is-loading .gridbar,
.binder-screen.is-loading .binder-grid,
.binder-screen.is-loading .spread { opacity: 0; pointer-events: none; }

/* While the shelf is held it follows the pointer exactly; the spring is for letting go. */
.rail-screen[data-mode="carousel"] .rail.is-dragging { cursor: grabbing; }
.rail-screen[data-mode="carousel"] .rail.is-dragging .rail-item { transition: none; }
.rail-screen[data-mode="carousel"] .rail-item img { -webkit-user-drag: none; }

/* ---------- closing a binder: only the binder moves ---------- */

.binder-screen .reader-back,
.binder-screen .reader-tools,
.binder-screen .pager { transition: opacity var(--t-quick) var(--ease-out); }

.binder-screen.is-closing .reader-back,
.binder-screen.is-closing .reader-tools,
.binder-screen.is-closing .pager,
.binder-screen.is-closing .gridbar { opacity: 0; pointer-events: none; }

/* The shelf is already there when the cover lands; it does not fade in again. */
.app.is-returning .screen.is-active { animation: none; }

/* ============================================================
   Sign in, in the creation screens' voice: an eyebrow, a headline
   with its quieter second line, one field, one orange pill. Two
   steps — email, then the code — swap in place in one column, under
   a warm glow rising from the bottom edge.
   ============================================================ */

.gate {
  grid-template-columns: minmax(0, 1fr);
  background: var(--sheet);
  place-items: center;
  overflow: hidden;
}

.gate__glow {
  position: fixed;
  left: -20vw;
  right: -20vw;
  bottom: -62vh;
  height: 100vh;
  min-width: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(252, 73, 45, 0.38), rgba(248, 122, 91, 0.18) 50%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  animation: gate-breathe 9s var(--ease-in-out) infinite alternate;
}

@keyframes gate-breathe {
  from { transform: translateY(0) scale(1); opacity: 0.85; }
  to { transform: translateY(-3vh) scale(1.04); opacity: 1; }
}

.gate__panel {
  position: relative;
  width: min(414px, 100%);
  justify-self: center;
  margin-top: -6vh;
  text-align: left;
}

.gate__sigil { display: block; margin: 0 0 32px; }

.gate__step { display: flex; flex-direction: column; }
.gate__step[hidden] { display: none; }

.gate__headline { margin: 12px 0 40px; }
/* The address, a size down so a usual one stays on one line. */
.gate__sent-to { margin-top: 4px; font-size: 28px; overflow-wrap: anywhere; }

.gate__google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 56px;
  padding: 0 24px;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  background: var(--sheet);
  color: var(--ink-body);
  font: 600 15px var(--font-sans);
  cursor: pointer;
  transition: border-color var(--t-quick) var(--ease-out), background-color var(--t-quick) var(--ease-out), transform var(--t-base) var(--ease-spring);
}
.gate__google:hover { border-color: var(--rule-hover); background: var(--sheet-hover); }
.gate__google:active { transform: scale(0.97); }
.gate__google:focus-visible { outline: 2px solid var(--act-trail); outline-offset: 3px; }

/* The rule is drawn by the pseudo-elements so the words sit in a real gap. */
.gate__or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 28px 0;
  font: 500 13px var(--font-eyebrow);
  color: var(--ink-eyebrow);
}
.gate__or::before,
.gate__or::after { content: ''; flex: 1; height: 1px; background: var(--rule); }

.gate__form { display: flex; flex-direction: column; gap: 12px; }
.gate__input { height: 56px; border-radius: var(--r-pill); }
.gate__input input { font-size: 16px; }   /* 16px: phones do not zoom in */
.gate__input:focus-within { border-color: var(--act-trail); box-shadow: 0 0 0 4px rgba(252, 73, 45, 0.1); }
.gate__cta { width: 100%; height: 56px; padding: 0 24px; }
.gate__cta.is-busy { opacity: 0.6; cursor: progress; }

.gate__back { align-self: flex-start; margin: -6px 0 18px -6px; }

/* Six boxes drawn over one real field. The box the next digit goes to
   carries the orange ring; a filled one settles in with a small lift. */
.gate__digits {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  cursor: text;
}

.gate__digit {
  display: grid;
  place-items: center;
  height: 68px;
  border: 1px solid var(--rule-field);
  border-radius: var(--r-field);
  background: var(--sheet);
  font: 600 28px var(--font-sans);
  color: var(--ink-max);
  transition: border-color var(--t-quick) var(--ease-out), box-shadow var(--t-quick) var(--ease-out),
    background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
.gate__digit.is-next { border-color: var(--act-trail); box-shadow: 0 0 0 4px rgba(252, 73, 45, 0.1); }
.gate__digit.is-filled { animation: digit-in var(--t-base) var(--ease-spring); }

@keyframes digit-in {
  from { transform: translateY(4px) scale(0.92); }
  to { transform: none; }
}

.gate__code {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  border: 0;
  font-size: 16px;
  color: transparent;
  caret-color: transparent;
  cursor: text;
}

.gate__digits.is-checking .gate__digit { animation: digit-wait 0.9s var(--ease-in-out) infinite alternate; }
.gate__digits.is-checking .gate__digit:nth-child(2) { animation-delay: 80ms; }
.gate__digits.is-checking .gate__digit:nth-child(3) { animation-delay: 160ms; }
.gate__digits.is-checking .gate__digit:nth-child(4) { animation-delay: 240ms; }
.gate__digits.is-checking .gate__digit:nth-child(5) { animation-delay: 320ms; }
.gate__digits.is-checking .gate__digit:nth-child(6) { animation-delay: 400ms; }

@keyframes digit-wait { to { opacity: 0.45; } }

.gate__digits.is-wrong { animation: digits-shake 0.42s var(--ease-out); }
.gate__digits.is-wrong .gate__digit { border-color: var(--danger-ink); color: var(--danger-ink); }

@keyframes digits-shake {
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}

/* Right: the boxes fill with the act colour one after another. */
.gate__digits.is-right .gate__digit { background: var(--act); border-color: var(--act); color: #fff; }
.gate__digits.is-right .gate__digit:nth-child(2) { transition-delay: 50ms; }
.gate__digits.is-right .gate__digit:nth-child(3) { transition-delay: 100ms; }
.gate__digits.is-right .gate__digit:nth-child(4) { transition-delay: 150ms; }
.gate__digits.is-right .gate__digit:nth-child(5) { transition-delay: 200ms; }
.gate__digits.is-right .gate__digit:nth-child(6) { transition-delay: 250ms; }

.gate__resend {
  margin: 20px 0 0;
  min-height: 20px;
  font: 500 13px/1.4 var(--font-eyebrow);
  color: var(--ink-eyebrow);
}
.gate__resend [hidden] { display: none; }

.gate__link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--act);
  cursor: pointer;
}
.gate__link:hover { text-decoration: underline; }
.gate__link.is-busy { opacity: 0.6; cursor: progress; }

.gate__message {
  margin: 20px 0 0;
  font: 500 14px/1.4 var(--font-eyebrow);
}
.gate__message[hidden] { display: none; }
.gate__message[data-tone='error'] { color: var(--danger-ink); }
.gate__message[data-tone='notice'] { color: var(--ink-eyebrow); }

.gate__legal {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 28px;
  margin: 0;
  text-align: center;
  font-family: var(--font-eyebrow);
  font-size: 12px;
  color: light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.42));
}
.gate__legal a { color: var(--ink-quiet); text-decoration: none; }
.gate__legal a:hover { color: var(--ink-body); text-decoration: underline; }

/* Arriving: the mark, then the step's lines one after another. A step
   swapped in later arrives the same way. */
.gate:not(.is-gone) .gate__sigil,
.gate__step.is-arriving > * {
  animation: gate-rise var(--t-slow) var(--ease-out) both;
}
.gate__step.is-arriving > :nth-child(2) { animation-delay: 50ms; }
.gate__step.is-arriving > :nth-child(3) { animation-delay: 100ms; }
.gate__step.is-arriving > :nth-child(4) { animation-delay: 150ms; }
.gate__step.is-arriving > :nth-child(5) { animation-delay: 200ms; }
.gate__step.is-arriving > :nth-child(6) { animation-delay: 250ms; }

@keyframes gate-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
  .gate__panel { margin-top: 0; }
  .gate__headline { font-size: 32px; margin-bottom: 32px; }
  .gate__sent-to { font-size: 22px; }
  .gate__digits { gap: 8px; }
  .gate__digit { height: 58px; font-size: 24px; }
  .gate__legal { bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .gate__glow,
  .gate:not(.is-gone) .gate__sigil,
  .gate__step.is-arriving > *,
  .gate__digit.is-filled,
  .gate__digits.is-checking .gate__digit,
  .gate__digits.is-wrong { animation: none; }
}

/* ---------- the selection bar ----------
   A glass toolbar like every other floating control: what is selected, the
   finish the two ownership buttons mean, the two of them, and removal as a
   single mark at the end. It rises in from the foot of the screen. */

.selection-bar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100vw - 32px);
  padding: 8px;
  border-radius: var(--r-pill);
  box-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.45);
  transform: translateX(-50%);
  animation: selection-in var(--t-base) var(--ease-spring) both;
}
.selection-bar.is-leaving { animation: selection-out var(--t-quick) var(--ease-in-out) both; }

@keyframes selection-in {
  from { opacity: 0; transform: translate(-50%, 16px) scale(0.96); }
  to { opacity: 1; transform: translateX(-50%); }
}
@keyframes selection-out {
  to { opacity: 0; transform: translate(-50%, 10px) scale(0.98); }
}

.selection-bar__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: background-color var(--t-quick) var(--ease-out);
}
.selection-bar__icon:hover,
.selection-bar__icon:focus-visible { background: rgb(255 255 255 / 0.1); outline: none; }
.selection-bar__icon--danger:hover,
.selection-bar__icon--danger:focus-visible { background: color-mix(in srgb, var(--act) 70%, transparent); }

.selection-bar__what {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0 8px 0 2px;
  line-height: 1.2;
  white-space: nowrap;
}
.selection-bar__count {
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.selection-bar__hint { font-size: 11px; color: var(--glass-quiet); }
.selection-bar__hint[hidden] { display: none; }

.selection-bar__rule {
  flex: 0 0 auto;
  width: 1px;
  height: 22px;
  margin: 0 6px;
  background: rgb(255 255 255 / 0.18);
}

.selection-bar__seg {
  display: flex;
  padding: 3px;
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 0.08);
}
.selection-bar__seg button {
  padding: 6px 12px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--glass-quiet);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--t-quick) var(--ease-out), color var(--t-quick) var(--ease-out);
}
.selection-bar__seg button:hover { color: var(--glass-ink); }
.selection-bar__seg button[aria-checked="true"] { background: rgb(255 255 255 / 0.16); color: var(--glass-ink); }

.selection-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 0.08);
  color: var(--glass-ink);
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-quick) var(--ease-out);
}
.selection-bar__btn:hover,
.selection-bar__btn:focus-visible { background: rgb(255 255 255 / 0.16); outline: none; }

/* A phone: what and the way out on top, the actions underneath. */
@media (max-width: 600px) {
  .selection-bar {
    flex-wrap: wrap;
    justify-content: center;
    width: calc(100vw - 32px);
    bottom: 16px;
    border-radius: var(--r-panel);
  }
  .selection-bar__what { flex: 1 1 auto; }
  .selection-bar__rule { display: none; }
  .selection-bar__seg { order: 3; }
  .selection-bar__btn { order: 4; padding: 0 12px; }
  .selection-bar__icon--danger { order: 2; }
}

/* ---------- the card, up close ----------
   The binder dissolves into the paper; the card sits in the middle at the
   size of a card held up to look at, and what you can do with it sits to its
   right. Nothing is boxed: the page itself is the panel. */

.card-view:focus { outline: none; }
/* Placed from the top by the card's own size, never centred on content that
   grows: the arts and the counts arrive a moment after the card, and a view
   centred on its contents moved under the pointer when they did. */
.card-view {
  --card-w: min(380px, calc((100vh - 330px) * 0.718), 78vw);
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: start center;
  overflow-y: auto;
  padding: 0 32px 48px;
}
.card-view.hidden { display: none; }

.card-view__veil {
  position: fixed;
  inset: 0;
  background: light-dark(rgb(247 247 247 / 0.84), rgb(17 17 19 / 0.82));
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
  backdrop-filter: blur(28px) saturate(1.2);
}

.card-view__close {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 2;
}

.card-view__body {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 360px);
  align-items: start;
  gap: clamp(32px, 6vw, 88px);
  max-width: 1080px;
  margin-top: max(56px, calc((100vh - (var(--card-w) * 1.393 + 176px)) / 2));
}

.card-view__stage {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  perspective: 1400px;
}

/* The size of a real card at arm's length, never larger than the large
   image Scryfall serves, and never taller than the window. */
.card-view__card {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  width: var(--card-w);
  aspect-ratio: 488 / 680;
  border-radius: 4.8% / 3.45%;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  perspective: 1400px;
  transition: transform 600ms var(--ease-out);
}
.card-view__card.is-tilted { transition: transform 120ms linear; }

.card-view__turn {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 700ms var(--ease-spring);
}
.card-view__turn.is-turned { transform: rotateY(180deg); }

.card-view__face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* A real card's corner: about 3mm on 63 x 88mm. */
  border-radius: 4.8% / 3.45%;
  object-fit: cover;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: #1b1b1e;
  box-shadow: 0 30px 50px -12px rgb(0 0 0 / 0.3), 0 6px 12px rgb(0 0 0 / 0.12);
}
.card-view__face--back { transform: rotateY(180deg); }

.card-view__sheen {
  position: absolute;
  inset: 0;
  border-radius: 4.8% / 3.45%;
  pointer-events: none;
  background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%),
    rgb(255 255 255 / 0.28), rgb(255 255 255 / 0) 55%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
}
.card-view__card.is-tilted .card-view__sheen { opacity: 1; }

/* Looking at the foil count, the card is lit like one: a band of colour that
   moves with the tilt. */
.card-view__card.is-foil .card-view__sheen {
  opacity: 0.85;
  mix-blend-mode: color-dodge;
  background:
    linear-gradient(115deg,
      transparent calc(var(--gx, 40%) - 40%),
      rgb(255 120 160 / 0.22) calc(var(--gx, 40%) - 18%),
      rgb(255 230 120 / 0.24) calc(var(--gx, 40%) - 6%),
      rgb(120 255 200 / 0.22) calc(var(--gx, 40%) + 6%),
      rgb(120 170 255 / 0.24) calc(var(--gx, 40%) + 18%),
      transparent calc(var(--gx, 40%) + 40%));
  transition: opacity 500ms var(--ease-out);
}
.card-view__card:has(.card-view__face--back:not([hidden])) { cursor: pointer; }

.card-view__flip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  background: var(--sheet);
  color: var(--ink-title);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: border-color var(--t-quick) var(--ease-out), background-color var(--t-quick) var(--ease-out);
}
.card-view__flip:hover { border-color: var(--rule-hover); background: var(--sheet-hover); }
.card-view__flip[hidden] { display: none; }
.card-view__flip img { transition: transform 600ms var(--ease-spring); }
.card-view__flip:hover img { transform: rotate(180deg); }

.card-view__info { display: flex; flex-direction: column; min-width: 0; padding-top: 24px; }

.card-view__set {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-quiet);
}
.card-view__symbol {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background: var(--ink-muted);
  -webkit-mask: var(--symbol) center / contain no-repeat;
  mask: var(--symbol) center / contain no-repeat;
}

.card-view__name {
  margin: 8px 0 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink-title);
}

.card-view__meta {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.card-view__block { margin-top: 32px; }
.card-view__block[hidden] { display: none; }

.card-view__label {
  margin: 0 0 12px;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-eyebrow);
}
.card-view__label span { margin-left: 4px; color: var(--gray-2); font-variant-numeric: tabular-nums; }

.card-view__owned {
  display: flex;
  flex-direction: column;
  min-height: 92px;
  padding: 16px;
  border-radius: var(--r-field);
  background: var(--sheet);
  box-shadow: var(--shadow-xs), inset 0 0 0 1px var(--rule);
}

.card-view__total { display: flex; align-items: baseline; gap: 8px; }
.card-view__total strong {
  display: inline-block;
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  color: var(--ink-title);
  font-variant-numeric: tabular-nums;
}
.card-view__total strong[hidden] { display: none; }
.card-view__total span { font-weight: 600; font-size: 15px; color: var(--ink-muted); }
.card-view__split { margin: 4px 0 0; font-size: 13px; color: var(--ink-eyebrow); }
.card-view__split[hidden] { display: none; }

.card-view__count-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.card-view__only { font-weight: 600; font-size: 14px; color: var(--ink-title); }

/* A segment on paper: the choice sits on a white chip. */
.card-view__seg {
  display: inline-flex;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--hover);
}
.card-view__seg button {
  position: relative;
  padding: 6px 12px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink-muted);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--t-quick) var(--ease-out), color var(--t-quick) var(--ease-out), box-shadow var(--t-quick) var(--ease-out);
}
.card-view__seg button:hover { color: var(--ink-title); }
.card-view__seg button[aria-checked="true"] {
  background: var(--sheet);
  color: var(--ink-title);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
}
/* A finish you own some of says so, even while another is chosen. */
.card-view__seg button[data-count]::after {
  content: '';
  position: absolute;
  top: 5px;
  right: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--act-trail);
}

.card-view__stepper {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.card-view__stepper button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink-title);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--t-quick) var(--ease-out);
}
.card-view__stepper button:hover:not(:disabled) { background: var(--hover); }
.card-view__stepper button:disabled { color: var(--gray-4); cursor: default; }
.card-view__stepper output {
  min-width: 22px;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.card-view__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-title);
}
.card-view__line[hidden] { display: none; }
.card-view__line + .card-view__use { margin-top: 14px; }

/* Every other art as a strip of small cards: the one in the middle is ringed,
   the ones you own carry a dot. Scrolls sideways when there are many. */
/* Room for what the tiles do: a 4px ring around the chosen one and a 3px
   lift on hover. With 4px of padding the first ring was cut off. */
.card-view__versions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 56px;
  gap: 10px;
  margin: 0 -10px;
  padding: 10px 10px 14px;
  scroll-padding-inline: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.card-view__version {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform var(--t-base) var(--ease-spring);
}
.card-view__version img {
  display: block;
  width: 56px;
  height: auto;
  aspect-ratio: 488 / 680;
  object-fit: cover;
  border-radius: 4px;
  opacity: 0.72;
  transition: opacity var(--t-quick) var(--ease-out), box-shadow var(--t-quick) var(--ease-out);
}
.card-view__version:hover { transform: translateY(-3px); }
.card-view__version:hover img { opacity: 1; }
.card-view__version[aria-selected="true"] img {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--act-trail);
}
.card-view__version.is-owned::after {
  content: '';
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--act-trail);
  box-shadow: 0 0 0 2px var(--sheet);
}
.card-view__version.is-here::before {
  content: 'In binder';
  position: absolute;
  left: 2px;
  bottom: calc(100% + 3px);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--ink-muted);
}
.card-view__versions:has(.is-here) { padding-top: 22px; }

.card-view__use {
  align-self: flex-start;
  padding: 10px 18px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--act);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background-color var(--t-quick) var(--ease-out), transform var(--t-base) var(--ease-spring);
}
.card-view__use:hover { background: var(--act-solid); }
.card-view__use:active { transform: scale(0.97); }
.card-view__use[hidden] { display: none; }
.card-view__use:disabled { opacity: 0.6; cursor: progress; }

/* The pocket it came out of is empty while it is out. */
.card-slot.is-lifted { visibility: hidden; }

@media (max-width: 760px) {
  .card-view { --card-w: min(320px, 74vw); padding: 0 16px 40px; }
  .card-view__body { grid-template-columns: 1fr; gap: 28px; justify-items: center; margin-top: 72px; }
  .card-view__info { width: 100%; max-width: 420px; padding-top: 0; }
  .card-view__close { top: 16px; right: 16px; }
}

/* ---------- adding a card ----------
   The Sections sheet's own pieces: a search, then rows. A card's row wears its
   art in the tile and says how many printings it has; hovering shows them. */

.add__row { padding: 6px 8px; margin: 0 -8px; }
.add__tile { width: 40px; height: 40px; overflow: hidden; }
.add__tile img { width: 100%; height: 100%; object-fit: cover; }
.add__tile.is-lifted { visibility: hidden; }

.add__text { display: flex; flex-direction: column; min-width: 0; }
.add__hint { font-size: 12px; line-height: 1.4; color: var(--ink-eyebrow); }
.add__hint.is-here { color: var(--act-trail); }

/* The way in: a chevron that steps toward you on hover. */
.add__end {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background: var(--gray-2);
  -webkit-mask: url("icons/chevron-left.svg") center / 16px no-repeat;
  mask: url("icons/chevron-left.svg") center / 16px no-repeat;
  transform: rotate(180deg);
  opacity: 0;
  transition: opacity var(--t-quick) var(--ease-out), transform var(--t-base) var(--ease-spring);
}
.add__row:hover .add__end,
.add__row:focus-visible .add__end { opacity: 1; transform: rotate(180deg) translateX(-2px); }

.card-view__add { align-self: stretch; padding: 14px 20px; }
.card-view__add[hidden] { display: none; }

/* A card arriving where you were taken to it. */
.card-slot.is-arrived { animation: card-arrived 1.6s var(--ease-out); }
@keyframes card-arrived {
  0% { box-shadow: 0 0 0 0 rgb(248 122 91 / 0.9); transform: scale(1.06); }
  30% { box-shadow: 0 0 0 6px rgb(248 122 91 / 0.55); transform: none; }
  100% { box-shadow: 0 0 0 14px rgb(248 122 91 / 0); }
}

/* The toast answers what you just did, which may have been inside a sheet. */
.toast { z-index: 90; }

/* With the add sheet open, it sits over the binder you can still see, not
   over the sheet's own footer. */
html:has(#add-drawer:not([hidden])) .toast {
  left: calc((100vw - min(639px, 100vw - 20px) - 10px) / 2);
}
@media (max-width: 760px) {
  html:has(#add-drawer:not([hidden])) .toast { left: 50%; bottom: 100px; }
}

/* ============================================================
   Every button is round
   A pill when it has words, a circle when it is a mark, and the primary is
   the orange one. The old design's buttons (ghost-btn, pager, toast, the
   view toggle, the dialogs) are brought into that here rather than in each
   screen, so nothing square is left behind by a screen not yet redrawn.
   ============================================================ */

.ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 18px;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  background: var(--sheet);
  color: var(--ink-title);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 1.2;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--t-quick) var(--ease-out), background-color var(--t-quick) var(--ease-out), color var(--t-quick) var(--ease-out);
}
.ghost-btn:hover { color: var(--ink-title); border-color: var(--rule-hover); background: var(--sheet-hover); }
.ghost-btn--primary {
  border-color: transparent;
  background-color: var(--act);
  background-image: linear-gradient(rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.1));
  color: #fff;
}
.ghost-btn--primary:hover { border-color: transparent; background-color: var(--act-solid); color: #fff; }
.ghost-btn--danger{ color: var(--danger-ink); }
.ghost-btn--danger:hover{ color: var(--danger-ink); border-color: var(--danger-rule); background: var(--danger-wash); }

/* ------------------------------------------------------------
   The scrubber: the binder's pages seen from below. One hairline
   edge per spread, all one height, and an orange ribbon where it
   lies open. Resting the pointer on it wakes it: the edges darken
   a shade and the ribbon stands taller, saying a swipe will turn
   the pages. Only transforms move while it is used.
   ------------------------------------------------------------ */
.pager { flex-direction: column; gap: 2px; }

.scrubber {
  --scrub-w: 240px;
  --scrub-pad: 14px;
  position: relative;
  width: calc(var(--scrub-w) + 2px + var(--scrub-pad) * 2);
  height: 36px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.scrubber[hidden] { display: none; }
.scrubber.is-dragging { cursor: grabbing; }

.scrubber__edges {
  --edge: light-dark(rgb(10 13 18 / 0.16), rgb(255 255 255 / 0.16));
  --edge-read: light-dark(rgb(10 13 18 / 0.34), rgb(255 255 255 / 0.42));
  position: absolute;
  left: var(--scrub-pad);
  bottom: 8px;
  width: calc(var(--scrub-w) + 2px);
  height: 10px;
  background: repeating-linear-gradient(to right,
    var(--edge) 0 2px, transparent 2px var(--scrub-gap, 9px));
}
/* The pages already turned are a shade darker: where you have been. */
.scrubber__read {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to right,
    var(--edge-read) 0 2px, transparent 2px var(--scrub-gap, 9px));
}
.scrubber:hover .scrubber__edges,
.scrubber.is-dragging .scrubber__edges {
  --edge: light-dark(rgb(10 13 18 / 0.24), rgb(255 255 255 / 0.24));
  --edge-read: light-dark(rgb(10 13 18 / 0.46), rgb(255 255 255 / 0.56));
}

.scrubber__ribbon {
  position: absolute;
  left: calc(var(--scrub-pad) - 0.5px);
  bottom: 6px;
  width: 3px;
  height: 24px;
  border-radius: 2px;
  background: var(--act);
  box-shadow: 0 3px 8px -2px rgb(252 73 45 / 0.5);
  will-change: transform;
  transition: height 220ms var(--ease-spring), bottom 220ms var(--ease-spring);
}
.scrubber.is-dragging .scrubber__ribbon,
.scrubber:hover .scrubber__ribbon { height: 28px; }
.scrubber:focus-visible .scrubber__ribbon { box-shadow: 0 0 0 3px var(--act-trail); }

/* Where a drag will land, or where a click would go. */
.scrubber__tip {
  position: absolute;
  left: calc(var(--scrub-pad) + 1px);
  bottom: 38px;
  padding: 6px 12px;
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-pill);
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  color: var(--glass-ink);
  font: 600 12px/1 var(--font-eyebrow);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  translate: -50% 0;
  opacity: 0;
  scale: 0.9;
  transform-origin: 50% 100%;
  pointer-events: none;
  transition: opacity 160ms var(--ease-out), scale 220ms var(--ease-spring);
}
.scrubber__tip.is-shown { opacity: 1; scale: 1; }

@media (prefers-reduced-motion: reduce) {
  .scrubber__ribbon, .scrubber__tip { transition: none; }
}

/* The toast: a white pill, with Undo as the orange one inside it. */
.toast {
  gap: 10px;
  padding: 8px 8px 8px 20px;
  border: 1px solid var(--edge-soft);
  border-radius: var(--r-pill);
  background: var(--sheet);
  box-shadow: 0 18px 40px -16px rgb(0 0 0 / 0.3), var(--shadow-xs);
}
.toast__text { font-size: 14px; color: var(--ink-title); }
.toast__action {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--act);
  font: 700 13px var(--font-sans);
  letter-spacing: 0;
}
.toast__action:hover { background: var(--act-solid); }
.toast__close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  color: var(--gray);
  transition: background-color var(--t-quick) var(--ease-out);
}
.toast__close:hover { background: var(--hover); color: var(--ink-title); }

/* The two quick controls on a card are marks, so circles. */
.card-slot__check,
.card-slot__own { border-radius: 50%; }

/* A segmented choice reads as one pill. */
.seg-group { border-radius: var(--r-pill); }

/* ---------- dialogs: rename, share ---------- */

.modal-backdrop {
  background: var(--scrim);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: fade-in var(--t-base) var(--ease-out) both;
}

.dialog,
.modal-content--narrow {
  border: 1px solid var(--edge-soft);
  border-radius: var(--r-panel);
  background: var(--sheet);
  color: var(--ink-title);
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.45);
  padding: 28px;
  animation: pop-in var(--t-base) var(--ease-spring) both;
}
.dialog__title,
.share__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--ink-title);
}
.dialog__label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-eyebrow);
}
.dialog__input,
.share__link {
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--r-field);
  background: var(--sheet);
  color: var(--ink-title);
  font-size: 15px;
  box-shadow: var(--shadow-xs);
}
.dialog__input:focus-visible,
.share__link:focus-visible { outline: none; border-color: var(--act-trail); box-shadow: 0 0 0 3px rgb(248 122 91 / 0.18); }
.dialog__hint { color: var(--ink-eyebrow); font-size: 13px; }
.dialog__actions { gap: 10px; margin-top: 24px; }

.modal-close {
  display: grid;
  place-items: center;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  color: var(--gray);
  font-size: 22px;
  transition: background-color var(--t-quick) var(--ease-out);
}
.modal-close:hover { background: var(--hover); color: var(--ink-title); }

/* ---------- the card up close: the arts keep their room ----------
   Filled or not, so nothing moves when they arrive. */

.card-view__flip[hidden] { display: inline-flex; visibility: hidden; }

.card-view__arts {
  width: var(--card-w);
  margin-top: 4px;
}
.card-view__arts[hidden] { display: block; visibility: hidden; }
.card-view__arts .card-view__label { text-align: left; }

/* The time an undo has left: the toast's own background drains away. */
.toast { overflow: hidden; isolation: isolate; }
.toast::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hover);
  transform-origin: left center;
  transform: scaleX(0);
}
.toast.is-timed::before { animation: toast-drain var(--toast-ms, 10s) linear both; }
.toast.is-paused::before { animation-play-state: paused; }
@keyframes toast-drain {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}
.toast__action { display: inline-flex; align-items: center; gap: 8px; }
.toast__count {
  min-width: 18px;
  padding: 1px 5px;
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 0.22);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .toast.is-timed::before { animation: none; transform: scaleX(0); }
}

/* ---------- carrying a card to another page ----------
   At the outer edge of the binder a soft light gathers from the edge inward
   while the card is held there; when it has filled, the page turns. */
.page-cue {
  position: fixed;
  z-index: 900;
  width: 72px;
  border-radius: 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms var(--ease-out);
}
.page-cue[data-side="left"] { background: linear-gradient(90deg, rgb(248 122 91 / 0.34), rgb(248 122 91 / 0)); transform-origin: left center; }
.page-cue[data-side="right"] { background: linear-gradient(270deg, rgb(248 122 91 / 0.34), rgb(248 122 91 / 0)); transform-origin: right center; }
.page-cue.is-on { opacity: 1; animation: page-cue-gather var(--hold, 560ms) var(--ease-out) both; }
.page-cue.is-turning { opacity: 0; transition-duration: 400ms; }
@keyframes page-cue-gather {
  from { transform: scaleX(0.25); filter: saturate(0.6); }
  to { transform: scaleX(1); filter: none; }
}

/* ---------- a search that can look for more than one thing ----------
   The segment sits inside the field, where the magnifier was: what the words
   are matched against is part of the question, not a setting elsewhere. */
.input--modes { gap: 12px; padding-right: 6px; }
.input--modes > img { display: none; }
.search-mode {
  flex: 0 0 auto;
  display: inline-flex;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--hover);
}
.search-mode button {
  padding: 6px 11px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink-muted);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--t-quick) var(--ease-out), color var(--t-quick) var(--ease-out), box-shadow var(--t-quick) var(--ease-out);
}
.search-mode button:hover { color: var(--ink-title); }
.search-mode button[aria-checked="true"] {
  background: var(--sheet);
  color: var(--ink-title);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
}
.search-mode button:focus-visible { outline: 2px solid var(--act-trail); outline-offset: 1px; }

/* ---------- a filter section's tile ----------
   A type shows one of its cards' art; an artist, their initials. */
.filter-tile {
  overflow: hidden;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}
.filter-tile img { width: 100%; height: 100%; object-fit: cover; }
.section-row .filter-tile,
.create__chosen-row--filter .filter-tile { width: 32px; height: 32px; }

/* ============================================================
   A shared binder: somebody else's, read only. The page is the
   binder — a quiet bar saying whose it is and how much of it they
   have, the object given every pixel left, and the scrubber.
   ============================================================ */

body.shared { min-height: 100dvh; }

.shared__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100dvh;
  padding: 0 clamp(16px, 3vw, 40px) 16px;
}

.shared__state {
  margin: 32vh 0 0;
  font: 500 15px/1.4 var(--font-eyebrow);
  color: var(--ink-eyebrow);
}

.shared__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px 0 4px;
}
.shared__bar.hidden { display: none; }

.shared__brand { justify-self: start; display: block; border-radius: 6px; }
.shared__brand img { display: block; width: 30px; height: 40px; transition: transform var(--t-quick) var(--ease-out); }
.shared__brand:hover img { transform: translateY(-1px); }

.shared__title { display: grid; gap: 3px; text-align: center; min-width: 0; }
.shared__name {
  margin: 0;
  overflow: hidden;
  font: 500 22px/1.15 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--ink-title);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shared__meta {
  margin: 0;
  font: 500 13px/1.3 var(--font-eyebrow);
  font-variant-numeric: tabular-nums;
  color: var(--ink-eyebrow);
}

.shared__own { justify-self: end; text-decoration: none; }

/* The binder takes the rest: no width cap, every pixel of height. */
.shared .spread { flex: 1 1 auto; width: 100%; min-height: 0; padding: 0; gap: 4px; }
.shared .spread__stage { flex: 1 1 auto; max-width: none; min-height: 0; }
/* Hidden until hover is the owner's screen, where the binder is the subject
   and the controls know their place. A visitor needs to see that it turns. */
.shared .spread .pager { opacity: 1; }

@media (max-width: 600px) {
  .shared__bar { grid-template-columns: auto minmax(0, 1fr); padding-top: 14px; }
  .shared__title { text-align: left; }
  .shared__name { font-size: 18px; }
  .shared__own { display: none; }
}