/*
  Pokémon Coloring Cards. Loaded only on its project page. Plain CSS, not built by
  Tailwind; colours come from the site's theme tokens so dark mode just works.
  The paper itself is always white, so anything drawn on it uses fixed light colours.
*/

/* Card lettering */
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/rubik-latin.b65daadded74.woff2") format("woff2"); }
@font-face { font-family: "Rubik"; font-style: italic; font-weight: 400 800; font-display: swap; src: url("fonts/rubik-italic-latin.7abeb01acf52.woff2") format("woff2"); }
@font-face { font-family: "Cabin"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("fonts/cabin-latin.44691444dd98.woff2") format("woff2"); }
@font-face { font-family: "Cabin"; font-style: italic; font-weight: 500 600; font-display: swap; src: url("fonts/cabin-italic-latin.7936da259485.woff2") format("woff2"); }

.cardsheet {
  --cc-line: var(--color-base-300);
  --cc-accent: var(--color-secondary);
  --cc-soft: color-mix(in oklab, var(--color-base-content) 5%, var(--color-base-100));
  --cc-seg-on: var(--color-base-100);
  --cc-pop: 0 12px 32px rgb(20 26 40 / .16), 0 2px 6px rgb(20 26 40 / .08);
  --paper-shadow: 0 1px 2px rgb(20 26 40 / .08), 0 12px 32px rgb(20 26 40 / .14);
  --cc-ease: cubic-bezier(.2, .8, .2, 1);
  --cc-card-radius: 4.8% / 3.43%;
  --pk-mix: 22%;          /* how much card colour tints a Pokémon icon's tile */
  --pk-mix-strong: 38%;
}
[data-theme="dark"] .cardsheet {
  --cc-seg-on: color-mix(in oklab, var(--color-base-content) 16%, var(--color-base-100));
  --cc-pop: 0 12px 32px rgb(0 0 0 / .5), 0 2px 6px rgb(0 0 0 / .3);
  --paper-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 12px 32px rgb(0 0 0 / .5);
  --pk-mix: 34%;
  --pk-mix-strong: 50%;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .cardsheet {
    --cc-seg-on: color-mix(in oklab, var(--color-base-content) 16%, var(--color-base-100));
    --cc-pop: 0 12px 32px rgb(0 0 0 / .5), 0 2px 6px rgb(0 0 0 / .3);
    --paper-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 12px 32px rgb(0 0 0 / .5);
    --pk-mix: 34%;
    --pk-mix-strong: 50%;
  }
}

.cardsheet .defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.cardsheet .cc-ico { width: 1.125rem; height: 1.125rem; flex: none; }

/* Two modes, coloring cards and master set placeholders: data-for elements show only in theirs */
.cardsheet[data-mode="cards"] [data-for="placeholders"],
.cardsheet[data-mode="placeholders"] [data-for="cards"] { display: none; }

/* ---- Workspace: toolbar on top, controls beside the paper ---- */

