/*
 * The Sell an Item form: items/new, items/edit, items/_form and its aside
 * (items/_sell_aside). Design: Sell an Item.
 *
 * Shares the --cm-* tokens, the .cm-page wrapper and the no-shadow/no-transition
 * rules from community.css. The animated boost gradient (.np-boost-border) lives
 * in boost.css. Picked up automatically by `stylesheet_link_tag :app`.
 *
 * Three states are CSS-only, so they survive with scripting off: the condition
 * and price-type pills (:checked), whether the price field or the FREE note
 * shows (.sf-pricing:has), and whether the drop zone or the photo tiles show
 * (.sf-photos:has). sell_form_controller only adds polish on top.
 */

.sf-page {
  --sf-peach: #FFC2A6;
  --sf-blue-tint: #E6F7FF;
  --sf-peach-tint: #FFF1EA;
  --sf-field-border: #DCD5B4;
}

/* ------------------------------------------------------------- page shell */

.sf-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

.sf-page :is(textarea, select):focus-visible {
  outline: 2px solid var(--cm-blue);
  outline-offset: 2px;
}

.sf-sponsored { margin-top: 20px; }

.sf-title { margin-top: 22px; }
.sf-title--top { margin-top: 20px; }

.sf-title h1 {
  margin: 0;
  font-size: clamp(28px, 4.4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 1.05;
  color: var(--cm-ink);
}

.sf-title p {
  margin: 8px 0 0;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.5;
  color: #333333;
  text-wrap: pretty;
}

.sf-title a {
  font-weight: 700;
  color: var(--cm-blue-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ------------------------------------------------------------------- grid */

.sf-grid {
  margin-top: 20px;
  display: grid;
  gap: 24px;
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}

.sf-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.sf-aside {
  display: grid;
  gap: 12px;
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 700px) {
  .sf-aside { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (min-width: 1020px) {
  .sf-grid { grid-template-columns: minmax(0, 1fr) 340px; }

  .sf-aside {
    position: sticky;
    top: 76px;
    display: flex;
    flex-direction: column;
  }
}

/* --------------------------------------------------------------- notices */

.sf-errors {
  border: 1.5px solid var(--cm-orange);
  background: var(--sf-peach-tint);
  border-radius: 14px;
  padding: 14px 16px;
}

.sf-errors__title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: #B23A0E;
}

.sf-errors__list {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #333333;
}

.sf-note {
  border: 1px solid var(--cm-border-sage);
  background: #EDF2D8;
  border-radius: 14px;
  padding: 13px 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #333333;
}

/* ---------------------------------------------------------- admin tools */

.sf-admin {
  background: var(--cm-band);
  border: 1px solid var(--cm-border-band);
  border-radius: 14px;
  overflow: hidden;
}

.sf-admin__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
  color: var(--cm-ink);
}

.sf-admin__head::-webkit-details-marker { display: none; }

.sf-admin__chip {
  flex: none;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--cm-ink);
  color: var(--cm-yellow);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.sf-admin__title {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 700;
}

.sf-admin__summary {
  font-size: 13px;
  color: var(--cm-ink-muted);
}

.sf-admin__summary:empty { display: none; }

.sf-admin[open] .sf-admin__head svg { transform: rotate(180deg); }

.sf-admin__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 16px 16px;
}

.sf-admin__search { position: relative; }

.sf-admin__results {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 260px;
  overflow-y: auto;
  background: var(--cm-surface);
  border: 1.5px solid var(--cm-ink);
  border-radius: 10px;
}

.sf-admin__chosen {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 8px 0 12px;
  border-radius: 10px;
  border: 1.5px solid var(--cm-ink);
  background: var(--cm-surface);
  font-size: 14px;
  font-weight: 600;
}

.sf-admin__chosen span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-admin__chosen button {
  flex: none;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--cm-border-band);
  background: var(--cm-surface);
  color: var(--cm-ink);
  cursor: pointer;
}

.sf-admin__chosen button:hover { border-color: var(--cm-ink); }

/* -------------------------------------------------- section card and step */

.sf-card {
  background: var(--cm-surface);
  border: 1px solid var(--cm-border);
  border-radius: 16px;
  padding: clamp(18px, 3vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sf-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sf-card__head > div {
  flex: 1;
  min-width: 0;
}

.sf-card__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--cm-ink);
}

.sf-card__sub {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--cm-ink-muted);
}

