@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-display: swap; font-weight: 200 800; font-stretch: 75% 100%;
  src: url(/app/fonts/bricolage-grotesque-latin-standard-normal.woff2) format("woff2-variations");
}

/* "Print studio" (owner's pick, 2026-10-08; mockup in design/mockups/):
   a screen-printing workshop. Paper ground with grain, ink outlines, hard
   offset shadows like misregistered ink, condensed capitals for headings,
   square corners, and the logo's vermilion for the header, primary
   actions and what's picked. The grain sits on the page ground only,
   never over a pattern preview, so the user's colours stay true. */
:root {
  --bg: #f6efe2;
  --surface: #fffaf1;
  --surface-2: #efe6d5;
  --fg: #1b1714;
  --muted: #6f655a;
  --line: rgb(27 23 20 / 0.16);
  --line-strong: rgb(27 23 20 / 0.32);
  --ink: #1b1714;
  --ink-hover: #3a322c;
  --ink-fg: #f6efe2;
  --accent: #ea4a2a;
  --accent-hover: #d43c1e;
  --accent-soft: #fbd9cf;
  --accent-fg: #fffaf1;
  --danger: #b42318;
  --focus: #2f6bff;
  --stroke: 2.5px solid var(--ink);
  --radius: 0;
  --radius-sm: 0;
  --shadow-sm: 2px 2px 0 var(--ink);
  --shadow: 4px 4px 0 var(--ink);
  --shadow-lg: 7px 7px 0 var(--ink);
  --font: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.4 0 0 0 0 0.3 0 0 0 0 0.2 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg) var(--grain);
  color: var(--fg);
  font: 15px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { line-height: 1.1; margin: 0; }
h2 { font-size: 16px; font-weight: 750; }
h3 { font-size: 14px; font-weight: 750; }
/* poster type: heavy condensed capitals */
.poster, .hero h1, .results-head h2, .editor-head h2, .set-download h3, .collection-head h2, .modal h2, .from-swatches h2, .samples h2 {
  font-family: var(--font); font-weight: 800; font-stretch: 75%; text-transform: uppercase; letter-spacing: 0; line-height: 0.92;
}
p { margin: 0; }
img { display: block; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.icon { flex: none; display: block; }
::selection { background: var(--accent-soft); }

/* ── buttons: ink-outlined blocks that press into their shadow ── */
button {
  font: inherit; font-weight: 700;
  color: inherit;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 2px solid var(--ink);
  background: var(--surface);
  border-radius: 0;
  padding: 8px 14px;
  min-height: 44px;
  box-shadow: 3px 3px 0 var(--ink);
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.08s ease, transform 0.08s ease;
}
button:hover:not(:disabled) { background: var(--surface-2); }
button:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
button:disabled { opacity: 0.4; cursor: default; }
button.primary { background: var(--accent); color: var(--accent-fg); font-weight: 800; }
button.primary:hover:not(:disabled) { background: var(--accent-hover); }
button.primary.big { font-size: 20px; font-stretch: 75%; text-transform: uppercase; letter-spacing: 0.02em; padding: 14px 30px; min-height: 58px; border-width: 3px; box-shadow: 5px 5px 0 var(--ink); }
button.primary.big:active:not(:disabled) { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--ink); }
button.ghost { background: transparent; border-color: transparent; box-shadow: none; }
button.ghost:hover:not(:disabled) { background: rgb(27 23 20 / 0.07); }
button.ghost:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
button.small { min-height: 36px; padding: 6px 12px; font-size: 14px; gap: 6px; box-shadow: 2px 2px 0 var(--ink); }
button.small:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
button.small.primary { font-weight: 800; }
button.ghost.small, button.ghost.small:active:not(:disabled) { box-shadow: none; }
button.icon-btn { padding: 8px; min-width: 44px; }
button.small.icon-btn { min-width: 36px; padding: 6px; }
button.danger { color: var(--danger); }
button.link { border: 0; background: none; box-shadow: none; padding: 4px 2px; min-height: 32px; color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 2px; text-underline-offset: 3px; font-size: 14px; font-weight: 600; }
button.link:hover:not(:disabled) { background: none; text-decoration-color: var(--accent); }
button.link:active:not(:disabled) { transform: none; box-shadow: none; }
button.wide { width: 100%; }
input[type=range] { accent-color: var(--accent); }
input[type=checkbox] { accent-color: var(--accent); }

