/* Hallmark · genre: modern-minimal · macrostructure: Split Studio
 * design-system: design.md · designed-as-app · theme: Kerfloom paper/ink/laser
 * pre-emit critique: P5 H4 E4 S5 R5 V4
 * Existing routes, workflow, and production geometry preserved.
 */
* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  width: var(--rule-thin);
  height: var(--rule-thin);
  margin: calc(-1 * var(--rule-thin));
  border: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

html,
body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
}

body {
  min-height: 100dvh;
}

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

button,
a,
input,
select {
  -webkit-tap-highlight-color: var(--color-transparent);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 4.5rem;
  padding: var(--space-sm) clamp(var(--space-md), 4vw, var(--space-xl));
  border-block-end: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: -0.025em;
  text-decoration: none;
  white-space: nowrap;
}

.wordmark svg {
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--color-preview-geometry);
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 4;
}

.wordmark:active {
  opacity: 0.58;
}

.wordmark-product {
  display: none;
}

@media (min-width: 24rem) {
  .wordmark-product {
    display: inline;
  }
}

.header-actions {
  display: none;
  align-items: center;
  gap: var(--space-xs);
}

.button {
  min-height: 2.75rem;
  border: var(--rule-thin) solid var(--color-rule-strong);
  border-radius: var(--radius-control);
  padding-inline: var(--space-md);
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-micro) var(--ease-out), opacity var(--dur-micro) var(--ease-out);
}

.button:active {
  transform: translateY(1px);
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.button--primary {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.button--primary:focus-visible {
  outline-color: var(--color-paper);
  box-shadow: 0 0 0 4px var(--color-focus);
}

.button--action {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-paper);
}

.button[data-state="loading"] {
  cursor: wait;
  opacity: 0.82;
}

.button[data-state="loading"] .button-label::before {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-inline-end: var(--space-xs);
  border: 2px solid var(--color-accent-ink);
  border-block-start-color: var(--color-transparent);
  border-radius: 50%;
  content: "";
  animation: spin 800ms linear infinite;
  vertical-align: -0.1rem;
}

.button--hex-loading {
  gap: var(--space-xs);
}

.button--hex-loading > .hex-bloom {
  display: none;
}

.button--hex-loading[data-state="loading"] > .hex-bloom {
  display: block;
}

.button--hex-loading[data-state="loading"] .button-label::before {
  display: none;
}

.button[data-state="error"] {
  border-color: var(--color-error);
}

.button[data-state="success"] {
  border-color: var(--color-success);
}

.workbench {
  display: grid;
  min-width: 0;
}

.controls {
  min-width: 0;
  container-type: inline-size;
  padding: var(--space-xl) clamp(var(--space-md), 4vw, var(--space-xl));
  border-block-end: var(--rule-thin) solid var(--color-rule);
  scroll-padding-block: var(--space-2xl);
}

.controls-heading {
  display: grid;
  gap: var(--space-xs);
  margin-block-end: var(--space-lg);
}

h1,
h2,
p {
  margin: 0;
}

h1,
h2,
legend {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-style: normal;
}

h1,
h2 {
  min-width: 0;
  overflow-wrap: anywhere;
}

h1 {
  font-size: var(--text-2xl);
  line-height: 1.08;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

h2 {
  font-size: var(--text-lg);
  letter-spacing: -0.025em;
}

.controls-heading p,
.preview-heading p {
  max-width: 58ch;
  color: var(--color-muted);
  line-height: 1.55;
}

.project-tools {
  container-type: inline-size;
  display: grid;
  gap: var(--space-xs);
  margin-block-end: var(--space-lg);
  padding-block: var(--space-sm);
  border-block: var(--rule-thin) solid var(--color-rule);
}

.project-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
}

.project-actions .button {
  min-width: 0;
  width: 100%;
}

@container (min-width: 25rem) {
  .project-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
  }

  .project-actions .button {
    width: auto;
    min-width: max-content;
    flex: 1 1 auto;
    padding-inline: var(--space-sm);
  }
}

.project-status {
  min-width: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.project-status[data-state="dirty"]::before {
  color: var(--color-accent);
  content: "● ";
}

.project-sync {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.controls {
  padding-block-end: calc(var(--space-2xl) + var(--space-xl));
}

.project-sync p {
  min-width: 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}

.project-sync p[data-state="success"] {
  color: var(--color-success);
}

.project-sync p[data-state="error"] {
  color: var(--color-error);
}

.account-dialog {
  position: fixed;
  inset: 0;
  width: min(calc(100% - 2 * var(--space-md)), 34rem);
  max-width: none;
  max-height: calc(100dvh - 2 * var(--space-md));
  overflow: auto;
  margin: auto;
  padding: var(--space-lg);
  border: var(--rule-thin) solid var(--color-rule-strong);
  border-radius: var(--radius-panel);
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: var(--shadow-whisper);
}

.account-dialog::backdrop {
  background: var(--color-overlay);
}

.account-dialog[open] {
  display: grid;
  gap: var(--space-md);
}

.account-dialog__header,
.account-dialog__signed-in,
.account-dialog__recovery,
.account-dialog__notice {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
}

.account-dialog__header > div,
.account-dialog__signed-in > div,
.account-dialog__recovery > div,
.account-dialog__notice > div {
  display: grid;
  min-width: 0;
  gap: var(--space-2xs);
}

.account-dialog__header h2,
.account-dialog__recovery h3,
.account-dialog__notice h3,
.account-dialog__manage h3,
.account-dialog__form h3 {
  margin: 0;
}

.account-dialog__header p,
.account-dialog__signed-in p,
.account-dialog__recovery p,
.account-dialog__notice p,
.account-dialog__manage p {
  color: var(--color-muted);
  line-height: 1.45;
}

.account-dialog__form,
.account-dialog__signed-in,
.account-dialog__recovery,
.account-dialog__notice,
.account-dialog__manage {
  padding-block: var(--space-md);
  border-block-start: var(--rule-thin) solid var(--color-rule);
}

.account-dialog__form {
  display: grid;
  gap: var(--space-sm);
}

.account-dialog__oauth {
  display: grid;
  gap: var(--space-sm);
  padding-block-start: var(--space-sm);
}

.account-dialog__oauth[hidden] {
  display: none;
}

.google-sign-in {
  display: flex;
  width: 100%;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  border: var(--rule-thin) solid var(--color-rule-strong);
  border-radius: var(--radius-control);
  background: #fff;
  color: #1f1f1f;
  cursor: pointer;
  font: 600 var(--text-sm)/1.2 var(--font-body);
}

.google-sign-in:hover {
  background: var(--color-paper-2);
}

.google-sign-in:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.google-sign-in svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
}

.account-dialog__divider {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.account-dialog__divider::before,
.account-dialog__divider::after {
  height: var(--rule-thin);
  flex: 1;
  background: var(--color-rule);
  content: "";
}

.account-dialog__signed-in {
  flex-wrap: wrap;
}

.account-dialog__signed-in > p {
  flex-basis: 100%;
}

#accountIdentity {
  overflow-wrap: anywhere;
}

.account-billing {
  display: grid;
  flex: 1 1 100%;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-control);
  background: var(--color-paper-2);
}

.account-billing__summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
}

.account-billing__summary h3,
.account-billing__summary p,
.account-billing__balances {
  margin: 0;
}

.account-billing__balances {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-lg);
}

.account-billing__balances div {
  display: grid;
  gap: var(--space-2xs);
  text-align: right;
}

.account-billing__balances dt {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.account-billing__balances dd {
  font: 700 var(--text-lg)/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.account-billing[data-state="error"] {
  border-color: var(--color-error);
}

.account-billing[data-state="past-due"] {
  border-color: var(--color-error);
  background: var(--color-error-soft);
}

.account-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.checkout-result-dialog .account-dialog__notice {
  flex-direction: column;
}

.checkout-result-dialog .account-dialog__actions {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}

.account-dialog__message {
  min-height: 1.4em;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.account-dialog__message[data-state="success"] {
  color: var(--color-success);
}

.account-dialog__message[data-state="error"] {
  color: var(--color-error);
}

.account-dialog__message[data-state="warning"] {
  color: var(--color-error);
}

.project-variant-dialog__source {
  padding: var(--space-sm);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-control);
  background: var(--color-paper-2);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.account-dialog__manage summary {
  color: var(--color-ink);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
}

.account-dialog__manage summary::marker {
  color: var(--color-accent);
}

.account-dialog__manage summary:active {
  color: var(--color-focus);
}

.account-dialog__manage-content {
  display: grid;
  gap: var(--space-md);
  padding-block-start: var(--space-md);
}

.account-dialog__manage-content > div,
.account-dialog__delete {
  display: grid;
  gap: var(--space-xs);
}

.account-dialog__manage-content > div + div,
.account-dialog__delete {
  padding-block-start: var(--space-md);
  border-block-start: var(--rule-thin) solid var(--color-rule);
}

.project-library {
  position: fixed;
  inset: 0;
  width: min(calc(100% - 2 * var(--space-md)), 72rem);
  max-width: none;
  max-height: calc(100dvh - 2 * var(--space-md));
  margin: auto;
  padding: var(--space-lg);
  border: var(--rule-thin) solid var(--color-rule-strong);
  border-radius: var(--radius-panel);
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: var(--shadow-whisper);
}

.project-library::backdrop {
  background: var(--color-overlay);
}

.project-library[open] {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: var(--space-md);
}

.project-library__header,
.project-library__summary {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-md);
}

.project-library__header > div,
.project-library__summary > div {
  min-width: 0;
}

.project-library__header h2 {
  overflow-wrap: anywhere;
}

.project-library__header p,
.project-library__save p,
.project-library__summary p {
  max-width: 64ch;
  margin-block-start: var(--space-2xs);
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.project-library__save {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: var(--rule-thin) solid var(--color-rule-strong);
  background: var(--color-paper-2);
}

.project-library__save--collapsible {
  display: block;
  padding: 0;
}

.project-library__save--collapsible > summary {
  padding: var(--space-md);
  cursor: pointer;
  font-size: var(--text-md);
  font-weight: 700;
}

.project-library__save--collapsible > summary:active {
  transform: translateY(1px);
}

.project-library__save-body {
  display: grid;
  gap: var(--space-sm);
  padding: 0 var(--space-md) var(--space-md);
  border-block-start: var(--rule-thin) solid var(--color-rule);
}

.project-library__save h3,
.project-library__summary h3 {
  font-size: var(--text-lg);
}

.project-library__save-controls,
.project-library__portable {
  display: grid;
  gap: var(--space-xs);
}

.project-library__save-controls {
  align-items: end;
}

.project-library__portable {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-library__portable .button {
  min-width: 0;
  padding-inline: var(--space-sm);
}

.project-library__message {
  min-height: 1lh;
  font-family: var(--font-mono);
  font-size: var(--text-xs) !important;
}

.project-library__message[data-state="success"] {
  color: var(--color-success);
}

.project-library__message[data-state="error"] {
  color: var(--color-error);
}

.project-library__summary {
  align-items: center;
  padding-block-end: var(--space-sm);
  border-block-end: var(--rule-thin) solid var(--color-rule);
}

.project-library__grid {
  display: grid;
  gap: var(--space-md);
  min-height: 0;
  overflow-y: auto;
  padding-inline-end: var(--space-2xs);
}

.project-library__empty {
  display: grid;
  min-height: 12rem;
  place-items: center;
  padding: var(--space-lg);
  border: var(--rule-thin) dashed var(--color-rule-strong);
  color: var(--color-muted);
  text-align: center;
}

.structure-preset-launch,
.structure-preset-applied,
.pattern-style-launch,
.pattern-style-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-block: var(--rule-thin) solid var(--color-rule);
  background: var(--color-transparent);
}

.structure-preset-launch > div,
.pattern-style-launch > div {
  display: grid;
  gap: var(--space-2xs);
  min-width: 0;
}

.structure-preset-launch h3,
.pattern-style-launch h3 {
  font-size: var(--text-md);
}

.structure-preset-launch p,
.structure-preset-applied span,
.pattern-style-launch p,
.pattern-style-applied span {
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.structure-preset-launch .button,
.structure-preset-applied .button,
.pattern-style-launch .button,
.pattern-style-applied .button {
  flex: 0 0 auto;
}

.structure-preset-applied,
.pattern-style-applied {
  border-color: var(--color-success);
  background: color-mix(in oklch, var(--color-paper) 92%, var(--color-success));
}

.structure-preset-applied span,
.pattern-style-applied span {
  color: var(--color-success);
}

.structure-preset-card__preview {
  aspect-ratio: 3 / 2;
  min-height: 0;
}

.structure-preset-card__preview svg {
  width: 100%;
  height: 100%;
  max-height: 10rem;
}

.structure-preset-card__panel {
  fill: var(--color-paper-2);
  stroke: var(--color-ink);
  vector-effect: non-scaling-stroke;
}

.structure-preset-card__inner {
  fill: none;
  stroke: var(--color-muted);
  stroke-dasharray: 3 2;
  vector-effect: non-scaling-stroke;
}

.structure-preset-card__hole {
  fill: var(--color-accent);
}

.structure-preset-card__clear {
  fill: color-mix(in oklch, var(--color-accent) 12%, transparent);
  stroke: var(--color-accent);
  vector-effect: non-scaling-stroke;
}

.structure-preset-card__note {
  padding: var(--space-xs);
  border-left: 0.2rem solid var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-ink-2);
  font-size: var(--text-xs);
  line-height: 1.4;
}

.structure-preset-save,
.pattern-style-save {
  align-content: start;
}

.structure-preset-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.pattern-style-card__actions .button:first-child {
  grid-column: 1 / -1;
}

.pattern-style-card__rename {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
  align-self: end;
}

.pattern-style-card__rename .field {
  grid-column: 1 / -1;
}

.pattern-style-card__rename .button {
  min-width: 0;
  padding-inline: var(--space-xs);
}

.project-card {
  display: grid;
  align-content: start;
  gap: var(--space-sm);
  min-width: 0;
  padding: var(--space-md);
  border: var(--rule-thin) solid var(--color-rule-strong);
  background: var(--color-paper-2);
}

.project-card[data-current="true"] {
  border-color: var(--color-accent);
}

.project-card__preview {
  display: grid;
  min-height: 10rem;
  place-items: center;
  padding: var(--space-xs);
  border: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper);
  color: var(--color-muted);
  font-size: var(--text-xs);
  text-align: center;
}

.project-card__preview svg {
  display: block;
  width: 100%;
  max-height: 14rem;
}

.project-card__copy {
  display: grid;
  gap: var(--space-2xs);
  min-width: 0;
}

.project-card__copy h4 {
  font-size: var(--text-md);
  overflow-wrap: anywhere;
}

.project-card__meta,
.project-card__date {
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.project-card__date {
  font-family: var(--font-mono);
}

.project-card__actions,
.project-card__rename {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
}

.project-card__actions .button,
.project-card__rename .button {
  min-width: 0;
  padding-inline: var(--space-sm);
}

.project-card__actions .button:first-child,
.project-card__rename .field {
  grid-column: 1 / -1;
}

.workflow-stages,
.workflow-stage {
  display: grid;
  gap: var(--space-md);
  min-width: 0;
}

.workflow-stages {
  gap: var(--space-2xl);
}

.workflow-stage {
  scroll-margin-block-start: var(--space-md);
  padding-block-start: var(--space-lg);
  border-block-start: var(--rule-stage) solid var(--color-ink);
}

.workflow-stage__header {
  display: grid;
  gap: var(--space-xs);
}

.workflow-stage__number {
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
}

.workflow-stage__header > div {
  display: grid;
  gap: var(--space-2xs);
}

.workflow-stage__header h2 {
  font-size: var(--text-xl);
}

.workflow-stage__header p {
  max-width: 58ch;
  color: var(--color-muted);
  line-height: 1.5;
}

.workflow-stage--export {
  margin-block-start: var(--space-2xl);
}

.advanced-controls {
  border-block: var(--rule-thin) solid var(--color-rule);
}

.advanced-controls summary {
  min-height: 2.75rem;
  padding-block: var(--space-sm);
  color: var(--color-ink);
  cursor: pointer;
  font-weight: 700;
}

.advanced-controls summary span {
  color: var(--color-muted);
  font-weight: 400;
}

.advanced-controls__content {
  padding-block-end: var(--space-md);
}

.production-downloads {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-md);
  border: var(--rule-thin) solid var(--color-rule-strong);
  background: var(--color-paper-2);
}

.production-downloads h3 {
  font-size: var(--text-lg);
}

.production-downloads p {
  margin-block-start: var(--space-2xs);
  color: var(--color-muted);
  line-height: 1.5;
}

.production-downloads__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}

.post-export-feedback {
  display: grid;
  gap: var(--space-md);
  margin-block-start: var(--space-md);
  padding: var(--space-lg);
  border: var(--rule-thin) solid var(--color-rule-strong);
  background: var(--color-paper-2);
}

.post-export-feedback[hidden],
.post-export-feedback__details[hidden],
.post-export-feedback__thanks[hidden] {
  display: none;
}

.post-export-feedback form,
.post-export-feedback__details,
.post-export-feedback__thanks {
  display: grid;
  gap: var(--space-md);
}

.post-export-feedback__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}

