/* LinkyHoop Digitizing - light gray pages with navy accents, and the logo's coral for small stitched details.
   The header, the home page's closing call and its footer are navy bands: they redefine the color tokens below for
   themselves (a light-on-navy set), so everything inside them just uses the same names. */
:root {
  --bg: #e9edf2;               /* the page */
  --surface: #ffffff;         /* panels and cards */
  --raise: #f0f3f7;            /* hover fills, inset bands, switches that are off */
  --field: #ffffff;            /* the inside of inputs and picker tiles */
  --line: #d3d9e2;
  --line-strong: #a9b4c4;
  --text: #262a33;
  --heading: #1a2750;          /* navy */
  --muted: #566174;
  --accent: #1a2750;           /* navy: links, focus, sliders, the selected tile */
  --cta: #1a2750;              /* the button for "do the thing" */
  --cta-hover: #2c3b73;
  --on-cta: #ffffff;
  --stitch: #d9534a;           /* coral: small stitched details - the dashed seams between hoopings, the slider's divider */
  --select-bg: #1a2750;        /* a chosen segment or pill */
  --select-text: #ffffff;
  --tile-on: #e8ecf8;
  --ok: #1f5c39;
  --warn: #8a5a06;
  --bad: #b8433b;
  --edge: rgba(26, 39, 80, 0.35);   /* the thin outline round a swatch of thread or fabric */
  --frame-w: 30px;
  --shell: 1440px;             /* the widest the page content (and the header above it) gets */

  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-ui: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* A running stitch: 7px of thread, 4px of gap. */
  --seam: repeating-linear-gradient(90deg, var(--line-strong) 0 7px, transparent 7px 11px);
}

/* The navy bands: the header, the home page's closing call, and its footer. */
.site-header, .closing, .home-foot {
  --bg: #1a2750;
  --surface: #22336a;
  --raise: #2a3f7e;
  --field: #16224a;
  --line: #34478a;
  --line-strong: #5468ad;
  --text: #f3f6fc;
  --heading: #ffffff;
  --muted: #b3c0e2;
  --accent: #5fd9e3;
  --cta: #ff7b66;
  --cta-hover: #ff9484;
  --on-cta: #1a2750;
  --stitch: #ff7b66;
  --select-bg: #f3f6fc;
  --select-text: #1a2750;
  color: var(--text);
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; scroll-padding-top: 88px; }
body.landing, body.page { --shell: 1320px; }
body {
  margin: 0;
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(26, 39, 80, 0.07), transparent 62%),
    var(--bg);
  color: var(--text);
  font: 400 15px/1.5 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
