/* ============================================================
   StellarArc Document Template
   dist/css/stellararc.css と併用するドキュメントレイアウト。
   <link rel="stylesheet" href="../../dist/css/stellararc.css">
   <link rel="stylesheet" href="doc.css">
   ============================================================ */

.sa-doc-header {
  border-bottom: 1px solid var(--sa-color-border-default);
  background: var(--sa-color-bg-default);
}
.sa-doc-header .sa-doc-header-inner {
  max-width: var(--sa-container-lg);
  margin-inline: auto;
  padding: var(--sa-space-4) var(--sa-space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sa-space-4);
}
.sa-doc-header img.sa-doc-logo {
  height: 28px;
  display: block;
}
.sa-doc-header .sa-doc-meta {
  font-size: var(--sa-font-size-sm);
  color: var(--sa-color-text-subtle);
}

.sa-doc-hero {
  background: var(--sa-color-bg-subtle);
  border-bottom: 1px solid var(--sa-color-border-default);
  padding: var(--sa-space-16) 0 var(--sa-space-12);
}
.sa-doc-hero .sa-doc-hero-inner {
  max-width: var(--sa-container-lg);
  margin-inline: auto;
  padding-inline: var(--sa-space-6);
}
.sa-doc-hero h1 {
  font-size: var(--sa-font-size-4xl);
  margin: var(--sa-space-3) 0 var(--sa-space-3);
}
.sa-doc-hero .sa-doc-lead {
  font-size: var(--sa-font-size-lg);
  color: var(--sa-color-text-muted);
  max-width: var(--sa-container-md);
}

.sa-doc-main {
  max-width: var(--sa-container-lg);
  margin-inline: auto;
  padding: var(--sa-space-12) var(--sa-space-6) var(--sa-space-20);
}
.sa-doc-main > h2 {
  padding-left: var(--sa-space-4);
  border-left: 4px solid var(--sa-color-primary-600);
}

/* 目次サイドバー + 本文の 2 カラム。長いドキュメントで使う。
   トラックを minmax(0, …) にしているのが要点で、項目の既定 min-width:auto が
   コンテンツ由来の最小サイズに解決してページごと横スクロールするのを防ぐ。
   項目側に min-width:0 を配る方法もあるが、同じトラックの項目 1 つでも
   付け忘れるとトラックが膨らんで再発するため、トラック側で守る。
   広い表・図はさらに .sa-scroll-x で包むこと（トラック防御だけでは
   縮まない中身がトラックの外へはみ出しうる）。 */
.sa-doc-layout {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--sa-space-12);
  align-items: start;
  max-width: var(--sa-container-lg);
  margin-inline: auto;
  padding: var(--sa-space-12) var(--sa-space-6) var(--sa-space-20);
}
/* 60rem: このテンプレート唯一のレスポンシブ境界。
   media query の条件部は CSS カスタムプロパティを解決できないため、
   トークン化せず意図的にハードコードしている。 */
@media (max-width: 60rem) {
  .sa-doc-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sa-space-8);
  }
}

.sa-doc-footer {
  border-top: 1px solid var(--sa-color-border-default);
  background: var(--sa-color-bg-subtle);
}
.sa-doc-footer .sa-doc-footer-inner {
  max-width: var(--sa-container-lg);
  margin-inline: auto;
  padding: var(--sa-space-8) var(--sa-space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sa-space-4);
  font-size: var(--sa-font-size-sm);
  color: var(--sa-color-text-subtle);
}
.sa-doc-footer img { height: 20px; opacity: 0.75; }

@media print {
  .sa-doc-hero { background: none; }
  .sa-doc-main { padding-top: var(--sa-space-6); }
  a { text-decoration: none; color: inherit; }
}