.post-export-feedback__heading h3,
.post-export-feedback__thanks h3,
.post-export-feedback__heading p,
.post-export-feedback__thanks p {
  margin: 0;
}

.post-export-feedback__heading > p,
.post-export-feedback__thanks > p:last-child,
.post-export-feedback__privacy {
  color: var(--color-muted);
  line-height: 1.5;
}

.post-export-feedback__rating {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.feedback-scale {
  display: grid;
  grid-template-columns: repeat(5, minmax(2.75rem, 1fr));
  gap: var(--space-xs);
}

.feedback-scale label {
  min-width: 0;
  cursor: pointer;
}

.feedback-scale label span {
  display: grid;
  min-height: 2.75rem;
  place-items: center;
  border: var(--rule-thin) solid var(--color-rule-strong);
  border-radius: var(--radius-control);
  background: var(--color-paper);
  color: var(--color-ink);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.feedback-scale input:checked + span {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.feedback-scale input:focus-visible + span {
  outline: 0.18rem solid var(--color-ink);
  outline-offset: var(--space-3xs);
}

.feedback-scale input:disabled + span {
  cursor: not-allowed;
  opacity: 0.55;
}

.feedback-scale label:has(input:disabled) {
  cursor: not-allowed;
}

.feedback-scale label:active span {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.feedback-scale__ends {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-block-start: var(--space-xs);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.post-export-feedback textarea {
  width: 100%;
  resize: vertical;
}

.optional-label {
  color: var(--color-muted);
  font-weight: 400;
}

.post-export-feedback__actions {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: stretch;
}

.post-export-feedback__problem {
  justify-self: end;
}

.post-export-feedback__privacy,
.post-export-feedback .form-status {
  margin: 0;
  min-height: 1lh;
  font-size: var(--text-sm);
}

.export-layer-key {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.export-layer-key li {
  display: grid;
  grid-template-columns: auto minmax(4.75rem, auto) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.export-layer-key strong {
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: inherit;
}

.layer-swatch {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  flex: 0 0 auto;
  border: var(--rule-thin) solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 50%;
}

.layer-swatch--cut {
  background: var(--color-operation-cut);
}

.layer-filters .layer-swatch--cut {
  background: var(--color-preview-geometry);
}

.layer-swatch--score {
  background: var(--color-operation-score);
}

.layer-swatch--engrave {
  background: var(--color-operation-engrave);
}

.sheet-layout-launch,
.comparison-launch,
.estimate-launch {
  display: grid;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  border-block-end: var(--rule-thin) solid var(--color-rule);
}

.sheet-layout-launch > div,
.comparison-launch > div,
.estimate-launch > div {
  display: grid;
  gap: var(--space-2xs);
}

.sheet-layout-launch h3,
.comparison-launch h3,
.estimate-launch h3 {
  font-size: var(--text-md);
}

.sheet-layout-launch p,
.comparison-launch p,
.estimate-launch p {
  max-width: 58ch;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.sheet-layout-launch .button,
.comparison-launch .button,
.estimate-launch .button {
  justify-self: start;
}

.comparison-dialog {
  position: fixed;
  inset: 0;
  width: min(calc(100% - 2 * var(--space-md)), 78rem);
  max-width: none;
  max-height: calc(100dvh - 2 * var(--space-md));
  margin: auto;
  padding: var(--space-lg);
  border: var(--rule-thin) solid var(--color-rule-strong);
  border-radius: var(--radius-panel);
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: var(--shadow-whisper);
}

.comparison-dialog::backdrop {
  background: var(--color-overlay);
}

.comparison-dialog[open] {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: var(--space-md);
}

.comparison-dialog__header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-md);
}

.comparison-dialog__header > div {
  min-width: 0;
}

.comparison-dialog__header h2 {
  overflow-wrap: anywhere;
}

.comparison-dialog__header p {
  max-width: 70ch;
  margin-block-start: var(--space-2xs);
  color: var(--color-muted);
  line-height: 1.45;
}

.comparison-toolbar {
  display: grid;
  gap: var(--space-sm);
  align-items: end;
  padding-block-end: var(--space-md);
  border-block-end: var(--rule-thin) solid var(--color-rule);
}

.comparison-context,
.comparison-status {
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.comparison-status[data-state="success"] {
  color: var(--color-success);
}

.comparison-status[data-state="error"] {
  color: var(--color-error);
}

.comparison-grid {
  display: grid;
  gap: var(--space-md);
  min-height: 0;
  overflow-y: auto;
}

.comparison-card {
  display: grid;
  align-content: start;
  gap: var(--space-sm);
  min-width: 0;
  padding: var(--space-md);
  border: var(--rule-thin) solid var(--color-rule-strong);
  background: var(--color-paper-2);
}

.comparison-card[data-current="true"] {
  border-color: var(--color-accent);
}

.comparison-card__heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-sm);
}

.comparison-card__heading h3 {
  font-size: var(--text-lg);
}

.comparison-card__setting {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.comparison-card__preview {
  display: grid;
  min-height: 13rem;
  place-items: center;
  padding: var(--space-sm);
  border: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper);
}

.comparison-card__preview svg {
  display: block;
  width: 100%;
  max-height: 19rem;
}

.comparison-card__preview p {
  color: var(--color-muted);
  text-align: center;
}

.comparison-card__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block-start: var(--rule-thin) solid var(--color-rule);
  border-inline-start: var(--rule-thin) solid var(--color-rule);
}

.comparison-card__metrics div {
  min-width: 0;
  padding: var(--space-xs);
  border-block-end: var(--rule-thin) solid var(--color-rule);
  border-inline-end: var(--rule-thin) solid var(--color-rule);
}

.comparison-card__metrics dt {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.comparison-card__metrics dd {
  margin-block-start: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.comparison-card__note {
  min-height: 2.8em;
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1.4;
}

.comparison-card__note[data-state="error"] {
  color: var(--color-error);
}

.comparison-card .button {
  width: 100%;
}

.estimate-dialog {
  position: fixed;
  inset: 0;
  width: min(calc(100% - 2 * var(--space-md)), 76rem);
  max-width: none;
  max-height: calc(100dvh - 2 * var(--space-md));
  margin: auto;
  padding: var(--space-lg);
  border: var(--rule-thin) solid var(--color-rule-strong);
  border-radius: var(--radius-panel);
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: var(--shadow-whisper);
}

.estimate-dialog::backdrop {
  background: var(--color-overlay);
}

.estimate-dialog[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--space-md);
}

.estimate-dialog__header,
.estimate-result__heading,
.estimate-profile__heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-md);
}

.estimate-dialog__header > div,
.estimate-profile__heading > div {
  min-width: 0;
}

.estimate-dialog__header h2 {
  overflow-wrap: anywhere;
}

.estimate-dialog__header p,
.estimate-profile__heading p,
.estimate-job > div > p {
  max-width: 68ch;
  margin-block-start: var(--space-2xs);
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.estimate-workspace {
  display: grid;
  gap: var(--space-lg);
  min-height: 0;
  overflow-y: auto;
}

.estimate-controls,
.estimate-result,
.estimate-profile,
.estimate-job {
  display: grid;
  align-content: start;
  gap: var(--space-sm);
  min-width: 0;
}

.estimate-controls {
  gap: var(--space-lg);
}

.estimate-currency,
.estimate-profile,
.estimate-job {
  padding-block-end: var(--space-lg);
  border-block-end: var(--rule-thin) solid var(--color-rule);
}

.estimate-profile__heading h3,
.estimate-job h3,
.estimate-result__heading h3 {
  font-size: var(--text-lg);
}

.estimate-fields {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
}

.estimate-profile__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
}

.estimate-profile__actions .button {
  min-width: 0;
  padding-inline: var(--space-sm);
}

.estimate-profile__actions .button:last-child:not([hidden]) {
  grid-column: 1 / -1;
}

.estimate-fields .unit-input input {
  padding-inline-end: 5.5rem;
}

.estimate-profile__status,
.estimate-result__status,
.estimate-disclaimer {
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.estimate-profile__status[data-state="success"],
.estimate-result__status[data-state="success"] {
  color: var(--color-success);
}

.estimate-profile__status[data-state="error"],
.estimate-result__status[data-state="error"] {
  color: var(--color-error);
}

.estimate-result {
  padding: var(--space-md);
  border: var(--rule-thin) solid var(--color-rule-strong);
  background: var(--color-paper-2);
}

.estimate-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block-start: var(--rule-thin) solid var(--color-rule-strong);
  border-inline-start: var(--rule-thin) solid var(--color-rule-strong);
}

.estimate-summary > div {
  min-width: 0;
  padding: var(--space-sm);
  border-block-end: var(--rule-thin) solid var(--color-rule-strong);
  border-inline-end: var(--rule-thin) solid var(--color-rule-strong);
}

.estimate-summary dt {
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1.35;
}

.estimate-summary dd {
  margin-block-start: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  overflow-wrap: anywhere;
}

.estimate-summary__total {
  background: var(--color-paper);
}

.estimate-summary__total dd {
  color: var(--color-accent);
  font-weight: 700;
}

.estimate-formula {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-md);
  border-inline-start: var(--rule-stage) solid var(--color-accent);
  background: var(--color-paper);
}

.estimate-formula h4 {
  font-size: var(--text-sm);
}

.estimate-formula p,
.estimate-formula ol {
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.estimate-formula ol {
  padding-inline-start: var(--space-md);
}

.sheet-dialog {
  position: fixed;
  inset: 0;
  width: min(calc(100% - 2 * var(--space-md)), 72rem);
  max-width: none;
  max-height: calc(100dvh - 2 * var(--space-md));
  margin: auto;
  padding: var(--space-lg);
  border: var(--rule-thin) solid var(--color-rule-strong);
  border-radius: var(--radius-panel);
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: var(--shadow-whisper);
}

.sheet-dialog::backdrop {
  background: var(--color-overlay);
}

.sheet-dialog[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--space-md);
}

.sheet-dialog__header,
.sheet-layout-result__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.sheet-dialog__header > div {
  min-width: 0;
}

.sheet-dialog__header h2 {
  min-width: 0;
  overflow-wrap: anywhere;
}

.sheet-dialog__header p {
  max-width: 65ch;
  margin-block-start: var(--space-2xs);
  color: var(--color-muted);
  line-height: 1.45;
}

.sheet-layout-workspace {
  display: grid;
  gap: var(--space-lg);
  min-height: 0;
  overflow-y: auto;
}

.sheet-layout-controls,
.sheet-layout-result {
  min-width: 0;
}

.sheet-layout-controls {
  align-content: start;
}

.sheet-presets {
  display: grid;
  gap: var(--space-sm);
  padding-block-end: var(--space-md);
  border-block-end: var(--rule-thin) solid var(--color-rule);
}

.sheet-presets__heading {
  display: grid;
  gap: var(--space-2xs);
}

.sheet-presets__heading h3 {
  font-size: var(--text-md);
}

.sheet-presets__heading p,
.sheet-preset-feedback p {
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1.4;
}

.sheet-preset-picker,
.sheet-preset-actions,
.sheet-preset-editor {
  display: grid;
  gap: var(--space-xs);
}

.sheet-preset-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sheet-preset-actions .button {
  min-width: 0;
  padding-inline: var(--space-sm);
}

.sheet-preset-actions .button:first-child {
  grid-column: 1 / -1;
}

.sheet-preset-editor {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
}

.sheet-preset-editor .field {
  grid-column: 1 / -1;
}

.sheet-preset-feedback {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.sheet-preset-feedback p {
  min-width: 0;
}

.sheet-preset-feedback p[data-state="success"] {
  color: var(--color-success);
}

.sheet-preset-feedback p[data-state="error"] {
  color: var(--color-error);
}

.sheet-items {
  display: grid;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  border-block-end: var(--rule-thin) solid var(--color-rule);
}

.sheet-items__heading {
  display: grid;
  gap: var(--space-2xs);
}

.sheet-items__heading h3 {
  font-size: var(--text-md);
}

.sheet-items__heading p,
.sheet-items__empty,
.sheet-item-status {
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1.4;
}

.sheet-saved-items {
  display: grid;
  gap: var(--space-xs);
}

.sheet-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
  padding: var(--space-sm);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-control);
  background: var(--color-paper-2);
}

.sheet-item--current {
  grid-template-columns: auto minmax(0, 1fr) auto;
  border-color: var(--color-rule-strong);
}

.sheet-item[data-compatible="false"] {
  opacity: 0.58;
}

.sheet-item__choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
  cursor: pointer;
}

