/* Nodd のページだけで使う追加分。色と余白は /assets/css/style.css のトークンに揃える */

/* 電話幅ではヘッダーをマニュアルとドキュメントだけにする。残りはフッターにある */
@media (max-width: 520px) {
  .site-nav .nav-wide { display: none; }
}

.footer-grid.footer-nodd { grid-template-columns: 1.4fr 1fr 1fr; }

/* ドキュメント内の移動 */
.doc-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; padding: 0; list-style: none; }
.doc-nav a {
  display: inline-flex;
  text-decoration: none;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.doc-nav a:hover { border-color: var(--ink); background: var(--g-50); text-decoration: none; }
.doc-nav a:active { transform: scale(.98); }
.doc-nav a[aria-current="page"] { border-color: var(--ink); background: var(--ink); color: #fff; }

/* 目次 */
.toc { margin: 24px 0 32px; padding: 16px 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--g-50); }
.toc ol { margin: 0; padding-left: 24px; }
.toc li { margin: 4px 0; font-size: 14px; line-height: 24px; }
.toc a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* 本文中のリンク */
main p a, main li a, main td a, main dd a, .note a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* コード */
pre {
  max-width: 100%;
  margin: 16px 0;
  padding: 12px 16px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--g-50);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 20px;
  -webkit-overflow-scrolling: touch;
}
pre code { padding: 0; border: 0; border-radius: 0; background: none; font-size: inherit; }
code { overflow-wrap: anywhere; }
h2 code, h3 code { font-size: inherit; }

/* 見本の画面 */
.sample-note { margin-top: -16px; font-size: 12px; line-height: 16px; color: var(--g-600); }

/* エラーコードの見出しをリンク先にする */
.err-code { margin-top: 40px; }
.err-meta { margin: 0 0 8px; font-size: 14px; line-height: 24px; color: var(--g-600); }

@media (max-width: 720px) {
  .footer-grid.footer-nodd { grid-template-columns: 1fr; }
}

/* 電話幅では表を縦に積む */
@media (max-width: 600px) {
  .req-table, .req-table tbody, .req-table tr { display: block; width: 100%; }
  .req-table tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
  .req-table tr:first-child { border-top: 1px solid var(--line); }
  .req-table th, .req-table td,
  .req-table tr:first-child th, .req-table tr:first-child td { display: block; width: auto; padding: 4px 0; border: 0; }
}

/* タグライン（本文の幅に収める） */
.tagline-wrap { margin: 64px 0; }
.tagline-wrap .tagline { margin: 0; }

/* 応用例の図。サイトは明るい配色だけなので、図の枠だけ OS の配色に合わせる */
.flow {
  --flow-bg: var(--g-50);
  --flow-box: var(--paper);
  --flow-rule: var(--g-400);
  --flow-text: var(--ink);
  --flow-muted: var(--g-600);
  --flow-accent-c: #0a6c98;
  --flow-ok-c: #2f6b4f;
  --flow-stop-c: #b3322b;
  margin: 24px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--flow-bg);
}
.flow svg { display: block; width: 100%; height: auto; font-family: var(--sans); }
.flow .flow-wide { display: none; }
.flow .flow-tall { max-width: 420px; margin: 0 auto; }
.flow-box { fill: var(--flow-box); stroke: var(--flow-rule); stroke-width: 1; }
.flow-box-main { stroke: var(--flow-accent-c); stroke-width: 1.5; }
.flow-line { fill: none; stroke: var(--flow-muted); stroke-width: 1.5; }
.flow-head { fill: var(--flow-muted); }
.flow-kicker { fill: var(--flow-muted); font-size: 12px; }
.flow-end { text-anchor: end; }
.flow-title { fill: var(--flow-text); font-size: 14px; font-weight: 700; }
.flow-sub { fill: var(--flow-muted); font-size: 12px; }
.flow-ok { fill: var(--flow-ok-c); font-size: 12px; font-weight: 600; }
.flow-stop { fill: var(--flow-stop-c); font-size: 12px; font-weight: 600; }
.flow-accent { fill: var(--flow-accent-c); font-size: 12px; font-weight: 600; }
@media (min-width: 760px) {
  .flow .flow-wide { display: block; }
  .flow .flow-tall { display: none; }
}
@media (prefers-color-scheme: dark) {
  .flow {
    --flow-bg: #15242b;
    --flow-box: #123646;
    --flow-rule: #53646d;
    --flow-text: #ffffff;
    --flow-muted: #c5d2d8;
    --flow-accent-c: #7cc7e8;
    --flow-ok-c: #8fd6b4;
    --flow-stop-c: #f4a9a3;
    border-color: #53646d;
  }
}
.plan-fit { padding: 8px 12px; border-left: 2px solid var(--ink); background: var(--g-50); font-size: 14px; line-height: 24px; }

/* App Store のボタンの横に置く、控えめなリンク */
.cta .text-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ガイド */
.guide-cta { margin: 48px 0 32px; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--g-50); }
.guide-cta p { margin: 0; }
.guide-cta .cta { margin: 16px 0 0; }
.guide-list { list-style: none; padding: 0; margin: 24px 0 40px; }
.guide-list li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.guide-list a { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.guide-desc { font-size: 14px; line-height: 22px; color: var(--g-600); }
.table-wrap { overflow-x: auto; margin: 16px 0 24px; }
.compare { min-width: 560px; }
.compare thead th { background: var(--g-100); font-size: 14px; }
/* 比較表は電話幅でも表のまま。横にスクロールする */
@media (max-width: 640px) {
  .table-wrap .compare { display: table; }
  .table-wrap .compare thead { display: table-header-group; }
  .table-wrap .compare tbody { display: table-row-group; }
  .table-wrap table.compare tr { display: table-row; padding: 0; border: 0; }
  .table-wrap table.compare tr th, .table-wrap table.compare tr td { display: table-cell; padding: 8px 12px; border-bottom: 1px solid var(--line); }
}