:root,
[data-theme="light"] {
  color-scheme: light;

  /* Official Aerolidz design tokens. */
  --color-primary: #121212;
  --color-background: #ffffff;
  --color-background-secondary: #f3f3f3;
  --color-accent: #f96601;
  --color-accent-hover: #d95500;
  --color-success: #2e7d32;
  --color-warning: #ed6c02;
  --color-danger: #d32f2f;
  --color-info: #0288d1;
  --color-text-primary: #121212;
  --color-text-muted: #5f6368;
  --color-border: #d9dde3;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  /* One accent, one place: the lights toggle on the vehicle render. The hyper
     yellow of the partner's Jeep, and nowhere else, per the brand agreement. */
  --color-hyper-yellow: #d6fe00;
  --color-glow-orange: #ff7a00;
  --color-glow-blue: #00aeef;
  --color-glow-white: #ffffff;
  --color-glow-red: #d32f2f;

  --font-heading: Oswald, Impact, "Arial Narrow", sans-serif;
  --font-body: Rubik, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  --font-size-h1: 2.5rem;
  --font-size-h2: 2rem;
  --font-size-h3: 1.5rem;
  --font-size-h4: 1.25rem;
  --font-size-subtitle: 1.125rem;
  --font-size-body: 1rem;
  --font-size-small: 0.875rem;
  --font-size-caption: 0.75rem;

  --line-height-heading: 1.1;
  --line-height-body: 1.5;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --elevation-1: 0 4px 16px rgba(18, 18, 18, 0.08);
  --elevation-2: 0 16px 40px rgba(18, 18, 18, 0.1);
  --elevation-3: 0 24px 64px rgba(18, 18, 18, 0.16);
  --glow-orange: 0 0 28px rgba(255, 122, 0, 0.3);
  --glow-blue: 0 0 28px rgba(0, 174, 239, 0.24);
  --glow-white: 0 0 28px rgba(255, 255, 255, 0.32);
  --glow-red: 0 0 28px rgba(211, 47, 47, 0.22);

  --duration-fast: 120ms;
  --duration-standard: 180ms;
  --duration-slow: 260ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  --breakpoint-mobile: 720px;
  --breakpoint-tablet: 1050px;
  --breakpoint-desktop: 1480px;
  --touch-target-min: 44px;

  /* Backward-compatible aliases for existing screens. */
  --ink: var(--color-text-primary);
  --muted: var(--color-text-muted);
  --line: var(--color-border);
  --panel: var(--color-surface);
  --paper: var(--color-background-secondary);
  --black: var(--color-primary);
  --yellow: var(--color-accent);
  --blue: var(--color-info);
  --green: var(--color-success);
  --red: var(--color-danger);
  --cyan: var(--color-glow-blue);
  --orange: var(--color-accent);
  --glow: var(--glow-orange);
  --shadow: var(--elevation-2);
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-primary: #ffffff;
  --color-background: #121212;
  --color-background-secondary: #1d1d1d;
  --color-text-primary: #ffffff;
  --color-text-muted: #c7c7c7;
  --color-border: #343434;
  --color-surface: #1a1a1a;
  --color-surface-raised: #222222;
  --ink: var(--color-text-primary);
  --muted: var(--color-text-muted);
  --line: var(--color-border);
  --panel: var(--color-surface);
  --paper: var(--color-background);
  --black: #121212;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.36);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

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

a {
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  line-height: var(--line-height-heading);
  letter-spacing: 0;
}

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

.ds-surface {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-1);
}

.ds-card {
  display: grid;
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.ds-card.is-artwork-first {
  padding: var(--space-2);
}

.ds-card.is-artwork-first img {
  display: block;
  width: 100%;
  aspect-ratio: 12.09 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
}

.ds-control-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-2);
}

.ds-status {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-small);
  font-weight: 850;
}

.ds-status.success {
  color: var(--color-success);
  background: #e8f5e9;
  border-color: #a5d6a7;
}

.ds-status.warning {
  color: var(--color-warning);
  background: #fff4e5;
  border-color: #ffcc80;
}

.ds-status.danger {
  color: var(--color-danger);
  background: #ffebee;
  border-color: #ef9a9a;
}

.ds-status.info {
  color: var(--color-info);
  background: #e1f5fe;
  border-color: #81d4fa;
}

@keyframes ds-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ds-scale-in {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes ds-slide-up {
  from {
    opacity: 0;
    transform: translateY(var(--space-2));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ds-glow-pulse {
  0%,
  100% {
    box-shadow: var(--glow-orange);
  }
  50% {
    box-shadow: 0 0 42px rgba(255, 122, 0, 0.42);
  }
}

.app-shell {
  width: min(1480px, calc(100% - 32px));
  margin: 0 auto;
  padding: 18px 0 42px;
}

.topbar,
.panel-heading,
.commerce-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.topbar {
  min-height: 76px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}

.studio-progress {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0 0 18px;
  padding: 10px;
  border-radius: 8px;
  background: #111418;
  color: #fff;
  box-shadow: var(--glow);
}

.studio-progress span {
  flex: 1;
  text-align: center;
  color: var(--color-background);
  font-weight: 900;
}

.studio-progress span:first-child {
  color: var(--color-accent);
}

.topbar h1,
.panel-heading h2,
.commerce-strip h2 {
  margin: 0;
  letter-spacing: 0;
}

.topbar h1 {
  font-size: clamp(1.45rem, 2.6vw, 2.3rem);
  line-height: 1.05;
}

.topbar-actions,
.action-row,
.form-row,
.dialog-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(360px, 0.72fr) minmax(460px, 1fr);
  gap: 18px;
  align-items: start;
}

.workspace > *,
.split-layout > *,
.tool-panel,
.preview-panel,
.vault-section,
.commerce-strip {
  min-width: 0;
}

.tool-panel,
.preview-panel,
.vault-section,
.commerce-strip {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.tool-panel,
.preview-panel,
.vault-section {
  padding: 18px;
}

.commerce-strip {
  margin: 18px 0;
  padding: 16px 18px;
}

.studio-form {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.progress-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.progress-steps span {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  text-align: center;
}

.progress-steps span.is-active {
  color: var(--color-background);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.help-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.standard-insert-card,
.pro-tips-panel {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf4;
  padding: 12px;
}

.standard-insert-card h3,
.standard-insert-card p,
.pro-tips-panel p {
  margin: 0;
}

.standard-insert-card h3 {
  font-size: 1.25rem;
}

.help-label,
.compact-heading strong {
  display: flex;
  align-items: center;
  gap: 6px;
}

.help-dot,
.tab-help {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  /* The circle stays 20px; the finger gets 40. A transparent border grows the
     hit target without growing the dot, and background-clip keeps the fill
     inside the drawn circle. */
  border: 11px solid transparent;
  box-shadow: inset 0 0 0 1px var(--line);
  background: #fff;
  background-clip: padding-box;
  box-sizing: content-box;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}

.pro-tips-panel {
  background: #eefaf8;
}

.pro-tips-panel span {
  display: block;
  color: #215f5a;
  font-weight: 750;
}

.tutorial-dialog,
.support-dialog {
  width: min(720px, calc(100vw - 28px));
}

.tutorial-progress {
  color: var(--muted);
  font-weight: 800;
}

.support-form {
  display: grid;
  gap: 10px;
}

.file-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.file-list span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.field-label {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  margin-bottom: 6px;
}

textarea,
input,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 11px 12px;
  outline: none;
}

textarea:focus,
input:focus,
select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(21, 111, 209, 0.14);
}

.mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
}

.swatch {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  min-height: 42px;
  padding: 8px;
  font-weight: 800;
  cursor: pointer;
}

.swatch span {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.18);
}

.swatch.is-active {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(244, 123, 32, 0.16);
}

.assistant-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff, #fff8e4);
  padding: 12px;
}

.layer-text-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
}

.manual-builder-panel {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
}

.wizard-step-grid,
.manual-toolbar,
.nudge-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.wizard-choice,
.upload-choice,
.font-card,
.effect-card,
.nudge-grid button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  min-height: 48px;
  padding: 10px;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.wizard-choice.is-active,
.font-card:focus,
.effect-card:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(249, 102, 1, 0.18);
}

.upload-choice {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
}

.upload-choice input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.text-wizard-panel,
.touch-picker {
  display: grid;
  gap: 10px;
}

.text-wizard-panel[hidden],
.touch-picker[hidden] {
  display: none;
}

.wizard-stage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mobile-text-entry {
  min-height: 54px;
  border: 2px solid var(--color-accent);
  border-radius: 8px;
  padding: 12px;
  font: 900 1.25rem var(--font-heading);
}

.font-card-list,
.effect-card-list {
  display: grid;
  gap: 8px;
  max-height: 280px;
  overflow: auto;
  overscroll-behavior: contain;
}

.font-card,
.effect-card {
  display: grid;
  gap: 3px;
  text-align: left;
}

.font-card strong,
.effect-card span {
  font-size: 1.2rem;
  line-height: 1.1;
}

.font-card span,
.font-card small {
  color: var(--muted);
  font-size: 0.76rem;
}

.touch-picker label {
  display: grid;
  gap: 6px;
  font-weight: 850;
}

.touch-picker input[type="range"] {
  width: 100%;
  min-height: 36px;
}


.advanced-layer-controls {
  margin-top: 10px;
}

.advanced-layer-controls summary {
  cursor: pointer;
  font-weight: 800;
}

.advanced-layer-controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.checkbox-field {
  align-items: center;
  grid-template-columns: auto 1fr;
}

.layer-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.wide-button {
  width: 100%;
  justify-content: center;
}

.layer-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  margin: 8px 0 12px;
}

.layer-list {
  display: grid;
  gap: 6px;
}

.layer-row {
  display: flex;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 8px 10px;
  font-weight: 800;
  text-align: left;
}

.layer-row small {
  color: var(--muted);
  font-weight: 700;
}

.layer-row.is-locked {
  opacity: 0.7;
}

.compact-heading {
  margin-bottom: 10px;
}

.assistant-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mode-button,
.segment,
.button,
.icon-button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  min-height: var(--touch-target-min);
  transition:
    transform var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.mode-button {
  padding: 9px 10px;
  font-size: 0.9rem;
  font-weight: 750;
  text-align: left;
}

.mode-button.is-active {
  background: #101419;
  color: #fff;
  border-color: #101419;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  padding: 10px 14px;
  font-weight: 850;
  text-decoration: none;
}

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

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

.button.outline {
  background: transparent;
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.button.danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: #fff;
}

.button.success {
  background: var(--color-success);
  border-color: var(--color-success);
  color: #fff;
}

.button.approve {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.button.subtle {
  background: #fff;
}

.button:disabled,
.mode-button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.button.is-loading,
.button[aria-busy="true"] {
  cursor: progress;
  opacity: 0.82;
}

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

.credit-chip,
.spec-badge,
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 7px 10px;
  font-weight: 850;
  white-space: nowrap;
}

