/* The listing composer's own rules, moved unchanged from workspace.css (the CSS split the governor approved on
   2026-09-22): /sell/create and /sell/review link this after workspace.css, and no other page loads it. */

.stepper {
  display: grid;
  margin: 0 0 1rem;
  padding: 0;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  list-style: none;
}

.stepper li {
  display: flex;
  border-bottom: 3px solid var(--line);
  color: var(--muted);
  padding: 0.65rem 0;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8rem;
  font-weight: 780;
}

.stepper li::before {
  display: grid;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--surface-soft);
  content: attr(data-step);
  place-items: center;
  font-size: 0.75rem;
}

.stepper li[data-current] {
  border-color: var(--brand);
  color: var(--text-strong);
}

.stepper li[data-current]::before {
  background: var(--brand);
  color: var(--on-brand);
}

.stepper li[data-visited] {
  padding: 0;
}

.stepper-step {
  flex: 1;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: start;
}

.composer-layout {
  display: grid;
  align-items: start;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
}

.category-policy-summary {
  border: 1px solid var(--line);
  border-inline-start: 0.28rem solid var(--brand);
  border-radius: 0.7rem;
  background: var(--surface-soft);
  padding: 0.85rem 0.95rem;
}

.category-policy-summary h3,
.category-policy-summary p,
.category-policy-summary ul {
  margin: 0;
}

.category-policy-summary h3 {
  font-size: 0.92rem;
}

.category-policy-summary ul {
  display: grid;
  gap: 0.25rem;
  padding-inline-start: 1.2rem;
}

.category-policy-warning {
  color: var(--danger);
  font-weight: 700;
}

.choice-grid {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.choice-card {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: var(--surface);
  padding: 0.75rem;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
}

.choice-card:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.choice-card input {
  width: 1rem;
  min-height: auto;
  margin-top: 0.22rem;
}

.choice-card strong,
.choice-card small {
  display: block;
}

.choice-card small {
  color: var(--muted);
  font-size: var(--font-size-xs);
}

.composer-preview {
  position: sticky;
  top: var(--sticky-content-offset);
}

.preview-media {
  display: grid;
  overflow: hidden;
  min-height: 13rem;
  border-radius: 0.75rem;
  background: linear-gradient(145deg, var(--surface-soft), var(--brand-soft));
  color: var(--muted);
  place-items: center;
  text-align: center;
}

.preview-media img {
  width: 100%;
  height: 13rem;
  object-fit: cover;
}

.preview-media img[hidden] {
  display: none;
}

.preview-copy {
  padding-top: 1rem;
}

.preview-copy h2 {
  font-size: 1.35rem;
}

.preview-price {
  color: var(--text-strong);
  font-size: 1.35rem;
  font-weight: 900;
}

/* Seller option groups in the composer and the draft review (governor section 791b). */
.option-editor {
  display: grid;
  margin-top: 0.8rem;
  gap: 0.9rem;
}

.option-group-list {
  display: grid;
  gap: 0.9rem;
}

.option-group {
  position: relative;
  display: grid;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  padding: 0.9rem;
  gap: 0.8rem;
}

.option-group legend {
  padding: 0 0.35rem;
  color: var(--text-strong);
  font-size: 0.83rem;
  font-weight: 780;
}

/* A group's remove control is an X on its top border at the right, as its legend is at the left, and it asks before it
   removes anything (governor section 836 (C)). */
.option-group .option-group-remove {
  position: absolute;
  top: -1rem;
  right: 0.75rem;
  width: 2rem;
  min-height: 2rem;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
}

.option-group-confirm {
  display: grid;
  gap: 0.5rem;
}

.option-group-confirm p {
  margin: 0;
  color: var(--text-strong);
  font-weight: 700;
}

.option-group-confirm .button-row {
  margin-top: 0;
}

.option-group .form-grid {
  margin-top: 0;
}

.option-required {
  align-self: end;
}

.option-values {
  display: grid;
  gap: 0.75rem;
}

.option-value {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 0.75rem;
  align-items: end;
  gap: 0.6rem;
}

.option-value > .field {
  min-width: 0;
  flex: 1 1 11rem;
}

.option-value .field input[type="color"] {
  padding: 0.3rem;
}

.option-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.option-review {
  display: grid;
  margin: 0;
  padding-inline-start: 1.2rem;
  gap: 0.35rem;
}

.option-review-swatch {
  --swatch-colour: transparent;
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  margin-inline-end: 0.3rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--swatch-colour);
  vertical-align: -0.1rem;
}

/* The one-time offer to resume unsaved text (governor section 830): its words and two small buttons on one line. */
.resume-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

/* The photo picker (governor sections 995, 1003 and 1009): the browser's own file control is hidden, so its "No file
   chosen" is never shown; this label opens it, keeps its own width in the field's grid, and shows the focus ring the
   hidden input has from the keyboard. */
.photo-picker-button {
  justify-self: start;
}

