/* Stamp sheet. Every colour, radius and face comes from tokens.css
   (--nd-*). Layout: stamps to the left of the sheet (never more than a third of
   the screen), ink pads beneath it, feelings stickers to its right, all at the
   size they have on the sheet (--ppm = px per mm). */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }
[hidden] { display: none !important; }

body {
  background-color: var(--nd-ground); /* plain; only the sheet carries paper grain */
  color: var(--nd-ink);
  font-family: var(--nd-font-body);
  font-size: var(--nd-text-base);
  line-height: var(--nd-leading-base);
}

button, select, input { font: inherit; color: inherit; }

:root { --ppm: 3; }
.bench {
  display: grid;
  /* the stamps never take more than a third of the screen */
  grid-template-columns: minmax(0, 33vw) auto auto;
  justify-content: center;
  gap: var(--nd-space-5);
  align-items: start;
  padding-inline: var(--nd-space-4);
  padding-block: var(--nd-space-5);
}
.page {
  width: min(40vw, calc(100dvh - 19rem));
  min-width: 17rem;
  display: grid;
  gap: var(--nd-space-4);
  justify-items: center;
}

/* Sheet */
.work { justify-items: center; }
.sheet-wrap { width: 100%; }
.sheet {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  container-type: inline-size;
  background-color: var(--nd-surface);
  background-image: var(--grain, none);
  border-radius: var(--nd-radius-card);
  /* heavy stock: a hard lower edge under a soft lift */
  box-shadow: 0 1px 0 var(--nd-line), 0 2px 0 var(--nd-sand-deep), var(--nd-shadow-lift);
  touch-action: none;
  cursor: none;
  overflow: hidden;
  user-select: none; -webkit-user-select: none;
}
.sheet.hit { animation: hit 110ms var(--nd-ease-gentle); }
@keyframes hit { 40% { transform: translateY(1.5px) scale(0.999); } }
.sheet canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

.dent {
  position: absolute; pointer-events: none;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  border-radius: var(--nd-radius-card);
  background: radial-gradient(closest-side, transparent 55%, rgb(var(--nd-sand-deep-rgb) / 0.55));
  opacity: 0.9;
  transition: opacity 1400ms var(--nd-ease-gentle);
}
.dent.gone { opacity: 0; }
.dent.round { border-radius: var(--nd-radius-pill); }

/* The stamp in the hand: a clear block seen from above */
.held {
  position: absolute; left: 0; top: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity var(--nd-duration-fast) var(--nd-ease-gentle);
  z-index: 5;
}
.held.on { opacity: 1; }
.block {
  position: absolute; inset: 0;
  border-radius: var(--nd-radius-card);
  background: rgb(var(--nd-surface-rgb) / 0.16);
  border: 1px solid rgb(var(--nd-ink-rgb) / 0.25);
  box-shadow: var(--nd-shadow-lift);
  transform: rotate(var(--r, 0deg)) scale(1.05);
  transition: transform 170ms var(--nd-ease-gentle), box-shadow 170ms var(--nd-ease-gentle);
}
.held.down .block {
  transform: rotate(var(--r, 0deg)) scale(0.955);
  box-shadow: none;
  transition: transform 900ms cubic-bezier(0.05, 0.95, 0.2, 1), box-shadow 70ms linear;
}
.held.round .block { border-radius: var(--nd-radius-pill); }
.held.lift .block { transform: rotate(var(--r, 0deg)) scale(1.1); }
.face {
  position: absolute; inset: 0;
  background-color: var(--inkc, var(--nd-ink));
  opacity: var(--o, 0.2);
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
}
.held.sticker .block { border-radius: var(--nd-radius-pill); background: none; border: 0; }
.held.sticker .face { display: none; }
.cross {
  position: absolute; left: 50%; top: 50%; width: 22px; height: 22px;
  transform: translate(-50%, -50%);
  display: none;
}
.held.kb .cross { display: block; }
.cross::before, .cross::after { content: ""; position: absolute; background: var(--nd-ink); }
.cross::before { left: 10px; top: 0; width: 2px; height: 22px; }
.cross::after { top: 10px; left: 0; height: 2px; width: 22px; }

