/* ダッシュボード */
.modal.dashboard { max-width: 780px; }
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-bottom: 1rem;
}
.dash-card {
  /* 🔴 **中の chip 列の地色をこのカードの色にする** (2026-09-19)。
     ⚠ `chip-scroll` の scroll shadow は「この行が乗る面」の色を塗るので、宣言しないと
       **カードの上にページ地色の帯**が出る (実測: カード 244,244,247 に対し列 246,247,251)。
     ⚠ 容器に置く = 中のどの列にも継承される (列ごとに書き足さない)。 */
  --chip-scroll-bg: var(--surface2);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  /* 🔴 **grid item の `min-width: auto` を 0 へ** (2026-09-19 実測)。
     ⚠ 中の chip 列を `nowrap` (横送り) にすると、その列の **min-content = 全 chip の合計幅**
       になる。grid item は既定 `min-width: auto` = **min-content より小さくならない**ので、
       カードごと横へ伸び、**面全体が横スクロール**した (`/mypage/` で `document.scrollWidth`
       が 390 → **756**)。⚠ 列側の `min-width: 0` だけでは足りない (伸びるのは**この item**)。 */
  min-width: 0;
}
.dash-card-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem; color: var(--mid);
  font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.dash-bar-row {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; margin-bottom: 0.25rem;
}
.dash-bar-label {
  width: 5.5em; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-bar-meter {
  flex: 1; height: 6px; background: var(--border);
  border-radius: 3px; overflow: hidden;
}
.dash-bar-fill {
  height: 100%; border-radius: 3px;
}
.dash-bar-val {
  width: 3em; text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700; font-size: 0.75rem;
}

/* v=76: position dot 表現 (棒グラフ → 「あなたの位置」 を 軸上で示す)
 * brand voice (taste positioning, not quality rating) と一致。
 * 軸線 (薄い horizontal line) の上に:
 *   - 中央 50% (Q1〜Q3) を薄い band で背景表示
 *   - あなたの位置を accent dot (glow + bg-color ring で立体感)
 */
.dash-pos-row {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; margin-bottom: 0.35rem;
}
.dash-pos-label {
  width: 5.5em; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-pos-track {
  position: relative;
  flex: 1;
  height: 16px;
  display: flex;
  align-items: center;
}
.dash-pos-track::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1px;
  background: color-mix(in srgb, var(--t-fg) 14%, transparent);
  transform: translateY(-50%);
}
.dash-pos-track::after {
  /* 両端の tick */
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 7px;
  border-left: 1px solid color-mix(in srgb, var(--t-fg) 20%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--t-fg) 20%, transparent);
  transform: translateY(-50%);
  pointer-events: none;
}
.dash-pos-band {
  position: absolute;
  top: 50%;
  height: 7px;
  border-radius: 4px;
  transform: translateY(-50%);
  pointer-events: none;
}
/* v=77: 二段 band - 世界 (neutral gray、 z=1) + 自分 (axis 色、 z=2)。 dot は z=3 で上 */
.dash-pos-band-world {
  z-index: 1;
  /* 🔴 **非文字 3:1** (PREFS #9 案 A・owner 裁定 2026-10-01) — 旧 `--t-fg` 14% は地に対し 1.32 / 1.40 で dark ではほぼ見えなかった。
     `--t-border-control` で 3.2 / 3.4:1。点は単色のインク + 地の色の輪 (`AxisTrack.tsx`) なので帯に埋もれない (実測 5.0 / 4.4)。 */
  background: var(--t-border-control);
}
.dash-pos-band-mine  { z-index: 2; height: 9px; border-radius: 5px; }

