/* ==========================================================================
   LIST YOUR BUILD — the publish wizard, ported from List Your Build.dc.html
   of the POCKETCORP design project. Same shell as the deploy wizard: a
   collapsing two-column grid whose right card takes over on the final step.
   ========================================================================== */

/* Page reset — this page doesn't load main.css beyond the shared chrome, so
   paint the html background to the theme like the deploy page does. */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--pc-app-dark); }
body { margin: 0; }

.lb-page { background: var(--pc-app-dark); color: var(--pc-ink); min-height: 100vh; overflow-x: clip; }
.lb-page a { color: inherit; text-decoration: none; }
.lb-page a:hover { color: var(--pc-accent-mint); }

/* top bar — same 64px chrome as every other page */
.lb-bar {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 max(24px, calc((100% - 1240px) / 2 + 24px));
  border-bottom: var(--bw-hairline) solid var(--pc-border);
}
.lb-bar-right { display: flex; align-items: center; gap: 24px; }
.lb-step-counter {
  font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: var(--fw-medium);
  letter-spacing: 0.2em; text-transform: uppercase; opacity: var(--dim-6); white-space: nowrap;
}
.lb-bar-link {
  font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: var(--fw-medium);
  letter-spacing: 0.2em; text-transform: uppercase; opacity: var(--dim-2);
}
.lb-bar-link:hover { opacity: 1; }

/* collapsing grid */
.lb-grid {
  display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 56px;
  align-items: start; max-width: 1240px; margin: 0 auto; padding: 48px 24px 88px;
  transition: grid-template-columns 0.55s var(--ease-out-expo),
              max-width 0.55s var(--ease-out-expo), gap 0.55s var(--ease-out-expo);
}
.lb-grid > * { min-width: 0; }
.lb-grid[data-final="1"] { grid-template-columns: 0fr 1fr; max-width: 620px; gap: 0; }
.lb-grid[data-final="1"] .lb-left { opacity: 0; pointer-events: none; overflow: hidden; transition: opacity 0.3s ease; }

.lb-eyebrow {
  font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: var(--fw-medium);
  letter-spacing: 0.25em; text-transform: uppercase; color: var(--pc-accent-mint);
}
.lb-intro { font-family: var(--font-body); font-size: var(--fs-sm); line-height: 1.9; opacity: var(--dim-5); margin: 14px 0 0; max-width: 520px; }

/* step indicator */
.lb-steps { display: flex; align-items: center; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.lb-step {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: var(--fw-medium);
  letter-spacing: 0.2em; text-transform: uppercase;
  background: transparent; border: none; padding: 0; color: inherit; cursor: default;
  opacity: 0.3; transition: opacity var(--dur-base) var(--ease-out-expo);
}
.lb-step[data-done="1"] { opacity: 0.6; cursor: pointer; }
.lb-step[data-on="1"] { opacity: 1; }
.lb-dot { width: 7px; height: 7px; border: 1px solid currentColor; display: inline-block; }
.lb-step[data-on="1"] .lb-dot { background: var(--pc-accent-mint); border-color: var(--pc-accent-mint); }
.lb-step[data-done="1"] .lb-dot { background: currentColor; }
.lb-sep { width: 24px; height: 1px; background: var(--pc-border-strong); }

/* panes — every step opens the same way: step label, heading, one short lead */
.lb-pane { margin-top: 34px; }
.lb-pane-title {
  font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: var(--fw-medium);
  letter-spacing: 0.2em; text-transform: uppercase; opacity: var(--dim-4);
}
.lb-pane-heading {
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-medium);
  letter-spacing: 0.04em; line-height: 1.3; margin: 10px 0 0;
}
.lb-pane-lead {
  font-family: var(--font-body); font-size: var(--fs-sm); line-height: 1.9; opacity: var(--dim-5);
  margin: 10px 0 22px; max-width: 560px;
}
.lb-pane-lead + .lb-field, .lb-pane-lead + .lb-fields, .lb-pane-lead + .lb-picks { margin-top: 0; }

