/* TASTEOME Identity Hub */
/* design token は tokens.css canonical — ここでは page 固有 vars のみ定義。
   data-theme toggle を妨げないため :root 全体上書きは禁止 (Theme persistence bug 修正 2026-06-03)。 */

:root {
  /* Identity Hub 固有: 16 タイプ grad (theme 不依存) */
  --type-grad-from: #1a0033; /* hardcode-ok: 16タイプ grad 既定値 (JS が上書き、theme 不依存) */
  --type-grad-to:   var(--t-accent);
}

/* box-sizing は tokens.css に統一 */
html, body { padding: 0; background: var(--bg); color: var(--fg); }
body.tasteome { min-height: 100dvh; display: flex; flex-direction: column; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--muted); }
.small { font-size: 0.85em; }

/* ── Header ──────────────────────────────────────────────── */
.hub-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.5rem; max-width: 1100px; width: 100%; margin: 0 auto;
}
.hub-brand {
  font-weight: 700; font-size: 1.2rem; letter-spacing: 0.18em;
  color: var(--fg); text-decoration: none;
}
.hub-brand:hover { text-decoration: none; opacity: 0.8; }
.hub-nav a { margin-left: 1rem; color: var(--fg); font-size: 0.9rem; }
.hub-nav a.muted { color: var(--muted); }

/* ── Main ─────────────────────────────────────────────────── */
.hub-main { flex: 1; max-width: var(--t-page-max-tool, 1100px); width: 100%; margin: 0 auto; padding: 1rem 1.5rem 4rem; }

/* ── Loading state ────────────────────────────────────────── */
.hub-loading {
  min-height: 50dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.5rem;
  color: var(--muted);
}
/* .dna-spinner / @keyframes dnaSpin は components/loading.css が canonical (color は alias 同値)。
   me/discover/profile いずれも loading.css を読むため重複定義を撤去 (DRY, 2026-06-22)。 */

/* ── Empty state (no favorites) ──────────────────────────── */
.hub-empty { text-align: center; padding: 4rem 1rem; max-width: 32em; margin: 0 auto; }
.hub-empty h1 { font-size: 1.8rem; margin-bottom: 0.5rem; }
.hub-empty p { color: var(--muted); margin-bottom: 2rem; line-height: 1.5; }
.hub-empty-cta { margin-bottom: 2.5rem; }
.hub-empty-cta a.primary {
  display: inline-block; background: var(--accent); color: var(--t-on-accent);
  padding: 1rem 1.8rem; border-radius: 12px;
  text-decoration: none; font-weight: 600; font-size: 1.05rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.hub-empty-cta a.primary:hover { transform: translateY(-1px); }
.hub-empty-explore { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--card-border); }
.hub-empty-explore p { margin: 0 0 0.8rem; }
.hub-empty-domain-list { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.hub-empty-domain-list a {
  background: var(--card-bg); color: var(--fg); border: 1px solid var(--card-border);
  padding: 0.5rem 0.9rem; border-radius: 8px; font-size: 0.9rem; text-decoration: none;
}
.hub-empty-domain-list a:hover { background: var(--hover-bg); border-color: var(--accent); }

/* ── v=95: Tasteome unlock progress indicator (empty state, 1-9 favs) ─── */
.hub-unlock-progress {
  background: var(--t-bg-elev);
  border: 1px solid var(--t-border);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  margin: 0 auto 1.6rem;
  max-width: 28em;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 1rem;
  align-items: center;
  text-align: left;
}
.hub-unlock-label { font-size: 0.85rem; color: var(--t-fg-soft); }
.hub-unlock-count {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-weight: 700; color: var(--t-accent);
  font-size: 0.9rem;
}
.hub-unlock-bar {
  grid-column: 1 / 3;
  background: color-mix(in srgb, var(--t-fg) 8%, transparent);
  border-radius: 99px; height: 6px; overflow: hidden;
}
.hub-unlock-fill {
  height: 100%; background: var(--t-accent-grad);
  border-radius: 99px; transition: width 0.3s ease;
}
.hub-unlock-msg {
  grid-column: 1 / 3;
  font-size: 0.78rem; color: var(--t-muted);
  font-style: italic;
}

/* ── Hero (Type Reveal) — monochrome (de-AI v=257) ───────────
   旧: 135° type-color グラデ + radial white glow + white-on-dark。
   新: テーマ対応の surface カード (装飾なら無彩で、色=意味の原則)。
   タイプの identity は code + 見出し書体が担い、色は持たせない。 */
.hub-hero--neutral { /* locked/private hero も同じ monochrome surface に統一 */ }
.hub-hero {
  position: relative; padding: 2rem 1.5rem; border-radius: 14px;
  background: var(--t-surface); border: 1px solid var(--t-border);
  text-align: center; margin-bottom: 2rem; color: var(--t-fg);
  overflow: hidden;
}
/* v=152 profile-polish: 巨大コードを小型化 (EDAS 等が hero を占有していたのを縮小) */
.hub-hero-code {
  font-family: var(--t-font-display);
  font-size: clamp(2rem, 7vw, 3.4rem); font-weight: 800;
  letter-spacing: 0.1em; line-height: 1.02; margin: 0 0 0.3rem;
  color: var(--t-fg);
}
.hub-hero-name { font-size: 1.15rem; font-weight: 600; margin: 0.2rem 0; color: var(--t-fg); }
.hub-hero-name-jp { font-size: 0.95rem; color: var(--t-muted); margin-bottom: 0.4rem; }
/* アバター (画像 or 頭文字フォールバック) */
.hub-avatar {
  width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 0.7rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 800; color: var(--t-fg);
  background: var(--t-bg-elev-2); border: 2px solid var(--t-border-strong);
  overflow: hidden;
}
.hub-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hub-hero-strength {
  font-style: italic; color: var(--t-fg-soft); max-width: 28em;
  margin: 1rem auto 0; line-height: 1.5;
}
.hub-rarity-badge {
  display: inline-block; margin-top: 1.5rem; padding: 0.4rem 1rem;
  background: transparent; border: 1px solid var(--t-border-strong); border-radius: 999px;
  color: var(--t-fg-soft);
  font-size: 0.95rem; font-weight: 600; letter-spacing: 0.05em;
}
.hub-subtype-note {
  margin-top: 0.8rem; font-size: 0.85em; color: var(--t-muted);
}
/* UX C4: Hero 内 Share button (唯一の accent — primary CTA) */
.hub-hero-actions { margin-top: 1.4rem; }
.hub-hero-share {
  background: var(--t-accent); color: var(--t-on-accent);
  border: none; padding: 0.7rem 1.4rem;
  border-radius: 10px; font-weight: 700; font-size: 1rem;
  cursor: pointer; font-family: inherit;
  transition: filter 0.15s, transform 0.15s;
}
.hub-hero-share:hover { transform: translateY(-1px); filter: brightness(0.92); }

/* ── Status hero (redesign v=263, /me/ 専用) ────────────────────
   final.html: crest 左 + body 右 の横並び。強み/レア度/共有は別パネル
   .hub-hero-meta に分離。base/card は clean、framing は RPG スコープで付与。
   ⚠ base .hub-hero は profile/friend が中央寄せで共用 — そちらは不変。 */
.hub-hero-status {
  display: flex; align-items: center; gap: 1rem;
  text-align: left; margin-bottom: 0.6rem;
}
.hub-hero-crest {
  flex: none; width: 64px; height: 64px;
  display: grid; place-items: center;
  font-family: var(--t-font-display); font-weight: 800;
  font-size: 1.3rem; letter-spacing: 0.04em; line-height: 0.96;
  text-align: center; white-space: pre-line; color: var(--t-fg);
  background: var(--t-bg-elev-2); border: 1px solid var(--t-border-strong);
  border-radius: 8px;
}
.hub-hero-body { min-width: 0; }
.hub-hero-kicker {
  font-family: var(--t-font-mono); font-size: 0.62rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--t-muted); margin-bottom: 0.25rem;
}
.hub-hero-status .hub-hero-name {
  font-family: var(--t-font-display); font-size: 1.35rem; font-weight: 800;
  line-height: 1.02; margin: 0;
}
.hub-hero-status .hub-hero-name-jp { margin: 0.15rem 0 0; }
/* 強み + レア度 + 共有 を載せる別パネル */
.hub-hero-meta {
  position: relative; padding: 1.4rem 1.5rem; border-radius: 14px;
  background: var(--t-surface); border: 1px solid var(--t-border);
  text-align: center; margin-bottom: 2rem;
}
.hub-hero-meta .hub-hero-strength { margin-top: 0; }
.hub-hero-meta .hub-rarity-badge { margin-top: 1rem; }
.hub-hero-meta .hub-hero-actions { margin-top: 1.2rem; }

/* ⚠ taste 指紋バー (`.hub-fp-bars` / `.hub-fp-group` / `.hub-fp-bar` / `.hub-fp-labels`) は
   撤去した — 図の本体 `HubFingerprint` が `FP_VAR` で **1 軸の値を 6 本に複製**していた
   (本数は嗜好を 1 ミリも表さない) ので案 B で消え、参照元が 0 になった規則。
   ⚠ 置き換えに置いた概要タブの軸図 (`.me-axes-overview`) も **2026-09-19 (unit 6) に撤去**
   された (owner 指示「あなたの軸は削除」) — 軸の図は `軸` タブの host 群だけが持つ。 */