.sheet-item__choice input {
  width: 1.2rem;
  min-height: 1.2rem;
  margin: 0;
  accent-color: var(--color-accent);
}

.sheet-item__included {
  display: grid;
  width: 1.4rem;
  height: 1.4rem;
  place-items: center;
  border-radius: 50%;
  background: var(--color-success);
  color: var(--color-paper);
  font-size: var(--text-xs);
  font-weight: 800;
}

.sheet-item__copy {
  display: grid;
  gap: var(--space-3xs);
  min-width: 0;
}

.sheet-item__copy strong,
.sheet-item__copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sheet-item__copy strong {
  font-size: var(--text-sm);
}

.sheet-item__copy small {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.sheet-item__quantity {
  display: grid;
  grid-template-columns: auto 4.25rem;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.sheet-item__quantity input {
  min-width: 0;
}

.sheet-item-status {
  min-height: 1lh;
  font-family: var(--font-mono);
}

.sheet-layout-fields {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
}

.sheet-rotation-option {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  min-height: 2.75rem;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border: var(--rule-thin) solid var(--color-rule-strong);
  border-radius: var(--radius-control);
  background: var(--color-paper-2);
  color: var(--color-ink);
  cursor: pointer;
}

.sheet-rotation-option input {
  width: 1.25rem;
  min-height: 1.25rem;
  margin: 0;
  accent-color: var(--color-accent);
}

.sheet-rotation-option span {
  display: grid;
  gap: var(--space-2xs);
  min-width: 0;
}

.sheet-rotation-option strong {
  font-size: var(--text-sm);
  line-height: 1.35;
}

.sheet-rotation-option small {
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1.4;
}

.sheet-rotation-option:has(input:focus-visible) {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.sheet-rotation-option:has(input:active) {
  border-color: var(--color-focus);
}

.sheet-fit-status,
.sheet-layout-issues {
  min-height: 1lh;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.sheet-fit-status[data-state="warning"],
.sheet-layout-issues[data-state="error"] {
  color: var(--color-error);
}

.sheet-fit-status[data-state="success"] {
  color: var(--color-success);
}

.sheet-layout-result {
  display: grid;
  align-content: start;
  gap: var(--space-md);
}

.sheet-layout-result__heading h3 {
  font-size: var(--text-lg);
}

.sheet-preview {
  display: grid;
  min-height: 16rem;
  place-items: center;
  overflow: clip;
  border: var(--rule-thin) solid var(--color-rule-strong);
  background: var(--color-paper-2);
}

.sheet-preview p {
  max-width: 45ch;
  padding: var(--space-lg);
  color: var(--color-muted);
  text-align: center;
}

.sheet-preview svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 50dvh;
  background: var(--color-paper);
}

.sheet-layout-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-block-start: var(--rule-thin) solid var(--color-rule);
}

.sheet-layout-summary > div {
  display: grid;
  gap: var(--space-2xs);
  min-width: 0;
  padding: var(--space-sm);
  border-block-end: var(--rule-thin) solid var(--color-rule);
}

.sheet-layout-summary dt {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.sheet-layout-summary dd {
  min-width: 0;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.sheet-layout-downloads {
  display: grid;
  gap: var(--space-sm);
}

.tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-block-end: var(--space-lg);
  border-block: var(--rule-thin) solid var(--color-rule);
}

.tab {
  min-width: 0;
  min-height: 2.75rem;
  border: 0;
  border-inline-end: var(--rule-thin) solid var(--color-rule);
  background: var(--color-transparent);
  color: var(--color-muted);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.tab:last-child {
  border-inline-end: 0;
}

.tab[aria-selected="true"] {
  background: var(--color-accent-soft);
  color: var(--color-focus);
  font-weight: 600;
}

.tab:active,
.file-control:active {
  transform: translateY(1px);
}

.tab:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

form {
  display: grid;
  gap: var(--space-lg);
}

.parameter-panel {
  min-width: 0;
  margin: 0;
  padding: var(--space-lg) 0 0;
  border: 0;
  border-block-start: var(--rule-thin) solid var(--color-rule);
}

.parameter-panel[hidden] {
  display: none;
}

legend {
  padding: 0;
  font-size: var(--text-md);
  font-weight: 700;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

.field {
  display: grid;
  align-content: start;
  gap: var(--space-2xs);
  min-width: 0;
}

.field--wide {
  grid-column: 1 / -1;
}

.field label,
.file-control > span {
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 700;
}

.field label span {
  color: var(--color-neutral);
  font-weight: 400;
}

input,
select,
.file-control {
  width: 100%;
  min-height: 2.75rem;
  border: var(--rule-thin) solid var(--color-rule-strong);
  border-radius: var(--radius-control);
  outline: 2px solid var(--color-transparent);
  outline-offset: 1px;
  background: var(--color-paper);
}

input,
select {
  padding-inline: var(--space-sm);
}

input::placeholder {
  color: var(--color-neutral);
}

input:disabled,
select:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

input[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: var(--color-error);
  background: var(--color-error-soft);
}

input:active,
select:active {
  border-color: var(--color-focus);
}

.unit-input {
  position: relative;
}

.unit-input input {
  padding-inline-end: 3rem;
}

.unit-input span {
  position: absolute;
  inset-block: 0;
  inset-inline-end: var(--space-sm);
  display: grid;
  place-items: center;
  color: var(--color-neutral);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  pointer-events: none;
}

.helper,
.error-message {
  min-height: 1lh;
  font-size: var(--text-sm);
  line-height: 1.45;
}

.helper {
  color: var(--color-muted);
}

.error-message {
  padding: var(--space-sm);
  border: var(--rule-thin) solid var(--color-error);
  border-radius: var(--radius-control);
  background: var(--color-error-soft);
  color: var(--color-ink);
}

.file-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-inline: var(--space-sm);
  cursor: pointer;
}

.file-control strong {
  color: var(--color-focus);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.native-file {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: clip;
  clip-path: inset(50%);
}

.pattern-native-select {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  overflow: clip;
  clip-path: inset(50%);
  pointer-events: none;
}

.recipe-start {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: var(--rule-thin) solid var(--color-rule-strong);
  background: var(--color-paper-2);
  color: var(--color-ink);
}

.recipe-start > div {
  display: grid;
  gap: var(--space-2xs);
  min-width: 0;
}

.recipe-start h3 {
  font-size: var(--text-md);
}

.recipe-start p {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.recipe-start .recipe-start__status {
  color: var(--color-focus);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.recipe-start .button {
  justify-self: start;
}

.pattern-choice {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-sm);
  border: var(--rule-thin) solid var(--color-rule-strong);
  border-radius: var(--radius-control);
  background: var(--color-paper);
  color: var(--color-ink);
}

.pattern-choice__thumbnail {
  display: grid;
  width: 4.5rem;
  height: 4.5rem;
  place-items: center;
  overflow: clip;
  border: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper-2);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-align: center;
}

.pattern-choice__thumbnail svg,
.pattern-card__thumbnail svg {
  width: 100%;
  height: 100%;
}

.pattern-choice__copy {
  display: grid;
  gap: var(--space-2xs);
  min-width: 0;
}

.pattern-choice__copy strong {
  font-size: var(--text-md);
  line-height: 1.2;
}

.pattern-choice__copy span {
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.pattern-choice__action {
  grid-column: 1 / -1;
}

.pattern-picker {
  position: fixed;
  inset: 0;
  width: min(calc(100% - 2 * var(--space-md)), 68rem);
  max-width: none;
  max-height: min(calc(100dvh - 2 * var(--space-md)), 54rem);
  margin: auto;
  padding: var(--space-lg);
  border: var(--rule-thin) solid var(--color-rule-strong);
  border-radius: var(--radius-panel);
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: var(--shadow-whisper);
}

.pattern-picker::backdrop {
  background: var(--color-overlay);
}

.pattern-picker[open] {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: var(--space-md);
}

.pattern-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.pattern-picker__header > div {
  min-width: 0;
}

.pattern-picker__header h2 {
  min-width: 0;
  font-size: var(--text-xl);
  overflow-wrap: anywhere;
}

.pattern-picker__header p {
  max-width: 65ch;
  margin-block-start: var(--space-2xs);
  color: var(--color-muted);
  line-height: 1.5;
}

.pattern-picker__close {
  flex: 0 0 auto;
}

.pattern-picker__tools {
  display: grid;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  border-block: var(--rule-thin) solid var(--color-rule);
}

.pattern-filters {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  overflow-x: auto;
  padding-block-end: var(--space-2xs);
}

.pattern-filter {
  min-height: 2.75rem;
  flex: 0 0 auto;
  border: var(--rule-thin) solid var(--color-rule-strong);
  border-radius: var(--radius-control);
  padding-inline: var(--space-sm);
  background: var(--color-paper);
  color: var(--color-ink);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.pattern-filter[aria-pressed="true"],
.pattern-filter[data-state="success"] {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-focus);
}

.pattern-filter:active {
  transform: translateY(1px);
}

.pattern-filter:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.pattern-filter[data-state="loading"] {
  cursor: wait;
  opacity: 0.72;
}

.pattern-filter[data-state="error"] {
  border-color: var(--color-error);
  background: var(--color-error-soft);
  color: var(--color-error);
}

.pattern-picker__status {
  min-height: 1lh;
  margin: 0;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.pattern-picker__status[data-state="loading"]::before {
  content: "• ";
  color: var(--color-accent);
}

.recipe-picker__notice {
  margin: 0;
  padding: var(--space-sm);
  border: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper-2);
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.pattern-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
  min-height: 0;
  overflow-y: auto;
  padding-inline-end: var(--space-2xs);
}

.pattern-card {
  display: grid;
  grid-template-rows: 9rem auto auto;
  gap: var(--space-sm);
  min-width: 0;
  padding: var(--space-sm);
  border: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper);
  color: var(--color-ink);
}

.pattern-card[data-selected="true"] {
  box-shadow: inset 0 0 0 var(--rule-thin) var(--color-accent);
}

.pattern-card__thumbnail {
  display: grid;
  min-width: 0;
  place-items: center;
  overflow: clip;
  border: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper-2);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-align: center;
}

.pattern-card__thumbnail[data-state="loading"] {
  cursor: wait;
}

.hex-bloom {
  display: block;
  flex: 0 0 auto;
  overflow: visible;
  color: var(--color-preview-geometry);
}

.hex-bloom.hex-bloom--sm {
  width: 1.5rem;
  height: 1.5rem;
}

.hex-bloom.hex-bloom--md {
  width: 2rem;
  height: 2rem;
}

.hex-bloom.hex-bloom--lg {
  width: 3rem;
  height: 3rem;
}

.hex-bloom__cell {
  fill: currentColor;
  fill-opacity: 0.05;
  stroke: currentColor;
  stroke-linejoin: round;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  animation: hex-bloom-resolve 1.4s var(--ease-in-out) infinite;
}

.hex-bloom__cell:nth-child(1) { animation-delay: -1.4s; }
.hex-bloom__cell:nth-child(2) { animation-delay: -1.2s; }
.hex-bloom__cell:nth-child(3) { animation-delay: -1s; }
.hex-bloom__cell:nth-child(4) { animation-delay: -0.8s; }
.hex-bloom__cell:nth-child(5) { animation-delay: -0.6s; }
.hex-bloom__cell:nth-child(6) { animation-delay: -0.4s; }
.hex-bloom__cell:nth-child(7) { animation-delay: -0.2s; }

.pattern-card__thumbnail[data-state="loading"],
.project-card__preview[data-state="loading"] {
  color: var(--color-preview-geometry);
}

.pattern-card__thumbnail[data-state="error"] {
  border-color: var(--color-error);
  background: var(--color-error-soft);
  color: var(--color-error);
}

.pattern-card__thumbnail[data-state="success"] {
  border-color: var(--color-rule-strong);
}

.pattern-card__copy {
  display: grid;
  align-content: start;
  gap: var(--space-2xs);
}

.pattern-card__copy h3 {
  overflow: hidden;
  font-size: var(--text-md);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pattern-card__copy p {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.pattern-card__copy .pattern-card__uses {
  color: var(--color-ink-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.pattern-card__copy .pattern-card__warning {
  color: var(--color-error);
  font-weight: 700;
}

.pattern-card__copy .recipe-card__rationale {
  color: var(--color-ink-2);
}

.pattern-card__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
  align-self: end;
}

.pattern-card__actions .button {
  min-width: 0;
  padding-inline: var(--space-xs);
}

.pattern-card__favorite[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-focus);
}

.recipe-card__choose {
  width: 100%;
}

.pattern-gallery__empty {
  display: grid;
  justify-items: start;
  gap: var(--space-sm);
  align-content: center;
  min-height: 12rem;
  padding: var(--space-lg);
  border: var(--rule-thin) solid var(--color-rule);
}

.native-file:focus-visible + .helper {
  color: var(--color-focus);
}

.field:has(.native-file:focus-visible) .file-control {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.field--toggle {
  grid-template-columns: 2.75rem 1fr;
  align-items: center;
  grid-column: 1 / -1;
}

.field--toggle input {
  width: 1.25rem;
  min-height: 1.25rem;
  margin: 0;
  accent-color: var(--color-accent);
}

.pattern-controls {
  margin-block-start: var(--space-lg);
  border-block-start: var(--rule-thin) solid var(--color-rule);
}

.pattern-controls summary {
  padding-block: var(--space-sm);
  color: var(--color-ink);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
}

.pattern-controls summary::marker {
  color: var(--color-accent);
}

.pattern-controls__content {
  padding-block: var(--space-sm);
}

.compact-button {
  min-height: 2.25rem;
}

.inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.protected-regions summary span {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
}

.protected-regions__content {
  display: grid;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
}

.protected-regions__content > .helper,
.region-editor > .helper,
.region-snap-help,
.region-clearance .helper {
  min-height: 0;
  margin: 0;
}

.region-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.region-toolbar .button {
  min-height: 2.5rem;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-xs);
}

.region-snap-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7rem;
  gap: var(--space-xs);
  align-items: end;
}

.region-snap-controls .field--toggle {
  grid-column: auto;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: var(--space-xs);
}

.region-short-number {
  width: 7rem;
}

.region-snap-help {
  margin-block-start: calc(-1 * var(--space-xs));
}

.region-edit-status {
  margin: 0;
  padding: var(--space-xs) var(--space-sm);
  border-left: 0.2rem solid var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}

.region-edit-status[data-state="placing"] {
  color: var(--color-focus);
}

.region-edit-status[data-state="success"] {
  border-left-color: var(--color-success);
  color: var(--color-success);
}

.region-editor {
  border-top: 1px solid var(--color-rule);
  padding-top: var(--space-sm);
}

.region-editor h3 {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-sm);
}

.region-editor .region-toolbar {
  margin-block-end: var(--space-xs);
}

.mounting-layout-editor {
  padding-block-start: var(--space-sm);
  border: 0;
  border-block-start: var(--rule-thin) solid var(--color-rule);
  background: var(--color-transparent);
}

.mounting-layout-editor__grid .field--wide {
  grid-column: 1 / -1;
}

.mounting-layout-status[data-state="active"] {
  color: var(--color-success);
}

.region-editor__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
  align-items: end;
}

.region-add {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  padding-inline: var(--space-xs);
  font-size: var(--text-sm);
  line-height: 1;
  white-space: nowrap;
}

.region-clearance {
  grid-template-columns: minmax(0, 1fr) 7rem;
  column-gap: var(--space-sm);
  align-items: end;
}

.region-clearance > label {
  grid-column: 1;
}

.region-clearance > .unit-input {
  grid-column: 2;
  grid-row: 1;
  width: 7rem;
}

.region-clearance > .helper {
  grid-column: 1 / -1;
}

.region-list {
  display: grid;
  gap: var(--space-xs);
  margin: var(--space-sm) 0 0;
  padding: 0;
  list-style: none;
}

.region-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-control);
  padding: var(--space-xs) var(--space-sm);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.region-list li[data-selected="true"] {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.region-list li span[role="button"] {
  cursor: pointer;
}

.region-list button {
  border: 0;
  background: transparent;
  color: var(--color-error);
  cursor: pointer;
  font: inherit;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.button--generate {
  min-width: 10.5rem;
}

.form-status {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.form-status[data-state="success"] {
  color: var(--color-success);
}

.form-status[data-state="error"],
.form-status[data-state="warning"] {
  color: var(--color-error);
}

.bundle-panel,
.calibration-panel {
  margin-block-start: var(--space-xl);
  border-block: var(--rule-thin) solid var(--color-rule);
}

.bundle-panel summary,
.calibration-panel summary {
  min-height: 2.75rem;
  padding-block: var(--space-sm);
  color: var(--color-ink);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
}

.bundle-panel summary::marker,
.calibration-panel summary::marker {
  color: var(--color-accent);
}

.bundle-panel summary:active,
.calibration-panel summary:active {
  color: var(--color-focus);
}

.bundle-content,
.calibration-content {
  display: grid;
  gap: var(--space-md);
  padding-block: var(--space-sm) var(--space-lg);
}

.bundle-button {
  width: 100%;
}

.calibration-panel summary {
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.calibration-panel summary::after {
  display: table;
  clear: both;
  content: "";
}

.calibration-state {
  float: inline-end;
  margin-inline-start: var(--space-sm);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
}

.calibration-state[data-state="verified"] {
  color: var(--color-success);
}

.calibration-state[data-state="measured"] {
  color: var(--color-accent);
}

.calibration-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
}

.calibration-actions .button {
  display: grid;
  min-width: 0;
  place-items: center;
  padding-inline: var(--space-sm);
}

.import-button {
  cursor: pointer;
  text-align: center;
}

.calibration-panel:has(#calibrationFile:focus-visible) .import-button {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.calibration-step {
  display: grid;
  gap: var(--space-sm);
  padding-block-start: var(--space-md);
  border-block-start: var(--rule-thin) solid var(--color-rule);
}

.calibration-step > div:first-child {
  display: grid;
  gap: var(--space-2xs);
}

.calibration-step h3 {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-md);
}

.step-number {
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
}

.manufacturing-result {
  display: grid;
  gap: var(--space-sm);
}

.coupon-options {
  display: grid;
  gap: var(--space-2xs);
  margin: 0;
  padding-inline-start: var(--space-lg);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.coupon-options:empty {
  display: none;
}

.readiness-panel {
  display: grid;
  gap: var(--space-sm);
  margin-block-start: var(--space-lg);
  padding-block: var(--space-md);
  border-block: var(--rule-thin) solid var(--color-rule-strong);
}

.readiness-heading {
  display: grid;
  gap: var(--space-sm);
}

.readiness-heading h3 {
  min-width: 0;
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-style: normal;
}

.readiness-state {
  color: var(--color-error);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.readiness-state[data-state="ready"] {
  color: var(--color-success);
}

.readiness-list {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.readiness-list li {
  padding-block-start: var(--space-xs);
  border-block-start: var(--rule-thin) solid var(--color-rule);
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.readiness-list li[data-state="passed"] {
  color: var(--color-success);
}

.readiness-list li[data-state="recommended"] {
  color: var(--color-muted);
}

.preview-section {
  min-width: 0;
  padding: var(--space-lg) clamp(var(--space-md), 4vw, var(--space-xl)) var(--space-xl);
  background: var(--color-paper-2);
}

.preview-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  margin-block-end: var(--space-md);
}

.preview-heading > div {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: var(--space-2xs);
}

.preview-heading p {
  max-width: none;
}

.no-break {
  white-space: nowrap;
}

.status-chip {
  flex: 0 0 auto;
  border: var(--rule-thin) solid var(--color-rule-strong);
  border-radius: var(--radius-control);
  padding: var(--space-xs) var(--space-sm);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.status-chip[data-state="success"] {
  border-color: var(--color-success);
  color: var(--color-success);
}

.status-chip[data-state="error"] {
  border-color: var(--color-error);
  color: var(--color-error);
}

.preview-tools {
  display: grid;
  gap: var(--space-sm);
  margin-block-end: var(--space-sm);
}

.preview-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: var(--rule-thin) solid var(--color-rule-strong);
  border-radius: var(--radius-control);
}

.preview-mode legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.preview-mode label {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 2.75rem;
  place-items: center;
  border-inline-end: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper);
  color: var(--color-ink);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 700;
}

.preview-mode label:hover:not(:has(input:disabled)) {
  background: var(--color-accent-soft);
}

.preview-mode label:has(input:checked):hover {
  background: var(--color-ink);
}

.preview-mode label:last-child {
  border-inline-end: 0;
}

.preview-mode input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.preview-mode label:has(input:checked) {
  background: var(--color-ink);
  color: var(--color-paper);
}

.preview-mode label:has(input:focus-visible) {
  outline: 0.2rem solid var(--color-focus);
  outline-offset: -0.2rem;
}

.preview-mode label:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.45;
}

.inspector-panel {
  margin-block-end: var(--space-sm);
  padding: var(--space-md);
  border: var(--rule-thin) solid var(--color-rule-strong);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--color-paper) 88%, var(--color-accent-soft));
}

.inspector-heading {
  display: flex;
  align-items: start;
  gap: var(--space-md);
  cursor: pointer;
  list-style: none;
}

.inspector-heading > div {
  min-width: 0;
  flex: 1;
}

.inspector-heading::-webkit-details-marker {
  display: none;
}

.inspector-heading::before {
  content: "▸";
  flex: 0 0 auto;
  color: var(--color-accent);
}

.inspector-panel[open] > .inspector-heading::before {
  content: "▾";
}

.inspector-heading h3,
.inspector-heading p {
  margin: 0;
}

.inspector-heading p {
  margin-block-start: var(--space-2xs);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.inspector-heading p[data-state="ready"] {
  color: var(--color-success);
}

.inspector-heading p[data-state="issues"] {
  color: var(--color-error);
}

.inspector-content {
  position: relative;
}

.inspector-content > #clearInspection {
  position: absolute;
  inset-block-start: var(--space-sm);
  inset-inline-end: 0;
}

.guided-fixes {
  display: grid;
  gap: var(--space-sm);
  margin-block-start: var(--space-md);
  padding-block: var(--space-md);
  border-block: var(--rule-thin) solid var(--color-rule-strong);
}

.guided-fixes__heading {
  display: grid;
  gap: var(--space-2xs);
  padding-inline-end: var(--space-xl);
}

.guided-fixes__heading h4,
.guided-fixes__heading p,
.guided-fix p,
.guided-fix-undo p,
.guided-fix-note {
  margin: 0;
}

.guided-fixes__heading h4 {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-style: normal;
}

.guided-fixes__heading p,
.guided-fix p,
.guided-fix-note {
  max-width: 70ch;
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.guided-fix-list {
  display: grid;
}

.guided-fix {
  display: grid;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  border-block-start: var(--rule-thin) solid var(--color-rule);
}

.guided-fix__copy {
  display: grid;
  gap: var(--space-2xs);
  min-width: 0;
}

.guided-fix strong {
  color: var(--color-ink);
}

.guided-fix .button {
  justify-self: start;
}

.guided-fix-undo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-block-end: var(--space-sm);
  padding: var(--space-sm);
  background: var(--color-accent-soft);
  color: var(--color-ink);
}

.guided-fix-undo p {
  min-width: 0;
  font-size: var(--text-xs);
  line-height: 1.45;
}

.guided-fix-note:empty {
  display: none;
}

.inspector-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xs);
  margin: var(--space-sm) 0 0;
}

.inspector-metrics div {
  min-width: 0;
  padding: var(--space-xs) var(--space-sm);
  border: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper);
}