.sf-step {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  font-weight: 800;
  border: 1.5px solid var(--cm-ink);
  background: var(--sf-step-color);
  color: var(--cm-ink);
}

.sf-step--1 { --sf-step-color: var(--cm-blue-light); }
.sf-step--2 { --sf-step-color: var(--cm-yellow); }
.sf-step--3 { --sf-step-color: var(--sf-peach); }

.sf-step--done {
  background: var(--cm-ink);
  color: var(--sf-step-color);
}

/* Only after List it! has been pressed early — it points at the section to fix. */
.sf-step--missing {
  background: #D92D0B;
  border-color: var(--cm-ink);
  color: #FFFFFF;
}

/* ----------------------------------------------------------- form fields */

.sf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.sf-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.sf-label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cm-ink);
  padding: 0;
}

.sf-label--count {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.sf-count {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cm-ink-muted);
}

.sf-help {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--cm-ink-muted);
}

.sf-mini-label {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--cm-ink-muted);
}

.sf-input {
  width: 100%;
  height: 46px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1.5px solid var(--sf-field-border);
  background: var(--cm-card);
  font-family: inherit;
  font-size: 15.5px;
  color: var(--cm-ink);
}

.sf-input::placeholder { color: #8A8162; }

.sf-input:focus {
  outline: none;
  border-color: var(--cm-blue);
  background: var(--cm-surface);
}

.sf-input--area {
  height: auto;
  min-height: 120px;
  padding: 11px 12px;
  font-size: 15px;
  line-height: 1.45;
  resize: vertical;
}

.sf-input--white { background: var(--cm-surface); }

.sf-select {
  font-size: 15px;
  padding-right: 38px;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* ai-autofill flashes this on a field it just wrote into. */
.sf-filled {
  border-color: var(--cm-blue);
  background: var(--sf-blue-tint);
}

.sf-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -------------------------------------------------------- photos & video */

.sf-photos {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sf-drop {
  width: 100%;
  min-height: 170px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  padding: 22px 20px;
  cursor: pointer;
  border-radius: 14px;
  border: 1.5px dashed var(--cm-dashed);
  background: linear-gradient(135deg, var(--sf-blue-tint) 0%, var(--cm-card) 55%, var(--sf-peach-tint) 100%);
}

.sf-drop:hover { border-color: var(--cm-ink); }

.sf-drop--over {
  border-color: var(--cm-blue);
  background: var(--sf-blue-tint);
}

.sf-drop__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--cm-yellow);
  border: 1px solid var(--cm-yellow-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cm-ink);
}

.sf-drop__title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--cm-ink);
}

.sf-drop__hint {
  font-size: 13px;
  line-height: 1.45;
  color: var(--cm-ink-muted);
}

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

/* Empty: the drop zone does the asking. With any photo: the tiles take over. */
.sf-tiles--new { display: none; }
.sf-photos:has(.sf-tile) .sf-tiles--new { display: grid; }
.sf-photos:has(.sf-tile) .sf-drop { display: none; }

.sf-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  cursor: grab;
  background-color: var(--cm-band);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--cm-border);
}

.sf-tile--dragging { border: 2px solid var(--cm-blue); }

/* Picked up by press-and-hold on a phone: lift it so it's clear the photo moves. */
@media (hover: none) {
  .sf-tile--dragging { transform: scale(1.05); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
}

/* The hold that picks a tile up mustn't also open the phone's save-image menu or
   start selecting text. */
.sf-tile, .sf-tile img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* Reorder hint, worded for the device: drag with a mouse, press and hold on touch. */
.sf-hint--touch { display: none; }
@media (hover: none) {
  .sf-hint--pointer { display: none; }
  .sf-hint--touch { display: inline; }
}
.sf-tile--ghost { opacity: 0.4; }

.sf-tile__cover {
  display: none;
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--cm-yellow);
  border: 1px solid var(--cm-yellow-border);
  color: var(--cm-ink);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* The cover is the first photo overall: the first existing one while any
   remain, otherwise the first newly added one. */
.sf-tiles--existing .sf-tile:first-child,
.sf-photos:not(:has(.sf-tiles--existing .sf-tile)) .sf-tiles--new .sf-tile:first-child {
  border: 2px solid var(--cm-ink);
}

.sf-tiles--existing .sf-tile:first-child .sf-tile__cover,
.sf-photos:not(:has(.sf-tiles--existing .sf-tile)) .sf-tiles--new .sf-tile:first-child .sf-tile__cover {
  display: inline-flex;
}

.sf-tile__remove,
.sf-tile__crop {
  position: absolute;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--cm-surface);
  border: 1px solid var(--cm-border-band);
  color: var(--cm-ink);
  cursor: pointer;
}