/* ── 中心作 = 横スクロール装備スロット (redesign v=263, final.html .slots) ── */
.hub-slots {
  display: grid; grid-auto-flow: column; grid-auto-columns: 96px; gap: 10px;
  overflow-x: auto; scroll-snap-type: x proximity;
  margin: 0.2rem -0.3rem 0; padding: 0 0.3rem 0.4rem;
  -webkit-overflow-scrolling: touch;
}
.hub-slots::-webkit-scrollbar { height: 4px; }
.hub-slots::-webkit-scrollbar-thumb { background: var(--t-border-strong); border-radius: 2px; }
.hub-slot {
  position: relative; scroll-snap-align: start; cursor: pointer;
  transition: transform 0.1s ease;
}
.hub-slot:hover { transform: translateY(-2px); }
.hub-slot:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; }
.hub-slot-frame {
  /* 作品カードの面 = カバー画像そのもの (owner 指示 2026-09-13) — 枠 (border) と地は
     持たない (黒下地は共有 WorkCover 側)。frame は角丸のクリップと番号オーバーレイの
     位置基準としてだけ残す。 */
  position: relative; aspect-ratio: 2 / 3; overflow: hidden;
  border-radius: 5px;
}
/* 共有 WorkCover (カバー統一 2026-08-19) を frame 全面に伸ばす (frame 自体が 2/3) */
.hub-slot-frame .work-cover {
  width: 100%; height: 100%; border-radius: 0;
}
.hub-slot-frame .work-cover .work-cover-img { filter: saturate(0.9); }
/* 番号はカバー**内側**左上の小オーバーレイ (行を足さない = 余白を生まない置き方) */
.hub-slot-idx {
  position: absolute; top: 4px; left: 4px; z-index: 2;
  font-family: var(--t-font-mono); font-size: 0.6rem; letter-spacing: 0.04em;
  padding: 1px 4px; color: var(--t-fg);
  background: var(--t-bg); border: 1px solid var(--t-border-strong); border-radius: 3px;
}
.hub-slot-name {
  /* nowrap / ellipsis / display は共有 .work-title (WorkTitle) が持つ — ここは書体と間隔だけ。
     2 行 clamp とドメイン行は作品カード仕様 (owner 指示 2026-09-13) で撤去。 */
  font-size: 0.78rem; line-height: 1.3; margin-top: 0.45rem; color: var(--t-fg-soft);
}
.hub-slots-hint {
  font-family: var(--t-font-mono); font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--t-muted); margin-top: 0.6rem;
}

/* ⚠ 画面下固定の共有バー (`.hub-sticky-cta`) は撤去した — bottom nav (`.bnav` = z-index 200)
   が z-index 50 のこれを 95% 覆う既知欠陥で、案 B は頭 (`HubHeroMeta`) に共有ボタンを置く
   ので役目も重複していた (`ui/me/HubHero.tsx` の「撤去済み 2 件」②)。
   🔴 一緒に `@media (max-width: 768px) { .hub-main { padding-bottom: 5rem } }` も落とした —
     あれは **sticky bar の高さ分**の逃げで、bar が消えた今は根拠が無い。画面下の
     bottom nav ぶんの余白は `shared/css/layout/bottom-nav.css` の
     `@media (max-width: 1023px) { body[data-bnav] { padding-bottom: calc(52px + safe-area) } }`
     が **body 側で**持っている (`/me/` は `AppShell` が `data-bnav="1"` を付ける面)。
     ⚠ 5rem を残すと 768 以下で 52px + 80px の二重の空白になる。 */

/* ── Stats grid ──────────────────────────────────────────── */
.hub-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem; margin-bottom: 2rem;
}
.hub-stat {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 12px; padding: 1rem; text-align: center;
}
.hub-stat-value { font-size: 1.8rem; font-weight: 700; color: var(--fg); }
.hub-stat-label { font-size: 0.85rem; color: var(--muted); margin-top: 0.3rem; }

/* ── Two-column section (radar + top works) ───────────────── */
.hub-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem;
}
@media (max-width: 768px) {
  .hub-grid { grid-template-columns: 1fr; }
}
.hub-card {
  /* 🔴 中の chip 列の地色をこのカードの色にする (2026-09-19)。 */
  --chip-scroll-bg: var(--t-surface, var(--t-bg-elev));
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 12px; padding: 1.5rem;
}
.hub-card h2 { margin: 0 0 1rem; font-size: 1.1rem; font-weight: 600; }
.hub-radar-wrap { display: flex; justify-content: center; padding: 0.5rem 0; }

/* tier 未作成ヒント (分析精度↑の案内バナー)。控えめな accent 縁取り + CTA。 */
.hub-tier-hint {
  display: flex; align-items: center; gap: 0.8rem;
  margin-bottom: 2rem; padding: 0.9rem 1.05rem;
  background: color-mix(in srgb, var(--t-accent) 7%, var(--t-surface));
  border: 1px solid color-mix(in srgb, var(--t-accent) 30%, var(--t-border));
  border-radius: 12px; text-decoration: none; color: var(--t-fg);
  transition: border-color .14s, background .14s;
}
.hub-tier-hint:hover { border-color: var(--t-accent); background: color-mix(in srgb, var(--t-accent) 12%, var(--t-surface)); }
.hub-tier-hint-ic { flex-shrink: 0; display: inline-flex; color: var(--t-accent); }
.hub-tier-hint-body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.hub-tier-hint-body b { font-size: 0.92rem; font-weight: 700; }
.hub-tier-hint-cta {
  flex-shrink: 0; margin-left: auto; font-family: var(--t-font-mono);
  font-size: 0.78rem; font-weight: 700; color: var(--t-accent); white-space: nowrap;
}

/* 期間の tier の予告「時代ごとの好みの変化 (近日)」(TIER-PERIODS PR-2・`ui/me/HubEraTeaser.tsx`)。
   器は兄弟の `.hub-tier-hint` と同じ「案内」の様式 (accent 7% 地 + accent 30% 縁・12px 角)。
   ⚠ 本文 + 進捗 + 導線 1 本なので全体を `<a>` にしない (導線は右下の 1 本だけ)。 */
.hub-era-teaser {
  margin-bottom: 2rem; padding: 0.9rem 1.05rem;
  background: color-mix(in srgb, var(--t-accent) 7%, var(--t-surface));
  border: 1px solid color-mix(in srgb, var(--t-accent) 30%, var(--t-border));
  border-radius: 12px; color: var(--t-fg);
}
.hub-era-teaser-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.hub-era-teaser-head b { font-size: 0.92rem; font-weight: 700; }
.hub-era-teaser-soon {
  flex-shrink: 0; padding: 0.05rem 0.55rem; border-radius: 999px;
  border: 1px solid var(--t-border); background: var(--t-surface);
  font-size: 0.72rem; color: var(--t-fg-soft);
}
.hub-era-teaser-body { margin: 0.35rem 0 0.7rem; font-size: 0.85rem; color: var(--t-fg-soft); }
.hub-era-teaser-foot { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.hub-era-teaser-bar { display: inline-flex; gap: 3px; }
.hub-era-teaser-bar > span {
  width: 28px; height: 4px; border-radius: 2px;
  background: color-mix(in srgb, var(--t-fg) 15%, transparent);
}
.hub-era-teaser-bar > span.is-on { background: var(--t-accent); }
.hub-era-teaser-count { font-family: var(--t-font-mono); font-size: 0.78rem; color: var(--t-fg-soft); }
.hub-era-teaser-cta {
  margin-left: auto; display: inline-flex; align-items: center;
  min-height: var(--t-tap-sub, 32px);
  font-size: 0.85rem; font-weight: 700; color: var(--t-fg); text-decoration: underline;
}

/* ── 6軸 ridgeline (tier加重の密度の山: 上=好み / 下=苦手、world percentile 較正) ── */
.hub-ridges { display: grid; gap: 0.35rem; margin-top: 0.4rem; }
.hub-ridge-legend {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.3rem 1rem;
  font-family: var(--t-font-mono); font-size: 0.6rem; color: var(--t-muted);
  letter-spacing: 0.04em; margin-bottom: 0.4rem;
}
.hub-ridge-legend .hub-ridge-up { color: var(--t-accent); }
.hub-ridge-legend .hub-ridge-dn { color: var(--t-muted); }
.hub-ridge-row { display: grid; grid-template-columns: 6.8em 1fr; align-items: center; gap: 0.6rem; }
.hub-ridge-label {
  font-family: var(--t-font-mono); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.01em; line-height: 1.18; overflow-wrap: break-word;
  /* (b) 9軸で長ラベル (structure/arousal/valence) が ellipsis 切れしていた → 折り返しで全表示 */
}
.hub-ridge-svg { width: 100%; height: 60px; display: block; overflow: visible; }
/* per-domain 補助軸ブロック (特定ドメイン選択時のみ、コア9軸の後) */
.hub-ridge-auxsep {
  margin: 0.5rem 0 0.1rem; padding-top: 0.5rem; border-top: 1px dashed var(--t-border);
  font-family: var(--t-font-mono); font-size: 0.58rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--t-muted);
}
.hub-ridge-row.is-aux { opacity: 0.92; }
.hub-ridge-auxnote { margin-top: 0.5rem; font-size: 0.62rem; color: var(--t-muted); line-height: 1.4; }

