/* Technical layer: type system, themes in use, tours, panels, editor and the landing page.
   Loaded after styles.css, so these rules win. */

/* ── Type: expanded grotesk for display, mono for anything measured ── */
.screen-title, .modal-head h2, .card h2, .review-title h1, .price, .size-big, .cost-big,
.tpl-card.big .tpl-name, .tryon-controls .screen-title {
  font-family: var(--display); font-weight: 750; font-stretch: 112%; letter-spacing: -0.02em;
}
.field-label, .sel-label, .eyebrow, .stage-hint, .band-map-head, .size-alt, .slider-head output, .step-n,
.tpl-meta, .spec-sheet dt, .sel-count, .stepper output, .tryon-badge, .hint kbd, kbd, .rail-tabs button, .mat-process,
.price-lines li span:last-child, .file-list li span:nth-child(2), .format-name {
  font-family: var(--mono);
}
.field-label, .sel-label { letter-spacing: 0.08em; }
.slider-head output { font-size: 12.5px; }
.rail-tabs button { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.logo { font-family: var(--display); font-weight: 800; font-stretch: 118%; letter-spacing: -0.02em; text-transform: uppercase; font-size: 16px; }
.logo-dash { color: var(--accent-ink); }
body { background: var(--bg); transition: background 0.2s; }
.ed-tile { fill: var(--surface); }
.band-map .band-zone.active .zone-hit { fill: color-mix(in srgb, var(--accent) 14%, transparent); }
.band-map .band-zone.clickable:hover .zone-hit { fill: color-mix(in srgb, var(--accent) 22%, transparent); }
.lib-tile.used, .tpl-card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.toast-action { color: color-mix(in srgb, var(--accent) 55%, #fff); }

/* ── Theme picker & help menu ── */
.theme-dots { display: flex; gap: 5px; padding: 4px 5px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); }
.theme-dot {
  width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 0;
  background: linear-gradient(135deg, var(--swbg) 0 48%, var(--sw) 52% 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}
.theme-dot.on { outline: 2px solid var(--ink); outline-offset: 2px; }
.help-menu { position: relative; }
.menu { position: absolute; right: 0; top: 44px; z-index: 40; min-width: 230px; display: grid; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); }
.menu button { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border: 0; background: none; border-radius: 8px; text-align: left; font-size: 14px; }
.menu button:hover, .menu button:focus-visible { background: var(--surface-2); }
.topbar { background: var(--bg); }

/* ── Stage: drafting-table grid and registration marks ── */
.stage {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 42%, var(--stage-a) 0%, var(--stage-b) 100%);
  background-size: 24px 24px, 24px 24px, auto;
}
.reg { position: absolute; width: 14px; height: 14px; border: 0 solid var(--ink-3); opacity: 0.55; pointer-events: none; z-index: 1; }
.reg.tl { top: 6px; left: 6px; border-top-width: 1px; border-left-width: 1px; }
.reg.tr { top: 6px; right: 6px; border-top-width: 1px; border-right-width: 1px; }
.reg.bl { bottom: 6px; left: 6px; border-bottom-width: 1px; border-left-width: 1px; }
.reg.br { bottom: 6px; right: 6px; border-bottom-width: 1px; border-right-width: 1px; }
.stage-hint { top: 16px; left: 26px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.stage-tools { top: 14px; right: 24px; }
.stage-card { background: color-mix(in srgb, var(--surface) 78%, transparent); border-color: color-mix(in srgb, var(--surface) 60%, transparent); }
.sel-group { background: color-mix(in srgb, var(--surface) 85%, transparent); }
.band-map-wrap { background: color-mix(in srgb, var(--surface) 75%, transparent); }

/* Split handles on the band map */
.split-handle { cursor: row-resize; outline: none; }
.split-hit { fill: transparent; }
.split-line { stroke: var(--accent); stroke-width: 0.16; stroke-dasharray: 0.7 0.45; }
.split-grip { fill: var(--accent); stroke: var(--surface); stroke-width: 0.12; }
.split-handle:hover .split-grip, .split-handle:focus-visible .split-grip { fill: var(--accent-ink); }
.split-handle:focus-visible .split-line { stroke-width: 0.32; stroke-dasharray: none; }

/* ── Resizable / collapsible side panels ── */
@media (min-width: 1024px) { .studio { grid-template-columns: var(--studio-cols, 300px minmax(0, 1fr) 340px); } }
.rail-wrap { position: relative; display: flex; min-height: 0; min-width: 0; }
.rail-wrap > .rail { flex: 1; min-width: 0; }
.rail-resize { position: absolute; top: 0; bottom: 0; width: 10px; cursor: col-resize; z-index: 6; touch-action: none; }
.rail-resize.lib { right: -5px; }
.rail-resize.spec { left: -5px; }
.rail-resize::after { content: ''; position: absolute; top: 50%; left: 4px; width: 2px; height: 44px; border-radius: 2px; transform: translateY(-50%); background: var(--line-2); opacity: 0; transition: opacity 0.15s, background 0.15s; }
.rail-resize:hover::after, .rail-resize:focus-visible::after { opacity: 1; background: var(--accent); }
.rail-resize:focus-visible { outline: none; }
body.resizing, body.resizing * { cursor: col-resize !important; user-select: none; }
/* Category strips: one icon tab per category on the outer edge of each panel (Blender-style).
   With the panel hidden, the strip stays and any icon opens it on that category. */
.rail-strip { flex: none; width: 44px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; background: var(--surface-2); }
.rail-strip.lib { border-right: 1px solid var(--line); }
.rail-strip.spec { border-left: 1px solid var(--line); }
.rail-wrap.collapsed .rail-strip.spec { border-left-color: var(--line); }
.strip-tab { position: relative; width: 34px; height: 34px; border: 0; border-radius: var(--radius-md); background: none; color: var(--ink-3); display: grid; place-items: center; }
.strip-tab:hover { background: var(--surface); color: var(--ink); }
.strip-tab.on { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.strip-tab.on::before { content: ''; position: absolute; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--accent); }
.rail-strip.lib .strip-tab.on::before { left: -4px; }
.rail-strip.spec .strip-tab.on::before { right: -4px; } /* -5px poked past the screen edge and let the page scroll sideways */
.strip-label { display: none; }
.strip-badge { position: absolute; top: 0; right: 0; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 99px; font: 600 10px/15px var(--mono); color: #fff; background: var(--ink-2); text-align: center; }
.strip-badge.error { background: var(--error); }
.strip-badge.warn { background: var(--warn); }
.price-meta { display: flex; align-items: center; gap: 8px; }
.check-chip { display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 99px; padding: 2px 8px; font-size: 12px; font-weight: 600; }
.check-chip.ok { background: var(--ok-soft); color: var(--ok); }
.check-chip.warn { background: var(--warn-soft); color: var(--warn); }
.check-chip.error { background: var(--error-soft); color: var(--error); }
.check-chip:hover { filter: brightness(0.96); }
.mine-empty { margin-top: 12px; }
.size-find { margin-top: 10px; width: 100%; justify-content: center; }
.price-card > div { min-width: 0; }
.price-card .small { white-space: nowrap; }
.spec-sec:first-child { padding-top: 0; }
.rail-hide { border: 0; background: none; color: var(--ink-3); padding: 7px; border-radius: 8px; display: grid; place-items: center; margin-left: auto; }
.rail-hide:hover { background: var(--surface-2); color: var(--ink); }
.rail-title { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 16px; min-height: 47px; border-bottom: 1px solid var(--line); font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); }

/* Repeats input */
.repeat-row { flex-wrap: wrap; }
.repeat-row label { flex: 1; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.stepper input { width: 46px; text-align: center; border: 0; background: transparent; font: 600 13px var(--mono); padding: 4px 0; }
.stepper input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.link-btn.is-auto { color: var(--ink-3); font-weight: 500; font-size: 12px; }
.field-err { flex-basis: 100%; color: var(--error); font-size: 12px; }

/* ── Tour ── */
.tour { position: fixed; inset: 0; z-index: 90; }
.tour-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.tour-shade-fill { fill: rgba(12, 10, 8, 0.6); }
.tour-spot {
  position: fixed; border-radius: var(--radius-md); pointer-events: none;
  outline: 2px solid var(--accent);
  transition: top 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), left 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tour-underline { position: absolute; left: 10px; right: 10px; bottom: -10px; height: 3px; border-radius: 2px; background: var(--accent); transform-origin: left; animation: underline 0.5s 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes underline { from { transform: scaleX(0); } }
.tour-tick { position: absolute; width: 10px; height: 10px; border: 0 solid var(--accent); }
.tour-tick.tl { top: -7px; left: -7px; border-top-width: 2px; border-left-width: 2px; }
.tour-tick.tr { top: -7px; right: -7px; border-top-width: 2px; border-right-width: 2px; }
.tour-tick.bl { bottom: -7px; left: -7px; border-bottom-width: 2px; border-left-width: 2px; }
.tour-tick.br { bottom: -7px; right: -7px; border-bottom-width: 2px; border-right-width: 2px; }
.tour-card {
  position: fixed; width: min(370px, calc(100vw - 28px)); padding: 16px 18px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  transition: top 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), left 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tour-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.tour-count { font: 600 11px var(--mono); color: var(--accent-ink); letter-spacing: 0.06em; }
.tour-progress { display: flex; gap: 3px; flex: 1; }
.tour-progress span { flex: 1; height: 3px; border-radius: 2px; background: var(--surface-3); }
.tour-progress span.on { background: var(--accent); }
.tour-card h2 { font: 750 19px/1.2 var(--display); font-stretch: 112%; margin-bottom: 6px; }
.tour-card p { color: var(--ink-2); font-size: 14px; }
.tour-card kbd { font-size: 10.5px; }
.tour-more { font-size: 13px; color: var(--ink-3) !important; margin-top: 6px; }
.tour-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.muted-link { color: var(--ink-3); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .tour-spot, .tour-card { transition: none; } }

/* ── Tips ── */
.tip {
  position: fixed; left: 20px; bottom: 20px; z-index: 55; max-width: 390px;
  display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 12px;
  box-shadow: var(--shadow-lg); animation: pop 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tip-icon { color: var(--accent-ink); padding-top: 1px; }
.tip p { font-size: 13.5px; color: var(--ink); }
.tip-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 12px; align-items: center; }

/* ── Editor additions ── */
.tool { position: relative; }
.tool-key { position: absolute; top: 3px; right: 4px; font-size: 9px; padding: 1px 3px; border-bottom-width: 1px; opacity: 0.75; }
.tool.on .tool-key { background: transparent; color: inherit; border-color: rgba(255, 255, 255, 0.4); }
.tool.on { background: var(--ink); color: var(--bg); }
.ed-view { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 5px 8px; border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow); }
.ed-zoom { font: 600 12px var(--mono); min-width: 44px; text-align: center; }
.ed-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
.chip.sm { padding: 4px 10px; font-size: 12px; }
.ed-hint { font: 11px var(--mono); color: var(--ink-3); }
.ed-sel-count { font: 600 12px var(--mono); color: var(--accent-ink); }
.ed-bg-grid { fill: none; stroke: var(--grid-strong); stroke-width: 0.25; }
.ed-grid line { stroke: var(--line); stroke-width: 0.3; }
.ed-grid line.major { stroke: var(--line-2); stroke-width: 0.5; }
.ed-canvas { background: var(--surface-2); }
.ed-canvas.tool-move { cursor: move; }
.ed-stroke.sel { stroke: var(--accent); color: var(--accent); }
.ed-stroke.twin { stroke: var(--accent); color: var(--accent); opacity: 0.5; }
.ed-dims line { stroke: var(--ink-3); stroke-width: 0.35; }
.ed-dims text { font: 4px var(--mono); fill: var(--ink-3); text-anchor: middle; }
.ed-status { display: flex; gap: 18px; flex-wrap: wrap; padding: 0 4px; font: 12px var(--mono); color: var(--ink-3); }
.ed-props { grid-template-columns: 1.25fr 1fr 0.8fr; align-items: start; gap: 0 22px; }
.detail-note.info { background: var(--info-soft); color: var(--info); }
.ed-steady-head { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.ed-steady-head .field-label { margin: 0; }
.ed-ring {
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px), radial-gradient(ellipse at 50% 42%, var(--stage-a), var(--stage-b));
  background-size: 20px 20px, 20px 20px, auto;
}
.ed-tools { width: 100%; }

/* ── Review zoom ── */
.review-ring { position: relative; }
.review-zoom { position: absolute; right: 8px; top: 8px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.review-hero {
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px), radial-gradient(ellipse at 50% 35%, var(--stage-a), var(--stage-b));
  background-size: 24px 24px, 24px 24px, auto;
}
.review-ring .ring-view { cursor: grab; }

/* ── Size finder ── */
.sf-intro { color: var(--ink-2); font-size: 14px; }
.sf-step { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px; }
.sf-step.dim { opacity: 0.6; }
.sf-step-h { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.sf-step-n { font: 600 11px var(--mono); background: var(--ink); color: var(--bg); border-radius: 99px; padding: 2px 8px; }
.sf-step.done .sf-step-n { background: var(--ok); }
.sf-ref-wrap { display: grid; place-items: center; padding: 10px; background: var(--surface-2); border-radius: var(--radius-md); overflow: hidden; }
.sf-card { border: 2px solid var(--ink); border-radius: 3.2mm; position: relative; display: grid; place-items: center; font: 11px var(--mono); color: var(--ink-3); }
.sf-card::before { content: ''; position: absolute; left: 9%; top: 32%; width: 14%; height: 22%; border: 1.5px solid var(--ink-3); border-radius: 3px; }
.sf-ruler { position: relative; height: 34px; border: 2px solid var(--ink); border-top: 0; display: flex; align-items: flex-end; }
.sf-ruler i { position: absolute; bottom: 0; width: 1px; background: var(--ink); }
.sf-ruler span { position: absolute; top: -18px; font: 11px var(--mono); transform: translateX(-50%); }
.sf-system-help { display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); margin: 0; padding-left: 18px; }

/* ── Landing ── */
.lp { --gut: clamp(16px, 3vw, 44px); }
.lp-head {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px;
  padding: 12px var(--gut); border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.lp-nav { display: flex; gap: 2px; margin-left: auto; }
.lp-nav a { display: flex; gap: 7px; align-items: baseline; padding: 7px 11px; border-radius: 8px; text-decoration: none; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.lp-nav a span { font: 11px var(--mono); color: var(--accent-ink); }
.lp-nav a:hover { background: var(--surface-2); color: var(--ink); }

.lp-hero {
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr auto;
  column-gap: 20px; padding: 18px var(--gut) 30px; min-height: calc(100vh - 62px); overflow: hidden;
  border-bottom: 1px solid var(--line);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px;
}
.lp-word {
  grid-column: 1 / -1; grid-row: 1 / 3; align-self: start; margin: 0; position: relative; z-index: 1; pointer-events: none;
  display: flex; flex-direction: column;
  font-family: var(--display); font-weight: 850; font-stretch: 125%; text-transform: uppercase;
  font-size: clamp(70px, 15.5vw, 290px); line-height: 0.8; letter-spacing: -0.05em; color: var(--ink);
}
.lp-word-b { align-self: flex-end; color: transparent; -webkit-text-stroke: clamp(1.5px, 0.18vw, 3px) var(--ink); }
.lp-stage { grid-column: 4 / 13; grid-row: 1 / 4; position: relative; z-index: 2; min-height: min(80vh, 820px); margin-top: clamp(30px, 6vw, 110px); }
.lp-stage .reg { width: 20px; height: 20px; border-color: var(--accent); opacity: 0.9; }
.lp-ring { position: absolute; inset: 4% 12% 20% 12%; }
.lp-ring .ring-view { width: 100%; height: 100%; }
.lp-dims { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lp-dims line { stroke: var(--accent); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.lp-dim-label { position: absolute; font: 600 12px var(--mono); color: var(--accent-ink); background: var(--bg); padding: 1px 6px; }
.lp-dim-label.h { left: 50%; top: 88%; transform: translate(-50%, -50%); }
.lp-dim-label.v { left: 90%; top: 48%; transform: translate(-50%, -50%) rotate(90deg); }
.lp-arrow {
  position: absolute; top: 44%; z-index: 4; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); transform: translateY(-50%);
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
.lp-arrow:hover { background: var(--ink); color: var(--bg); }
.lp-arrow:active { transform: translateY(-50%) scale(0.95); }
.lp-arrow.prev { left: 1%; }
.lp-arrow.next { right: 1%; }

.title-block { display: grid; grid-template-columns: repeat(3, auto); margin: 0; border: solid var(--ink); border-width: 1px 0 0 1px; background: var(--surface); font: 12px var(--mono); }
.title-block > div { padding: 6px 10px 7px; border: solid var(--ink); border-width: 0 1px 1px 0; min-width: 0; }
.title-block dt { font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.title-block dd { margin: 0; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.title-block .tb-wide { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.title-block .tb-name { font: 800 20px/1.1 var(--display); font-stretch: 118%; text-transform: uppercase; letter-spacing: -0.01em; }
.lp-stage .title-block { position: absolute; right: 0; bottom: 0; min-width: 360px; z-index: 3; }

.lp-hero-foot { grid-column: 1 / 6; grid-row: 3; align-self: end; position: relative; z-index: 3; display: grid; gap: 18px; padding-top: 24px; }
.lp-lede { font-size: clamp(16px, 1.25vw, 19px); color: var(--ink-2); max-width: 44ch; }
.lp-inline-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.lp-inline-steps li { display: flex; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.lp-inline-steps span { font: 12px var(--mono); color: var(--accent-ink); min-width: 22px; padding-top: 1px; }
.lp-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
/* Hero keys: keyboard-key buttons. Hover lifts the key and lights it in the accent; pressing pushes it down. */
.key-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 22px; border-radius: var(--radius-md);
  border: 1px solid var(--ink); background: var(--ink); color: var(--on-ink); font: 600 15px var(--font);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--ink) 55%, #000);
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s, background 0.18s, border-color 0.18s, color 0.18s;
}
.key-btn .icon { transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1); }
.key-btn:hover, .key-btn:focus-visible {
  transform: translateY(-2px); background: var(--accent); border-color: var(--accent); color: var(--on-accent);
  box-shadow: 0 6px 0 color-mix(in srgb, var(--accent) 55%, #000), 0 14px 28px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}
.key-btn:hover .icon, .key-btn:focus-visible .icon { transform: translateX(4px); }
.key-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 55%, #000); transition-duration: 0.06s; }
.key-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.key-btn.ghost { background: var(--surface); color: var(--ink); box-shadow: 0 4px 0 var(--line-2); border-color: var(--line-2); }
.key-btn.ghost:hover, .key-btn.ghost:focus-visible {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink);
  box-shadow: 0 6px 0 color-mix(in srgb, var(--accent) 45%, var(--line-2)), 0 14px 28px -12px color-mix(in srgb, var(--accent) 45%, transparent);
}
.key-btn.ghost:active { box-shadow: 0 1px 0 var(--line-2); }
@media (prefers-reduced-motion: reduce) { .key-btn, .key-btn .icon { transition: none; } .key-btn:hover, .key-btn:hover .icon { transform: none; } }

.lp-ribbon { position: relative; overflow: hidden; padding: 16px 0 30px; border-bottom: 1px solid var(--line); background: var(--surface); }
.lp-ribbon-track { display: flex; width: max-content; animation: ribbon 70s linear infinite; }
.lp-ribbon-seg { flex: none; width: 1700px; }
.lp-ribbon-seg .band-map { width: 1700px; height: auto; }
.lp-ribbon-label { position: absolute; left: var(--gut); bottom: 8px; font: 11px var(--mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
@keyframes ribbon { to { transform: translateX(-1700px); } }
@media (prefers-reduced-motion: reduce) { .lp-ribbon-track { animation: none; } }

.lp-sec { padding: 0 var(--gut) 76px; border-bottom: 1px solid var(--line); }
.lp-bar { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 16px; padding: 26px 0 20px; margin-bottom: 34px; border-bottom: 1px solid var(--ink); }
.lp-bar h2 { font: 850 clamp(34px, 4.6vw, 70px)/0.95 var(--display); font-stretch: 122%; letter-spacing: -0.035em; text-transform: uppercase; }
.lp-bar-meta { font: 12px var(--mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; text-align: right; }
.lp-n { font: 600 13px var(--mono); color: var(--accent-ink); }
.lp-process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-left: 1px solid var(--line-2); }
.lp-process li { padding: 4px 24px 12px; border-right: 1px solid var(--line-2); }
.lp-process .lp-n { display: block; margin-bottom: 48px; }
.lp-process h3 { font: 750 23px/1.15 var(--display); font-stretch: 112%; margin-bottom: 8px; }
.lp-process p { color: var(--ink-2); }
.lp-studio { display: grid; grid-template-columns: minmax(320px, 0.8fr) 1.2fr; gap: 56px; align-items: start; }
.lp-studio-fig {
  position: sticky; top: 92px; padding: 30px; border: 1px solid var(--line-2); background-color: var(--surface);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 20px 20px;
}
.lp-caption { font: 12px var(--mono); color: var(--ink-3); margin-top: 18px; }
.lp-feature-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.lp-feature-rows li { display: grid; grid-template-columns: 48px 1fr auto; gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--line-2); align-items: start; }
.lp-feature-rows h3 { font: 750 21px/1.2 var(--display); font-stretch: 110%; margin-bottom: 5px; }
.lp-feature-rows p { color: var(--ink-2); max-width: 58ch; }
.lp-keys { display: flex; gap: 4px; }
.mc { background: var(--surface); }
.mc-ring { border-color: var(--accent); }
.lp-table-wrap { overflow-x: auto; }
.lp-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.lp-table th, .lp-table td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.lp-table thead th { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); border-bottom: 1px solid var(--ink); }
.lp-table tbody th { font-weight: 600; }
.lp-table .num { font-family: var(--mono); text-align: right; }
.lp-table thead th:nth-child(n + 3) { text-align: right; }
.lp-table tbody tr:hover { background: var(--surface); }
.lp-table .swatch-dot { display: inline-block; vertical-align: -6px; margin-right: 12px; }
/* Phones: each material becomes a card-like row instead of a table that scrolls sideways. */
@media (max-width: 760px) {
  .lp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lp-table tbody { display: block; }
  .lp-table tr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 12px; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
  .lp-table th, .lp-table td { padding: 0; border: 0; white-space: normal; }
  .lp-table tbody th, .lp-table td:not(.num) { grid-column: 1 / -1; }
  .lp-table td:not(.num) { color: var(--ink-3); }
  .lp-table .num { text-align: left; }
  .lp-table .num::before { content: attr(data-label); display: block; font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
}
.lp-cost { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; align-items: end; }
.lp-bars { display: grid; gap: 14px; }
.lp-bar-row { display: grid; grid-template-columns: 190px 1fr 150px; gap: 14px; align-items: center; font-size: 14px; }
.lp-bar-row b { font: 600 14px var(--mono); text-align: right; }
.lp-bar-track { position: relative; height: 24px; border: 1px solid var(--line-2); background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 20%), var(--surface); }
.lp-bar-track i { position: absolute; top: 4px; bottom: 4px; border-radius: 2px; background: var(--ink-2); }
.lp-bar-row.accent i { background: var(--accent); }
.lp-axis { display: flex; justify-content: space-between; margin: 0 164px 0 204px; font: 11px var(--mono); color: var(--ink-3); }
.lp-note { color: var(--ink-2); max-width: 42ch; font-size: 16px; }
.lp-mega {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 44px var(--gut);
  font: 850 clamp(42px, 8.5vw, 150px)/0.9 var(--display); font-stretch: 125%; letter-spacing: -0.045em; text-transform: uppercase;
  text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); transition: background 0.2s, color 0.2s;
}
.lp-mega svg { width: clamp(40px, 6vw, 110px); height: auto; flex: none; transition: transform 0.2s; }
.lp-mega:hover { background: var(--ink); color: var(--bg); }
.lp-mega:hover svg { transform: translateX(10px); }
.lp-foot { padding: 26px var(--gut) 44px; }
.title-block.foot { grid-template-columns: repeat(3, 1fr); }
.title-block.foot dd { white-space: normal; }
.title-block.foot a { color: var(--accent-ink); text-underline-offset: 3px; }
.title-block.foot a:hover { color: var(--ink); }

/* Start screen header shares the landing look */
.landing-nav .logo { font-size: 16px; }

/* ── Device-aware layout ── */
[data-device='desktop'] .lp-hero { min-height: calc(100vh - 62px); }
@media (max-width: 1100px) {
  .lp-word { grid-row: 1; font-size: clamp(64px, 17vw, 200px); }
  .lp-stage { grid-column: 1 / -1; grid-row: 2; margin-top: -4vw; min-height: 64vh; }
  .lp-hero-foot { grid-column: 1 / -1; grid-row: 3; }
  .lp-process { grid-template-columns: 1fr 1fr; }
  .lp-process li { border-bottom: 1px solid var(--line-2); padding-bottom: 22px; }
  .lp-studio { grid-template-columns: minmax(0, 1fr); }
  .lp-studio-fig { position: static; }
  .lp-cost { grid-template-columns: 1fr; }
}
@media (max-width: 1023px) {
  .studio .rail-wrap { order: 3; }
  .studio.panel-specs .rail-wrap.lib, .studio.panel-library .rail-wrap.spec { display: none; }
  .rail-resize, .rail-hide { display: none !important; }
  /* Stacked under the stage: the strip becomes a labelled row of category tabs. */
  .studio .rail-wrap { flex-direction: column; }
  .rail-strip { width: auto; flex-direction: row; justify-content: flex-start; gap: 6px; padding: 8px 12px; border: 0 !important; border-bottom: 1px solid var(--line) !important; overflow-x: auto; }
  .rail-strip.spec { order: -1; }
  .strip-tab { width: auto; height: 36px; padding: 0 12px; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; font-size: 13px; font-weight: 600; }
  .strip-label { display: inline; }
  .strip-badge { position: static; }
  .strip-tab.on::before { top: auto; bottom: -9px; left: 10px !important; right: 10px !important; width: auto; height: 3px; }
  .studio .rail-title { display: none; }
}
@media (max-width: 1180px) { .ed-props { grid-template-columns: 1fr 1fr; } }
/* Phones: every category tab fits the width (icon over a short label), so the strip never scrolls sideways. */
@media (max-width: 760px) {
  .rail-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; padding: 6px 8px; overflow-x: visible; }
  .strip-tab { width: auto; height: auto; min-height: 48px; padding: 6px 2px; flex-direction: column; justify-content: center; gap: 3px; white-space: normal; text-align: center; font-size: 11px; line-height: 1.15; hyphens: auto; }
}
@media (max-width: 360px) { .rail-strip { gap: 0; padding: 6px 4px; } .strip-tab { padding: 6px 0; font-size: 10px; } }
@media (max-width: 760px) {
  .lp-nav, .lp-head .theme-dots { display: none; }
  .lp-head { gap: 10px; }
  .lp-head .btn { margin-left: auto; }
  .lp-stage { min-height: 520px; }
  .lp-stage .title-block { min-width: 0; left: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-ring { inset: 2% 4% 34% 4%; }
  .lp-dims, .lp-dim-label { display: none; }
  .lp-arrow { width: 44px; height: 44px; top: 34%; }
  .lp-process { grid-template-columns: 1fr; }
  .lp-feature-rows li { grid-template-columns: 34px 1fr; }
  .lp-keys { display: none; }
  .lp-bar { grid-template-columns: 1fr; gap: 4px; }
  .lp-bar-meta { text-align: left; }
  .lp-bar-row { grid-template-columns: 1fr auto; }
  .lp-bar-row .lp-bar-track { grid-column: 1 / -1; grid-row: 2; }
  .lp-axis { display: none; }
  .title-block.foot { grid-template-columns: 1fr 1fr; }
  .topbar .theme-dots { display: none; }
  .ed-props { grid-template-columns: 1fr; }
  .tip { left: 10px; right: 10px; bottom: 10px; max-width: none; }
  .topbar .step-label { display: none; }
}
[data-device='desktop'] .topbar .step-label { display: inline; }
.ed-empty { top: 74px; }

/* ── Grid toggle (next to the themes) ── */
.view-prefs { display: flex; align-items: center; gap: 6px; }
.grid-toggle { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink-2); }
.grid-toggle:hover { color: var(--ink); border-color: var(--line-2); }
.grid-toggle .gt-strike { stroke: #d92d20; stroke-width: 2.2; stroke-linecap: round; opacity: 0; transition: opacity 0.15s; }
.grid-toggle.off .gt-strike { opacity: 1; }
.grid-toggle.off g { opacity: 0.35; }
[data-grid='off'] .stage { background-image: radial-gradient(ellipse at 50% 42%, var(--stage-a) 0%, var(--stage-b) 100%); background-size: auto; }
[data-grid='off'] .lp-hero, [data-grid='off'] .lp-studio-fig { background-image: none; }
[data-grid='off'] .review-hero { background-image: radial-gradient(ellipse at 50% 35%, var(--stage-a), var(--stage-b)); background-size: auto; }
[data-grid='off'] .ed-ring { background-image: radial-gradient(ellipse at 50% 42%, var(--stage-a), var(--stage-b)); background-size: auto; }
[data-grid='off'] .reg { display: none; }

/* Title block: the sheet number is the slideshow control */
.tb-sheet dd { display: flex; align-items: center; gap: 6px; }
.tb-step { width: 22px; height: 20px; padding: 0; border: 1px solid var(--ink); border-radius: 3px; background: var(--surface); font: 600 14px/1 var(--font); color: var(--ink); display: grid; place-items: center; }
.tb-step:hover { background: var(--ink); color: var(--bg); }
@media (max-width: 760px) { .topbar .view-prefs, .lp-head .view-prefs { display: none; } }

/* ── Compact density for smaller desktop screens (laptops, 1366×768, 125–150 % scaling) ──
   Only the side panels and the top bar tighten; the stage and carousel are untouched. */
@media (min-width: 1024px) and (max-width: 1440px), (min-width: 1024px) and (max-height: 820px) {
  :root { --topbar: 52px; }
  .studio { min-height: calc(560px * var(--ui)); }
  .studio .rail-title { min-height: 38px; padding: 3px 6px 3px 12px; font-size: 11px; }
  .studio .rail-body { padding: 12px; }
  .rail-strip { padding: 6px 0; gap: 2px; }
  .studio .spec-sec { padding-bottom: 10px; margin-bottom: 10px; }
  .studio .spec-sec h3 { font-size: 13px; margin-bottom: 4px; }
  .studio .slider { margin: 8px 0 2px; gap: 3px; }
  .studio .field-label { margin: 10px 0 5px; font-size: 11px; }
  .studio .hint, .studio .mat-process { font-size: 12px; margin-top: 4px; }
  .studio .size-big { font-size: 22px; }
  .studio .segmented button { padding-top: 5px; padding-bottom: 5px; font-size: 12.5px; }
  .studio .swatches { gap: 4px; }
  .studio .swatch { padding: 4px 6px; gap: 6px; font-size: 12px; border-radius: 8px; }
  .studio .swatch-dot { width: 18px; height: 18px; }
  .studio .check { padding: 7px 8px; }
  .studio .check p { font-size: 12px; }
  .studio .search { margin-bottom: 8px; }
  .studio .search input { padding: 7px 0; }
  .studio .tags { gap: 4px; margin-top: 8px; }
  .studio .tag { padding: 2px 8px; font-size: 12px; }
  .studio .rail-h { margin: 12px 0 6px; }
  .studio .lib-grid { gap: 6px; }
  .studio .lib-tile-main { padding: 6px 7px 7px; }
  .studio .lib-tile-main .pattern-art { height: 34px; margin-bottom: 3px; }
  .studio .lib-tile-name { font-size: 12.5px; }
  .studio .tpl-list { gap: 8px; }
  .studio .price-card { padding: 10px 12px; }
  .studio .price { font-size: 20px; }
  .studio .price-card .btn { padding: 8px 14px; font-size: 13px; }
  .studio .price-card .small { font-size: 12px; }
}

/* ── Responsive: header bars shrink instead of widening the page ── */
.logo, .steps a, .lp-head .btn { white-space: nowrap; }
.topbar { grid-template-columns: auto minmax(0, 1fr) auto; }
.lp-head .btn { flex: none; }
@media (max-width: 1100px) {
  .ring-name { display: none; }
  .lp-nav, .lp-dims, .lp-dim-label { display: none; }
  .lp-head .view-prefs { margin-left: auto; }
}
@media (max-width: 900px) {
  .topbar .steps a:not(.on) .step-label { display: none; }
  .topbar .steps a:not(.on) { padding: 6px; }
}
@media (max-width: 760px) {
  .topbar .steps a .step-label { display: none; }
  .share-btn span { display: none; }
}
@media (max-width: 360px) {
  .logo > span { display: none; }
}

/* Export: each generated file is a real download link */
.file-list li { padding: 0; }
.file-list a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-md); color: inherit; text-decoration: none; min-width: 0; }
.file-list a:hover { background: var(--surface-3); }
.file-list a span:first-of-type { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12.5px; word-break: break-all; }
.export .btn.full + .btn.full { margin-top: 8px; }

/* Modals never grow past the screen; full-width segmented tabs wrap their labels instead */
.modal { min-width: 0; }
.segmented.full button { flex: 1 1 0; min-width: 0; white-space: normal; line-height: 1.2; }

/* ── Stage: pattern selectors in a column on the right edge ──
   The carousel keeps the full height, so its bottom card can never run into the selectors.
   A narrow stage (phones, very wide side panels) keeps the original row under the carousel. */
.stage { container-type: inline-size; container-name: stage; }
/* The ring row may shrink further than before, so a short stage squeezes the ring instead of pushing
   the bottom card over whatever sits below the carousel. */
.cross { grid-template-rows: auto minmax(140px, 1fr) auto; }
.stage-main { display: contents; }
@container stage (min-width: 630px) {
  .stage-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) calc(156px * var(--ui)); column-gap: 14px; }
  .stage-main .cross { min-width: 0; }
  /* The faded far card peeks past its column; clip it there so it never slides under the selectors. */
  .stage-main .cross-right { overflow-x: clip; overflow-clip-margin: 10px; }
  .stage-main .selection-bar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: center; gap: 8px; margin: 0; padding-top: 44px; }
  .stage-main .sel-group { justify-content: space-between; }
  .stage-main .sel-group:first-child { flex-direction: column; } /* middle: ↑ name ↓, matching how it scrolls */
  .stage-main .sel-text { min-width: 0; justify-items: center; text-align: center; grid-template-columns: auto; }
  .stage-main .sel-group:first-child .sel-text { padding: 2px 4px; }
  .stage-main .sel-count { grid-column: 1; }
  .stage-main .link-group { flex-direction: column; padding: 0; }
  .stage-main .link-group .chip { width: 100%; justify-content: center; }
  .stage-main .draw-btn { margin: 0; justify-content: center; }
}

/* Inside engraving panel */
.engr-lead { margin: 0 0 10px; }
.engr-kinds { display: flex; flex-wrap: wrap; gap: 5px; }
.engr-names { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.engr-names .field { min-width: 0; margin-top: 10px; }
.engr-names input { width: 100%; min-width: 0; }
.engr-names input, #spec-engraving .field input { text-transform: none; font-family: var(--mono); letter-spacing: 0.08em; }
.engr-preview { margin: 12px 0 0; }
.engr-preview svg { width: 100%; height: auto; display: block; border-radius: 8px; overflow: hidden; }
.engr-band { fill: var(--surface-2); }
.engr-safe { fill: none; stroke: var(--line-2); stroke-width: 0.08; stroke-dasharray: 0.4 0.3; }
.engr-text { fill: var(--ink); font-family: Inter, Archivo, system-ui, sans-serif; font-weight: 600; text-anchor: middle; }
.engr-text.bad { fill: var(--error); }
.engr-preview figcaption { font: 11px var(--mono); color: var(--ink-3); margin-top: 5px; }
#spec-engraving .checks { margin-top: 10px; }

/* Export: file size per format, measured before generating */
.format-size { grid-column: 2 / -1; font: 12px var(--mono); color: var(--ink-3); }

/* Crash screen from the error boundary in main.js */
.crash { max-width: 560px; margin: 18vh auto; padding: 0 16px; display: grid; gap: 14px; }
.crash h1 { font: 600 32px/1.1 var(--display); }
.crash p { color: var(--ink-2); }
.crash-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.engr-fonts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.engr-font { display: grid; justify-items: center; gap: 1px; padding: 6px 2px 5px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink-2); min-width: 0; }
.engr-font:hover { border-color: var(--line-2); color: var(--ink); }
.engr-font.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); color: var(--ink); }
.engr-font-sample { line-height: 1.1; }
.engr-font-name { font: 10px var(--mono); text-transform: uppercase; letter-spacing: 0.04em; }

/* My designs */
.save-ctl { display: inline-flex; gap: 4px; align-items: center; }
.save-btn { border: 1px solid var(--line-2); background: var(--surface); }
.save-btn.dirty { border-color: var(--ink); }
.save-btn:disabled { opacity: 1; color: var(--ok); border-color: transparent; background: transparent; cursor: default; }
@media (max-width: 900px) { .save-ctl span { display: none; } }
.saved-card-wrap { position: relative; }
.saved-card-wrap .tpl-card { width: 100%; }
.saved-acts { position: absolute; top: 8px; left: 8px; display: grid; gap: 6px; }
.saved-acts .icon-btn { background: var(--surface); box-shadow: var(--shadow); }
.tpl-card.mine .tpl-blurb { color: var(--accent-ink); }
.start-sub { font: 600 13px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); margin: 22px 0 10px; }