h1, h2 { margin: 0; font-family: var(--font-display); color: var(--heading); letter-spacing: -0.01em; }
p { margin: 0; }
[hidden] { display: none !important; }
::selection { background: rgba(26, 39, 80, 0.22); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ───────── Header: the logo on the left, the pages as buttons beside it ───────── */
.site-header {
  position: relative; z-index: 100;
  display: flex; align-items: center; gap: 8px 28px;
  min-height: 72px; padding: 0 max(24px, calc((100% - var(--shell) + 48px) / 2));
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.site-header::before {                       /* a thin stripe in the logo's own coral and teal */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, #ff7b66, #37d1dc);
}
.banner { flex: none; }
.banner-logo { display: block; line-height: 0; }
.banner-logo img { display: block; height: 46px; width: auto; }
.site-nav { flex: 1 1 auto; min-width: 0; }
.nav-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.nav-btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; list-style: none;
  padding: 9px 16px; border-radius: 999px; border: 1.5px solid transparent;
  background: transparent; color: var(--muted); text-decoration: none;
  font: 600 0.92rem/1.1 var(--font-ui);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.nav-btn:hover, .nav-more[open] > summary { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.nav-btn[aria-current="page"], .nav-more:has([aria-current="page"]) > summary { background: rgba(255, 255, 255, 0.13); color: #fff; }
.nav-inner > #guide-btn { margin-left: auto; }
.nav-reset { border-color: var(--line-strong); color: var(--text); }
.nav-reset:hover { border-color: var(--text); }
.nav-more { position: relative; }
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more-list {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 210px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 22px 44px -16px rgba(10, 18, 48, 0.55);
}
.nav-more-list a {
  display: block; padding: 10px 14px; border-radius: 9px; color: var(--text); text-decoration: none;
  font: 600 0.92rem/1.2 var(--font-ui);
}
.nav-more-list a:hover, .nav-more-list a:focus-visible { background: var(--raise); }
.nav-more-list a[aria-current="page"] { color: var(--accent); background: var(--raise); }
/* "Open the studio", at the right of the bar on the pages that aren't the studio. */
.header-cta {
  flex: none; margin-left: auto; padding: 10px 20px; border-radius: 999px;
  background: var(--cta); color: var(--on-cta); text-decoration: none;
  font: 700 0.92rem/1.1 var(--font-ui); transition: background 0.15s;
}
.header-cta:hover { background: var(--cta-hover); }
/* "My designs": only shown (menu.js) when the site can email a sign-in link. */
.header-link {
  flex: none; padding: 9px 14px; border-radius: 999px; color: var(--muted); text-decoration: none;
  font: 600 0.92rem/1.1 var(--font-ui); transition: background 0.15s, color 0.15s;
}
.header-link:hover, .header-link[aria-current="page"] { background: rgba(255, 255, 255, 0.1); color: #fff; }
.header-link:not([hidden]) { margin-left: auto; }
.header-link:not([hidden]) + .header-cta { margin-left: 0; }

/* ───────── Footer ───────── */
.foot {
  max-width: 1440px;
  margin: 48px auto 0;
  padding: 28px 24px 40px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  position: relative;
}
.foot::before {
  content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 2px;
  background: var(--seam);
}
.foot-logo { display: block; height: 42px; width: auto; opacity: 0.95; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; font: 600 0.85rem/1.4 var(--font-ui); }
.foot-links a { color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.foot-support { font-size: 0.88rem; color: var(--muted); }
.foot-support a { color: var(--accent); font-weight: 600; }
.tips-link { margin-top: 18px; font-size: 0.85rem; color: var(--muted); }
.tips-link a { color: var(--accent); text-underline-offset: 2px; }
.tips-link a:hover { color: var(--text); }
.link-btn {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  font: inherit; color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
}
.link-btn:hover { color: var(--text); }

/* ───────── First-visit guide: a full-screen takeover, shown before anything else ───────── */
.intro-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
  background: rgba(4, 8, 22, 0.78);
  backdrop-filter: blur(3px);
}
.intro-card {
  position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  padding: 34px 30px 28px;
  box-shadow: 0 30px 70px -20px rgba(10, 18, 48, 0.5);
}
.intro-close {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); background: var(--raise); color: var(--muted);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.intro-close:hover { color: var(--text); border-color: var(--text); }
.intro-logo { display: block; height: 54px; width: auto; margin: 0 auto 18px; }
#intro-title { text-align: center; font-size: 1.5rem; margin-bottom: 10px; }
.intro-lead { text-align: center; color: var(--muted); font-size: 0.95rem; line-height: 1.5; margin: 0 auto 22px; max-width: 440px; }
.intro-choices { display: flex; flex-direction: column; gap: 10px; }
.intro-choice { width: 100%; text-align: center; padding: 14px 18px; }

.intro-progress {
  text-align: center; font: 600 0.75rem/1 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 6px;
}
#intro-question:focus { outline: none; }   /* focused by script only, to move screen-reader focus to the new question */
#intro-question h2 { text-align: center; font-size: 1.2rem; margin-bottom: 6px; }
#intro-question .intro-hint { text-align: center; color: var(--muted); font-size: 0.88rem; line-height: 1.5; margin-bottom: 16px; }
.intro-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 6px;
}
.intro-options.intro-options-wide { grid-template-columns: 1fr; }
.intro-option {
  display: block; width: 100%; text-align: left; padding: 12px 16px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--field);
  font: 600 0.9rem/1.3 var(--font-ui); color: var(--text);
  transition: border-color 0.12s, background 0.12s;
}
.intro-option .intro-option-sub { display: block; font-weight: 500; font-size: 0.8rem; color: var(--muted); margin-top: 2px; }
.intro-option:hover { border-color: var(--line-strong); }
.intro-option[aria-pressed="true"] { border-color: var(--accent); background: var(--tile-on); }
.intro-note {
  margin-top: 4px; padding: 10px 14px; background: var(--raise); border-radius: 10px;
  font-size: 0.85rem; color: var(--text); line-height: 1.5;
}
.intro-nav { display: flex; align-items: center; gap: 8px; margin-top: 20px; }
.intro-nav #intro-back { visibility: hidden; }
.intro-nav #intro-next { margin-left: auto; }

.intro-upload {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: 26px 18px; border: 1.5px dashed var(--line-strong); border-radius: 14px; background: var(--raise);
}
.intro-upload-thumb { width: 64px; height: 64px; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid var(--line); }
.intro-upload-status { font-size: 0.88rem; color: var(--text); line-height: 1.5; min-height: 1.3em; }
.intro-upload-status.is-busy { color: var(--accent); }
.intro-upload-status.is-busy::after { content: "…"; }

@media (max-width: 520px) {
  .intro-card { padding: 26px 18px 22px; border-radius: 16px; }
  .intro-options { grid-template-columns: 1fr; }
}

/* ───────── Layout ───────── */
.studio {
  display: grid;
  grid-template-columns: minmax(300px, 356px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  max-width: 1440px;
  margin: 0 auto;
  padding: 22px 24px 48px;
}

/* ───────── Controls ───────── */
.controls {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 8px 20px 26px;
}
/* Each section opens with its title centred in a running stitch, so the line belongs to the title - it never runs
   into the controls above it - and every section starts after the same open space. */
.group { position: relative; padding-top: 32px; }
.controls > .group:first-child { padding-top: 16px; }
.group > h2, .group > summary h2, .size-head h2 {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-bottom: 14px; text-align: center;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.group > h2::before, .group > h2::after, .group > summary h2::before, .group > summary h2::after,
.size-head h2::before, .size-head h2::after {
  content: ""; flex: 1 1 0; min-width: 14px; height: 2px;
  background: var(--seam);
}
.group .group { padding-top: 26px; }
.group .group > h2 { font-size: 0.72rem; color: var(--muted); }
.size-head { margin-bottom: 0; }
.size-head h2 { margin-bottom: 12px; }
.size-head .units { justify-content: center; margin-bottom: 14px; }
.units { display: flex; flex-wrap: wrap; gap: 6px; }
.units label { position: relative; display: block; }
.units input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.units span {
  display: block; padding: 5px 11px;
  border: 1.5px solid var(--line); border-radius: 999px; background: var(--field);
  font-size: 0.8rem; font-weight: 500;
}
.units label:hover span { border-color: var(--line-strong); }
.units input:checked + span { background: var(--select-bg); border-color: var(--select-bg); color: var(--select-text); }
.units input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.tune summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; }
.tune summary::-webkit-details-marker { display: none; }
.tune summary h2 { flex: 1; margin-bottom: 0; }
.tune summary::before { content: ""; width: 9px; flex: none; }          /* balances the arrow, so the title is truly centred */
.tune summary::after {
  content: ""; flex: none;
  width: 9px; height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s;
}
.tune[open] summary { margin-bottom: 14px; }
.tune[open] summary::after { transform: rotate(-135deg); }

.hint { color: var(--muted); font-size: 0.85rem; margin-top: 8px; line-height: 1.4; }
.note { color: var(--muted); font-size: 0.85rem; margin-top: 12px; }

/* Artwork */
.artwork { display: flex; align-items: center; gap: 14px; }
.artwork-thumb {
  width: 56px; height: 56px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--raise);
}

/* Hover (or focus) over a small preview thumbnail to see the whole picture much larger. The thumbnail itself is
   what enlarges - object-fit switches from a cropped square to the full image - so nothing else on the page has
   to move, and it self-positions clear of the viewport edge. */
.thumb-zoom { position: relative; display: inline-block; line-height: 0; flex: none; }
.thumb-zoom:hover, .thumb-zoom:focus-within { z-index: 80; }
.thumb-zoom .artwork-thumb, .thumb-zoom .simplify-img {
  transition: opacity 0.1s ease;
  cursor: zoom-in;
}
.thumb-zoom:hover .artwork-thumb, .thumb-zoom:focus-within .artwork-thumb,
.thumb-zoom:hover .simplify-img, .thumb-zoom:focus-within .simplify-img {
  position: absolute; top: 0; left: 0;
  width: min(70vw, 420px); height: min(70vh, 420px);
  object-fit: contain; background: #fff;
  border: 2px solid var(--accent); border-radius: 14px;
  box-shadow: 0 22px 44px -18px rgba(26, 39, 80, 0.45);
  cursor: zoom-out;
}
@media (max-width: 620px) {
  .thumb-zoom:hover .artwork-thumb, .thumb-zoom:focus-within .artwork-thumb,
  .thumb-zoom:hover .simplify-img, .thumb-zoom:focus-within .simplify-img {
    width: min(88vw, 340px); height: min(88vh, 340px);
  }
}
.artwork-text { min-width: 0; }
.artwork-name {
  font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 200px;
  margin-bottom: 4px;
}
.artwork-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Buttons */
.btn {
  font: 600 0.95rem/1 var(--font-ui);
  border-radius: 10px;
  padding: 12px 18px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.btn-primary { background: var(--cta); color: var(--on-cta); font-weight: 700; }
.btn-primary:hover:not(:disabled) { background: var(--cta-hover); }
.btn-primary:disabled { background: var(--raise); color: var(--muted); cursor: not-allowed; }
.btn-quiet { background: transparent; color: var(--text); border-color: var(--line-strong); padding: 8px 12px; font-size: 0.88rem; }
.btn-quiet:hover:not(:disabled) { border-color: var(--text); }
.btn-quiet:disabled { color: var(--muted); border-color: var(--line); cursor: not-allowed; }
.btn-choose { padding: 14px 22px; font-size: 1.05rem; }
.ai-star { margin-right: 5px; }
#download { width: 100%; margin-top: 16px; }
#sheet-btn { width: 100%; margin-top: 8px; }
#sheet-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.chart-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 2px 0 12px; }
.chart-pick label { font-size: 0.85rem; font-weight: 500; color: var(--muted); }
.chart-pick select { flex: 1 1 200px; min-width: 0; padding: 6px 8px; border-radius: 8px; font-size: 0.85rem; }
.thread-match { display: block; margin-top: 1px; font-size: 0.76rem; line-height: 1.3; color: var(--muted); }
.match-line { display: block; }
.match-line.grade-exact, .match-line.grade-close { color: var(--ok); }
.match-line.grade-similar { color: var(--muted); }
.match-line.grade-nearest { color: var(--warn); }

/* Segmented radio */
.segmented { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--field); }
.segmented label { position: relative; display: block; }
.segmented input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.segmented span {
  display: flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 6px 6px;
  text-align: center; font-size: 0.85rem; font-weight: 500; line-height: 1.25;
  border-left: 1.5px solid var(--line);
  transition: background 0.12s;
}
.segmented label:hover span { background: var(--raise); }
.segmented label:nth-child(odd) span { border-left: 0; }
.segmented label:nth-child(n+3) span { border-top: 1.5px solid var(--line); }
.segmented input:checked + span { background: var(--select-bg); color: var(--select-text); font-weight: 600; }
.segmented input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: -3px; }

/* Sliders */
.field { display: grid; grid-template-columns: 1fr auto; align-items: baseline; row-gap: 2px; margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
.field label { font-weight: 500; font-size: 0.9rem; }
.field output { font: 500 0.85rem var(--font-mono); color: var(--accent); }
.field input[type="range"], .field select, .field .hint { grid-column: 1 / -1; }
.width-entry { display: flex; align-items: baseline; gap: 6px; }
.width-entry input {
  width: 88px; padding: 5px 8px;
  font: 500 0.88rem var(--font-mono); color: var(--text); text-align: right;
  border: 1.5px solid var(--line); border-radius: 8px; background: var(--field);
}
.width-entry input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26, 39, 80, 0.15); }
.width-entry span { color: var(--muted); font-size: 0.85rem; min-width: 1.6em; }
.colors-entry input { width: 64px; }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 26px; margin: 0;
  background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 7px, transparent 7px 11px);
}
input[type="range"]::-moz-range-track {
  height: 4px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 7px, transparent 7px 11px);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px; margin-top: -8px; border-radius: 50%;
  background: var(--accent); border: 4px solid var(--surface); box-shadow: 0 0 0 1.5px var(--accent);
}
input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); border: 4px solid var(--surface); box-shadow: 0 0 0 1.5px var(--accent);
}
input[type="range"].range-solid::-webkit-slider-runnable-track { background: var(--accent); }
input[type="range"].range-solid::-moz-range-track { background: var(--accent); }
input[type="range"]:focus-visible { outline-offset: 4px; }