/* v=77: legend (band 意味の凡例) */
.dash-pos-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  font-size: 0.66rem;
  color: var(--t-dim);
  margin-bottom: 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed color-mix(in srgb, var(--t-fg) 12%, transparent);
}
.dash-pos-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.dash-pos-legend-swatch {
  display: inline-block;
  width: 18px;
  height: 8px;
  border-radius: 3px;
}
.dash-pos-legend-swatch.world {
  /* ⚠ **帯 (`.dash-pos-band-world`) と同値にする** — 凡例と実物が別色だと
     「凡例が指しているもの」が読めない。3c-3 で 16% → 14%・PREFS #9 で `--t-border-control`。 */
  background: var(--t-border-control);
}
.dash-pos-legend-swatch.mine {
  background: color-mix(in srgb, var(--t-accent) 55%, transparent);
}
.dash-pos-legend-swatch.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--t-accent);
  box-shadow: 0 0 0 2px var(--t-bg), 0 0 6px var(--t-accent);
}
/* v=84: ★ swatch for 「あなた」 marker (me/mypage) */
.dash-pos-legend-swatch.star {
  width: 14px;
  height: 14px;
  background: transparent;
  border-radius: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dash-pos-legend-swatch.star::before {
  content: '\25CF'; /* ● */
  color: var(--t-accent);
  font-size: 14px;
  line-height: 1;
  text-shadow: 0 0 4px var(--t-accent);
}
.dash-pos-dot {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
/* v=84: ★ marker for me/mypage 「あなた」 (axis 色を currentColor で継承) */
.dash-pos-star {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  line-height: 1;
  z-index: 3;
  pointer-events: none;
  font-family: 'Apple Color Emoji', 'Segoe UI Symbol', sans-serif;
}
.dash-pos-star::before {
  content: '\25CF'; /* ● */
  display: block;
  /* bg color stroke で band と分離 (4 方向 + diagonal で滑らか) */
  text-shadow:
    -1.5px 0 0 var(--t-bg), 1.5px 0 0 var(--t-bg),
    0 -1.5px 0 var(--t-bg), 0 1.5px 0 var(--t-bg),
    -1px -1px 0 var(--t-bg), 1px -1px 0 var(--t-bg),
    -1px 1px 0 var(--t-bg), 1px 1px 0 var(--t-bg);
}

/* v=92: anti-vector marker ✗ (dislike centroid position)
 * ★ (like) の隣に薄い muted で表示。 z-index は ★ より低い (重なった時 ★ 前面)。
 */
.dash-pos-anti {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  line-height: 1;
  z-index: 2;
  pointer-events: none;
  font-family: 'Apple Color Emoji', 'Segoe UI Symbol', sans-serif;
  opacity: 0.85;
}
.dash-pos-anti::before {
  content: '\2717'; /* ✗ */
  display: block;
  font-weight: 700;
  /* bg color stroke で band と分離 */
  text-shadow:
    -1px 0 0 var(--t-bg), 1px 0 0 var(--t-bg),
    0 -1px 0 var(--t-bg), 0 1px 0 var(--t-bg),
    0 0 4px currentColor;
}
/* legend swatch (anti) */
.dash-pos-legend-swatch.anti {
  width: 14px;
  height: 14px;
  background: transparent;
  border-radius: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dash-pos-legend-swatch.anti::before {
  content: '\2717'; /* ✗ */
  color: var(--t-muted, var(--t-dim));
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
/* mirror warning (dislike が favorite を mirror した時 section 下に表示) */
.dash-pos-warn-mirror {
  margin-top: 0.6rem;
  font-size: 0.72rem;
  color: var(--t-dim);
  padding: 0.4rem 0.6rem;
  background: color-mix(in srgb, var(--t-cog) 8%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--t-cog) 45%, transparent);
  border-radius: 0 6px 6px 0;
  line-height: 1.5;
}
.dash-pos-val {
  width: 2.6em; text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700; font-size: 0.75rem;
}
.dash-tags { display: flex; gap: 0.3rem; }
.dash-tag {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 99px;
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
  display: inline-flex; gap: 0.35rem; align-items: center;
}
.dash-tag .count {
  background: var(--accent);
  color: var(--bg);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 0.62rem;
  padding: 0.08rem 0.45rem;
  border-radius: 99px;
  min-width: 1.4em;
  text-align: center;
}
:where(html, body)[data-theme="light"] .dash-tag .count { color: var(--t-on-accent); }
.dash-rec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
.dash-rec-item {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  transition: border-color 0.1s;
  display: flex; align-items: center; gap: 0.5rem;
  /* 🔴 grid の項目としての最小幅を 0 にする — 既定 (`auto`) だと列 `1fr` の最小幅が中身の最小幅
     (= nowrap の作品名の長さ) になり、列が広がってカードが本文の幅を越える。下の `.dash-rec-name` の
     `min-width: 0` (flex の中で縮む) と対で要る (WEB-MYPAGE-FIXES の実測で、片方だけでは直らなかった)。 */
  min-width: 0;
}
.dash-rec-item:hover { border-color: var(--accent); }
.dash-rec-rank {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--mid);
  font-size: 0.75rem;
  min-width: 1.5em;
}
.dash-rec-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0;
}
/* カバーサムネ (カバー統一 PR-2: 実体は work-cover.css。28px は行密度優先の XS 例外 —
   Codex 協議 2026-08-19。2:3 なので実寸 28x42) */
.dash-rec-cover {
  flex: 0 0 auto; width: 28px;
}
.dash-rec-name {
  flex: 1;
  /* 🔴 `min-width: 0` が無いと、nowrap の作品名の長さが flex の最小幅になり、下の ellipsis が効かない。
     上の `.dash-rec-item` の `min-width: 0` と対 (WEB-MYPAGE-FIXES 実測: 390 で 466px のカードが 366px の列から
     100px はみ出し、ページが横に 88px 流れていた)。 */
  min-width: 0;
  font-weight: 600; font-size: 0.78rem;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-rec-dist {
  color: var(--mid);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 600;
}
.dash-summary {
  background: var(--surface2);
  padding: 0.5rem 0.8rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  font-size: 0.78rem;
  color: var(--mid);
}
.dash-summary b { color: var(--accent); font-family: 'JetBrains Mono', monospace; }

/* マイページ ヘッダー (タイトル + シェアボタン) */
.mypage-header {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin-bottom: 0.6rem;
}
.mypage-header .modal-title { margin-bottom: 0; }
.mypage-share-wrap {
  position: relative;
  flex-shrink: 0;
}
.mypage-share-btn {
  background: var(--surface2);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 0.4rem 0.85rem;
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: 'Noto Sans JP', sans-serif;
}
.mypage-share-btn:hover { border-color: var(--accent); color: var(--accent); }
.mypage-share-menu {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  padding: 0.35rem;
  z-index: 1700;
  min-width: 240px;
  display: none;
  flex-direction: column;
  gap: 0.15rem;
}
.mypage-share-menu.visible { display: flex; }
.mypage-share-item {
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 0.55rem 0.75rem;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.82rem;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background 0.1s;
  white-space: nowrap;
}
.mypage-share-item:hover { background: var(--surface2); }

/* マイページ タブ */
.mypage-tabs {
  display: flex;
  gap: 0.35rem;
  margin: 0.7rem 0 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--border);
}
.mypage-tab {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 0.4rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all 0.12s;
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: 'Noto Sans JP', sans-serif;
}
.mypage-tab:hover { border-color: var(--accent); }
.mypage-tab.on {
  background: var(--active-bg);
  border-color: var(--active-border);
  color: var(--accent);
}
/* 🗑 旧 pill タブ用の `.mypage-tab-count` 一式は撤去 (WEB-MYLIST-POLISH-2)。
   unit 7 (#919) で下線型タブへ組み替えた時に地を `background: none` にしたが、
   ここに在った `:where(html, body)[data-theme="light"] .mypage-tab-count` だけが
   残り、specificity (0,2,0) で `mypage.css` の `.mypage-tab-count` (0,1,0) に
   **読込順と無関係に勝って** light で白字 (`--t-on-accent`) を当てていた。
   地が無いので白が溶け、非選択タブの件数が読めなかった (実測 contrast 1.07)。
   描画する consumer は `MypagePage.tsx` だけで、そこが付けるのは `is-on` (旧 `on`
   ではない) ため、このブロックは丸ごと dead。正 = `shared/css/pages/mypage.css`。 */

/* マイページ コンテンツ */
.mypage-content { display: block; }
.mypage-list-summary {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--mid);
  margin-bottom: 0.5rem;
  letter-spacing: 0.04em;
}