/* pick cards */
.lb-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.lb-picks--3 { grid-template-columns: repeat(3, 1fr); }
.lb-pick {
  border: var(--bw-structural) solid var(--pc-border);
  background: var(--pc-card-dark);
  cursor: pointer; padding: 26px; text-align: left; color: inherit; width: 100%;
  transition: border-color var(--dur-base) var(--ease-out-expo), background var(--dur-base) var(--ease-out-expo);
}
.lb-pick:hover { border-color: var(--pc-border-hover); }
.lb-pick[data-on="1"] { border-color: var(--pc-ink); background: var(--pc-bg-hover); }
.lb-pick[disabled] { opacity: 0.4; cursor: not-allowed; }
.lb-pick-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lb-pick-name { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: 0.2em; text-transform: uppercase; }
.lb-pick-mark { opacity: 0; color: var(--pc-accent-mint); font-family: var(--font-body); font-size: 0.75rem; transition: opacity var(--dur-base) var(--ease-out-expo); }
.lb-pick[data-on="1"] .lb-pick-mark { opacity: 1; }
.lb-pick-desc { font-family: var(--font-body); font-size: var(--fs-sm); line-height: 1.85; opacity: var(--dim-4); margin-top: 12px; }
.lb-pick-note { font-family: var(--font-body); font-size: var(--fs-2xs); letter-spacing: 0.1em; text-transform: uppercase; opacity: var(--dim-7); margin-top: 14px; }

/* inline pick (chips that toggle) */
.lb-inline-picks { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.lb-pick--inline { width: auto; padding: 12px 18px; display: inline-flex; align-items: center; gap: 10px; }
.lb-pick--inline .lb-pick-label { font-family: var(--font-body); font-size: 0.66rem; letter-spacing: 0.08em; }
.lb-pick--row { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 24px; }

/* fields */
.lb-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 18px; }
.lb-field { margin-top: 18px; }
.lb-field:first-child { margin-top: 0; }
.lb-field textarea { min-height: 100px; resize: vertical; }
.lb-hint { font-family: var(--font-body); font-size: var(--fs-2xs); line-height: 1.8; opacity: var(--dim-7); margin: 8px 0 0; }
.lb-hint b { color: var(--pc-accent-mint); font-weight: var(--fw-regular); }

/* chips */
.lb-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.lb-chip {
  font-family: var(--font-display); font-size: var(--fs-3xs); font-weight: var(--fw-medium);
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.45rem 0.8rem; border: none; background: transparent; color: var(--pc-ink);
  opacity: 0.5; cursor: pointer;
  transition: opacity var(--dur-base) var(--ease-out-expo), background var(--dur-base) var(--ease-out-expo);
}
.lb-chip.is-active { background: var(--pc-bg-hover); opacity: 1; }

/* drop zones + file rows */
.lb-drop {
  border: var(--bw-structural) dashed var(--pc-border);
  padding: 24px 20px; margin-top: 4px; text-align: center; cursor: pointer;
  font-family: var(--font-body); font-size: 0.64rem; line-height: 1.8; opacity: var(--dim-5);
  transition: opacity var(--dur-base) var(--ease-out-expo), border-color var(--dur-base) var(--ease-out-expo);
  display: block;
}
.lb-drop:hover { opacity: 0.85; border-color: var(--pc-border-hover); }
.lb-drop input { display: none; }
.lb-filerow {
  display: flex; align-items: center; gap: 10px;
  border: var(--bw-hairline) solid var(--pc-border); padding: 0.55rem 0.8rem; margin-top: 6px;
  font-family: var(--font-body); font-size: 0.64rem;
}
.lb-filerow span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-filerow em { font-style: normal; opacity: var(--dim-7); font-size: 0.58rem; }
.lb-x {
  background: transparent; border: none; color: inherit; cursor: pointer; padding: 2px 6px;
  font-family: var(--font-body); font-size: 0.7rem; opacity: var(--dim-7);
}
.lb-x:hover { opacity: 1; color: var(--pc-danger-on-dark); }