select, input[type="text"], input[type="number"] {
  width: 100%;
  font: 500 0.92rem var(--font-ui);
  color: var(--text);
  background: var(--field);
  border: 1.5px solid var(--line);
  border-radius: 9px;
  padding: 9px 10px;
}
select:hover, input[type="text"]:hover, input[type="number"]:hover { border-color: var(--line-strong); }
select:focus-visible, input[type="text"]:focus-visible, input[type="number"]:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26, 39, 80, 0.15); }
.field-spaced { margin-top: 16px; }

/* Hoop picker: each tile draws the hoop to scale, so the sizes read at a glance. */
.hoops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hoop-tile { position: relative; display: block; }
.hoop-tile input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.hoop-body {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  height: 100%; padding: 8px 4px 9px;
  border: 1.5px solid var(--line); border-radius: 10px; background: var(--field);
  text-align: center;
  transition: border-color 0.12s, background 0.12s;
}
.hoop-shape { display: flex; align-items: center; justify-content: center; height: 46px; }
.hoop-shape i { display: block; border: 1.5px solid var(--line-strong); border-radius: 3px; background: var(--raise); }
.hoop-shape i.is-custom { border-style: dashed; background: transparent; }
.hoop-name { font: 500 0.8rem var(--font-mono); color: var(--text); }
.hoop-mm { font-size: 0.72rem; color: var(--muted); line-height: 1.2; }
.hoop-tile:hover .hoop-body { border-color: var(--line-strong); }
.hoop-tile input:checked + .hoop-body { border-color: var(--accent); background: var(--tile-on); box-shadow: inset 0 0 0 1px var(--accent); }
.hoop-tile input:checked + .hoop-body i { background: var(--accent); border-color: var(--accent); }
.hoop-tile input:checked + .hoop-body i.is-custom { background: transparent; }
.hoop-tile input:focus-visible + .hoop-body { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Too big for the chosen machine on both sides - can't be clamped in or slid along it. Still pickable
   (cursor stays a normal pointer), just asks for confirmation first - see hoopPicked(). */
.hoop-tile.is-unfit .hoop-body { opacity: 0.38; }
.hoop-tile.is-unfit:hover .hoop-body { border-color: var(--line); }

.subhead { margin: 16px 0 8px; font-weight: 600; font-size: 0.85rem; color: var(--muted); }
.hoop-shape i { position: relative; }
/* Dashed seams show where a multi-position design is split between hoopings. */
.hoop-shape i b { position: absolute; left: -1px; right: -1px; height: 0; border-top: 1.5px dashed var(--stitch); }
.hoop-shape i b.v { top: -1px; bottom: -1px; right: auto; width: 0; height: auto; border-top: 0; border-left: 1.5px dashed var(--stitch); }
.hoop-tile input:checked + .hoop-body i b { border-top-color: #fff; }
.hoop-tile input:checked + .hoop-body i b.v { border-top: 0; border-left-color: #fff; }

.custom-hoop { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 12px; font-size: 0.88rem; }
.custom-hoop label { font-weight: 500; }
.custom-hoop input { width: 78px; padding: 7px 8px; font: 500 0.9rem var(--font-mono); }

/* Multi-position hooping */
.positions { border: 0; padding: 0; margin: 18px 0 0; min-width: 0; }
.positions legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: 0.9rem; }
.pos-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.pos-name { flex: none; width: 54px; font-size: 0.88rem; color: var(--muted); }
.pos-row label { position: relative; display: block; }
.pos-row input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pos-row label span {
  display: grid; place-items: center; width: 40px; height: 34px;
  border: 1.5px solid var(--line); border-radius: 8px; background: var(--field);
  font: 500 0.9rem var(--font-mono);
}
.pos-row label:hover span { border-color: var(--line-strong); }
.pos-row input:checked + span { background: var(--select-bg); border-color: var(--select-bg); color: var(--select-text); }
.pos-row input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.field-text { margin-top: 14px; margin-bottom: 0; }
.field-text input { grid-column: 1 / -1; }

.check { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 0.9rem; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }

/* Formats */
.formats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fmt { position: relative; display: block; }
.fmt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.fmt-body {
  display: block;
  height: 100%;
  padding: 9px 11px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--field);
  transition: border-color 0.12s, background 0.12s;
}
.fmt-ext { display: block; font: 500 0.95rem var(--font-mono); color: var(--text); letter-spacing: 0.02em; }
.fmt-machines { display: block; font-size: 0.78rem; color: var(--muted); line-height: 1.3; margin-top: 2px; }
.fmt:hover .fmt-body { border-color: var(--line-strong); }
.fmt input:checked + .fmt-body { border-color: var(--accent); background: var(--tile-on); box-shadow: inset 0 0 0 1px var(--accent); }
.fmt input:focus-visible + .fmt-body { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ───────── Stage ───────── */
.stage { min-width: 0; }
/* On a wide screen the design stays in view while the options on the left scroll past it. The panel is capped
   at the window's height and scrolls inside itself, so the thread list and stats below the preview are still
   reachable; on a narrow screen everything stacks, and the design stays at the top of the page instead. */
@media (min-width: 921px) {
  .stage {
    position: sticky;
    top: 12px;
    align-self: start;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 4px 18px;          /* room for the preview's shadow, which the scroll area would otherwise clip */
    scrollbar-width: thin;
  }
}
.stage-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 12px; }
.fit-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; flex: 1 1 260px; min-width: 0; }
.fit { font-size: 0.88rem; color: var(--muted); min-width: 0; }
.btn-small { padding: 6px 10px; font-size: 0.82rem; }
.bar-label { font-size: 0.85rem; font-weight: 500; color: var(--muted); }
.fabric-pick { display: flex; align-items: center; gap: 10px; margin-left: auto; max-width: 100%; }
.zoom-pick { display: flex; align-items: center; gap: 6px; }
.zoom-btn { width: 30px; height: 30px; padding: 0; font-size: 1.05rem; line-height: 1; display: grid; place-items: center; }
.zoom-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.zoom-level { min-width: 4ch; text-align: center; font: 500 0.85rem var(--font-mono); color: var(--text); }
.fit[data-state="ok"] { color: var(--ok); }
.fit[data-state="tight"] { color: var(--warn); }
.fit[data-state="over"] { color: var(--bad); font-weight: 600; }

