/* ═══════════════════════════════════════════════════════════════════════
   FREE ASSETS PAGE — fa-* namespace only
   ──────────────────────────────────────────────────────────────────────
   Зеркалит .case-view структуру для grid-каталога ассетов.
   Sidebar / header / footer / work-card база — общие, лежат в shared.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Dropdown option: show category count ── */
.tags-dropdown__option-count {
  font-size: 0.6rem;
  color: var(--color-text-faint);
  letter-spacing: 0.06em;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

/* ── ASSET VIEW (replaces .case-view) ── */
.fa-view {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px 64px 0;
  gap: var(--space-4);
  box-sizing: border-box;
  overflow: hidden;
}

/* Header — mirrors .case-view__header */
.fa-view__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  flex-shrink: 0;
}
.fa-view__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}
.fa-view__cat {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}
.fa-view__sep { color: var(--color-text-faint); font-size: var(--text-xs); }
.fa-view__count {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  letter-spacing: 0.06em;
}
.fa-view__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.fa-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-width: min(100%, 44rem);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
.fa-trust__item {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.35rem var(--space-2);
  border: 1px solid var(--color-work-card-border);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--color-work-card-bg-hover) 72%, transparent);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.2;
}
.fa-trust__item::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  margin-right: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-accent-text);
  flex: 0 0 auto;
}

/* ── SCROLLABLE GRID ── */
.fa-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 48px, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 48px, #000 100%);
}
.fa-scroll::-webkit-scrollbar { width: 4px; }
.fa-scroll::-webkit-scrollbar-track { background: transparent; }
.fa-scroll::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }

.fa-grid {
  display: grid;
  /* v0.7.6 [tablet-fix]: mobile-first 1 column. Tablet/desktop поведение — в media-блоках ниже. */
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 24px 0 64px;
  list-style: none;
}

/* v0.7.6 [tablet-fix]: tablet + intermediate desktop — auto-fit minmax 320px.
   Реагирует на ширину контейнера .main-area, поэтому грид автоматически
   перестраивается при toggle sidebar (без JS-зависимости от cards-collapsed).
   Минимум 320 даёт читаемую карточку: thumb 4:3 → 240px высоты, body content
   с правильной типографической иерархией.
   Транзиции: <664px main → 1 col / 664-1007 → 2 cols / 1008+ → 3 cols. */
@media (min-width: 768px) {
  .fa-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }
}

/* v0.7.6 [tablet-fix]: на широких экранах (laptop 1440+, мониторы 2K/4K) —
   стабильно 3 колонки. Без cap auto-fit на 4K дал бы 4+ колонок, что ломает
   композицию (screenshot 3 показывает 3 cols как канонический layout). */
@media (min-width: 1440px) {
  .fa-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── ASSET CARD ── */
.fa-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, var(--color-work-card-bg-hover), var(--color-work-card-bg) 46%),
    var(--color-work-card-bg);
  border: 1px solid var(--color-work-card-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition:
    border-color 200ms var(--ease-out),
    background 200ms var(--ease-out),
    box-shadow 240ms var(--ease-out);
}
.fa-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--color-primary);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease-out);
  z-index: 5;
}
.fa-card:hover {
  border-color: var(--color-work-card-border-hov);
  background: var(--color-work-card-bg-hover);
  box-shadow: var(--shadow-md);
}
.fa-card:hover::before { opacity: 1; }
/* Thumb */
.fa-card__thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-work-card-bg-hover);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fa-card__thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 42%, oklch(0 0 0 / 0.48) 100%),
    linear-gradient(135deg, var(--color-primary-highlight), transparent 58%),
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 31px,
      color-mix(in srgb, var(--color-primary) 14%, transparent) 32px,
      transparent 33px
    );
  opacity: 0.72;
}
.fa-card__preview-btn {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.fa-card__preview-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
.fa-card__thumb::after {
  content: attr(data-label);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 1; pointer-events: none;
  opacity: 0.78;
  text-shadow: 0 1px 0 color-mix(in srgb, var(--color-bg) 72%, transparent);
  transform: translateY(0.18rem);
}
.fa-card__thumb[data-preview-state="3d"]::after {
  content: attr(data-label) " / preview";
}
.fa-card__thumb[data-preview-state="poster"]::after {
  content: attr(data-label) " / poster";
}
.fa-card__thumb[data-preview-state="fallback"]::after {
  content: attr(data-label) " / pending";
}
.fa-card__thumb.is-model-ready::after { opacity: 0; }
.fa-card__thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 2;
  transition: opacity 220ms var(--ease-out), transform 400ms var(--ease-out);
}
.fa-card__thumb.is-model-ready img { opacity: 0; transform: none; }
.fa-card:hover .fa-card__thumb img { transform: scale(1.03); }
.fa-card:hover .fa-card__thumb.is-model-ready img { transform: none; }