/* ── ドメインスコープ (per-domain 分析: global タブ + section ドロップダウン) ── */
/* global ドメインタブ (分析クラスタ上部・5 section 一斉切替) */
.hub-domtabs-wrap {
  /* 🔴 **中の chip 列の地色をこの帯の色にする** (2026-09-19)。
     ⚠ この帯は半透明 + `backdrop-filter` なので、列が**不透明**な地を塗るとぼかしが切れる。
       ⇒ 帯と**同じ半透明値**を渡す。
     ⚠ 親と子が同じ半透明色を重ねるので合成は理屈上わずかに濃くなる (0.90 → 0.99) が、
       **実測では観測できない** — 宣言の有無で 2 回 build して帯 (390×70) を画素比較した結果
       **差分 0 / 27,300 画素** (2026-09-19・Codex 修正確認 finding 3 の検証)。
       ⇒ 不透明値へ置き換えると**ぼかしが切れる**ので、このままにする。 */
  --chip-scroll-bg: color-mix(in srgb, var(--t-bg) 90%, transparent);
  position: sticky; top: 0; z-index: 6; margin-bottom: 1.2rem; padding: 0.6rem 0;
  background: color-mix(in srgb, var(--t-bg) 90%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--t-border);
}
.hub-domtabs-label {
  display: block; font-family: var(--t-font-mono); font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--t-muted); margin-bottom: 0.4rem;
}
.hub-domtabs { display: flex; gap: 4px; }
.hub-domtab {
  font: inherit; font-size: 0.78rem; padding: 0.32rem 0.72rem; border-radius: 999px;
  border: 1px solid var(--t-border); background: transparent; color: var(--t-muted); cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.hub-domtab:hover { color: var(--t-fg); border-color: var(--t-muted); }
.hub-domtab.is-active { background: var(--t-accent); color: var(--t-on-accent); border-color: var(--t-accent); }
.hub-domtab .pro { font-size: 0.58rem; opacity: 0.75; font-family: var(--t-font-mono); }
/* section ごとのスコープ行 (ドロップダウン)。カード上に右寄せの独立行 (テキスト非干渉) */
.hub-scope-host { position: relative; }
.hub-scope-bar { display: flex; justify-content: flex-end; align-items: center; gap: 0.4rem; margin: 0 0 0.5rem; }
.hub-scope-sel {
  font: inherit; font-size: 0.72rem; padding: 0.18rem 1.5rem 0.18rem 0.55rem;
  border-radius: 6px; border: 1px solid var(--t-border); background: var(--t-surface); color: var(--t-fg-soft);
  cursor: pointer; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--t-muted) 50%), linear-gradient(135deg, var(--t-muted) 50%, transparent 50%);
  background-position: right 0.6rem center, right 0.45rem center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.hub-scope-sel.is-override { border-color: var(--t-accent); color: var(--t-accent); }
.hub-scope-pro { font-size: 0.6rem; font-family: var(--t-font-mono); color: var(--t-muted); }
/* Pro ロック (非 All を未課金で開いた時の blur チラ見せ + upsell) */
.hub-scope-locked { position: relative; min-height: 160px; }
/* 透かし: 中身がほぼ読めないよう強めに (blur + 減光)。upsell 側にも surface scrim を重ねる */
.hub-scope-locked .hub-scope-blur { filter: blur(15px) saturate(0.7); opacity: 0.4; pointer-events: none; user-select: none; }
.hub-scope-upsell {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.5rem; text-align: center; padding: 1rem;
  background: color-mix(in srgb, var(--t-surface) 62%, transparent);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.hub-scope-upsell a {
  font-size: 0.8rem; font-weight: 700; padding: 0.4rem 0.9rem; border-radius: 8px;
  background: var(--t-accent); color: var(--t-on-accent); text-decoration: none;
}
.hub-scope-upsell p { margin: 0; font-size: 0.8rem; color: var(--t-fg); }
/* 件数不足ゲート */
.hub-scope-thin { text-align: center; padding: 1.8rem 1rem; color: var(--t-muted); font-size: 0.82rem; }

/* ── メタ嗜好 (genre/年代/国/作り手 の lift) ───────────────── */
.hub-meta-section { margin-bottom: 2rem; padding: 1.5rem; }
.hub-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.3rem 1.6rem; margin-top: 0.6rem; }
.hub-meta-block h3 {
  margin: 0 0 0.6rem; font-family: var(--t-font-mono);
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-muted);
}
/* genre lift バー */
.hub-mt-bars { display: grid; gap: 0.45rem; }
.hub-mt-row { display: grid; grid-template-columns: 6.5em 1fr auto; align-items: center; gap: 0.5rem; }
.hub-mt-label { font-size: 0.78rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-mt-track { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--t-fg) 8%, transparent); overflow: hidden; }
.hub-mt-fill { display: block; height: 100%; border-radius: 3px; background: var(--t-accent); }
.hub-mt-val { font-family: var(--t-font-mono); font-size: 0.72rem; font-weight: 700; color: var(--t-fg); white-space: nowrap; }
.hub-mt-val small { color: var(--t-muted); font-weight: 400; margin-left: 0.25em; }
/* decade ヒストグラム */
.hub-mt-decs { display: flex; align-items: flex-end; gap: 3px; height: 56px; }
.hub-mt-dec { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px; }
.hub-mt-dec-bar { width: 100%; max-width: 14px; border-radius: 2px 2px 0 0; background: color-mix(in srgb, var(--t-fg) 22%, transparent); }
.hub-mt-dec.is-center .hub-mt-dec-bar { background: var(--t-accent); }
.hub-mt-dec-lab { font-family: var(--t-font-mono); font-size: 0.55rem; color: var(--t-muted); }
.hub-mt-note { margin: 0.55rem 0 0; font-size: 0.8rem; color: var(--t-fg-soft); }
.hub-mt-note b { color: var(--t-fg); font-weight: 700; }
/* country / creator */
.hub-mt-ctrys, .hub-mt-creators { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.3rem; }
.hub-mt-ctry, .hub-mt-creator {
  font-size: 0.76rem; padding: 0.2rem 0.5rem; border-radius: 6px;
  background: color-mix(in srgb, var(--t-fg) 6%, transparent); border: 1px solid var(--t-border);
}
.hub-mt-ctry b, .hub-mt-creator b { font-weight: 700; }
.hub-mt-ctry em { font-style: normal; color: var(--t-accent); font-family: var(--t-font-mono); font-weight: 700; }

/* ── 感情コンパス (taxonomy v2: valence × arousal 象限) ───────── */
.hub-compass-section { margin-bottom: 2rem; padding: 1.4rem; }
.hub-compass-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
}
/* コンパス SVG は固定 px 幅 (size=280) だが狭い画面では縮小 (viewBox 維持で等比) */
.hub-compass-wrap svg { max-width: 100%; height: auto; }
.hub-compass-readout {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem;
  justify-content: center; font-size: 0.82rem; color: var(--t-dim);
}
.hub-compass-readout b { font-weight: 700; }

/* weight 凡例: ドット色の濃さランプ (軽 → 重)。teal の不透明度で表現。 */
.hub-compass-legend {
  display: flex; align-items: center; justify-content: center;
  gap: 0.4rem; margin-top: 0.6rem;
  font-size: 0.7rem; color: var(--t-muted);
  font-family: var(--t-font-mono); letter-spacing: 0.04em;
}
.hub-compass-legend .hub-cl-ramp {
  width: 64px; height: 8px; border-radius: 4px;
  border: 1px solid var(--t-border);
  /* 不透明な下地 (--t-surface) の上に色軸 token を 30%→100% で重ねる = ドットと同じ見え方。
     --cl-ramp-color はコンパスごとに設定 (emo=weight / demand=open)、既定は weight。 */
  background:
    linear-gradient(to right,
      color-mix(in srgb, var(--cl-ramp-color, var(--t-weight)) 30%, transparent),
      var(--cl-ramp-color, var(--t-weight))),
    var(--t-surface);
}
.hub-compass-legend .hub-cl-note {
  color: var(--t-dim); letter-spacing: 0.02em;
}

/* ── G_me: 16 Type tile panel ─────────────────────────────── */
.hub-types-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem;
}
.hub-type-tile {
  /* v=86: button UA appearance を無効化 (default buttonface bg + black text を打ち消す) */
  appearance: none;
  -webkit-appearance: none;
  padding: 0.55rem 0.3rem; text-align: center;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em;
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.1s ease, filter 0.1s ease;
  /* v=83: rgba(255,255,255,0.04) → token (light theme で透明化 + grayed text 読めない bug) */
  background: var(--t-bg-elev); color: var(--t-dim);
}
.hub-type-tile:hover { transform: translateY(-1px); filter: brightness(1.12); }
.hub-type-tile:active { transform: translateY(0); }
.hub-type-tile.compat {
  background: color-mix(in srgb, var(--t-accent) 18%, transparent);
  color: var(--t-accent);
  border-color: color-mix(in srgb, var(--t-accent) 35%, transparent);
}
/* v=86: light theme で accent on accent-tinted bg は contrast 不足 → fg に override */
:where(html, body)[data-theme="light"] .hub-type-tile.compat { color: var(--t-fg); }
.hub-type-tile.self {
  /* de-AI v=257: 選択タイプ = accent 塗り (旧 135° blue→gold グラデ撤去) */
  background: var(--t-accent);
  color: var(--t-on-accent); border-color: var(--t-accent);
}
.hub-types-legend {
  display: flex; gap: 0.7rem; margin-top: 0.7rem;
  font-size: 0.72rem; color: var(--muted); flex-wrap: wrap;
}
.hl { display: inline-flex; align-items: center; gap: 0.3em; }
.hl-dot { width: 8px; height: 8px; border-radius: 2px; }
.hl-self { background: var(--t-accent); }
.hl-compat { background: color-mix(in srgb, var(--t-accent) 50%, transparent); }
.hl-other { background: color-mix(in srgb, var(--t-fg) 12%, transparent); }

