/* ---------------------------------------------------------------------------
   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 the safe-area guide, drawn as on the shop's price list.
   --------------------------------------------------------------------------- */

.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: 92 x 60 mm */
  aspect-ratio: 92 / 60;
  overflow: hidden;
  box-shadow: var(--sh-2);
  background: #fff;
}
.cb-card canvas { display: block; width: 100%; height: 100%; }

.cb-guide { position: absolute; pointer-events: none; }
/* The safe area, drawn as on the shop's price list: the 85 x 55 mm card in
   the middle of the sheet, and the bleed round it tinted red because it is
   cut off. card-builder.js places it from CARD in src/cards.js; these are
   the same numbers (2.5 of 60 mm down, 3.5 of 92 mm across), so the first
   paint is already right. */
.cb-guide-safe {
  inset: 4.167% 3.804%;
  outline: 1px solid rgba(200, 30, 30, .9);
  box-shadow: 0 0 0 100vmax rgba(220, 38, 38, .3);
}
.cb-card.hide-guides .cb-guide { display: none; }

/* With a design of the customer's own on this side, the preview moves it. */
.cb-card.is-draggable canvas { cursor: grab; touch-action: none; }
.cb-card.is-dragging canvas { cursor: grabbing; }
.cb-card canvas:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

/* Sample text, or the reason the back is empty, over the preview. */
.cb-overlay {
  position: absolute;
  top: 6px;
  left: 6px;
  margin: 0;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: rgba(17, 24, 39, .78);
  color: #fff;
  font-size: var(--step--2);
  white-space: nowrap;
  pointer-events: none;
}
/* On a light panel of its own, because the card under it can be any colour
   in the schemes: grey straight on "White on slate" was barely readable. */
.cb-overlay.is-blank {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: 78%;
  padding: 6px 12px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .94);
  color: var(--ink-soft);
  font-size: var(--step--1);
  text-align: center;
  white-space: normal;
}
.cb-overlay[hidden] { 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; }

/* A panel's opening line, kept clear of the first thing under it. */
.cb-options .sb-panel-title + .sb-hint { margin: 0 0 var(--space-4); }

/* ------------------------------------------------------------ uploads ---*/

.cb-art + .cb-art { margin-top: var(--space-4); }
.cb-art-label {
  margin: 0 0 var(--space-2);
  font-family: inherit;
  font-size: var(--step--1);
  font-weight: 700;
}
.cb-art-controls { margin-top: var(--space-3); }
.cb-art-note { margin-top: 0; }
.cb-art-move { margin: calc(-1 * var(--space-2)) 0 var(--space-2); }
.cb-art-move-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}
/* Bigger than the sticker builder's pads: these are a phone's only way to
   move a design without dragging it. */
.cb-art-move-row .sb-nudge-btn { width: 36px; height: 36px; }
.cb-art-note.is-warn { color: var(--danger); }
.cb-art-tip { margin-top: var(--space-4); }

/* The sticker builder's drop zone, a little shorter: there can be three. */
.cb-drop .sb-drop-label { padding: var(--space-4); gap: var(--space-1); }
.cb-upload-error { margin-bottom: 0; }
.cb-upload .sb-art-name { word-break: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#cb-logo-upload + .sb-hint { margin-top: var(--space-2); }

/* ----------------------------------------------------------- the order ---*/

.cb-proof { margin-bottom: var(--space-4); }
#cb-errors { margin: 0 0 var(--space-3); }

.btn-block { width: 100%; }

@media (max-width: 980px) {
  .cb-layout { grid-template-columns: 1fr; gap: var(--space-4); }
  /* The preview's parts join the page's single column, so the card and its
     side tabs can stay in view, under the header, while the options scroll
     past. The notes under it scroll away as normal. */
  .cb-preview-col { display: contents; }
  .cb-preview-stick {
    padding: var(--space-2) 0;
    background: var(--bg);
  }
  .cb-sides { margin-bottom: var(--space-2); }
  .cb-stage { padding: var(--space-3); }
  /* Small enough to leave room to type underneath it. */
  .cb-card { max-width: min(460px, calc(26vh * 92 / 60)); }
  .cb-stage-bar { margin-top: 0; }
}
/* It only sticks on a screen tall enough to keep it and still show the field
   being typed in: a phone held upright is, one on its side or with its
   keyboard up is not. The script widens the page's scroll padding to match
   while it sticks, so a field moved to with the keyboard lands below it. */
@media (max-width: 980px) and (min-height: 560px) {
  .cb-preview-stick {
    position: sticky;
    top: var(--cb-stick, 68px);
    z-index: 5;
  }
}

.cb-tier-set { margin: 0; padding: 0; border: 0; min-width: 0; }
.cb-restored { align-items: center; flex-wrap: wrap; justify-content: space-between; margin-bottom: var(--space-4); }
.cb-restored p { margin: 0; flex: 1 1 16rem; }
.cb-restored[hidden] { display: none; }
#cb-added { margin-top: var(--space-3); }