/* リストグリッド */
/* ── 作品カード = カバー主体の grid (owner 裁定 2026-09-19 = 板 案 A) ──────────
   🗄️ 旧: `auto-fill minmax(260px, 1fr)` に横長の行 (カバー 44px + タイトル + 著者・年 +
     状態バッジ) を並べていた。390 では 1 列 = 実質のリスト表示だった。
   🔴 **列数は明示する** — `auto-fill` は `--t-page-max-tool` (1100px) で列が増えすぎ、
     カードが小さくなりすぎる。390 = 3 / 640+ = 4 / 1000+ = 5。
   ⚠ カード間 gap と端の padding は作品カード共通仕様の 10px (owner 採択 2026-09-13)。 */
.mypage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (min-width: 640px)  { .mypage-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .mypage-grid { grid-template-columns: repeat(5, 1fr); } }

/* 🔴 カードは**カバー画像そのもの** — 枠・地・padding を面側が持たない
   (作品カード共通仕様・`/quick/` の `.qk-cell-face` と同型)。 */
.mypage-item {
  display: block;
  padding: 0;
  cursor: pointer;
  /* 🔴 **`min-width: 0` が無いと面ごと横スクロールする** (2026-09-19 実測)。
     ⚠ grid item の既定は `min-width: auto` = 内容より小さくならない。カバーを持たない作品の
       プレースホルダ (`.work-cover-ph`) は min-content が約 106px あるので、列を細くすると
       `1fr` がそこまでしか縮まず、列幅が不揃いになったうえで `document.scrollWidth` が
       viewport を超える (実測 390px / 4 列で 420px)。
     ⚠ 「列数が合っている」だけでは検出できない — **横溢れも測る** (unit 8 と同型の罠)。 */
  min-width: 0;
}
/* 実体は components/work-cover.css。ここはセル幅いっぱいに広げるだけ (高さは 2:3 が決める)。 */
.mypage-item-cover {
  width: 100%;
}
/* タイトルは `WorkTitle` (1 行 ellipsis)。左端はカバーの左端に揃える = 左右 padding 0。 */
.mypage-item-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--t-fg);
  padding: 4px 0 0;
}
.mypage-item:hover .mypage-item-name { color: var(--t-accent); }

/* ── モバイル: 2 カラム grid の 1 列化 ──────────────────────────
   従来この対応は mobile.css (ドメインページ専用ロード) の B5 にのみあり、
   dashboard.css を単独ロードする /mypage/ /work/ ではモバイルでも 2 カラムの
   まま軸 track が横に潰れていた。component 自身が responsive を持つ。 */
@media (max-width: 768px) {
  .dash-grid,
  .dash-stats,
  .dash-rec-grid {
    grid-template-columns: 1fr;
  }
  .dash-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .dash-tab-btn { flex-shrink: 0; }
}