/* ── G_me: 6 軸 bar chart detail ─────────────────────────── */
.axes-detail-section { margin-bottom: 2rem; padding: 1.4rem; }
.hub-axes-list { display: grid; gap: 0.5rem; }
.hub-axis-row {
  display: grid; grid-template-columns: 90px 1fr 40px;
  gap: 0.7rem; align-items: center; font-size: 0.88rem;
}
.hub-axis-name { color: var(--fg); font-weight: 500; }
.hub-axis-bar {
  height: 10px; background: color-mix(in srgb, var(--t-fg) 6%, transparent);
  border-radius: 5px; position: relative; overflow: hidden;
}
.hub-axis-fill { display: block; height: 100%; border-radius: 5px; }
.hub-axis-val {
  color: var(--t-accent-warm, var(--t-accent-warm));
  font-family: ui-monospace, monospace; font-weight: 700;
  text-align: right;
}

/* ── G_me: Top works rich list with [m01]~ ID ─────────────── */
.works-section-rich { margin-bottom: 2rem; padding: 1.4rem; }
.hub-works-list-rich { display: flex; flex-direction: column; gap: 0.5rem; }
.hub-work-rich {
  /* cover v=258: domain icon 列 → cover thumbnail 列 (40px) に置換 */
  display: grid; grid-template-columns: 40px auto 1fr auto;
  gap: 0.7rem; align-items: center;
  padding: 0.6rem 0.9rem;
  background: var(--t-bg-elev);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.1s ease;
}
.hub-work-rich:hover { transform: translateY(-1px); border-color: var(--t-accent); }
.hub-work-rich:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; }
/* v=89: twin + outlier も同じ click feedback */
.hub-self-twin-card { cursor: pointer; transition: transform 0.1s ease, border-color 0.1s ease; }
.hub-self-twin-card:hover { transform: translateY(-1px); }
.hub-self-twin-card:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; }
.hub-self-outlier-card { cursor: pointer; transition: transform 0.1s ease, border-color 0.1s ease; }
.hub-self-outlier-card:hover { transform: translateY(-1px); border-color: var(--t-accent); }
.hub-self-outlier-card:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; }
.hub-work-id {
  color: var(--t-accent-warm, var(--t-accent-warm));
  font-family: ui-monospace, monospace;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
}

/* ⚠ `.hub-fingerprint-section` / `.hub-fingerprint` (指紋の器) も上と同じ理由で撤去。 */

/* 作品カバーは共有 WorkCover (work-cover.css — カバー統一 2026-08-19)。基本幅は
 * HubCover が付ける .work-cover--s (40px)。ここは面固有の差分だけ:
 *   - flex 行 (twin / outlier card) 内で縮ませない
 *   - twin card は大きめ (48px — 高さは 2:3 が決める) */
.hub-self-twin-card .work-cover, .hub-self-outlier-card .work-cover { flex-shrink: 0; }
.work-cover.hub-cover-lg { width: 48px; border-radius: 6px; }
.hub-work-rich .hub-work-icon { font-size: 1.4rem; }
.hub-work-rich .hub-work-name { font-weight: 500; }
.hub-work-rich .hub-work-domain {
  color: var(--muted); font-size: 0.78rem;
  letter-spacing: 0.05em; font-family: ui-monospace, monospace;
}

/* ── Top works ───────────────────────────────────────────── */
.hub-works-list { display: flex; flex-direction: column; gap: 0.5rem; }
.hub-work-item {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem; border-radius: 8px;
  background: var(--t-bg-elev);
}
.hub-work-icon { font-size: 1.4rem; }
.hub-work-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-work-domain { color: var(--muted); font-size: 0.8rem; }

/* ── Explanation ──────────────────────────────────────────── */
.hub-explanation { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 1.2rem; margin-bottom: 2rem; }
.hub-explanation h3 { margin: 0 0 0.8rem; font-size: 0.95rem; color: var(--muted); }
/* UX H2: メタ軸 bar visualization */
.hub-meta-bars { display: flex; flex-direction: column; gap: 0.7rem; }
.hub-meta-bar { font-size: 0.85rem; }
/* EDAB 分布化 (2026-07-01): メタ軸も ridgeline 式ミラー密度。凡例は末尾に配置 */
.hub-meta-legend { margin-top: 0.6rem; margin-bottom: 0; }
.hub-meta-label { display: flex; justify-content: space-between; margin-bottom: 0.3rem; color: var(--fg); }
.hub-meta-value { color: var(--accent); font-weight: 700; font-family: ui-monospace, monospace; }
/* v=87: bar fill → 二極 spectrum line + ★ (16 type 軸上での 「あなたの位置」) */
.hub-meta-track {
  position: relative; height: 16px;
  display: flex; align-items: center;
}
.hub-meta-spectrum {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 3px; transform: translateY(-50%);
  /* de-AI v=257: 二極の色グラデを廃し中立トラックに (位置=★ marker が意味を担う) */
  background: color-mix(in srgb, var(--t-fg) 16%, transparent);
  border-radius: 3px;
}
.hub-meta-threshold {
  /* left は per-axis 境界 (demand/craft 55% / emo 60%) を JS が inline 指定 (v=129)。 fallback 55% */
  position: absolute; top: 50%; left: 55%;
  width: 2px; height: 12px;
  transform: translate(-50%, -50%);
  background: color-mix(in srgb, var(--t-fg) 35%, transparent);
  z-index: 1;
}
.hub-meta-star {
  /* base スタイルは .dash-pos-star を継承 (dashboard.css)。 z-index 上げて threshold より前へ。 */
  z-index: 3;
  font-size: 17px;
}
/* 6軸の好みマーカーは ● (dashboard.css) に統一したが、EDAB メタ軸は
   16type 軸上の「あなたの位置」= 別語彙なので ★ を維持してマーカーを区別する。
   .dash-pos-star::before と同特異度になるため、track でラップして勝たせる。 */
.hub-meta-track .hub-meta-star::before { content: '\2605'; /* ★ */ }