.credit-chip {
  background: #111418;
  color: #fff;
  border-color: #111418;
}

.credit-chip span:first-child {
  color: var(--yellow);
}

.spec-badge {
  background: #e9f6f8;
  color: #075767;
  border-color: #bfe4ea;
}

.status-pill {
  color: #384250;
  font-size: 0.82rem;
}

.status-pill.approved,
.status-pill.ordered,
.status-pill.favorite {
  color: #064e3b;
  background: #dcfce7;
  border-color: #a7f3d0;
}

.status-pill.issue {
  color: #7f1d1d;
  background: #fee2e2;
  border-color: #fecaca;
}

.review-notice {
  margin: 4px 0 6px;
  padding: 6px 10px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fff5f5;
  color: #7f1d1d;
  font-size: 0.85rem;
}

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  min-width: 220px;
}

.quality-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.segment {
  padding: 9px 10px;
  font-weight: 800;
}

.quality-grid .segment {
  display: grid;
  gap: 3px;
  align-content: start;
  min-height: 78px;
  text-align: left;
}

.quality-grid .segment strong,
.quality-grid .segment span {
  display: block;
}

.quality-grid .segment span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.25;
}

.segment.is-active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.quality-grid .segment.is-active span {
  color: rgba(255, 255, 255, 0.82);
}

.form-row {
  align-items: end;
}

.form-row > * {
  flex: 1;
}

.preview-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  /* Driven by the selected insert size (app.js sets --insert-aspect); the 52 inch
     ratio is only the fallback. */
  aspect-ratio: var(--insert-aspect, 12.09) / 1;
  min-height: 116px;
  margin: 18px 0 14px;
  overflow: hidden;
  border: 1px solid #aeb8c5;
  border-radius: 8px;
  background: #0b0d10;
  box-shadow: var(--glow);
  touch-action: pan-x pan-y;
}

/* The vehicle and production tabs render full panels rather than the insert
   itself, so they size to their content instead of to the insert ratio. */
.preview-stage.is-panel {
  aspect-ratio: auto;
  min-height: 0;
  overflow: visible;
  place-items: stretch;
}

/* In panel mode the badge sits under the panel: floating it would cover the
   safe-zone frame it is meant to describe. */
.preview-stage.is-panel .provider-badge {
  position: static;
  max-width: none;
  margin-top: 10px;
}

.provider-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  max-width: min(92%, 560px);
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 8px;
  background: rgba(11, 13, 16, 0.82);
  color: #fff;
  padding: 7px 9px;
  font-size: 0.78rem;
  font-weight: 900;
  overflow-wrap: anywhere;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.preview-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.empty-preview {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0.8);
  background:
    linear-gradient(90deg, #0d1014, #1b6f8a 36%, #e0b83c 62%, #111418),
    #111418;
}

.empty-preview span {
  font-size: clamp(1.3rem, 5vw, 3.5rem);
  font-weight: 950;
}

.orientation-notice {
  display: none;
  margin: 10px 0 0;
  color: #8a4b06;
  font-weight: 850;
}

.preview-switcher {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.preview-tab,
.preview-chip {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  min-height: 40px;
  font-weight: 850;
  cursor: pointer;
}

.preview-tab.is-active,
.preview-chip {
  background: #111418;
  border-color: #111418;
  color: #fff;
}

.artwork-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -4px 0 12px;
}

.artwork-toolbar span {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 7px 9px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 850;
}

.vehicle-preview {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 300px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 232, 163, 0.25), transparent 42%),
    linear-gradient(180deg, #171b22, #07090c);
  overflow: hidden;
}

/* The photo sets the shape of the stage. The insert overlay is positioned in
   percentages of THIS box, and the image is object-fit contain, so any mismatch
   letterboxes the photo and slides the overlay off the vehicle. 16/6 stays as
   the fallback for the drawn shell when no photo has been supplied. The height
   cap keeps a portrait photo from turning the preview into a tower. */
.vehicle-studio {
  position: relative;
  display: grid;
  place-items: center;
  /* The last term caps the HEIGHT by limiting width, because a max-height would
     override the aspect ratio, letterbox the photo inside a box of a different
     shape, and slide the insert overlay off the vehicle. --vehicle-aspect is a
     plain number (width / height) set from the photo as it loads; 2.667 is the
     old 16/6, kept for the drawn shell when no photo exists. */
  width: min(820px, 94%, calc(62vh * var(--vehicle-aspect, 2.667)));
  aspect-ratio: var(--vehicle-aspect, 2.667);
}

.garage-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 238, 187, 0.28), transparent 28%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  z-index: 0;
}

.vehicle-reference-image {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 24px 32px rgba(0, 0, 0, 0.44));
}

.vehicle-fallback-shell {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 12%;
  z-index: 1;
  display: grid;
  place-items: center;
  height: 48%;
  border-radius: 38px 38px 18px 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--vehicle-color) 80%, #fff 20%), var(--vehicle-color)),
    #222;
  border: 4px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.36);
  color: #fff;
  text-align: center;
}

.vehicle-brand,
.vehicle-fallback-shell small {
  opacity: 0.74;
}

.vehicle-fallback-shell strong {
  font-size: clamp(1.4rem, 4vw, 2.4rem);
}

.installed-insert {
  position: absolute;
  /* Driven by the uploaded photo's recorded placement, defaulting to the seeded
     framing so existing vehicles are untouched. */
  left: var(--insert-left, 16%);
  top: var(--insert-top, 41%);
  z-index: 4;
  width: var(--insert-width, 68%);
  height: var(--insert-height, 7%);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.56);
  background: #090b0e;
  box-shadow:
    0 0 14px rgba(255, 245, 180, 0.9),
    0 0 34px rgba(255, 220, 120, 0.55);
  transform: scaleX(var(--insert-scale));
  transform-origin: center;
}

.installed-insert img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The spill is the insert's glow bleeding onto the paint, so it follows the
   insert rather than sitting at its own fixed coordinates. */
.vehicle-light-spill {
  position: absolute;
  left: calc(var(--insert-left, 16%) + 2%);
  top: calc(var(--insert-top, 41%) + 4%);
  z-index: 3;
  width: calc(var(--insert-width, 68%) - 4%);
  height: 22%;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(255, 241, 180, 0.64), rgba(255, 180, 64, 0.28) 42%, transparent 70%);
  filter: blur(8px);
  opacity: var(--insert-glow, 0.82);
  transform: scaleX(var(--insert-scale));
  transform-origin: center;
}

.lights-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 6;
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-pill);
  background: rgba(18, 18, 18, 0.72);
  color: #e8eaed;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.lights-toggle.is-on {
  border-color: var(--color-hyper-yellow);
  color: var(--color-hyper-yellow);
  box-shadow: 0 0 18px rgba(214, 254, 0, 0.35);
}

/* Lights off: the spill dies, the glow dies, and the insert reads as printed
   plastic instead of a lit panel. Honest, not just dimmer. */
.vehicle-preview.lights-off .vehicle-light-spill {
  opacity: 0;
}

.vehicle-preview.lights-off .garage-glow {
  opacity: 0.35;
}

.vehicle-preview.lights-off .installed-insert {
  /* The halo lives on the bar itself, not only on the artwork inside it. */
  box-shadow: none;
  border-color: rgba(255, 255, 255, 0.24);
}

.vehicle-preview.lights-off .installed-insert img {
  filter: brightness(0.52) saturate(0.82);
}

.vehicle-helper {
  position: absolute;
  right: 10px;
  bottom: 6px;
  left: 10px;
  z-index: 5;
  margin: 0;
  color: #cbd5e1;
  font-size: 0.78rem;
  font-weight: 850;
  text-align: center;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.preview-angles {
  display: none;
}

.production-preview {
  display: grid;
  grid-template-columns: 120px minmax(220px, 1fr);
  gap: 16px;
  align-items: center;
  width: 100%;
  min-height: 240px;
  padding: 18px;
  color: #fff;
  background: linear-gradient(135deg, #111418, #29313b);
}

.score-dial {
  display: grid;
  place-items: center;
  width: 110px;
  height: 110px;
  border-radius: 999px;
  border: 5px solid var(--yellow);
  background: rgba(255, 255, 255, 0.08);
}

.score-dial strong {
  font-size: 2rem;
}

.safe-zone-frame {
  grid-column: 1 / -1;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  /* Must match the artwork it overlays: the text and badge safe zones are
     percentages of the SELECTED insert, not of the 52 inch canvas. */
  aspect-ratio: var(--insert-aspect, 12.09) / 1;
  background: #090b0e;
}

.safe-zone-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.editable-canvas-frame {
  position: relative;
  width: 100%;
  height: 100%;
}

.editable-canvas-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.badge-zone {
  position: absolute;
  top: 0;
  right: 1.95%;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 3.89%;
  background: rgba(244, 197, 66, 0.28);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  text-align: center;
}

.text-safe-zone {
  position: absolute;
  inset: 11.76% 5.84%;
  display: grid;
  place-items: start;
  padding: 4px 8px;
  border: 1px dashed rgba(255, 255, 255, 0.72);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

.text-boundary-box {
  position: absolute;
  display: block;
  border: 1px dashed rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 1px rgba(17, 20, 24, 0.7), 0 0 14px rgba(0, 0, 0, 0.35);
  cursor: move;
  pointer-events: auto;
}

.text-boundary-box.is-locked {
  border-style: solid;
  cursor: not-allowed;
  opacity: 0.76;
}

.text-boundary-label {
  position: absolute;
  left: 8px;
  top: 6px;
  max-width: calc(100% - 16px);
  overflow: hidden;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
}

.text-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid #111418;
  border-radius: 999px;
  background: #f7c542;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.text-handle.corner {
  right: -7px;
  bottom: -7px;
  cursor: nwse-resize;
}

.text-handle.rotate {
  left: 50%;
  top: -22px;
  transform: translateX(-50%);
  cursor: grab;
}

.validation-list {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--color-warning);
  font-weight: 800;
}

.panorama-result {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.panorama-preview-image {
  display: block;
  width: 100%;
  aspect-ratio: 12.094 / 1;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #111418;
}

.download-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.panorama-result .validation-list,
.panorama-build-row .validation-list {
  color: var(--muted);
}

.ideas-dialog {
  width: min(1040px, calc(100vw - 28px));
}

.gallery-search {
  margin-bottom: 12px;
  width: 100%;
}

.gallery-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.background-quick-controls {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}

.color-section {
  display: grid;
  gap: 6px;
}

.color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px;
}

.color-swatch {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
  font-weight: 800;
  text-align: left;
}

.color-swatch span {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(17, 20, 24, 0.22);
  border-radius: 999px;
  flex: 0 0 auto;
}

.custom-color-row,
.gradient-controls {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: end;
}

.gradient-controls {
  grid-template-columns: 1fr auto auto 1fr auto;
}

.addon-summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff8e4;
  padding: 10px 12px;
  margin: 0 0 12px;
  font-weight: 900;
}