.cardsheet .cc-work {
  border: 1px solid var(--cc-line);
  border-radius: var(--r-lg);
  background: var(--color-base-100);
}
.cardsheet .cc-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.75rem 1rem 0.75rem 1.25rem;
  border-bottom: 1px solid var(--cc-line);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: color-mix(in oklab, var(--color-base-100) 90%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.cardsheet .cc-bar-start { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.cardsheet .cc-count { margin: 0; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.cardsheet .cc-count strong { font-weight: 650; }
.cardsheet .cc-count span { color: var(--muted); }
.cardsheet .cc-bar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.625rem; }
.cardsheet .cc-detail { display: flex; align-items: center; gap: 0.5rem; margin-right: 0.25rem; }
.cardsheet .cc-bar-label { font-size: 0.8125rem; font-weight: 500; color: var(--muted); }
.cardsheet .cc-print { height: 2.5rem; min-height: 2.5rem; padding-inline: 1.1rem; gap: 0.45rem; }

.cardsheet .cc-body { display: grid; grid-template-columns: minmax(0, 1fr); }
.cardsheet .cc-side {
  padding: 1.25rem;
  border-bottom: 1px solid var(--cc-line);
}
.cardsheet .cc-side-group { display: flex; flex-direction: column; gap: 1.25rem; }
.cardsheet .cc-stage {
  min-width: 0;
  padding: clamp(1rem, 3vw, 2.25rem);
  background: var(--color-base-200);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

@media (min-width: 64rem) {
  .cardsheet .cc-bar { position: sticky; top: 4rem; z-index: 20; }
  .cardsheet .cc-body { grid-template-columns: 20rem minmax(0, 1fr); }
  .cardsheet .cc-side {
    position: sticky;
    top: 8.25rem;
    align-self: start;
    border-bottom: 0;
  }
  .cardsheet .cc-stage {
    border-left: 1px solid var(--cc-line);
    border-radius: 0 0 var(--r-lg) 0;
    min-height: 40rem;
  }
  .cardsheet .cc-side-group > * + * { border-top: 1px solid var(--cc-line); padding-top: 1.25rem; }
}

/* ---- Controls ---- */

.cardsheet .cc-label {
  display: block;
  margin-bottom: 0.5rem;
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-base-content);
}
.cardsheet .cc-sub {
  margin: 1rem 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.cardsheet .cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  height: 2.5rem;
  padding: 0 0.9rem;
  border: 1px solid var(--cc-line);
  border-radius: var(--r-sm);
  background: var(--color-base-100);
  color: var(--color-base-content);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.cardsheet .cc-btn:hover:not(:disabled) {
  background: var(--cc-soft);
  border-color: color-mix(in oklab, var(--color-base-content) 24%, transparent);
}
.cardsheet .cc-btn:disabled { opacity: .45; cursor: default; }
.cardsheet .cc-btn-quiet { border-color: transparent; background: transparent; color: var(--muted); }
.cardsheet .cc-btn-quiet:hover:not(:disabled) { color: var(--color-base-content); border-color: transparent; }
.cardsheet .cc-btn:focus-visible,
.cardsheet .cc-icon-btn:focus-visible,
.cardsheet .cc-link-btn:focus-visible,
.cardsheet .cc-quick button:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: 2px; }

.cardsheet .cc-add-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.75rem; }

/* Segmented choice */
.cardsheet .seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--cc-line);
  border-radius: calc(var(--r-sm) + 3px);
  background: var(--cc-soft);
}
.cardsheet .seg-fill { display: flex; }
.cardsheet .seg-fill button { flex: 1; }
.cardsheet .seg button {
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  transition: background-color .15s, color .15s, box-shadow .15s;
}
.cardsheet .seg button:hover { color: var(--color-base-content); }
.cardsheet .seg button[aria-pressed="true"] {
  background: var(--cc-seg-on);
  color: var(--color-base-content);
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(20 26 40 / .14), 0 0 0 1px color-mix(in oklab, var(--color-base-content) 8%, transparent);
}
.cardsheet .seg button:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: -2px; }

/* Search box: picking a match adds the card */
.cardsheet .cc-combo { position: relative; border-radius: var(--r-sm); }
.cardsheet .cc-combo-icon {
  position: absolute;
  left: 0.8rem;
  top: 50%;
  width: 1.125rem;
  height: 1.125rem;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.cardsheet .cc-input {
  width: 100%;
  height: 2.875rem;
  padding: 0 2.5rem 0 2.5rem;
  border: 1px solid var(--cc-line);
  border-radius: var(--r-sm);
  background: var(--color-base-100);
  color: var(--color-base-content);
  font: inherit;
  font-size: 0.9375rem;
  transition: border-color .15s, box-shadow .15s;
}
.cardsheet .cc-input::placeholder { color: var(--muted); opacity: .9; }
.cardsheet .cc-input:focus {
  outline: none;
  border-color: var(--cc-accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--cc-accent) 22%, transparent);
}
.cardsheet .cc-slash {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  transition: opacity .15s;
}
.cardsheet .cc-input:focus ~ .cc-slash { opacity: 0; }
@media (hover: none) { .cardsheet .cc-slash { display: none; } }
.cardsheet .cc-combo.nudge { animation: cc-nudge .6s var(--cc-ease); }
@keyframes cc-nudge {
  0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--cc-accent) 45%, transparent); }
  100% { box-shadow: 0 0 0 10px transparent; }
}