/* Feelings stickers on the sheet */
.stickers { position: absolute; inset: 0; pointer-events: none; }
.stk {
  --d: calc(100cqw * 30 / 200);
  position: absolute;
  width: var(--d); height: var(--d);
  padding: 0;
  border: 0;
  border-radius: var(--nd-radius-pill);
  background: none;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  box-shadow: var(--nd-shadow-card);
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}
.stk:active { cursor: grabbing; }
/* The sticker art: square PNGs of round artwork, always seen through a circle. */
.art {
  display: block; width: 100%; height: 100%;
  clip-path: circle(50%);
  pointer-events: none;
  user-select: none; -webkit-user-select: none;
}
.stk[aria-pressed="true"] { outline: var(--nd-focus-width) solid var(--nd-ink); outline-offset: var(--nd-focus-offset); }
.held .stk { position: absolute; inset: 0; width: 100%; height: 100%; transform: none; --d: 100cqw; pointer-events: none; }
.held.sticker { container-type: inline-size; }

/* Ink pads: a case with a raised felt, a little splatter from use around it.
   Colour alone for now, no names; as wide as the sheet. */
.label {
  margin: 0;
  font-size: var(--nd-text-xs); line-height: var(--nd-leading-xs);
  font-weight: 700; text-transform: uppercase; letter-spacing: var(--nd-tracking-caps);
  color: var(--nd-ink-muted);
}
.nudge {
  margin: 0; padding: var(--nd-space-2) var(--nd-space-4);
  background: var(--nd-sand); border-radius: var(--nd-radius-card);
  border-left: 4px solid var(--nd-ink);
  font-size: var(--nd-text-sm); font-weight: 700;
}
.padlist { width: 100%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--nd-space-4); padding-bottom: var(--nd-space-3); }
.pad {
  position: relative;
  padding: 8px 8px 12px;
  background: var(--nd-sand-deep);
  border: 1px solid var(--nd-line);
  border-radius: var(--nd-radius-card);
  cursor: pointer;
  /* the case stands off the table; its front edge shows as a thicker lip */
  box-shadow: inset 0 -5px 0 rgb(var(--nd-ink-rgb) / 0.1), var(--nd-shadow-lift);
}
.pad[aria-pressed="true"] { outline: 2px solid var(--nd-ink); outline-offset: 2px; }
.felt {
  position: relative; display: block; height: 4.75rem;
  border-radius: var(--nd-radius-input);
  background-color: var(--inkc);
  /* wetter towards the middle, where stamps land most; felt tooth over the top */
  background-image: radial-gradient(ellipse at 50% 46%, rgb(var(--nd-ink-rgb) / 0.22), transparent 68%), var(--grain, none);
  box-shadow: inset 0 2px 4px rgb(var(--nd-ink-rgb) / 0.35), 0 0 0 2px rgb(var(--nd-ink-rgb) / 0.12);
  transition: transform var(--nd-duration-fast) var(--nd-ease-gentle);
}
.pad.press .felt { transform: scale(0.94); }
.splat {
  position: absolute; inset: -3px -18px -18px -18px; /* reaches sideways and down, never up to the sheet */
  background-color: var(--inkc);
  -webkit-mask: var(--sm, linear-gradient(transparent, transparent)) center / 100% 100% no-repeat;
  mask: var(--sm, linear-gradient(transparent, transparent)) center / 100% 100% no-repeat;
  pointer-events: none;
}

/* Controls: terse and few */
.bar { display: flex; flex-wrap: wrap; gap: var(--nd-space-2); align-items: center; justify-content: center; }
.btn {
  min-height: 2.5rem; min-width: 2.5rem;
  padding: 0 var(--nd-space-4);
  border-radius: var(--nd-radius-pill);
  border: 2px solid var(--nd-ink);
  background: transparent;
  cursor: pointer;
  font-size: var(--nd-text-sm);
  font-weight: 700;
}
.btn.solid { background: var(--nd-ink); color: var(--nd-on-ink); }
.btn.icon { padding: 0; display: inline-grid; place-items: center; }
.btn.icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
#soundBtn[aria-pressed="true"] .off, #soundBtn[aria-pressed="false"] .on { display: none; }
.quiet {
  min-height: 2.5rem; padding: 0 var(--nd-space-2);
  background: none; border: 0; cursor: pointer;
  font-size: var(--nd-text-sm); color: var(--nd-ink-soft);
  text-decoration: underline; text-underline-offset: 0.2em;
}
.panel {
  display: flex; flex-wrap: wrap; gap: var(--nd-space-4); align-items: center; justify-content: center;
  padding: var(--nd-space-3) var(--nd-space-4);
  background: var(--nd-sand);
  border-radius: var(--nd-radius-panel);
  max-width: 100%;
  font-size: var(--nd-text-sm);
}
.panel.help { display: block; max-width: var(--nd-measure); }
.panel.help ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--nd-space-1); }
.field { display: inline-flex; align-items: center; gap: var(--nd-space-2); }
.check { display: inline-flex; gap: var(--nd-space-2); align-items: center; }
.check input { width: 1.5rem; height: 1.5rem; margin: 0; flex: none; accent-color: var(--nd-ink); }
select {
  min-height: 2.5rem; padding: 0 var(--nd-space-3);
  border: 2px solid var(--nd-ink); border-radius: var(--nd-radius-input);
  background: var(--nd-surface);
}