.inspector-metrics dt {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.inspector-metrics dd {
  margin: var(--space-3xs) 0 0;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inspector-checks,
.inspector-issues {
  display: grid;
  gap: var(--space-2xs);
  margin: var(--space-sm) 0 0;
  padding: 0;
  list-style: none;
}

.inspector-checks {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.inspector-checks li {
  display: grid;
  gap: var(--space-3xs);
  padding: var(--space-xs) var(--space-sm);
  border-inline-start: 0.2rem solid currentColor;
  background: var(--color-paper);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.inspector-checks li strong {
  color: currentColor;
}

.inspector-checks li span {
  color: var(--color-muted);
  font-family: var(--font-mono);
}

.inspector-checks li[data-state="passed"] {
  color: var(--color-success);
}

.inspector-checks li[data-state="warning"] {
  color: var(--color-accent-ink);
  background: var(--color-accent-soft);
  font-weight: 600;
}

.inspector-checks li[data-state="error"] {
  color: var(--color-error);
  background: var(--color-error-soft);
  font-weight: 600;
}

.inspector-issue {
  display: grid;
  width: 100%;
  padding: var(--space-sm);
  border: var(--rule-thin) solid var(--color-error);
  border-radius: var(--radius-control);
  background: var(--color-error-soft);
  color: var(--color-ink);
  text-align: start;
}

.inspector-issue[data-severity="warning"] {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.inspector-issue[aria-pressed="true"] {
  outline: 0.2rem solid var(--color-focus);
  outline-offset: 0.1rem;
}

.inspector-issue:disabled {
  cursor: default;
  opacity: 1;
}

.inspector-issue strong {
  text-transform: capitalize;
}

.inspector-issue span {
  margin-block-start: var(--space-3xs);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.inspector-issue .inspector-issue__comparison {
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-weight: 600;
}

.zoom-tools {
  display: grid;
  grid-template-columns: 2.75rem minmax(3.5rem, auto) 2.75rem;
  width: max-content;
  border: var(--rule-thin) solid var(--color-rule-strong);
  border-radius: var(--radius-control);
}

.preview-canvas-tools {
  position: absolute;
  z-index: var(--z-raised);
  inset-block-start: var(--space-sm);
  inset-inline-end: var(--space-sm);
  overflow: hidden;
  background: var(--color-paper);
  box-shadow: var(--shadow-whisper);
}

.tool-button[data-state="active"] {
  background: var(--color-accent-soft);
  color: var(--color-focus);
  font-weight: 600;
}

.tool-button {
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 0;
  border-inline-end: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper);
  color: var(--color-ink);
  cursor: pointer;
  font-family: var(--font-mono);
  font-weight: 600;
}

.tool-button:last-child {
  border-inline-end: 0;
}

.tool-button:active {
  background: var(--color-accent-soft);
}

.tool-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.part-filter {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-xs);
}

.part-filter label,
.layer-filters legend {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
}

.part-filter select {
  min-width: 0;
}

.layer-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.layer-filters legend {
  float: inline-start;
  margin-inline-end: var(--space-xs);
}

.layer-filters label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 2.75rem;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}

.layer-filters label[hidden] {
  display: none;
}

.layer-filters label:has(input:disabled) {
  opacity: 0.42;
}

.layer-filters input {
  width: 1.1rem;
  min-height: 1.1rem;
  margin: 0;
  accent-color: var(--color-accent);
}

.layer-filters input[value="cut"] {
  accent-color: var(--color-preview-geometry);
}

.artboard {
  position: relative;
  display: grid;
  min-height: 24rem;
  place-items: center;
  overflow: auto;
  border: var(--rule-thin) solid var(--color-rule-strong);
  border-radius: var(--radius-panel);
  background: var(--color-paper);
  box-shadow: var(--shadow-whisper);
}

.artboard[data-navigable="true"] {
  cursor: grab;
  touch-action: none;
}

.artboard[data-dragging="true"] {
  cursor: grabbing;
}

.dimension {
  position: absolute;
  z-index: var(--z-raised);
  padding: var(--space-3xs) var(--space-xs);
  background: var(--color-graphite);
  color: var(--color-on-graphite);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.4;
  pointer-events: none;
}

.dimension--x {
  inset-block-end: var(--space-sm);
  inset-inline-start: 50%;
  transform: translateX(-50%);
}

.dimension--y {
  inset-block-start: 50%;
  inset-inline-start: var(--space-sm);
  transform: translateY(-50%) rotate(-90deg);
}

.empty-preview {
  display: grid;
  justify-items: center;
  gap: var(--space-md);
  max-width: 18rem;
  padding: var(--space-lg);
  color: var(--color-muted);
  text-align: center;
}

.empty-preview svg {
  width: 7.5rem;
  fill: none;
  stroke: var(--color-rule-strong);
  stroke-width: 1;
}

.preview-loader {
  position: absolute;
  z-index: var(--z-base);
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-xs);
  padding: var(--space-lg);
  background: color-mix(in oklch, var(--color-paper) 88%, transparent);
  color: var(--color-preview-geometry);
  pointer-events: none;
  text-align: center;
}

.preview-loader p,
.preview-loader small {
  margin: 0;
}

.preview-loader p {
  color: var(--color-ink);
  font-weight: 700;
}

.preview-loader small {
  color: var(--color-muted);
  font-family: var(--font-mono);
}

.preview-mount {
  display: none;
  width: 100%;
  height: 100%;
  padding: var(--space-lg);
  opacity: 0;
}

.preview-mount[data-visible="true"] {
  display: grid;
  place-items: center;
  opacity: 1;
  animation: preview-in var(--dur-long) var(--ease-out);
}

.preview-snapshot-notice {
  margin: 0;
  border: var(--rule-thin) solid var(--color-rule-strong);
  border-radius: var(--radius-control);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-paper-2);
  color: var(--color-ink);
  font-weight: 600;
}

.preview-mount[data-snapshot-state="outdated"] {
  opacity: 0.42;
  pointer-events: none;
}

.preview-mount[data-snapshot-state="outdated"] svg path {
  cursor: default;
}

.preview-mount svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70dvh;
}