/* Mini 3D preview. The card remains a clean auto-rotating model surface; SVG
   thumbnails stay underneath as fallback until the GLB is ready. */
.fa-card__thumb-mv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
  cursor: default;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease-out);
  z-index: 2;
  --progress-bar-color: transparent;
  --progress-bar-height: 0;
  --progress-mask: transparent;
}
.fa-card__thumb-mv:not([data-codex-preview-enabled="true"]) {
  visibility: hidden;
}
.fa-card__thumb-mv.is-ready { opacity: 1; }
.fa-card__thumb-mv--failed { display: none; }

/* Shared fullscreen overlay subset for free-assets previews. */
.media-fs {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease-out);
}
.media-fs.is-open {
  opacity: 1;
  pointer-events: auto;
}
.media-fs__stage {
  position: relative;
  width: 100%;
  height: 100%;
}
.media-fs__stage > img,
.media-fs__stage > video,
.media-fs__stage > svg {
  position: absolute;
  inset: 48px;
  margin: auto;
  width: auto;
  height: auto;
  max-width: calc(100% - 96px);
  max-height: calc(100% - 96px);
  object-fit: contain;
  display: block;
}
.media-fs__stage > model-viewer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.media-fs__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--color-fs-close-bg);
  border: 1px solid var(--color-fs-close-border);
  border-radius: 3px;
  color: var(--color-fs-close-text);
  cursor: pointer;
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .media-fs__close:hover {
    color: var(--color-fs-close-text-hover);
    border-color: var(--color-fs-close-border-hover);
  }
}
.media-fs__close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.media-fs__close-icon {
  width: 16px;
  height: 16px;
  display: block;
}
@media (max-width: 640px) {
  .media-fs__stage > img,
  .media-fs__stage > video,
  .media-fs__stage > svg {
    inset: 24px;
    max-width: calc(100% - 48px);
    max-height: calc(100% - 48px);
  }
}

/* Badge */
.fa-card__badge {
  position: absolute;
  top: var(--space-2); left: var(--space-2);
  z-index: 3;
  display: inline-flex; align-items: center;
  height: 18px; padding: 0 6px;
  /* v0.4 [AX1]: --color-ctrl-bg → --color-surface-2, color --color-primary → --color-accent-text.
     Solid фон + текстовый accent даёт WCAG AA 4.78:1 (#4a94cf на #313131).
     Если визуал не понравится — откат: background var(--color-ctrl-bg) + backdrop-filter blur(4px) + color var(--color-primary). */
  background: var(--color-surface-2);
  border: 1px solid var(--color-primary);
  border-radius: 2px;
  color: var(--color-accent-text);
  font-family: var(--font-body);
  font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; line-height: 1;
  pointer-events: none;
}
.fa-card__state {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
}
/* Body */
.fa-card__body {
  padding: var(--space-3);
  display: flex; flex-direction: column; flex: 1;
}
.fa-card__meta {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-1); gap: var(--space-2);
}
.fa-card__cat {
  font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-text);
}
.fa-card__license {
  font-size: var(--text-xs);
  color: var(--color-text-faint); letter-spacing: 0.04em;
}
.fa-card__meta-tail {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.fa-card__hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid var(--color-work-card-border);
  border-radius: var(--radius-tag);
  color: var(--color-accent-text);
  line-height: 1;
  transform: translateY(-0.02rem);
  transition:
    border-color 160ms var(--ease-out),
    color 160ms var(--ease-out),
    background 160ms var(--ease-out);
}
.fa-card:hover .fa-card__hint {
  background: var(--color-primary-highlight);
  border-color: var(--color-primary);
  color: var(--color-text);
}
.fa-card__title {
  font-family: var(--font-display);
  font-size: var(--text-base); font-weight: 600;
  color: var(--color-text); line-height: 1.25;
  margin: 0 0 var(--space-1);
}
.fa-card__desc {
  font-size: var(--text-xs); color: var(--color-text-muted);
  line-height: 1.55; flex: 1; margin-bottom: var(--space-3);
}
/* Contents */
.fa-card__contents {
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-2); margin-bottom: var(--space-3);
}
.fa-card__contents-label {
  font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-text-faint); margin-bottom: var(--space-1);
}
.fa-card__contents-list {
  display: flex; flex-wrap: wrap; gap: 4px; list-style: none;
}
.fa-card__contents-item {
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 7px;
  font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--color-text-muted);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-tag);
  white-space: nowrap; line-height: 1;
}
/* Download button */
.fa-card__download {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); width: 100%; height: 36px; padding: 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text); background: var(--color-surface-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-tag);
  cursor: pointer; text-decoration: none;
  transition:
    color 160ms var(--ease-out),
    background 160ms var(--ease-out),
    border-color 160ms var(--ease-out),
    transform 160ms var(--ease-out);
}
.fa-card__download:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  /* v0.4 [B4 + AX1]: white-on-primary — это ЕДИНСТВЕННЫЙ цвет, проходящий WCAG AA на #327AAE
     (4.64:1). --color-text-inverse тут не годится: на dark это #212121 = 3.47:1 (fail).
     Хардкод #fff сохранён намеренно — то же решение применено в .tag-card--active бейджах.
     При смене --color-primary на менее насыщенный — пересчитать контраст. */
  color: #fff;
}
.fa-card__download:active { transform: scale(0.98); }
.fa-card__download:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.fa-card__dl-icon {
  width: 13px; height: 13px; flex-shrink: 0;
  color: var(--color-text-muted);
  transition: color 160ms var(--ease-out);
}
.fa-card__download:hover .fa-card__dl-icon { color: #fff; }
.fa-card__download:disabled {
  opacity: 0.5; pointer-events: none; cursor: not-allowed;
}
/* v0.4 [B3]: убран !important — повышаем специфичность через .fa-card__download.fa-card__download--state.
   Селектор покрывает default + :hover (с :hover тоже двойной класс — специфичность одинакова, но в CSS
   позже определённое правило побеждает при равной специфичности, поэтому --error/--done должны быть ПОСЛЕ :hover). */
.fa-card__download.fa-card__download--error,
.fa-card__download.fa-card__download--error:hover {
  border-color: var(--color-error);
  color: var(--color-error);
  background: transparent;
}
.fa-card__download.fa-card__download--error:hover .fa-card__dl-icon {
  color: var(--color-error);
}
.fa-card__download.fa-card__download--done,
.fa-card__download.fa-card__download--done:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-highlight);
}
.fa-card__download.fa-card__download--done:hover .fa-card__dl-icon {
  color: var(--color-primary);
}