.sf-tile__remove { top: 6px; right: 6px; }
.sf-tile__crop { bottom: 6px; right: 6px; }

.sf-tile__remove:hover,
.sf-tile__crop:hover { border-color: var(--cm-ink); }

.sf-tile__crop:hover { background: var(--cm-blue-light); }

.sf-tile-add {
  aspect-ratio: 1;
  border-radius: 12px;
  border: 1.5px dashed var(--cm-dashed);
  background: var(--cm-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--cm-ink);
}

.sf-tile-add:hover { border-color: var(--cm-ink); }

.sf-tile-add__count {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--cm-ink-muted);
}

/* --------------------------------------------------------- the crop pop-up */

/* image-cropper swaps `hidden` for Tailwind's `flex`, so display stays off this. */
.sf-crop {
  position: fixed;
  inset: 0;
  z-index: 60;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(34, 34, 34, 0.55);
}

.sf-crop__panel {
  width: min(560px, 100%);
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  background: var(--cm-surface);
  border: 1.5px solid var(--cm-ink);
  border-radius: 16px;
  overflow: hidden;
}

.sf-crop__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--cm-divider);
}

.sf-crop__head > div {
  flex: 1;
  min-width: 0;
}

.sf-crop__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.sf-crop__count {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--cm-ink-muted);
}

.sf-crop__close {
  flex: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid var(--cm-border-band);
  background: var(--cm-surface);
  color: var(--cm-ink);
  cursor: pointer;
}

.sf-crop__close:hover { border-color: var(--cm-ink); }

.sf-crop__stage {
  flex: 1;
  min-height: 0;
  padding: 12px 16px;
  background: var(--cm-band);
}

.sf-crop__stage img {
  display: block;
  max-width: 100%;
  max-height: 52dvh;
}

.sf-crop__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--cm-divider);
}

.sf-crop__skip {
  padding: 0 2px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cm-link);
  background: none;
  border: 0;
  cursor: pointer;
}

.sf-crop__skip:hover { color: #0A5477; }

.sf-crop__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------------------------------------------------------------- video */

.sf-video {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* video-upload shows one state at a time by toggling `hidden`. Tailwind keeps
   .hidden in @layer utilities, and an unlayered rule beats a layered one at any
   specificity — so these must stand aside for it rather than set display flat. */
.sf-video__row:not(.hidden),
.sf-video__state:not(.hidden),
.sf-video__ready:not(.hidden) {
  display: flex;
}

.sf-video__row {
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--cm-border);
}

.sf-video__icon {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 8px;
  background: var(--cm-band);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cm-ink);
}

.sf-video__text {
  flex: 1;
  min-width: 0;
}

.sf-video__label {
  display: block;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-video__hint {
  display: block;
  margin: 0;
  font-size: 12px;
  color: var(--cm-ink-muted);
}

.sf-video__state {
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--cm-border);
}

.sf-video__state--error {
  border-color: var(--cm-orange);
  background: var(--sf-peach-tint);
}

.sf-video__state-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.sf-video__state-head > div {
  flex: 1;
  min-width: 0;
}

.sf-video__pct {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sf-video__ready {
  flex-direction: column;
  gap: 8px;
}

.sf-video__player {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--cm-ink);
}

.sf-video__duration {
  position: absolute;
  right: 8px;
  top: 8px;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(34, 34, 34, 0.8);
  color: var(--cm-ground);
  font-size: 11.5px;
  font-weight: 700;
}

.sf-video__bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sf-video__ok {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cm-link);
}

.sf-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--cm-band);
  border: 1px solid var(--cm-border-band);
  overflow: hidden;
}

.sf-progress__bar {
  height: 100%;
  background: linear-gradient(115deg, var(--cm-blue) 0%, var(--cm-blue-light) 50%, var(--cm-yellow) 100%);
}

/* ------------------------------------------------------------ AI strip */

.sf-ai {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #EDF2D8;
  border: 1px solid #C9D8B4;
}

.sf-ai__icon { flex: none; }

.sf-ai__text {
  flex: 1 1 200px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: #333333;
}