.fabrics { display: flex; flex-wrap: wrap; gap: 7px; }
.fabric { position: relative; display: block; width: 24px; height: 24px; }
.fabric input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.fabric span {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  border: 1.5px solid var(--edge);
  transition: box-shadow 0.12s;
}
.fabric input:checked + span { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.fabric input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 4px; }

/* Canvas and empty state share one grid cell, so the hoop always grows to fit its content. */
/* Zoomed in, the hoop grows past this box and scrolls inside it instead of pushing the rest of the
   page around; at the normal fit-to-frame zoom it never actually needs to scroll. */
.hoop-viewport { width: 100%; overflow: auto; border-radius: 22px; }
.hoop { position: relative; display: grid; width: 100%; margin: 0 auto; border-radius: 22px; }
.hoop > canvas { grid-area: 1 / 1; align-self: start; display: block; border-radius: 22px; box-shadow: 0 0 0 1px var(--line), 0 22px 48px -18px rgba(26, 39, 80, 0.45); }

.empty {
  grid-area: 1 / 1;
  display: grid; place-items: center;
  padding: calc(var(--frame-w) + 14px);
}
.empty-patch {
  width: min(100%, 560px);
  padding: 30px 24px 26px;
  text-align: center;
  border: 2.5px dashed rgba(184, 67, 59, 0.75);
  border-radius: 18px;
  background: rgba(250, 251, 252, 0.9);
  backdrop-filter: blur(3px);
  transition: background 0.15s, border-color 0.15s;
}
.empty-patch.is-over { background: #fff; border-color: #b8433b; }
.empty h1 { font-size: clamp(1.4rem, 3.2vw, 2rem); font-weight: 800; font-variation-settings: "opsz" 60; letter-spacing: -0.025em; line-height: 1.1; }
.empty p { color: var(--muted); margin: 10px auto 18px; max-width: 40ch; font-size: 0.92rem; }
.samples { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 18px; font-size: 0.88rem; color: var(--muted); }
.chip {
  font: 500 0.85rem var(--font-ui);
  color: var(--heading);
  background: var(--field);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
}
.chip:hover { border-color: var(--accent); }

.describe { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.describe > span { display: block; font-size: 0.88rem; color: var(--muted); margin-bottom: 8px; }
.describe-input { display: flex; gap: 8px; }
.describe-input input {
  flex: 1; min-width: 0;
  font: 500 0.9rem var(--font-ui);
  padding: 8px 12px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--field);
}
.describe-input input:focus { outline: none; border-color: var(--accent); }
.describe-hint { margin-top: 8px; font-size: 0.82rem; color: var(--bad); }

.busy {
  position: absolute; top: calc(var(--frame-w) + 12px); right: calc(var(--frame-w) + 12px);
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  font-size: 0.88rem; font-weight: 500;
  box-shadow: 0 6px 16px -8px rgba(31, 43, 84, 0.5);
}
.needle {
  width: 34px; height: 3px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, #b8433b 0 7px, transparent 7px 11px);
  background-size: 11px 3px;
  animation: sew 0.5s linear infinite;
}
@keyframes sew { to { background-position: 11px 0; } }

/* The messages over the bottom of the hoop stack in one box, so two at once (a failure and the offer of Clip Art AI) never sit on top of each other. */
.alerts {
  position: absolute; left: calc(var(--frame-w) + 12px); right: calc(var(--frame-w) + 12px); bottom: calc(var(--frame-w) + 12px);
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.alerts > * { pointer-events: auto; }
.alert {
  padding: 12px 16px;
  background: #fff4f2; border: 1.5px solid #b8433b; border-radius: 12px;
  color: #7c2620; font-weight: 500; font-size: 0.92rem;
}
.alert-success { background: #eef7f0; border-color: #2e7d4f; color: #1f5c39; }
/* Something worth knowing that doesn't stop the design (an SVG with live text, say): amber, and it stays until dismissed. */
.alert-note { display: flex; align-items: flex-start; gap: 12px; background: #fff8e8; border-color: #d99a1e; color: #6b4a06; font-weight: 450; }
.alert-note span { flex: 1; white-space: pre-line; line-height: 1.4; }
.alert-offer { align-items: center; flex-wrap: wrap; }
.alert-offer .btn { flex: none; }
.note-close { flex: none; border: 0; background: transparent; color: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 2px; }
.note-close:hover { color: #b8433b; }

/* Playback */
.playback { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.play {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cta); border: 0; cursor: pointer; color: var(--on-cta);
}
.play svg { fill: currentColor; }
.play:hover { background: var(--cta-hover); }
#scrub { flex: 1; min-width: 80px; }
.count { flex: none; font: 500 0.85rem var(--font-mono); color: var(--text); min-width: 12ch; text-align: right; }
.check-inline { margin-top: 0; }
/* "Show jumps" sits inline next to the playback scrubber and should stay on one line there; the
   background-remover checkbox reuses this same class for its own long label, which does need to
   wrap on narrow screens - so nowrap is scoped to the specific row that wants it, not the class. */
#playback .check-inline { white-space: nowrap; }

/* Stats */
.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  margin: 18px 0 0; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
}
.stats dt { font-size: 0.78rem; color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
.stats dd { margin: 2px 0 0; font: 500 1.15rem var(--font-mono); color: var(--text); }

/* Which hooping to look at */
.view-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 12px; }
.views { display: flex; flex-wrap: wrap; gap: 6px; }
.views label { position: relative; display: block; }
.views input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.views span {
  display: block; padding: 6px 13px;
  border: 1.5px solid var(--line); border-radius: 999px; background: var(--field);
  font-size: 0.85rem; font-weight: 500;
}
.views label:hover span { border-color: var(--line-strong); }
.views input:checked + span { background: var(--select-bg); border-color: var(--select-bg); color: var(--select-text); }
.views input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Quick colour-only preview, shown for Simple Photo ahead of the full stitch render */
.simplify {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 14px; padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
}
.simplify-img {
  flex: none; width: 84px; height: 84px; object-fit: contain;
  border-radius: 10px; border: 1px solid var(--line);
  background: repeating-conic-gradient(#e3e7ee 0% 25%, #fff 0% 50%) 0 0 / 12px 12px;
}
.simplify-text { min-width: 0; }
.simplify-label { font-weight: 600; font-size: 0.88rem; color: var(--heading); margin-bottom: 3px; }
.simplify .hint { margin-top: 0; }

/* Preview on a product */
.product-preview { margin-top: 18px; }
.product-preview .bar-label { display: block; margin-bottom: 8px; }
.product-preview .views { margin-bottom: 14px; }
.product-mockup {
  position: relative; width: 100%; max-width: 320px; aspect-ratio: 1; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
}
.product-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.product-body { fill: var(--product-color, #e3e7ee); stroke: #1f2b54; stroke-width: 2.5; stroke-linejoin: round; }
.product-rib { fill: none; stroke: #1f2b54; stroke-width: 1.5; opacity: 0.45; }
.product-button { fill: #1f2b54; opacity: 0.55; }
/* left/top/width/height are set from JS (renderDesignForPreview) - the design's own real mm size against
   the garment's calibrated scale, not a fixed box, so a small chest logo actually looks small. */
.product-design-canvas { position: absolute; }

/* Hoopings */
.hoopings { margin-top: 18px; }
.hoopings h2 { font-size: 1.02rem; font-weight: 700; margin-bottom: 10px; }
.hoopings ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.hoopings li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
}
.hooping-num {
  flex: none; width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--select-bg); color: var(--select-text); font: 500 0.95rem var(--font-mono);
}
.hooping-info { flex: 1; min-width: 0; line-height: 1.3; }
.hooping-title { font-weight: 600; font-size: 0.9rem; }
.machine-pick { margin-top: 12px; }
.machine-pick label { display: block; font-size: 0.86rem; font-weight: 600; margin-bottom: 6px; }
.machine-pick select {
  width: 100%; padding: 8px 10px;
  font: 500 0.88rem var(--font-ui);
  border-radius: 10px;
}
.hooping-meta { font-size: 0.78rem; color: var(--muted); }
.hooping-warn {
  margin-top: 12px; padding: 10px 14px;
  background: rgba(217, 83, 74, 0.08); border: 1.5px solid var(--stitch); border-radius: 12px;
  color: #7c2620; font-size: 0.86rem; font-weight: 500; line-height: 1.4;
}

/* Threads */
.threads { margin-top: 18px; }
.threads-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.threads-head h2 { font-size: 1.02rem; font-weight: 700; }
.threads ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.threads li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
}
/* The spool is a real color-picker button: a native <input type=color>, invisible and stretched over
   the visible swatch, so clicking anywhere on the circle opens the browser's own color picker. */
.spool {
  position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--edge);
  display: grid; place-items: center;
  font: 500 0.8rem var(--font-mono);
  cursor: pointer;
  transition: box-shadow 0.12s;
}
.spool::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); pointer-events: none; }
.spool:hover, .spool:focus-within { box-shadow: 0 0 0 3px rgba(26, 39, 80, 0.25); }
.spool-num { position: relative; pointer-events: none; }
.spool input[type="color"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; border: 0; padding: 0; margin: 0; cursor: pointer;
}
.thread-info { line-height: 1.25; }
.thread-hex { font: 500 0.82rem var(--font-mono); color: var(--text); }
.thread-count { font-size: 0.78rem; color: var(--muted); }

/* Excluding a thread dims its whole chip; the switch stays legible so it's obvious how to bring it back. */
.threads li.is-excluded { background: transparent; border-style: dashed; }
.threads li.is-excluded .spool, .threads li.is-excluded .thread-info { opacity: 0.35; }

.thread-toggle { position: relative; flex: none; display: block; width: 34px; height: 20px; margin-left: 2px; }
.thread-toggle input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.thread-toggle-track {
  display: block; width: 100%; height: 100%; border-radius: 999px;
  background: var(--raise); border: 1px solid var(--line-strong);
  transition: background 0.15s;
}
.thread-toggle-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--line-strong); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s, background 0.15s;
}
.thread-toggle input:checked + .thread-toggle-track { background: var(--accent); border-color: var(--accent); }
.thread-toggle input:checked + .thread-toggle-track::after { transform: translateX(14px); background: #fff; }
.thread-toggle input:focus-visible + .thread-toggle-track { outline: 3px solid var(--accent); outline-offset: 2px; }

/* A color's separate pieces: the pill becomes a full-width card when opened, instead of trying to fit a whole
   sub-list inside what's normally a compact chip. */
.threads li:has(.parts) { flex-basis: 100%; flex-direction: column; align-items: stretch; border-radius: 14px; }
.thread-expand {
  align-self: flex-start; margin-left: 44px; padding: 3px 10px;
  border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--field);
  color: var(--text); font: 600 0.76rem/1.3 var(--font-ui); cursor: pointer;
}
.thread-expand:hover { border-color: var(--accent); }
.thread-expand[aria-expanded="true"] { background: var(--raise); }
.parts { list-style: none; margin: 8px 0 0 44px; padding: 10px 12px; display: flex; flex-direction: column; gap: 7px;
        background: var(--raise); border-radius: 10px; }
.part-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.part-label { font-size: 0.85rem; color: var(--text); }
.part-row.is-excluded .part-label { color: var(--muted); text-decoration: line-through; }
.thread-toggle-small { width: 30px; height: 18px; }
.thread-toggle-small .thread-toggle-track::after { width: 12px; height: 12px; }
.thread-toggle-small input:checked + .thread-toggle-track::after { transform: translateX(12px); }

/* ───────── Narrow screens ───────── */
@media (max-width: 920px) {
  .studio { grid-template-columns: minmax(0, 1fr); padding: 14px 16px 40px; gap: 18px; }
  .stage { order: -1; }
  .fabric-pick { margin-left: 0; }
}
@media (max-width: 620px) {
  :root { --frame-w: 22px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .playback { flex-wrap: wrap; }
  #scrub { order: 3; flex-basis: 100%; }
  .count { margin-left: auto; }
  .empty { padding: calc(var(--frame-w) + 8px); }
  .empty-patch { padding: 16px 12px 14px; }
  .empty h1 { font-size: 1.3rem; }
  .empty p { display: none; }  /* file types and size limit are enforced, with clear errors, on upload */
  .empty .btn { padding: 11px 16px; margin-top: 12px; }
  .samples { margin-top: 12px; gap: 6px; font-size: 0.8rem; }
  .chip { font-size: 0.78rem; padding: 5px 9px; }
  .describe { margin-top: 14px; padding-top: 12px; }
  .describe-input { flex-wrap: wrap; }
  .describe-input input { flex-basis: 100%; }
  .busy { top: calc(var(--frame-w) + 8px); right: calc(var(--frame-w) + 8px); }
}

/* "Your design is saved": what a customer sees after paying, and when they come back with their link. */
.purchase {
  margin-bottom: 16px; padding: 18px 20px 16px;
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--ok); border-radius: 14px;
}
.purchase-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.purchase-head h2 { font-size: 1.15rem; font-weight: 700; }
.purchase-head h2:focus { outline: none; }          /* focused by script only, to tell a screen reader what appeared */
.purchase-lead { margin-top: 6px; line-height: 1.5; }
.purchase-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin-top: 14px; }
.purchase-format { display: grid; gap: 4px; font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.purchase-format select { width: auto; min-width: 200px; max-width: 100%; }
.purchase-actions .btn { padding: 11px 18px; }
.purchase-error { margin-top: 10px; padding: 9px 12px; border: 1.5px solid var(--bad); border-radius: 10px; background: rgba(184, 67, 59, 0.07); color: #7c2620; font-size: 0.9rem; }
.purchase-link { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.purchase-link label { display: block; margin-bottom: 6px; font-size: 0.85rem; font-weight: 600; }
.purchase-link-row { display: flex; gap: 8px; }
.purchase-link-row input { flex: 1; min-width: 0; font: 500 0.82rem var(--font-mono); }

@media (prefers-reduced-motion: reduce) {
  .needle { animation: none; }
  * { transition: none !important; }
}

/* With "My designs" showing there is one more thing in the bar, so it wraps (as on a phone) from a wider screen. */
@media (max-width: 1020px) {
  .site-header:has(.header-link:not([hidden])) { flex-wrap: wrap; justify-content: space-between; min-height: 0; padding-block: 12px 8px; }
  .site-header:has(.header-link:not([hidden])) .site-nav { order: 3; flex: 1 0 100%; }
}

/* The bar on a phone: logo and the studio button on one row, the page buttons wrapped underneath. */
@media (max-width: 760px) {
  .site-header { flex-wrap: wrap; justify-content: space-between; min-height: 0; padding: 12px 16px 8px; }
  .banner-logo img { height: 38px; }
  .header-cta { padding: 9px 16px; }
  .site-nav { order: 3; flex: 1 0 100%; }
  .nav-inner { justify-content: center; gap: 2px; }
  .nav-btn { padding: 8px 12px; font-size: 0.86rem; }
  .nav-inner > #guide-btn { margin-left: 0; }
  .nav-more-list { left: auto; right: 0; }
}

/* ───────── Typed words and monograms (lettering.js) ───────── */
.lettering {
  width: min(1020px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; border: 0; border-radius: 18px;
  background: var(--surface); color: var(--text); box-shadow: 0 24px 80px rgba(10, 18, 48, 0.45); overflow: hidden;
}
.lettering[open] { display: flex; flex-direction: column; }
.lettering::backdrop { background: rgba(10, 18, 48, 0.62); }
.lt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px 10px; }
.lt-head h2 { font-size: 1.25rem; }
.lt-close {
  flex: none; width: 40px; height: 40px; padding: 0 0 2px; border: 1.5px solid var(--line-strong); border-radius: 50%;
  background: var(--field); color: var(--heading); font: 400 1.6rem/1 var(--font-ui); cursor: pointer;
}
.lt-close:hover { border-color: var(--text); }
.lt-close:focus-visible, .lt-tabs [role="tab"]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.lt-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 22px 14px; border-bottom: 1px solid var(--line); }
.lt-tabs [role="tab"] {
  padding: 8px 18px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--field);
  color: var(--text); font: 600 0.92rem var(--font-ui); cursor: pointer;
}
.lt-tabs [role="tab"][aria-selected="true"] { background: var(--select-bg); border-color: var(--select-bg); color: var(--select-text); }
.lt-body {
  display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 24px;
  flex: 1; min-height: 0; padding: 4px 22px 18px; overflow: auto;
}
.lt-controls { min-width: 0; }
.lt-label { margin: 18px 0 7px; font-size: 0.86rem; font-weight: 600; }
.lt-controls > :first-child > .lt-label:first-child { margin-top: 12px; }
.lt-hint { margin-top: 6px; color: var(--muted); font-size: 0.82rem; line-height: 1.4; }
.lt-controls textarea {
  display: block; width: 100%; resize: none; padding: 9px 10px; font: 500 1rem var(--font-ui); color: var(--text);
  background: var(--field); border: 1.5px solid var(--line); border-radius: 9px;
}
.lt-controls textarea:hover { border-color: var(--line-strong); }
.lt-controls textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26, 39, 80, 0.15); }
#lt-letters { font-size: 1.1rem; letter-spacing: 0.12em; text-transform: uppercase; }