/* ── SIDEBAR TAG CARDS — identical visual to .work-card ── */
.tag-card {
  position: relative;
  background:
    linear-gradient(180deg, var(--color-work-card-bg-hover), var(--color-work-card-bg) 46%),
    var(--color-work-card-bg);
  border: 1px solid var(--color-work-card-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  cursor: pointer;
  transition:
    border-color 200ms var(--ease-out),
    background 200ms var(--ease-out),
    box-shadow 240ms var(--ease-out);
}
.tag-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--color-primary);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease-out);
  z-index: 5;
}
.tag-card:hover {
  border-color: var(--color-work-card-border-hov);
  background: var(--color-work-card-bg-hover);
  box-shadow: var(--shadow-md);
}
.tag-card:hover::before,
.tag-card--active::before {
  opacity: 1;
}
.tag-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.tag-card--active {
  border-color: var(--color-primary);
  background: var(--color-work-card-bg-hover);
  box-shadow: 0 0 0 1px var(--color-primary) inset, var(--shadow-sm);
}
.tag-card--active .tag-card__cat { color: var(--color-text); }
/* v0.4 [AX1]: на --color-primary (#327AAE) WCAG AA даёт только #fff (4.64:1) или #000 (4.53:1).
   --color-text (#f0eeeb) даёт 4.00:1 (fail). Используем #fff напрямую.
   Альтернатива через токены: на dark и light темах --color-text-on-primary = #fff (можно ввести новый токен в tokens.css при следующей итерации).
   Если визуал не понравится — откат: color: var(--color-bg). */
