/*
 * 空港の情報（/airports/ と /airports/<icao>/）だけで読む追加の CSS。土台は /assets/css/site.css（部品は /_design/）。
 * ページは tools/site/airports/build.py が生成する（HTML を直接直さない）。
 * 色は site.css の変数だけを使う（暗い表示もそのまま効く）。緑 --ack と琥珀 --dawn は使わない。
 * IFR と VFR は同じ形・同じ重さ（運航票の札。IFR は実線、VFR は破線）。
 * 変えたら、build.py の CSS の版（?v=…）を変えて生成し直す（/assets/* は 1 年キャッシュする）。
 * 要点の IFR・VFR の札は、運航票（.strip）の見た目を借りた「空港の札」。/_design/ の .strip は 1 つの飛行計画とその状態を示す部品だが、
 * 空港の札は状態の行（.strip-state）を持たず、便や受理の状態を表さない（札の中は .ap-cells の値の一覧だけ）。
 */

/* ───────── ページの頭: 地点略号と名前、版の行 ───────── */
.ap-h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 18px; margin-top: clamp(24px, 3.5vw, 44px); }
.page-head h1.ap-h1 { line-height: 1.25; }
.ap-h1 .ap-icao { font-family: var(--font-data); font-size: clamp(40px, 2.2vw + 30px, 60px); line-height: 1.1; letter-spacing: .06em; }
.ap-h1 .ap-name { font-size: clamp(24px, 1vw + 19px, 34px); line-height: 1.4; }
.ap-sub { display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 10px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
.ap-sub .data { color: var(--ink); }
.ap-edition { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--rule-2); max-width: 980px; font-size: 14px; line-height: 1.6; }
.ap-edition > div { display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; }
.ap-edition dt { font-size: 12.5px; color: var(--ink-3); }
.ap-edition dd { font-weight: 700; color: var(--ink); }
.page-head .note { margin-top: 16px; max-width: 62em; }
.ap-head-note p + p, .ap-up p + p { margin-top: 6px; }
.ap-howto { margin-top: 14px; max-width: 62em; }

