/* Экран quick-add.html (T-009): быстрая форма «+ момент».
   Компонент dialog.sheet (components.css) + стили формы этого экрана. */
@layer screens {
  /* ---------- Страница за формой ---------- */
  .qa-visual .photo-frame { width: min(72%, 300px); margin-inline: auto; }
  .qa-open { align-self: flex-start; }
  .qa-moments { display: flex; flex-direction: column; gap: var(--space-3); }
  .qa-moment {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    background: var(--texture-card), var(--color-surface);
    border: var(--border-width) var(--border-style) var(--color-line);
    border-radius: var(--radius-card);
  }
  .qa-moment__date { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-secondary-ink); }
  .qa-moment__photos { display: flex; gap: var(--space-2); margin-top: var(--space-1); }
  .qa-moment__photos .ph { display: block; width: 56px; border-radius: var(--radius-sm); }
  .qa-moment__photos .ph::after { inset: 18%; }
  .qa-moment__photos img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); }
  .qa-moment.is-new { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); animation: qa-new 700ms var(--ease-out) both; }
  .qa-moment__new { justify-self: start; }
  @keyframes qa-new { from { opacity: 0; transform: translateY(-12px) scale(0.98); } }

  /* ---------- Sheet: крупнее на десктопе ---------- */
  @media (min-width: 900px) {
    .qa-sheet { width: min(620px, 100% - 2 * var(--space-5)); }
  }
  .qa-target { font-size: var(--fs-sm); color: var(--color-ink-muted); }
  .qa-target strong { color: var(--color-accent-ink); font-weight: 700; }
  .qa-sheet .sheet__body { gap: var(--space-5); }

  /* ---------- Фото ---------- */
  .qa-photos { display: grid; gap: var(--space-2); }
  .qa-photos__head .field__label { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm); letter-spacing: normal; line-height: var(--lh-base); }
  .qa-photos__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); }
  .qa-photos__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
  }
  @media (min-width: 480px) { .qa-photos__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .qa-pick-cell, .qa-preview { position: relative; aspect-ratio: 1; min-width: 0; }
  .qa-pick {
    position: relative;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--space-1);
    width: 100%; height: 100%;
    border: 1.5px dashed var(--color-line-strong);
    border-radius: var(--radius-md);
    background: var(--color-accent-soft);
    color: var(--color-accent-ink);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
  }
  .qa-pick:hover { border-color: var(--color-accent); }
  .qa-pick:active { transform: scale(0.97); }
  .qa-pick:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 3px; }
  .qa-pick svg { width: 30px; height: 30px; }

  .qa-preview { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); animation: qa-pop 320ms var(--ease-out) both; }
  @keyframes qa-pop { from { opacity: 0; transform: scale(0.85); } }
  .qa-preview .ph, .qa-preview img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: cover; }
  .qa-preview .ph::after { inset: 20%; }
  /* Затемнение, пока фото грузится */
  .qa-preview::after {
    content: "";
    position: absolute; inset: 0;
    background: var(--color-scrim);
    opacity: 0.55;
    transition: opacity var(--dur-base);
    pointer-events: none;
  }
  .qa-preview.is-done::after { opacity: 0; }
  .qa-preview__progress {
    position: absolute;
    z-index: 2;
    left: 10%; right: 10%; bottom: 12%;
    height: 6px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-page) 45%, transparent);
    overflow: hidden;
    transition: opacity var(--dur-base);
  }
  .qa-preview__progress > span {
    display: block; height: 100%;
    background: var(--color-page);
    transform-origin: left;
    transform: scaleX(var(--p, 0));
    transition: transform var(--dur-base) linear;
  }
  .qa-preview.is-done .qa-preview__progress { opacity: 0; }
  .qa-preview__done {
    position: absolute;
    z-index: 2;
    left: 6px; bottom: 6px;
    display: grid; place-items: center;
    width: 24px; height: 24px;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: var(--color-on-accent);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-out);
  }
  .qa-preview__done svg { width: 15px; height: 15px; }
  .qa-preview.is-done .qa-preview__done { opacity: 1; transform: none; }
  .qa-preview__remove {
    position: absolute;
    z-index: 3;
    top: 0; right: 0;
    display: grid; place-items: center;
    width: var(--tap); height: var(--tap);
    color: var(--color-ink);
  }
  .qa-preview__remove svg {
    width: 26px; height: 26px; padding: 5px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-page) 90%, transparent);
    box-shadow: var(--shadow-sm);
  }
  .qa-preview__remove:focus-visible { outline-offset: -3px; }

  /* ---------- Текст ---------- */
  .qa-text { min-height: 96px; }
  .field--error .qa-text { border-color: var(--color-danger); }

  /* ---------- Дата ---------- */
  .qa-date { display: grid; gap: var(--space-2); border: 0; padding: 0; margin: 0; min-width: 0; }
  .qa-date > legend { padding: 0; margin-bottom: var(--space-2); }
  .qa-date__row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
  .qa-date__chip { font-weight: 600; }
  .qa-date__chip[aria-pressed="true"] { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-accent-ink); }
  .qa-date__input { flex: 1 1 9.5rem; width: auto; min-width: 0; min-height: var(--tap); padding-block: var(--space-2); }

  /* ---------- Необязательное (свёрнуто) ---------- */
  .qa-more {
    border: var(--border-width) var(--border-style) var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }
  .qa-more__summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 52px;
    padding: 0 var(--space-4);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    border-radius: inherit;
  }
  .qa-more__summary::-webkit-details-marker { display: none; }
  .qa-more__label { flex: 1; min-width: 0; padding-block: var(--space-2); line-height: 1.3; }
  .qa-more__opt { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--color-ink-muted); }
  .qa-more__chev { width: 20px; height: 20px; color: var(--color-ink-muted); transition: transform var(--dur-base) var(--ease-out); }
  .qa-more[open] .qa-more__chev { transform: rotate(180deg); }
  .qa-more__body { display: grid; gap: var(--space-4); padding: var(--space-1) var(--space-4) var(--space-4); }
  .qa-more[open] .qa-more__body { animation: qa-reveal 260ms var(--ease-out) both; }
  @keyframes qa-reveal { from { opacity: 0; transform: translateY(-6px); } }
  .qa-tags { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--space-2); }
  .qa-tags > legend { padding: 0; margin-bottom: var(--space-2); }

  .qa-footer .btn--primary { flex: 1; }
}
@layer screens {
  /* Выбранный тег виден и в Minimal (см. album.css — тот же временный фикс) */
  .qa-tags button.tag[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
}