/* ── header: the vermilion bar ─────────── */
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top));
  background: var(--accent); color: var(--accent-fg);
  border-bottom: 3px solid var(--ink);
}
.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; font-stretch: 75%; text-transform: uppercase; font-size: 23px; line-height: 1; color: inherit; text-decoration: none; white-space: nowrap; }
.logo {
  width: 30px; height: 30px; border: 2.5px solid var(--ink); flex: none;
  background: conic-gradient(#c4452d 0 25%, #f4ebdc 0 50%, #1f3a5f 0 75%, #e0a93b 0);
}
.actions { display: flex; gap: 8px; }
.actions button, .actions button.ghost {
  white-space: nowrap; min-height: 38px; padding: 5px 11px; font-size: 14px;
  background: var(--surface); color: var(--ink); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
}
.actions button:hover:not(:disabled), .actions button.ghost:hover:not(:disabled) { background: var(--surface-2); }
.actions button:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.actions button:disabled { opacity: 1; background: transparent; color: rgb(27 23 20 / 0.45); border-color: rgb(27 23 20 / 0.35); box-shadow: none; }
@media (max-width: 520px) { .actions .label { display: none; } }

.error-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 12px 16px 0; padding: 8px 8px 8px 14px; font-weight: 600;
  background: #fde3df; color: var(--danger); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--danger);
}

/* ── landing ───────────────────────────── */
.landing { max-width: 900px; margin: 0 auto; padding: 44px 16px 64px; }
.hero { text-align: center; }
.hero h1 { font-size: clamp(48px, 10.5vw, 104px); max-width: 9em; margin: 0 auto; }
.hero h1 em { font-style: normal; color: var(--accent); }
.lead { color: var(--fg); font-size: 19px; font-weight: 500; max-width: 32em; margin: 18px auto 30px; }
.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 38px 16px; border: 3px dashed var(--ink); background: var(--surface);
}
.drop-hint { color: var(--muted); font-size: 14px; font-weight: 500; }
.privacy { color: var(--muted); font-size: 14px; max-width: 36em; margin: 20px auto 0; }
.privacy strong { color: var(--fg); }
.privacy.small { margin: 8px 0 0; font-size: 13px; }
.privacy p + p { margin-top: 6px; }
.samples { margin-top: 52px; }
.samples h2 { text-align: center; margin-bottom: 18px; font-size: 34px; }
.samples ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sample { width: 100%; padding: 0; display: flex; flex-direction: column; gap: 0; align-items: stretch; border-width: 2.5px; box-shadow: 4px 4px 0 var(--ink); font-weight: 800; font-stretch: 75%; text-transform: uppercase; font-size: 18px; }
.sample img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-bottom: var(--stroke); }
.sample span { padding: 8px 10px; text-align: left; }
.samples li:nth-child(odd) .sample:hover:not(:disabled) { transform: rotate(-1.2deg) translateY(-3px); }
.samples li:nth-child(even) .sample:hover:not(:disabled) { transform: rotate(1deg) translateY(-3px); }