.preview-mount svg path {
  cursor: pointer;
  shape-rendering: geometricPrecision;
  transition: opacity var(--dur-short) var(--ease-out);
  vector-effect: non-scaling-stroke;
}

:is(
  .preview-mount,
  .pattern-choice__thumbnail,
  .pattern-card__thumbnail,
  .project-card__preview,
  .comparison-card__preview,
  .sheet-preview
) svg g[data-operation="cut"] path {
  stroke: var(--color-preview-geometry);
}

:is(
  .preview-mount,
  .pattern-choice__thumbnail,
  .pattern-card__thumbnail,
  .project-card__preview,
  .comparison-card__preview,
  .sheet-preview
)[data-validation-state="invalid"] svg g[data-operation="cut"] path {
  stroke: var(--color-preview-invalid);
}

.preview-mount[data-preview-mode="cut"] svg g[data-operation="cut"] path {
  stroke-width: 1px !important;
}

.preview-mount svg .material-preview-layer {
  pointer-events: none;
}

.preview-mount svg .material-preview-layer path {
  fill: color-mix(in oklch, var(--color-material-fill) 68%, var(--color-paper));
  fill-rule: evenodd;
  stroke: color-mix(in oklch, var(--color-material-stroke) 58%, var(--color-rule-strong));
  stroke-width: 0.12mm;
  vector-effect: non-scaling-stroke;
}

.preview-mount svg .material-preview-layer image {
  width: 100%;
  height: 100%;
}

.preview-mount[data-preview-mode="cut"] svg .material-preview-layer {
  display: none;
}

.preview-mount[data-preview-mode="material"] svg g[data-operation="cut"] path {
  opacity: 0.48;
}

.preview-mount[data-preview-mode="material"] svg .production-preview-raster {
  display: none;
}

.preview-mount[data-preview-mode="material"] svg g[data-operation="score"] > path,
.preview-mount[data-preview-mode="material"] svg g[data-operation="engrave"] > path {
  opacity: 0.88;
}

