/* Scoped reset: upstream relied on its host reset. */
:where(.cma,.ctb,.cte,.ctf) *{box-sizing:border-box}
:where(.cma,.ctb,.cte,.ctf) button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
:where(.cma,.ctb,.cte,.ctf) input,:where(.cma,.ctb,.cte,.ctf) select{font:inherit}
/* PrintPlast skin for the ProofScene card tools (ported 2026-10-26 with Chris's approval).
   The tool styles below are ProofScene's; these tokens map them onto the PrintPlast palette and stay
   scoped to the two tool roots, so nothing leaks into the rest of the site. */
:where(.cck, .cma, .cst, .ctb, .cte, .ctf) {
  --blueprint: #1a3c34;
  --blueprint-ink: #0f2820;
  --accent: #1a3c34;
  --accent-strong: #0f2820;
  --on-accent: #ffffff;
  --bg: #ffffff;
  --bg-elevated: #ffffff;
  --bg-subtle: #f5f5f7;
  --paper: #faf9f7;
  --paper-2: #f5f2ed;
  --wash-2: #eef5e4;
  --sky: #8cc63f;
  --ink: #1d1d1f;
  --ink-2: #2d2d30;
  --text: #1d1d1f;
  --text-muted: #6e6e73;
  --text-faint: #767676;
  --slate: #4b5552;
  --slate-2: #6e6e73;
  --hairline: #e5e7eb;
  --hairline-strong: #d2d2d7;
  --surface-line: #e5e7eb;
  --focus-ring: #6fa32e;
  --font-display: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --container-wide: 84rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --header-h: 4.5rem;
  --dur-fast: 150ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --r-card: 14px;
  --r-media: 18px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(15, 40, 32, 0.06), 0 1px 1px rgba(15, 40, 32, 0.04);
  --shadow-2: 0 4px 12px -4px rgba(15, 40, 32, 0.12), 0 2px 5px -3px rgba(15, 40, 32, 0.08);
  --shadow-3: 0 16px 34px -12px rgba(15, 40, 32, 0.18), 0 6px 14px -8px rgba(15, 40, 32, 0.10);
  --shadow-4: 0 34px 70px -24px rgba(15, 40, 32, 0.30), 0 12px 28px -16px rgba(26, 60, 52, 0.16);
  --step--1: clamp(0.80rem, 0.78rem + 0.08vw, 0.86rem);
  --step-0: clamp(1rem, 0.98rem + 0.10vw, 1.075rem);
  --step-1: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
  --step-3: clamp(1.70rem, 1.44rem + 1.02vw, 2.35rem);
  color: var(--text);
  font-family: var(--font-display);
}
:where(.cck, .cma, .cst, .ctb, .cte, .ctf) .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 44px; padding: 0.65rem 1.1rem; border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent); font: 650 0.9375rem/1.2 var(--font-display);
  cursor: pointer; box-shadow: var(--shadow-1); transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
:where(.cck, .cma, .cst, .ctb, .cte, .ctf) .btn:hover { transform: translateY(-1px); background: var(--accent-strong); box-shadow: var(--shadow-2); }
:where(.cck, .cma, .cst, .ctb, .cte, .ctf) .btn:active { transform: translateY(0); }
:where(.cck, .cma, .cst, .ctb, .cte, .ctf) .btn[aria-busy='true'] { opacity: 0.6; pointer-events: none; }
:where(.cck, .cma, .cst, .ctb, .cte, .ctf) :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* The free card tools: the 3D mockup generator (.cma), the template & artwork checker (.cck), the place-your-design
   dialog (.ctf) and the back-of-card choice (.ctb). Built on the site tokens; the 3D stage is the engine's dark room. */

[hidden] { display: none !important; }