/* ── Compatible types ──────────────────────────────────────── */
.hub-compat { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.hub-compat-chip {
  background: color-mix(in srgb, var(--t-accent) 15%, transparent); border: 1px solid var(--card-border);
  padding: 0.4rem 0.8rem; border-radius: 999px; font-size: 0.9rem;
}
.hub-compat-chip strong { color: var(--accent); }

/* ── CTAs ─────────────────────────────────────────────────── */
.hub-cta {
  display: flex; gap: 0.7rem; flex-wrap: wrap;
  justify-content: center; margin: 2rem 0;
}
.hub-cta button, .hub-cta a {
  font-size: 1rem; font-weight: 600; padding: 0.8rem 1.4rem;
  border-radius: 10px; cursor: pointer; border: none; text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: inherit;
}
.hub-cta .primary { background: var(--accent); color: var(--t-on-accent); }
.hub-cta .primary:hover { opacity: 0.9; }
.hub-cta .secondary { background: var(--card-bg); border: 1px solid var(--card-border); color: var(--fg); }
.hub-cta .cs-tag {
  display: inline-block; margin-left: 0.4em;
  background: var(--accent); color: var(--t-on-accent);
  font-size: 0.65em; padding: 0.15em 0.5em; border-radius: 999px;
  font-weight: 600; vertical-align: middle;
}

/* ── Friend Profile (Sprint 2 Day 7) ──────────────────────── */
.friend-hero { position: relative; }
/* ⚠ **uppercase を掛けない** — この行は「相手の Tasteome」= user の嗜好の全体像を指す。
   全大文字は brand (TASTEOME) を指す時だけ (用語表 `TERMINOLOGY.md:21-22`)。
   ja 化 (2026-09-12) で「相手の TASTEOME は…」と 1 語だけ brand の姿で浮くのが露わになった。
   eyebrow の質感は `letter-spacing` が担う。 */
.friend-prefix {
  margin: 0 0 0.5rem; font-size: 0.95rem;
  letter-spacing: 0.1em; opacity: 0.85;
}

.friend-match { padding: 1.2rem; }
.friend-match h2 { font-size: 1.05rem; margin: 0 0 1rem; }
.fm-row {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 1rem; align-items: center;
}
.fm-side { text-align: center; }
.fm-label { font-size: 0.7rem; color: var(--muted); letter-spacing: 0.15em; margin-bottom: 0.3rem; }
.fm-code {
  font-size: clamp(1.5rem, 5vw, 2.2rem); font-weight: 900;
  letter-spacing: 0.08em; line-height: 1;
}
.fm-name { font-size: 0.85rem; color: var(--muted); margin-top: 0.2rem; }
.fm-bridge {
  text-align: center; padding: 0 1rem;
}
.fm-pct {
  font-size: clamp(1.8rem, 6vw, 2.6rem); font-weight: 900;
  color: var(--accent); line-height: 1;
}
.fm-pct-label { font-size: 0.75rem; color: var(--muted); letter-spacing: 0.08em; }
.fm-compare-cta { margin-top: 1rem; text-align: center; }
.fm-compare-cta button {
  padding: 0.6rem 1rem; border-radius: 8px;
  background: var(--card-bg); border: 1px solid var(--card-border);
  color: var(--fg); cursor: pointer; font-family: inherit; font-size: 0.9rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.fm-compare-cta button:hover { background: var(--hover-bg); border-color: var(--accent); }

.friend-cta a.primary {
  display: inline-block; background: var(--accent); color: var(--t-on-accent);
  padding: 0.95rem 1.6rem; border-radius: 12px;
  text-decoration: none; font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.friend-cta a.primary:hover { transform: translateY(-1px); }
.friend-cta a.secondary {
  background: var(--card-bg); border: 1px solid var(--card-border);
  color: var(--fg); padding: 0.95rem 1.6rem; border-radius: 12px;
  text-decoration: none; font-weight: 600;
}
.friend-footer { text-align: center; margin: 1.5rem 0 0; padding: 0 1rem; }
.friend-footer a { color: var(--muted); text-decoration: underline; }

/* ── Footer ───────────────────────────────────────────────── */
/* .gf は global-footer.js が inject 後に付与するクラス → global-footer.css が管理 */
.hub-footer:not(.gf) {
  text-align: center; padding: 2rem 1rem 3rem;
  border-top: 1px solid var(--card-border);
  margin-top: 2rem;
}
.hub-footer:not(.gf) p { margin: 0.3rem 0; }
.hub-footer:not(.gf) a { color: var(--muted); }

/* ── Data Persistence (Export / Import) ─────────────────────────── */
.hub-data-section {
  margin-top: 1.5rem;
}
.hub-data-section h2 {
  font-size: 1.05rem;
}
.hub-data-buttons {
  margin-top: 0.6rem;
}
.dp-buttons {
  display: flex; flex-direction: column;
  gap: 0.5rem;
}
.dp-btn {
  background: color-mix(in srgb, var(--t-fg) 8%, transparent);
  border: 1px solid var(--t-border-strong);
  color: var(--t-fg);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-align: left;
}
.dp-btn:hover {
  background: color-mix(in srgb, var(--t-fg) 12%, transparent);
  border-color: var(--t-accent);
}
.dp-btn-export {
  /* de-AI v=257: 135° accent→gold グラデ撤去 → 中立 tint */
  background: color-mix(in srgb, var(--t-fg) 8%, transparent);
}
.dp-hint { margin-top: 0.4rem; }

/* Empty state restore button */
.hub-empty-restore {
  margin-top: 1.5rem;
  text-align: center;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--t-border, rgba(255,255,255,0.08));
}

/* ── Phase 4A: Self knowledge (Twin work + Outliers) ──────────── */
.hub-self-section { margin-top: 1.5rem; }
.hub-self-tag {
  display: inline-block;
  background: color-mix(in srgb, var(--t-accent-warm) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--t-accent-warm) 30%, transparent);
  color: var(--t-accent-warm);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.5rem;
}
.hub-twin-wrap { margin-top: 0.8rem; }
.hub-outlier-wrap { margin-top: 1.2rem; }

.hub-self-twin-card {
  display: flex; align-items: center;
  gap: 0.8rem;
  /* de-AI v=257: 135° accent/gold グラデ撤去 → 中立 surface */
  background: color-mix(in srgb, var(--t-fg) 5%, transparent);
  border: 1px solid var(--t-border);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  margin-bottom: 0.4rem;
}
.hub-self-twin-emoji { font-size: 2.5rem; flex-shrink: 0; }
.hub-self-twin-body { flex: 1; }
.hub-self-twin-name { font-size: 1.1rem; font-weight: 800; }
.hub-self-twin-meta { margin-top: 0.15rem; }
.hub-self-twin-caption { margin-top: 0.4rem; }

.hub-self-outlier-list {
  display: flex; flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.6rem;
}
.hub-self-outlier-card {
  display: flex; align-items: center;
  gap: 0.7rem;
  background: var(--t-bg-elev);
  border: 1px solid var(--t-border);
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
}
.hub-self-outlier-emoji { font-size: 1.4rem; flex-shrink: 0; }
.hub-self-outlier-body { flex: 1; }
.hub-self-outlier-name { font-weight: 700; font-size: 0.95rem; }
.hub-self-outlier-axis {
  display: inline-block;
  font-size: 0.72rem;
  color: var(--t-muted, #8a8fa3);
  background: color-mix(in srgb, var(--t-accent) 8%, transparent);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  margin-top: 0.2rem;
}
.hub-self-outlier-dist {
  flex-shrink: 0;
  font-family: var(--t-font-mono, monospace);
}

/* ── JA primary + EN subtitle ─────────────────────────────────── */
.hub-sub-en {
  display: inline-block;
  margin-left: 0.5em;
  font-size: 0.62em;
  font-weight: 400;
  color: var(--t-muted, #8a8fa3);
  font-family: var(--t-font-mono, monospace);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: middle;
}
.hub-sub-en:empty { display: none; }
.hub-self-tag .hub-sub-en {
  font-size: 0.85em;
  text-transform: none;
  margin-left: 0.4em;
  opacity: 0.7;
}

/* ─── v=59: Domain trends section (5 domain button toggle + content) ─── */
.hub-domain-trends-section {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.hub-dt-buttons {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.4rem;
  margin-bottom: 0.6rem;
}
.hub-dt-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.45rem 0.85rem;
  background: var(--t-bg-elev);
  border: 1px solid var(--t-border-strong);
  color: var(--t-fg);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.hub-dt-link:hover:not(.is-disabled):not(:disabled) {
  background: color-mix(in srgb, var(--t-fg) 10%, transparent);
  border-color: color-mix(in srgb, var(--t-fg) 22%, transparent);
}
.hub-dt-link:active:not(.is-disabled):not(:disabled) { transform: scale(0.97); }
.hub-dt-link.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.hub-dt-icon { font-size: 1.05em; line-height: 1; }
.hub-dt-label { white-space: nowrap; }
.hub-dt-count {
  font-family: var(--t-font-mono, 'JetBrains Mono', monospace);
  font-size: 0.72em;
  padding: 0.06em 0.5em;
  background: color-mix(in srgb, var(--t-fg) 8%, transparent);
  border-radius: 999px;
  color: var(--t-muted);
}
.hub-dt-content {
  margin-top: 0.6rem;
}
/* dash-grid / dash-card 等は domain-trends.js が dashboard.css の class を再利用するため、
   /me/ Hub では dashboard.css の load が必要 — me/index.html で読み込む */

@media (max-width: 640px) {
  .hub-dt-link { font-size: 0.74rem; padding: 0.38rem 0.7rem; }
  .hub-dt-label { font-size: 0.95em; }
}

/* ── v=85: Type info modal (16 type tile click → 簡易説明) ───── */
.type-info-modal-backdrop {
  position: fixed; inset: 0;
  /* v=86: 60% → 78% で透明感を抑えつつ blur で背景の読みやすさを担保 */
  background: color-mix(in srgb, var(--t-bg) 78%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1500;
  padding: 1rem;
  animation: tiFadeIn 0.15s ease;
}
@keyframes tiFadeIn { from { opacity: 0; } to { opacity: 1; } }
.type-info-modal {
  background: var(--t-surface); /* modal 本体は不透明面必須 — --t-bg-elev は dark で rgba 透過 */
  border: 1px solid var(--t-border);
  border-radius: 14px;
  padding: 1.4rem 1.4rem 1.2rem;
  max-width: 460px; width: 100%;
  position: relative;
  box-shadow: var(--t-shadow-lg);
  color: var(--t-fg);
  animation: tiPopIn 0.18s ease;
}
@keyframes tiPopIn { from { transform: translateY(8px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
.ti-close {
  position: absolute; top: 0.6rem; right: 0.7rem;
  /* 🔴 modal を閉じるのは**一次動作** → `--t-tap-min` (batch 2 D-1・旧 28px)。
     ⚠ 字面 (✕) は flex 中央寄せのままなので、大きくなるのは当たり判定と枠だけ。 */
  width: var(--t-tap-min, 44px); height: var(--t-tap-min, 44px);
  background: transparent; border: none;
  color: var(--t-muted);
  font-size: 1.4rem; line-height: 1;
  cursor: pointer; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.ti-close:hover { background: color-mix(in srgb, var(--t-fg) 8%, transparent); color: var(--t-fg); }
.ti-code {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 1.4rem; font-weight: 800; letter-spacing: 0.08em;
  color: var(--t-accent);
  margin-bottom: 0.2rem;
}
.ti-name {
  font-size: 1.15rem; font-weight: 700;
  margin: 0 0 0.6rem; color: var(--t-fg);
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.ti-self-tag {
  font-size: 0.66rem;
  background: var(--t-accent-grad);
  color: var(--t-on-accent);
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-weight: 700; letter-spacing: 0.04em;
}
:where(html, body)[data-theme="light"] .ti-self-tag { color: var(--t-on-accent); }
.ti-essence {
  font-size: 0.92rem; line-height: 1.6;
  color: var(--t-fg-soft);
  margin: 0 0 1rem;
}
.ti-row {
  display: flex; gap: 0.6rem;
  font-size: 0.82rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--t-border);
  align-items: flex-start;
}
.ti-row-key {
  width: 5.5em; flex-shrink: 0;
  color: var(--t-muted); font-weight: 600;
}
.ti-row-val {
  flex: 1; color: var(--t-fg);
}
.ti-row-compat .ti-row-val {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
}
.ti-compat-chip {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 0.72rem; font-weight: 700;
  padding: 0.18rem 0.5rem;
  background: color-mix(in srgb, var(--t-accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--t-accent) 35%, transparent);
  border-radius: 6px;
  color: var(--t-accent);
}

/* ── v=93 (Phase P2.5): 「決定づける軸」 insight section ─────────── */
/* 決定軸: final.html .defax 準拠。card-in-card を廃しフラット縦積み、
   色は 8px スウォッチのみ (左ボーダー/色文字をやめてうるさくしない)。 */
.hub-decisive-section { margin-bottom: 2rem; padding: 1.4rem; }
.hub-decisive-list { display: grid; gap: 0.9rem; }
.hub-decisive-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 0.7rem;
  padding: 0;
  background: none;
  border: 0;
}
.hub-decisive-rank {
  font-family: var(--t-font-display);
  font-size: 0.95rem; font-weight: 800;
  line-height: 1.25;
  color: var(--t-muted);
}
.hub-decisive-body { min-width: 0; }
.hub-decisive-name {
  font-family: var(--t-font-mono);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--t-fg);
}
.hub-decisive-sw {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 2px; margin-right: 7px; vertical-align: middle;
}
.hub-decisive-fig {
  font-family: var(--t-font-mono);
  font-size: 0.7rem; letter-spacing: 0.02em;
  color: var(--t-muted); margin-top: 0.35rem;
}
.hub-decisive-lo { color: var(--t-fg-soft); }
.hub-decisive-diff { color: var(--t-fg); font-weight: 700; margin-left: 0.45rem; }
.hub-decisive-note {
  font-size: 0.8rem; line-height: 1.5;
  color: var(--t-fg-soft); margin-top: 0.4rem;
}

/* =========================================================================
   ⚔ RPG SKIN LAYER  (redesign v=262)
   全ルールを #hub-root[data-skin="rpg"] 配下にスコープ。
   ?skin=card (data-skin="card") では一切適用されず、clean card-stack が残る。
   markup 不変 — コーナーブラケット/ラベルは疑似要素のみで描画。
   出典イディオム: design-lab/me-concepts/m-rpg.html + final.html
     (bracket panel / 無彩 ink 基調 / mono kicker ラベル / stat タイル / sharp 枠)。
   色は --t-* トークンのみ (hex/rgb hardcode なし、light/dark 両対応)。
   ========================================================================= */

/* --- root: HUD の地ならし (tabular figures + 余白) --- */
#hub-root[data-skin="rpg"] {
  font-feature-settings: "tnum" 1, "ss01" 1;
  /* 🔴 **本文幅は上書きしない** (batch 2 D-3・2026-09-07)。`.hub-main` の
     `var(--t-page-max-tool)` = 1100 に従う (値の正は tokens.css の 1 箇所)。
     ⚠ 旧実装は 460px → 640px と数値を直書きしていた (user feedback 2026-07-02) が、
       `ART_DIRECTION §0` で「本文幅は面が決めず内容の型が決める」= /me/ はツール型、と
       裁定されたため型の token へ戻した。実測 1440 では 640 の左右に 250px ずつ空いていた。 */
}

/* --- bracket panel: 渋いコーナーブラケット枠 -------------------------------
   .hub-card 系 + hero/explanation/badges を「枠」として HUD 化。
   ::before/::after を「内側」コーナーティック (top/left・bottom/right) として描画
   — .hub-hero は overflow:hidden のため外側 (-1px) ブラケットがクリップされる。
   内側 6px ティックは crest と同じ語彙で、どの panel でもクリップされない。 */
#hub-root[data-skin="rpg"] .hub-card,
#hub-root[data-skin="rpg"] .hub-hero,
#hub-root[data-skin="rpg"] .hub-hero-meta,
#hub-root[data-skin="rpg"] .hub-explanation {
  position: relative;
  background: var(--t-surface);
  border: 1px solid var(--t-border);
  border-radius: 4px;            /* sharp 寄り (RPG) */
}
#hub-root[data-skin="rpg"] .hub-card::before,
#hub-root[data-skin="rpg"] .hub-card::after,
#hub-root[data-skin="rpg"] .hub-hero::before,
#hub-root[data-skin="rpg"] .hub-hero::after,
#hub-root[data-skin="rpg"] .hub-hero-meta::before,
#hub-root[data-skin="rpg"] .hub-hero-meta::after,
#hub-root[data-skin="rpg"] .hub-explanation::before,
#hub-root[data-skin="rpg"] .hub-explanation::after {
  content: ""; position: absolute; width: 9px; height: 9px;
  pointer-events: none; z-index: 1;
}
#hub-root[data-skin="rpg"] .hub-card::before,
#hub-root[data-skin="rpg"] .hub-hero::before,
#hub-root[data-skin="rpg"] .hub-hero-meta::before,
#hub-root[data-skin="rpg"] .hub-explanation::before {
  top: 6px; left: 6px;
  border-top: 1px solid var(--t-border-strong);
  border-left: 1px solid var(--t-border-strong);
}
#hub-root[data-skin="rpg"] .hub-card::after,
#hub-root[data-skin="rpg"] .hub-hero::after,
#hub-root[data-skin="rpg"] .hub-hero-meta::after,
#hub-root[data-skin="rpg"] .hub-explanation::after {
  bottom: 6px; right: 6px;
  border-bottom: 1px solid var(--t-border-strong);
  border-right: 1px solid var(--t-border-strong);
}

/* --- section heading: section-head 様式 (uppercase + 下罫 + mono sub 右寄せ) --- */
/* 🔴 **見出しは本文より大きい** (D-6 / 2026-09-07)。旧値 `0.82rem` = 13.12px は
   本文 (`.small` の 13.6px) より**小さく**、h2 全 13 件が本文に負けていた = 大きさが
   階層を表していなかった。⚠ 直すのは **size だけ** — uppercase + 下罫 + letter-spacing の
   section-head 様式 (RPG skin の語彙) はそのまま。段の正は下の「型階層」節。 */
#hub-root[data-skin="rpg"] .hub-card > h2,
#hub-root[data-skin="rpg"] .hub-explanation > h3 {
  display: flex; align-items: baseline; gap: 0.6rem;
  font-family: var(--t-font-display);
  font-size: var(--me-fs-xl); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--t-fg);
  margin: 0 0 0.9rem; padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--t-border);
}
#hub-root[data-skin="rpg"] .hub-explanation > h3 { color: var(--t-fg-soft); }
/* hub-sub-en (本来 mono uppercase) を section-head の sub として右へ寄せる */
#hub-root[data-skin="rpg"] .hub-card > h2 .hub-sub-en,
#hub-root[data-skin="rpg"] .hub-explanation > h3 .hub-sub-en {
  margin-left: auto; text-align: right;
}
/* --- HERO: status header (crest 風刻印プレート + bracketed rarity チップ) --- */
#hub-root[data-skin="rpg"] .hub-hero {
  padding: 1.6rem 1.4rem;
}
#hub-root[data-skin="rpg"] .hub-hero-code {
  letter-spacing: 0.12em;
}
#hub-root[data-skin="rpg"] .hub-hero-name {
  font-family: var(--t-font-display); letter-spacing: 0.02em;
}
#hub-root[data-skin="rpg"] .hub-hero-name-jp {
  font-family: var(--t-font-mono); font-size: var(--me-fs-s);
  letter-spacing: 0.06em; color: var(--t-muted);
}
#hub-root[data-skin="rpg"] .hub-rarity-badge {
  font-family: var(--t-font-mono); font-size: var(--me-fs-s);
  letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 3px; border-color: var(--t-border-strong);
}
#hub-root[data-skin="rpg"] .hub-subtype-note {
  font-family: var(--t-font-mono); letter-spacing: 0.04em;
}