.addon-summary span {
  color: #0f766e;
}

.ideas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  max-height: min(64vh, 620px);
  overflow: auto;
  padding: 2px;
}

.idea-card {
  position: relative;
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
  cursor: pointer;
}

.idea-card span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.idea-thumb {
  display: grid;
  place-items: center;
  min-height: 76px;
  border-radius: 7px;
  background: linear-gradient(110deg, hsl(var(--idea-a), 72%, 24%), hsl(var(--idea-b), 88%, 58%)), #111418;
  color: #fff;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 2rem;
  font-weight: 900;
  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.55);
}

.idea-font {
  background: #111418;
}

.idea-clipart {
  background: linear-gradient(135deg, #0f766e, #f7c542);
}

.favorite-dot {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 2;
  border: 1px solid rgba(17, 20, 24, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  width: 30px;
  height: 30px;
  color: #6b7280;
  font-weight: 900;
}

.favorite-dot.is-active {
  color: #f2a900;
}

.object-boundary-box {
  position: absolute;
  display: block;
  border: 1px dotted rgba(247, 197, 66, 0.95);
  box-shadow: 0 0 0 1px rgba(17, 20, 24, 0.7), 0 0 14px rgba(0, 0, 0, 0.35);
  cursor: move;
  pointer-events: auto;
}

.object-boundary-label {
  position: absolute;
  left: 8px;
  top: 6px;
  max-width: calc(100% - 16px);
  overflow: hidden;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
}

.object-boundary-box.is-locked {
  cursor: not-allowed;
  opacity: 0.76;
}

.drop-zone {
  display: grid;
  gap: 8px;
  border: 2px dashed var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 18px;
  text-align: center;
}

.palette-row {
  grid-template-columns: 1fr 110px 80px repeat(3, auto);
}

.design-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0 14px;
}

.meta-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  min-height: 64px;
  background: #fafbfd;
}

.meta-item span {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.meta-item strong {
  display: block;
  overflow-wrap: anywhere;
}

.package-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
  width: min(760px, 100%);
}

