/* ─── Tier board (共有部品) ─────────────────────────────────────────────── */
/* tier 盤面の chip / 行 / D&D / pool。/tier/ (Tasteome Tier List) と
   /tierlist/ (Custom Tier List) の両面が読む。
   2026-08-18 に shared/css/pages/tier-list.css から移設 (規則は逐語 — 見た目を変えない。
   media query 内に重複していた D&D ブロック 2 組は同値のため 1 系統へ整理)。
   ⚠ クラス契約 (.tl-chip[data-name] / .tl-tier-row[data-tier] / .tl-pool / .is-dragging 等) は
   ui/tier/useTierDrag.ts と scripts/audit/e2e_tier.py が掴む — リネーム禁止。 */

/* ── Tier rows ──────────────────────────────────────────────────────── */
.tl-board {
  display: flex; flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.tl-tier-row {
  /* 段徽章と chip 列の間隔 = 行の gap + `.tl-tier-drop` の左 padding。六角徽章の左余白
     (`.tl-tier-plate` の margin-left) がこの 2 つの和を読むので、ここで名前を付けて持つ。 */
  --tl-row-gap: 0.4rem;
  --tl-drop-pad-x: 0.6rem;
  display: flex; align-items: stretch;
  gap: var(--tl-row-gap);
  border-radius: 12px;
  background: var(--t-bg-elev);
  overflow: hidden;
  border: 1px solid transparent;
  transition: border-color 0.15s, background 0.15s;
  cursor: pointer;
}
.tl-tier-row:hover {
  border-color: color-mix(in srgb, var(--t-fg) 10%, transparent);
}
/* 閲覧 (他人の盤面) では行を押しても何も起きないので、押せる見た目を出さない。
   `/tier/` = `.tl-readonly` (section)・`/tierlist/` = `.tlb-editor.is-readonly` (BoardEditor)。 */
/* 🔴 閲覧では行を**カードではなく罫線**で区切る (owner 裁定 2026-09-29・archive 38 §6 ① 案 A)。
   ⚠ 閲覧面だけ — 編集面のカード (背景 + 角丸 + 行間) は変えない (板は閲覧面だけを示した)。
   ⚠ 区切りは `--t-rule` (罫線用の token・先例 = `components/feed.css` の `.feed-card`)。
   ⚠ 行の高さ (`.tl-tier-drop` の `min-height`) は触らない = 空の段は今の低い行のまま。 */
.tl-readonly .tl-board,
.tlb-editor.is-readonly .tl-board { gap: 0; }
.tl-readonly .tl-tier-row,
.tlb-editor.is-readonly .tl-tier-row {
  cursor: default;
  background: transparent;
  border-radius: 0;
  border-width: 0 0 1px;
  border-color: var(--t-rule);
}
/* ⚠ hover で罫線を消さない (旧: `border-color: transparent` = カードの枠を出さないための値)。 */
.tl-readonly .tl-tier-row:hover,
.tlb-editor.is-readonly .tl-tier-row:hover { border-color: var(--t-rule); }
body.tl-has-selection .tl-tier-row {
  border-color: color-mix(in srgb, var(--t-accent) 40%, transparent);
  background: color-mix(in srgb, var(--t-accent) 4%, transparent);
}
.tl-tier-label {
  flex-shrink: 0;
  width: 64px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 900;
  font-size: 2rem;
  /* v=66: white on yellow/orange/green tier bg は 1.67-2.48 ratio で fail。
     tier color bg (gold/orange/yellow/green) は明るい色なので dark text の方が高 contrast。
     light shadow で読みやすさ追加。 */
  color: #1a1d2b; /* hardcode-ok: tier color (gold/orange 等の明色) 上は dark text 固定が高 contrast */
  letter-spacing: -0.02em;
  /* v=120: リッチ化 — 色相は --tier-c (JS から注入) のまま明→暗の階調 + 上端ハイライト +
     色付き glow + 文字エンボス。 white/black は階調用で theme 非依存 (tier 色は brand 固定)。
     v=121: 目立ちすぎ抑制 — tier 色を surface に 15% 寄せてミュート (dark=沈む / light=パステル)、
     glow・ハイライトも弱めに */
  /* v=242 脱AI: 光沢ベベル(白inset/グラデ/エンボス)を撤去 → flat な tier 色 chip */
  --tier-cm: color-mix(in srgb, var(--tier-c) 85%, var(--t-surface));
  background: var(--tier-cm);
  box-shadow: none;
}
/* v=115: SS/SSS の多文字ラベルを 64px 幅に収める */
.tl-tier-label.is-len2 { font-size: 1.5rem; letter-spacing: -0.04em; }
/* SP-5c: SSS の 10 上限カウント */
.tl-tier-cap { font-size: 0.6rem; font-weight: 700; opacity: 0.85; margin-top: 1px; }
/* grandfather: 上限超 (旧データで cap 超過) は警告色で「新規追加不可」を示唆 */
.tl-tier-cap.is-over { color: var(--t-danger, #e5484d); opacity: 1; }
.tl-tier-label.is-len3 { font-size: 1.15rem; letter-spacing: -0.06em;
  text-shadow: 0 1px 2px color-mix(in srgb, var(--t-fg) 50%, transparent);
}
.tl-tier-drop {
  flex: 1;
  display: flex; flex-wrap: wrap;
  align-items: center;
  /* ⚠ **ここだけ 10px へ揃えない** (裁定どおり) — この gap は見た目の隙間ではなく
     `.tl-drop-before` (chip の左 −4px に出る挿入インジケータ・`:147-149`) の居場所で、
     詰めると**挿入位置が隣の chip に埋もれて読めなくなる**。drag の当たりと同じ扱い。 */
  gap: 0.35rem;
  padding: 0.55rem var(--tl-drop-pad-x);
  min-height: 64px;
}
.tl-tier-empty {
  /* v=66: --t-dim は tokens で contrast 4.5+ 値に修正済 (dark: #8e94aa, light: #5a5f73) */
  color: var(--t-dim);
  font-size: 0.7rem;
  font-style: italic;
  padding: 0.2rem 0.4rem;
}

/* ── Chips (works) ──────────────────────────────────────────────────── */
.tl-chip {
  /* v=116 (TIER-3): 表紙カード型 chip。 画像なしは placeholder (emoji + mass 色) で同寸 */
  display: inline-flex; flex-direction: column; align-items: stretch;
  width: 78px;
  padding: 0;
  overflow: hidden;
  /* 🔴 **カードの面 = カバー画像そのもの** (owner 指示 2026-09-13「余白はほぼ要らない。
     カバー画像と下のタイトル一行のみ」)。⇒ 下地と枠を剥がす。
     ⚠ `position: relative` は**選択の輪郭 (`::after`)** の containing block。
     🗄️ 旧: `background: --t-fg 8%` + `border: 1px --t-fg 12%` + `border-radius: 10px`。
       枠があるぶんカバーが 2px 小さく、段の中でカード同士の隙間が二重に見えていた。 */
  position: relative;
  background: none;
  border: 0;
  border-radius: var(--t-r-sm);
  color: var(--t-fg, #e8eaf2);
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  /* ⚠ `border-color` / `box-shadow` は撤去済みなので transition の対象から外す
     (選択の切替は `::after` と `filter` = どちらも別プロパティ)。 */
  transition: transform 0.12s, filter 0.12s;
  text-align: left;
}
.tl-chip:hover { transform: translateY(-2px); }
/* 閲覧の custom の text 駒は行き先 (作品ページ) が無い = 押しても何も起きない */
.tlb-editor.is-readonly .tl-chip.is-custom { cursor: default; }
.tlb-editor.is-readonly .tl-chip.is-custom:hover { transform: none; }
/* 🔴 **選択は「内側の輪郭 + 明度落とし」に統一** (全面共通・2026-09-13)。
   ⚠ 外向きの `box-shadow` + `scale(1.05)` は**器の padding を食う** — プールは
     `overflow-y: hidden` の 1 行なので、輪郭を出すためだけに上下 0.55/0.85rem の逃げが要り、
     「カードの面 = カバー」に反して隙間が広がる。内側へ出せば逃げが要らない。
   ⚠ `box-shadow: inset` ではなく **`::after` の border** — chip は中で
     `<img position:absolute; inset:0>` がカバーを敷くので、**inset shadow は画像の下に隠れる**
     (背景レイヤに描かれるため)。`::after` なら子より上に出る。 */
.tl-chip.is-selected::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--t-accent);
  border-radius: inherit;
  pointer-events: none;
}
.tl-chip.is-selected .tl-chip-art { filter: brightness(0.62); }
/* ⚠ `.tl-chip` には `:focus-visible` の規則が無く UA 既定の outline に頼っていた。
   外枠が無くなると `outline-offset` の既定 (0) でも `overflow: hidden` で切れるので、
   選択と同じ形 (内側の輪郭) で明示する。 */
.tl-chip:focus-visible { outline: none; }
.tl-chip:focus-visible::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--t-fg);
  border-radius: inherit;
  pointer-events: none;
}
/* 🗄️ **配置済みの暗転 (`.tl-chip.is-placed` の `brightness(0.45)`) は 2026-09-19 に撤去**
   (owner 逐語「段に置いた作品が黒く暗くなる → そのまま表示」)。
   🔴 **掛かっていたのは onboarding だけではない** — `/tier/` も段の中 (`.tl-tier-drop`) の
     chip に `inTier` (= true) を渡していたので**同じ暗転が出ていた**。⇒ 共有規則を外すと
     `/tier/` の段内 chip も明るくなる (**owner 逐語は onboarding だが 2 面が変わる**)。
     ⚠ プールは 3 面とも暗転しない (`/tier/` の未配置は `inTier={false}`・`/tierlist/` は
       `placed={false}`) ので、影響は「段の中」だけ。
   ⚠ **情報は別の channel が既に持っている** — 段の中に在ること自体が「配置済み」なので、
     明度で二重に言う必要が無い (`ART_DIRECTION:13` の「色を消す前に情報を移す」を満たす)。
   ⇒ prop (`placed` / `inTier`) ごと畳んだ。
   ✅ 併せて既存欠陥も解消 — この規則は詳細度が同じ `.tl-chip.is-selected`(0.62) より
     **後**に在り (旧 `:121` 対 `:135`)、段の chip を選んでも明度が変わらなかった。 */