.photo-picker input:focus-visible + .photo-picker-button {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* The photo cards (governor section 1018, L2): each photo uploads when it is chosen and is shown as a card, its name and
   Uploading, Checking, Ready, or the sentence that says why it was not added. */
.photo-cards {
  display: grid;
  margin: var(--space-0);
  padding: var(--space-0);
  gap: var(--space-2);
  list-style: none;
}

.photo-card {
  display: grid;
  border: var(--border-width-hairline) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
  align-items: center;
  gap: var(--space-1) var(--space-3);
  grid-template-columns: var(--space-12) auto;
  justify-content: start;
}

.photo-card img {
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-xs);
  grid-row: span 2;
  object-fit: cover;
}

.photo-card-name {
  font-weight: var(--font-weight-bold);
  overflow-wrap: anywhere;
}

.photo-card-state {
  color: var(--muted);
  font-size: var(--font-size-sm);
}

.photo-card[data-state="ready"] .photo-card-state {
  color: var(--text-strong);
}

.photo-card[data-state="failed"] .photo-card-state {
  color: var(--danger);
}

/* The photos a draft holds (M365, governor section 1048): each in the order added, its state and Remove photo, which
   asks first in the option group question's look. */
.listing-photos {
  display: grid;
  margin-top: var(--space-3);
  gap: var(--space-2);
}

.listing-photos-title {
  margin: var(--space-0);
  color: var(--text-strong);
  font-weight: var(--font-weight-bold);
}

.listing-photos-list {
  display: grid;
  margin: var(--space-0);
  padding: var(--space-0);
  gap: var(--space-2);
  list-style: none;
}

.listing-photos-list > li {
  display: flex;
  border: var(--border-width-hairline) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: var(--space-2) var(--space-3);
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
}

/* A photo chosen on this page keeps its thumbnail and file name in its row (governor section 1054). They stay beside the
   words, and a narrow row puts Remove photo under them. */
.listing-photo-summary {
  display: flex;
  flex-grow: 1;
  align-items: center;
  gap: var(--space-3);
}

.listing-photo-summary > img {
  width: var(--space-12);
  height: var(--space-12);
  flex: none;
  border-radius: var(--radius-xs);
  object-fit: cover;
}

.listing-photo-described {
  display: grid;
  gap: var(--space-1);
}

/* A photo row's buttons -- Use as display photo and Remove photo -- keep together in one row, which a narrow row puts
   under the words; where the row is narrower than both, a label wraps inside its button before the row would (governor
   section 1111). */
.listing-photos-list .button-row {
  margin-top: var(--space-0);
  flex-wrap: nowrap;
  gap: var(--space-2);
}

.finish-review li[data-finish-photo] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

/* A row keeps each field at its own height, so "Choose a format" is not stretched beside a taller cell, and the fee
   lines under the price keep each term whole in figures that line up (governor section 1039, the owner's findings). */
[data-listing-composer] .form-grid {
  align-items: start;
}

.listing-fee-preview {
  font-variant-numeric: tabular-nums;
}

.listing-fee-preview [data-listing-fee-term] {
  white-space: nowrap;
}

/* Finish is the final review (governor sections 1003 and 1031, L3): the listing as buyers will see it, then what is
   still missing, what is worth adding and what the seller left out, each item a link to its field. */
.finish-review {
  display: grid;
  margin: var(--space-4) var(--space-0);
  gap: var(--space-5);
}

.finish-review [data-finish-platform] {
  margin: var(--space-0);
  color: var(--text-strong);
}

.finish-section h3 {
  margin: var(--space-0) var(--space-0) var(--space-2);
}

.finish-list {
  display: grid;
  margin: var(--space-0);
  padding: var(--space-0);
  gap: var(--space-2);
  list-style: none;
}

.finish-list li {
  border: var(--border-width-hairline) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: var(--space-3);
}

.finish-section[data-finish-missing] .finish-list li {
  border-color: var(--warning);
  background: var(--warning-soft);
}

.finish-list .button {
  display: flex;
  width: fit-content;
  margin-top: var(--space-2);
}

.finish-section summary {
  color: var(--text-strong);
  cursor: pointer;
  font-weight: var(--font-weight-bold);
}

details.finish-section[open] summary {
  margin-bottom: var(--space-2);
}

@media (max-width: 68rem) {
  .composer-preview {
    position: static;
  }
}

@media (max-width: 54rem) {
  /* minmax(0, 1fr), not 1fr: 1fr cannot shrink below its items, and at 200% zoom on a phone (180 CSS px) the composer's
     track resolved to 179px in a ~162px container, so /sell/create scrolled sideways by 11px. */
  .composer-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 46rem) {
  .choice-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .stepper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 30rem) {
  .stepper {
    grid-template-columns: 1fr;
  }
}

/* Wide screens (governor, 2026-09-21): the workspace widens to 90rem; the composer keeps its 1280 measure. */
@media (min-width: 96rem) {
  .composer-layout {
    max-width: var(--size-content);
  }
}