.package {
  border: 1px solid var(--line);
  border-left: 5px solid var(--cyan);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.package strong {
  display: block;
  margin-bottom: 4px;
}

.package span {
  color: var(--muted);
  font-size: 0.86rem;
}

.bundle-panel {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.bundle-reason,
.bundle-value {
  margin: 6px 0;
  color: var(--muted);
  font-weight: 750;
}

.bundle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.bundle-card {
  display: grid;
  gap: 8px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
  min-height: 260px;
}

.bundle-card.is-recommended {
  border-color: #d7a818;
  box-shadow: var(--glow);
}

.bundle-card h3,
.bundle-card p {
  margin: 0;
}

.bundle-card h3 {
  font-size: 1.05rem;
}

.bundle-card > strong {
  color: #075767;
}

.bundle-card ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.88rem;
}

.bundle-badge {
  justify-self: start;
  border: 1px solid #d7a818;
  border-radius: 8px;
  background: #fff4c4;
  color: #6f4b00;
  padding: 4px 7px;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.vault-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.design-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.design-card img {
  display: block;
  width: 100%;
  aspect-ratio: var(--insert-aspect, 12.09) / 1;
  object-fit: cover;
  background: #111418;
}

.design-card-body {
  padding: 12px;
}

.design-card h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.design-card p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.35;
}

.card-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.card-actions .button {
  min-width: 0;
  min-height: 44px;
  padding: 8px 8px;
  font-size: 0.84rem;
}

.shipment-workflow {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 10px;
  align-items: stretch;
  margin: 12px 0;
}

.workflow-step {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.workflow-step h3 {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.15;
}

.workflow-step .eyebrow {
  margin: 0;
}

.workflow-step .button {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 8px 8px;
  font-size: 0.82rem;
}

.shipment-filter-cards {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.shipment-summary-board {
  display: grid;
  grid-template-columns: minmax(210px, 1.25fr) minmax(160px, 0.8fr) minmax(220px, 1.15fr) minmax(170px, 0.85fr) minmax(170px, 0.85fr);
  gap: 10px;
  margin-top: 12px;
}

.billing-recovery-summary-board {
  grid-template-columns: minmax(280px, 1.35fr) minmax(240px, 0.9fr);
  max-width: 760px;
}

.shipment-summary-group {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.shipment-summary-group h3 {
  margin: 0 0 2px;
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.summary-line {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 34px;
  padding: 6px 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.summary-line:first-of-type {
  border-top: 0;
}

.summary-line span {
  font-size: 1.35rem;
  font-weight: 950;
  line-height: 1;
}

.summary-line strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--black);
}

.filter-card {
  display: grid;
  gap: 4px;
  width: 100%;
  min-height: 92px;
  text-align: left;
  cursor: pointer;
}

.filter-card.is-active {
  border-color: var(--black);
  box-shadow: 0 0 0 2px rgba(17, 20, 24, 0.12);
}

.summary-line.filter-card.is-active {
  padding-left: 8px;
  border-color: var(--black);
  border-radius: 6px;
  background: #f8fafc;
}

.billing-recovery-impact .summary-line {
  grid-template-columns: 1fr;
  align-items: start;
  min-height: 96px;
}

.billing-recovery-impact .summary-line span {
  display: block;
  max-width: 100%;
  font-size: 1.45rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.billing-recovery-impact .summary-line strong {
  display: block;
  line-height: 1.15;
}

.shipment-controls {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(140px, 1fr) minmax(120px, 0.8fr) auto auto auto;
  gap: 8px;
  align-items: end;
  margin-top: 12px;
}

.shipment-controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
}

.compact-summary {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.shipping-setup-panel {
  margin-top: 14px;
}

.form-message {
  min-height: 22px;
  margin: 0;
  color: var(--muted);
}

.form-message.error {
  color: var(--red);
  font-weight: 800;
}

.dialog {
  width: min(720px, calc(100% - 24px));
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 18px;
}

.dialog::backdrop {
  background: rgba(17, 20, 24, 0.34);
}

.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 6px;
}

/* Show-floor sizing: these are tapped standing up on a 55 inch panel. */
.dialog-actions .button {
  min-height: 52px;
  padding-inline: 22px;
  font-size: 16px;
}

#cartPayloadDetails summary {
  cursor: pointer;
  color: var(--muted, #5f6368);
  margin-bottom: 8px;
}

.dialog pre {
  max-height: 420px;
  overflow: auto;
  background: #0f141a;
  color: #f4f7fb;
  border-radius: 8px;
  padding: 14px;
}

/* The QR code is read by a phone camera from arm's length across a booth, so it
   is large, on white, and never scaled below the size a camera resolves easily. */
.photo-handoff-dialog {
  width: min(460px, calc(100% - 24px));
  text-align: center;
}

.photo-handoff-qr {
  display: flex;
  justify-content: center;
  margin: 6px 0 14px;
  min-height: 260px;
  align-items: center;
}

.photo-handoff-qr-image {
  width: 260px;
  height: 260px;
  background: #ffffff;
  border-radius: 8px;
  padding: 8px;
  /* A QR code that a browser has smoothed is a QR code that scans slowly. */
  image-rendering: pixelated;
}

.photo-handoff-address {
  color: var(--muted);
  font-size: 13px;
  word-break: break-all;
}

.photo-handoff-token {
  font-family: var(--font-heading);
  font-size: 20px;
  letter-spacing: 0.18em;
  color: var(--color-text-primary);
}

.photo-handoff-preview {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: 8px;
  margin: 12px 0;
  background: #0f141a;
}

.guided-photo {
  width: 100%;
  min-height: 48px;
}

.share-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.share-page {
  width: min(980px, calc(100% - 28px));
  margin: 0 auto;
  padding: 42px 0;
}

.share-page h1 {
  margin: 0 0 16px;
  font-size: clamp(1.7rem, 4vw, 3rem);
}

.share-page img {
  display: block;
  width: 100%;
  aspect-ratio: 12.09 / 1;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #111418;
  margin: 18px 0;
}

.icon-button {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  font-weight: 900;
}

.admin-layout {
  display: grid;
  gap: 18px;
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
}

.metric {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.metric span {
  display: block;
  font-size: 2rem;
  font-weight: 950;
}

.metric strong {
  color: var(--muted);
}

.orders-table {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.order-row {
  display: grid;
  grid-template-columns: 180px minmax(260px, 1fr) 220px;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.order-row img {
  width: 100%;
  aspect-ratio: 12.09 / 1;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
}

.order-info h3 {
  margin: 0 0 6px;
}

.order-info p {
  margin: 0 0 4px;
  color: var(--muted);
}

.order-controls {
  display: grid;
  gap: 8px;
}

.order-controls textarea {
  min-height: 74px;
}

.backoffice-shell {
  max-width: 1560px;
}

.login-panel {
  display: grid;
  place-items: start center;
  padding-top: 32px;
}

.login-form {
  width: min(460px, 100%);
}

.backoffice-app {
  display: grid;
  gap: 18px;
}

.backoffice-metrics {
  grid-template-columns: repeat(6, minmax(150px, 1fr));
}

.backoffice-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.tab-button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  min-height: 40px;
  padding: 9px 12px;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
}

.tab-button.is-active {
  background: #101419;
  border-color: #101419;
  color: #fff;
}

.tab-panel {
  display: none;
}

.tab-panel.is-active {
  display: block;
}

.split-layout {
  display: grid;
  grid-template-columns: minmax(360px, 0.7fr) minmax(480px, 1fr);
  gap: 18px;
  align-items: start;
}

.compact-form {
  display: grid;
  gap: 11px;
}

.compact-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.check-row {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 8px;
  color: var(--ink) !important;
}

.check-row input {
  width: auto;
}

.data-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.data-row,
.approval-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.data-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.data-row h3,
.approval-row h3 {
  margin: 0 0 5px;
  font-size: 1rem;
}

.data-row p,
.approval-row p {
  margin: 0 0 4px;
  color: var(--muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.double-charge-row {
  border-left-width: 5px;
}

.double-charge-row.status-refund-recommended {
  border-left-color: var(--red);
  background: #fff5f5;
}

.double-charge-row.status-review {
  border-left-color: var(--orange);
  background: #fffaf1;
}

.double-charge-row.status-already-resolved,
.double-charge-row.status-safe {
  border-left-color: var(--green);
  background: #f2fbf7;
}

.double-charge-row.status-excluded {
  border-left-color: var(--muted);
  background: #f8fafc;
}

.double-charge-investigation-panel {
  gap: 12px;
}

.double-charge-investigation-table {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-x: auto;
  background: #fff;
}

.double-charge-investigation-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.1fr) minmax(140px, 0.75fr) minmax(140px, 0.75fr) minmax(260px, 1.4fr) minmax(220px, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 54px;
  min-width: 980px;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
  border-left: 5px solid transparent;
}

.double-charge-investigation-row:first-child {
  border-top: 0;
}

.double-charge-investigation-head {
  min-height: 34px;
  border-left-color: transparent;
  background: #f8fafc;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.double-charge-investigation-row.status-refund-recommended {
  border-left-color: var(--red);
  background: #fff5f5;
}

.double-charge-investigation-row.status-review {
  border-left-color: var(--orange);
  background: #fffaf1;
}

.double-charge-investigation-row.status-already-resolved,
.double-charge-investigation-row.status-safe {
  border-left-color: var(--green);
}

.double-charge-investigation-row.status-excluded {
  border-left-color: var(--muted);
  background: #f8fafc;
}

.investigation-cell {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.investigation-cell span,
.investigation-cell strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.investigation-cell span {
  color: var(--muted);
}

.investigation-status-cell {
  gap: 5px;
}

.investigation-badges {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.status-pill.investigation-pill {
  min-height: 26px;
  padding: 4px 7px;
  font-size: 0.76rem;
}

.status-pill.investigation-pill.safe {
  color: #064e3b;
  background: #dcfce7;
  border-color: #a7f3d0;
}

.status-pill.investigation-pill.warning {
  color: #7c2d12;
  background: #ffedd5;
  border-color: #fed7aa;
}

.status-pill.investigation-pill.danger {
  color: #7f1d1d;
  background: #fee2e2;
  border-color: #fecaca;
}

.status-pill.investigation-pill.muted {
  color: #475569;
  background: #f8fafc;
  border-color: #cbd5e1;
}

.shipment-row input[type="checkbox"] {
  width: auto;
  margin-right: 8px;
}

.shipment-section {
  gap: 10px;
}

.section-actions,
.section-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.compact-button {
  min-height: 34px;
  padding: 7px 10px;
}

.shipment-table {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.shipment-table-row {
  display: grid;
  grid-template-columns: 34px minmax(170px, 1.1fr) minmax(190px, 1.1fr) minmax(150px, 0.8fr) minmax(170px, 1fr) minmax(260px, 1.4fr);
  gap: 10px;
  align-items: center;
  min-height: 46px;
  padding: 7px 10px;
  border-top: 1px solid var(--line);
}

.shipment-table-row:first-child {
  border-top: 0;
}

.shipment-table-head {
  min-height: 34px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.shipment-cell {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: var(--black);
  overflow-wrap: anywhere;
}

.shipment-cell span,
.shipment-cell a {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shipment-cell strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select-cell {
  justify-items: center;
}

.customer-cell span,
.reason-cell span {
  color: var(--muted);
}

.reason-cell {
  font-size: 0.88rem;
}

.inline-link {
  color: var(--blue);
  font-weight: 900;
  text-decoration: none;
}

.inline-link:hover {
  text-decoration: underline;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}

.checkbox-row input[type="checkbox"] {
  width: auto;
  min-width: 18px;
  min-height: 18px;
}

.checkbox-row.compact {
  gap: 7px;
  font-size: 0.9rem;
}

.advanced-drawer {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.advanced-drawer summary {
  cursor: pointer;
  font-weight: 900;
}

.shipping-banner-preview {
  border: 1px solid #e4c85d;
  border-radius: 8px;
  background: #fff7d6;
  color: #2b2410;
  padding: 14px;
  font-weight: 800;
  line-height: 1.4;
}

.data-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inline-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.inline-fields label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.inline-fields label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  color: var(--ink);
}

.inline-fields input[type="checkbox"] {
  width: auto;
}

.provider-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.provider-checks label {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  color: var(--ink);
  font-size: 0.82rem;
}

.provider-checks input {
  width: auto;
}

.provider-result-grid {
  display: grid;
  gap: 12px;
}

.provider-result-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.provider-result-card img {
  width: 100%;
  aspect-ratio: 12 / 1;
  object-fit: cover;
  border-radius: 6px;
  background: #101419;
}

.provider-result-card h3 {
  margin: 10px 0 4px;
}

.provider-result-card p {
  margin: 0 0 5px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.provider-result-card textarea {
  min-height: 70px;
}

.production-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.production-steps span {
  border: 1px solid #d7a818;
  border-radius: 8px;
  background: #fff9df;
  padding: 9px;
  font-size: 0.82rem;
  font-weight: 900;
  text-align: center;
}

.production-queue-row .order-controls {
  gap: 8px;
}

.approval-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.approval-row {
  display: grid;
  grid-template-columns: 190px minmax(260px, 1fr) 230px;
  gap: 14px;
  align-items: start;
}

.approval-row img {
  width: 100%;
  aspect-ratio: 12.09 / 1;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #111418;
}

.panorama-build-row {
  grid-template-columns: minmax(0, 1fr) 180px;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
  margin: 10px 0;
}

.media-thumb {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}

.media-thumb img {
  width: 100%;
  aspect-ratio: 12.094 / 1;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #111418;
}

.media-thumb span {
  font-size: 0.8rem;
}

.approval-row .order-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.approval-row .order-controls textarea {
  grid-column: 1 / -1;
}

.routing-layout {
  grid-template-columns: minmax(520px, 1fr) minmax(420px, 0.75fr);
}

.routing-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 8px;
  margin: 16px 0;
}

.flow-step {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fafbfd;
  padding: 8px;
}

.flow-step span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #111418;
  color: #fff;
  font-weight: 900;
}

.flow-step strong {
  font-size: 0.86rem;
  line-height: 1.18;
}

.decision-table,
.provider-metrics,
.sample-scenario {
  display: grid;
  gap: 8px;
}

.decision-head,
.decision-row,
.provider-row,
.sample-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
}

.decision-head {
  background: #111418;
  color: #fff;
  font-weight: 900;
}

.provider-row h3 {
  margin: 0 0 3px;
  font-size: 1rem;
}

.provider-row p,
.sample-row span {
  margin: 0;
  color: var(--muted);
}

.provider-row strong,
.sample-row strong {
  text-align: right;
}

.margin-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.metric.compact {
  padding: 12px;
}

.metric.compact span {
  font-size: 1.35rem;
}

.sample-scenario {
  margin-top: 12px;
}

.sample-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.sample-heading .eyebrow {
  margin: 0;
}

.sample-row.total {
  border-color: #d7a818;
  background: #fff9df;
}

@media (max-width: 1050px) {
  .workspace,
  .order-row,
  .split-layout,
  .approval-row {
    grid-template-columns: 1fr;
  }

  .routing-flow,
  .margin-grid,
  .assistant-grid,
  .progress-steps,
  .media-grid {
    grid-template-columns: 1fr;
  }

  .commerce-strip {
    align-items: stretch;
    flex-direction: column;
  }

  .package-list {
    width: 100%;
  }

  .shipment-table-row {
    grid-template-columns: 30px minmax(170px, 1fr) minmax(170px, 1fr) minmax(150px, 0.8fr);
  }

  .shipment-table-row .shipment-cell:nth-child(5),
  .shipment-table-row .shipment-cell:nth-child(6),
  .shipment-table-head span:nth-child(5),
  .shipment-table-head span:nth-child(6) {
    display: none;
  }
}

@media (max-width: 720px) {
  .app-shell {
    width: min(100% - 20px, 1480px);
    padding-top: 10px;
  }

  .topbar,
  .panel-heading,
  .form-row,
  .topbar-actions,
  .studio-progress {
    align-items: stretch;
    flex-direction: column;
  }

  .mode-grid,
  .quality-grid,
  .help-action-grid,
  .assistant-grid,
  .gallery-filters,
  .custom-color-row,
  .gradient-controls,
  .layer-action-grid,
  .package-list,
  .design-meta,
  .metric-row,
  .backoffice-metrics,
  .data-row,
  .preview-switcher,
  .swatch-grid,
  .bundle-grid,
  .media-grid,
  .production-preview {
    grid-template-columns: 1fr;
  }

  .orientation-notice {
    display: block;
  }

  .preview-stage {
    min-height: 150px;
  }

  .action-row,
  .card-actions {
    grid-template-columns: 1fr;
    display: grid;
  }

  .shipment-workflow {
    grid-template-columns: 1fr;
  }

  .shipment-summary-board {
    grid-template-columns: 1fr;
  }

  .shipment-controls {
    grid-template-columns: 1fr;
  }

  .button {
    width: 100%;
  }

  .section-actions,
  .section-footer {
    justify-content: stretch;
  }

  .shipment-table-head {
    display: none;
  }

  .shipment-table-row {
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: start;
    padding: 10px;
  }

  .shipment-table-row .shipment-cell {
    display: grid;
  }

  .shipment-table-row .shipment-cell:nth-child(n + 3) {
    grid-column: 2;
  }

  .shipment-cell span,
  .shipment-cell a,
  .shipment-cell strong {
    white-space: normal;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .preview-panel {
    position: relative;
  }

  .preview-stage {
    min-height: 180px;
    margin: 10px 0;
  }

  .orientation-notice {
    display: none;
  }
}

/* =====================================================================
   SHOW FLOW  (tradeshow build)
   The ONLY place customer-facing screens are shown or hidden.
   Everything keys off one attribute: body[data-flow].
   Do not add visibility rules for these sections anywhere else.
   ===================================================================== */

.flow-group {
  display: grid;
  gap: 12px;
}

.start-screen {
  display: none;
  min-height: 70vh;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
  text-align: center;
}

.start-inner {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  max-width: 1100px;
  width: 100%;
}

.start-inner h2 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: var(--line-height-heading);
  margin: 0;
}

.start-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  width: 100%;
}

.start-choice {
  display: grid;
  gap: var(--space-2);
  align-content: center;
  min-height: 240px;
  padding: var(--space-5);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--elevation-1);
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.start-choice:hover,
.start-choice:focus-visible {
  border-color: var(--color-accent);
  box-shadow: var(--elevation-2);
  transform: translateY(-2px);
}

.start-choice-title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-primary);
}

.start-choice-note {
  font-size: var(--font-size-subtitle);
  color: var(--color-text-muted);
  line-height: var(--line-height-body);
}

.flow-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

.flow-label {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

/* --- visibility: single source of truth --- */

body[data-flow="start"] .start-screen {
  display: flex;
}

body[data-flow="start"] .flow-bar,
body[data-flow="start"] .studio-progress,
body[data-flow="start"] .workspace,
body[data-flow="start"] .commerce-strip,
body[data-flow="start"] .vault-section {
  display: none;
}

body[data-flow="ai"] [data-flow-part="manual"],
body[data-flow="manual"] [data-flow-part="ai"] {
  display: none;
}

/* Vehicles belong to the render page, never the generator screen. */
[data-flow-part="vehicle"] {
  display: none;
}

body[data-preview-tab="vehicle"] [data-flow-part="vehicle"] {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

@media (max-width: 900px) {
  .start-choices {
    grid-template-columns: minmax(0, 1fr);
  }

  .start-choice {
    min-height: 160px;
  }
}

/* --- Booth mode: what a walk-up visitor must never see ---------------
   Staff surfaces, internal balances and other visitors' saved designs
   are hidden whenever the show flow is driving the page. Enabled by
   body[data-booth="on"], set from the ?booth=1 URL the panel opens.
   -------------------------------------------------------------------- */

body[data-booth="on"] #adminButton,
body[data-booth="on"] .credit-chip,
body[data-booth="on"] .commerce-strip,
body[data-booth="on"] .vault-section {
  display: none;
}

/* The take-home pitch on the start screen: what saving the app to a phone
   gets a visitor, with the steps their platform actually uses. Hidden at the
   booth (the panel pushes phones through the QR handoff instead) and inside
   the installed app itself. */
.install-hint {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  width: 100%;
  max-width: 640px;
  padding: var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.install-hint p {
  margin: 0;
  color: var(--color-text-muted);
}

.install-hint-steps {
  font-weight: 600;
}

body[data-booth="on"] .install-hint {
  display: none;
}

@media (display-mode: standalone) {
  .install-hint {
    display: none;
  }
}

/* The insert is display only on touch: the browser keeps its normal page
   scroll and never treats the artwork as a drag or pinch target. */
.preview-stage {
  touch-action: pan-y;
}

.preview-stage .text-boundary-box,
.preview-stage .object-boundary-box {
  touch-action: pan-y;
}

/* --- Guided designer: tap a style, a scene, a color, type the words ------- */

.guided-designer {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.guided-step {
  padding-bottom: 2px;
}

.guided-step h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--font-size-h4);
  /* Heading line-height is 1.1, which clips descenders on "say?" unless the
     line box is allowed a little room of its own. */
  line-height: 1.25;
}

.guided-step .eyebrow {
  margin: 0 0 2px;
}

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

.guided-tile {
  display: grid;
  gap: 6px;
  justify-items: center;
  align-content: center;
  min-height: 104px;
  padding: var(--space-3) var(--space-2);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.guided-tile:hover,
.guided-tile:focus-visible {
  border-color: var(--color-accent);
}

.guided-tile.is-active {
  border-color: var(--color-accent);
  background: var(--color-background-secondary);
}

.guided-tile-icon {
  font-size: 1.75rem;
  line-height: 1;
}

.guided-tile-label {
  font-weight: 850;
  font-size: var(--font-size-small);
  text-align: center;
  color: var(--color-text-primary);
}

.guided-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.guided-chip {
  min-height: 48px;
  padding: 0 var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-weight: 800;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.guided-chip:hover,
.guided-chip:focus-visible {
  border-color: var(--color-accent);
}

.guided-chip.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-background);
}

.guided-saying {
  min-height: 56px;
  font-size: var(--font-size-h4);
  font-family: var(--font-heading);
  text-transform: uppercase;
}

.guided-go {
  min-height: 64px;
  font-size: var(--font-size-subtitle);
}

.guided-go[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.pro-prompt {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.pro-prompt > summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--color-text-muted);
}

.pro-prompt[open] {
  display: grid;
  gap: 12px;
}

@media (max-width: 900px) {
  .guided-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The thing the customer came to do goes first. Help, size details and pro
   tips stay available underneath instead of pushing the designer off screen. */
body[data-flow="ai"] .flow-group[data-flow-part="ai"],
body[data-flow="manual"] [data-flow-part="manual"] {
  order: -2;
}

body[data-flow="ai"] .help-action-grid,
body[data-flow="manual"] .help-action-grid {
  order: 4;
}

body[data-flow="ai"] .standard-insert-card,
body[data-flow="manual"] .standard-insert-card {
  order: 5;
}

/* The five-step chip row still says "Vehicle" as step one, which is no longer
   where the customer starts. It is guidance, not navigation, so it moves out
   of the way on the show flows. */
body[data-flow="ai"] .progress-steps,
body[data-flow="manual"] .progress-steps {
  display: none;
}

@media (max-width: 640px) {
  /* The stage strip is non-interactive guidance. On a phone it stacked into
     four full-width rows and pushed the designer down the page. */
  .studio-progress {
    gap: 4px;
    padding: 6px;
  }

  .studio-progress span {
    font-size: var(--font-size-caption);
  }
}

/* --- Results: four designs, four actions each --------------------------- */

.result-set {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* One design per row. The insert is 12.1:1, so a card in a two column grid drew
   the artwork about twenty pixels tall, which is not enough to choose from and
   choosing is the entire purpose of this screen. Full width doubles it, and
   Render is still there for a proper look on the vehicle. */
.result-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.result-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.result-art {
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-background-secondary);
  aspect-ratio: 12.1 / 1;
}

.result-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A slot that has not come back yet. It holds the exact footprint of a finished
   card, so the grid is laid out once and nothing moves under a tapping finger
   as the designs land. */
.result-card.is-pending .result-art,
.result-card.is-failed .result-art {
  display: grid;
  place-items: center;
}

.result-card.is-pending .result-art {
  background: linear-gradient(
    100deg,
    var(--color-background-secondary) 40%,
    var(--color-surface) 50%,
    var(--color-background-secondary) 60%
  );
  background-size: 300% 100%;
  animation: result-slot-sweep 1.6s linear infinite;
}

.result-card.is-failed .result-art {
  border: 1px dashed var(--color-border);
  background: var(--color-background-secondary);
}

/* Reserves the action row a landed card will have, so filling a slot does not
   grow the card and shove the slots below it under a finger already moving. */
.result-card.is-pending::after,
.result-card.is-failed::after {
  content: "";
  min-height: 48px;
}

.result-pending-note {
  margin: 0;
  font-size: var(--font-size-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

@keyframes result-slot-sweep {
  from {
    background-position: 150% 0;
  }
  to {
    background-position: -150% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .result-card.is-pending .result-art {
    animation: none;
  }
}

.result-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.result-action {
  /* Overrides .button's min-width of 112px, which is sized for full width
     toolbars. Inside a card it forced the row past the card's edge and clipped
     Render to "Ren", with Buy hidden underneath Trash. */
  min-width: 0;
  min-height: 48px;
  padding: 0 4px;
  font-size: var(--font-size-small);
}

/* Below roughly 520px of card the four labels stop fitting, so they stack two
   by two, which is a better finger target anyway. */
@media (max-width: 1100px) {
  .result-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.button.danger {
  border-color: var(--color-danger);
  color: var(--color-danger);
  background: var(--color-surface);
}

/* The checkmark. Unchecked it reads as the next step; checked it reads as
   already in the order, and the big Buy below counts it. */
.button.result-pick {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.button.result-pick.is-picked {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #ffffff;
}

/* Gabe: "a big by loud button in both windows". This is the one in the results
   window; the render page carries its twin. */
.result-buy {
  width: 100%;
  min-height: 60px;
  font-size: 1.05rem;
}

.render-set-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.render-set-thumb {
  position: relative;
  padding: 0;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  overflow: hidden;
  cursor: pointer;
  min-height: 44px;
}

.render-set-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 12.1 / 1;
  object-fit: cover;
}

.render-set-thumb.is-active {
  border-color: var(--color-primary);
}

.render-set-thumb.is-picked {
  border-color: var(--color-accent);
}

.render-set-check {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 900;
}

.render-buy {
  width: 100%;
  min-height: 60px;
  margin-top: 10px;
  font-size: 1.05rem;
}

.button.danger:hover {
  background: var(--color-danger);
  color: var(--color-background);
}

.form-message.is-error {
  color: var(--color-danger);
  font-weight: 800;
}

@media (max-width: 900px) {
  .result-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===========================================================================
   TOUCH TARGETS
   Gated on pointer: coarse, which is the booth's 55 inch touchscreen and a
   visitor's phone, and leaves a mouse desktop exactly as it was. Gabe's whole
   complaint about the customizer he copied was that it is unusable on a phone,
   so the controls a finger has to find get a real target.
   =========================================================================== */
@media (pointer: coarse) {
  .preview-tab,
  input[type="color"] {
    min-height: 44px;
  }

  /* The thumb is what the finger chases; the track can stay slim. */
  input[type="range"] {
    height: 44px;
  }

  input[type="checkbox"] {
    width: 24px;
    height: 24px;
  }

  /* The help dots are 20px on purpose: they sit inline beside headings and
     growing them would push the headings around. Grow the HIT AREA instead,
     which is what a finger actually misses.
     KNOWN, measured and left: this does not help the dots inside the collapsed
     "Write my own prompt" disclosure, where a sibling panel overlaps them and
     wins on document order alone (every element in the chain is static with no
     z-index). Untangling that layout is not a week-of-the-show job, and those
     dots are in the one part of the screen a booth visitor never opens. */
  .help-dot {
    position: relative;
  }

  .help-dot::after {
    content: "";
    position: absolute;
    inset: -12px;
  }

  /* A checkbox's label is part of its target, so give the pair room. */
  .checkbox-row,
  label:has(> input[type="checkbox"]) {
    min-height: 44px;
    align-items: center;
  }
}

/* ============================================================================
   AeroForge shell (the client's approved design language, rebuilt on this
   client). Appended as an override layer: the insert is always visible at the
   top, every edit happens in panels below it, and the chrome is black with
   orange actions, silver tool tiles, and one hyper yellow accent on Zoom.
   ========================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Header ---------------------------------------------------------------- */

.topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 56px;
  padding: 6px var(--space-3);
  background: var(--color-primary);
  color: #ffffff;
  border-bottom: 3px solid var(--color-accent);
}

.brand-block {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-wordmark {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.brand-wordmark b {
  color: var(--color-accent);
}

.brand-sub {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.topbar-center {
  display: flex;
  gap: var(--space-1);
}

.history-button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-sm);
  background: #1e1e1e;
  color: #ffffff;
  font-size: 1.1rem;
  cursor: pointer;
}

.history-button:disabled {
  opacity: 0.35;
  cursor: default;
}

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

.topbar .credit-chip {
  background: #1e1e1e;
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #ffffff;
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
}

.button.chrome-button {
  background: #1e1e1e;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  min-height: 40px;
}

.topbar .button.chrome-button:hover {
  border-color: var(--color-accent);
}

.button.finish-button {
  background: var(--color-accent);
  color: #121212;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 2px solid #7a3200;
}

.button.finish-button:hover {
  background: var(--color-accent-hover);
}

/* Outside the header, chrome buttons read as industrial gray tiles. */
.workspace .button.chrome-button,
.start-screen .button.chrome-button,
.vault-section .button.chrome-button,
.dialog .button.chrome-button {
  background: linear-gradient(180deg, #f6f6f6, #d9d9d9);
  color: #121212;
  border: 1px solid #9c9c9c;
}

/* --- Always visible insert stage ------------------------------------------ */

.insert-stage {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
  border-bottom: 2px solid var(--color-primary);
  padding: 8px 10px;
}

.insert-stage-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.insert-stage-inner::-webkit-scrollbar {
  height: 4px;
}

.insert-canvas {
  position: relative;
  flex: 1;
  min-width: 0;
  width: 100%;
  aspect-ratio: 12.0941 / 1;
  min-height: 44px;
  background: #000000;
  overflow: hidden;
  container-type: size;
  box-shadow: 0 6px 18px rgba(18, 18, 18, 0.35), 0 0 0 2px #2b2b2b;
}

/* Portrait phones: a strict 12:1 at screen width is a sliver, so the strip
   runs wider than the screen and pans; it never leaves the top of the page. */
@media (max-width: 700px) and (orientation: portrait) {
  .insert-canvas {
    width: 185%;
    flex: 0 0 auto;
  }
}

.insert-stage.is-zoomed .insert-canvas {
  width: 280%;
  flex: 0 0 auto;
}

.insert-stage-side {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  flex: 0 0 auto;
  position: sticky;
  right: 0;
}

.zoom-insert-button {
  background: var(--color-hyper-yellow);
  color: #121212;
  border: 2px solid #121212;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 10px;
  cursor: pointer;
}

.insert-size-chip {
  font-size: 0.62rem;
  font-weight: 700;
  text-align: center;
  color: var(--muted);
}

.insert-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.insert-placeholder span {
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(0.8rem, 42cqh, 2.4rem);
  letter-spacing: 0.18em;
}

.insert-safe-frame {
  position: absolute;
  z-index: 40;
  inset: 11.8% 5.85%;
  border: 1px dashed rgba(255, 140, 40, 0.85);
  pointer-events: none;
}

.insert-safe-frame i {
  position: absolute;
  top: -1px;
  left: 0;
  font-style: normal;
  font-size: clamp(5px, 8cqh, 9px);
  line-height: 1;
  padding: 1px 3px;
  background: rgba(255, 140, 40, 0.85);
  color: #121212;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.logo-overlay-chip {
  position: absolute;
  z-index: 41;
  right: 1%;
  bottom: 8%;
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-heading);
  font-size: clamp(4px, 9cqh, 10px);
  letter-spacing: 0.12em;
  pointer-events: none;
}

.live-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.live-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.live-design {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.live-text {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

.live-text i {
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  /* inline-block so the per font baseline nudge in insert-stage.js applies:
     transforms are ignored on a non replaced inline element. */
  display: inline-block;
}

.live-object {
  position: absolute;
  pointer-events: none;
}

body.is-blackout .insert-canvas {
  filter: brightness(0.2);
}

body.is-blackout .insert-canvas .live-text {
  filter: brightness(2.4);
}

/* --- Start screen ----------------------------------------------------------- */

.start-screen {
  padding: var(--space-4) var(--space-3) var(--space-6);
  background: var(--paper);
}

.start-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.start-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  width: 100%;
}

.start-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 96px;
  padding: var(--space-3);
  border: 2px solid #6e2d00;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #ff8a2a, var(--color-accent) 70%);
  color: #121212;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(249, 102, 1, 0.35);
}

.start-choice:hover {
  background: linear-gradient(180deg, #ff9a45, var(--color-accent-hover) 75%);
}

.start-choice-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: #121212;
  color: var(--color-hyper-yellow);
  font-size: 1.1rem;
}

.start-choice-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.start-choice-note {
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(18, 18, 18, 0.82);
  text-align: center;
  max-width: 30ch;
}

@media (max-width: 560px) {
  .start-choices {
    grid-template-columns: 1fr;
  }
}

/* --- Step strip -------------------------------------------------------------- */

.flow-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-3);
  background: var(--color-background-secondary);
  border-bottom: 1px solid var(--line);
}

.flow-label {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  color: var(--muted);
}

.studio-progress {
  display: flex;
  gap: 2px;
  padding: 0 var(--space-3);
  background: var(--color-background-secondary);
  border-bottom: 1px solid var(--line);
}

.studio-progress span {
  flex: 1;
  text-align: center;
  padding: 7px 0 6px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #9a9a9a;
  border-bottom: 3px solid transparent;
}

.studio-progress span:first-child {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* --- Panel regions under the insert ---------------------------------------- */

.workspace {
  display: block;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-3);
}

.tool-panel,
.preview-panel {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.panel-region {
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

.region-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-primary);
}

.region-heading h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.panel-kicker {
  margin: 0 0 var(--space-2);
  padding: 4px 8px;
  display: inline-block;
  background: var(--color-primary);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* One attribute picks the open panel on phones; desktop shows them together. */
@media (max-width: 1023px) {
  .panel-region {
    display: none;
  }

  body[data-panel="insert"] .panel-region[data-region="insert"],
  body[data-panel="background"] .panel-region[data-region="background"],
  body[data-panel="text"] .panel-region[data-region="text"],
  body[data-panel="layers"] .panel-region[data-region="layers"],
  body[data-panel="preview"] .panel-region[data-region="preview"],
  body[data-panel="create"] .panel-region[data-region="create"] {
    display: block;
  }
}

/* Tool tiles: industrial silver, dark icon, uppercase label. */
.wizard-step-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.wizard-choice.tool-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 84px;
  padding: 10px 6px;
  border: 1px solid #8f8f8f;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #f7f7f7 0%, #d4d4d4 60%, #bdbdbd 100%);
  color: #121212;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #ffffff, 0 3px 8px rgba(18, 18, 18, 0.18);
}

.wizard-choice.tool-tile:hover,
.wizard-choice.tool-tile.is-active {
  border-color: var(--color-accent);
  box-shadow: inset 0 1px 0 #ffffff, 0 0 0 2px rgba(249, 102, 1, 0.45);
}

.tile-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: #262626;
  color: var(--color-accent);
  border-radius: var(--radius-sm);
  font-size: 1.05rem;
}

@media (max-width: 560px) {
  .wizard-choice.tool-tile {
    min-height: 72px;
    font-size: 0.66rem;
  }
}

/* Background gallery lives inline under the insert now. */
.background-gallery {
  margin-top: var(--space-3);
}

.background-gallery .ideas-grid {
  max-height: 46vh;
  overflow-y: auto;
}

/* Flat text tool: everything visible at once, no staged Done buttons. */
body[data-flat-text="on"] #textWizardDoneButton,
body[data-flat-text="on"] [data-wizard-next],
body[data-flat-text="on"] #outlineDoneButton,
body[data-flat-text="on"] #shadowDoneButton {
  display: none !important;
}

body[data-flat-text="on"] #textWizardStageLabel {
  display: inline-block;
  padding: 4px 8px;
  background: var(--color-primary);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.text-panel-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

@media (min-width: 700px) {
  .text-panel-columns {
    grid-template-columns: 1fr 1fr;
  }
}

.text-panel-columns .touch-picker {
  margin-bottom: var(--space-3);
}

.manual-toolbar {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* --- Bottom tab bar ---------------------------------------------------------- */

.panel-tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: flex;
  gap: 6px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--color-primary);
  border-top: 2px solid var(--color-accent);
}

.panel-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 2px;
  border: 1px solid #7a3200;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #ff8a2a, var(--color-accent) 75%);
  color: #121212;
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  min-height: 48px;
}

.panel-tab.is-active {
  background: #ffffff;
  border-color: var(--color-accent);
  color: #121212;
  box-shadow: 0 0 0 2px rgba(249, 102, 1, 0.5);
}

.panel-tab-icon {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  background: #262626;
  color: var(--color-accent);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 900;
}

body[data-flow="start"] .panel-tab-bar {
  display: none;
}

body:not([data-flow="start"]) {
  padding-bottom: 84px;
}

/* Packages and the vault are start-screen material; during a build they are
   noise below the working panels. */
body:not([data-flow="start"]) .commerce-strip,
body:not([data-flow="start"]) .vault-section {
  display: none;
}

.commerce-strip,
.vault-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-3);
}

/* --- Dialogs that must not cover the insert --------------------------------- */

.dialog.sheet-dialog {
  position: fixed;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  width: 100%;
  max-width: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border: 0;
  border-top: 3px solid var(--color-accent);
  max-height: 55vh;
  overflow-y: auto;
}

.dialog.sheet-dialog::backdrop {
  background: transparent;
}

/* --- Desktop ----------------------------------------------------------------- */

.desktop-only {
  display: none !important;
}

@media (min-width: 1024px) {
  .desktop-only {
    display: inline-flex !important;
  }

  .panel-tab-bar {
    display: none;
  }

  body:not([data-flow="start"]) {
    padding-bottom: var(--space-4);
  }

  .workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--space-3);
    align-items: start;
  }

  .panel-region {
    display: block;
  }

  .insert-stage {
    padding: 10px 24px;
  }
}

/* Compact chrome on phones: the header and step strip must stay single rows;
   the older stacked-mobile rules above would eat a third of a portrait screen. */
@media (max-width: 720px) {
  .topbar,
  .topbar-actions {
    flex-direction: row;
    align-items: center;
  }

  .topbar {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .topbar-actions {
    gap: 6px;
    margin-left: auto;
  }

  .brand-wordmark {
    font-size: 1.1rem;
  }

  .brand-sub {
    display: none;
  }

  .history-button {
    width: 34px;
    height: 34px;
    font-size: 0.95rem;
  }

  .topbar .credit-chip {
    padding: 4px 8px;
    font-size: 0.66rem;
  }

  .topbar #adminButton {
    min-height: 34px;
    padding: 0 8px;
    font-size: 0.72rem;
  }

  .button.finish-button {
    min-height: 38px;
    padding: 0 12px;
    font-size: 0.85rem;
  }

  .studio-progress {
    flex-direction: row;
    align-items: center;
  }

  .flow-bar {
    padding: 4px var(--space-2);
  }

  .flow-bar .button.chrome-button {
    min-height: 34px;
    padding: 0 10px;
    font-size: 0.75rem;
  }

  .flow-label {
    font-size: 0.68rem;
  }
}

/* The Background and Text panels are manual-mode surfaces; in the AI flow
   their regions are inside the hidden manual builder, so their tabs and the
   gallery button would open nothing. */
body[data-flow="ai"] [data-panel-tab="background"],
body[data-flow="ai"] [data-panel-tab="text"],
body[data-flow="ai"] #designIdeasButton {
  display: none;
}

/* ============================================================================
   r2: the Aerolidz logo in the header, and the insert made as large as each
   viewport allows. The strip is 51.4 x 4.25 inches, so its height is always
   width / 12.09: the only way to grow it is to give it every pixel of width.
   It now runs edge to edge, and its own controls sit in a bar underneath so
   nothing covers the artwork and the artwork covers nothing.
   ========================================================================== */

.brand-logo {
  display: block;
  height: 34px;
  width: auto;
}

.brand-block {
  flex: 0 0 auto;
}

/* Full-bleed stage: cancel the app shell's 16px side inset. */
.insert-stage,
body .insert-stage {
  margin-inline: -16px;
  width: calc(100% + 32px);
  padding: 6px 0 0;
}

.insert-stage-inner {
  gap: 0;
  align-items: stretch;
}

.insert-canvas {
  width: 100%;
  min-height: 48px;
}

/* Portrait keeps panning rather than collapsing to a sliver, and now that the
   strip is full bleed it can run wider than before. */
@media (max-width: 700px) and (orientation: portrait) {
  .insert-canvas {
    width: 200%;
    flex: 0 0 auto;
  }
}

.insert-stage-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 4px 16px 2px;
  background: var(--paper);
}

.insert-stage-bar .insert-size-chip {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.insert-stage-bar .zoom-insert-button {
  padding: 5px 12px;
  font-size: 0.68rem;
}

/* Less dead space above the header buys the panels back what the bar costs. */
.app-shell {
  padding-top: 0;
}

@media (min-width: 1024px) {
  .brand-logo {
    height: 40px;
  }

  .insert-stage-bar {
    padding: 5px 24px 3px;
  }
}

@media (max-width: 720px) {
  .brand-logo {
    height: 26px;
  }

  .insert-stage-bar {
    padding: 3px 10px 2px;
  }
}

/* ============================================================================
   r2: the industrial pass. Gabe: "like a mechanical generator, rough, steel
   rusted dirty, but sharp edges."

   The machine is industrial; the product it makes is pristine. Everything here
   dresses the chrome - header, tool tiles, buttons, panel headings, tab bar.
   The insert canvas and its safe-zone guides are deliberately untouched: no
   texture, no grunge, nothing competing with the customer's artwork.

   Every texture is drawn with gradients rather than downloaded, so the booth
   renders identically with the wifi unplugged. Rust is an edge accent only,
   and never sits under a label: where a texture fights legibility the label
   wins.
   ========================================================================== */

:root {
  /* Brushed steel: fine machining striations over a rolled light gradient. */
  --steel-plate:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.055) 0px,
      rgba(255, 255, 255, 0.055) 1px,
      rgba(0, 0, 0, 0.05) 1px,
      rgba(0, 0, 0, 0.05) 3px),
    linear-gradient(180deg, #3a3f45 0%, #23272c 45%, #191c20 55%, #2b3036 100%);
  --steel-light:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.5) 0px,
      rgba(255, 255, 255, 0.5) 1px,
      rgba(120, 128, 136, 0.22) 1px,
      rgba(120, 128, 136, 0.22) 3px),
    linear-gradient(180deg, #f2f4f6 0%, #d3d8dd 48%, #bcc3ca 52%, #e4e8eb 100%);
  /* Restrained oxide mottling for plate edges. */
  --rust-wash:
    radial-gradient(120px 26px at 12% 0%, rgba(150, 68, 21, 0.34), transparent 70%),
    radial-gradient(90px 20px at 68% 100%, rgba(122, 52, 16, 0.28), transparent 72%),
    radial-gradient(60px 16px at 92% 10%, rgba(168, 84, 30, 0.22), transparent 75%);
  --machined-edge: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -2px 0 rgba(0, 0, 0, 0.45);
}

/* Sharp edges everywhere on the machine. The artwork keeps its own shape. */
.topbar,
.panel-tab-bar,
.flow-bar,
.studio-progress,
.insert-stage-bar,
.panel-region .panel,
.panel-heading,
.button,
.history-button,
.credit-chip,
.wizard-choice,
.font-card,
.start-choice,
.zoom-insert-button {
  border-radius: 0;
}

/* --- Header: a rolled steel plate, riveted, with an oxide edge ------------- */

.topbar {
  background: var(--steel-plate);
  border-bottom: 3px solid var(--color-accent);
  box-shadow: inset 0 -14px 22px -18px rgba(0, 0, 0, 0.9), 0 2px 0 rgba(0, 0, 0, 0.5);
  position: relative;
}

.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--rust-wash);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* Rivet line along the plate, under the controls, never over a label. */
.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 7px;
  background-image: radial-gradient(circle at center,
    rgba(232, 238, 244, 0.55) 0 1.1px,
    rgba(20, 22, 25, 0.75) 1.4px 2.2px,
    transparent 2.4px);
  background-size: 26px 7px;
  opacity: 0.5;
  pointer-events: none;
}