.cardsheet .cc-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  max-height: min(24rem, 60dvh);
  overflow-y: auto;
  background: var(--color-base-100);
  border: 1px solid var(--cc-line);
  border-radius: var(--r-md);
  box-shadow: var(--cc-pop);
  animation: cc-drop .14s var(--cc-ease);
}
@keyframes cc-drop { from { opacity: 0; transform: translateY(-4px); } }
.cardsheet .cc-results [role="option"] {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.3rem 0.6rem 0.3rem 0.3rem;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.cardsheet .cc-results [aria-selected="true"] { background: color-mix(in oklab, var(--cc-accent) 13%, var(--color-base-100)); }
.cardsheet .cc-results [aria-selected="true"] .pk-icon { --pk-mix: var(--pk-mix-strong); }
.cardsheet .cc-opt-text { display: grid; flex: 1; min-width: 0; gap: 0.1rem; }
.cardsheet .cc-opt-name { font-size: 0.9375rem; font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cardsheet .cc-opt-name mark { background: none; color: inherit; font-weight: 700; }
.cardsheet .cc-opt-meta {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cardsheet .cc-opt-meta .pk-coin { width: 0.8rem; height: 0.8rem; }
.cardsheet .cc-opt-on {
  margin-left: 0.2rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--cc-accent) 15%, transparent);
  color: var(--color-base-content);
  font-weight: 600;
}
.cardsheet .cc-opt-enter { display: none; }
.cardsheet [aria-selected="true"] .cc-opt-enter { display: inline-block; }
@media (hover: none) { .cardsheet [aria-selected="true"] .cc-opt-enter { display: none; } }
.cardsheet .cc-noresult { padding: 0.75rem; font-size: 0.875rem; color: var(--muted); }

/* Pokémon icon (pokeIcon in app.js): a sprite zoomed to fill a tile tinted with its card
   colour. Used by search results, popular picks, the selected card and toasts. */
.cardsheet .pk-icon {
  --pk-size: 2.75rem;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--pk-size);
  height: var(--pk-size);
  overflow: hidden;
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--pk-c) var(--pk-mix), var(--color-base-100));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--pk-c) 40%, transparent);
  color: color-mix(in oklab, var(--pk-c) 45%, var(--color-base-content));
  transition: background-color .15s;
}
.cardsheet .pk-icon[data-tint="outline"] { box-shadow: inset 0 0 0 1.5px var(--color-base-content); }
.cardsheet .pk-icon img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  transform: scale(1.4);
  opacity: 0;
  transition: opacity .15s;
}
.cardsheet .pk-icon img[data-fit] { opacity: 1; }
.cardsheet .pk-icon > svg { width: 50%; height: 50%; }   /* energy symbol or blank-card pencil */
.cardsheet .pk-sm { --pk-size: 1.75rem; }
.cardsheet .pk-lg { --pk-size: 3rem; }
.cardsheet .pk-coin { display: block; flex: none; }

.cardsheet .cc-thumb { display: flex; flex: none; }

.cardsheet .cc-quick { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.4rem; }
.cardsheet .cc-quick button {
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  cursor: pointer;
  transition: transform .15s var(--cc-ease);
}
.cardsheet .cc-quick .pk-icon { --pk-size: 100%; }
@media (hover: hover) {
  .cardsheet .cc-quick button:hover { transform: translateY(-2px); }
  .cardsheet .cc-quick button:hover .pk-icon { --pk-mix: var(--pk-mix-strong); }
}
.cardsheet .cc-quick button:active { transform: translateY(0) scale(.96); }

