/* ============================================================
   ローカル LLM 量子化 入門ガイド — サイト固有スタイル
   stellararc.css + doc.css の後に読み込む。ロールトークンのみ使用。
   ============================================================ */

/* 本文カラムは読みやすい幅に絞る（doc.css の container-lg を上書き） */
.tb-main-narrow {
  max-width: calc(var(--sa-container-md) + 2 * var(--sa-space-6));
}

/* インラインコード内の URL / パスの横溢れ対策 */
:not(pre) > code { overflow-wrap: anywhere; }

/* --- 表紙（index のヒーロー帯）。両テーマとも濃紺の帯なので
       中の文字・ロゴは text-inverse / 白ロゴ固定でよい --- */
.tb-cover {
  background: var(--sa-gradient-deep);
  padding: var(--sa-space-20) 0 var(--sa-space-16);
}
.tb-cover-inner {
  max-width: var(--sa-container-lg);
  margin-inline: auto;
  padding-inline: var(--sa-space-6);
}
.tb-cover h1 {
  color: var(--sa-color-text-inverse);
  font-size: clamp(var(--sa-font-size-3xl), 5vw, var(--sa-font-size-5xl));
  margin: var(--sa-space-4) 0 var(--sa-space-4);
  letter-spacing: var(--sa-font-letterSpacing-tight);
}
.tb-cover .tb-cover-lead {
  color: var(--sa-color-text-inverse);
  opacity: 0.85;
  font-size: var(--sa-font-size-lg);
  max-width: var(--sa-container-md);
}
.tb-cover .tb-cover-badges { display: flex; flex-wrap: wrap; gap: var(--sa-space-2); margin: var(--sa-space-6) 0 0; }
/* token-lint-allow: 濃紺帯の上の半透明チップ。両テーマで地が変わらない面なので白固定でよい */
.tb-cover .sa-badge {
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF; /* token-lint-allow: 同上 */
}
.tb-cover .tb-cover-cta { margin-top: var(--sa-space-8); }