.brand-logo {
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.7));
  position: relative;
  z-index: 1;
}

.history-button {
  background: var(--steel-plate);
  border: 1px solid #101316;
  box-shadow: var(--machined-edge);
  color: #eaeef2;
}

.history-button:hover:not(:disabled) {
  border-color: var(--color-accent);
}

.topbar .credit-chip {
  background: linear-gradient(180deg, #14171a, #0c0e10);
  border: 1px solid #454b52;
  box-shadow: var(--machined-edge);
}

/* --- Buttons: pressed steel, orange actions, machined bevels -------------- */

.button.chrome-button,
.workspace .button.chrome-button,
.start-screen .button.chrome-button,
.vault-section .button.chrome-button,
.dialog .button.chrome-button {
  background: var(--steel-light);
  color: #14171a;
  border: 1px solid #7d858d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -2px 0 rgba(0, 0, 0, 0.22);
  font-weight: 700;
}

.topbar .button.chrome-button {
  background: var(--steel-plate);
  color: #eaeef2;
  border: 1px solid #101316;
  box-shadow: var(--machined-edge);
}

.button.chrome-button:hover {
  border-color: var(--color-accent);
}

.button.finish-button,
.button.primary {
  border: 1px solid #6d2d00;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -3px 0 rgba(0, 0, 0, 0.32);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.14));
}

/* --- Tool tiles: brushed silver plates with hard corners ------------------- */

.wizard-choice,
.wizard-choice.tool-tile {
  background: var(--steel-light);
  border: 1px solid #767e86;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -3px 0 rgba(0, 0, 0, 0.2), 0 2px 0 rgba(0, 0, 0, 0.18);
  color: #14171a;
}

.wizard-choice:hover {
  border-color: var(--color-accent);
}

/* Machined corner notches: the detail that reads as cut steel rather than a
   rounded web card. */
.wizard-choice::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(20, 23, 26, 0.16);
  clip-path: polygon(0 0, 14px 0, 0 14px, 0 0, 100% 0, 100% 14px, calc(100% - 14px) 0, 100% 0, 100% 100%, calc(100% - 14px) 100%, 100% calc(100% - 14px), 100% 100%, 0 100%, 0 calc(100% - 14px), 14px 100%, 0 100%);
  pointer-events: none;
}