.tag-card--active .work-card__badge,
.tag-card--active .tag-card__count-badge { background: var(--color-primary); color: #fff; }
/* Thumb */
.tag-card__thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-work-card-bg-hover);
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.tag-card__thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 42%, oklch(0 0 0 / 0.48) 100%),
    linear-gradient(135deg, var(--color-primary-highlight), transparent 58%),
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 31px,
      color-mix(in srgb, var(--color-primary) 14%, transparent) 32px,
      transparent 33px
    );
  opacity: 0.72;
}
.tag-card__thumb::after {
  content: attr(data-label);
  font-family: var(--font-display);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-text-faint);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 1; pointer-events: none;
  opacity: 0.78;
  text-shadow: 0 1px 0 color-mix(in srgb, var(--color-bg) 72%, transparent);
  transform: translateY(0.18rem);
}
.tag-card__thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 2;
  transition: transform 400ms var(--ease-out);
}
.tag-card:hover .tag-card__thumb img { transform: scale(1.03); }
/* Count badge — mirrors .work-card__badge */
.tag-card__count-badge {
  position: absolute;
  top: var(--space-2); right: var(--space-2);
  z-index: 3;
  display: inline-flex; align-items: center;
  height: 18px; padding: 0 6px;
  /* v0.4 [AX1]: --color-ctrl-bg (rgba 22/22/22/0.82) → --color-surface-2 (solid #313131).
     Полупрозрачный фон поверх linear-gradient thumbnail давал контраст ~3.4:1 (WCAG fail).
     Solid surface-2 + --color-text-muted даёт 5.27:1 → WCAG AA ✓.
     Внимание: визуал бейджа теперь без backdrop-blur (solid). Если понадобится откат —
     вернуть var(--color-ctrl-bg) и backdrop-filter: blur(4px). */
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out),
              border-color 160ms var(--ease-out);
}
/* Info */
.tag-card__info {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
}
.tag-card__meta {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}
.tag-card__cat {
  font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-text);
}
.tag-card__format {
  /* v0.4 [AX1]: --color-text-faint (#8a8884 = 3.67:1) → --color-text-muted (#a8a6a2 = 5.27:1).
     Это переопределяет inherit от .work-card__year (заморожен в shared.css). WCAG AA ✓.
     Если визуал не понравится — вернуть --color-text-faint в этом селекторе. */
  font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: 0.06em;
}
.tag-card__meta-tail {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.tag-card__title {
  font-family: var(--font-display);
  font-size: var(--text-base); font-weight: 600;
  color: var(--color-text); line-height: 1.25; margin: 0;
}
.tag-card__desc {
  font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.55; margin: 0;
}

/* ── Responsive ── */
@media (max-width: 1100px) and (min-width: 768px) {
  .fa-view { padding: var(--space-4) var(--space-8) 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fa-card, .fa-card__thumb img, .fa-card__download,
  .fa-card__thumb-mv,
  .tag-card, .tag-card__thumb img { transition: none !important; transform: none !important; }
}

/* ── Mobile: show fa-view when sidebar is collapsed ── */
@media (max-width: 767px) {
  /* Default: show sidebar (layout), hide main-area (asset view) */
  .main-area { display: none; }

  /* When collapsed: main-area is vertical column — bar on top, fa-view fills rest */
  body.cards-collapsed .main-area {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
  }

  /* case-mobile-bar: shrink to its natural height, never grow.
     Reset the negative margin from shared.css (that bar was designed for a
     padded parent container — main-area here has none, so -margin would
     offset logo outside viewport). Padding: var(--space-4) stays from shared.css. */
  .case-mobile-bar {
    flex: 0 0 auto;
    width: 100%;
    margin-inline: 0;
  }

  /* fa-view: fills remaining space, scrolls internally */
  body.cards-collapsed .fa-view {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
  }

  /* fa-view mobile layout */
  .fa-view { padding: 0 var(--space-4) 0; gap: var(--space-3); }
  .fa-view__title { font-size: var(--text-xl); }
  /* Mobile: 1 column for readability on small screens */
  .fa-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .fa-scroll { -webkit-mask-image: none; mask-image: none; }
  /* case-back visible on mobile when grid is shown */
  body.cards-collapsed .case-back { display: inline-flex; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v0.8.8b — per-tag thumb backgrounds (6 tag-cards in sidebar).
   Раньше каждая tag-card имела inline style="background:linear-gradient(...)".
   Нарушало build-rule B2. Переведено на атрибут-селектор по data-tag.
   Динамические fa-card в #fa-grid сохраняют style="background:" (data-driven
   из fa-data.js — 22 категории, вне scope M10).
═══════════════════════════════════════════════════════════════════════ */
.tag-card[data-tag="hard-surface"] .tag-card__thumb { background: linear-gradient(135deg,#1e2d3d 0,#2a3a4a 100%); }
.tag-card[data-tag="product"] .tag-card__thumb { background: linear-gradient(135deg,#2a2018 0,#3a2e22 100%); }
.tag-card[data-tag="game"] .tag-card__thumb { background: linear-gradient(135deg,#1a1a2a 0,#252535 100%); }
.tag-card[data-tag="organic"] .tag-card__thumb { background: linear-gradient(135deg,#1a1816 0,#2a2520 100%); }
.tag-card[data-tag="animation"] .tag-card__thumb { background: linear-gradient(135deg,#1a2233 0,#26304a 100%); }
.tag-card[data-tag="cad"] .tag-card__thumb { background: linear-gradient(135deg,#1d232a 0,#2a3138 100%); }