/* The selected card */
.cardsheet .cc-editor fieldset { margin: 1.1rem 0 0; padding: 0; border: 0; min-width: 0; }
.cardsheet .cc-editor.empty .cc-editor-body,
.cardsheet .cc-editor:not(.empty) .cc-editor-empty { display: none; }
.cardsheet .cc-editor-empty p { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--muted); }
.cardsheet .cc-keys {
  display: grid;
  gap: 0.4rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
}
.cardsheet .cc-editor-head { display: flex; align-items: center; gap: 0.75rem; }
.cardsheet .cc-editor-name { flex: 1; min-width: 0; }
.cardsheet .cc-editor-name h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cardsheet .cc-editor-name p { margin: 0.1rem 0 0; font-size: 0.8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.cardsheet .cc-icon-btn {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color .15s, background-color .15s;
}
.cardsheet .cc-icon-btn:hover { color: var(--color-error); background: color-mix(in oklab, var(--color-error) 10%, transparent); }
.cardsheet .cc-done { display: none; }

.cardsheet .swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; }
.cardsheet .swatch {
  width: 100%;
  max-width: 2.25rem;
  aspect-ratio: 1;
  justify-self: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12);
  cursor: pointer;
  transition: transform .15s var(--cc-ease), box-shadow .15s;
}
.cardsheet .swatch:hover { transform: scale(1.1); }
.cardsheet .swatch[data-color="outline"] { background: #fff; box-shadow: inset 0 0 0 2px #333; }
.cardsheet .swatch[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12), 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-base-content);
}
.cardsheet .swatch[data-color="outline"][aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px #333, 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-base-content);
}
.cardsheet .swatch:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: 5px; }
.cardsheet .match-btn {
  grid-column: 1 / -1;
  height: 2.125rem;
  border: 1px solid var(--cc-line);
  border-radius: 999px;
  background: var(--color-base-100);
  color: var(--color-base-content);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.cardsheet .match-btn:hover { background: var(--cc-soft); }
.cardsheet .match-btn[aria-pressed="true"] {
  background: var(--color-base-content);
  border-color: var(--color-base-content);
  color: var(--color-base-100);
}
.cardsheet .match-btn:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: 2px; }
.cardsheet .cc-swatch-name { margin: 0.6rem 0 0; min-height: 1.25rem; font-size: 0.8125rem; color: var(--muted); }
.cardsheet .cc-link-btn {
  margin-top: 0.9rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-base-content);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--color-base-content) 30%, transparent);
  text-underline-offset: 3px;
  cursor: pointer;
}
.cardsheet .cc-link-btn:hover { text-decoration-color: currentColor; }

.cardsheet .cc-tip { display: flex; gap: 0.6rem; margin: 0; font-size: 0.8125rem; line-height: 1.55; color: var(--muted); }
.cardsheet .cc-tip svg { flex: none; margin-top: 0.15rem; }

/* Placeholder controls: generation, number range and picture */
.cardsheet .ph-note { margin: 0 0 0.9rem; font-size: 0.8125rem; line-height: 1.5; color: var(--muted); }
.cardsheet .seg + .ph-note { margin: 0.6rem 0 0; }
.cardsheet .ph-label { margin-top: 1.1rem; }
.cardsheet .ph-gens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.cardsheet .ph-gens button {
  display: grid;
  justify-items: center;
  gap: 0.05rem;
  padding: 0.45rem 0.25rem;
  border: 1px solid var(--cc-line);
  border-radius: var(--r-sm);
  background: var(--color-base-100);
  color: var(--color-base-content);
  font: inherit;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.cardsheet .ph-gens strong { font-size: 0.875rem; font-weight: 650; }
.cardsheet .ph-gens span { font-size: 0.75rem; color: var(--muted); }
.cardsheet .ph-gens button:hover { background: var(--cc-soft); border-color: color-mix(in oklab, var(--color-base-content) 24%, transparent); }
.cardsheet .ph-gens button[aria-pressed="true"] {
  border-color: var(--cc-accent);
  background: color-mix(in oklab, var(--cc-accent) 12%, var(--color-base-100));
  box-shadow: inset 0 0 0 1px var(--cc-accent);
}
.cardsheet .ph-gens button:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: 2px; }
.cardsheet .ph-range {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  font-size: 0.875rem;
  color: var(--muted);
  white-space: nowrap;
}
.cardsheet .ph-num {
  flex: 1;
  min-width: 0;
  height: 2.375rem;
  padding: 0 0.6rem;
  border: 1px solid var(--cc-line);
  border-radius: var(--r-sm);
  background: var(--color-base-100);
  color: var(--color-base-content);
  font: inherit;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  transition: border-color .15s, box-shadow .15s;
}
.cardsheet .ph-num:focus {
  outline: none;
  border-color: var(--cc-accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--cc-accent) 22%, transparent);
}

.cardsheet kbd {
  font-family: inherit;
  font-size: 0.75rem;
  line-height: 1.4;
  border: 1px solid var(--cc-line);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 0 5px;
  background: var(--color-base-100);
  color: var(--color-base-content);
}