/* Landing §4: display tray (components/display-tray.js). Ink line art, flat tints, textures for materials;
   the accent marks only the selected ring and its tag. */
.tray-wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.tray { width: 100%; height: auto; overflow: hidden; display: block; }
.tray-body { fill: var(--surface-2); stroke: color-mix(in oklab, var(--ink) 55%, transparent); stroke-width: 1.2; }
.tray-floor { fill: var(--surface-3); }
.tray-slot { fill: color-mix(in oklab, var(--ink) 16%, var(--surface-3)); }
.tray-slot-edge { fill: none; stroke: color-mix(in oklab, var(--ink) 45%, transparent); stroke-width: 1.2; }
.tray-lip { fill: var(--surface-2); stroke: color-mix(in oklab, var(--ink) 55%, transparent); stroke-width: 1.2; }
.ring-band { fill: var(--surface); stroke: var(--ink); stroke-width: 1.4; transition: stroke 0.15s; }
.ring-tex { stroke: none; }
.tx-line { stroke: color-mix(in oklab, var(--ink) 28%, transparent); stroke-width: 0.8; }
.tx-dot { fill: color-mix(in oklab, var(--ink) 40%, transparent); }
.ring-depth { fill: none; stroke: color-mix(in oklab, var(--ink) 35%, transparent); stroke-width: 1; }
.tray-ring.metal .ring-band { stroke-width: 1; }
.ring-tex.sintered { opacity: 0.35; }
.ring-shine { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; opacity: 0.9; }
.ring-shine.metal { opacity: 0.55; stroke-width: 2; }
.ring-shine.soft { stroke-width: 1.4; opacity: 0.45; }
.ring-halo { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; transition: opacity 0.2s; }
.tray-ring.on .ring-halo { opacity: 1; }
.ring-spark { fill: #fff6d2; stroke: #c4952f; stroke-width: 0.6; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ring-spark.on { opacity: 1; }
.tag-string { fill: none; stroke: color-mix(in oklab, var(--ink) 55%, transparent); stroke-width: 1; }
.tag-card { fill: var(--surface); stroke: color-mix(in oklab, var(--ink) 60%, transparent); stroke-width: 1.2; stroke-linejoin: round; }
.tag-hole { fill: var(--surface-2); stroke: color-mix(in oklab, var(--ink) 50%, transparent); stroke-width: 1; }
.tag-name { font: 600 12.5px var(--font, Inter, sans-serif); fill: var(--ink); text-anchor: middle; }
.tag-price { font: 500 11px var(--mono); font-variant-numeric: tabular-nums; fill: var(--ink-2); text-anchor: middle; }
.tray-tag.on .tag-card { stroke: var(--accent); stroke-width: 1.8; }
.tray-tag.on .tag-name, .tray-tag.on .tag-price { fill: var(--accent-ink); }
.tray-tag.on .tag-string { stroke: var(--accent); }
.tray-hit { cursor: pointer; outline: none; }
.tray-hit-area { fill: transparent; }
.tray-focus { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 4; opacity: 0; }
.tray-hit:focus-visible .tray-focus { opacity: 1; }
.cw-text { display: grid; gap: 12px; align-content: center; max-width: 52ch; }
.cw-kicker { font: 12px var(--mono); color: var(--accent-ink); text-transform: uppercase; letter-spacing: 0.06em; }
.cw-text .cw-range { font: 800 clamp(28px, 3.4vw, 44px)/1 var(--display); color: var(--ink); }
.cw-text p:not(.cw-range) { font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.cw-text p.cw-foot { font-size: 13px; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .ring-band { transition: none; } }
@media (max-width: 1023px) { .tray-wrap { grid-template-columns: 1fr; gap: 20px; } .tray { max-height: 360px; } }
@media (max-width: 639px) { .tag-name { display: none; } .tag-price { font-size: 16.5px; font-weight: 600; letter-spacing: -0.02em; transform: translateY(-9px); } } /* phones: price only, big enough to read */

/* Size step: size drawing (components/size-drawing.js). The ring in front view as a dimensioned engineering
   drawing, straight on the page: hatched section, chain-dot centre lines, accent inner contour and Ø dimension. */
.size-drawing { display: grid; justify-items: center; align-content: center; gap: 4px; margin: 0; }
.sd-svg { width: min(100%, 440px); height: auto; overflow: visible; }
.sd-head { font: 600 10.5px var(--mono); letter-spacing: 0.12em; fill: var(--ink-3); }
.sd-head.end { text-anchor: end; }
.sd-rule { stroke: var(--ink); stroke-width: 1; }
.sd-centre { stroke: color-mix(in oklab, var(--ink) 45%, transparent); stroke-width: 0.8; stroke-dasharray: 18 3 2 3; }
.sd-hatch-line { stroke: color-mix(in oklab, var(--ink) 38%, transparent); stroke-width: 0.9; }
.sd-body { fill: url(#sd-hatch); stroke: none; animation: sd-fade 0.5s 0.55s ease-out backwards; }
.sd-line, .sd-fit { fill: none; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sd-line { stroke: var(--ink); stroke-width: 1.6; animation: sd-ink 0.9s cubic-bezier(.6,0,.3,1) backwards; }
.sd-fit { stroke: var(--accent); stroke-width: 2.4; animation: sd-ink 0.6s cubic-bezier(.6,0,.3,1) backwards; }
.sd-dim { stroke: var(--accent); stroke-width: 1; fill: none; }
.sd-arrow { fill: var(--accent); }
.sd-num { font: 700 15px var(--mono); font-variant-numeric: tabular-nums; fill: var(--accent-ink); text-anchor: middle;
  paint-order: stroke; stroke: var(--bg); stroke-width: 5px; stroke-linejoin: round; }
.sd-ghost circle { fill: none; stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; }
.sd-ghost path { fill: none; stroke: var(--ink-2); stroke-width: 0.8; }
.sd-ghost text { font: 600 11px var(--mono); fill: var(--ink-2); text-anchor: end; }
.sd-ghost { animation: sd-fade 0.18s ease-out; }
.sd-block { width: min(100%, 360px); background: transparent; }
.sd-sheet { font: 600 12px var(--mono); color: var(--ink-2); }
@keyframes sd-ink { from { stroke-dashoffset: 1; } }
@keyframes sd-fade { from { opacity: 0; } }
@media (min-width: 1024px) {
  .size-step { max-width: 1040px; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); column-gap: 48px; align-items: start; }
  .size-step > :not(.size-drawing) { grid-column: 1; }
  .size-step > .size-drawing { grid-column: 2; grid-row: 1 / span 6; align-self: center; }
}
@media (max-width: 639px) { .sd-svg { width: min(100%, 320px); } }
@media (prefers-reduced-motion: reduce) { .sd-body, .sd-line, .sd-fit, .sd-ghost { animation: none; } }
}

/* ── Stage: the ring is the bottom layer ──
   The 3D view fills the whole stage under the cards and selectors (framed on the centre of the cross), so a
   zoomed-in ring is never cut off by a box. Empty space passes the pointer through to the ring. */
.stage-ring { position: absolute; inset: 0; z-index: 0; }
.stage-ring .ring-view { position: absolute; inset: 0; cursor: grab; }
.stage-ring .ring-view:active { cursor: grabbing; }
.stage-main, .cross, .selection-bar, .band-map-wrap { position: relative; z-index: 1; }
.stage-main, .cross, .cross-center, .selection-bar { pointer-events: none; }
/* the card cells keep their swipe and wheel handling exactly as before */
.cross-top, .cross-bottom, .cross-left, .cross-right, .selection-bar > * { pointer-events: auto; }

/* ── Fit-to-screen UI scale ──
   On desktop the studio chrome (top bar, side panels, cards, selectors) scales with --ui, set from the window
   size in main.js: a laptop at 125–150 % gets the same roomy stage a big monitor has, and the ring stays large. */
:root { --ui: 1; --bar: calc(var(--topbar) * var(--ui)); }
@media (min-width: 1024px) {
  .topbar, .studio .rail-wrap, .stage-hint, .stage-tools, .stage-card, .stage-empty, .selection-bar, .band-map-wrap { zoom: var(--ui); }
  .cross { grid-template-columns: minmax(calc(110px * var(--ui)), 1fr) minmax(240px, 2.4fr) minmax(calc(110px * var(--ui)), 1fr); }
}
.sound-toggle.off .st-wave { opacity: 0.25; }

/* ── Header: back button before the logo; on phones the app bar keeps only the ring mark ── */
.topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
@media (max-width: 420px) { .topbar .logo > span { display: none; } }

/* ── Landing: section titles clear the sticky header when jumped to ── */
.lp section[id] { scroll-margin-top: 84px; }

/* ── Page transitions: the curtain (see transition() in state.js) ──
   One solid layer in the page colour sweeps across in a single move; the content underneath never animates. */
.curtain {
  position: fixed; inset: 0; z-index: 1000; display: none; pointer-events: none;
  background-color: var(--bg);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px; will-change: transform;
}
.curtain.on { display: block; pointer-events: auto; }
.curtain::before { content: ''; position: absolute; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.curtain[data-dir='forward']::before { left: 0; }
.curtain[data-dir='back']::before { right: 0; }


/* Size drawing: the Ø arrowheads are drag handles */
.sd-svg.live { outline: none; touch-action: none; }
.sd-svg.live:focus-visible .sd-fit { stroke-width: 3.4; }
.sd-grip { cursor: ew-resize; }
.sd-grip-hit { fill: transparent; }
.sd-grip-dot { fill: var(--surface); stroke: var(--accent); stroke-width: 2; transition: r 0.15s; }
.sd-grip:hover .sd-grip-dot, .sd-grip:active .sd-grip-dot { r: 7.5; fill: var(--accent); }
.sd-hint { margin: 0; font: 12px var(--mono); color: var(--ink-3); }
@media (hover: none) { .sd-hint { display: none; } }

/* ── One path of four steps (app bar and Start share it) ── */
.steps a:not(.on):not(.done) .step-n { color: var(--ink-2); }
.step-part { font-weight: 500; color: var(--ink-3); }
.landing-nav .steps { margin: 0 auto; }
@media (max-width: 900px) { .landing-nav .steps a:not(.on) .step-label { display: none; } .landing-nav .steps a:not(.on) { padding: 6px; } }
@media (max-width: 520px) { .landing-nav .steps .step-label { display: none; } .landing-nav .steps a { padding: 6px; } }
h1[tabindex='-1']:focus { outline: none; }

/* ── Landing hero: the pitch and both ways in sit under "Make a", beside the ring, not at the foot of the sheet ── */
@media (min-width: 1101px) {
  .lp-hero-foot { grid-column: 1 / 5; grid-row: 1 / 4; align-self: start; margin-top: calc(clamp(70px, 15.5vw, 290px) * 0.8 + clamp(28px, 3vw, 52px)); padding-top: 0; }
}
@media (max-width: 760px) {
  .lp-hero-foot { grid-row: 2; padding-top: 14px; }
  .lp-stage { grid-row: 3; margin-top: 8px; }
  .lp-inline-steps { display: none; }
}

/* ── First-visit coach: how the stage works, in the free top-left corner, until the first change ── */
.stage-hint.hidden { visibility: hidden; }
.stage-coach {
  position: absolute; top: 14px; left: 18px; z-index: 4; display: grid; gap: 7px; margin: 0; padding: 12px 40px 12px 14px;
  max-width: 250px; background: var(--surface); border: 1px solid var(--line-2); border-left: 3px solid var(--accent);
  border-radius: var(--radius-md); box-shadow: var(--shadow); font-size: 13px; color: var(--ink); zoom: var(--ui);
  animation: coach-in 0.4s ease-out both 0.6s;
}
.stage-coach span { display: flex; gap: 4px; align-items: center; }
.stage-coach-x { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--ink-3); }
.stage-coach-x:hover { background: var(--surface-2); color: var(--ink); }
@keyframes coach-in { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 760px) { .stage-coach { position: static; max-width: none; margin: 6px 0 2px; order: 2; } .stage-coach ~ .band-map-wrap { order: 3; } }

/* The live ring in the editor pulses once on the first stroke: that is where the tile wraps. */
.ed-preview.pulse { animation: preview-pulse 1.3s ease-out 0.15s; border-radius: var(--radius-md); }
@keyframes preview-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }

/* ── Help and view settings: one menu instead of six header controls ── */
.view-menu { min-width: 260px; gap: 2px; }
.menu-label { padding: 8px 10px 4px; font: 600 10.5px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px; font-size: 14px; }
.view-menu .theme-dot { width: 24px; height: 24px; }
.view-menu .grid-toggle, .view-menu .theme-dot { padding: 0; }
.view-menu .theme-dot { background: linear-gradient(135deg, var(--swbg) 0 48%, var(--sw) 52% 100%); }
.view-menu .theme-dots { display: flex !important; }
@media (max-width: 760px) { .topbar-right .help-menu > .icon-btn { display: inline-grid; } .help-menu .menu { right: -4px; } }

/* ── Studio hierarchy: one accent button (Draw your own), one ink button (Try it on), toggles are outlined ── */
.link-group .chip.on { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.link-group .chip.on svg { color: var(--accent-ink); }
/* The printability chip gets its own row above the price, so it can never slide under Try it on. */
.price-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; row-gap: 6px; }
.price-card .check-chip { grid-column: 1 / -1; justify-self: start; white-space: nowrap; }
.stage-card.far { opacity: 0.62; }
.tryon-materials .mat-group { margin-bottom: 6px; }

/* ── Specs panel: every category with its current value; one opens in place ── */
.spec-acc { padding: 0; }
.acc { border-bottom: 1px solid var(--line); }
.acc-h { margin: 0; font: inherit; }
.acc-head {
  width: 100%; display: grid; grid-template-columns: 18px minmax(0, 1fr) 14px; align-items: center; gap: 10px;
  padding: 9px 14px; border: 0; background: none; color: var(--ink); text-align: left; font: 600 13.5px var(--font); cursor: pointer;
}
.acc-head:hover { background: var(--surface-2); }
.acc-head > svg:first-child { color: var(--ink-3); }
.acc-label { white-space: nowrap; }
.acc-text { display: grid; gap: 1px; min-width: 0; }
.acc-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11.5px var(--mono); color: var(--ink-2); }
.acc-val.ok { color: var(--ok); }
.acc-val.warn { color: var(--warn); }
.acc-val.error { color: var(--error); }
.acc-head > svg:last-child { color: var(--ink-3); transition: transform 0.15s; }
.acc.open .acc-head > svg:last-child { transform: rotate(180deg); }
.acc.open .acc-head { background: var(--surface-2); }
.acc.open .acc-head > svg:first-child { color: var(--accent-ink); }
.acc-body { padding: 4px 14px 14px; }
.acc-body .spec-sec { padding-left: 0; padding-right: 0; }
@media (max-width: 1023px) { .rail-strip.spec { display: none; } }
.studio .rail-body.spec-acc { padding: 0; }
.acc-body .spec-sec:last-child { border-bottom: 0; margin-bottom: 0; }

/* ── Files: the last sheet uses the landing's drawing language (title block, callouts, registration marks) ── */
.review-title .eyebrow { color: var(--accent-ink); }
.review-title h1 { margin: 2px 0 0; }
.review-dim.h { top: 92%; }
.review-dim.v { left: 92%; top: 47%; }
.review-sheet { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.review-tb { flex: 1 1 360px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ready-stamp {
  display: grid; justify-items: center; margin: 0; padding: 8px 14px; transform: rotate(-7deg);
  border: 3px double var(--ok); border-radius: 6px; color: var(--ok); background: color-mix(in srgb, var(--surface) 75%, transparent);
  font: 800 19px/1.05 var(--display); font-stretch: 118%; text-transform: uppercase; letter-spacing: 0.02em;
  animation: stamp-in 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) 0.5s both;
}
.ready-stamp span + span { font: 600 10.5px var(--mono); letter-spacing: 0.14em; }
.ready-stamp.todo { color: var(--error); border-color: var(--error); }
@keyframes stamp-in { from { opacity: 0; transform: rotate(-7deg) scale(1.6); } }
.spec-card summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.spec-card summary::-webkit-details-marker { display: none; }
.spec-card summary h2 { margin: 0; }
.spec-card[open] summary { margin-bottom: 14px; }
.spec-card[open] summary svg { transform: rotate(180deg); }
.review .review-zoom { left: 8px; right: auto; }
.lp-dim-label { white-space: nowrap; }
.files-bar { display: none; }
@media (max-width: 760px) {
  .review-tb { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .files-bar { display: block; position: sticky; bottom: 0; z-index: 5; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.06); }
}

/* Contrast: white on the beige and gray accents is 3.9:1, so the accent button uses the deeper accent there;
   success green text is deepened a little so it passes 4.5:1 on its soft background too. */
[data-theme='beige'] .btn.accent, [data-theme='gray'] .btn.accent { background: var(--accent-ink); border-color: var(--accent-ink); }
[data-theme='beige'] .btn.accent:hover:not(:disabled), [data-theme='gray'] .btn.accent:hover:not(:disabled) { background: color-mix(in oklab, var(--accent-ink) 85%, var(--ink)); }
.pill.ok, .acc-val.ok, .check-chip.ok { color: color-mix(in srgb, var(--ok) 80%, #000); }

/* ── Middle and Sides live on the carousel: arrows on the cards, the current names in one row under it ──
   (replaces the selector column on the right of the stage, so the ring gets that width back) */
.stage-main { display: contents; }
.stage .cross-right { overflow-x: visible; }
.stage .selection-bar { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 18px 0 0; padding: 0; }
.stage .link-group { flex-direction: row; gap: 6px; padding: 0; background: none; border: 0; }
.stage .link-group .chip { width: auto; }
.sel-now { flex: 1; min-width: 0; display: flex; justify-content: center; gap: 26px; margin: 0; }
.sel-item { display: grid; grid-template-columns: auto auto; column-gap: 7px; align-items: baseline; min-width: 0; }
.sel-item .sel-label { grid-column: 1 / -1; }
.sel-item strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel-item.disabled { opacity: 0.55; }
.sel-keys { margin-left: 3px; font: 600 10px var(--mono); letter-spacing: 0; color: var(--accent-ink); }
.stage-card { position: relative; }
.stage-card-dir {
  position: absolute; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-2); box-shadow: var(--shadow); transition: background 0.15s, color 0.15s;
}
.stage-card:hover .stage-card-dir, .stage-card:focus-visible .stage-card-dir { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.stage-card-dir.up { top: -11px; left: 50%; transform: translateX(-50%); }
.stage-card-dir.down { bottom: -11px; left: 50%; transform: translateX(-50%); }
.stage-card-dir.left { left: -11px; top: 50%; transform: translateY(-50%); }
.stage-card-dir.right { right: -11px; top: 50%; transform: translateY(-50%); }

/* ── Studio on phones and small tablets ──
   The stage fills the first screen (ring first, Smashing's 65–75 % rule), the two panel tabs sit at its foot and stick
   under the app bar, and price, printability and Try it on are docked to the bottom so the next step is always there. */
.studio-dock { display: none; }
@media (max-width: 1023px) {
  .studio .rail .price-card { display: none; }
  .studio-dock { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; padding-bottom: env(safe-area-inset-bottom); background: var(--surface); box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.07); }
  .studio-dock .price-card { border-top: 1px solid var(--line); }
  .studio { padding-bottom: 92px; }
  .mobile-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
}
@media (max-width: 760px) {
  .studio-dock .price-card { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 10px 14px; }
  .studio-dock .price-card .check-chip { grid-column: auto; grid-row: 1; }
  .studio-dock .price-card .small, .studio-dock .price-meta { display: none; }
  .studio-dock .price { font-size: 22px; }
  .studio { padding-bottom: 68px; }
  /* first screen: app bar + stage + the tabs, with the dock below */
  .studio .stage { height: calc(100dvh - var(--topbar) - 68px - 58px); min-height: 440px; padding: 8px 10px 10px; display: flex; flex-direction: column; }
  .studio .band-map-wrap { display: none; }
  .studio .cross { flex: 1; min-height: 0; grid-template-rows: auto minmax(150px, 1fr) auto; padding-top: 30px; }
  .studio .selection-bar { margin-top: 14px; gap: 8px; }
  .studio .sel-now { order: -1; flex: 1 0 100%; gap: 20px; }
  .studio .link-group { flex: 1; }
  .studio .link-group .chip { padding: 8px 12px; }
  .studio .draw-btn { width: auto; flex: 1; justify-content: center; }
  .studio .stage-coach { position: absolute; left: 10px; right: 10px; top: auto; bottom: 8px; max-width: none; margin: 0; order: 0; }
  /* pinch zooms on a phone, so only reset and turntable stay, clear of the top card */
  [data-input="touch"] .studio .stage-tools .icon-btn:nth-child(-n + 2) { display: none; }
  .studio .mobile-tabs { padding: 8px 12px; }
}
/* 3D views while the first ring is still being built: a quiet label with a breathing dot, centred */
:where(.ring-view) { position: relative; } /* zero specificity: every placed view keeps its own position */
.ring-view.loading::after {
  content: attr(data-loading); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 7px 14px 7px 30px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow); font: 500 13px var(--font); color: var(--ink-2); white-space: nowrap; pointer-events: none;
  background-image: radial-gradient(circle at 15px 50%, var(--accent) 0 4px, transparent 4.5px);
  animation: ring-wait 1.4s ease-in-out infinite;
}
@keyframes ring-wait { 50% { background-image: radial-gradient(circle at 15px 50%, color-mix(in srgb, var(--accent) 35%, transparent) 0 4px, transparent 4.5px); } }
@media (prefers-reduced-motion: reduce) { .ring-view.loading::after { animation: none; } }

/* Files: the full specification is a drawing title block like the landing's */
.review-tb { grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--surface); }
.review-tb dd { white-space: normal; overflow: visible; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .spec-card .review-tb { grid-template-columns: 1fr; } .spec-card .review-tb > div { grid-column: auto !important; } }

/* Landing: the promise line, and no orphaned last words in running text */
.lp-promise { text-wrap: balance; margin: 0 0 10px; font: 800 clamp(20px, 1.9vw, 28px)/1.15 var(--display); font-stretch: 112%; letter-spacing: -0.015em; color: var(--ink); max-width: 30ch; }
p, .lp-lede, h1, h2, h3 { text-wrap: pretty; }
/* On wide screens the stage overlaps the wordmark, so its corner marks would sit on the letters or float in space;
   the grid and the dimension lines already carry the drawing there */
@media (min-width: 1101px) { .lp-stage .reg { display: none; } }

/* Studio polish */
.price-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.price-card > div { flex: 1 1 auto; }
.pattern-art.plain { position: relative; }
.pattern-art.plain svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pattern-art.plain rect { stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pattern-art.plain line { stroke: color-mix(in oklab, var(--ink) 16%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pattern-art.plain span { position: relative; }
.stage-card .pattern-art.plain { background: var(--surface); box-shadow: none; }
.spec-drawing { margin-top: 14px; }
.spec-drawing .sd-svg { width: 100%; }
.spec-drawing .sd-block { width: 100%; }