/* --- STAT TILES: 1px grid lines + display 数値 + mono ラベル + コーナーティック --- */
#hub-root[data-skin="rpg"] .hub-stats {
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--t-border);                /* 1px グリッド線として透ける地 */
  border: 1px solid var(--t-border);
  border-radius: 4px; overflow: hidden;
}
/* 🔴 5 枚 (BADGES-V2 で 4 枚目「獲得バッジ N/30」が落ちた) — 3 列だと 6 つ目のセルが空になり、
   線の地 (`--t-border`) が塗りの四角として見える。最後の 1 枚に 2 列ぶんを持たせて埋める
   (3n+2 枚目で終わる時だけ = 枚数が戻れば効かない)。 */
#hub-root[data-skin="rpg"] .hub-stat:last-child:nth-child(3n + 2) { grid-column: span 2; }
#hub-root[data-skin="rpg"] .hub-stat {
  background: var(--t-surface);
  border: 0; border-radius: 0;
  position: relative; text-align: left;
  padding: 0.95rem 0.9rem;
}
#hub-root[data-skin="rpg"] .hub-stat-value {
  font-family: var(--t-font-display); font-weight: 800;
  font-size: var(--me-fs-4xl); line-height: 1; color: var(--t-fg);
}
#hub-root[data-skin="rpg"] .hub-stat-label {
  font-family: var(--t-font-mono); font-size: var(--me-fs-2xs);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--t-muted); margin-top: 0.5rem;
}
#hub-root[data-skin="rpg"] .hub-stat::after {
  content: ""; position: absolute; top: 9px; right: 9px;
  width: 6px; height: 6px; pointer-events: none;
  border-top: 1px solid var(--t-border-strong);
  border-right: 1px solid var(--t-border-strong);
}

/* --- compat chip: mono + sharp + 中空枠 --- */
#hub-root[data-skin="rpg"] .hub-compat-chip {
  font-family: var(--t-font-mono); font-size: var(--me-fs-s);
  letter-spacing: 0.04em; border-radius: 3px;
  background: transparent; border: 1px solid var(--t-border-strong);
}

/* --- buttons (hero share / CTA / sticky / data): mono uppercase + sharp ----
   primary=ink 塗り / secondary=surface は base のまま、書体と角だけ HUD 化。 */
#hub-root[data-skin="rpg"] .hub-hero-share,
#hub-root[data-skin="rpg"] .hub-cta button,
#hub-root[data-skin="rpg"] .hub-cta a,
#hub-root[data-skin="rpg"] .dp-btn {
  font-family: var(--t-font-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: var(--me-fs-s); font-weight: 700;
  border-radius: 4px;
}

