/*
 * Admin → General (docs/PHASE2.md §17): the theme and the sign-in page.
 *   .general-form__layout   the sections, and the sticky preview card beside them
 *   .theme-choice           a preset (or Custom) as a radio card with its six swatches
 *   .theme-color            a custom color: a color picker and its hex field
 *   .theme-preview          a small rail, a card and the sign-in panel, in the theme being chosen
 *                           (its CSS variables are set on the box itself)
 */
@layer pages {
  .general-form__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 24px;
    align-items: start;
  }
  .general-form__sections { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
  .general-section { display: flex; flex-direction: column; gap: 16px; }
  .general-section__lead { margin: -6px 0 0; }

  /* Presets */
  .theme-choices {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
  }
  .theme-choice {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 20px;
    box-shadow: inset 0 0 0 1.5px var(--color-divider);
    background: var(--color-bg);
    cursor: pointer;
    transition: box-shadow var(--motion-fast) var(--ease-standard);
  }
  .theme-choice:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-text) 30%, transparent); }
  .theme-choice:has(input:checked) { box-shadow: 0 0 0 2px var(--color-blue); }
  .theme-choice:has(input:focus-visible) { outline: 2px solid var(--color-blue); outline-offset: 3px; }
  .theme-choice input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .theme-choice__head { display: flex; align-items: center; gap: 10px; }
  .theme-choice .choice__dot { margin-top: 0; }
  .theme-choice:has(input:checked) .choice__dot {
    border: 6px solid var(--color-blue);
    background: transparent;
    box-shadow: none;
  }
  .theme-choice__name { font-size: 15px; font-weight: 700; }
  .theme-choice__hint { color: var(--color-neutral-700); font-size: 12.5px; }

  .theme-swatches { display: flex; gap: 4px; }
  .theme-swatches__dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text) 18%, transparent);
  }

  /* Custom colors */
  .theme-colors {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
  }
  .theme-colors[hidden] { display: none; }
  .theme-colors__error { grid-column: 1 / -1; }
  .theme-color__inputs { display: flex; align-items: center; gap: 10px; }
  .theme-color__picker {
    flex: none;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: none;
    cursor: pointer;
  }
  .theme-color__picker::-webkit-color-swatch-wrapper { padding: 0; }
  .theme-color__picker::-webkit-color-swatch {
    border: 0;
    border-radius: 14px;
    box-shadow: inset 0 0 0 1.5px var(--color-divider);
  }
  .theme-color__picker::-moz-color-swatch { border: 0; border-radius: 14px; }
  .theme-color__hex { font-family: var(--font-mono); text-transform: lowercase; }

  /* Sign-in photo */
  .general-photo { display: flex; align-items: center; gap: 16px; }
  .general-photo__thumb {
    flex: none;
    width: 132px;
    height: 88px;
    overflow: hidden;
    border-radius: var(--radius-thumb);
    background: var(--color-rail-strong);
  }
  .general-photo__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .general-photo__text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
  .general-photo__name { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
  .general-photo__pick { cursor: pointer; }
  .general-photo__reset { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }

  /* Preview */
  .general-preview { display: flex; flex-direction: column; gap: 14px; }
  .theme-preview {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    overflow: hidden;
    border-radius: 20px;
    background: var(--color-bg);
    color: var(--color-text);
    box-shadow: inset 0 0 0 1.5px var(--color-divider);
  }
  .theme-preview__rail {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 8px;
    background: var(--color-rail);
    color: var(--color-rail-text);
  }
  .theme-preview__rail .nav-item { min-height: 32px; gap: 8px; padding: 0 10px; font-size: 12.5px; }
  .theme-preview__rail .nav-item__icon { font-size: 14px; }
  .theme-preview__main { padding: 12px; }
  .theme-preview__card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border-radius: 16px;
    background: var(--color-surface);
  }
  .theme-preview__title { font-size: 14px; font-weight: 700; }
  .theme-preview__meta { color: var(--color-neutral-700); font-size: 12px; }
  .theme-preview__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .theme-preview__link { color: var(--color-blue-deep); font-size: 12.5px; font-weight: 600; }
  .theme-preview__auth {
    grid-column: 1 / -1;
    display: grid;
    gap: 6px;
    padding: 12px;
    background: var(--color-rail);
    color: var(--color-rail-text-bright);
  }
  .theme-preview__photo { height: 96px; overflow: hidden; border-radius: 10px; background: var(--color-rail-strong); }
  .theme-preview__photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) sepia(0.12); }
  .theme-preview__auth-title { color: var(--color-rail-contrast); font-size: 16px; font-weight: 700; line-height: 1.15; white-space: pre-line; }
  .theme-preview__auth-body { font-size: 12px; line-height: 1.5; white-space: pre-line; }

  .theme-checks { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
  .theme-check { display: flex; align-items: center; gap: 8px; }
  .theme-check .icon { flex: none; font-size: 15px; }
  .theme-check__ok { color: var(--color-accent-2-700); }
  .theme-check__low { display: none; color: var(--color-err); }
  .theme-check.is-low .theme-check__ok { display: none; }
  .theme-check.is-low .theme-check__low { display: inline; }
  .theme-check.is-low .theme-check__label { color: var(--color-err-text); font-weight: 600; }
  .theme-check__label { flex: 1; }
  .theme-check__ratio { font-variant-numeric: tabular-nums; color: var(--color-neutral-700); }

  .general-preview__actions { display: flex; justify-content: flex-end; gap: 10px; }

  @media (max-width: 1199px) {
    .general-form__layout { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 767px) {
    .theme-colors { grid-template-columns: minmax(0, 1fr); }
    .general-photo { align-items: flex-start; }
  }
}