/* tier-snapshot.css — custom tierlist の snapshot カード (.tsc-*)。
   feed / post / tag / profile が共有する **component CSS** (ui/tierlist/TierSnapshotCard.tsx)。
   ⚠ この 4 面のどれかに component を足す時は index.html の <link> も足す
   (検査 = apps/web/test/app/tier-snapshot-css-link.test.ts)。

   ⚠ 色は token 経由のみ (CSS_COLOR_RULES)。UI は無彩で、彩色は tier 行のラベルだけ
   (= 作者が付けた意味。ART_DIRECTION の「色は意味にだけ使う」)。行ラベルの背景色と文字色は
   palette registry から **inline style** で入る (component 側) — ここでは色を持たない。
   ⚠ markup は span で組まれている (リンク版と伏せ版で中身を共有するため) ので、
   ブロック化は CSS 側の責務。 */

.tsc-card {
  display: flex; flex-direction: column; gap: 0.45rem;
  margin: 0.5rem 0 0.2rem; padding: 0.6rem;
  border: 1px solid var(--t-border); border-radius: 10px;
  background: var(--t-surface); color: var(--t-fg); text-decoration: none;
}
a.tsc-card:hover { border-color: var(--t-accent); }
.tsc-card.is-blurred { filter: blur(6px); cursor: pointer; user-select: none; }
.tsc-card:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; }

.tsc-head { display: flex; align-items: center; gap: 0.35rem; color: var(--t-fg); }
.tsc-title { font-weight: 700; font-size: 0.92rem; overflow-wrap: anywhere; }

.tsc-rows { display: flex; flex-direction: column; gap: 0.25rem; }
.tsc-row { display: flex; align-items: flex-start; gap: 0.4rem; }
.tsc-row-label {
  flex: 0 0 4.2rem; display: inline-flex; align-items: center; justify-content: center;
  padding: 0.15rem 0.3rem; border-radius: 6px;
  font-family: var(--t-font-display); font-weight: 700; font-size: 0.76rem;
  line-height: 1.5; text-align: center; overflow-wrap: anywhere;
}
.tsc-row-items {
  flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 0.3rem;
  /* 行が空でもラベルの高さを保つ (「該当なし」も作者の序列の一部) */
  min-height: 1.5rem;
}
.tsc-item {
  display: inline-flex; align-items: center;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--t-border); border-radius: 999px;
  background: var(--t-bg-elev); font-size: 0.78rem; line-height: 1.5;
  /* 長い作品名 1 件でカードが縦に伸びるのを防ぐ */
  max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tsc-more {
  display: inline-flex; align-items: center;
  font-size: 0.74rem; color: var(--t-muted); font-variant-numeric: tabular-nums;
}

.tsc-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem;
  font-size: 0.74rem; color: var(--t-muted);
}
.tsc-see { color: var(--t-accent); }

/* profile 面のカード周り (可視性バッジ) */
.pp-boards .pp-board { margin-bottom: 0.8rem; }
.pp-boards .pp-board:last-child { margin-bottom: 0; }
.pp-board-meta { display: flex; gap: 0.4rem; margin-top: 0.25rem; }
.pp-board-vis {
  display: inline-flex; align-items: center;
  padding: 0.05rem 0.5rem; border: 1px solid var(--t-border); border-radius: 999px;
  font-size: 0.7rem; color: var(--t-muted); background: var(--t-bg-elev);
}
.pp-boards-more {
  appearance: none; cursor: pointer; width: 100%;
  margin-top: 0.4rem; padding: 0.5rem;
  border: 1px solid var(--t-border); border-radius: 10px;
  background: var(--t-bg-elev); color: var(--t-fg); font: inherit; font-size: 0.85rem;
}
.pp-boards-more:hover { border-color: var(--t-accent); }
.pp-boards-retry {
  appearance: none; cursor: pointer;
  padding: 0.1rem 0.5rem; border: 1px solid var(--t-border); border-radius: 999px;
  background: var(--t-bg-elev); color: var(--t-fg); font: inherit; font-size: 0.78rem;
}
.pp-boards-retry:hover { border-color: var(--t-accent); }