/* Экран album.html (T-009): фотоальбом. Только токены, @layer screens. */
@layer screens {
  .album { display: grid; gap: var(--space-5); padding-top: var(--space-4); }

  /* ---------- Заголовок ---------- */
  .album-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4); }
  .album-head__title { display: grid; gap: var(--space-2); max-width: 40rem; }
  .album-upload { cursor: pointer; }
  .album-upload:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 3px; }

  /* ---------- Лимит FREE ---------- */
  .album-limit {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--texture-card), var(--color-surface);
    border: var(--border-width) var(--border-style) var(--color-line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
  }
  .album-limit__title { font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: calc(var(--fs-lg) * var(--font-display-scale)); line-height: 1.2; }
  .album-limit__title strong { color: var(--color-accent-ink); font-weight: inherit; }
  .album-limit__bar { height: 8px; border-radius: var(--radius-pill); background: var(--color-surface-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--color-line); }
  .album-limit__bar > span { display: block; height: 100%; border-radius: inherit; background: var(--color-accent); transform-origin: left; transform: scaleX(var(--used, 0)); transition: transform var(--dur-turn) var(--ease-out); }
  .album-limit__bar.is-near > span { background: var(--color-secondary-ink); }
  .album-limit__cta { justify-self: start; }
  @media (min-width: 720px) {
    .album-limit { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: var(--space-5); }
  }

  /* ---------- Фильтры и сортировка ---------- */
  .album-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); }
  .album-filters { min-width: 0; }
  .album-filter { gap: var(--space-2); padding-inline: var(--space-4); }
  .album-filter::before { content: none; }
  .album-filter__n { font-weight: 500; opacity: 0.8; font-size: var(--fs-xs); }
  .album-filter--later:not([aria-pressed="true"]) { background: transparent; border: 1px dashed var(--color-line-strong); color: var(--color-ink-muted); }
  .album-sort { display: flex; align-items: center; gap: var(--space-2); }
  .album-sort__label { font-size: var(--fs-sm); font-weight: 600; color: var(--color-ink-muted); }
  .album-sort__select { width: auto; min-height: var(--tap); padding-block: var(--space-2); }

  /* ---------- Секции и сетка ---------- */
  .album-sections { display: grid; gap: var(--space-6); }
  .album-section { display: grid; gap: var(--space-3); }
  .album-section__title { display: flex; align-items: baseline; gap: var(--space-3); font-size: calc(var(--fs-xl) * var(--font-display-scale)); }
  .album-section__n { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; color: var(--color-ink-muted); letter-spacing: 0; }
  .album-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3) var(--space-2);
  }
  @media (min-width: 560px) { .album-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (min-width: 900px) { .album-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); } }

  .album-tile { min-width: 0; display: grid; gap: 4px; animation: album-in 320ms var(--ease-out) both; }
  @keyframes album-in { from { opacity: 0; transform: translateY(6px); } }
  .album-tile__btn {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    padding: 0;
    border: 4px solid var(--frame-bg);
    box-shadow: var(--shadow-sm), 0 0 0 1px var(--color-line);
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);
  }
  .album-tile:nth-child(3n+1) .album-tile__btn { rotate: calc(var(--tilt-card) * -1.5); }
  .album-tile:nth-child(3n+2) .album-tile__btn { rotate: calc(var(--tilt-card) * 1.2); }
  .album-tile__btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-md), 0 0 0 1px var(--color-line-strong); }
  .album-tile__btn .ph, .album-tile__btn img { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: calc(var(--radius-md) * 0.7); }
  .album-tile__btn .ph::after { inset: 20%; }
  .album-tile.is-main .album-tile__btn { box-shadow: 0 0 0 3px var(--color-accent), var(--shadow-md); }
  .album-tile__main {
    position: absolute;
    left: 6px; top: 6px;
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 8px 2px 5px;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.5;
  }
  .album-tile__main svg { width: 13px; height: 13px; }
  .album-tile__loading { position: absolute; inset: 0; display: grid; align-items: end; padding: 12%; background: color-mix(in srgb, var(--color-ink) 40%, transparent); }
  .album-tile__loading > span { height: 5px; border-radius: var(--radius-pill); background: var(--color-page); transform-origin: left; animation: album-load 1.4s var(--ease-out) both; }
  @keyframes album-load { from { transform: scaleX(0.05); } to { transform: scaleX(0.95); } }
  .album-tile__cap {
    font-family: var(--font-hand);
    font-style: var(--font-hand-style);
    font-size: calc(var(--fs-sm) * var(--font-display-scale));
    line-height: 1.25;
    color: var(--color-ink);
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .album-tile__cap.is-empty { color: var(--color-ink-muted); font-family: var(--font-body); font-style: normal; font-size: var(--fs-xs); }
  @media (max-width: 559px) { .album-tile__main span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .album-tile__main { padding: 3px; } }
  .album-empty { min-height: 220px; border: 1.5px dashed var(--color-line-strong); border-radius: var(--radius-card); }

  /* ---------- Окно фото ---------- */
  .album-sheet__photo .ph, .album-sheet__photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); }
  .album-switch { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap); cursor: pointer; }
  .album-switch input { position: absolute; opacity: 0; width: 52px; height: 32px; margin: 0; cursor: pointer; }
  .album-switch__track {
    position: relative;
    flex: none;
    width: 52px; height: 32px;
    border-radius: var(--radius-pill);
    background: var(--color-surface-2);
    box-shadow: inset 0 0 0 1px var(--color-line-strong);
    transition: background-color var(--dur-fast);
  }
  .album-switch__track::after {
    content: "";
    position: absolute;
    top: 4px; left: 4px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--color-page);
    box-shadow: var(--shadow-sm), 0 0 0 1px var(--color-line-strong);
    transition: transform var(--dur-base) var(--ease-out);
  }
  .album-switch input:checked + .album-switch__track { background: var(--color-accent); box-shadow: none; }
  .album-switch input:checked + .album-switch__track::after { transform: translateX(20px); }
  .album-switch input:focus-visible + .album-switch__track { outline: 3px solid var(--color-focus); outline-offset: 3px; }
  .album-switch__text { display: grid; }
  .album-delete { padding-top: var(--space-3); border-top: 1px solid var(--color-line); }
  .album-delete__btn { --btn-fg: var(--color-danger); padding-inline: var(--space-2); }
  .album-delete__btn:hover { --btn-bg: var(--color-danger-soft); }
  .album-delete__confirm { display: grid; gap: var(--space-3); margin-top: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-danger-soft); color: var(--color-ink); }
  .album-delete__yes { --btn-bg: var(--color-danger); --btn-fg: var(--color-on-accent); }
  .album-delete__yes:hover { --btn-bg: var(--color-danger); opacity: 0.9; }
}
@layer screens {
  /* Выбранный фильтр виден во всех темах (в Minimal правило темы для .tag
     перебивает button.tag[aria-pressed] в components.css — временно чиним тут) */
  .album-filter[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
}