/* Trays: Stamps and Feelings behave the same. Nothing is pinned to an edge and
   neither has a surface of its own: the pieces lie loose on the stock. */
.tray {
  position: sticky; top: var(--nd-space-5);
  max-height: calc(100dvh - 3rem);
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--nd-space-3);
  justify-items: center;
  min-width: 0;
}
.tray.right { width: calc(var(--ppm) * 60px + 3.5rem); }
.tab {
  min-height: 2.25rem; padding: 0 var(--nd-space-4);
  background: var(--nd-ink); color: var(--nd-on-ink);
  border: 0; border-radius: var(--nd-radius-pill);
  font-weight: 700; font-size: var(--nd-text-sm);
  cursor: pointer;
}
.drawer { width: 100%; overflow-y: auto; padding: var(--nd-space-2); scrollbar-width: thin; }
.picks { display: flex; flex-wrap: wrap; gap: var(--nd-space-3); align-items: center; justify-content: center; }
.stamps { position: relative; width: 100%; }
.pick {
  --d: calc(var(--ppm) * 30px);
  flex: none; width: var(--d); height: var(--d); padding: 0;
  border: 0;
  border-radius: var(--nd-radius-pill);
  background: none;
  cursor: pointer;
  box-shadow: var(--nd-shadow-card);
  transition: transform var(--nd-duration-fast) var(--nd-ease-gentle), box-shadow var(--nd-duration-fast) var(--nd-ease-gentle);
}
.pick:hover { transform: rotate(-6deg); }
/* the sticker in hand: lifted off the stock and ringed in ink */
.pick[aria-pressed="true"] {
  transform: translateY(-3px) rotate(-6deg);
  box-shadow: var(--nd-shadow-lift);
  outline: 3px solid var(--nd-ink); outline-offset: 3px;
}

.tray.left { width: 33vw; max-width: 100%; }
/* on a phone the pile sits under the sheet and is held to a third of the screen's height */

/* Stamps: no boxes. Each lies on the stock, smaller than it prints, inside an outline of its own shape. */
.st {
  position: absolute; left: 0; top: 0;
  padding: 0;
  background: none; border: 0;
  border-radius: var(--nd-radius-card);
  cursor: pointer;
}
.st.round { border-radius: var(--nd-radius-pill); }
.st[aria-pressed="true"] { outline: 2px solid var(--nd-ink); outline-offset: 1px; }
.st-img {
  width: 100%; height: 100%; display: block;
  background-color: var(--inkc, var(--nd-ink));
  opacity: var(--o, 0.3);
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
}

@media (max-width: 899px) {
  .bench { grid-template-columns: minmax(0, 1fr); }
  .page { width: min(100%, calc(100dvh - 9rem)); order: -1; justify-self: center; }
  .tray { position: static; max-height: none; width: 100%; }
  .tray.right { width: 100%; order: 1; }
  .tray.left { width: 100%; max-height: 33dvh; }
  .tray.left .drawer { overflow-y: auto; }
  .drawer { overflow: visible; }
  .bench { overflow-x: clip; }
  .padlist { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nd-space-4) var(--nd-space-5); }
  .felt { height: 3.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sheet.hit { animation: none; }
  /* designed fallback: a picked sticker keeps its ring and shadow but does not move */
  .pick:hover, .pick[aria-pressed="true"] { transform: none; }
  .dent { display: none; }
  /* designed fallback: the block does not travel; contact shows as a firm outline */
  .held.down .block { border-width: 3px; border-color: var(--nd-ink); }
}