.preview-mount svg .protected-region-overlay > * {
  fill: color-mix(in oklch, var(--color-accent) 8%, transparent);
  stroke: var(--color-accent);
  stroke-width: 0.3mm;
  stroke-dasharray: 1.2mm 0.8mm;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.preview-mount svg .region-interaction-layer .region-hit-area {
  fill: transparent;
  stroke: transparent;
  pointer-events: all;
  cursor: move;
}

.preview-mount svg .region-interaction-layer .region-resize-handle {
  fill: var(--color-accent-ink);
  stroke: var(--color-accent);
  stroke-width: 0.35mm;
  vector-effect: non-scaling-stroke;
  pointer-events: all;
  cursor: nwse-resize;
}

.preview-mount svg .region-interaction-layer [data-selected="true"] {
  stroke: var(--color-focus);
}

.preview-mount svg .region-interaction-layer [data-linked-selected="true"] {
  stroke: var(--color-focus);
  stroke-width: 0.6mm;
  stroke-dasharray: 1.4mm 0.8mm;
  vector-effect: non-scaling-stroke;
}

.preview-mount[data-placement-mode],
.artboard[data-placement-mode] {
  cursor: crosshair;
}

.artboard[data-placement-mode] {
  outline: 0.2rem solid color-mix(
    in oklch,
    var(--color-accent) 55%,
    transparent
  );
  outline-offset: 0.15rem;
}

.preview-mount svg .placement-preview {
  pointer-events: none;
}

.preview-mount svg .placement-preview > * {
  vector-effect: non-scaling-stroke;
}

.preview-mount svg .placement-preview__clearance {
  fill: color-mix(in oklch, var(--color-accent) 10%, transparent);
  stroke: var(--color-accent);
  stroke-width: 0.3mm;
  stroke-dasharray: 1.2mm 0.8mm;
}

.preview-mount svg .placement-preview__opening {
  fill: color-mix(in oklch, var(--color-accent) 22%, transparent);
  stroke: var(--color-focus);
  stroke-width: 0.45mm;
}

.preview-mount svg .placement-preview__area {
  fill: color-mix(in oklch, var(--color-accent) 20%, transparent);
  stroke: var(--color-focus);
  stroke-width: 0.45mm;
}

.preview-mount svg .placement-preview[data-adjusted="true"] > * {
  stroke: var(--color-focus);
}

.preview-mount svg path.is-inspection-issue {
  filter: none !important;
  stroke: var(--color-focus) !important;
  stroke-width: 2px !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 1 !important;
}

.preview-mount svg .inspection-marker {
  pointer-events: none;
}

.preview-mount svg .inspection-marker circle {
  fill: color-mix(in srgb, var(--color-focus) 16%, transparent);
  stroke: var(--color-focus);
  stroke-width: 0.6mm;
  vector-effect: non-scaling-stroke;
}

.preview-mount svg .inspection-marker line {
  stroke: var(--color-focus);
  stroke-width: 0.45mm;
  vector-effect: non-scaling-stroke;
}

.preview-mount.has-selection svg path:not(.is-selected) {
  opacity: 0.16;
}

.preview-mount svg path.is-layer-hidden {
  display: none;
}

.spec-sheet {
  display: grid;
  margin: var(--space-md) 0 0;
  border-block-start: var(--rule-thin) solid var(--color-rule-strong);
}

.spec-sheet > div {
  display: grid;
  grid-template-columns: minmax(7rem, 0.6fr) minmax(0, 1.4fr);
  gap: var(--space-md);
  padding-block: var(--space-sm);
  border-block-end: var(--rule-thin) solid var(--color-rule);
}

.spec-sheet dt {
  color: var(--color-muted);
}

.spec-sheet dd {
  min-width: 0;
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.app-footer {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md) clamp(var(--space-md), 4vw, var(--space-xl));
  border-block-start: var(--rule-thin) solid var(--color-rule);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.app-footer p { margin: 0; }
.app-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.app-footer__links a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes hex-bloom-resolve {
  0%, 100% { fill-opacity: 0.05; }
  50% { fill-opacity: 0.34; }
}

@keyframes preview-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (hover: hover) and (pointer: fine) {
  .sheet-rotation-option:hover {
    background: var(--color-accent-soft);
  }

  .pattern-filter:not(:disabled):hover {
    background: var(--color-paper-2);
  }

  .button:not(:disabled):hover {
    transform: translateY(-1px);
  }

  .feedback-scale label:hover input:not(:disabled):not(:checked) + span {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
  }

  input:hover,
  select:hover,
  .file-control:hover {
    background: var(--color-paper-2);
  }

  .tab:hover {
    color: var(--color-ink);
  }

  .tool-button:not(:disabled):hover {
    background: var(--color-paper-2);
  }

  .wordmark:hover {
    opacity: 0.72;
  }
}

@media (min-width: 40rem) {
  .guided-fix {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .project-library__save-controls {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .project-library__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .estimate-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .estimate-profile__actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .estimate-profile__actions .button:last-child:not([hidden]) {
    grid-column: auto;
  }

  .comparison-toolbar {
    grid-template-columns: minmax(12rem, 0.65fr) auto minmax(14rem, 1fr);
  }

  .comparison-context {
    align-self: center;
  }

  .sheet-preset-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sheet-preset-actions .button:first-child {
    grid-column: auto;
  }

  .sheet-preset-editor {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .sheet-preset-editor .field {
    grid-column: auto;
  }

  .sheet-layout-fields,
  .sheet-layout-downloads {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pattern-choice {
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  }

  .pattern-choice__action {
    grid-column: auto;
  }

  .pattern-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .header-actions {
    display: flex;
  }

  .artboard {
    min-height: 32rem;
  }

  .preview-tools {
    grid-template-columns: minmax(11rem, auto) minmax(10rem, 1fr) auto;
    align-items: center;
  }
}

@media (max-width: 32rem) {
  .structure-preset-launch,
  .structure-preset-applied,
  .pattern-style-launch,
  .pattern-style-applied {
    align-items: stretch;
    flex-direction: column;
  }

  .structure-preset-launch .button,
  .structure-preset-applied .button,
  .pattern-style-launch .button,
  .pattern-style-applied .button {
    width: 100%;
  }

  .project-sync {
    align-items: flex-start;
    flex-direction: column;
  }

  .account-dialog {
    padding: var(--space-md);
  }

  .account-dialog__recovery,
  .account-dialog__notice {
    flex-direction: column;
  }

  .checkout-result-dialog .account-dialog__actions .button {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  .account-billing__summary {
    flex-direction: column;
  }

  .account-billing__balances {
    width: 100%;
    justify-content: flex-start;
  }

  .account-billing__balances div {
    text-align: left;
  }
}

@media (min-width: 60rem) {
  #projectLibraryDialog {
    width: min(calc(100% - 2 * var(--space-md)), 88rem);
  }

  #projectLibraryDialog[open] {
    grid-template-columns: minmax(17rem, 0.5fr) minmax(0, 1.5fr);
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  #projectLibraryDialog .project-library__header {
    grid-column: 1 / -1;
  }

  #projectLibraryDialog .project-library__save {
    grid-column: 1;
    grid-row: 2 / 4;
    align-self: start;
  }

  #projectLibraryDialog .project-library__summary {
    grid-column: 2;
    grid-row: 2;
  }

  #projectLibraryDialog .project-library__grid {
    grid-column: 2;
    grid-row: 3;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  }

  .structure-preset-dialog[open],
  .pattern-style-dialog[open] {
    grid-template-columns: minmax(18rem, 0.72fr) minmax(0, 1.28fr);
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .structure-preset-dialog .project-library__header,
  .pattern-style-dialog .project-library__header {
    grid-column: 1 / -1;
  }

  .structure-preset-dialog .structure-preset-save,
  .pattern-style-dialog .pattern-style-save {
    grid-column: 1;
    grid-row: 2 / 4;
  }

  .structure-preset-dialog .project-library__summary,
  .pattern-style-dialog .project-library__summary {
    grid-column: 2;
    grid-row: 2;
  }

  .structure-preset-dialog .structure-preset-grid {
    grid-column: 2;
    grid-row: 3;
  }

  .pattern-style-dialog .pattern-style-grid {
    grid-column: 2;
    grid-row: 3;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  }

  .project-library__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .estimate-workspace {
    grid-template-columns: minmax(19rem, 0.85fr) minmax(21rem, 1.15fr);
    align-items: start;
  }

  .estimate-result {
    position: sticky;
    inset-block-start: 0;
  }

  .comparison-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow-x: auto;
  }

  .sheet-layout-workspace {
    grid-template-columns: minmax(16rem, 0.7fr) minmax(0, 1.3fr);
    align-items: start;
  }

  .pattern-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .recipe-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workbench {
    grid-template-columns: minmax(21rem, 0.72fr) minmax(0, 1.8fr);
    min-height: calc(100dvh - 7.75rem);
  }

  .controls {
    border-block-end: 0;
    border-inline-end: var(--rule-thin) solid var(--color-rule);
  }

  .preview-section {
    position: relative;
    padding-block-start: var(--space-xl);
  }

  .preview-sticky {
    position: sticky;
    z-index: var(--z-raised);
    inset-block-start: var(--space-sm);
    background: var(--color-paper-2);
  }

  .artboard {
    min-height: clamp(24rem, calc(100dvh - 20rem), 38rem);
  }
}

@media (pointer: coarse) {
  .button,
  .tab,
  input,
  select,
  .file-control {
    min-height: 3rem;
  }

  .tool-button,
  .layer-filters label {
    min-height: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: var(--dur-micro) !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--dur-micro) !important;
  }

  .preview-mount[data-visible="true"] {
    animation-name: none;
  }

  .hex-bloom__cell {
    animation-name: none;
    fill-opacity: 0.14;
  }
}

/* Commercial support and consent use the Studio's existing dialog language. */
.feedback-dialog textarea { width: 100%; resize: vertical; }
.feedback-diagnostics,
.consent-choice { display: flex; align-items: flex-start; gap: var(--space-sm); font-weight: 400; }
.feedback-diagnostics input,
.consent-choice input { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin-top: var(--space-2xs); }
.consent-choice span { display: grid; gap: var(--space-2xs); }
.consent-choice small { max-width: 60ch; color: var(--color-muted); line-height: 1.5; }
.paywall-dialog { width: min(68rem, calc(100vw - 2 * var(--space-lg))); }
.paywall-current { display: grid; justify-items: start; gap: var(--space-sm); padding: var(--space-xl); border-block: var(--rule-thin) solid var(--color-rule); background: var(--color-paper-2); }
.paywall-current h3,
.paywall-current p { margin: 0; }
.paywall-offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: var(--rule-thin) solid var(--color-rule); }
.paywall-offers article { display: flex; flex-direction: column; align-items: stretch; min-width: 0; padding: var(--space-lg); border-right: var(--rule-thin) solid var(--color-rule); }
.paywall-offers article:last-child { border-right: 0; }
.paywall-offers article[data-recommended="true"] { box-shadow: inset 0 .18rem 0 var(--color-accent); background: var(--color-paper-2); }
.paywall-offers h3 { margin: var(--space-xs) 0; font: 700 var(--text-lg)/1.1 var(--font-display); }
.paywall-offers p { margin: 0; }
.paywall-offers p strong { font: 800 var(--text-xl)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.paywall-offers ul { flex: 1; padding-left: 1.2rem; color: var(--color-muted); }
.paywall-legal { margin: 0; padding: 0 var(--space-xl); color: var(--color-muted); font-size: var(--text-sm); line-height: 1.6; }
.paywall-legal a { color: var(--color-ink); text-decoration-color: var(--color-accent); text-underline-offset: var(--space-3xs); }
.consent-notice { position: fixed; z-index: var(--z-toast); inset: auto var(--space-lg) var(--space-lg) auto; width: min(38rem, calc(100vw - 2 * var(--space-lg))); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-lg); padding: var(--space-lg); border: var(--rule-thin) solid var(--color-rule-strong); background: var(--color-paper); box-shadow: var(--shadow-whisper); }
.consent-notice p { max-width: 52ch; margin: var(--space-xs) 0 0; color: var(--color-muted); }
.consent-notice > div:last-child { display: grid; gap: var(--space-xs); align-content: start; }

@media (max-width: 40rem) {
  .post-export-feedback { padding: var(--space-md); }
  .post-export-feedback__heading { grid-template-columns: 1fr; }
  .post-export-feedback__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-export-feedback__actions .button { min-width: 0; white-space: nowrap; }
  .post-export-feedback__problem { grid-column: 1 / -1; width: 100%; justify-self: stretch; }
  .consent-notice { inset: calc(4rem + var(--space-sm)) var(--space-sm) auto; width: auto; max-height: calc(100dvh - 8rem); grid-template-columns: 1fr; padding: var(--space-md); overflow-y: auto; }
  .consent-notice > div:last-child { grid-template-columns: 1fr; }
  .consent-notice .button { width: 100%; min-width: 0; white-space: normal; }
  .paywall-offers { grid-template-columns: 1fr; }
  .paywall-offers article { border-right: 0; border-bottom: var(--rule-thin) solid var(--color-rule); }
}

/* Focused control workflow */
.project-identity {
  display: none;
  min-width: 0;
  gap: var(--space-3xs);
  text-align: center;
}