.lt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lt-chip { position: relative; display: block; }
.lt-chip input, .lt-font input, .lt-swatch input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.lt-chip span {
  display: block; padding: 6px 12px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--field);
  font-size: 0.84rem; font-weight: 500;
}
.lt-chip:hover span { border-color: var(--line-strong); }
.lt-chip input:checked + span { background: var(--select-bg); border-color: var(--select-bg); color: var(--select-text); }
.lt-chip input:disabled { cursor: not-allowed; }
.lt-chip input:disabled + span { color: var(--muted); border-style: dashed; opacity: 0.7; }
.lt-chip input:focus-visible + span, .lt-font input:focus-visible ~ .lt-font-sample { outline: 3px solid var(--accent); outline-offset: 2px; }

.lt-fonts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lt-font {
  position: relative; display: grid; gap: 2px; padding: 8px 10px 7px; min-width: 0;
  border: 1.5px solid var(--line); border-radius: 10px; background: var(--field);
}
.lt-font:hover { border-color: var(--line-strong); }
.lt-font:has(input:checked) { border-color: var(--accent); background: var(--tile-on); box-shadow: 0 0 0 1.5px var(--accent); }
.lt-font-sample { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 1.45rem; line-height: 1.3; color: var(--heading); }
.lt-font-name { color: var(--muted); font-size: 0.74rem; }

