/* Shared form building blocks: sections, fields, field grid. Used by the deal
   posting form and the my/* settings forms. BEM-lite; layer order in _global.css. */

@layer components {
  /* Spacing hierarchy: tight inside a field (label/input/hint), roomier within
     a section, roomiest between sections (which a divider line separates). */
  .form-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    &.form-section--divided {
      border-block-start: 1px solid var(--color-border);
      padding-block-start: 1.5rem;
    }
  }

  .form-section__head {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .form-section__title {
    font-size: var(--text-medium);
    font-weight: 700;
    text-wrap: balance;
  }

  .form-section__desc {
    font-size: var(--text-small);
    color: var(--color-text-subtle);
  }

  .form-section__body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  /* Card-level heading and intro paragraph that lead a form, settings, or auth
     panel (distinct from the per-section title/description above). */
  .lead-title {
    font-size: var(--text-medium);
  }

  .lead {
    font-size: var(--text-small);
    color: var(--color-text-subtle);
  }

  .field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;

    /* Direct label, and the span that labels a control group (e.g. the category
       cards, which have no single element to bind a `for` to). */
    & > label,
    & > .field__label-text {
      font-size: var(--text-small);
      font-weight: 600;
    }
  }

  /* Related fields pair into two columns; everything else is a full-width row. */
  .field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem var(--inline-space);
    align-items: start;
  }

  /* Collapse to one column when the content container is narrow, not the
     viewport, so it adapts to its column (e.g. a future sidebar layout). */
  @container app (max-width: 540px) {
    .field-grid {
      grid-template-columns: 1fr;
    }
  }

  .field__hint {
    font-size: var(--text-x-small);
    color: var(--color-text-muted);
  }

  /* Two-column section: title + description on the left, fields on the right
     (the classic settings layout). Splits only once the column is wide enough;
     stacks below that via the same `app` container the form lives in. */
  .form-section--split {
    @container app (min-width: 520px) {
      display: grid;
      grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
      gap: 0.75rem 2ch;
      align-items: start;
    }
  }

  /* Selectable tile: a bordered control whose chosen option lights up via
     :has(input:checked). Accent defaults to maple red; override
     --choice-tile-accent (the theme picker uses ink). */
  .choice-tile {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-small);
    font-weight: 600;
    cursor: pointer;

    &:has(input:checked) {
      border-color: var(--choice-tile-accent, var(--color-primary));
    }

    &:has(input:focus-visible) {
      outline: 0.125rem solid var(--focus-ring-color);
      outline-offset: 2px;
    }
  }

  /* Selectable option cards — a bigger target than a radio-and-label row, with
     the maple accent on the chosen card (:has, no JS). Used for the deal
     category picker. */
  .option-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 0.5rem;
  }

  .option-card {
    gap: 0.75ch;
    padding: 0.5rem var(--inline-space);
    background: var(--color-canvas);

    & input {
      accent-color: var(--color-primary);
    }

    &:has(input:checked) {
      background: var(--color-mist);
      box-shadow: inset 0 0 0 1px var(--color-primary);
    }

    @media (any-hover: hover) {
      &:hover:not(:has(input:checked)) {
        background: var(--color-surface-sunken);
      }
    }
  }
}