/* "Sell your work with us" (/sell) and "Track application" (/sell/application), ADR-0013. The pitch
   sits on the canvas like wall text beside the questionnaire, which hangs as one white sheet. */

@layer pages {
  .sell {
    display: grid;
    gap: var(--space-10);
    align-items: start;
    margin-block: var(--space-6) var(--space-16);
  }

  @media (min-width: 980px) {
    .sell { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); margin-top: var(--space-12); }
    .sell-intro { position: sticky; top: var(--space-8); }
  }

  .sell-intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .sell-intro__title { font-size: var(--fs-display); line-height: 1; }
  .sell-intro__lead { max-width: 42ch; font-size: var(--fs-lg); color: var(--bp-ink-2); }

  .sell-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin: var(--space-4) 0 0;
    padding: var(--space-6) 0 0;
    border-top: 1px solid var(--bp-line);
    list-style: none;
  }

  .sell-step { display: flex; gap: var(--space-4); align-items: flex-start; }

  .sell-step__number {
    flex: none;
    width: 1.4em;
    font-family: var(--font-display);
    font-size: 40px;
    font-style: italic;
    font-weight: 300;
    line-height: 1;
    color: var(--bp-brand-600);
  }

  .sell-step__title { display: block; font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.2; color: var(--bp-heading); }
  .sell-step__text { display: block; margin-top: 4px; color: var(--bp-ink-2); }

  .sell-intro__note { margin-top: var(--space-4); color: var(--bp-ink-2); }
  .sell-intro__note .hand { display: block; margin-bottom: 4px; color: var(--bp-brand-600); transform: rotate(-2deg); transform-origin: left; }

  /* The questionnaire: a white sheet on the wall. */
  .sell-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-8) var(--space-5);
    border: 1px solid var(--bp-line);
    background: var(--bp-surface);
    box-shadow: var(--shadow-hang);
  }

  @media (min-width: 560px) {
    .sell-card { padding: var(--space-10); }
  }

  .sell-card__title { font-size: var(--fs-3xl); }
  .sell-card__lead { color: var(--bp-ink-2); }
  .sell-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

  .sell-form { gap: var(--space-8); }

  .sell-form__section {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .sell-form__legend {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    width: 100%;
    margin-bottom: var(--space-2);
    padding: 0 0 var(--space-3);
    border-bottom: 1px solid var(--bp-line);
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    color: var(--bp-heading);
  }

  .sell-form__legend-number {
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    color: var(--bp-brand-600);
  }

  .sell-form__row { display: grid; gap: var(--space-5); }

  @media (min-width: 640px) {
    .sell-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  .sell-form__confirm { padding-top: var(--space-5); border-top: 1px solid var(--bp-line); }
  .sell-form__confirm .checkbox { align-items: flex-start; min-height: 0; }
  .sell-form__confirm .checkbox input { margin-top: 3px; }

  /* Chosen photos, hung small before they are sent. */
  .upload-wall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .upload-wall:empty { display: none; }

  .upload-wall__item { position: relative; }

  .upload-wall__frame {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border: 6px solid var(--bp-mat);
    background: var(--bp-mat);
    box-shadow: var(--shadow-hang);
  }

  .upload-wall__frame img { width: 100%; height: 100%; object-fit: cover; }

  .upload-wall__remove {
    position: absolute;
    top: -10px;
    inset-inline-end: -10px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: var(--bp-ink);
    color: var(--bp-paper);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
  }

  .upload-wall__remove:hover { background: var(--bp-brand-600); color: var(--bp-on-primary); }
  .upload-wall__remove .icon { font-size: 18px; }

  .upload-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 140px;
    padding: var(--space-6);
    border: 1.5px dashed var(--bp-line-strong);
    background: var(--bp-paper);
    color: var(--bp-ink-2);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--dur), background-color var(--dur);
  }

  .upload-drop .icon { font-size: 34px; color: var(--bp-brand-600); }
  .upload-drop strong { color: var(--bp-ink); }
  .upload-drop:hover,
  .upload-drop.is-over { border-color: var(--bp-brand-600); background: var(--bp-brand-50); }
  .upload-drop:has(input:focus-visible) { outline: 2px solid var(--bp-focus); outline-offset: 2px; }

  /* The file input covers the drop zone, so a tap anywhere opens the picker and drops land on it. */
  .upload-drop__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

  /* Track application */
  .track-loading { margin-block: var(--space-12); }

  .track-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    max-width: 560px;
    margin-block: var(--space-12) var(--space-20);
  }

  .track { display: flex; flex-direction: column; gap: var(--space-6); margin-block: var(--space-6) var(--space-16); }

  .track-hero { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); max-width: 720px; }
  .track-hero__title { font-size: var(--fs-display); line-height: 1; }
  .track-hero__meta { color: var(--bp-ink-2); }
  .track-hero .stages { width: 100%; max-width: 560px; }

  .track__body { display: grid; gap: var(--space-6); align-items: start; }

  @media (min-width: 980px) {
    .track__body { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-10); }
    .track__sent { position: sticky; top: var(--space-6); }
  }

  .reply-form { padding-top: var(--space-5); border-top: 1px solid var(--bp-line); }
}