/* ───────── 要点: 共通の 4 つと、IFR・VFR の札 ───────── */
.ap-brief { padding: clamp(24px, 3vw, 36px) 0 8px; }
.ap-common { margin-top: 0; max-width: none; }
.ap-common dd .data { font-weight: 700; }
.ap-common dd .data.ap-wrap { display: block; font-size: 15px; line-height: 1.6; }   /* 運用時間の 1 行目（長い記載） */
.ap-common dd small { display: block; font-weight: 400; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.ap-common dd .ap-fq { display: block; }
/* 運用時間の 1 行目が長い飛行場は、2 列の組み（900px 未満）で運用時間と周波数を 1 行に 1 つにする（半分の幅では 5 行に折れていた） */
@media (max-width: 899px) { .ap-common--long > div:nth-child(n+3) { grid-column: 1 / -1; } }
.ap-ja { font-family: var(--font-ja); letter-spacing: 0; }
.ap-cards { display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 1100px) { .ap-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; } }
.ap-cards .strip { grid-template-rows: auto; }
.ap-cells { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.ap-cells > div { padding: 12px 16px 14px; border-bottom: 1px solid var(--rule); min-width: 0; }
.ap-cells > div:last-child { border-bottom: 0; }
.ap-cells dt { font-size: 12.5px; line-height: 1.5; color: var(--ink-3); letter-spacing: .04em; }
.ap-cells dd { margin-top: 2px; font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.ap-cells dd b { display: block; font-family: var(--font-data); font-size: 17px; font-weight: 700; letter-spacing: .03em; color: var(--ink); overflow-wrap: anywhere; }
.ap-cells dd b .ap-sep { color: var(--ink-3); font-weight: 400; }
/* 並びの値（build.py の seq）。値ごとに折り返し、区切りは前の値の後ろに残す（行の頭に「·」を出さない） */
.ap-cells dd b .ap-item { display: inline-block; max-width: 100%; }
/* 日出・日没の小さな表（初日と末日を列に） */
.ap-suntab { margin: 2px 0 6px; }
.ap-suntab th, .ap-suntab td { padding: 1px 20px 1px 0; text-align: left; vertical-align: baseline; }
.ap-suntab tr > :last-child { padding-right: 0; }
.ap-suntab thead th { font-family: var(--font-data); font-size: 12.5px; font-weight: 400; letter-spacing: .04em; color: var(--ink-3); }
.ap-suntab tbody th { font-size: 14px; font-weight: 700; color: var(--ink-2); padding-right: 16px; }
.ap-suntab tbody td { font-family: var(--font-data); font-size: 17px; font-weight: 700; letter-spacing: .03em; color: var(--ink); white-space: nowrap; }
.ap-cells .ap-more { display: inline-block; margin-top: 4px; font-size: 13.5px; }
.ap-cells .ap-note { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.6; color: var(--ink-3); }
.ap-cells dd b + b { margin-top: 2px; }

/* ───────── 本文（目次つき） ───────── */
.ap-sec .sec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 20px; }
.ap-sec .sec-head .kicker { flex-basis: 100%; margin-bottom: 0; }
.ap-sec h2.sub-head { font-size: clamp(21px, .8vw + 17px, 26px); margin: 0; }
.ap-sec h3.sub-head { font-size: 18px; margin: 0 0 12px; }
.ap-ref { font-family: var(--font-data); font-size: 13px; color: var(--ink-3); letter-spacing: .04em; white-space: nowrap; }
.ap-block + .ap-block { margin-top: 40px; }
.ap-src { margin-top: 10px; }
.ap-none { color: var(--ink-2); }
.ap-sec .spec { margin-top: 0; }
.ap-sec .spec dd .data { color: var(--ink); }
.ap-sec .spec small { display: block; font-size: 13px; color: var(--ink-3); }
/* SID・STAR の図の題。9 件以上は広い画面で 2 列 */
.ap-titles { list-style: none; }
.ap-titles li { break-inside: avoid; padding-left: 1em; text-indent: -1em; }   /* 折り返した行を下げ、次の題と区別する */
@media (min-width: 900px) { .ap-titles--many { columns: 2; column-gap: 32px; } }

/*
 * 値の表。幅 760px 未満は行ごとの札にする（td の data-label を見出しの代わりに出す。td の中身は build.py が 1 つの <div> で包む）。
 * 折り返しは空白でだけ（overflow-wrap: break-word。anywhere はセルの最小幅を 1 文字まで縮め、列がつぶれる）。
 * 値（.data）は折り返さない。長い値（強度・種別）は .ap-wrap で空白の所で折り返す
 */
.ap-table caption { font-size: 15px; }
.ap-table td, .ap-table th { overflow-wrap: break-word; }
.ap-table thead th { word-break: keep-all; overflow-wrap: normal; }   /* 「真方/位」「図の/数」のように語の途中で折らない */
.ap-table .data { white-space: nowrap; }
.ap-table .ap-wrap { white-space: normal; overflow-wrap: break-word; }
.ap-table .ap-none { word-break: keep-all; }   /* 「AIP を参照」「AIP に記載なし」を語の途中で折らない（「AIP を参」「照」になっていた） */
.ap-table .ap-rem { display: block; margin-top: 2px; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.ap-table .ap-title { display: block; }
.ap-table .ap-freqs { display: flex; flex-wrap: wrap; gap: 0 14px; }
@media (min-width: 760px) {
  .ap-hours tbody th { width: 13em; }   /* 項目の欄を決まった幅に（記載が短い飛行場で、項目の欄が半分の幅に広がっていた） */
  .ap-table .ap-cs { min-width: 10em; }
  .ap-freq td.ap-hrs { min-width: 12em; }
  .ap-rwy td.ap-strength { min-width: 14em; }
}
@media (max-width: 759px) {
  .ap-table:not(.ap-flat) caption { display: block; }
  .ap-table:not(.ap-flat), .ap-table:not(.ap-flat) tbody, .ap-table:not(.ap-flat) tr, .ap-table:not(.ap-flat) td, .ap-table:not(.ap-flat) th { display: block; width: 100%; }
  .ap-table:not(.ap-flat) thead { display: none; }
  .ap-table:not(.ap-flat) tr { padding: 10px 0 12px; border-bottom: 1px solid var(--rule); }
  .ap-table:not(.ap-flat) th, .ap-table:not(.ap-flat) td { padding: 2px 0; border: 0; }
  .ap-table:not(.ap-flat) tbody th { font-size: 16px; }
  .ap-table:not(.ap-flat) td[data-label] { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 8px; }
  .ap-table:not(.ap-flat) td[data-label]::before { content: attr(data-label); font-size: 12.5px; line-height: 1.9; color: var(--ink-3); }
}
/* 開閉（UHF などの周波数、ほかの運用時間の項目） */
.ap-fold { margin-top: 16px; border-top: 1px solid var(--rule-2); }
.ap-fold > summary { cursor: pointer; padding: 12px 0; font-weight: 700; font-size: 15px; }
.ap-fold > .table-wrap { margin-bottom: 8px; }
/* 狭い画面でも表のままにする表（.ap-flat: 日出・日没、位置通報点） */
.ap-sun th, .ap-sun td { padding-inline: 10px; }
.ap-sun td .data { font-size: 15.5px; }
.ap-sun td small { display: block; color: var(--ink-3); }
/* 幅 600px 未満は、見出しの（JST・UTC）（2026 年）をかっこを外して 2 行目に置き、欄の間を詰める（「日出（JST・」「UTC）」に折れていた。320px では表がはみ出した） */
@media (max-width: 599px) {
  .ap-sun th, .ap-sun td { padding-inline: 8px; }
  .ap-sun .ap-thu { display: block; font-size: 12px; font-weight: 400; }
  .ap-sun .ap-par { display: none; }
}
@media (min-width: 600px) { .ap-sun td small { display: inline; margin-left: .6em; } }

/* 図の一覧（.chart-index）の中の分類の見出し */
.chart-index .ap-group { display: block; padding: 8px 16px 6px; border-bottom: 1px solid var(--rule); background: var(--sheet-2); font-family: var(--font-ja); font-size: 13px; font-weight: 700; color: var(--ink-2); }
.chart-index li.ap-group { grid-template-columns: 1fr; }

/* ───────── アプリでは・関連 ───────── */
.ap-app .items { margin-top: 8px; }
.ap-rel h3 { font-size: 16px; margin: 32px 0 8px; }
.ap-rel h3:first-child { margin-top: 0; }
.ap-rel .ap-nm { word-break: keep-all; overflow-wrap: break-word; }   /* 近くの飛行場の名前を語の途中で折らない */
.ap-rel .next a b .ap-nm, .ap-rel .next a b .nw { font-size: inherit; color: inherit; }   /* site.css の .next a span（下の行の小さな文字）を、題の中の span には効かせない */

/* ───────── 一覧（/airports/） ───────── */
.ap-jump { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin-top: 24px; }
.ap-jump a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border: 1px solid var(--rule-2); border-radius: 3px; color: var(--ink); text-decoration: none; font-size: 14.5px; font-weight: 700; background: var(--sheet); }
.ap-jump a:hover { border-color: var(--ink); }
.ap-jump .data { letter-spacing: .05em; }
.ap-jump small { margin-left: 6px; font-size: 12.5px; font-weight: 400; color: var(--ink-3); }
.ap-region { scroll-margin-top: calc(var(--head-h) + 16px); }
.ap-region + .ap-region { margin-top: 48px; }
.ap-region h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 21px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.ap-region h2 small { font-size: 13.5px; font-weight: 400; color: var(--ink-3); }
.ap-list { list-style: none; display: grid; }
@media (min-width: 760px) { .ap-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
@media (min-width: 1180px) { .ap-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ap-list a { display: grid; grid-template-columns: 4.4em minmax(0, 1fr); align-content: start; column-gap: 12px; height: 100%; padding: 12px 0 13px; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.ap-list .i { grid-row: 1 / span 2; font-family: var(--font-data); font-weight: 700; font-size: 18px; letter-spacing: .05em; color: var(--ink); }
.ap-list .n { font-weight: 700; line-height: 1.5; }
.ap-list .n small { font-family: var(--font-data); font-weight: 400; font-size: 12.5px; color: var(--ink-3); letter-spacing: .03em; }
.ap-list .m { font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.ap-list .m > span { white-space: nowrap; }
.ap-list a:hover .n { text-decoration: underline; text-decoration-color: var(--mag); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.ap-list-body { padding: clamp(40px, 5vw, 64px) 0 clamp(64px, 8vw, 104px); }
.ap-list-body > .ap-app, .ap-list-body > .ap-about { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--rule-2); }