.sf-ai__btn {
  height: 36px;
  padding: 0 13px;
  border-radius: 10px;
  background: var(--cm-surface);
  border: 1.5px solid var(--cm-ink);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cm-ink);
  cursor: pointer;
}

.sf-ai__btn:hover:not(:disabled) { background: var(--cm-blue-light); }

.sf-ai__btn:disabled {
  border-color: #C9D8B4;
  color: #8A9A7A;
  cursor: default;
}

/* ------------------------------------------------------- pills and checks */

.sf-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sf-pill { cursor: pointer; }

.sf-pill span {
  display: inline-block;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1.5px solid var(--cm-border);
  background: var(--cm-surface);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cm-ink);
}

.sf-pill input:checked + span {
  border-color: var(--cm-ink);
  background: var(--cm-ink);
  color: var(--cm-ground);
}

.sf-pill input:focus-visible + span {
  outline: 2px solid var(--cm-blue);
  outline-offset: 2px;
}

.sf-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  text-align: left;
}

.sf-check--inline { align-items: center; }

.sf-check input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.sf-check__box {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 1px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--cm-dashed);
  background: var(--cm-surface);
  color: transparent;
}

.sf-check--inline .sf-check__box { margin-top: 0; }

.sf-check input:checked + .sf-check__box,
.sf-boost__toggle input:checked + .sf-check__box {
  border-color: var(--cm-ink);
  background: var(--cm-blue);
  color: var(--cm-blue-ink);
}

.sf-check input:focus-visible + .sf-check__box,
.sf-boost__toggle input:focus-visible + .sf-check__box {
  outline: 2px solid var(--cm-blue);
  outline-offset: 2px;
}

.sf-check__title {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cm-ink);
}

.sf-check--inline .sf-check__title { font-size: 14px; font-weight: 600; }

/* ---------------------------------------------------------------- pricing */

.sf-price {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 20px;
}

.sf-price__field { flex: 0 1 200px; }

.sf-money {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1.5px solid var(--sf-field-border);
  background: var(--cm-card);
  font-size: 20px;
  font-weight: 700;
  color: var(--cm-ink-muted);
}

.sf-money:focus-within {
  border-color: var(--cm-blue);
  background: var(--cm-surface);
}

.sf-money input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding-left: 4px;
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  color: var(--cm-ink);
}

.sf-free-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #444444;
}

.sf-free-note strong { color: var(--cm-ink); }

/* "It's free" swaps the price field for the note, with or without scripting. */
.sf-pricing:has(input[name="item[is_free]"][value="true"]:checked) .sf-price { display: none; }
.sf-free-note { display: none; }
.sf-pricing:has(input[name="item[is_free]"][value="true"]:checked) .sf-free-note { display: block; }

/* ------------------------------------------------------------------ boost */

.sf-boost {
  --np-boost-speed: 6s;
  border-radius: 16px;
  padding: clamp(18px, 3vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sf-boost:has(input:checked) {
  --np-boost-speed: 2.5s;
  border-width: 3px;
}

.sf-boost__tile {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cm-ink);
}

.sf-boost__optional {
  font-size: 13px;
  font-weight: 600;
  color: var(--cm-ink-muted);
}

.sf-boost__toggle {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  border-radius: 12px;
  border: 1.5px solid var(--cm-border);
  background: var(--cm-surface);
}

.sf-boost__toggle:has(input:checked) {
  border-color: var(--cm-ink);
  background: var(--cm-card);
}

.sf-boost__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sf-boost__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--cm-ink);
}

.sf-boost__sub {
  font-size: 13.5px;
  line-height: 1.45;
  color: #555555;
}

.sf-boost__price {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.sf-boost__price s {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cm-ink-muted);
}

.sf-boost__badge {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--cm-ink);
  background: linear-gradient(115deg, var(--cm-blue) 0%, var(--cm-blue-light) 50%, var(--cm-yellow) 100%);
  color: var(--cm-blue-ink);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.2px;
}

.sf-boost__badge--sale {
  background: linear-gradient(115deg, var(--cm-yellow) 0%, var(--sf-peach) 100%);
}