.project-identity strong {
  overflow: hidden;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-identity .project-status {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.project-menu-toggle {
  flex: 0 0 auto;
}

.project-actions--desktop {
  display: none;
}

.project-menu {
  inset: 4rem var(--space-md) auto auto;
  width: min(18rem, calc(100vw - 2 * var(--space-md)));
  margin: 0;
  border: var(--rule-thin) solid var(--color-rule-strong);
  border-radius: var(--radius-panel);
  padding: var(--space-xs);
  background: var(--color-paper);
  box-shadow: var(--shadow-whisper);
}

.project-menu:popover-open {
  display: grid;
  gap: var(--space-xs);
}

.project-menu .button {
  width: 100%;
  justify-content: flex-start;
  text-align: start;
}

.project-sync {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.workflow-stages,
.workflow-stage {
  gap: 0;
}

.workflow-stages {
  border-block-end: var(--rule-thin) solid var(--color-rule);
}

.workflow-stage,
.workflow-stage--export {
  margin: 0;
  padding: 0;
  border-block-start: var(--rule-thin) solid var(--color-rule);
}

.workflow-stage__header {
  display: block;
}

.workflow-stage[data-active="true"] > .workflow-stage__header {
  position: sticky;
  z-index: var(--z-sticky);
  inset-block-start: 0;
  border-block-end: var(--rule-thin) solid var(--color-rule);
}

.workflow-stage__toggle {
  display: grid;
  width: 100%;
  min-height: 4rem;
  grid-template-columns: 2rem minmax(0, 1fr) 1rem;
  align-items: center;
  gap: var(--space-sm);
  border: 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-paper);
  color: var(--color-ink);
  cursor: pointer;
  text-align: start;
}

.workflow-stage__number {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: var(--rule-thin) solid var(--color-rule-strong);
  border-radius: 50%;
  color: var(--color-ink);
}

.workflow-stage__heading {
  display: grid;
  min-width: 0;
  gap: var(--space-3xs);
}

.workflow-stage__heading strong {
  font-family: var(--font-display);
  font-size: var(--text-md);
}

.workflow-stage__heading small {
  overflow: hidden;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-stage__state::before {
  color: var(--color-muted);
  content: "→";
}

.workflow-stage[data-stage-state="complete"]:not([data-active="true"]) .workflow-stage__state::before {
  color: var(--color-success);
  content: "✓";
}

.workflow-stage[data-stage-state="attention"] .workflow-stage__state::before {
  color: var(--color-error);
  content: "!";
}

.workflow-stage[data-active="true"] {
  box-shadow: inset var(--rule-stage) 0 0 var(--color-accent);
}

.workflow-stage[data-active="true"] .workflow-stage__toggle {
  background: var(--color-paper-2);
}

.workflow-stage[data-active="true"] .workflow-stage__number {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.workflow-stage__body {
  display: grid;
  gap: var(--space-lg);
  padding: var(--space-md);
  background: var(--color-paper);
}

.workflow-stage__intro {
  display: grid;
  gap: var(--space-2xs);
}

.workflow-stage__intro h2 {
  font-size: var(--text-lg);
}

.workflow-stage__intro p {
  color: var(--color-muted);
  line-height: 1.45;
}

.workflow-stage__intro .region-count {
  color: var(--color-focus);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.workflow-stage__footer {
  position: static;
  z-index: var(--z-raised);
  inset-block-end: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-inline: calc(-1 * var(--space-md));
  padding: var(--space-sm) var(--space-md) var(--space-md);
  border-block-start: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper);
}

.workflow-stage__footer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-xs);
}

.starter-choices {
  display: grid;
  gap: var(--space-xs);
}

.recipe-start {
  border: 0;
  border-block: var(--rule-thin) solid var(--color-rule);
  padding-inline: 0;
  background: var(--color-transparent);
}

.recipe-start__choices {
  display: grid;
  gap: var(--space-sm);
}

.recipe-start[data-collapsed="true"] {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.recipe-start[data-collapsed="true"] .recipe-start__choices {
  display: none;
}

.recipe-start__change {
  align-self: end;
}

.starter-choice {
  display: grid;
  gap: var(--space-3xs);
  min-height: 3.75rem;
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-control);
  padding: var(--space-sm);
  background: var(--color-paper);
  color: var(--color-ink);
  cursor: pointer;
  text-align: start;
}

.starter-choice strong {
  font-family: var(--font-display);
  white-space: nowrap;
}

.starter-choice span {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.starter-choice[aria-pressed="true"] {
  border-color: var(--color-accent);
  box-shadow: inset var(--rule-stage) 0 0 var(--color-accent);
}

.workflow-stage__toggle:active,
.starter-choice:active,
.density-preset:active,
.mobile-preview-dock:active {
  opacity: 0.68;
}

.material-calibration-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.field-label {
  color: var(--color-ink);
  font-weight: 600;
}

.density-presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: var(--rule-thin) solid var(--color-rule-strong);
  border-radius: var(--radius-control);
  overflow: clip;
}

.density-preset {
  min-height: 2.75rem;
  border: 0;
  border-inline-start: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper);
  color: var(--color-ink);
  cursor: pointer;
  font-weight: 700;
}

.density-preset:first-child {
  border-inline-start: 0;
}

.density-preset[aria-pressed="true"] {
  background: var(--color-ink);
  color: var(--color-paper);
}

.structure-task {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
  border: 0;
  padding: 0;
}

.structure-task legend {
  margin-block-end: var(--space-xs);
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
}

.structure-task__choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: var(--rule-thin) solid var(--color-rule-strong);
  border-radius: var(--radius-control);
  overflow: clip;
}

.structure-task__choices button {
  display: block;
  min-width: 0;
  min-height: calc(var(--space-2xl) + var(--space-xs));
  border: 0;
  border-inline-start: var(--rule-thin) solid var(--color-rule);
  padding: var(--space-xs);
  background: var(--color-paper);
  color: var(--color-ink);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.15;
  text-align: start;
  white-space: nowrap;
}

.structure-task__choices button:first-child {
  border-inline-start: 0;
}

.structure-task__choices button:active {
  opacity: 0.68;
}

.structure-task__choices button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.structure-task__choices button[aria-pressed="true"] {
  background: var(--color-ink);
  color: var(--color-paper);
}

.placement-settings,
.production-tools {
  border-block: var(--rule-thin) solid var(--color-rule);
}

.placement-settings summary,
.production-tools summary {
  min-height: 2.75rem;
  padding-block: var(--space-sm);
  color: var(--color-ink);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
}

.placement-settings__content,
.production-tools__content {
  display: grid;
  gap: var(--space-md);
  padding-block-end: var(--space-md);
}

.production-tools__content > section {
  margin: 0;
}

.dialog-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  border-block-end: var(--rule-thin) solid var(--color-rule);
  padding-block-end: var(--space-md);
}

.dialog-heading > div {
  display: grid;
  gap: var(--space-2xs);
}

.dialog-heading p {
  max-width: 56ch;
  color: var(--color-muted);
}

.calibration-dialog,
.production-bundle-dialog {
  width: min(calc(100% - 2 * var(--space-md)), 48rem);
  max-height: calc(100dvh - 2 * var(--space-md));
  border: var(--rule-thin) solid var(--color-rule-strong);
  border-radius: var(--radius-panel);
  padding: var(--space-lg);
  background: var(--color-paper);
  color: var(--color-ink-2);
  overflow-y: auto;
}

.calibration-dialog::backdrop,
.production-bundle-dialog::backdrop,
.mobile-preview-dialog::backdrop {
  background: var(--color-overlay);
}

.calibration-feedback {
  position: sticky;
  z-index: var(--z-sticky);
  top: calc(-1 * var(--space-lg));
  margin: 0;
  padding: var(--space-sm) 0;
  border-block-end: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper);
}

.mobile-preview-dock {
  position: fixed;
  z-index: var(--z-sticky);
  inset: auto var(--space-md) max(var(--space-md), env(safe-area-inset-bottom));
  display: flex;
  min-height: 3.5rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  border: var(--rule-thin) solid var(--color-ink);
  border-radius: var(--radius-control);
  padding-inline: var(--space-md);
  background: var(--color-ink);
  color: var(--color-paper);
  cursor: pointer;
  text-align: start;
  transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-micro) var(--ease-out);
}

body:has(.controls input:focus-visible, .controls select:focus-visible) #openMobilePreview {
  pointer-events: none;
  opacity: 0;
  transform: translateY(calc(100% + var(--space-xl)));
}

.mobile-preview-dock__label {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  white-space: nowrap;
}

.mobile-preview-dock small {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  white-space: nowrap;
}

#desktopPreviewHost {
  display: none;
}

.mobile-preview-dialog {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  border: 0;
  padding: 0;
  background: var(--color-paper-2);
  color: var(--color-ink-2);
  overflow: hidden;
  opacity: 0;
  transform: translateX(100%);
  transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-micro) var(--ease-out);
  will-change: transform;
}

.mobile-preview-dialog[open] {
  opacity: 1;
  transform: translateX(0);
}

.mobile-preview-dialog[open][data-motion="entering"],
.mobile-preview-dialog[open][data-motion="closing"] {
  opacity: 0;
  transform: translateX(100%);
}

.mobile-preview-dialog[open][data-motion="dragging"],
.mobile-preview-dialog[open][data-motion="settling"] {
  opacity: 1;
  transform: translateX(var(--mobile-preview-offset, 0px));
}

.mobile-preview-dialog[open][data-motion="dragging"] {
  transition: none;
}

.mobile-preview-dialog::backdrop {
  opacity: 1;
  transition: opacity var(--dur-short) var(--ease-out);
}

.mobile-preview-dialog[data-motion="entering"]::backdrop,
.mobile-preview-dialog[data-motion="closing"]::backdrop {
  opacity: 0;
}

.mobile-preview-dialog[data-motion="dragging"]::backdrop,
.mobile-preview-dialog[data-motion="settling"]::backdrop {
  opacity: var(--mobile-preview-progress, 1);
}

.mobile-preview-dialog[data-motion="dragging"]::backdrop {
  transition: none;
}

.mobile-preview-dialog__header {
  position: sticky;
  z-index: var(--z-sticky);
  inset-block-start: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 4rem;
  padding: var(--space-sm) var(--space-md);
  border-block-end: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper);
}

.mobile-preview-host {
  height: calc(100dvh - 4rem);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.mobile-preview-dialog #closeMobilePreview {
  position: absolute;
}

.mobile-preview-host .preview-workspace {
  padding: var(--space-md) var(--space-md) calc(var(--space-2xl) + var(--space-lg) + env(safe-area-inset-bottom));
}

body:has(.mobile-preview-dialog[open]) {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-preview-dialog,
  .mobile-preview-dialog[open],
  .mobile-preview-dialog[open][data-motion] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .mobile-preview-dialog::backdrop,
  .mobile-preview-dialog[data-motion]::backdrop {
    opacity: 1;
    transition: none;
  }
}