/* ── workspace ─────────────────────────── */
.workspace {
  display: grid;
  gap: 16px;
  padding: 16px;
  grid-template-columns: 1fr;
  max-width: 1600px; margin: 0 auto;
}
.source, .results { min-width: 0; }
.source { display: flex; flex-direction: column; gap: 14px; }
/* room for the artwork's offset shadow (and on desktop the sticky scroll box clips it otherwise) */
.artwork {
  background: var(--surface);
  border: 3px solid var(--ink); box-shadow: 7px 7px 0 var(--accent); margin-right: 7px;
  position: relative; display: flex; justify-content: center;
}
/* checkerboard only behind the image itself, so it signals real transparency */
.artwork img {
  width: auto; max-width: 100%; max-height: 260px;
  background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 16px 16px;
}
.artwork.picking img { cursor: crosshair; outline: 3px solid var(--focus); outline-offset: -3px; }
.pick-hint { position: absolute; left: 8px; bottom: 8px; background: var(--ink); color: var(--ink-fg); padding: 4px 10px; font-size: 13px; font-weight: 700; }
.note { background: #fff1c9; border: 2px solid var(--ink); padding: 10px 12px; font-size: 14px; }
.hint { color: var(--muted); font-size: 13px; }
.hint.small { font-size: 12px; margin-top: 4px; }

/* palette panel */
.palette { background: var(--surface); border: var(--stroke); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.palette h2 { font-stretch: 75%; text-transform: uppercase; font-weight: 800; font-size: 19px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
/* palette: solid ink-ruled colour blocks with the code printed on them
   (text colour set per block in PalettePanel); a grid of blocks on phones */
.swatches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border: var(--stroke); }
.swatches li + li { border-top: var(--stroke); }
.swatch-btn { width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; border: 0; box-shadow: none; text-align: left; font-weight: 700; }
.swatch-btn:hover:not(:disabled) { filter: brightness(1.06); }
.swatch-btn:active:not(:disabled) { transform: none; box-shadow: none; }
.swatch-btn.active { box-shadow: inset 0 0 0 4px var(--ink), inset 0 0 0 7px var(--surface); }
.swatch-btn .hex { font: 700 13px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.02em; }
.swatch-btn .weight { font-size: 12px; font-weight: 600; opacity: 0.8; font-variant-numeric: tabular-nums; }
.swatch { display: inline-block; box-shadow: inset 0 0 0 1.5px var(--ink); vertical-align: middle; }
.swatch.md { width: 28px; height: 28px; }
.swatch.sm { width: 18px; height: 18px; }
.swatch-editor { border-top: 2px solid var(--ink); padding-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.color-input input[type=color] { width: 48px; height: 44px; padding: 2px; border: 2px solid var(--ink); background: var(--surface); cursor: pointer; }
.hex-field input { font: 600 14px ui-monospace, monospace; width: 96px; height: 44px; padding: 0 10px; border: 2px solid var(--ink); border-radius: 0; background: var(--surface); color: var(--fg); text-transform: uppercase; }
.choose p { font-size: 14px; margin-bottom: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 8px; font-size: 13px; box-shadow: none; }
.confirm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.suggestion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; background: var(--surface-2); border: 2px solid var(--ink); padding: 8px 10px; }
.suggestion .pair { display: inline-flex; gap: 2px; }

/* results */
.results-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 16px; margin-bottom: 16px; }
.results-head h2 { font-size: clamp(40px, 5.4vw, 58px); }
.results-head h2 .from { display: block; color: var(--accent); }
.style-chips { display: flex; gap: 8px; overflow-x: auto; max-width: 100%; padding: 2px 6px 6px 2px; scrollbar-width: none; }
.collection-chips { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 100%; }
.style-chip { white-space: nowrap; padding: 6px 13px; font-weight: 700; box-shadow: none; }
.style-chip:active:not(:disabled) { box-shadow: none; }
.style-chips.mood { align-items: center; gap: 14px; }
.chips-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-right: -4px; }
.small-chip { min-height: 32px; padding: 4px 12px; font-size: 13px; }
.style-chip[aria-checked=true], .style-chip[aria-checked=true]:hover:not(:disabled) { background: var(--accent); color: var(--accent-fg); box-shadow: 3px 3px 0 var(--ink); transform: translate(-2px, -2px); }
/* moods: underlined words, not boxes */
.mood .style-chip { border-width: 0 0 2.5px; border-color: transparent; background: none; padding: 4px 1px; min-height: 32px; }
.mood .style-chip:hover:not(:disabled) { background: none; border-color: var(--ink); }
.mood .style-chip[aria-checked=true], .mood .style-chip[aria-checked=true]:hover:not(:disabled) { background: none; color: var(--accent); border-color: var(--accent); box-shadow: none; transform: none; }
.detect { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; padding: 10px 14px; background: var(--surface); border: 2px solid var(--ink); font-size: 14px; font-weight: 500; }
.detect.done { background: transparent; border-style: dashed; }
.detect.offer { box-shadow: 5px 5px 0 var(--accent); animation: detect-in 0.35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes detect-in { from { opacity: 0; transform: translateY(-6px) rotate(-0.6deg); } }
@media (prefers-reduced-motion: reduce) { .detect.offer { animation: none; } }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid var(--line-strong); border-top-color: var(--accent); animation: spin 0.8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.more { display: flex; margin: 26px 0 0; min-width: 180px; font-size: 18px; font-weight: 800; font-stretch: 75%; text-transform: uppercase; border-width: 2.5px; box-shadow: 4px 4px 0 var(--ink); }
.shuffle { align-self: flex-start; }
.results .note { margin-bottom: 12px; }
/* gap leaves room for the stickers that overhang each card's corner */
.grid { list-style: none; margin: 0; padding: 10px 10px 0 0; display: grid; gap: 22px 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { width: 100%; padding: 0; overflow: hidden; display: flex; flex-direction: column; align-items: stretch; gap: 0; border: var(--stroke); background: var(--surface); box-shadow: none; }
.card:hover:not(:disabled) { background: var(--surface); }
.card:active:not(:disabled) { transform: none; box-shadow: none; }
.card.selected { box-shadow: 6px 6px 0 var(--ink); }
.card-label { padding: 8px 10px 9px; font-weight: 800; font-stretch: 75%; text-transform: uppercase; font-size: 18px; line-height: 1; text-align: left; border-top: var(--stroke); }
.pattern-view { display: block; width: 100%; aspect-ratio: 1; position: relative; overflow: hidden; }
/* one layer per colour role: the role's colour through its coverage mask */
.pv-layer { position: absolute; inset: 0; mask-repeat: repeat; -webkit-mask-repeat: repeat; mask-position: 0 0; -webkit-mask-position: 0 0; }
.pattern-view.loading { background: linear-gradient(90deg, #efe6d5, #f8f1e4, #efe6d5); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* editor: bottom sheet on phones */
.sheet-backdrop { position: fixed; inset: 0; background: rgb(27 23 20 / 0.35); z-index: 30; }
.editor {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 31;
  max-height: 88vh; max-height: 88dvh;
  display: flex; flex-direction: column;
  background: var(--surface); border-top: 3px solid var(--ink);
  padding-bottom: env(safe-area-inset-bottom);
  animation: rise 0.2s ease-out;
}
@keyframes rise { from { transform: translateY(24px); opacity: 0; } }
.editor-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 16px; border-bottom: var(--stroke); background: var(--bg); }
.editor-head h2 { font-size: 30px; margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 2px; }
.remove-btn:hover:not(:disabled) { color: var(--danger); }
.pick-btn { white-space: nowrap; flex: none; }
.pick-btn.on, .pick-btn.on:hover:not(:disabled) { background: var(--accent); color: var(--accent-fg); }
.editor-body { overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 20px; overscroll-behavior: contain; }
.editor-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.editor h3 { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; font-stretch: 85%; }
/* art-vs-pattern compare: the artwork as a centred card on the pattern.
   flex: none, or the flex-column editor body squashes it to its border */
.compare-wrap { flex: none; display: flex; flex-direction: column; gap: 4px; }
.compare {
  position: relative; width: min(100%, 46vh); width: min(100%, 46dvh); aspect-ratio: 1; margin: 0 auto;
  overflow: hidden; border: var(--stroke);
  container-type: size; /* the card sizes against the square (cqw/cqh) */
}
.compare .pattern-view.big { position: absolute; inset: 0; height: 100%; }
/* whole artwork, never cropped: at most 60% wide or 72% tall
   (CARD_MAX in src/web/match-scale.ts; keep in step) */
.compare-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); line-height: 0; }
.compare-card img {
  display: block; max-width: 60cqw; max-height: 72cqh; width: auto; height: auto;
  border: 2.5px solid var(--ink); box-shadow: 5px 5px 0 var(--ink);
  transition: opacity 0.15s ease;
}
.compare.peek .compare-card img { opacity: 0; }
.toggle-labels { display: grid; }
.toggle-labels > * { grid-area: 1 / 1; }
.toggle-labels .off { visibility: hidden; }
/* on the card's top-right corner; stays in place while the art is hidden */
.compare-toggle {
  position: absolute; top: 0; right: 0; translate: 35% -45%; /* not transform: the button press nudge uses that */
  min-height: 32px; padding: 4px 12px 4px 10px; gap: 6px; font-size: 13px; line-height: 1.2; white-space: nowrap;
  background: var(--surface); color: var(--ink); box-shadow: 3px 3px 0 var(--ink);
}
.compare-match { justify-content: center; }
/* one-finger scroll still works over the preview; two fingers zoom it */
.compare { touch-action: pan-y; }
.compare-under { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 12px; }
.pinch-hint { font-size: 12px; }
.muted { color: var(--muted); }
.controls { display: flex; flex-direction: column; gap: 14px; }
.slider { display: flex; flex-direction: column; gap: 4px; }
.slider-label { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; }
.slider output { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 500; }
.slider input[type=range] { width: 100%; height: 32px; }
.toggle { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; font-weight: 500; }
.toggle input { width: 22px; height: 22px; }
.role-colors { display: flex; flex-direction: column; gap: 12px; }
.segmented { display: inline-flex; gap: 0; border: 2px solid var(--ink); }
.segmented button { border: 0; min-height: 32px; padding: 4px 12px; font-size: 13px; background: transparent; box-shadow: none; font-weight: 700; }
.segmented button + button { border-left: 2px solid var(--ink); }
.segmented button:hover:not(:disabled) { background: var(--surface-2); }
.segmented button:active:not(:disabled) { transform: none; box-shadow: none; }
.segmented button[aria-checked=true], .segmented button[aria-checked=true]:hover:not(:disabled) { background: var(--ink); color: var(--ink-fg); }
.role { border: 2px solid var(--line-strong); padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); }
.role-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.role-text { display: flex; flex-direction: column; flex: 1; min-width: 120px; }
.status { font-size: 12px; color: var(--muted); }
.status.local { color: #8a5a00; }
.swatch-chip { padding: 4px; min-height: 36px; min-width: 36px; justify-content: center; box-shadow: none; border-color: var(--line-strong); }
.swatch-chip:active:not(:disabled) { box-shadow: none; }
.swatch-chip.on, .swatch-chip.on:hover:not(:disabled) { border-color: var(--ink); box-shadow: 2px 2px 0 var(--accent); }
.export { display: flex; flex-direction: column; gap: 8px; }
.full-export { display: flex; flex-direction: column; gap: 10px; border: 2px solid var(--ink); padding: 12px; }
.full-export .row button { flex: 1; }
.preview-flag { font-size: 12px; color: #8a5a00; }
.select { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.select > span { font-weight: 600; }
.select select { font: inherit; font-weight: 600; min-height: 44px; border: 2px solid var(--ink); border-radius: 0; padding: 0 10px; background: var(--surface); color: var(--fg); }
.paid-note { font-size: 13px; color: var(--muted); background: var(--surface-2); border: 2px dashed var(--line-strong); padding: 10px 12px; }
.export-controls { display: flex; flex-direction: column; gap: 8px; }
.select.grow { flex: 1; min-width: 140px; }
.set-download { margin: 24px auto 0; max-width: 520px; display: flex; flex-direction: column; gap: 10px; }
section.set-download { background: var(--surface); border: 3px solid var(--ink); padding: 18px; box-shadow: 7px 7px 0 var(--accent); }
.set-download h3 { font-size: 30px; }

/* phones: keep artwork and palette compact so results come first */
@media (max-width: 699px) {
  .top { padding-left: 12px; padding-right: 10px; }
  .brand { font-size: 20px; gap: 9px; }
  .logo { width: 26px; height: 26px; }
  .actions { gap: 6px; }
  .actions button { padding: 5px 9px; }
  .workspace { padding: 12px; gap: 14px; }
  .artwork { align-self: flex-start; }
  .artwork img { max-height: 150px; }
  /* wrapping blocks: the last row stretches, so no empty cells */
  .swatches { display: flex; flex-wrap: wrap; gap: 2.5px; background: var(--ink); }
  .swatches li { flex: 1 1 calc(25% - 2.5px); min-width: 0; }
  .swatches li + li { border-top: 0; }
  .swatch-btn { min-height: 48px; padding: 4px 6px; align-items: flex-end; }
  .swatch-btn .weight { display: none; }
  .swatch-btn .hex { font-size: 11px; }
  .grid { gap: 20px 16px; }
  .card-label { font-size: 16px; }
}

/* tablet */
@media (min-width: 700px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* wide but short (tablet split view, phone landscape): the sheet goes
   side by side, preview held in view on the left, settings scroll on the
   right, so the preview isn't a small square above a long scroll */
@media (min-width: 600px) and (max-width: 999px) and (min-aspect-ratio: 5/4) {
  .editor-body { flex-direction: row; align-items: flex-start; gap: 24px; }
  .editor-body > .compare-wrap { position: sticky; top: 0; width: min(48%, calc(88dvh - 120px)); }
  .editor-body .compare { width: 100%; }
  .editor-side { flex: 1; }
}

/* desktop: source + palette | results | editor, all in view */
@media (min-width: 1000px) {
  .workspace { grid-template-columns: 300px minmax(0, 1fr); align-items: start; gap: 24px; padding: 22px; }
  .workspace.editing { grid-template-columns: 300px minmax(0, 1fr) 380px; }
  .source { position: sticky; top: 80px; max-height: calc(100vh - 96px); overflow-y: auto; padding: 0 0 10px; }
  .sheet-backdrop { display: none; }
  .editor {
    position: sticky; top: 80px; bottom: auto; left: auto; right: auto; z-index: 1;
    max-height: calc(100vh - 96px); border: 3px solid var(--ink); box-shadow: none;
    animation: none;
  }
  .grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .artwork img { max-height: 300px; }
}

/* playful: cards lift and tilt a little under the pointer (fine pointers only) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .grid li { transition: transform 0.25s cubic-bezier(.3, 1.6, .5, 1); }
  .grid li:nth-child(3n+1):hover { transform: rotate(-1.2deg) translateY(-3px); }
  .grid li:nth-child(3n+2):hover { transform: rotate(1deg) translateY(-3px); }
  .grid li:nth-child(3n):hover { transform: rotate(-0.6deg) translateY(-3px); }
}

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

/* Swatch files and pasted codes instead of artwork */
.from-swatches { max-width: 38em; margin: 30px auto 0; padding: 20px; background: var(--surface); border: var(--stroke); box-shadow: 5px 5px 0 var(--ink); display: flex; flex-direction: column; gap: 12px; align-items: center; }
.from-swatches h2 { font-size: 30px; }
.paste-codes { width: 100%; flex-wrap: nowrap; }
.paste-codes input { flex: 1; min-width: 0; min-height: 44px; padding: 6px 10px; border: 2px solid var(--ink); border-radius: 0; font: 14px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--bg); color: var(--fg); }
.palette-source { background: var(--surface); border: var(--stroke); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.palette-source .small { font-size: 13px; overflow-wrap: anywhere; }
.source-strip { display: flex; flex-wrap: wrap; gap: 4px; }
.drop-overlay { position: fixed; inset: 8px; z-index: 50; display: grid; place-items: center; border: 4px dashed var(--ink); background: rgb(234 74 42 / 0.88); pointer-events: none; }
.drop-overlay span { font-size: clamp(32px, 6vw, 64px); font-weight: 800; font-stretch: 75%; text-transform: uppercase; line-height: 0.95; color: var(--accent-fg); padding: 0 16px; text-align: center; }

/* Collection: picks on the cards, a bar above the grid, and a full-screen
   mosaic view (src/web/CollectionView.tsx) */
.grid li { position: relative; }
/* the pick sticker: a round paper "+ Add" on the card's corner that flips
   to a vermilion "✓ In" when chosen; the card then gets a vermilion offset */
.pick {
  position: absolute; top: -10px; right: -10px; z-index: 2;
  width: 54px; height: 54px; min-height: 0; padding: 0; border-radius: 50%;
  flex-direction: column; gap: 0; line-height: 1;
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em;
  background: var(--surface); color: var(--ink); border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
  transform: rotate(-10deg);
  transition: transform 0.3s cubic-bezier(.3, 1.8, .5, 1), background 0.12s ease;
}
.pick:hover:not(:disabled) { background: var(--surface); transform: rotate(4deg) scale(1.08); }
.pick:active:not(:disabled) { transform: rotate(4deg) scale(0.94); box-shadow: none; }
.pick.on, .pick.on:hover:not(:disabled) { background: var(--accent); color: var(--accent-fg); transform: rotate(8deg) scale(1.04); }
.card:has(+ .pick.on) { box-shadow: 7px 7px 0 var(--accent); }
.card.selected:has(+ .pick.on) { box-shadow: 7px 7px 0 var(--accent); outline: 3px solid var(--ink); outline-offset: 3px; }
@media (max-width: 420px) { .pick span { display: none; } .pick { width: 44px; height: 44px; top: -8px; right: -8px; } }

.collection-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 8px 8px 8px 14px; min-height: 58px; font-size: 14px; font-weight: 600;
  background: transparent; border: 2.5px dashed var(--line-strong); color: var(--muted);
}
.collection-empty { display: inline-flex; align-items: center; gap: 8px; }
.collection-bar.has {
  border: 2.5px solid var(--ink); background: var(--ink); color: var(--ink-fg); position: sticky; top: 70px; z-index: 5;
  padding-left: 10px;
}
.collection-thumbs { display: flex; }
.collection-thumbs .pattern-view { width: 38px; height: 38px; border: 2px solid var(--ink-fg); }
.collection-thumbs .pattern-view + .pattern-view { margin-left: -10px; }
.collection-thumbs .pattern-view:nth-child(even) { transform: rotate(6deg); }
.collection-thumbs .pattern-view:nth-child(3n) { transform: rotate(-5deg); }
.collection-count { display: flex; flex-direction: column; line-height: 1.1; margin-right: auto; }
.collection-count strong { font-size: 20px; font-weight: 800; font-stretch: 75%; text-transform: uppercase; }
.collection-count span { font-size: 13px; color: rgb(246 239 226 / 0.7); }
.collection-bar.has button { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); box-shadow: none; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }
.collection-bar.has button:hover:not(:disabled) { background: var(--accent-hover); }

.collection-view { position: fixed; inset: 0; z-index: 40; background: var(--bg) var(--grain); display: flex; flex-direction: column; animation: rise 0.2s ease-out; }
.collection-head {
  display: flex; align-items: center; gap: 8px; padding: 8px 16px; padding-top: max(8px, env(safe-area-inset-top));
  border-bottom: 3px solid var(--ink); background: var(--accent); color: var(--accent-fg);
}
.collection-head h2 { font-size: 30px; }
.collection-head button { color: var(--ink); }
.collection-head button.ghost { color: var(--accent-fg); }
.collection-head .muted { color: rgb(255 250 241 / 0.75); white-space: nowrap; } /* "· 4 prints" wraps as one piece */
.collection-body {
  flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 20px 16px; padding-bottom: max(20px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
/* As big as fits: the whole mosaic in view (screenshots, videos), from
   its real shape (4 columns × --rows), not an assumed square. */
.mosaic {
  --avail-h: calc(100dvh - 140px);
  width: min(100%, max(300px, var(--avail-h) * 4 / var(--rows)), 1100px); flex: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 6px;
}
.mosaic > * { overflow: hidden; }
.mosaic-tile { position: relative; padding: 0; border: 0; min-height: 0; display: block; background: none; box-shadow: none; }
/* numbered sticker, the same language as the pick sticker on the cards */
.mosaic-num {
  position: absolute; top: 6px; right: 6px; width: clamp(28px, 22%, 44px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; font-size: clamp(13px, 1.6vw, 19px); font-weight: 800; line-height: 1;
  background: var(--accent); color: var(--accent-fg); border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
  transform: rotate(-8deg); pointer-events: none;
}
.mosaic-tile:hover:not(:disabled) { background: none; filter: brightness(1.04); }
.mosaic-tile:active:not(:disabled) { transform: none; box-shadow: none; }
.mosaic-tile .pattern-view { aspect-ratio: 1; }
.mosaic-fill { aspect-ratio: 1; }
.mosaic-hero { grid-column: 2 / span 2; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; container-type: size; background: var(--surface); }
.mosaic-hero img { max-width: 86cqw; max-height: 86cqh; width: auto; height: auto; box-shadow: 0 0 0 1.5px rgb(27 23 20 / 0.25); }
.mosaic-palette { width: 100%; height: 100%; display: flex; }
.mosaic-palette span { flex: 1; }
.collection-side { width: min(100%, 880px); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.collection-palette { width: 100%; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.collection-swatch { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.collection-swatch span { width: 52px; height: 36px; box-shadow: inset 0 0 0 1.5px rgb(27 23 20 / 0.25); }
.collection-swatch code { font-size: 11px; font-weight: 600; color: var(--muted); }
.collection-body .set-download { width: min(100%, 520px); margin: 0; }
/* wide but short (tablet split view, landscape): palette and download go
   beside the mosaic, so the mosaic gets the full height */
@media (min-width: 700px) and (min-aspect-ratio: 5/4) {
  .collection-body { flex-direction: row; align-items: flex-start; justify-content: center; gap: 24px; }
  .mosaic { --avail-h: calc(100dvh - 120px); width: min(100% - 300px, var(--avail-h) * 4 / var(--rows), 1100px); }
  .collection-side { width: 280px; flex: none; position: sticky; top: 0; }
  .collection-palette { justify-content: flex-start; }
  .collection-side .set-download { width: calc(100% - 8px); }
.collection-side { padding-bottom: 8px; }
}

/* --- buying a collection (src/web/Shop.tsx) --- */
.buy .buy-what { font-size: 14px; }
.buy-form { display: flex; flex-direction: column; gap: 10px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.field input { font: inherit; font-size: 16px; font-weight: 500; color: var(--fg); padding: 10px 12px; border: 2px solid var(--ink); border-radius: 0; background: var(--surface); min-height: 44px; }
.field input:focus { outline: 3px solid var(--accent); outline-offset: 1px; }
.form-error { color: var(--danger); font-size: 14px; font-weight: 600; }
.set-download a { color: inherit; }
.one-print summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--muted); }
.one-print ul { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.purchase-msg { max-width: 520px; margin: 40px auto; padding: 0 16px; display: flex; flex-direction: column; gap: 10px; }
.modal-backdrop { position: fixed; inset: 0; z-index: 60; background: rgb(27 23 20 / 0.45); display: grid; place-items: center; padding: 16px; }
.modal { position: relative; width: min(100%, 440px); background: var(--surface); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--accent); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.modal form { display: flex; flex-direction: column; gap: 12px; }
.modal h2 { font-size: 34px; padding-right: 40px; }
.modal-close { position: absolute; top: 12px; right: 12px; }
.purchases { display: flex; flex-direction: column; gap: 4px; }
.site-footer { margin-top: 52px; padding: 24px 16px 32px; border-top: 3px solid var(--ink); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; font-weight: 600; }
.site-footer a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.site-footer a:hover { text-decoration-color: var(--accent); }
.modal a { color: inherit; }