/* Selling Pins page (Nov 3 2026): the copy and photo tips on the left, the form on the right (stacked on a phone). */
.sell {
  display: grid; grid-template-columns: 1fr minmax(0, 520px); gap: 56px; align-items: start;
  max-width: 1200px; margin: 0 auto; padding: 36px 20px 12px;
}
.sell-copy { min-width: 0; }
.sell h1 { font-size: clamp(36px, 4.6vw, 58px); }
.sell .form-card { position: sticky; top: 92px; }

.tips { margin-top: 8px; padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); }
.tips h2 { margin: 0 0 14px; font: 700 18px/1.3 var(--body); letter-spacing: 0; }
.tip-list { list-style: none; counter-reset: tip; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tip-list li { counter-increment: tip; position: relative; min-width: 0; padding: 14px 14px 14px 52px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); }
.tip-list li::before {
  content: counter(tip); position: absolute; left: 14px; top: 14px; display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: rgba(126, 224, 138, .16); color: var(--green); font: 700 13px/1 var(--body);
}
.tip-list b { display: block; font-size: 15px; }
.tip-list span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--muted); }

.optional { font-weight: 500; color: var(--faint); }
.field-hint { margin-top: -2px; font-size: 13px; font-weight: 600; color: var(--green); }
textarea {
  width: 100%; min-height: 96px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(164, 107, 255, .3); resize: vertical;
  background: rgba(11, 6, 20, .7); color: var(--text); font: 500 16px/1.45 var(--body); transition: border-color .2s, box-shadow .2s;
}
textarea::placeholder { color: rgba(185, 169, 214, .45); }
textarea:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 4px rgba(164, 107, 255, .2); }

/* Photos: the drop box, then the picked photos as squares with an × each. */
.photos-field { display: grid; gap: 8px; }
.photos-label { font-size: 13px; font-weight: 600; color: var(--lavender); }
.drop {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 14px 16px; cursor: pointer;
  border: 1.5px dashed var(--line-strong); border-radius: 14px; background: rgba(164, 107, 255, .07); color: var(--text);
  transition: border-color .2s, background .2s;
}
.drop[hidden] { display: none; }
.drop:hover, .drop.is-over { border-color: var(--green); background: rgba(126, 224, 138, .08); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.drop:focus-within { outline: 3px solid var(--purple-2); outline-offset: 3px; }
.drop-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--green) 0%, #b8f5a8 100%); color: var(--ink-on-green); font: 700 26px/1 var(--body); }
.drop-text { display: grid; gap: 2px; min-width: 0; }
.drop-text b { font-size: 15px; }
.drop-text span { font-size: 13px; font-weight: 500; color: var(--muted); }
.photos-field.is-invalid .drop { border-color: #ff7a8a; }
.thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.thumbs:empty { display: none; }
.thumbs li { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-x {
  position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(11, 6, 20, .82); color: #fff; font: 700 18px/1 var(--body); cursor: pointer;
}
/* A bigger tap area than it looks, for fingers. */
.thumb-x::after { content: ""; position: absolute; inset: -9px; }
.thumb-x:focus-visible { outline: 3px solid var(--purple-2); outline-offset: 1px; }
.photo-count { margin: 0; font-size: 12px; color: var(--faint); }
.photos-field .field-error { margin: 0; }
.form-done .btn { margin-top: 8px; }

@media (max-width: 1020px) {
  .sell { grid-template-columns: 1fr; gap: 28px; max-width: 680px; }
  .sell .form-card { position: static; }
}
@media (max-width: 680px) {
  .sell { padding: 16px 16px 8px; gap: 22px; }
  .sell .lead { font-size: 16px; margin: 16px 0 18px; }
  .tips { padding: 16px; }
  .tip-list { grid-template-columns: 1fr; gap: 8px; }
  .tip-list li { padding: 12px 12px 12px 48px; }
  .tip-list li::before { left: 12px; top: 12px; }
  .thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}