/* On a phone the selected card's controls slide up as a sheet over the page */
@media (max-width: 63.99rem) {
  .cardsheet .cc-editor.empty { display: none; }
  .cardsheet .cc-editor:not(.empty) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    max-height: 72dvh;
    overflow-y: auto;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
    background: var(--color-base-100);
    border-top: 1px solid var(--cc-line);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: 0 -12px 40px rgb(20 26 40 / .22);
    animation: cc-sheet-up .24s var(--cc-ease);
  }
  .cardsheet .cc-editor fieldset { margin-top: 0.85rem; }
  .cardsheet .cc-done {
    display: inline-flex;
    align-items: center;
    height: 2.25rem;
    padding: 0 0.9rem;
    border: 0;
    border-radius: 999px;
    background: var(--color-base-content);
    color: var(--color-base-100);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
  }
  .cardsheet .swatches { grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr)); }
  .cardsheet.sheet-open .cc-stage { padding-bottom: 55dvh; }
  .cardsheet.sheet-open .cc-toast { bottom: auto; top: 5rem; }
}
@keyframes cc-sheet-up { from { transform: translateY(100%); } }

/* ---- The paper: a Letter page, nine cards in a 3×3 grid ---- */

.cardsheet .pages { display: grid; gap: 2rem; }
.cardsheet .paper-frame {
  container-type: inline-size;
  width: 100%;
  max-width: 8.5in;
  margin-inline: auto;
}
.cardsheet .cc-page-label {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.cardsheet .paper {
  background: #fff;
  width: 100%;
  aspect-ratio: 8.5 / 11;
  padding: 3.1cqw 5.53cqw; /* ~0.26in / 0.47in of an 8.5in page */
  box-sizing: border-box;
  box-shadow: var(--paper-shadow);
  border-radius: 3px;
}
.cardsheet .sheet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.765cqw; /* 0.15in cutting gap */
}
.cardsheet .sheet svg { display: block; width: 100%; height: auto; }

.cardsheet .slot {
  position: relative;
  border-radius: var(--cc-card-radius);
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: transform .18s var(--cc-ease), filter .18s var(--cc-ease);
}
@media (hover: hover) {
  .cardsheet .slot:hover { transform: translateY(-2px); filter: drop-shadow(0 6px 10px rgb(20 26 40 / .2)); }
}
.cardsheet .slot.dragging { opacity: .3; transform: none; filter: none; }
.cardsheet .slot.is-new { animation: cc-pop .34s var(--cc-ease); }
@keyframes cc-pop { from { opacity: 0; transform: scale(.9) translateY(8px); } }
.cardsheet .slot.drop-before::before,
.cardsheet .slot.drop-after::before {
  content: "";
  position: absolute;
  top: 2%;
  bottom: 2%;
  width: 4px;
  border-radius: 2px;
  background: var(--cc-accent);
}
.cardsheet .slot.drop-before::before { left: calc(-0.88cqw - 2px); }
.cardsheet .slot.drop-after::before { right: calc(-0.88cqw - 2px); }
.cardsheet .slot:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: 3px; }
.cardsheet .slot.selected { outline: 3px solid var(--cc-accent); outline-offset: 3px; }

/* Shimmer while a card's details or outline are on their way */
.cardsheet .slot.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .6) 50%, transparent 70%) 0 0 / 250% 100%;
  animation: cc-shimmer 1.3s linear infinite;
  pointer-events: none;
}
@keyframes cc-shimmer { from { background-position: 125% 0; } to { background-position: -125% 0; } }