/* --- 内側リストアイテム: 角を圧縮して panel と統一 (中身は不変) --- */
#hub-root[data-skin="rpg"] .hub-work-rich,
#hub-root[data-skin="rpg"] .hub-self-twin-card,
#hub-root[data-skin="rpg"] .hub-self-outlier-card {
  border-radius: 4px;
}

/* --- self-knowledge / works の小ラベル ID は base の mono accent-warm を踏襲 (不変) --- */

/* --- STATUS HERO (v=263): crest 刻印プレート + コーナーティック (final.html .crest) --- */
#hub-root[data-skin="rpg"] .hub-hero-status {
  padding: 1.2rem 1.3rem; gap: 0.9rem;
}
#hub-root[data-skin="rpg"] .hub-hero-crest {
  position: relative; border-radius: 0;
  background: var(--t-bg-elev-2); border: 1px solid var(--t-border-strong);
}
#hub-root[data-skin="rpg"] .hub-hero-crest::before,
#hub-root[data-skin="rpg"] .hub-hero-crest::after {
  content: ""; position: absolute; width: 9px; height: 9px;
  pointer-events: none; opacity: 0.6;
}
#hub-root[data-skin="rpg"] .hub-hero-crest::before {
  top: 4px; left: 4px;
  border-top: 1px solid var(--t-fg); border-left: 1px solid var(--t-fg);
}
#hub-root[data-skin="rpg"] .hub-hero-crest::after {
  bottom: 4px; right: 4px;
  border-bottom: 1px solid var(--t-fg); border-right: 1px solid var(--t-fg);
}
#hub-root[data-skin="rpg"] .hub-hero-kicker {
  font-family: var(--t-font-mono);
}
#hub-root[data-skin="rpg"] .hub-hero-meta {
  text-align: left;
}

/* --- 装備スロット枠 (v=263): frame コーナーブラケット (final.html .slot .frame) --- */
#hub-root[data-skin="rpg"] .hub-slot-frame { border-radius: 0; }
#hub-root[data-skin="rpg"] .hub-slot-idx { border-radius: 0; }
#hub-root[data-skin="rpg"] .hub-slot-frame::before,
#hub-root[data-skin="rpg"] .hub-slot-frame::after {
  content: ""; position: absolute; width: 8px; height: 8px; z-index: 2;
  pointer-events: none; opacity: 0.65;
}
#hub-root[data-skin="rpg"] .hub-slot-frame::before {
  top: 4px; left: 4px;
  border-top: 1px solid var(--t-fg); border-left: 1px solid var(--t-fg);
}
#hub-root[data-skin="rpg"] .hub-slot-frame::after {
  bottom: 4px; right: 4px;
  border-bottom: 1px solid var(--t-fg); border-right: 1px solid var(--t-fg);
}
#hub-root[data-skin="rpg"] .hub-slot-name { color: var(--t-fg-soft); }

/* 🔴 タップ目標 (2026-08-30 mobile view 精査 batch 2 / G-4) — 実測 40px。
   `/discover/` と `/me/` の空状態で**唯一の探索導線**なので主導線に当たる
   (未サインインの利用者が最初に触る列)。⚠ 両面が同じこの規則を読むので 1 箇所で揃う。
   🔴 2026-09-06 (batch 1 `/discover/` 案 A / C-3): `@media (max-width: 767px)` の中から
   出して**常時 44** にした。一次動作の床は幅で消える性質のものではない (768 以上でも
   同じ列を指で押す) — C-3 の是正の本体は「常時床にする」こと。
   ⚠ この 1 規則を `/me/` (`ui/me/HubEmpty.tsx:101`) と `/discover/`
     (`ui/discover/DiscoverPage.tsx:90`) の 2 面が読む。変えたのは**床だけ**で、
     どちらの面も文言・構造は不変。
   ⚠ batch 跨ぎの共通是正は「先に着手した batch の PR に載せ、後着が取り込む」ので
     batch 1 側 (`/discover/`) で載せた。 */
.hub-empty-domain-list a {
  min-height: var(--t-tap-min, 44px);
  display: inline-flex; align-items: center;
}

/* =========================================================================
   /me/ 案 B: 画面内タブ + 概要の軸カード + 型階層 (D-6)
   ⚠ 全ルールを **`#hub-root` 配下 or `.me-*` class** に閉じる — この file は
     `/profile/` と `/discover/` も `<link>` する共有ファイルで、`#hub-root` は
     `/me/` にしか無い (`ui/me/MePage.tsx` の `<main id="hub-root">`)。
     `.hub-card` / `.small` / `.muted` / `.dash-pos-*` のような**共有 class を素で
     書き換えると 3 面が動く**ので、必ず `#hub-root` を前置する。
   ========================================================================= */

/* ── 型階層 (D-6 / 2026-09-07) ────────────────────────────────────────────
   実測 (390 / `#hub-root` 内の可視要素 / 4 タブ union) で font-size が **29 種**あり、
   しかも **h2 全 16 件が 13.12px で本文 13.6px より小さかった** = 大きさが階層を
   表していなかった。原因は 3 つ:
     ① `#hub-root[data-skin="rpg"] .hub-card > h2` の `0.82rem` が基底 `.hub-card h2`
        (1.1rem) を縮めていた → **見出しを本文の上へ** (上の rpg 節で是正)
     ② `em` の入れ子が非整数を生んでいた (`.small` 0.85em / `.hub-sub-en` 0.62em /
        `.hub-dt-count` 0.72em / `.hub-dt-label` 0.95em / `.hub-stat-suffix` 0.65em
        → 8.1344 / 8.5248 / 11.248 / 15.6px) → **`rem` の段へ倒す**
     ③ 近い値が段になっていなかった (9.6 / 9.92 / 10 / 10.56 …) → **段へ寄せる**

   🔴 段 (rem 定義・root 16px 換算)。この 11 段以外の font-size を `#hub-root` 配下に
      足さない。⚠ `--me-fs-3xs` (9) と `--me-fs-2xs` (10) は **SVG `<text>` の
      `fontSize` (図の軸ラベル = markup 側が持つ 9 / 10) と同値**に取ってある —
      ここをずらすと段が 2 つ増える。

        --me-fs-3xs   0.5625rem =  9px   mono の極小キャップ (decade ラベル / ドメイン)
        --me-fs-2xs   0.625rem  = 10px   mono キャップ (stat ラベル / kicker / 凡例)
        --me-fs-xs    0.6875rem = 11px   小見出し (mono h3) / コンパス凡例
        --me-fs-s     0.78rem   = 12.48px 補助テキスト・チップ・タブ状 control の既定
        --me-fs-m     0.875rem  = 14px   本文 (`.small` / 注記 / 空状態)
        --me-fs-l     0.9375rem = 15px   画面内タブ / button (`.ctl-btn` と同値)
        --me-fs-xl    1rem      = 16px   🔴 section 見出し (h2 / h3) — 本文より上
        --me-fs-2xl   1.125rem  = 18px   card 内の主題 (twin 作品名 / modal 題)
        --me-fs-3xl   1.375rem  = 22px   hero の刻印 / タイプ名
        --me-fs-4xl   1.5rem    = 24px   stat の数値
        --me-fs-5xl   1.75rem   = 28px   (旧 30 種バッジの絵文字 — BADGES-V2 で consumer 0)

   ⚠ `.help` (16px の丸・字面 10px) は `shared/css/components/help.css` が持つ —
     あちらの 10px は `--me-fs-2xs` と同値なので段は増えない。 */
#hub-root {
  --me-fs-3xs: 0.5625rem;
  --me-fs-2xs: 0.625rem;
  --me-fs-xs:  0.6875rem;
  --me-fs-s:   0.78rem;
  --me-fs-m:   0.875rem;
  --me-fs-l:   0.9375rem;
  --me-fs-xl:  1rem;
  --me-fs-2xl: 1.125rem;
  --me-fs-3xl: 1.375rem;
  --me-fs-4xl: 1.5rem;
  --me-fs-5xl: 1.75rem;
}

/* 3xs (9px) — mono の極小キャップ */
#hub-root .hub-mt-dec-lab,
#hub-root .hub-ridge-auxsep,
#hub-root .hub-domtab .pro,
#hub-root .hub-cta .cs-tag { font-size: var(--me-fs-3xs); }

/* 2xs (10px) — mono キャップ / 凡例。
   🔴 `.hub-sub-en` (0.62em) と `.hub-dt-count` (0.72em) は **`em` の入れ子**だった
      (h2 13.12 → 8.1344 / `.hub-dt-link` 11.84 → 8.5248)。`rem` の段へ倒して潰す。 */
/* ⚠ 素の `<small>` (`.hub-mt-val small` 等) も **UA の `font-size: smaller`** で
   親の 0.8333 倍になる = `em` の入れ子と同じ穴 (親 12.48 → 10.4px)。段へ倒す。
   ⚠ `.hub-sub-en` は同じ `<small>` だが class 側 (下) が勝つ — 値は同じ 10px。 */
#hub-root small,
#hub-root .hub-sub-en,
#hub-root .hub-dt-count,
#hub-root .hub-hero-kicker,
#hub-root .hub-slots-hint,
#hub-root .hub-slot-idx,
#hub-root .hub-domtabs-label,
#hub-root .hub-scope-pro,
#hub-root .hub-ridge-legend,
#hub-root .hub-ridge-label,
#hub-root .hub-ridge-auxnote { font-size: var(--me-fs-2xs); }

/* xs (11px) — mono の小見出し / 凡例 */
#hub-root .hub-meta-block h3,
#hub-root .hub-compass-legend,
#hub-root .hub-decisive-fig,
#hub-root .dash-pos-legend,
#hub-root .ti-self-tag { font-size: var(--me-fs-xs); }

