/*
 * Settings — personal settings page (display name + avatar picture).
 * The avatar well is a drop target: the whole form highlights while a file
 * is dragged over it; clicking the avatar (a <label>) opens the picker.
 *
 * Structure (BEM): .settings > .settings__section >
 *   form.settings__avatar-well > label.settings__avatar (.avatar)
 */
@layer components {
  .settings {
    display: grid;
    gap: calc(var(--u-pad) * 2);
    margin-block-start: var(--u-pad);
  }

  /* System settings sits at a comfortable ~900px, not the narrow prose column. */
  .settings--wide { --u-center-max: 56rem; }

  .settings__section {
    display: grid;
    gap: var(--u-pad);
    justify-items: start;
  }

  /* The picture section centers as a unit: avatar well, hint, remove button. */
  .settings__section--picture {
    justify-items: center;
  }

  .settings__avatar-well {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--u-pad) / 2);
    padding: var(--u-pad);
    border: var(--border-size-1) dashed var(--line);
    border-radius: var(--radius-card);
    text-align: center;
  }

  .settings__avatar-well--dragover {
    border-color: var(--accent);
    background: var(--accent-soft);
  }

  .settings__avatar {
    cursor: pointer;
    flex-shrink: 0;
  }

  /* Roomier gaps between fields inside a settings tab panel (:not([hidden]) so
     the grid display doesn't override the hidden panels' display:none). */
  .settings .tabs__panel:not([hidden]) {
    display: grid;
    gap: calc(var(--u-pad) * 1.5);
    justify-items: stretch;
  }

  /* Logo upload — a centered preview + a styled "Change…" button, mirroring the
     user-avatar control (no raw file input, no redundant "Logo" label). */
  .logo-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--u-pad);
  }
  .logo-upload__preview {
    max-block-size: 5rem;
    max-inline-size: 14rem;
    object-fit: contain;
  }
  .logo-upload__placeholder {
    display: inline-grid;
    place-items: center;
    inline-size: 9rem;
    block-size: 4rem;
    border-radius: var(--radius-ui);
    background: color-mix(in oklab, var(--ink) 6%, var(--canvas));
    color: var(--ink-muted);
  }
  .logo-upload__remove {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--u-pad) / 3);
    color: var(--ink-muted);
    font-size: var(--font-size-0);
    cursor: pointer;
  }
}