/* Remove button, shown on hover (or on the selected card on touch screens) */
.cardsheet .cc-x {
  position: absolute;
  top: -0.9cqw;
  right: -0.9cqw;
  display: grid;
  place-items: center;
  width: clamp(22px, 4.2cqw, 30px);
  height: clamp(22px, 4.2cqw, 30px);
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #1d2130;
  color: #fff;
  box-shadow: 0 2px 6px rgb(0 0 0 / .25);
  cursor: pointer;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .15s, transform .15s var(--cc-ease), background-color .15s;
}
.cardsheet .cc-x svg { width: 58%; height: 58%; }
.cardsheet .cc-x:hover { background: #c8382c; }
.cardsheet .slot.selected .cc-x { opacity: 1; transform: none; }
@media (hover: hover) {
  .cardsheet .slot:hover .cc-x { opacity: 1; transform: none; }
}
.cardsheet .slot.dragging .cc-x { display: none; }

/* The next free spot on the sheet, and the empty spots after it (screen only) */
.cardsheet .add-tile {
  aspect-ratio: 250 / 350;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.3cqw;
  padding: 8%;
  border: 1.5px dashed #c1c7d0;
  border-radius: var(--cc-card-radius);
  background: #fafbfc;
  color: #3f4654;
  font-size: clamp(9px, 1.75cqw, 14px);
  transition: border-color .15s, background-color .15s;
}
.cardsheet .add-tile:hover { border-color: #9aa2b1; }
.cardsheet .add-tile.drop-here { border-color: var(--cc-accent); background: color-mix(in oklab, var(--cc-accent) 8%, #fff); }
.cardsheet .add-tile .cc-plus {
  display: grid;
  place-items: center;
  width: 3.4em;
  height: 3.4em;
  margin-bottom: 0.2em;
  border-radius: 50%;
  background: #eceef2;
  color: #4b5260;
}
.cardsheet .add-tile .cc-plus svg { width: 50%; height: 50%; }
.cardsheet .add-tile p { margin: 0 0 0.4em; font-weight: 650; font-size: 1.1em; color: #1d2130; }
.cardsheet .add-tile button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  width: 100%;
  max-width: 11em;
  padding: 0.55em 0.6em;
  border: 1px solid #d5d9df;
  border-radius: 999px;
  background: #fff;
  color: #1d2130;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.cardsheet .add-tile button:hover { border-color: #9aa2b1; box-shadow: 0 2px 6px rgb(20 26 40 / .1); }
.cardsheet .add-tile button:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: 2px; }
.cardsheet .add-tile button svg { width: 1.2em; height: 1.2em; flex: none; }
@container (max-width: 26rem) {
  .cardsheet .add-tile p,
  .cardsheet .add-tile button svg { display: none; }
}
.cardsheet .cc-empty-slot {
  aspect-ratio: 250 / 350;
  border: 1.5px dashed #e4e7eb;
  border-radius: var(--cc-card-radius);
}

/* Master set placeholders butt up against each other, with one dashed cut line
   between neighbours: the sheet draws the top and left edges, each card its right
   and bottom. Columns are inches of the 8.5in page, as cqw of the paper. */
.cardsheet .ph-sheet {
  --cut: 1px dashed #a9b0ba;
  gap: 0;
  width: fit-content;
  margin-inline: auto;
  border-top: var(--cut);
  border-left: var(--cut);
}
.cardsheet .ph-sheet.ph-size-small { grid-template-columns: repeat(4, 20.59cqw); }   /* 1.75in */
.cardsheet .ph-sheet.ph-size-card { grid-template-columns: repeat(3, 28.47cqw); }    /* 2.42in */

/* A placeholder: number, picture in color, name. Sized in cqw so the lettering
   keeps its proportions at either size, on screen and on paper. */
.cardsheet .ph-card {
  container-type: inline-size;
  aspect-ratio: 250 / 350;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  border-right: var(--cut);
  border-bottom: var(--cut);
  background: #fff;
  color: #1d2130;
  text-align: center;
}
.cardsheet .ph-no {
  margin: 8cqw 0 0;
  font-family: Rubik, sans-serif;
  font-size: 7cqw;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: #6b7280;
}
.cardsheet .ph-pic {
  display: grid;
  place-items: center;
  width: 82cqw;
  height: 82cqw;
  margin-top: 5cqw;
  overflow: hidden;
}
.cardsheet .ph-pic img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.cardsheet .ph-pic img.ph-pixel { image-rendering: pixelated; }
.cardsheet .ph-card .ph-pic > svg { width: 30%; height: auto; }   /* type symbol when there's no picture */
.cardsheet .ph-pic.is-loading::before {
  content: "";
  width: 56%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #eef0f3;
  animation: ph-pulse 1s ease-in-out infinite alternate;
}
@keyframes ph-pulse { to { background: #f8f9fa; } }
.cardsheet .ph-name {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  margin: 0;
  padding: 0 6cqw 4cqw;
  font-family: Rubik, sans-serif;
  font-size: 10cqw;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
}
.cardsheet .ph-name.ph-long { font-size: 8.6cqw; }

/* ---- Toast ---- */

.cc-toast {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: calc(100vw - 2rem);
  min-height: 2.75rem;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  background: #1d2130;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 10px 30px rgb(0 0 0 / .25);
  opacity: 0;
  transform: translate(-50%, 0.75rem);
  pointer-events: none;
  transition: opacity .2s, transform .2s var(--cc-ease, ease);
}
.cc-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.cc-toast:has(.cc-toast-undo:not([hidden])) { padding-right: 0.45rem; }
.cc-toast:has(.cc-toast-icon:not([hidden])) { padding-left: 0.5rem; gap: 0.6rem; }
.cc-toast-icon[hidden] { display: none; }
.cc-toast .pk-icon { border-radius: 50%; }
.cc-toast.is-error { background: #b3261e; }
[data-theme="dark"] .cc-toast:not(.is-error) { background: #eceef2; color: #1d2130; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .cc-toast:not(.is-error) { background: #eceef2; color: #1d2130; }
}
.cc-toast-undo {
  padding: 0.35rem 0.85rem;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / .14);
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.cc-toast-undo:hover { background: rgb(255 255 255 / .24); }
[data-theme="dark"] .cc-toast-undo { background: rgb(0 0 0 / .08); }
[data-theme="dark"] .cc-toast-undo:hover { background: rgb(0 0 0 / .15); }
.cc-toast-undo[hidden] { display: none; }

/* The card being dragged is cloned onto <body>, outside .cardsheet. */
.drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: .95;
  filter: drop-shadow(0 12px 24px rgb(0 0 0 / .3));
}
.drag-ghost svg { display: block; width: 100%; height: auto; }
.drag-ghost .cc-x { display: none; }
body.is-dragging,
body.is-dragging * { cursor: grabbing !important; }

@media (prefers-reduced-motion: reduce) {
  .cardsheet *,
  .cardsheet *::after,
  .cc-toast { animation: none !important; transition: none !important; }
}

/* ---- Printing: only the sheets, at 97% of real card size ---- */

@page {
  size: letter;
  margin: 0.25in 0.45in;
}

@media print {
  body { background: #fff !important; }
  body > :not(main),
  main > :not(#app),
  .cardsheet .cc-bar,
  .cardsheet .cc-side,
  .cardsheet .cc-page-label,
  .cardsheet .add-tile,
  .cardsheet .cc-empty-slot,
  .cardsheet .cc-x,
  .cardsheet .screen-only,
  .cc-toast { display: none !important; }

  #app.cardsheet { margin: 0 !important; padding: 0 !important; max-width: none !important; }
  .cardsheet .cc-work { border: 0; border-radius: 0; background: none; }
  .cardsheet .cc-body { display: block !important; }
  .cardsheet .cc-stage { padding: 0 !important; background: none !important; border: 0 !important; min-height: 0 !important; }
  .cardsheet .pages { display: block; }
  .cardsheet .paper-frame { max-width: none; }
  .cardsheet .paper-frame + .paper-frame { break-before: page; }
  .cardsheet .paper {
    width: auto;
    aspect-ratio: auto;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
  }
  .cardsheet .sheet { grid-template-columns: repeat(3, 2.42in); gap: 0.15in; justify-content: center; }
  .cardsheet .sheet svg { width: 2.42in; height: 3.388in; }
  .cardsheet .slot { transform: none !important; filter: none !important; animation: none !important; }
  .cardsheet .slot.selected { outline: 0; }
  .cardsheet .slot.is-loading::after { display: none; }
  .cardsheet .sheet.ph-sheet { gap: 0; justify-content: start; }
  .cardsheet .sheet.ph-size-small { grid-template-columns: repeat(4, 1.75in); }
  .cardsheet .sheet.ph-size-card { grid-template-columns: repeat(3, 2.42in); }
  .cardsheet .ph-card .ph-pic > svg { width: 30%; height: auto; }
  .cardsheet .ph-pic.is-loading::before { display: none; }
}