/* ─── Tier List Maker ───────────────────────────────────────────────────── */
/* /tier/ page (5 domain 共通)。 tap-tap 操作の visual feedback を重視。
   ⚠ chip / 行 / D&D / pool の共有部品は shared/css/components/tier-board.css へ移設
   (2026-08-18 — /tierlist/ と共用)。ここに残るのは /tier/ 固有の shell / toolbar /
   kind toggle / lock card / actions / toast のみ。 */

/* box-sizing / body の margin reset は tokens.css に統一 */

.tier-main {
  /* 余白は変数で持つ — `ui/tier/tier-mode.css` が /tier/ の切替を /tierlist/ と同じ位置へ
     寄せる差分をこの値から計算する (WEB-NAV-B・owner 裁定 2026-09-25)。 */
  --tier-main-pad-top: 1rem;
  --tier-main-pad-x: 0.75rem;
  min-height: calc(100dvh - 80px - 60px);
  background: var(--t-bg-grad);   /* v=242 脱AI: 装飾オーロラ blob 撤去 → flat */
  padding: var(--tier-main-pad-top) var(--tier-main-pad-x) 4rem;
  color: var(--t-fg, #e8eaf2);
  font-family: var(--t-font-sans);
}

.tier-loading {
  display: flex; flex-direction: column; align-items: center;
  padding: 4rem 1rem; color: var(--t-muted, #8a8fa3);
}

/* ⚠ `/tier/` の本文幅はここが決める (`.tier-main` に max-width は無い)。
   `/tierlist/` `/quick/` と同じ **ツール型** なので同じ token を参照する
   (2026-09-05・980 のまま置くと同型の隣り合う面で 120px の差が残る = 分裂の再発)。 */
.tl-shell {
  max-width: var(--t-page-max-tool, 1100px);
  margin: 0 auto;
}

/* ── Toolbar ─────────────────────────────────────────────────────────── */
.tl-toolbar {
  display: flex; flex-direction: column; gap: 0.6rem;
  margin-bottom: 1rem;
}
/* 🗄️ `.tl-toolbar > .tl-btn { align-self: flex-start }` (#1151) は撤去 — 閲覧面の通報ボタンが
   toolbar の既定 `stretch` で全幅の帯になるのを止める規則だったが、通報は `⋯` の中へ移った
   (TIER-VIEW-BRUSHUP)。⚠ 教訓は残る: toolbar 全体に `align-items` を足さない — 編集面と閲覧面の
   `.tl-domain-tabs.chip-scroll` は stretch で幅を得て横スクロールしている。 */
/* 閲覧面の作者の 1 行 (archive 38 §6 ① = 題名の上の 1 行リンク)。⚠ 行 (stretch) の全幅を押せる帯に
   しない — 押せるのは名前の幅だけ。床は副次の 32 (`--t-tap-sub`)。 */
.tl-view-author {
  align-self: flex-start;
  display: inline-flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap;
  min-height: var(--t-tap-sub, 32px);
  padding: 0.35rem 0;
  box-sizing: border-box;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.tl-view-author-name { font-weight: 700; font-size: 0.92rem; color: var(--t-fg); }
.tl-view-author-handle { font-size: 0.82rem; color: var(--t-fg-soft); }
.tl-view-author:hover .tl-view-author-name { text-decoration: underline; }
.tl-view-author:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; }
.tl-title {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  /* 🔴 **語の途中で折らない** (2026-09-26 実測: 390 で「マ／ンガ・コミック」)。keep-all = CJK の字間では
     折らず空白と句読点で折る。⚠ `anywhere` と対 — 空白の無い長い語 (長い handle) が列からはみ出さない
     ための最後の逃げ。⚠ `word-break: auto-phrase` は WebKit に無いので使わない。 */
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.tl-title .tl-domain-name {
  background: var(--t-accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tl-domain-tabs {
  display: flex; gap: 0.35rem;
}
.tl-domain-tab {
  background: var(--t-bg-elev);
  border: 1px solid var(--t-border, rgba(255,255,255,0.08));
  color: var(--t-fg-soft, #b8bdd0);
  font-family: inherit;
  font-size: 0.82rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  /* 🔴 44px 床は常時 (一次動作 = ドメイン切替)。旧: `@media (max-width: 767px)` 内だけで、
     768 以上は 34px だった (`.tl-btn` を base へ移した batch 3 裁定 1-① の適用漏れ)。 */
  min-height: var(--t-tap-min, 44px);
  display: inline-flex; align-items: center;
}
.tl-domain-tab:hover {
  border-color: var(--t-accent, var(--t-accent));
  color: var(--t-fg, #e8eaf2);
}
.tl-domain-tab.is-active {
  background: var(--t-accent-grad);
  color: var(--t-on-accent);
  border-color: transparent;
}
/* 閲覧面の分野 chip は別 URL へのリンク (`<a>`) — 見た目は tab と同じにする。 */
a.tl-domain-tab { text-decoration: none; }

/* ── ⑥ 好き/苦手 kind トグル ──────────────────────────────────────── */
.tl-kind-toggle {
  display: inline-flex; margin-bottom: 0.8rem;
  border: 1px solid var(--t-border, rgba(255,255,255,0.08));
  border-radius: 999px; overflow: hidden;
}
.tl-kind-btn {
  background: transparent; border: none; cursor: pointer;
  font-family: inherit; font-size: 0.85rem; font-weight: 700;
  color: var(--t-fg-soft, #b8bdd0);
  padding: 0.4rem 1.05rem;
  display: inline-flex; align-items: center; gap: 0.3rem;
  transition: background 0.15s, color 0.15s;
  min-height: var(--t-tap-min, 44px); /* 常時の床 (上の .tl-domain-tab と同じ理由) */
}
.tl-kind-btn.is-active { background: var(--t-accent-grad); color: var(--t-on-accent); }
.tl-kind-btn:not(.is-active):hover { color: var(--t-fg, #e8eaf2); }

/* ── 期間 (TIER-PERIODS PR-2 案 A) — 好き / 苦手の横の native select + 期間の時の 1 枚 ───────────
   ⚠ select は OS のピッカーを使う (スマホは iOS のホイール)。見た目だけ pill に揃え、矢印は currentColor の
     2 つの三角 (色を焼かない)。⚠ 行 (`.tl-kind-row`) は折り返し可 — 320 幅で select が次の行へ降りる。 */
.tl-kind-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.8rem; }
.tl-kind-row .tl-kind-toggle { margin-bottom: 0; }
.tl-period-select {
  appearance: none; -webkit-appearance: none;
  font-family: inherit; font-size: 0.85rem; font-weight: 700;
  color: var(--t-fg); background-color: var(--t-surface);
  border: 1px solid var(--t-border); border-radius: 999px;
  min-height: var(--t-tap-min, 44px); max-width: 100%;
  padding: 0 1.85rem 0 0.85rem; cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1rem) 50%, calc(100% - 0.7rem) 50%;
  background-size: 0.3rem 0.3rem; background-repeat: no-repeat;
}
.tl-period-select:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; }
.tl-period-opts {
  display: flex; flex-direction: column; gap: 0.4rem;
  margin: 0 0 0.9rem; padding: 0.6rem 0.9rem;
  background: var(--t-surface); border: 1px solid var(--t-border); border-radius: 12px;
  font-size: 0.85rem; color: var(--t-fg);
}
.tl-period-check {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  min-height: var(--t-tap-sub, 32px); cursor: pointer;
}
.tl-period-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--t-accent); }
.tl-period-hidden { color: var(--t-muted); font-size: 0.78rem; }
.tl-period-vis { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.tl-period-vis > svg { flex-shrink: 0; color: var(--t-fg-soft); }
.tl-period-vis-text { flex: 1; min-width: 0; color: var(--t-fg-soft); }
.tl-period-vis-text b { color: var(--t-fg); }
.tl-period-vis-btn {
  background: transparent; color: var(--t-fg); border: none;
  min-height: var(--t-tap-sub, 32px); padding: 0 0.25rem;
  font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer;
}
.tl-pool-sub { font-size: 0.75rem; color: var(--t-muted); }
.tl-lock-actions { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }

/* ── ⑥ worst tier lock card (無料 gate) ──────────────────────────── */
/* 🔴 案内の時は外側の `.tl-pool` (地・枠・余白 = `components/tier-board.css`) を外す — 中の `.tl-lock-card` が
   地と枠を持つので、両方を描くと箱が二重になる (2026-10-02 の板で発見)。⚠ class `.tl-pool` は契約なので外さず、
   見た目だけ (0,2,0) で打ち消す。 */
.tl-pool.tl-pool-locked { margin-top: 1rem; background: transparent; border: 0; padding: 0; }
.tl-lock-card {
  background: var(--t-surface);
  border: 1px solid var(--t-border, rgba(255,255,255,0.08));
  border-radius: 16px;
  padding: 1.8rem 1.4rem;
  text-align: center;
  max-width: 460px; margin: 0 auto;
}
.tl-lock-icon {
  width: 46px; height: 46px; margin: 0 auto 0.7rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--t-accent) 12%, transparent);
  color: var(--t-accent);
}
.tl-lock-title {
  font-size: 1.1rem; font-weight: 800; margin: 0 0 0.5rem;
  /* 390 で末尾の 1 文字だけが次の行へ落ちた (期間の案内「…作れま / す」・TIER-PERIODS の板)。
     語の途中で折らず (`.tl-title` と同じ keep-all + anywhere の対)、行の長さを揃える。 */
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.tl-lock-card p { margin: 0 0 1rem; }
/* ⚠ `.tl-pool-empty .tl-btn` (`components/tier-board.css`) と同型 — 詳細度 (0,2,0) で
   base `.tl-btn` (0,1,0) の `inline-flex` を奪うため、`inline-block` に戻すと 44px の床
   だけ効いて字が上に張り付く (D-1 が此処だけ未達になる)。中央寄せまでを一組で持つ。 */
.tl-lock-card .tl-btn {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
}

/* v=115: シェア訴求 tagline */
.tl-tagline {
  margin: 0.1rem 0 0.9rem;
  font-size: 0.85rem;
  color: var(--t-fg-soft);
}

/* ── Action bar ─────────────────────────────────────────────────────── */
/* /tier/ → Custom Tier List 送り込みバー (PR-B 2026-08-18)。chip 選択中のみ描画。 */
/* ⚠ 選択中だけ出る帯。配置済みの作品では「プールへ戻す」が並ぶので **2 個入る前提**の
   flex 行にする (以前は button 1 個だけだった)。 */
.tl-custom-add { margin: 0.55rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tl-custom-add-name { font-weight: 700; }

.tl-actions {
  display: flex; flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}
/* 🔴 一次動作なので tap 床は **常時** `--t-tap-min` (44)。`@media` に閉じない
   (owner 裁定 2026-09-06 = batch 3 裁定 1-①。旧: `@media (max-width: 767px)` 内のみ)。
   ⚠ 下の `@media (max-width: 600px)` が padding を詰めるので、高さは padding ではなく
     `min-height` で確保する (padding を上げ直すと 600px 側の意図した詰めを打ち消す)。
   ⚠ `inline-flex` + 中央寄せは床とセット — 床だけ効くと字が上に張り付く。 */
.tl-btn {
  display: inline-flex; align-items: center; justify-content: center;
  /* ⚠ `gap` は `inline-flex` とセット — この面のボタンは全部 `<Icon /> {ラベル}` の形で、
     flex item になると icon と文字の間の空白が畳まれて字がアイコンに張り付く。
     床を `@media` から base へ上げた時に desktop まで広がった (`/tierlist/` の同名 class は
     元から `gap: var(--t-sp-1)` を持っている = そちらへ揃える)。 */
  gap: var(--t-sp-1);
  min-height: var(--t-tap-min, 44px);
  background: color-mix(in srgb, var(--t-fg) 8%, transparent);
  border: 1px solid var(--t-border-strong, rgba(255,255,255,0.15));
  color: var(--t-fg, #e8eaf2);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.55rem 1.1rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.tl-btn:hover {
  background: color-mix(in srgb, var(--t-fg) 12%, transparent);
  border-color: var(--t-accent, var(--t-accent));
}
.tl-btn-primary {
  background: var(--t-accent-grad);
  border-color: transparent;
  color: var(--t-on-accent);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.tl-btn-primary:hover { box-shadow: 0 6px 22px rgba(0,0,0,0.45); }
.tl-btn-warn { color: var(--t-negative); }
.tl-btn-warn:hover { border-color: var(--t-negative); background: color-mix(in srgb, var(--t-negative) 8%, transparent); }

.tl-hint { color: var(--t-muted, #8a8fa3); }

/* 閲覧面の盤面の直下の入口 (archive 38 §6 ① 案 A)。広い幅は左寄せで幅は中身、狭い幅は全幅。
   ⚠ 盤面 (`.tl-board`) が `margin-bottom: 1.5rem` を持つので上の余白は足さない。 */
.tl-view-cta { display: flex; flex-direction: column; align-items: flex-start; }
.tl-view-cta .tl-btn { text-decoration: none; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .tier-main { --tier-main-pad-top: 0.6rem; --tier-main-pad-x: 0.5rem; }
  .tl-btn { font-size: 0.8rem; padding: 0.5rem 0.8rem; }
  .tl-view-cta { align-items: stretch; }
}

/* 🔴 タップ目標 (2026-08-30 mobile view 精査 batch 2 / G-4) — 実測 ドメインタブ 34
   ・好き苦手 34・操作ボタン 37。いずれも `/tier/` の主導線なので `--t-tap-min` へ。 */
@media (max-width: 767px) {
  /* 🔴 **折返しをやめて 1 行 + 横スクロールにする** — このタブ列は `flex-wrap: wrap` なので、
     高さだけ 44 にすると **360 幅で 6 行 233px → 294px (+61px)** に伸びて盤面がさらに下がる
     (実測)。1 行スクロールなら **44px (−189px)** で済み、盤面が上がる。
     ⚠ 形は `/search/` の `.sr-tabs` と同じ (`overflow-x: auto` + 端のフェード) — 新しい型を
       持ち込まない。scroll 幅は 360 幅で 1,418px = 3.94 画面。 */
  .tl-domain-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* 端が切れていることを示すフェード。⚠ `local` の 2 枚が「まだ送れる」側だけに出る。 */
    background:
      linear-gradient(to right, var(--t-bg) 0%, transparent 100%) left center / 22px 100% no-repeat local,
      linear-gradient(to left, var(--t-bg) 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;
  }
  .tl-domain-tabs::-webkit-scrollbar { display: none; }
  .tl-domain-tab {
    flex: 0 0 auto;             /* 縮めない (文字が折り返すと 1 行に収まらない) */
  }
  /* ⚠ `.tl-btn` / `.tl-domain-tab` / `.tl-kind-btn` の床はここから base へ移した — 一次動作
     なので常時 (batch 3 裁定 1-①)。`@media` 内に同じ宣言を残さない。 */
}

/* ── Toast notification ─────────────────────────────────────────────── */
#tl-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--t-surface); color: var(--t-fg); border: 1px solid var(--t-border); border-radius: 10px; padding: 0.7rem 1rem; font-size: 0.85rem; z-index: 2000; box-shadow: 0 6px 24px color-mix(in srgb, var(--t-fg) 30%, transparent); max-width: 90vw; text-align: center; opacity: 0; transition: opacity 0.15s; pointer-events: none; }

@media (max-width: 380px) {
  .tl-title { font-size: 1.15rem; }
}

/* 🔴 プールの下に置く絞り込み行 (検索 / ドメイン chip / お気に入りのみ) — 2026-09-13。
   owner 逐語「作品プールは tier list の直下にくるようにしたい」「説明書きとドメインのチップも
   作品プールの上にあって、tier list と作品プールが遠くなってしまっている」。
   ⇒ 段 → プール → **ここ** → 注記 → 空状態 → 操作の手引き の順に組み替えた。
   ⚠ 共有部品 (`components/tier-board.css`) は触らない — 順序は面の都合なので面の CSS で持つ。
   ⚠ 見出し行 (`.tl-pool-head`) から降りてきた `.tl-search` が全幅にならないよう、
     行自体を flex にして幅を配る (見出し行と同じ gap 感)。 */
.tl-pool-filters {
  display: flex; flex-direction: column; gap: 0.5rem;
  margin-top: 0.7rem;
}
.tl-pool-filters .tl-search { width: 100%; }