/* s (12.48px) — 補助テキスト・チップ・タブ状 control の既定。
   🔴 `.hub-dt-label` (0.95em) も `em` の入れ子 (11.248px)。 */
#hub-root .hub-dt-link,
#hub-root .hub-dt-label,
#hub-root .hub-self-tag,
#hub-root .hub-self-outlier-axis,
#hub-root .hub-mt-val,
#hub-root .hub-mt-label,
#hub-root .hub-mt-note,
#hub-root .hub-mt-ctry,
#hub-root .hub-mt-creator,
#hub-root .hub-types-legend,
#hub-root .hub-type-tile,
#hub-root .hub-domtab,
#hub-root .hub-scope-sel,
#hub-root .hub-scope-upsell a,
#hub-root .hub-scope-upsell p,
#hub-root .hub-slot-name,
#hub-root .hub-tier-hint-cta,
#hub-root .hub-decisive-name,
#hub-root .hub-decisive-note,
#hub-root .hub-compass-readout,
#hub-root .hub-compat-chip,
#hub-root .hub-work-id,
#hub-root .hub-work-domain,
#hub-root .dash-pos-val,
#hub-root .ti-row,
#hub-root .ti-compat-chip,
#hub-root .me-live-hint-links a { font-size: var(--me-fs-s); }

/* m (14px) — 本文。🔴 `.small` (0.85em) が `em` の入れ子の親玉。 */
#hub-root .small,
#hub-root .hub-subtype-note,
#hub-root .hub-meta-bar,
#hub-root .hub-scope-thin,
#hub-root .hub-tier-hint-body b,
#hub-root .hub-axis-row,
#hub-root .ti-essence { font-size: var(--me-fs-m); }

/* l (15px) — 画面内タブ / button。 */
#hub-root .ctl-btn,
#hub-root .hub-self-outlier-name,
#hub-root .hub-explanation h3,
#hub-root .me-tab { font-size: var(--me-fs-l); }

/* xl (16px) — 🔴 section 見出し。**本文 (14px) より上**。
   ⚠ rpg skin (既定) は上の `#hub-root[data-skin="rpg"] .hub-card > h2` が同じ段を持つ。
     ここは `?skin=card` 側と、`.hub-card` 外の見出しのため。 */
#hub-root .hub-card h2,
#hub-root .hub-data-section h2,
#hub-root .hub-hero-strength { font-size: var(--me-fs-xl); }

/* 2xl 〜 5xl — card 内の主題 / hero / 数値 / 絵文字 */
#hub-root .hub-self-twin-name,
#hub-root .ti-name { font-size: var(--me-fs-2xl); }
#hub-root .hub-hero-crest,
#hub-root .hub-hero-status .hub-hero-name,
#hub-root .ti-code,
#hub-root .ti-close { font-size: var(--me-fs-3xl); }
#hub-root .hub-stat-value { font-size: var(--me-fs-4xl); }

/* ── 画面内タブ (概要 / 軸 / 作品 / バッジ) ────────────────────────────────
   🔴 見た目は `/profile/` の `.pp-tabs` / `.pp-tab`
      (`apps/web/src/pages/profile/profile.css:94-133`) と**同じ視覚言語**にする —
      選択印 = 幅 56px / 高さ 2px の中央下線 (`shared/css/components/feed.css:71-74` の
      `.feed-tab.is-active::after` と同値)、状態は `aria-selected` で引く
      (`is-active` class を別に持たない = ARIA と見た目の二重管理を作らない)。
   ⚠ **`.pp-*` の規則を再利用せずコピーになるのは承知の上** — 共通 class 化は hub 預かり。
   ⚠ **sticky にしない** (`.pp-tabs` との唯一の意図的な差)。`.pp-tabs` は
     `top: var(--pp-tabs-top)` に header の実高を焼いて `.site-header-bar` (z-index 1000)
     との帯の奪い合いを避けているが、その値を書く ResizeObserver は
     `ui/profile/ProfilePage.tsx` にあり、`/me/` の markup は本 unit では触らない。
     `top: 0` の sticky を根拠なく足すと **header に必ず負けて隠れる**ので、
     まず非 sticky で置く。
   ⚠ 帯は **本文の上・頭の下** — DOM 順 (`MePage.tsx`: hero → hero-meta → タブ → panel)
     がそのまま並びになる。上の margin は `.hub-hero-meta` の `margin-bottom: 2rem` が持つ。 */
.me-tabs {
  display: flex; gap: 0.2rem;
  border-bottom: 1px solid var(--t-border);
  margin: 0 0 1rem;
}
.me-tab {
  flex: 1; min-width: 0; appearance: none; cursor: pointer;
  position: relative;   /* 選択印 (::after) の containing block */
  background: transparent; color: var(--t-muted);
  border: none;
  /* 🔴 **一次動作の床** — `min-height` は viewport 非依存に置く (床は幅で消えない)。 */
  min-height: var(--t-tap-min, 44px);
  /* ⚠ `display` は既定のまま — `inline-flex` にすると下の `text-overflow: ellipsis` が
     匿名 flex item に効かなくなる (`.pp-tab` と同じ理由)。 */
  font: inherit; font-size: var(--me-fs-l); font-weight: 600;
  padding: 0.65rem 0.3rem; margin-bottom: -1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.me-tab:hover { color: var(--t-fg); }
.me-tab[aria-selected="true"] { color: var(--t-fg); font-weight: 700; }
/* ⚠ `bottom` は `-1px` ではなく **`0`** — `.me-tab` は ellipsis のために
   `overflow: hidden` を持つので、はみ出す位置に置くと印ごと切り取られる。
   `margin-bottom: -1px` が tab の下端を `.me-tabs` の罫線に重ねているので、
   見え方 (罫線を覆う 2px の帯) は `.pp-tab` / `.feed-tab` と同値になる。 */
.me-tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 56px; height: 2px; border-radius: 2px; background: var(--t-accent);
}
.me-tab:focus-visible { outline: 2px solid var(--t-accent); outline-offset: -3px; }
/* ⚠ 非選択 panel は空 + hidden で DOM に残す (`aria-controls` の参照先を消さないため) —
   `display: none` を明示して取り違えを防ぐ (`.pp-panel[hidden]` / `.sr-panel[hidden]` と同形)。 */
.me-panel[hidden] { display: none; }
.me-panel:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; border-radius: 12px; }

/* ── 概要タブの先頭 = 「この結果は更新される」案内 (unit 6 案 A) ───────────────
   🔴 器の様式は兄弟の `.hub-tier-hint` と**同値** (accent 7% 地 + accent 30% 縁・12px 角・
      `margin-bottom: 2rem`) — 同じ「案内」の役割なので別の見た目を作らない
      (`docs/design/ART_DIRECTION.md §4b`)。⚠ あちらは全体が 1 本の `<a>`、こちらは本文 +
      導線 3 本なので、flex ではなく通常フローの箱にする。 */
.me-live-hint {
  margin-bottom: 2rem; padding: 0.9rem 1.05rem;
  background: color-mix(in srgb, var(--t-accent) 7%, var(--t-surface));
  border: 1px solid color-mix(in srgb, var(--t-accent) 30%, var(--t-border));
  border-radius: 12px;
}
.me-live-hint-text { margin: 0; line-height: 1.6; color: var(--t-fg); }
.me-live-hint-text b { font-weight: 700; }
/* 導線 3 本。⚠ 送りの機構は `components/chip-scroll.css` が持つ (`display: flex` /
   `nowrap` / `min-width: 0` / 影) ので、ここでは**重ねて宣言しない** — 間隔と地色だけ。
   🔴 `--chip-scroll-bg` を**必ず上書きする** — utility は既定を宣言しない契約で、
      素だと `--t-bg` (ページ地色) の影が accent 7% の箱の上に出て端に違う色の帯が出る。 */
.me-live-hint-links {
  gap: 0.5rem; margin-top: 0.6rem;
  --chip-scroll-bg: color-mix(in srgb, var(--t-accent) 7%, var(--t-surface));
}
.me-live-hint-links a {
  display: inline-flex; align-items: center; min-height: var(--t-tap-min);
  padding: 0 0.7rem; border-radius: 8px;
  background: var(--t-surface);
  border: 1px solid color-mix(in srgb, var(--t-accent) 26%, var(--t-border));
  font-family: var(--t-font-mono); font-weight: 700;
  color: var(--t-fg); text-decoration: none; white-space: nowrap;
}
.me-live-hint-links a:hover { border-color: var(--t-accent); background: var(--t-surface-hover); }
/* 「9 軸をすべて見る」= 概要から `軸` タブへ渡す 1 行 (裁定 (c) 2026-09-19 — 撤去した
   「あなたの軸」が持っていた導線の代替)。⚠ button の tap 床は `.ctl-btn` の
   `min-height: var(--t-tap-min)` (44) が既に持つので、ここは間隔だけ。
   ⚠ `.ctl-btn--plain` は `padding-inline: 0.6rem` を持つので、行頭を区画の左端に
     揃えるぶんだけ負のマージンで戻す。
   ⚠ **上の負マージンは直前の `.hub-meta-section` (`margin-bottom: 2rem`) と collapse する
     前提**で置いている (2rem + (-1.5rem) = 0.5rem = メタ嗜好の箱の直下に付く)。
     区画の順を変えるなら実測し直すこと (実測値は PR の検証節)。 */
.me-axes-more { margin: -1.5rem 0 2rem -0.6rem; }