.lt-swatches { display: flex; flex-wrap: wrap; gap: 9px; }
.lt-swatch { position: relative; width: 28px; height: 28px; }
.lt-swatch span { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--edge); }
.lt-swatch .lt-none { background: linear-gradient(135deg, #fff 45%, var(--bad) 45% 55%, #fff 55%); }
.lt-swatch input:checked + span { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4.5px var(--accent); }
.lt-swatch input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 4px; }

.lt-preview { min-width: 0; display: grid; align-content: start; gap: 10px; padding-top: 12px; }
.lt-paper {
  display: grid; place-items: center; min-height: 300px; padding: 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
}
.lt-paper canvas { display: block; max-width: 100%; max-height: 54vh; width: auto; height: auto; }
.lt-note { color: var(--muted); font-size: 0.86rem; line-height: 1.45; }
.lt-note.is-warning { color: #7c2620; }
.lt-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px 18px; border-top: 1px solid var(--line); }
.lt-foot .btn { padding: 11px 20px; }
@media (max-width: 760px) {
  .lettering { width: calc(100vw - 16px); max-height: calc(100vh - 16px); border-radius: 14px; }
  .lt-body { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 4px 16px 14px; }
  .lt-preview { order: -1; padding-top: 4px; }
  .lt-paper { min-height: 150px; padding: 10px; }
  .lt-paper canvas { max-height: 30vh; }
  .lt-head { padding: 14px 16px 8px; }
  .lt-tabs { padding: 0 16px 12px; }
  .lt-foot { padding: 12px 16px 14px; }
}