.sf-boost__badge small {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- actions */

.sf-actions {
  padding: 4px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
}

.sf-actions__buttons {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

.sf-upload:not(.hidden) {
  display: flex;
}

.sf-upload {
  flex: 1 1 220px;
  flex-direction: column;
  gap: 6px;
}

.sf-upload__status {
  margin: 0;
  font-size: 12.5px;
  color: var(--cm-ink-muted);
}

.sf-cancel {
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: #555555;
}

.sf-cancel:hover { color: #B23A0E; }

.sf-submit {
  min-width: 180px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 16px;
  border-radius: 12px;
  border: 2px solid var(--cm-ink);
  background: linear-gradient(115deg, var(--cm-blue) 0%, var(--cm-blue-light) 50%, var(--cm-yellow) 100%);
  box-shadow: 0 3px 0 var(--cm-ink);
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--cm-blue-ink);
  text-align: left;
  cursor: pointer;
}

/* Not everything is filled in yet. The button still takes a press —
   sell-form#guardSubmit answers with what's missing. */
.sf-submit--waiting,
.sf-submit:disabled {
  background: #B3E3EA;
  border-color: #A9C2BF;
  box-shadow: none;
  color: #4F6E6B;
}

/* ------------------------------------------------------------ small button */

.sf-btn {
  height: 36px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  background: var(--cm-surface);
  border: 1.5px solid var(--cm-ink);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cm-ink);
  cursor: pointer;
}

.sf-btn:hover { background: var(--cm-blue-light); }

.sf-btn--ink {
  background: var(--cm-ink);
  color: var(--cm-ground);
}

.sf-btn--ink:hover { background: var(--cm-link); }

/* ------------------------------------------------------------------ aside */

.sf-tips {
  background: var(--cm-surface);
  border: 1.5px solid var(--cm-ink);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sf-tips__head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 18px;
  background: linear-gradient(115deg, var(--cm-blue-light) 0%, var(--cm-yellow) 60%, var(--sf-peach) 100%);
  border-bottom: 1.5px solid var(--cm-ink);
}

.sf-tips__icon {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 8px;
  background: var(--cm-surface);
  border: 1.5px solid var(--cm-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cm-ink);
}

.sf-tips__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.sf-tips__list {
  margin: 0;
  display: flex;
  flex-direction: column;
  padding: 4px 18px 8px;
}

.sf-tip {
  padding: 12px 0;
  border-top: 1px solid var(--cm-divider);
}

.sf-tip:first-child { border-top: 0; }

.sf-tip dt {
  font-size: 14px;
  font-weight: 700;
  color: var(--cm-ink);
}

.sf-tip dd {
  margin: 3px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #555555;
  text-wrap: pretty;
}

.sf-wanted {
  background: linear-gradient(160deg, #EDF2D8 0%, var(--sf-blue-tint) 100%);
  border: 1.5px solid var(--cm-ink);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sf-wanted__title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

.sf-wanted__sub {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--cm-ink-muted);
}

.sf-wanted__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sf-chip {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1.5px solid var(--cm-ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--cm-ink);
  cursor: pointer;
}

.sf-chip--0 { background: var(--cm-blue-light); }
.sf-chip--1 { background: var(--cm-yellow); }
.sf-chip--2 { background: var(--sf-peach); }
.sf-chip--3 { background: var(--cm-surface); }
.sf-chip--4 { background: var(--cm-blue); }

.sf-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 0 var(--cm-ink);
}

/* ------------------------------------------------------ validation warning */

/* guardSubmit's reply when List it! is pressed before the listing is ready. It
   sits in the actions row rather than floating, so it lands where the press
   did and never has to dodge mobile browser chrome or the home indicator. */
.sf-alert-slot { flex: 1 1 100%; }
.sf-alert-slot:empty { display: none; }

.sf-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 13px 16px;
  border-radius: 12px;
  border: 2px solid var(--cm-ink);
  background: #D92D0B;
  box-shadow: 0 3px 0 var(--cm-ink);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  text-wrap: pretty;
}

.sf-alert svg { flex: none; }

@media (prefers-reduced-motion: no-preference) {
  .sf-alert { animation: sf-alert-in 320ms ease-out; }

  @keyframes sf-alert-in {
    0%   { opacity: 0; transform: translateY(-6px); }
    60%  { opacity: 1; transform: translateY(0); }
    75%  { transform: translateX(-4px); }
    90%  { transform: translateX(4px); }
    100% { transform: translateX(0); }
  }
}

/* Phones: no aside (tips, Neighbors are looking for); it pushes the form's
   buttons a long way down. */
@media (max-width: 699px) {
  .sf-aside { display: none; }
}