/* --- 目次カード --- */
.tb-part-title {
  margin-top: var(--sa-space-12);
  font-size: var(--sa-font-size-xl);
  color: var(--sa-color-text-brand);
}
.tb-toc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  gap: var(--sa-space-4);
  margin: var(--sa-space-5) 0 0;
}
a.tb-toc-card {
  display: flex;
  flex-direction: column;
  gap: var(--sa-space-2);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
a.tb-toc-card:hover { border-color: var(--sa-color-border-brand); box-shadow: var(--sa-shadow-md); }
.tb-toc-num {
  font-size: var(--sa-font-size-xs);
  font-weight: var(--sa-font-weight-bold);
  letter-spacing: var(--sa-font-letterSpacing-wide);
  color: var(--sa-color-text-brand);
}
.tb-toc-title { font-size: var(--sa-font-size-lg); font-weight: var(--sa-font-weight-bold); line-height: var(--sa-font-lineHeight-snug); }
.tb-toc-desc { font-size: var(--sa-font-size-sm); color: var(--sa-color-text-muted); flex: 1; }
.tb-toc-meta { font-size: var(--sa-font-size-xs); color: var(--sa-color-text-subtle); }

/* --- 章ページ --- */
.tb-chapter-hero .sa-badge { margin-bottom: var(--sa-space-2); }

/* 章内目次（ビルドが自動生成） */
.tb-chapter-toc {
  border: 1px solid var(--sa-color-border-default);
  border-radius: var(--sa-radius-md);
  background: var(--sa-color-bg-subtle);
  padding: var(--sa-space-4) var(--sa-space-6);
  margin: 0 0 var(--sa-space-10);
  font-size: var(--sa-font-size-sm);
}
.tb-chapter-toc ul { margin: var(--sa-space-2) 0 0; padding-left: 1.2em; }
.tb-chapter-toc .tb-chapter-toc-label {
  font-weight: var(--sa-font-weight-bold);
  color: var(--sa-color-text-subtle);
  letter-spacing: var(--sa-font-letterSpacing-wide);
  font-size: var(--sa-font-size-xs);
}

/* --- 図解（inline SVG）---
   全図の viewBox 幅を 720 に統一しているので、線幅と文字サイズが図をまたいで揃う。
   狭幅では figure だけを横スクロールさせる（縮小に任せると文字が読めなくなるため、
   min-width で下限を持たせる）。スクロールコンテナは figure そのものである必要がある。 */
figure.tb-fig {
  margin: var(--sa-space-8) 0;
  /* 本文カラム幅で頭打ちにする。目次ページの広いカラム（container-lg）でそのまま
     伸びると viewBox 720 が 1.6 倍に拡大され、図の文字だけ本文より大きくなる */
  max-width: min(100%, var(--sa-container-md));
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
figure.tb-fig svg {
  display: block;
  width: 100%;
  min-width: 600px;
  height: auto;
  /* 図の面はカード面と同じ地に置く。box の塗りは SVG 側でトークン指定する */
  color: var(--sa-color-text-default);
}
figure.tb-fig figcaption {
  margin-top: var(--sa-space-3);
  font-size: var(--sa-font-size-sm);
  color: var(--sa-color-text-muted);
  min-width: 600px;
}
/* 図中の等幅ラベル（API 名・コマンド）用 */
figure.tb-fig svg text.tb-mono { font-family: var(--sa-font-family-mono); }

/* --- ハンズオンボックス --- */
.sa-handson {
  border: 1px solid var(--sa-color-border-default);
  border-left: 4px solid var(--sa-color-border-brand);
  border-radius: var(--sa-radius-md);
  background: var(--sa-color-bg-surface);
  box-shadow: var(--sa-shadow-sm);
  padding: var(--sa-space-5) var(--sa-space-6);
  margin: var(--sa-space-8) 0;
}
.sa-handson-title {
  font-size: var(--sa-font-size-lg);
  font-weight: var(--sa-font-weight-bold);
  color: var(--sa-color-text-brand);
  margin-bottom: var(--sa-space-3);
}
.sa-handson > :last-child { margin-bottom: 0; }

/* --- 理解度チェック --- */
details.tb-quiz {
  border: 1px solid var(--sa-color-border-default);
  border-radius: var(--sa-radius-md);
  background: var(--sa-color-bg-subtle);
  margin: var(--sa-space-3) 0;
}
details.tb-quiz summary {
  cursor: pointer;
  padding: var(--sa-space-3) var(--sa-space-5);
  font-weight: var(--sa-font-weight-medium);
}
details.tb-quiz summary:hover { color: var(--sa-color-text-brand); }
details.tb-quiz[open] summary { border-bottom: 1px solid var(--sa-color-border-default); }
details.tb-quiz .tb-quiz-a { padding: var(--sa-space-3) var(--sa-space-5) var(--sa-space-4); }
details.tb-quiz .tb-quiz-a > :last-child { margin-bottom: 0; }

/* --- 前後章ナビ --- */
.tb-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sa-space-4);
  margin-top: var(--sa-space-16);
}
.tb-nav a {
  display: block;
  border: 1px solid var(--sa-color-border-default);
  border-radius: var(--sa-radius-md);
  background: var(--sa-color-bg-surface);
  padding: var(--sa-space-4) var(--sa-space-5);
  text-decoration: none;
  min-height: 100%;
}
.tb-nav a:hover { border-color: var(--sa-color-border-brand); }
.tb-nav .tb-nav-label {
  display: block;
  font-size: var(--sa-font-size-xs);
  color: var(--sa-color-text-subtle);
  margin-bottom: var(--sa-space-1);
}
.tb-nav .tb-nav-title { color: var(--sa-color-text-link); font-weight: var(--sa-font-weight-medium); }
.tb-nav .tb-nav-next { text-align: right; }
.tb-nav .tb-nav-spacer { border: none; background: none; }

@media (max-width: 40rem) {
  .tb-nav { grid-template-columns: minmax(0, 1fr); }
  .tb-nav .tb-nav-spacer { display: none; }
}

@media print {
  .tb-nav, .tb-chapter-toc { display: none; }
  .tb-cover { background: none; }
  .tb-cover h1, .tb-cover .tb-cover-lead { color: var(--sa-color-text-default); }
}

/* --- 数式（平文）--- */
p.tb-formula {
  font-family: var(--sa-font-family-mono);
  font-size: var(--sa-font-size-sm);
  background: var(--sa-color-bg-code);
  /* bg-code は両テーマとも暗い面。text-code と必ず対で使う（pre と同じ扱い） */
  color: var(--sa-color-text-code);
  border: 1px solid var(--sa-color-border-default);
  border-radius: var(--sa-radius-sm);
  padding: var(--sa-space-3) var(--sa-space-4);
  margin: var(--sa-space-4) 0;
  overflow-x: auto;
}