/* --- Panel headings: stencilled plate labels ------------------------------ */

.panel-heading,
.eyebrow {
  letter-spacing: 0.1em;
}

.panel-region .panel > .panel-heading {
  background: var(--steel-plate);
  color: #f2f5f8;
  padding: 8px 12px;
  box-shadow: var(--machined-edge);
}

.panel-region .panel > .panel-heading h2,
.panel-region .panel > .panel-heading h3 {
  color: #f2f5f8;
}

/* --- Tab bar: the control deck ------------------------------------------- */

.panel-tab-bar {
  background: var(--steel-plate);
  border-top: 3px solid var(--color-accent);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.45);
  position: relative;
}

.panel-tab-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--rust-wash);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.panel-tab-bar .panel-tab {
  border: 1px solid #101316;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -3px 0 rgba(0, 0, 0, 0.35);
}

/* --- Flow bar and step strip: bolted rails -------------------------------- */

.flow-bar,
.studio-progress {
  background: linear-gradient(180deg, #e9edf0, #d2d8dd);
  border-top: 1px solid #9aa2aa;
  border-bottom: 1px solid #9aa2aa;
}

/* --- The insert stage stays clean ----------------------------------------- */

.insert-stage {
  background: #0d0f11;
}

.insert-stage-bar {
  background: var(--steel-plate);
  color: #e7ecf1;
  border-bottom: 2px solid #000000;
}

.insert-stage-bar .insert-size-chip {
  color: #c3cbd3;
}

/* The canvas itself, its guides and the artwork inside it get nothing. */
.insert-canvas,
.insert-canvas * {
  filter: none;
}

/* --- Font list: he asked for plenty of fonts, so show plenty --------------- */

.font-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px;
  max-height: none;
  overflow: visible;
}