/* icon grid */
.lb-icons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.lb-icon {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: var(--bw-hairline) solid var(--pc-border); background: transparent; color: inherit;
  cursor: pointer; opacity: 0.5; overflow: hidden; padding: 0;
  transition: opacity var(--dur-base) var(--ease-out-expo), border-color var(--dur-base) var(--ease-out-expo);
}
.lb-icon:hover { opacity: 0.9; }
.lb-icon.is-selected { opacity: 1; border-color: var(--pc-accent-mint); }
.lb-icon img { width: 100%; height: 100%; object-fit: cover; }

/* gallery grid */
.lb-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 4px; }
.lb-gcell {
  position: relative; aspect-ratio: 16/9; border: var(--bw-structural) solid var(--pc-border);
  border-radius: var(--radius-lg); overflow: hidden; background: var(--pc-card-dark);
}
.lb-gcell img, .lb-gcell video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lb-gcell .lb-x { position: absolute; top: 4px; right: 4px; background: rgba(26, 26, 26, 0.7); }
.lb-gadd {
  aspect-ratio: 16/9; border: var(--bw-structural) dashed var(--pc-border); border-radius: var(--radius-lg);
  background: transparent; color: var(--pc-ink); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  opacity: 0.5; transition: opacity var(--dur-base) var(--ease-out-expo), border-color var(--dur-base) var(--ease-out-expo);
}
.lb-gadd:hover { opacity: 1; border-color: var(--pc-border-hover); }
.lb-gadd b { font-family: var(--font-body); font-size: 1.3rem; font-weight: var(--fw-light); line-height: 1; }
.lb-gadd span { font-family: var(--font-display); font-size: 0.52rem; font-weight: var(--fw-medium); letter-spacing: 0.18em; text-transform: uppercase; }
.lb-gadd input { display: none; }