@media (min-width: 40rem) {
  .starter-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (hover: hover) and (pointer: fine) {
  .workflow-stage__toggle:hover,
  .starter-choice:hover,
  .density-preset:hover,
  .structure-task__choices button:hover {
    background: var(--color-paper-2);
  }

  .density-preset[aria-pressed="true"]:hover,
  .structure-task__choices button[aria-pressed="true"]:hover {
    background: var(--color-ink);
  }
}

@container (max-width: 23rem) {
  .structure-task__choices {
    grid-template-columns: 1fr;
  }

  .structure-task__choices button {
    min-height: calc(var(--space-xl) + var(--space-md));
    border-inline-start: 0;
    border-block-start: var(--rule-thin) solid var(--color-rule);
  }

  .structure-task__choices button:first-child {
    border-block-start: 0;
  }

  .region-editor__grid {
    grid-template-columns: 1fr;
  }

  .workflow-stage__footer--choice {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .workflow-stage__footer-actions,
  .workflow-stage__footer-actions .button {
    width: 100%;
  }

  .workflow-stage__footer-actions {
    flex-direction: column-reverse;
  }

  .recipe-start[data-collapsed="true"] {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 60rem) {
  body {
    padding-block-end: 0;
  }

  .app-header {
    position: sticky;
    z-index: var(--z-sticky);
    inset-block-start: 0;
  }

  .project-identity {
    display: grid;
    flex: 1 1 auto;
  }

  .project-actions--desktop {
    display: flex;
  }

  .project-menu-toggle {
    display: none;
  }

  .workbench {
    height: calc(100dvh - 4.5rem);
    min-height: 0;
    grid-template-columns: minmax(22rem, 0.72fr) minmax(0, 1.8fr);
    overflow: hidden;
  }

  .controls {
    height: 100%;
    overflow-y: auto;
    padding: var(--space-lg);
  }

  #desktopPreviewHost {
    display: block;
    height: 100%;
    overflow-y: auto;
  }

  .preview-sticky {
    position: static;
  }

  .mobile-preview-dock {
    display: none;
  }

  .workflow-stage__body {
    padding-inline: var(--space-lg);
  }

  .workflow-stage[data-active="true"] > .workflow-stage__header {
    inset-block-start: calc(-1 * var(--space-lg));
  }

  .workflow-stage__footer {
    position: static;
    inset-block-end: auto;
    margin-inline: calc(-1 * var(--space-lg));
    padding-inline: var(--space-lg);
  }
}

/* Hallmark · design-system: design.md · designed-as-app
 * Split Studio · warm workshop instrument · P5 H4 E4 S5 R5 V4 */
.controls-heading { gap: var(--space-2xs); margin-block-end: var(--space-lg); }
.controls-heading h1 { font-size: var(--text-xl); font-weight: 700; line-height: 1.15; }
.controls-heading > p { font-size: var(--text-sm); }
.controls-heading .project-sync { margin-block-start: var(--space-xs); }
.button { font-weight: 600; }
.app-header .button--quiet { border-color: var(--color-transparent); }
.app-header .button--quiet:hover { background: var(--color-paper-2); }
.app-header #saveProject { border-color: var(--color-rule); }
.workflow-stage__body { gap: var(--space-md); }
.workflow-stage[data-active="true"] { box-shadow: none; }
.workflow-stage[data-active="true"] .workflow-stage__number {
  color: var(--color-ink); border-color: var(--color-rule); background: var(--color-canvas);
}
.workflow-stage__number { width: 1.75rem; height: 1.75rem; font-variant-numeric: tabular-nums; }
.workflow-stage__heading strong { font-size: var(--text-base); font-weight: 700; }
.workflow-stage__intro p { font-size: var(--text-sm); }
.recipe-start { padding-block: 0 var(--space-md); border-block-start: 0; gap: var(--space-sm); }
.recipe-start h3 { margin: 0; font-size: var(--text-base); font-weight: 600; }
.recipe-start > div { gap: var(--space-2xs); }
.recipe-start .recipe-start__status { color: var(--color-muted); font-size: var(--text-xs); }
.starter-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
.starter-choice { min-height: 2.75rem; padding: var(--space-xs); background: var(--color-canvas); border-color: var(--color-rule); }
.starter-choice strong { font-size: var(--text-sm); font-weight: 500; }
.starter-choice span { display: none; }
.recipe-start__choices { gap: var(--space-xs); }
#openRecipePicker { justify-self: start; min-height: 2.75rem; border-color: var(--color-transparent); padding-inline: 0; font-size: var(--text-sm); }
.parameter-panel { padding-block-start: var(--space-md); }
.field label { font-weight: 500; }
.field input, .field select { background-color: var(--color-canvas); border-color: var(--color-rule-strong); }
.field input:focus, .field select:focus { border-color: var(--color-focus); }
.preview-section, .preview-sticky { background: var(--color-paper-2); }
.preview-heading { align-items: center; }
.preview-heading h2 { font-size: var(--text-md); font-weight: 700; }
.preview-heading p { font-size: var(--text-sm); }
.status-chip { border-color: var(--color-transparent); border-radius: var(--radius-panel); }
.status-chip[data-state="success"] { border-color: var(--color-transparent); background: var(--color-success-soft); }
.inspector-panel { border-color: var(--color-rule); background: var(--color-paper); }
.inspector-heading h3 { font-size: var(--text-base); font-weight: 600; }
.inspector-heading { padding: var(--space-sm) var(--space-md); }
.artboard { min-height: 0; height: clamp(20rem, 52dvh, 38rem); border-color: var(--color-rule); background: var(--color-canvas); box-shadow: none; }
.preview-mount { min-height: 0; min-width: 0; overflow: clip; padding: var(--space-xl); }
.preview-mount svg { width: 100%; height: 100%; max-height: 100%; min-height: 0; }
.dimension { background: var(--color-canvas); color: var(--color-muted); font-size: var(--text-xs); }
.preview-mount svg .material-preview-layer { filter: var(--shadow-material); }
.preview-mount svg .material-preview-layer > path { fill: url(#studioMaterialGrain); stroke: var(--color-material-stroke); stroke-width: 0.65px; }
.preview-mount svg .material-preview-layer .material-grain-line { fill: none; stroke: var(--color-material-grain); stroke-width: 0.22px; }
.spec-sheet { font-variant-numeric: tabular-nums; }
#projectLibraryDialog .project-library__save-controls,
#projectLibraryDialog .project-library__portable { grid-template-columns: minmax(0, 1fr); }
#projectLibraryDialog .project-library__save { border-color: var(--color-rule); background: var(--color-paper); border-radius: var(--radius-panel); }
#projectLibraryDialog .project-library__save input { width: 100%; }
.project-library__empty { border: 0; background: var(--color-paper-2); border-radius: var(--radius-panel); }
.project-card { background: var(--color-paper); border-color: var(--color-rule); border-radius: var(--radius-panel); }
.project-card__preview { min-height: 12rem; padding: var(--space-lg); background: var(--color-canvas); border: 0; border-radius: var(--radius-control); }
.project-card__copy h4 { font-weight: 600; }
.consent-notice {
  inset: auto var(--space-lg) var(--space-lg) auto;
  width: min(28rem, calc(100% - 2 * var(--space-lg))); max-height: 65dvh;
  grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-md);
  overflow-y: auto; border-color: var(--color-rule); border-radius: var(--radius-panel);
  background: var(--color-canvas);
}
.consent-notice p { font-size: var(--text-sm); line-height: 1.45; margin-block-start: var(--space-2xs); }
.consent-details summary { padding-block: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); cursor: pointer; }
.consent-details summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.consent-details summary:active { color: var(--color-ink); }
.consent-notice > div:last-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.consent-notice .button { white-space: nowrap; }
@media (max-width: 59.99rem) {
  .controls { padding-block-start: var(--space-lg); }
  .controls-heading { margin-block-end: var(--space-md); }
  .controls-heading .project-sync { display: none; }
  .workflow-stage__body { padding-inline: var(--space-sm); }
  .consent-notice { inset: auto var(--space-sm) calc(5rem + env(safe-area-inset-bottom)); width: auto; }
  .mobile-preview-host .artboard { height: clamp(16rem, 45dvh, 32rem); }
  .mobile-preview-host .preview-mount { padding: var(--space-lg); }
}
@media (min-width: 60rem) {
  .workbench { grid-template-columns: minmax(21rem, 24rem) minmax(0, 1fr); }
  .controls { padding: var(--space-lg) var(--space-md); }
  .workflow-stage__body { padding-inline: var(--space-md); }
  .workflow-stage__footer { margin-inline: calc(-1 * var(--space-md)); padding-inline: var(--space-md); }
  .preview-section { padding: var(--space-lg); }
  .artboard { height: max(16rem, calc(100dvh - 23rem)); min-height: 0; }
  .preview-workspace { max-width: 100rem; margin-inline: auto; }
  #projectLibraryDialog { max-width: 76rem; }
  #projectLibraryDialog[open] { grid-template-columns: minmax(17rem, 21rem) minmax(0, 1fr); }
}
.preview-mount svg .material-grain-base { fill: var(--color-material-light); }
.inspector-panel { padding: 0; }
.inspector-content { padding: var(--space-md); }
.inspector-heading::before { color: var(--color-muted); }
@media (min-width: 60rem) { .artboard { height: max(16rem, calc(100dvh - 24rem)); } }
@media (min-width: 60rem) {
  .spec-sheet { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .5fr) minmax(0, .5fr) minmax(0, 1fr); gap: var(--space-md); }
  .spec-sheet > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); border: 0; }
  .spec-sheet dt { font-size: var(--text-xs); }
  .spec-sheet dd { font-size: var(--text-sm); }
}
@media (max-width: 59.99rem) {
  .mobile-preview-host .preview-tools { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs); }
  .mobile-preview-host .preview-mode { grid-column: 1 / -1; }
  .mobile-preview-host .layer-filters { align-self: center; }
  .mobile-preview-host .layer-filters legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mobile-preview-host .preview-heading p { max-width: 32ch; }
}
.preview-mount[data-material-finish="neutral"] svg .material-preview-layer > path { fill: var(--color-paper-3); stroke: var(--color-rule-strong); }

/* Optional inspection controls occupy space only when the design needs them. */
.preview-tools { display: flex; flex-wrap: wrap; align-items: center; }
.preview-mode { flex: 0 1 13rem; }
.part-filter { flex: 1 1 12rem; }
.layer-filters { flex: 0 1 auto; }

/* Keep the view switch with the preview heading instead of a separate toolbar row. */
.preview-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm) var(--space-md); }
.preview-heading > div { grid-column: 1 / -1; }
.preview-heading .preview-mode { grid-column: auto; width: 12rem; max-width: 100%; }
.preview-heading .preview-mode label { padding-inline: var(--space-sm); white-space: nowrap; font-weight: 600; }
.preview-tools:not(:has(> :not([hidden]))) { display: none; }
@media (min-width: 70rem) {
  .preview-heading { grid-template-columns: minmax(0, 1fr) auto auto; }
  .preview-heading > div { grid-column: auto; }
  .artboard { height: max(16rem, calc(100dvh - 20.5rem)); }
}
@media (pointer: fine) {
  .preview-heading .preview-mode label { min-height: 2rem; }
}

.production-downloads__actions { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.production-downloads__actions .button { display: grid; place-items: center; min-width: 0; padding-inline: var(--space-xs); text-align: center; }

/* Size the pattern card for its panel, not the browser window. */
.pattern-choice { grid-template-columns: 4.5rem minmax(0, 1fr); }
.pattern-choice__action { grid-column: 1 / -1; min-width: 0; }
@container (min-width: 34rem) {
  .pattern-choice { grid-template-columns: 4.5rem minmax(0, 1fr) auto; }
  .pattern-choice__action { grid-column: auto; }
}

/* Keep all workbench sticky content in a layer below the application header. */
.app-header { position: sticky; inset-block-start: 0; z-index: var(--z-sticky); }
.workbench { position: relative; isolation: isolate; z-index: var(--z-base); }
.workflow-stage[data-active="true"] > .workflow-stage__header { position: sticky; align-self: start; z-index: var(--z-sticky); inset-block-start: 4.5rem; background: var(--color-paper); }
@media (min-width: 60rem) {
  .workflow-stage[data-active="true"] > .workflow-stage__header { inset-block-start: calc(-1 * var(--space-lg)); }
}

/* Desktop has two pane scrollers, not a third document scroller behind them. */
@media (min-width: 60rem) {
  html { height: 100%; overflow: clip; }
  body { display: flex; flex-direction: column; height: 100dvh; min-height: 0; overflow: clip; }
  .app-header, .app-footer { flex: 0 0 auto; }
  .workbench { flex: 1 1 0; height: auto; min-height: 0; }
  .controls, #desktopPreviewHost { overscroll-behavior-y: contain; }
  .app-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-xs); }
  .app-footer p { flex: 1; max-width: 70ch; }
  .app-footer__links { flex: 0 0 auto; gap: var(--space-md); }
  #desktopPreviewHost .preview-workspace { display: flex; flex-direction: column; height: 100%; }
  #desktopPreviewHost .preview-sticky { display: flex; flex-direction: column; flex: 1 1 0; min-height: min-content; }
  #desktopPreviewHost .artboard { flex: 1 0 16rem; height: auto; min-height: 16rem; }
  #desktopPreviewHost .spec-sheet { flex: 0 0 auto; }
}

/* UI/UX review: prioritize editable values, the pattern, and the canvas. */
.pattern-style-launch { justify-content: flex-end; padding-block: 0; border: 0; margin-block-start: calc(-1 * var(--space-xs)); }
.pattern-style-launch .button { width: auto; }
.estimate-formula { border-inline-start: 0; background: transparent; padding-inline: 0; border-block-start: var(--rule-thin) solid var(--color-rule); }
.estimate-fields { container-type: inline-size; }
@media (max-width: 40rem) {
  .estimate-fields { grid-template-columns: minmax(0, 1fr); }
}
.design-dimensions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-md); padding-block: var(--space-sm); border-block-start: var(--rule-thin) solid var(--color-rule); font-size: var(--text-sm); }
.design-dimensions strong { font-family: var(--font-mono); font-weight: 500; }
.file-details { flex: 0 0 auto; font-size: var(--text-sm); }
.file-details > summary { cursor: pointer; padding-block: var(--space-xs); }
.file-details .spec-sheet { margin-block: var(--space-sm); }
@media (min-width: 60rem) and (max-height: 45rem) {
  .preview-heading { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs) var(--space-sm); }
  .preview-heading > div { grid-column: auto; }
  .preview-heading .preview-mode { grid-column: 2; grid-row: 1; }
  .preview-heading > .status-chip { grid-column: 1 / -1; justify-self: start; }
  .preview-heading > div > p { display: none; }
  .app-footer p { display: none; }
  .app-footer { justify-content: flex-end; }
  #desktopPreviewHost .artboard { min-height: 12rem; flex-basis: 12rem; }
}
@media (min-width: 60rem) and (max-height: 45rem) {
  .preview-heading { grid-template-columns: minmax(0, 1fr) auto auto; }
  .preview-heading > .status-chip { grid-column: auto; }
  .inspector-panel:not([open]) .inspector-heading { padding-block: var(--space-xs); }
  .inspector-panel:not([open]) #inspectorSummary { display: none; }
}
@media (min-width: 60rem) and (max-height: 45rem) and (pointer: fine) {
  .app-footer__links a { min-height: 2rem; }
}