/* ---------- 3D mockup generator ---------- */
.cma { --stage-h: clamp(420px, 64vh, 760px); position: relative; padding-block: clamp(0.5rem, 1.5vw, 1rem) clamp(2rem, 4vw, 3rem); }
.cma__grid { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) 23rem; gap: clamp(1rem, 2vw, 1.5rem); align-items: start; }
.cma__stage { position: sticky; top: calc(var(--header-h) + 0.75rem); height: var(--stage-h); border-radius: var(--r-media); overflow: hidden; background: #06110d; box-shadow: var(--shadow-4); isolation: isolate; }
.cma__gl { position: absolute; inset: 0; }
.cma__gl .cst-layer { position: absolute; inset: 0; transition: opacity 0.38s var(--ease-out); }
.cma__gl .psv { min-height: 0; height: 100%; }
.cma__gl .psv-bar, .cma__gl .psv-hint, .cma__gl .psv-foot { display: none !important; }
.cma[data-studio='light'] .cma__stage { background: #e9ecef; }

.cma__drop { position: absolute; left: 50%; top: 1rem; transform: translateX(-50%); z-index: 3; display: grid; justify-items: center; gap: 0.45rem; width: min(26rem, calc(100% - 2rem)); text-align: center; }
.cma__upload { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0.75rem; align-items: center; width: 100%; padding: 0.85rem 1.15rem; color: var(--ink); text-align: left; background: #ffffff; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 14px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.55); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.cma__upload:hover { transform: translateY(-2px); box-shadow: 0 24px 50px -14px rgba(0, 0, 0, 0.6); }
.cma__upload:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.cma__upload [data-icon], .cma__upload svg { grid-row: 1 / span 2; color: var(--blueprint); }
.cma__upload-main { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
.cma__upload-sub { color: var(--slate); font-size: var(--step--1); }
.cma__formats { color: rgba(233, 242, 248, 0.82); font-size: 0.8rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.cma[data-studio='light'] .cma__formats { color: var(--slate); text-shadow: none; }
.cma.has-own .cma__drop { display: none; }

.cma__dropzone { position: absolute; inset: 0.75rem; z-index: 4; display: none; place-items: center; border: 2px dashed var(--sky); border-radius: 14px; background: rgba(26, 60, 52, 0.18); color: #fff; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; pointer-events: none; }
.cma.is-dropping .cma__dropzone { display: grid; }

.cma__bottom { position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; z-index: 3; display: grid; gap: 0.45rem; pointer-events: none; }
.cma__viewbar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; pointer-events: auto; }
.cma__views, .cma__zoom { display: flex; gap: 2px; padding: 3px; border-radius: 11px; background: rgba(8, 24, 18, 0.72); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.cma__zoom { margin-inline-start: auto; }
.cma__viewbar button { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.2rem; padding: 0.35rem 0.75rem; color: #e9f2f8; font-size: 0.86rem; font-weight: 600; border-radius: 8px; transition: background var(--dur-fast); }
.cma__viewbar button:hover { background: rgba(255, 255, 255, 0.12); }
.cma__viewbar button:focus-visible { outline: 2px solid var(--sky); outline-offset: 1px; }
.cma__shine { background: rgba(8, 24, 18, 0.72) !important; border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 11px !important; }
.cma__zoom button { padding-inline: 0.6rem; }
.cma[data-studio='light'] .cma__views, .cma[data-studio='light'] .cma__zoom, .cma[data-studio='light'] .cma__shine { background: rgba(255, 255, 255, 0.82) !important; border-color: rgba(14, 27, 44, 0.12); }
.cma[data-studio='light'] .cma__viewbar button { color: var(--ink); }
.cma[data-studio='light'] .cma__viewbar button:hover { background: rgba(14, 27, 44, 0.08); }

.cma__status { margin: 0; padding-inline: 0.25rem; color: rgba(233, 242, 248, 0.86); font-size: 0.84rem; line-height: 1.4; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); pointer-events: none; }
.cma__stage:has(canvas:focus-visible) { outline: 2px solid var(--sky); outline-offset: 3px; }
.cma__status[data-tone='bad'] { color: #ffd2cc; }
.cma[data-studio='light'] .cma__status { color: var(--slate); text-shadow: none; }
.cma[data-studio='light'] .cma__status[data-tone='bad'] { color: #b42318; }
.cma__spinner { position: absolute; top: 50%; left: 50%; z-index: 2; width: 42px; height: 42px; margin: -21px; border: 3px solid rgba(255, 255, 255, 0.18); border-top-color: var(--sky); border-radius: 50%; opacity: 0; transition: opacity 0.2s; animation: cma-spin 0.9s linear infinite; pointer-events: none; }
.cma.is-busy .cma__spinner { opacity: 1; }
/* the sample's 3D card as a picture until the engine has drawn a card (CardMockupApp.astro; mockup-app.js show()
   removes it; without a graphics processor, until the visitor presses View in 3D) */
.cma__poster img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.cma__start { display: none; justify-self: start; align-items: center; min-height: 2.6rem; padding: 0.5rem 1.1rem; border-radius: 11px; background: var(--accent); color: #fff; font-weight: 700; font-size: 0.92rem; pointer-events: auto; box-shadow: var(--shadow-2); }
.cma__start:hover { background: var(--accent-strong); }
.cma__start:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.cma.is-paused .cma__start { display: inline-flex; }
.cma.is-paused .cma__viewbar { display: none; }
@keyframes cma-spin { to { transform: rotate(360deg); } }

.cma__rail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--surface-line); border-radius: var(--r-card); background: var(--bg-elevated); box-shadow: var(--shadow-1); }
.cma__block { margin: 0; padding: 1.05rem 1.15rem 1.15rem; border: 0; border-top: 1px solid var(--surface-line); min-width: 0; }
.cma__block:first-child { border-top: 0; }
.cma__block > legend { float: left; width: 100%; margin-block-end: 0.7rem; padding: 0; font-family: var(--font-display); font-size: 0.98rem; font-weight: 700; color: var(--ink); }
.cma__block > legend + * { clear: both; }

.cma__thumbs { display: grid; gap: 0.55rem; }
.cma__thumb { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: center; }
.cma__thumb-face { display: grid; place-items: center; width: 84px; height: 56px; padding: 0; border-radius: 7px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--surface-line); }
.cma__thumb-face canvas { max-width: 76px; max-height: 50px; width: auto; height: auto; border-radius: 4px; box-shadow: 0 2px 6px rgba(14, 27, 44, 0.18); }
.cma__thumb-face:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.cma__thumb-text { display: grid; min-width: 0; line-height: 1.3; }
.cma__thumb-side { font-family: var(--font-display); font-size: 0.86rem; font-weight: 700; }
.cma__thumb-name { overflow: hidden; color: var(--text-faint); font-size: 0.8rem; text-overflow: ellipsis; white-space: nowrap; }
.cma__thumb-acts { display: flex; gap: 0.75rem; margin-block-start: 0.15rem; }
.cma__thumb-acts button { padding: 0.6rem 0; margin-block: -0.45rem; color: var(--accent-strong); font-size: 0.82rem; font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 3px; }
.cma__thumb-acts button:hover { text-decoration-color: currentColor; }
.cma__samples { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-block-start: 0.85rem; color: var(--text-faint); font-size: 0.8rem; }
.cma__samples > span { flex-basis: 100%; }
.cma__samples button { padding: 0.28rem 0.6rem; color: var(--ink); font-size: 0.8rem; font-weight: 600; border: 1px solid var(--surface-line); border-radius: var(--r-pill); background: var(--bg); }
.cma__samples button:hover, .cma__samples button[aria-pressed='true'] { border-color: var(--accent); color: var(--accent-strong); background: var(--wash-2); }

.cma__meter-read { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.cma__meter-read strong { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
.cma__gu { color: var(--text-faint); font-size: 0.8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cma__meter { --at: 25%; -webkit-appearance: none; appearance: none; width: 100%; height: 34px; margin: 0.55rem 0 0.1rem; background: transparent; cursor: pointer; }
.cma__meter::-webkit-slider-runnable-track { height: 12px; border-radius: 999px; background: linear-gradient(90deg, #0f2820 0%, #2d6b5a 4%, #f4faf2 7.5%, #3f7a68 11%, #1a3c34 22%, #3d5a52 42%, #6e7a76 70%, #8f9794 88%, #a7aeab 100%); box-shadow: inset 0 0 0 1px rgba(14, 27, 44, 0.18); }
.cma__meter::-moz-range-track { height: 12px; border-radius: 999px; background: linear-gradient(90deg, #0f2820 0%, #2d6b5a 4%, #f4faf2 7.5%, #3f7a68 11%, #1a3c34 22%, #3d5a52 42%, #6e7a76 70%, #8f9794 88%, #a7aeab 100%); }
.cma__meter::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: border-box; width: 26px; height: 26px; margin-top: -7px; border-radius: 50%; background: #ffffff; border: 2px solid var(--blueprint); box-shadow: 0 3px 10px rgba(14, 27, 44, 0.32); }
.cma__meter::-moz-range-thumb { box-sizing: border-box; width: 26px; height: 26px; border-radius: 50%; background: #ffffff; border: 2px solid var(--blueprint); box-shadow: 0 3px 10px rgba(14, 27, 44, 0.32); }
.cma__meter:focus-visible { outline: none; }
.cma__meter:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--blueprint) 35%, transparent), 0 3px 10px rgba(14, 27, 44, 0.32); }
.cma__meter:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--blueprint) 35%, transparent); }
.cma__ticks, .cma__tick-labels { --last: 8; position: relative; }
.cma__ticks { height: 1.6rem; }
.cma__ticks button { position: absolute; top: 0; left: calc(13px + (100% - 26px) * var(--i) / var(--last)); display: grid; place-items: center; width: 1.6rem; height: 1.6rem; padding: 0; transform: translateX(-50%); }
.cma__tick-labels { height: 1.1rem; color: var(--text-faint); font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.cma__tick-labels span { position: absolute; top: 0; }
.cma__tick-labels span:first-child { left: 0; }
.cma__tick-labels span:last-child { right: 0; }
.cma__tick-labels span[style] { left: calc(13px + (100% - 26px) * var(--i) / var(--last)); transform: translateX(-50%); }
.cma__tick-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hairline-strong); transition: background var(--dur-fast), transform var(--dur-fast); }
.cma__ticks button:hover .cma__tick-dot { background: var(--slate-2); }
.cma__ticks button[aria-pressed='true'] .cma__tick-dot { background: var(--blueprint); transform: scale(1.35); }
.cma__ticks button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-radius: 50%; }
.cma__tick-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cma__feel { margin-block-start: 0.5rem; color: var(--text-muted); font-size: 0.86rem; }
.cma__check { display: flex; align-items: center; gap: 0.5rem; margin-block-start: 0.7rem; color: var(--text-muted); font-size: 0.86rem; cursor: pointer; }
.cma__check input { width: 1.05rem; height: 1.05rem; accent-color: var(--blueprint); }

.cma__line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.75rem; margin-block-start: 0.55rem; }
.cma__line:first-of-type { margin-block-start: 0; }
.cma__sub { padding-inline-start: 0.75rem; }
.cma__label { color: var(--text-muted); font-size: 0.86rem; font-weight: 600; }
.cma__seg { display: inline-flex; padding: 2px; border-radius: 10px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--surface-line); }
.cma__seg button { min-height: 2rem; padding: 0.25rem 0.7rem; color: var(--slate); font-size: 0.82rem; font-weight: 600; border-radius: 8px; white-space: nowrap; transition: background var(--dur-fast), color var(--dur-fast); }
.cma__seg button:hover { color: var(--ink); }
.cma__seg button[aria-pressed='true'] { color: var(--ink); background: #ffffff; box-shadow: 0 1px 3px rgba(14, 27, 44, 0.16), inset 0 0 0 1px rgba(14, 27, 44, 0.06); }
.cma__seg button:focus-visible, .cma__swatches button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.cma__swatches { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.3rem; }
.cma__swatches button { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.22rem 0.55rem 0.22rem 0.3rem; color: var(--slate); font-size: 0.76rem; font-weight: 600; border: 1px solid var(--surface-line); border-radius: var(--r-pill); }
.cma__swatches button::before { content: ''; width: 14px; height: 14px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(14, 27, 44, 0.2); }
.cma__swatches button[aria-pressed='true'] { color: var(--ink); border-color: var(--accent); background: var(--wash-2); }
.cma__note { margin-block-start: 0.75rem; color: var(--text-faint); font-size: 0.78rem; line-height: 1.45; }
.cma select { min-height: 2.2rem; max-width: 13.5rem; padding: 0.3rem 0.55rem; font-size: 0.82rem; color: var(--ink); background: var(--bg-elevated); border: 1px solid var(--surface-line); border-radius: 9px; }
.cma select:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }

.cma__fx .cma__line { flex-wrap: nowrap; }
.cma__fx-name { display: grid; min-width: 0; line-height: 1.3; }
.cma__fx-sum { overflow: hidden; color: var(--text-faint); font-size: 0.8rem; text-overflow: ellipsis; white-space: nowrap; }
.cma__line.is-on .cma__fx-sum { color: var(--ink); font-weight: 600; }
.cma__fx-acts { display: inline-flex; flex: none; align-items: center; gap: 0.7rem; }
.cma__fx-acts [data-fx-remove] { color: var(--text-faint); font-size: 0.8rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cma__fx-acts [data-fx-remove]:hover { color: var(--ink); }
.cma__fx-add { min-height: 2rem; padding: 0.25rem 0.8rem; color: var(--ink); font-size: 0.82rem; font-weight: 600; border: 1px solid var(--surface-line); border-radius: 8px; background: var(--bg); transition: border-color var(--dur-fast), background var(--dur-fast); }
.cma__fx-add:hover { border-color: var(--accent); background: var(--wash-2); }
.cma__fx-acts button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 6px; }

.cma__dl-main { width: 100%; justify-content: center; gap: 0.5rem; }
.cma__dl-more { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin-block-start: 0.55rem; }
.cma__dl-more button, .cma__to-checker { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.35rem; padding: 0.35rem 0.6rem; color: var(--ink); font-size: 0.8rem; font-weight: 600; text-align: left; border: 1px solid var(--surface-line); border-radius: 9px; background: var(--bg); transition: border-color var(--dur-fast), background var(--dur-fast); }
.cma__dl-more button:hover, .cma__to-checker:hover { border-color: var(--accent); background: var(--wash-2); }
.cma__dl-more button:disabled, .cma__dl-main:disabled { opacity: 0.6; cursor: progress; }
.cma__dl-more [data-share-image] { grid-column: 1 / -1; }
.cma__dl-more svg, .cma__to-checker svg { flex: none; color: var(--accent-strong); }
.cma__to-checker { width: 100%; margin-block-start: 0.7rem; color: var(--accent-strong); }
.cma__dl-more button:focus-visible, .cma__to-checker:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }

@media (max-width: 1080px) {
  .cma__grid { grid-template-columns: minmax(0, 1fr) 21rem; }
}
@media (max-width: 900px) {
  .cma { --stage-h: min(56vh, 30rem); }
  .cma__grid { grid-template-columns: 1fr; padding-inline: 0; }
  .cma__stage { top: var(--header-h); border-radius: 0; box-shadow: none; z-index: 5; }
  .cma__rail { margin-inline: var(--gutter); }
  .cma__drop { top: 0.75rem; }
  .cma__formats { display: none; }
}
@media (max-width: 480px) {
  .cma__shine span { display: none; }
  .cma__viewbar button { padding-inline: 0.55rem; font-size: 0.8rem; }
  .cma__shine { padding-inline: 0.5rem !important; }
  .cma__dl-more { grid-template-columns: 1fr; }
  .cma__line { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .cma__gl .cst-layer, .cma__upload { transition: none; }
  .cma__spinner { animation-duration: 2.4s; }
}

/* ---------- place-your-design dialog ---------- */
.ctf { margin: auto; width: min(1180px, 96vw); height: min(900px, 94vh); max-width: none; max-height: none; padding: 0; color: var(--ink); background: var(--bg-elevated); border: 0; border-radius: 18px; box-shadow: 0 40px 120px -30px rgba(5, 11, 20, 0.7); overflow: hidden; }
.ctf::backdrop { background: rgba(5, 11, 20, 0.66); backdrop-filter: blur(3px); }
.ctf__panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; height: 100%; }
.ctf__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem 0.85rem; border-bottom: 1px solid var(--surface-line); }
.ctf__head h2 { font-size: 1.2rem; line-height: 1.2; }
.ctf__note { margin-block-start: 0.2rem; color: var(--text-muted); font-size: 0.88rem; }
.ctf__x { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; color: var(--slate); border-radius: 9px; }
.ctf__x:hover { color: var(--ink); background: var(--paper-2); }
.ctf__x:focus-visible { outline: 2px solid var(--focus-ring); }
.ctf__stage { position: relative; min-height: 0; background: #232c38; }
.ctf__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.ctf__stage canvas.is-dragging { cursor: grabbing; }
.ctf__stage canvas:focus-visible { outline: 3px solid var(--sky); outline-offset: -3px; }
.ctf__legend { position: absolute; left: 0.85rem; bottom: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; margin: 0; padding: 0.4rem 0.7rem; list-style: none; color: #e9f2f8; font-size: 0.76rem; border-radius: 9px; background: rgba(9, 16, 26, 0.7); pointer-events: none; }
.ctf__legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
.ctf__key { display: inline-block; width: 18px; height: 10px; }
.ctf__key--trim { border: 1.6px solid #ffffff; border-radius: 3px; }
.ctf__key--cut { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0 1px, rgba(12, 18, 28, 0.6) 1px 4px); border: 1px solid rgba(255, 120, 120, 0.7); }
.ctf__key--safe { border: 1.4px dashed #7eaaff; border-radius: 2px; }
.ctf__tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1.5rem; padding: 0.85rem 1.25rem; border-top: 1px solid var(--surface-line); }
.ctf__row { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.ctf__row--wrap { flex-wrap: wrap; }
.ctf__row input[type='range'] { flex: 1; min-width: 6rem; accent-color: var(--blueprint); }
.ctf__label { min-width: 3.1rem; color: var(--text-muted); font-size: 0.84rem; font-weight: 600; }
.ctf__out { min-width: 2.8rem; color: var(--text-faint); font-size: 0.82rem; font-variant-numeric: tabular-nums; text-align: right; }
.ctf__icon { display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--ink); font-size: 1.1rem; font-weight: 700; border: 1px solid var(--surface-line); border-radius: 8px; }
.ctf__icon:hover, .ctf__chip:hover { border-color: var(--accent); background: var(--wash-2); }
.ctf__chip { min-height: 2rem; padding: 0.25rem 0.7rem; color: var(--ink); font-size: 0.82rem; font-weight: 600; border: 1px solid var(--surface-line); border-radius: 8px; background: var(--bg); white-space: nowrap; }
.ctf__icon:focus-visible, .ctf__chip:focus-visible, .ctf__seg button:focus-visible, .ctf__sw:focus-visible, .ctf__sw:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.ctf__seg { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--surface-line); }
.ctf__seg button { min-height: 1.9rem; padding: 0.2rem 0.7rem; color: var(--slate); font-size: 0.82rem; font-weight: 600; border-radius: 7px; }
.ctf__seg button[aria-pressed='true'] { color: var(--ink); background: #fff; box-shadow: 0 1px 3px rgba(14, 27, 44, 0.16); }
.ctf__swatches { display: inline-flex; align-items: center; gap: 0.35rem; }
.ctf__swatches .ctf__label { min-width: 0; margin-inline-end: 0.2rem; }
.ctf__sw { position: relative; width: 1.65rem; height: 1.65rem; border-radius: 50%; background: var(--sw, #fff); box-shadow: inset 0 0 0 1px rgba(14, 27, 44, 0.25); }
.ctf__sw[aria-pressed='true'] { box-shadow: inset 0 0 0 1px rgba(14, 27, 44, 0.25), 0 0 0 2px var(--bg-elevated), 0 0 0 4px var(--blueprint); }
.ctf__sw--pick { overflow: hidden; background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); cursor: pointer; }
.ctf__sw--pick input { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); opacity: 0; cursor: pointer; }
.ctf__check { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text-muted); font-size: 0.84rem; cursor: pointer; }
.ctf__check input { accent-color: var(--blueprint); }
.ctf__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 1.25rem; border-top: 1px solid var(--surface-line); background: var(--bg); }
.ctf__status { color: var(--text-muted); font-size: 0.86rem; line-height: 1.45; }
.ctf__status b { font-weight: 700; font-variant-numeric: tabular-nums; }
.ctf__ok { color: #166534; } .ctf__fine { color: #1f6f3a; } .ctf__warn { color: #9a5a00; } .ctf__bad { color: #b42318; }
.ctf__actions { display: flex; gap: 0.5rem; flex: none; }

@media (max-width: 760px) {
  .ctf { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .ctf__tools { grid-template-columns: 1fr; gap: 0.5rem; padding: 0.7rem 1rem; max-height: 38dvh; overflow: auto; }
  .ctf__head { padding: 0.75rem 1rem 0.65rem; }
  .ctf__note { display: none; }
  .ctf__foot { flex-wrap: wrap; padding: 0.65rem 1rem; }
  .ctf__status { flex: 1 1 100%; font-size: 0.8rem; }
  .ctf__actions { flex: 1 1 100%; }
  .ctf__actions .btn { flex: 1; justify-content: center; }
  .ctf__legend { font-size: 0.7rem; gap: 0.25rem 0.7rem; }
}

/* ---------- the back of the card ---------- */
/* ---------- foil and spot UV painter (a .ctf dialog) ---------- */
.cte__stage canvas { cursor: crosshair; }
.cte__zoom { position: absolute; right: 0.75rem; bottom: 0.75rem; display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(9, 16, 26, 0.74); }
.cte__zoom button { min-width: 2.1rem; min-height: 2.1rem; padding: 0 0.55rem; color: #e9f2f8; font-size: 0.86rem; font-weight: 700; border-radius: 7px; }
.cte__zoom button:hover { background: rgba(255, 255, 255, 0.12); }
.cte__zoom button:focus-visible { outline: 2px solid var(--sky); outline-offset: 1px; }
.cte__end { color: var(--text-faint); font-size: 0.76rem; }
.cte__only { white-space: nowrap; }
.cte [data-for='pick'] input[type='range'] { flex: 1 1 7rem; }
.cte__foils { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }
.cte__foil-name { color: var(--text-muted); font-size: 0.84rem; font-weight: 600; }
.cte__hint { color: var(--text-muted); font-size: 0.84rem; line-height: 1.45; }
.cte__warn { color: #9a5a00; }
.cte__warn a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cte .ctf__chip:disabled { opacity: 0.45; cursor: default; }
.cte .ctf__chip:disabled:hover { border-color: var(--surface-line); background: var(--bg); }

.ctb { margin: auto; width: min(640px, 94vw); padding: 0; color: var(--ink); background: var(--bg-elevated); border: 0; border-radius: 18px; box-shadow: 0 40px 120px -30px rgba(5, 11, 20, 0.7); }
.ctb::backdrop { background: rgba(5, 11, 20, 0.62); }
.ctb__panel { padding: 1.4rem 1.5rem 1.25rem; }
.ctb h2 { font-size: 1.3rem; }
.ctb p { margin-block-start: 0.35rem; color: var(--text-muted); font-size: 0.92rem; }
.ctb__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin-block-start: 1.1rem; }
.ctb__opt { position: relative; display: grid; gap: 0.15rem; padding: 0.85rem 1rem; text-align: left; border: 1px solid var(--surface-line); border-radius: 12px; background: var(--bg); cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); }
.ctb__opt:hover, .ctb__opt:focus-within { border-color: var(--accent); background: var(--wash-2); }
.ctb__opt:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.ctb__opt b { font-family: var(--font-display); font-size: 0.98rem; }
.ctb__opt span { color: var(--text-faint); font-size: 0.82rem; }
.ctb__opt--colour input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ctb__foot { display: flex; justify-content: flex-end; margin-block-start: 1rem; }
@media (max-width: 520px) { .ctb__grid { grid-template-columns: 1fr; } }

/* ---------- CR80 template & artwork checker ---------- */
.cck { position: relative; padding-block: clamp(0.5rem, 1.5vw, 1rem) clamp(2rem, 4vw, 3rem); }
.cck__grid { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: clamp(1rem, 2vw, 1.5rem); align-items: start; }
.cck__benchwrap { position: sticky; top: calc(var(--header-h) + 0.75rem); display: grid; gap: 0.6rem; min-width: 0; }
.cck__benchbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.cck__tabs, .cck__seg { display: inline-flex; padding: 2px; border-radius: 10px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--surface-line); }
.cck__tabs button, .cck__seg button { min-height: 2.1rem; padding: 0.25rem 0.7rem; color: var(--slate); font-size: 0.86rem; font-weight: 600; border-radius: 8px; white-space: nowrap; }
.cck__tabs button[aria-pressed='true'], .cck__seg button[aria-pressed='true'] { color: var(--ink); background: #fff; box-shadow: 0 1px 3px rgba(14, 27, 44, 0.16), inset 0 0 0 1px rgba(14, 27, 44, 0.06); }
.cck__tabs button:focus-visible, .cck__seg button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.cck__toggle { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--text-muted); font-size: 0.86rem; cursor: pointer; }
.cck__toggle input, .cck__checksrow input, .cck__mini input { width: 1rem; height: 1rem; accent-color: var(--blueprint); }
.cck__adjust { display: inline-flex; align-items: center; gap: 0.35rem; margin-inline-start: auto; min-height: 2.1rem; padding: 0.25rem 0.75rem; color: var(--accent-strong); font-size: 0.84rem; font-weight: 600; border: 1px solid var(--surface-line); border-radius: 9px; background: var(--bg-elevated); }
.cck__adjust:hover { border-color: var(--accent); }
.cck__adjust:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.cck:not(.has-art) .cck__adjust { display: none; }
.cck__bench { position: relative; height: clamp(360px, 58vh, 640px); border: 1px solid var(--surface-line); border-radius: var(--r-media); overflow: hidden; background: #f1ede4; }
.cck__bench canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cck__empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 0.6rem; pointer-events: none; }
.cck__empty > * { pointer-events: auto; }
.cck__empty p { padding: 0.15rem 0.6rem; color: var(--text-muted); font-size: 0.86rem; border-radius: 6px; background: rgba(250, 249, 246, 0.86); }
.cck.has-art .cck__empty { display: none; }
.cck__upload { display: grid; grid-template-columns: auto 1fr; column-gap: 0.85rem; align-items: center; padding: 1rem 1.3rem; color: var(--ink); text-align: left; background: #fff; border: 1px solid var(--surface-line); border-radius: 14px; box-shadow: var(--shadow-3); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast); }
.cck__upload:hover { transform: translateY(-2px); box-shadow: var(--shadow-4); }
.cck__upload:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.cck__upload svg { grid-row: 1 / span 2; color: var(--blueprint); }
.cck__upload-main { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; }
.cck__upload-sub { color: var(--slate); font-size: 0.84rem; }
.cck__dropzone { position: absolute; inset: 0.75rem; display: none; place-items: center; border: 2px dashed var(--blueprint); border-radius: 14px; background: rgba(26, 60, 52, 0.1); color: var(--accent-strong); font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; pointer-events: none; }
.cck.is-dropping .cck__dropzone { display: grid; }
.cck__layers { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.cck__layers button { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.65rem 0.25rem 0.45rem; color: var(--text-faint); font-size: 0.78rem; font-weight: 600; border: 1px solid var(--surface-line); border-radius: var(--r-pill); background: var(--bg); }
.cck__layers button::before { content: ''; width: 10px; height: 10px; border: 1.5px solid var(--lc); border-radius: 3px; }
.cck__layers button[aria-pressed='true'] { color: var(--ink); background: var(--bg-elevated); }
.cck__layers button[aria-pressed='true']::before { background: var(--lc); }
.cck__layers button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.cck__status { min-height: 1.3em; color: var(--text-muted); font-size: 0.86rem; }
.cck__status[data-tone='ok'] { color: #166534; }
.cck__status[data-tone='warn'] { color: #9a5a00; }
.cck__status[data-tone='bad'] { color: #b42318; }

.cck__panel { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; border: 1px solid var(--surface-line); border-radius: var(--r-card); background: var(--bg-elevated); box-shadow: var(--shadow-1); }
.cck__block { padding: 1.05rem 1.15rem 1.15rem; border-top: 1px solid var(--surface-line); }
.cck__block:first-child { border-top: 0; }
.cck__h { margin-block-end: 0.7rem; font-family: var(--font-display); font-size: 0.98rem; font-weight: 700; }
.cck__files { display: grid; gap: 0.35rem; margin-block-end: 0.8rem; }
.cck__files > div { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; font-size: 0.84rem; }
.cck__files span { color: var(--text-faint); font-weight: 600; }
.cck__files b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cck__files button { color: var(--accent-strong); font-size: 0.82rem; font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 3px; }
.cck__summary p { color: var(--text-muted); font-size: 0.86rem; }
.cck__summary ul { margin-block-start: 0.35rem; padding-inline-start: 1.1rem; color: var(--text-muted); font-size: 0.84rem; line-height: 1.6; }
.cck__checks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.cck__check { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) auto; align-items: start; gap: 0.55rem; padding: 0.55rem 0.6rem; border-radius: 10px; background: var(--bg); cursor: pointer; }
.cck__check b { display: block; font-size: 0.86rem; line-height: 1.35; }
.cck__check span:not(.cck__mark) { display: block; margin-block-start: 0.15rem; color: var(--text-muted); font-size: 0.8rem; line-height: 1.45; }
.cck__mark { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; color: #fff; font-size: 0.78rem; font-weight: 800; border-radius: 50%; }
.cck__check--pass .cck__mark { background: #1f8a4c; }
.cck__check--warn .cck__mark { background: #c27803; }
.cck__check--fail .cck__mark { background: #c8322d; }
.cck__check--info .cck__mark { background: var(--slate-2); }
.cck__check--warn { background: #fff7e8; }
.cck__check--fail { background: #fff0ef; }
.cck__check button { padding: 0.15rem 0.5rem; color: var(--accent-strong); font-size: 0.76rem; font-weight: 700; border: 1px solid var(--surface-line); border-radius: 7px; background: #fff; }
.cck__check button:focus-visible { outline: 2px solid var(--focus-ring); }
.cck__presets { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-block-end: 0.75rem; }
.cck__presets button { padding: 0.3rem 0.7rem; color: var(--ink); font-size: 0.82rem; font-weight: 600; border: 1px solid var(--surface-line); border-radius: var(--r-pill); background: var(--bg); }
.cck__presets button:hover, .cck__presets button[aria-pressed='true'] { color: var(--accent-strong); border-color: var(--accent); background: var(--wash-2); }
.cck__presets button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.cck__line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.75rem; margin-block-start: 0.55rem; }
.cck__sub { padding-inline-start: 0.75rem; }
.cck__label { color: var(--text-muted); font-size: 0.86rem; font-weight: 600; }
.cck__checksrow { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-block-start: 0.75rem; color: var(--text-muted); font-size: 0.84rem; }
.cck__checksrow label, .cck__mini { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.cck select { min-height: 2.15rem; max-width: 14rem; padding: 0.3rem 0.5rem; color: var(--ink); font-size: 0.82rem; background: var(--bg-elevated); border: 1px solid var(--surface-line); border-radius: 9px; }
.cck select:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.cck__dl-main { width: 100%; justify-content: center; gap: 0.5rem; }
.cck__mini { margin-block: 0.45rem 0.2rem; color: var(--text-muted); font-size: 0.82rem; }
.cck__dl, .cck__to3d { display: flex; align-items: center; gap: 0.45rem; width: 100%; min-height: 2.4rem; margin-block-start: 0.45rem; padding: 0.35rem 0.7rem; color: var(--ink); font-size: 0.84rem; font-weight: 600; text-align: left; border: 1px solid var(--surface-line); border-radius: 9px; background: var(--bg); }
.cck__line .cck__dl { flex: 1 1 auto; width: auto; margin: 0; white-space: nowrap; }
.cck__line [data-dpi] { flex: 0 1 11rem; min-width: 0; }
.cck__dl:hover, .cck__to3d:hover { border-color: var(--accent); background: var(--wash-2); }
.cck__dl:disabled, .cck__dl-main:disabled { opacity: 0.6; cursor: progress; }
.cck__dl svg, .cck__to3d svg { flex: none; color: var(--accent-strong); }
.cck__to3d { margin-block-start: 0.75rem; color: var(--accent-strong); }
.cck__dl:focus-visible, .cck__to3d:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }

@media (max-width: 1080px) { .cck__grid { grid-template-columns: minmax(0, 1fr) 21.5rem; } }
@media (max-width: 900px) {
  .cck__grid { grid-template-columns: 1fr; }
  .cck__benchwrap { position: static; }
  .cck__bench { height: min(62vw, 26rem); min-height: 250px; }
}
@media (max-width: 480px) {
  .cck__line { flex-wrap: wrap; }
  .cck__adjust { margin-inline-start: 0; }
}

/* ---------- tool page sections ---------- */
.tp-split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: start; }
.tp-split__head h2 { font-size: var(--step-3); line-height: 1.12; }
.tp-split__head .lede { margin-block-start: 0.8rem; }
.tp-prose { max-width: 68ch; color: var(--text); line-height: 1.7; }
.tp-prose > * + * { margin-block-start: 1em; }
.tp-prose a, .tp-more a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.tp-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.tp-steps li { position: relative; padding: 1rem 0 1rem 3rem; border-top: 1px solid var(--surface-line); counter-increment: step; }
.tp-steps li:last-child { border-bottom: 1px solid var(--surface-line); }
.tp-steps li::before { content: counter(step); position: absolute; left: 0; top: 1rem; display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--accent-strong); font-family: var(--font-display); font-weight: 700; border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--surface-line)); border-radius: 50%; }
.tp-steps h3 { font-size: var(--step-1); }
.tp-steps p { margin-block-start: 0.3rem; color: var(--text-muted); }
.tp-h2 { font-size: var(--step-3); line-height: 1.12; max-width: 30ch; }
.tp-lede { margin-block: 0.7rem 1.6rem; }
.tp-uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.tp-use { padding: 1.2rem 1.25rem 1.3rem; border: 1px solid var(--surface-line); border-radius: var(--r-card); background: var(--bg-elevated); }
.tp-use svg { color: var(--accent); }
.tp-use h3 { margin-block: 0.55rem 0.35rem; font-size: var(--step-0); }
.tp-use p { color: var(--text-muted); font-size: var(--step--1); line-height: 1.6; }
.tp-prose table, .tp-table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.tp-prose caption, .tp-table caption { caption-side: bottom; padding-block-start: 0.6rem; color: var(--text-muted); font-size: 0.8rem; text-align: left; }
.tp-prose th, .tp-prose td, .tp-table th, .tp-table td { padding: 0.6rem 0.75rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--surface-line); }
.tp-prose thead th, .tp-table thead th { color: var(--text-muted); font-family: var(--font-mono); font-weight: 600; background: var(--bg-subtle); }
.tp-prose tbody th, .tp-table tbody th { font-family: var(--font-display); font-weight: 600; }
.tp-nowrap tbody th { white-space: nowrap; }
.tp-prose td, .tp-table td { font-variant-numeric: tabular-nums; }
.tp-table { min-width: 38rem; }
.tp-prose .scroll-x, .scroll-x:has(> .tp-table) {
  --cover: var(--bg);
  background:
    linear-gradient(to right, var(--cover) 30%, transparent) left center / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--cover) 30%, transparent) right center / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(14 27 44 / 0.2), transparent) left center / 0.9rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(14 27 44 / 0.2), transparent) right center / 0.9rem 100% no-repeat scroll;
}
.surface-subtle .tp-prose .scroll-x, .surface-subtle .scroll-x:has(> .tp-table) { --cover: var(--bg-subtle); }
.tp-fig { margin-block-start: clamp(1.75rem, 4vw, 2.75rem); }
.tp-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-block: 2rem 1.25rem; }
.tp-more { margin-block-start: 1.25rem; color: var(--text-muted); }
.tp-code { overflow-x: auto; padding: 0.9rem 1rem; color: var(--ink); font: 0.85rem/1.5 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; white-space: pre-wrap; word-break: normal; overflow-wrap: anywhere; border: 1px solid var(--surface-line); border-radius: 10px; background: var(--bg-subtle); }
.tp-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.tp-links a { display: grid; align-content: start; gap: 0.25rem; height: 100%; padding: 1rem 1.1rem; border: 1px solid var(--surface-line); border-radius: var(--r-card); background: var(--bg-elevated); transition: border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
.tp-links a:hover { border-color: var(--accent); transform: translateY(-2px); }
.tp-links a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.tp-links b { color: var(--accent-strong); font-family: var(--font-display); }
.tp-links span { color: var(--text-muted); font-size: var(--step--1); }
[data-scheme='ink'] .tp-prose { color: var(--text-muted); }
@media (max-width: 960px) {
  .tp-split { grid-template-columns: 1fr; }
  .tp-uses, .tp-links { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .tp-uses, .tp-links, .tp-figs { grid-template-columns: 1fr; }
}

/* ---------- touch screens: 44 px targets (last, so they win over the base rules above) ---------- */
@media (pointer: coarse) {
  .cma__seg button, .cck__seg button, .cma__swatches button, .cma__fx-add, .ctf__seg button, .ctf__chip, .ctf__icon,
  .cte__zoom button, .cck__tabs button, .cck__presets button, .cck__layers button, .cck__files button, .cck__checks button,
  .cma__samples button { min-height: 2.75rem; }
  .ctf__icon, .cte__zoom button { min-width: 2.75rem; }
  .ctf__sw { width: 2.25rem; height: 2.25rem; }
  .cma__ticks { height: 2.25rem; }
  .cma__ticks button { width: 2.1rem; height: 2.25rem; }
}
@media (max-width: 480px) {
  .cck__upload { max-width: 15rem; }
  .cck__line [data-dpi] { flex-basis: 100%; }
}

/* ---- PrintPlast layout and polish overrides (independent design review, 2026-10-26) ---- */
/* One typeface with the page around the tools. */
:where(.cck, .cma, .cst, .ctb, .cte, .ctf) { --font-display: var(--font-sans); --font-mono: var(--font-sans); }

/* Phone and tablet: the tools share the page's 16px edge, and the sticky stage sits flush under the 64px header. */
@media (max-width: 900px) {
  :where(.cck, .cma) { --gutter: 1rem; --header-h: 4rem; }
  .cma__stage { top: 4rem; }
}
@media (max-width: 480px) { .cma { --stage-h: min(46vh, 24rem); } .cma__upload-main { white-space: nowrap; } }

/* The upload button on the 3D stage is a single-line pill; the formats note lives in the rail. */
.cma__drop { width: auto; }
.cma__design .cma__formats { margin: 0.75rem 0 0; color: var(--text-muted); font-size: 0.82rem; line-height: 1.45; text-shadow: none; }

/* Checker on phones: the template stays clear; the upload button sits below it. */
.cck__upload-below { display: none; }
@media (max-width: 480px) {
  .cck__empty { display: none; }
  .cck__upload-below {
    display: flex; width: 100%; min-height: 48px; margin-block-start: 0.6rem; align-items: center; justify-content: center; gap: 0.5rem;
    border: 0; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font: 650 0.95rem/1.2 var(--font-display); cursor: pointer;
  }
  .cck__upload-below:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
  .cck.has-art .cck__upload-below { border: 1px solid var(--hairline-strong); background: var(--bg-elevated); color: var(--ink); }
}
.cck__upload-below .when-art, .cck.has-art .cck__upload-below .when-empty { display: none; }
.cck.has-art .cck__upload-below .when-art { display: inline; }

/* Settings rows share one left edge: the label above its control in the narrow desktop rail and on phones,
   a label column only between 481 and 900px where the panel is full width. */
.cck__line:has(> .cck__label), .cma__line:has(> .cma__label) {
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 0.35rem 0.75rem;
}
@media (min-width: 481px) and (max-width: 900px) {
  .cck__line:has(> .cck__label), .cma__line:has(> .cma__label) { grid-template-columns: 8rem minmax(0, 1fr); }
  .cck__checksrow { padding-inline-start: calc(8rem + 0.75rem); }
}
.cck__line:has(> .cck__label) > :not(.cck__label), .cma__line:has(> .cma__label) > :not(.cma__label) { justify-self: stretch; min-width: 0; }
.cck__seg, .cma__seg { display: flex; }
.cck__seg > button, .cma__seg > button { flex: 1 1 0; min-width: 0; padding-inline: 0.5rem; }
.cck select { width: 100%; max-width: none; }
.cck__checksrow { display: grid; grid-template-columns: 1fr 1fr; }
.cck__checksrow label { align-items: flex-start; }
.cck__checksrow input { margin-top: 0.15em; flex: none; }

.cck__summary ul { list-style: disc; }

@media (pointer: coarse) {
  .cck__toggle, .cck__checksrow label, .cck__mini, .cma__viewbar button, [data-fx-remove] { min-height: 44px; }
}

/* Match the established RFID site typography; every selector stays inside the tool. */
:where(.cma,.ctb,.cte,.ctf) {--font-display:Inter,system-ui,sans-serif;--font-mono:Inter,system-ui,sans-serif;--header-h:112px;--gutter:clamp(1rem,3vw,2rem);--r-media:8px;--r-card:6px;--r-pill:5px}
.cma h2,.ctf h2,.ctb h2{font-size:1.25rem;letter-spacing:-.025em;line-height:1.3}
.cma__grid{max-width:1400px}.cma input[type=range]{min-height:28px}.cma__thumb-name{overflow-wrap:anywhere}.ctf__panel,.ctb__panel{min-width:0}
@media(max-width:900px){.cma__stage{position:relative;top:auto}}
@media(max-width:600px){.cma__upload-main{font-size:.88rem}.cma__viewbar{gap:.25rem}.cma__views button{font-size:.7rem;padding:.5rem}.cma__rail{min-width:0}.cma__line{gap:.6rem}.cma__seg{flex-wrap:wrap}.cma__gu{font-size:.7rem}}