/* pricing */
.lb-pricecard { border: var(--bw-structural) solid var(--pc-border); background: var(--pc-card-dark); padding: 26px 28px; margin-top: 16px; }
.lb-pricecard-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.lb-pricerow { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.lb-pricerow input { flex: 0 0 200px; }
.lb-pricerow span { font-family: var(--font-body); font-size: var(--fs-2xs); letter-spacing: 0.14em; text-transform: uppercase; opacity: var(--dim-5); }
.lb-breakdown { border: var(--bw-hairline) solid var(--pc-border); padding: 20px 24px; margin-top: 16px; }
.lb-breakdown div { display: flex; justify-content: space-between; font-family: var(--font-body); font-size: var(--fs-sm); padding: 6px 0; }
.lb-breakdown div span:first-child { opacity: var(--dim-5); }
.lb-breakdown hr { border: none; height: 1px; background: var(--pc-border); margin: 8px 0; }
.lb-breakdown .is-mint { color: var(--pc-accent-mint); }
/* A thing the seller must still do — Stripe onboarding, a price to confirm. */
.lb-callout { border: var(--bw-hairline) solid var(--pc-border); border-left: 2px solid var(--pc-accent-mint); padding: 14px 18px; margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.lb-callout p { font-family: var(--font-body); font-size: var(--fs-2xs); line-height: 1.8; margin: 0; flex: 1 1 260px; }

/* nav */
.lb-nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; white-space: nowrap; }
.lb-nav .lb-next[data-final="1"] { --pc-ink: var(--pc-accent-mint); --pc-surface: var(--pc-accent-mint-deep); }
.lb-error { font-family: var(--font-body); font-size: 0.68rem; color: var(--pc-danger-on-dark); margin: 14px 0 0; }

/* preview card (right column) */
.lb-order {
  position: sticky; top: 24px;
  border: var(--bw-structural) solid var(--pc-border-strong);
  padding: 30px; background: var(--pc-card-dark);
  transition: transform 0.55s var(--ease-out-expo), border-color 0.4s ease;
}
.lb-grid[data-final="1"] .lb-order { animation: lbOrderIn 0.6s var(--ease-out-expo) both; }
@keyframes lbOrderIn {
  from { transform: scale(0.96); opacity: 0.4; filter: blur(6px); }
  to { transform: none; opacity: 1; filter: blur(0); }
}
.lb-preview { border: var(--bw-structural) solid var(--pc-border); border-radius: var(--radius-lg); overflow: hidden; margin-top: 18px; }
.lb-preview-media { position: relative; aspect-ratio: 16/9; border-bottom: var(--bw-hairline) solid var(--pc-border); background: var(--pc-app-dark); }
.lb-preview-media img, .lb-preview-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lb-preview-ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: var(--fs-3xs); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.3;
  background: repeating-linear-gradient(-45deg, transparent 0 14px, var(--pc-bg-hover) 14px 15px);
}
.lb-preview-kind {
  position: absolute; top: 10px; right: 12px;
  font-family: var(--font-display); font-size: 0.52rem; font-weight: var(--fw-medium);
  letter-spacing: 0.2em; text-transform: uppercase; background: #1A1A1A; color: #fff; padding: 4px 9px; opacity: 0.9;
}
.lb-preview-body { display: flex; flex-direction: column; gap: 7px; padding: 14px 16px 16px; }
.lb-preview-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lb-preview-name { font-family: var(--font-display); font-size: 0.68rem; font-weight: var(--fw-medium); letter-spacing: 0.14em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-preview-price { font-family: var(--font-body); font-size: var(--fs-2xs); letter-spacing: 0.08em; color: var(--pc-accent-mint); white-space: nowrap; }
.lb-preview-by { font-family: var(--font-body); font-size: 0.58rem; letter-spacing: 0.08em; opacity: var(--dim-7); }
.lb-preview-tagline { font-family: var(--font-body); font-size: 0.62rem; line-height: 1.7; opacity: var(--dim-5); }

.lb-summary { margin-top: 22px; }
.lb-summary div { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-body); font-size: 0.68rem; padding: 5px 0; }
.lb-summary div span:first-child { opacity: var(--dim-5); }
.lb-summary div span:last-child { text-align: right; overflow: hidden; text-overflow: ellipsis; }
.lb-summary .is-mint { color: var(--pc-accent-mint); }
.lb-summary hr { border: none; height: 1px; background: var(--pc-border); margin: 14px 0; }
.lb-note { font-family: var(--font-body); font-size: 0.62rem; line-height: 1.8; opacity: var(--dim-6); }

.lb-submit { margin-top: 18px; white-space: nowrap; --pc-ink: var(--pc-accent-mint); --pc-surface: var(--pc-accent-mint-deep); }
.lb-submit .ds-btn { width: 100%; justify-content: center; }
.lb-changerow { display: flex; justify-content: center; margin-top: 14px; white-space: nowrap; }

.lb-term {
  font-family: var(--font-body); font-size: 0.62rem; line-height: 1.9;
  border: var(--bw-hairline) solid var(--pc-border); background: var(--pc-app-dark);
  padding: 14px 16px; margin-top: 18px; white-space: pre-wrap;
}
.lb-term b { color: var(--pc-accent-mint); font-weight: var(--fw-regular); }

.lb-bullets { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }
.lb-bullets div { font-family: var(--font-body); font-size: 0.68rem; opacity: var(--dim-5); }

@media (max-width: 960px) {
  .lb-grid { grid-template-columns: 1fr; gap: 28px; padding: 28px 20px 64px; }
  .lb-grid[data-final="1"] { grid-template-columns: 1fr; }
  .lb-grid[data-final="1"] .lb-left { display: none; }
  .lb-order { position: static; padding: 24px 20px; }
  .lb-picks, .lb-picks--3 { grid-template-columns: 1fr; }
  .lb-fields { grid-template-columns: 1fr; }
  .lb-gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .lb-grid, .lb-order { transition: none; }
  .lb-grid[data-final="1"] .lb-order { animation: none; }
}