.font-card {
  border: 1px solid #8b939b;
  background: linear-gradient(180deg, #ffffff, #eceff2);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12);
  padding: 8px 10px;
}

.font-card strong {
  font-size: 1.02rem;
  line-height: 1.15;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.font-card span {
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6a727a;
}

.font-card small {
  display: none;
}

.center-text-button {
  width: 100%;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-height: 46px;
}

@media (max-width: 720px) {
  .font-card-list {
    grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  }

  .topbar::after {
    display: none;
  }
}

/* ============================================================================
   r3: the cinematic vehicle preview.

   Gabe: "is there anyway you can make that yellow Jeep look cinematic and in a
   better position and closer to the camera so you can see the insert more than
   the Jeep it's not really selling the product."

   His own render, cropped so the bar carries the frame. The overlay geometry
   comes from measuring the bar in that file, so the customer's artwork lands on
   the bar rather than near it. The pill shape and the warm bulb glow belong to
   the older drawn shell; a printed insert on a real light bar is a straight
   panel, so on this render it is square edged and its glow is the light the
   artwork itself throws.
   ========================================================================== */

.vehicle-preview.is-cinematic .vehicle-studio {
  width: min(900px, 100%, calc(62vh * var(--vehicle-aspect, 1.889)));
}

.vehicle-preview.is-cinematic .installed-insert {
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.18),
    0 1px 0 rgba(0, 0, 0, 0.55);
}

/* Stretch rather than crop: a 12:1 insert seen from the front of a vehicle is
   foreshortened, so filling the measured bar is what it actually looks like
   installed. Cropping would hide the ends of the customer's design. */
.vehicle-preview.is-cinematic .installed-insert img {
  object-fit: fill;
}

/* Lights on: the glow reads as the insert lighting its own surroundings, tight
   to the bar instead of the old wide bulb wash. */
.vehicle-preview.is-cinematic .vehicle-light-spill {
  left: calc(var(--insert-left, 9.47%) - 1%);
  top: calc(var(--insert-top, 12.44%) - 2%);
  width: calc(var(--insert-width, 80.71%) + 2%);
  height: 15%;
  background: radial-gradient(ellipse at center,
    rgba(214, 232, 255, 0.5),
    rgba(150, 190, 255, 0.22) 45%,
    transparent 72%);
  filter: blur(10px);
}

/* Lights on should look lit: the render is a night scene, so an unboosted
   panel reads as a sticker rather than an illuminated insert. */
.vehicle-preview.is-cinematic:not(.lights-off) .installed-insert img {
  filter: brightness(1.14) saturate(1.06);
}

.vehicle-preview.is-cinematic.lights-off .vehicle-light-spill {
  opacity: 0;
}

.vehicle-preview.is-cinematic.lights-off .installed-insert {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
  filter: brightness(0.86);
}

/* The lights button sat over the right hand end of the bar, which breaks the
   one rule that governs this whole build: a control never covers the insert. */
.vehicle-preview.is-cinematic .lights-toggle {
  top: auto;
  bottom: 30px;
  right: 10px;
  min-height: 34px;
  padding: 6px 12px;
  font-size: 0.72rem;
}

/* The render is the frame: the drawn placeholder shell and the studio wash
   underneath it would only fight the photograph. */
.vehicle-preview.is-cinematic .vehicle-fallback-shell,
.vehicle-preview.is-cinematic .garage-glow {
  display: none;
}

.vehicle-preview.is-cinematic .vehicle-reference-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The helper line sat across the vehicle. On the render it belongs under it. */
.vehicle-preview.is-cinematic .vehicle-helper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 5px 10px;
  background: linear-gradient(180deg, rgba(9, 11, 14, 0), rgba(9, 11, 14, 0.88) 55%);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.66rem;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* Back Office: the Production Queue tab is titled "Download print files" but
   covers only the old batch pipeline, so it reads as "no print files exist"
   while every order's PDF sits one click away under Orders. The pointer says
   so where the eye lands. */
.production-queue-pointer{margin:0 0 14px;padding:12px 14px;border-left:4px solid #f96601;background:#fff4e8;font-size:14px;line-height:1.45}
.production-queue-pointer a{color:#b54400}

.draft-design-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
}
.draft-design-preview,.draft-design-info{min-width:0}
.draft-design-info{margin-top:var(--space-3);overflow-wrap:anywhere}
.draft-design-info small{color:var(--color-primary)}
.draft-design-row .data-actions{flex-wrap:wrap;max-width:320px}
.draft-change-notes{border-left:4px solid var(--color-accent);padding-left:var(--space-2)}
.customer-proof-dialog{width:min(760px,95vw);max-height:90vh;overflow:auto;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4)}
.customer-proof-dialog label{display:grid;gap:var(--space-1)}
.customer-proof-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.customer-proof-dialog form{display:grid;gap:var(--space-3)}
.customer-proof-dialog input,.customer-proof-dialog textarea{width:100%;min-width:0}
.customer-proof-search{display:flex;gap:var(--space-2)}
.customer-proof-send{width:100%;min-height:56px}
@media(max-width:720px){.customer-proof-fields{grid-template-columns:1fr}.draft-design-row .data-actions{max-width:none}}

.order-insert-preview {
  display: block;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 12.09 / 1;
  object-fit: contain;
  background: var(--color-primary);
  margin-bottom: var(--space-3);
}
#orderReviewList .data-row {
  grid-template-columns: minmax(0, 1fr);
}
#orderReviewList .data-actions {
  flex-wrap: wrap;
  min-width: 0;
}
#orderReviewList .data-actions > * {
  max-width: 100%;
}
.draft-design-preview img,
.subscription-design-slot img {
  display: block;
  width: 100%;
  aspect-ratio: 12.09 / 1;
  object-fit: cover;
  background: #121212;
}

