/* ---------------------------------------------------------------------------
   Business card designer.
   Shares the sticker builder's panel furniture (.sb-panel, .sb-field,
   .sb-price) and adds what is particular to a card: two sides, a fixed shape,
   and guides for the trim and safe area.
   --------------------------------------------------------------------------- */

.cb { margin-top: var(--space-6); }

.cb-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: var(--space-6);
  align-items: start;
}

.cb-preview-col { position: sticky; top: 120px; }

/* ------------------------------------------------------------- the sides ---*/

.cb-sides { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.cb-side-tab {
  min-height: 40px;
  padding: 0 var(--space-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--bg);
  font: inherit;
  font-weight: 700;
  font-size: var(--step--1);
  color: var(--ink-soft);
  cursor: pointer;
}
.cb-side-tab.is-on { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-dark); }

/* ------------------------------------------------------------- the card ---*/

.cb-stage {
  padding: var(--space-6);
  background: var(--bg-alt);
  border-radius: var(--r-lg);
  display: flex;
  justify-content: center;
}
.cb-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  /* the full sheet, bleed included: 91 x 61 mm */
  aspect-ratio: 91 / 61;
  box-shadow: var(--sh-2);
  background: #fff;
}
.cb-card canvas { display: block; width: 100%; height: 100%; }

.cb-guide { position: absolute; pointer-events: none; }
/* 3mm of 91mm across, 3mm of 61mm down */
.cb-guide-trim {
  inset: 4.918% 3.297%;
  outline: 1px solid rgba(255, 0, 255, .75);
}
/* the safe area is a further 4mm in */
.cb-guide-safe {
  inset: 11.475% 7.692%;
  outline: 1px dashed rgba(0, 160, 255, .8);
}
.cb-card.hide-guides .cb-guide { display: none; }

.cb-stage-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}
.cb-dims { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }

/* ----------------------------------------------------------- the choices ---*/

.cb-choices { display: grid; gap: var(--space-2); }
.cb-choice {
  display: grid;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  font: inherit;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.cb-choice:hover { border-color: var(--accent-line); }
.cb-choice.is-on { border-color: var(--accent); background: var(--accent-tint); }
.cb-choice-name { font-weight: 700; font-size: var(--step--1); }
.cb-choice-blurb { font-size: var(--step--2); color: var(--ink-mute); }

.cb-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.cb-swatch {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  padding: var(--space-3) var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  font: inherit;
  cursor: pointer;
}
.cb-swatch:hover { border-color: var(--accent-line); }
.cb-swatch.is-on { border-color: var(--accent); background: var(--accent-tint); }
.cb-swatch-chip {
  display: flex;
  width: 100%;
  height: 26px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--line);
}
.cb-swatch-bg { flex: 2; }
.cb-swatch-accent { flex: 1; }
.cb-swatch-name { font-size: var(--step--2); color: var(--ink-soft); text-align: center; }

.btn-block { width: 100%; }

@media (max-width: 980px) {
  .cb-layout { grid-template-columns: 1fr; }
  .cb-preview-col { position: static; }
}