.tl-chip-art {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  /* 🔴 受け皿 (案 3「帯」) の大きさの規則 (`work-cover.css` の container query) は**枠の実幅**を見る —
     `WorkCover` では `.work-cover` が container。駒は `WorkCover` を使わない (DOM の契約) ので、ここを container にする。 */
  container-type: inline-size;
}
/* 受け皿の中身と並び (上 = 記号 / 下 = 帯) は併記の `.work-cover-ph` (`work-cover.css`) が持つ。
   🗄️ 旧 (案 B): 記号 1 つを中央に置く `display: flex; align-items: center; justify-content: center`。 */
.tl-chip-ph { position: absolute; inset: 0; }
/* 🔴 **文字の品目 (custom・画像なし) の札** (WEB-TIERLIST-VIEW-DEFECTS)。作品の受け皿 (黒い plate) を通さず、
   薄い地 + 罫線 + 名前を札の中に (mobile の BOARD-VIEW の札と同じ描き方)。
   ⚠ 下の 1 行の名前 (`.tl-chip-name`) は**要素を残して見えなくする** — 段ごとに駒の高さを揃える
     `min-height` の役を持つので、消すと文字の駒だけ 1 行ぶん短くなる。 */
.tl-chip.is-text .tl-chip-art {
  background: var(--t-surface);
  box-shadow: inset 0 0 0 1px var(--t-rule);
  border-radius: var(--t-r-sm);
}
.tl-chip-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0.3rem;
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--t-fg);
}
/* 最大 3 行 (それ以上は省略)。⚠ clamp は中の塊に掛ける (flex の器に掛けると中央寄せが外れる)。 */
.tl-chip-text > span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.tl-chip.is-text .tl-chip-name { visibility: hidden; }
.tl-chip-cover {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* fit 自動判定 (app/cover-fit.ts) が contain を選んだ表紙。余白の下地は黒固定
   (--t-cover-plate) — mass 色 placeholder を contain の余白から透けさせない。 */
.tl-chip-cover.is-contain {
  object-fit: contain;
  background: var(--t-cover-plate);
}
/* ── v=119: Drag & Drop ─────────────────────────────────────────── */
.tl-chip {
  /* iOS 長押しの callout / 選択を抑止 (drag 用) */
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}
.tl-chip-cover { -webkit-user-drag: none; }
.tl-chip.is-dragging { opacity: 0.35; }
/* 🔴 **drag 中の複製 (ghost) は作品名を描かない** (2026-09-19・`/quick/` の caption 滲みと同型)。
   🗄️ 欠陥 = `useTierDrag.ts:61` が `chip.cloneNode(true)` で**タイトルごと複製**し、
     `.tl-ghost` も `.tl-chip-name` も**地が透明** (実測: どちらも `rgba(0,0,0,0)`)。
     ⇒ ghost のタイトルが下の chip のタイトルへ載ると**両方が描画される**
     (実測 1280: `Dragon Ball` と `Crayon Shin-` が **1,414px²** 重なる)。
   ⚠ **カバーは不透明**なので滲むのは caption だけ — `/quick/` の `.qk-card-meta` と同じ形。
   🔴 **1 行で 3 面に効く** — `/tier/` / `/tierlist/` の編集 / onboarding Step3 は
     **同じ `useTierDrag`** を使う (Step3 は 2026-09-19 に結線したばかり)。
   ⚠ **掴んでいる物はカバーで分かる**ので、ghost に名前は要らない。
     ⇒ 「ghost に不透明な地を与える」案は採らない (drag 中の見た目を 3 面で変えてしまう)。 */
.tl-ghost .tl-chip-name { visibility: hidden; }
.tl-ghost {
  position: fixed;
  z-index: 5000;
  pointer-events: none;
  transform: scale(1.06) rotate(2deg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  opacity: 0.95;
  margin: 0;
}
.tl-drop-before {
  box-shadow: -4px 0 0 0 var(--t-accent);  /* 挿入位置インジケータ (chip 左端) */
}
.tl-tier-row.is-drop-target .tl-tier-drop {
  background: color-mix(in srgb, var(--t-accent) 9%, transparent);
}

.tl-chip-domain {
  /* v=118: クロスドメイン mode のドメインバッジ (表紙左上) */
  position: absolute; top: 2px; left: 2px;
  font-size: 0.66rem; line-height: 1;
  padding: 2px 3px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.55);
  /* hardcode-ok: 常に暗い overlay の上の標識 — theme 追随だと light で暗色 on 暗色になり消える */
  color: #fff;
  display: inline-flex; align-items: center;
}
.tl-chip-name {
  font-size: 0.6rem;
  line-height: 1.3;
  /* 🔴 **左端はカバーの左端に揃える** (owner 指示・参照どおり `padding-inline: 0`)。
     ⚠ 下の `min-height` は **この padding の上下ぶん (0.24×2 = 0.48rem) を式に焼いてある** —
     片方だけ動かすと段ごとに chip の高さが揃わなくなるので、必ず 2 値を同時に動かす。 */
  padding: 0.24rem 0;
  /* カバー統一 (owner 裁定 2026-08-19): タイトルは 1 行 + ellipsis。
     min-height は 1 行ぶん固定 (揃えの役割は据え置き)。 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: calc(0.6rem * 1.3 + 0.48rem);
}

/* ── Pool (unranked) ────────────────────────────────────────────────── */
.tl-pool {
  background: var(--t-bg-elev);
  border: 1px solid var(--t-border, rgba(255,255,255,0.08));
  border-radius: 14px;
  padding: 0.8rem;
  margin-bottom: 1.2rem;
}
.tl-pool-head {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.6rem 0.8rem;
  margin-bottom: 0.6rem;
}
.tl-pool-title {
  font-weight: 800;
  color: var(--t-fg, #e8eaf2);
}
.tl-pool-count {
  color: var(--t-muted, #8a8fa3);
  font-size: 0.78rem;
  font-family: var(--t-font-mono);
}
.tl-fav-toggle {
  display: inline-flex; align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--t-fg-soft, #b8bdd0);
  cursor: pointer;
}
.tl-fav-toggle input { cursor: pointer; }
.tl-search {
  flex: 1;
  min-width: 8em;
  background: color-mix(in srgb, var(--t-fg) 8%, transparent);
  border: 1px solid var(--t-border, rgba(255,255,255,0.08));
  color: var(--t-fg, #e8eaf2);
  border-radius: 8px;
  padding: 0.35rem 0.6rem;
  font-family: inherit;
  font-size: 0.8rem;
}
.tl-search:focus {
  outline: none;
  border-color: var(--t-accent, var(--t-accent));
}
.tl-pool-grid {
  display: flex; flex-wrap: wrap;
  /* 🔴 **カード間は 10px** (owner 指摘 2026-09-13「カード同士の間が結構開いてるのが
     気になります。もう少し左右詰めれませんか」)。🗄️ 参照画像の実測は 14px だったが、
     参照は**カードが 4 列**の面で、こちらは chip が 64〜78px と小さいので同じ 14 では空く。
     ⇒ 参照の値ではなく**見えの詰まり**を採る (板で 8 / 10 を並べて決めた)。 */
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
  padding: 0.2rem;
}

/* v=114: favorites ゼロ時の empty state (pool 内 CTA) */
.tl-pool-empty {
  width: 100%;
  text-align: center;
  padding: 1.6rem 1rem;
  color: var(--t-fg-soft);
}
.tl-pool-empty p { margin: 0 0 0.5rem; }
/* ⚠ `display` は **`inline-flex` + 中央寄せ**。`inline-block` に戻すと詳細度 (0,2,0) で
   page 側 base `.tl-btn` の `inline-flex` を奪い、44px の床だけ効いて字が上に張り付く
   (`/tier/` `/tierlist/` の両方で同じ CTA なので、ここで一度に揃える)。 */
.tl-pool-empty .tl-btn {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 0.6rem; text-decoration: none;
}

.tl-more {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  color: var(--t-dim, #5a5f73);
  font-size: 0.72rem;
  font-style: italic;
}

/* ── Selection state hint ──────────────────────────────────────────── */
body:has(.tl-chip.is-selected) .tl-tier-row {
  border-color: color-mix(in srgb, var(--t-accent) 40%, transparent);
  background: color-mix(in srgb, var(--t-accent) 4%, transparent);
}
body:has(.tl-chip.is-selected) .tl-tier-row:hover {
  background: color-mix(in srgb, var(--t-accent) 10%, transparent);
  border-color: var(--t-accent, var(--t-accent));
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .tl-tier-label { width: 48px; font-size: 1.5rem; }
  .tl-tier-label.is-len2 { font-size: 1.1rem; }
  .tl-tier-label.is-len3 { font-size: 0.85rem; }
  /* ⚠ 🗄️ ここには `padding: 0.2rem 0.5rem 0.2rem 0.25rem` が残っていて、**600px 以下でだけ
     カバーの外に左右非対称の余白が戻っていた** (Final 2026-09-13)。base 側を 0 にしても
     **後勝ちの media 規則が打ち消す** — 「カードの面 = カバー」は幅に依らないので撤去する。 */
  .tl-chip { font-size: 0.7rem; max-width: 160px; }
  .tl-chip-name { max-width: 130px; }
  .tl-tier-row { --tl-drop-pad-x: 0.4rem; }
  .tl-tier-drop { padding: 0.4rem var(--tl-drop-pad-x); min-height: 56px; }
  .tl-chip { width: 64px; }
  .tl-chip-name { font-size: 0.55rem; }
  .tl-pool-grid { max-height: 300px; }
}

@media (max-width: 380px) {
  .tl-tier-label { width: 40px; font-size: 1.3rem; }
  .tl-tier-label.is-len2 { font-size: 0.95rem; }
  .tl-chip { width: 56px; }
  .tl-tier-label.is-len3 { font-size: 0.75rem; }
}

/* 🔴 タップ目標 (2026-08-30 mobile view 精査 batch 2 / G-4) — プール内検索が実測 113×28。
   `/tier/` と `/tierlist/` の両方でプールを絞る唯一の入力なので主導線に当たる。
   ⚠ `input` は `min-height` が効く (`.tl-search` は flex item なので高さが内容で決まっていた)。 */
@media (max-width: 767px) {
  .tl-search { min-height: var(--t-tap-min, 44px); }
}

/* ── /tier/ 案 A: 六角の段徽章 (batch 2 / 2026-09-07) ─────────────────────────
   🔴 **`.tl-tier-plate` が付いた要素だけ**に閉じる。`/tierlist/` (BoardEditor) の
      `.tl-tier-label` はこの class を付けないので、あちらの描画は現行のまま。
      (`/tierlist/` は行の色を inline style で直接持ち `--tier-c` すら使わない。)
   ⚠ **色は現行と同じ** (owner 裁定「段ラベルの色は現行と同じ色で固定」) —
      `.tl-tier-label` が既に持つ `--tier-cm` (= tier 色を surface へ 15% 寄せた muted 値)
      を**そのまま** `::before` へ移すだけ。生の `--tier-c` にはしない。
   ⚠ 六角は `::before` の clip-path で描き、**要素自体は矩形のまま**残す
      — 要素を clip すると focus ring まで切れる。 */
.tl-tier-label.tl-tier-plate {
  /* <button> の既定を打ち消す (tokens.css の universal reset は appearance だけ) */
  appearance: none; -webkit-appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: inherit;
  cursor: pointer;
  /* 塗りは ::before が持つので要素自体は透明。⚠ button は background / color / border を
     明示する (CSS_COLOR_RULES §3)。 */
  background: transparent;
  color: #1a1d2b; /* hardcode-ok: .tl-tier-label と同値 — tier 色 (明色) 上は dark text 固定が高 contrast */
  /* `z-index: 0` で stacking context を作り、`::before` を `z-index: -1` で
     「要素の背景の上・テキストの下」に置く。⚠ ラベル文字と `.tl-tier-cap` は
     素のテキスト/inline span で包み直せない (markup 側の契約) ので、
     順序づけは**背景側を負へ落とす**しかない。 */
  position: relative;
  z-index: 0;
  /* 🔴 行の高さに追随させない — 親 `.tl-tier-row` は `align-items: stretch` なので、
     chip が 2〜3 段に折り返した行で六角が縦に伸びる。
     ⚠ `.tl-tier-drop` の `min-height` は据置 = **行の高さ自体は変わらない**。 */
  align-self: center;
  height: 64px;
  /* 左右の余白を揃える (owner 指示 2026-09-25「六角形ラベルの左側に少し余白を・左右均等に」)。
     右の余白 = 行の gap + chip 列の左 padding なので、左も同じ和にする (幅ごとの値は `.tl-tier-row`)。 */
  margin-left: calc(var(--tl-row-gap) + var(--tl-drop-pad-x));
}
.tl-tier-label.tl-tier-plate::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--tier-cm);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
/* :disabled (readOnly / 編集ロック) でも**見た目を変えない** — 徽章が薄くなると
   「段の色」という情報自体が落ちる。押せないことは cursor だけで示す。 */
.tl-tier-label.tl-tier-plate:disabled { cursor: default; }
/* ⚠ 外向きの outline は `.tl-tier-row` の `overflow: hidden` (:20) で切れるので内側へ入れる
   — 形は `pages/search.css:64` の `.sr-tab` (負の offset) と同じ。新しい型を持ち込まない。 */
.tl-tier-label.tl-tier-plate:focus-visible {
  outline: 2px solid var(--t-accent);
  outline-offset: -2px;
}
/* 定員刻印が六角の**下の頂点** (幅 0 へ収束する) に当たらないよう詰める。
   ⚠ 既存 `.tl-tier-cap` (:55) と `is-over` の警告色 (:57) は据置 — ここで上書きするのは
      font-size / margin だけ。 */
.tl-tier-plate .tl-tier-cap { font-size: 0.52rem; margin-top: 0; }

@media (max-width: 600px) {
  .tl-tier-label.tl-tier-plate { height: 56px; }  /* 幅は上の 48px 据置 */
}
@media (max-width: 380px) {
  .tl-tier-label.tl-tier-plate { height: 48px; }  /* 幅は上の 40px 据置 */
}

/* ── プールを 1 行 + 横スクロールに (batch 2 / 2026-09-07 ・ **2026-09-13 改定**) ──────
   🔴 **3 面共通 + responsive** (owner 裁定 2026-09-13)。逐語 =
      「横スクロールにしよう。/tierlist/ でも横スクロールにして。mobile も合わせて」
      「767 以下 = 横 1 行 / 768 以上 = 折り返し + 縦枠」。
   ⇒ **767px 以下だけ**この規則を効かせ、768px 以上では base の折り返し +
      `max-height` 枠へ戻す (PC 幅では横送りより一覧性が勝つ)。
   ⚠ 境界は `.tl-domain-tabs` (`pages/tier-list.css` の 767px ブロック) と**同じ値**を使う —
      同じ面に breakpoint を 2 種類持ち込まない。
   ⚠ 付けるのは **chips を出す枝だけ** (空・失敗・読込の枝で nowrap にすると中の段落や
      CTA が潰れる)。`/tier/` は `poolScroll`、`/tierlist/` も同じ規則で判定する。
   ⚠ 詳細度 (0,2,0) で書く — `.tl-pool-grid` の `max-height` は base (:225) と
      `@media (max-width: 600px)` (:274) の 2 箇所にあり、同詳細度で書くと
      「後から書いた方が勝つ」= source 順への依存になる。
   🗄️ 旧 (2026-09-07〜09-13): 「`tl-pool-scroll` を足すのは `/tier/` の chips 枝だけ。
      `/tierlist/` は付けないので、上の `.tl-pool-grid` (:222) を**一切変えない**ことで
      影響 0 を担保する」— 全幅で横スクロールにしていた。 */
/* 🔴 **横スクロールも全幅へ** (owner 逐語 2026-09-19)。
   🗄️ 2026-09-13 の owner 裁定「**767 以下 = 横 1 行 / 768 以上 = 折り返し + 縦枠**」
     (上の注記) を、2026-09-19 の「**幅に関係なく常に固定 + 横スクロール**」が上書きする。
   ⚠ 履歴は消さない — 旧裁定の理由 (PC 幅では横送りより一覧性が勝つ) は上に残す。 */
.tl-pool-grid.tl-pool-scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  max-height: none;
  /* 🗄️ 旧: 上下 0.55 / 0.85rem の**逃げ**。`.tl-chip.is-selected` が
     `transform: scale(1.05)` + 外向き `box-shadow` だったので、`overflow-y: hidden` の
     1 行では輪郭が上下で切れたため。⇒ **選択を内側の輪郭にした (`:108-`) ので逃げは不要**。
     ⚠ 下だけ残すのは scrollbar が最下段の chip に被らないようにするため (役が別)。 */
  padding-top: 0.2rem;
  padding-bottom: 0.5rem;
  /* 🔴 **端の余白をカード間と同値にする** (owner 指摘「選択状態での左右の余白の差」)。
     ⚠ 実測 (390): 先頭 chip の左端が **3px** なのに chip 同士は 10px 空いていて、
       端だけ詰まって見えていた (= 選択の輪郭が出ると差がはっきりする)。
     ⚠ `padding` 一括ではなく **inline だけ**指定する — 上下は上の 2 行が別の役
       (scrollbar のよけ) で持っている。 */
  padding-inline: 10px;
  /* 🔴 端が切れていることを示すフェード — 1 行にしただけだと「まだ右に在る」手がかりが
     消え、未配置の作品が黙って隠れる (390 の実撮影で発見)。
     ⚠ 形は同じ面の `.tl-domain-tabs` (`pages/tier-list.css` の 767px ブロック) と**同型**
       — `local` の 2 枚は「まだ送れる」側にだけ出るので、収まっている時 (1440 の 9 件等)
       は 1 枚も出ない。新しい型を持ち込まない。
     ⚠ 下地は `.tl-pool` の `--t-bg-elev` (面の `--t-bg` ではない)。 */
  background:
    linear-gradient(to right, var(--t-bg-elev) 0%, transparent 100%) left center / 22px 100% no-repeat local,
    linear-gradient(to left, var(--t-bg-elev) 0%, transparent 100%) right center / 22px 100% no-repeat local,
    linear-gradient(to right, color-mix(in srgb, var(--t-fg) 18%, transparent), transparent) left center / 10px 100% no-repeat scroll,
    linear-gradient(to left, color-mix(in srgb, var(--t-fg) 18%, transparent), transparent) right center / 10px 100% no-repeat scroll;
}
/* ⚠ chip を縮めない。🔴 **flex item は `.tl-chip` ではなく親の `<span>`**
   (`TierPage.tsx` が chip を `<span onClick>` で包む) — `.tl-chip` に当てても no-op で、
   「潰れない」保証は span の `min-width: auto` に依存した偶然になる。直接 span を止める。
   ⚠ `.tl-more` (「+N 件」) も同じ span なので一緒に止まる = 意図どおり。 */
.tl-pool-grid.tl-pool-scroll > span { flex: none; }


/* ── 下端固定プール (dock) ────────────────────────────────────────────────
   🔴 **幅に関係なく常に固定する** (owner 逐語 2026-09-19「作品プールが幅広で sticky に
     ならない → 幅に関係なく常に固定 + 横スクロール」)。
   🗄️ 2026-09-13 は `@media (max-width: 767px)` の中に閉じていた (同日の owner 裁定
     「768 以上は折り返し」)。**2026-09-19 の owner 裁定がこれを上書き**する。 */
/* 🔴 **プールを画面下端に固定する** (owner 裁定 2026-09-13・逐語「一つの段に四作品以上
   置くと折り返しでその段の縦幅が大幅に広がって、作品プールが隠れてしまう」)。
   ⚠ 段は折り返しのまま**上でスクロール**し、**置き先ではなく置く物**を常に見せる。
   ⚠ opt-in の modifier — 付けた面だけ効く (`/tier/` `/tierlist/` へ付けるのは別 unit)。
   ⚠ 下地は不透明 (`--t-bg`) — 段が透けると読めない (CSS_COLOR_RULES の浮遊面の規約)。 */
.tl-pool.tl-pool-dock {
  /* 🔴 **`fixed`** — `sticky` では画面下に固定できない (2026-09-13 の実測)。
     ⚠ `position: sticky; bottom` は「要素が**本来その線より下に在る**時だけ」引き上げる
       規則で、**一度上を通り過ぎたら引き戻さない**。⇒ スクロールすると普通に流れて消える
       (実測: `/tier/` scrollY 1200 で dock の bottom が 126 まで抜けた / `/start/` も同様)。
     🗄️ #788 で `/start/` に入れた sticky は **スクロール前の 1 点しか測っておらず**、
       「固定できている」と誤って報告していた。⇒ 本 unit で 3 面まとめて `fixed` へ。
     ⚠ `fixed` の containing block は**祖先の `transform` / `filter` / `mask-image` /
       `will-change` / `contain`** で viewport から外れる。⇒ 3 面の祖先を機械列挙して
       **該当 0** を実測してから採用した。 */
  position: fixed; z-index: 10;
  left: 0; right: 0;
  /* 🔴 **ボトムナビの分だけ上げる** (`tokens.css` の契約 — 「画面下に固定する要素は
     この分だけ上げる」)。⚠ `bottom: 0` のままだと **5 タブの上に被さり、プールの
     下半分も隠れる** (実測: `/tier/` 390 で chip の下端が切れた)。
     ⚠ ナビの有無は**面の事実**なので、既定はナビ有り (`--t-bnav-h`) にして、
       ナビを出さない面が `--tl-dock-offset: 0px` で打ち消す (`/start/` = onboarding
       variant にはナビが無い)。CSS からは variant を知れないので、宣言側を面に置く。 */
  /* ⚠ **safe-area も足す** — `.bnav` は `padding-bottom: env(safe-area-inset-bottom)` を
     持つので実占有は `--t-bnav-h` + safe (`bottom-nav.css:21`)。53px しか上げないと
     **notch 端末で dock の下端が bar の裏へ入る** (bar は z-index 200 / dock は 10)。
     ⚠ ナビの無い面 (`/start/`) でも safe 分は要る (ホームインジケータに被る)。 */
  /* 🔴 **bnav の項は bar が実際に出ている帯だけ** (2026-09-19・Codex Plan review ①)。
     ⚠ `--t-bnav-h` は **desktop でも 53px のまま** で、消えるのは `.bnav` の表示だけ
       (`bottom-nav.css:26-28` が `min-width:1024px` で `display:none`)。全幅で固定に
       した途端、**desktop で dock が下端から 53px 浮く**。
     ⚠ 判定は media query で行う — CSS から `display:none` は読めないので、
       `bottom-nav.css:81` / `consent-banner.css:49` と**同じ帯**を使う (新しい機構を作らない)。 */
  bottom: env(safe-area-inset-bottom, 0px);
  /* ⚠ **角丸と左右の余白を外して帯にする** — `.tl-pool` の `border-radius: 14px` +
     `padding` のままだと、**角の外側から下の段が覗いて**「段が dock に食い込んで見える」
     (実写で確認)。⇒ 画面幅いっぱいの不透明な帯にして、下の段を完全に隠す。 */
  border-radius: 0;
  border-left: 0; border-right: 0; border-bottom: 0;
  border-top: 1px solid var(--t-border, var(--t-rule));
  background: var(--t-bg);
  margin-bottom: 0;
  padding-left: 0; padding-right: 0;
}
/* ⚠ dock の中では **プールの上下余白を詰める** — 固定領域が厚いと段の見える量が減る。 */
.tl-pool.tl-pool-dock > .tl-pool-grid.tl-pool-scroll {
  padding-top: 0.35rem; padding-bottom: 0.5rem;
}
/* 🔴 **固定した分の spacer を body が確保する** — `fixed` は流れから抜けるので、
   確保しないと**末尾が tray の裏に隠れる**。
   🔴 **敷くのは body** (`data-tl-dock` = `use-dock-height.ts` が tray の mount で立てる)。
     ⚠ 面の container (`.tl-shell` / `.tl-page` / `.ob-tier`) では**守れない** —
       global footer は面の**外**、`/tierlist/` の toolbar (`.tl-actions` = 保存状態 /
       公開 / PNG 保存 / 削除) は `BoardEditor` の**後続の兄弟**。
       実測 (390・最下端): footer の下端 792 に対し tray の上端 614 = 覆われていた。
       `.tl-page` は `tierlist.css` の `padding-bottom: 48px` に負けてもいた。
   🔴 **高さは実物から publish する** (`--tl-dock-h`)。
     🗄️ 旧: 実測値 177px を焼いていたが **どの面とも一致しない** — `/start/` の tray は
       chip 行 + 上限注記 + 残り件数 + 「次へ」で ≒290px、空プールの枝は 283px。
   🔴 **body の余白は加算ではなく上書き**なので、bar / バナーの分をここで**合算して書く**
     (`bottom-nav.css` の `body[data-bnav]` と同じ約束。書き落とすと末尾が隠れる)。
     ⇒ 詳細度は `[data-tl-dock][data-bnav]` (0,2,1) > `body[data-bnav]` (0,1,1)。
   ⚠ 同意バナーが出ている時の合算は `consent-banner.css` 側が持つ (バナーの高さ契約は
     あの file が所有していて、こちらから参照すると 2 箇所に式が散る)。 */
/* 🔴 **bar の 52px は bar が実際に出ている帯だけ** (2026-09-19・Codex Plan review ①)。
   ⚠ `data-bnav` は `AppShell` が variant で付けるので **全幅で立つ** (`AppShell.tsx:93`)。
     幅の判定は CSS 側が持つ既存 idiom なので、ここも `bottom-nav.css:81` と同じ帯で囲う。
     囲わないと **desktop で幽霊 52px** が本文末尾に付く。 */
body[data-tl-dock] {
  padding-bottom: calc(var(--tl-dock-h, 0px) + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 1023px) {
  /* 🔴 **bar の高さは token で書く** (2026-09-19・Codex Final の検査強化で露出)。
     🗄️ 旧は literal `52px` (= `bottom-nav.css:83` からの写し) だったが、`--t-bnav-h` は
       **52px (タブの min-height) + 1px (border-top)** = 53px (`tokens.css:320-324`)。
       dock の `bottom` は token (53) で上げるのに余白は 52 しか確保せず、**footer の最終行が
       1px だけ dock の裏に残っていた** (実測: `footer余り=-1`)。
     ⚠ `bottom-nav.css:83` の literal 52 は**触らない** — bnav を出す全面に効くので本 unit の
       scope 外 (同じ 1px の不足が dock 以外にも在る)。 */
  body[data-tl-dock][data-bnav] {
    padding-bottom: calc(
      var(--tl-dock-h, 0px) + var(--t-bnav-h, 53px) + env(safe-area-inset-bottom, 0px)
    );
  }
}
/* 🗄️ `body[data-tl-dock]:not([data-bnav])` (ナビを出さない面 = `/start/`) は
   **上の base に吸収**した (2026-09-19) — base が bar 抜きの式になったので、
   否定 selector を別に持つ理由が無くなった。 */
/* 🔴 **bnav が実際に出ている帯だけ bar の分を足す** (上の注記と対) */
@media (max-width: 1023px) {
  .tl-pool.tl-pool-dock {
    bottom: calc(var(--tl-dock-offset, var(--t-bnav-h, 0px)) + env(safe-area-inset-bottom, 0px));
  }
}

/* 🔴 **常設 drawer のぶん左へ寄せる** (2026-09-19・Codex Plan review ②)。
   ⚠ drawer は `fixed` / **z-index 300** / 幅 **300px** (`drawer.css:88-124`) で、dock は
     z-index 10。⇒ `left: 0` のままだと **dock の左 300px が drawer の裏に入る**。
   ⚠ `body` 側は既に `padding-left: 300px` を持つ (`drawer.css:120-123`) が、**`fixed` は
     viewport 基準**なので効かない。⇒ 同じ帯・同じ定数で dock 自身を寄せる。
   ⚠ **面ごとの宣言は要らない** — `data-drawer-pinned` は `AppShell` が variant で付け、
     幅の判定は CSS 側が持つ既存 idiom (`AppShell.tsx:97-103`)。`/start/` は onboarding
     variant で属性が付かないので既定の `left: 0` のまま。 */
@media (min-width: 1024px) {
  body[data-drawer-pinned="1"] .tl-pool.tl-pool-dock { left: 300px; }
}

/* ⚠ dock の中身は **本文と同じ幅・同じ中央寄せ**にする (`tier-list.css` の `.tl-shell` と
   同じ token)。⇒ 盤面と dock の左右が揃い、置き先と置く物の対応が読める。
   ⚠ **数値を焼かない** — 本文左端は幅により 312 / 320 と動くので、定数では追えない。 */
.tl-pool.tl-pool-dock > .tl-pool-grid {
  max-width: var(--t-page-max-tool, 1100px);
  margin-inline: auto;
  width: 100%;
}

/* 🗄️ 768 以上を `order` で並べ直す block は **2026-09-13 に撤去**した。
   ⚠ `sticky` → `fixed` へ替えた時点で **tray は流れから抜ける**ので、DOM の順
   (段 → tray → filters → …) がそのまま見た目になり、並べ替え自体が要らなくなった。
   🔴 **残したままだと `order` の指定が無い兄弟 (= `.tl-actions` の toolbar) が既定 0 で
   先に来て、1280 で「段 → toolbar → tray」**になる (実測で発覚)。owner が #784 で見た順
   (段 → プール → 検索 → 空状態 → toolbar) を破るので、block ごと落とす。 */