.subscription-package-row {
  display: block;
}

.subscription-design-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.subscription-design-slot {
  display: grid;
  gap: var(--space-2);
  min-height: 150px;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
}

.subscription-design-slot.is-empty {
  place-content: center;
  text-align: center;
  color: #68707a;
  background: #f3f3f3;
  border-style: dashed;
}

body[data-admin-studio] #headerTutorialButton,
body[data-admin-studio] #installButton,
body[data-admin-studio] #installHint,
body[data-admin-studio] #cartButton,
body[data-admin-studio] #manualAddToCartButton {
  display: none !important;
}

@media (max-width: 760px) {
  .draft-design-row,
  .subscription-design-grid {
    grid-template-columns: 1fr;
  }
}
:is([data-panel="print-jobs"], [data-panel="production-costs"]) .print-job-thumbnail {
  display: block;
  width: 100%;
  max-width: 36rem;
  height: auto;
  margin-top: var(--space-2);
  background: var(--color-primary);
}
[data-print-key] > div:first-child > label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
}
[data-print-key] input[data-print-select] {
  width: 20px;
  height: 20px;
  min-height: 20px;
  flex: 0 0 20px;
}
[data-panel="print-jobs"] .data-actions {
  flex-wrap: wrap;
}
[data-panel="print-jobs"] .data-actions > label {
  display: grid;
  gap: var(--space-1);
  min-width: 160px;
  flex: 1;
}
[data-panel="print-jobs"] .print-job-group {
  margin-block: var(--space-4);
}
[data-panel="print-jobs"] .print-job-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border-bottom: 2px solid var(--color-primary);
  margin-bottom: var(--space-2);
}
[data-panel="print-jobs"] .print-job-group-heading h3 { margin: 0; }
[data-panel="print-jobs"] .print-job-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
[data-panel="print-jobs"] .print-job-choice {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
[data-panel="print-jobs"] :is(.print-job-art, .print-job-details) {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  overflow-wrap: anywhere;
}
[data-panel="print-jobs"] .print-job-reference {
  font-family: var(--font-body);
  font-size: var(--font-size-subtitle);
}
[data-panel="print-jobs"] .print-job-crop {
  width: min(100%, 280px);
  height: 64px;
  position: relative;
  overflow: hidden;
  background: var(--color-primary);
  color: var(--color-background);
  border-radius: var(--radius-sm);
}
[data-panel="print-jobs"] .print-job-crop img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: contain;
}
[data-panel="print-jobs"] .print-job-missing {
  display: grid;
  place-items: center;
  padding: var(--space-2);
  font-size: var(--font-size-small);
}
[data-panel="print-jobs"] .print-job-hold {
  border-left: var(--space-1) solid var(--color-warning);
  padding-left: var(--space-2);
  margin: var(--space-1) 0;
}
[data-panel="print-jobs"] .print-job-file-list { flex-basis: 100%; padding-left: var(--space-4); overflow-wrap: anywhere; }
[data-panel="print-jobs"] .print-job-file-list small { display: block; }

.sub-workflow-controls { display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin:20px 0; }
.sub-workflow-controls label { display:grid;gap:6px;min-width:160px; }
.sub-workflow-controls input,.sub-workflow-controls select { min-height:44px; }
.sub-workflow-tier-grid,.sub-workflow-lanes,.sub-workflow-vault { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0; }
.sub-workflow-tier-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.sub-workflow-tier-grid article,.sub-workflow-lane,.sub-artwork-card { background:#fff;border:1px solid #d5d5d5;border-radius:8px;padding:16px;min-width:0;overflow-wrap:anywhere; }
.sub-workflow-tier-grid article { display:grid;gap:6px; }
.sub-workflow-lane>header { display:flex;justify-content:space-between;gap:12px;border-bottom:3px solid #F96601;margin-bottom:12px;align-items:center; }
.sub-artwork-card>strong,.sub-artwork-card>small { display:block;margin-top:8px; }
.sub-artwork-card img { display:block;width:100%;height:auto;max-height:140px;object-fit:contain;background:#121212; }
.sub-artwork-card .data-actions { display:flex;flex-wrap:wrap;gap:8px; }
.sub-artwork-card .button,.sub-workflow-lane .button { min-height:44px;white-space:normal; }
.sub-artwork-card .check-row { min-height:44px; }
.sub-artwork-card .check-row input { width:22px;height:22px; }
.sub-workflow-lane>.data-actions { margin-top:16px;display:flex;flex-wrap:wrap;gap:8px; }
@media(max-width:700px) { .sub-workflow-lanes,.sub-workflow-vault { grid-template-columns:1fr; }.sub-workflow-tier-grid {grid-template-columns:repeat(2,minmax(0,1fr));}.sub-workflow-controls {align-items:stretch;flex-direction:column;} }
[data-panel="print-jobs"] [data-print-deadline] {
  grid-column: 2 / -1;
  margin: 0;
}
@media (max-width: 720px) {
  [data-panel="print-jobs"] .print-job-row { grid-template-columns: 44px minmax(0, 1fr); }
  [data-panel="print-jobs"] .print-job-details { grid-column: 2; }
}
@media (max-width: 720px) {
  .backoffice-shell .topbar {
    flex-wrap: wrap;
    min-width: 0;
  }
  .backoffice-shell .topbar-actions {
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
  }
  .backoffice-shell .topbar-actions .status-pill {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
:is([data-print-key], [data-job-deadline])[data-urgency] {
  border-left: 6px solid var(--print-urgency, var(--color-border));
  padding: var(--space-3);
  background: color-mix(in srgb, var(--print-urgency, var(--color-border)) 12%, white);
}
[data-urgency="green"] { --print-urgency: var(--color-success, #2E7D32); }
[data-urgency="yellow"] { --print-urgency: #FFEB3B; }
[data-urgency="red"] { --print-urgency: var(--color-danger, #D32F2F); }
.backoffice-tabs [data-tab="print-jobs"][data-urgency="green"],
.backoffice-tabs [data-tab="print-jobs"][data-urgency="red"] {
  background: var(--print-urgency);
  color: #FFFFFF;
  border-color: var(--print-urgency);
}
.backoffice-tabs [data-tab="print-jobs"][data-urgency="yellow"] {
  background: var(--print-urgency);
  color: #121212;
  border-color: #121212;
}
.stock-production-panel { margin-top:24px; padding:16px; border:1px solid #121212; background:#F3F3F3; }
.stock-production-panel summary { font-weight:700; cursor:pointer; min-height:44px; }
.stock-production-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.stock-production-card { min-width:0; padding:16px; background:#fff; border-left:4px solid #F96601; overflow-wrap:anywhere; }
.stock-production-card img { display:block; width:100%; max-height:80px; object-fit:contain; margin:12px 0; }
.stock-production-card label { display:block; margin:12px 0 6px; }
.stock-production-card input:not([type="checkbox"]),.stock-production-card select { width:100%; min-width:0; min-height:44px; }
.stock-production-card .button { min-height:44px; margin-top:8px; max-width:100%; white-space:normal; }
.stock-production-card dl { display:grid; grid-template-columns:1fr auto; gap:4px 12px; }
.stock-production-card dd { margin:0; font-weight:700; }
@media(max-width:700px) { .stock-production-grid { grid-template-columns:1fr; } .stock-production-panel { padding:10px; } }
/* Limited metrics are unit observations, never inferred revenue or inventory. */
.limited-sales-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:16px; }
.limited-sales-card { min-width:0; padding:16px; border:1px solid #d5d9df; border-top:4px solid #F96601; border-radius:8px; background:#fff; overflow-wrap:anywhere; }
.limited-sales-card img { display:block; width:100%; height:auto; max-height:80px; object-fit:contain; background:#121212; margin:12px 0; }
.limited-sales-card dl { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; }
.limited-sales-card dt { min-width:0; }
.limited-sales-card dd { margin:0; font-weight:700; }
.limited-sales-card .button { width:100%; white-space:normal; }
.limited-sales-dates { font-size:12px; }
.limited-sales-note { padding-left:10px; border-left:3px solid #F96601; }