/* 航空情報（ai.js）。入力の枠は気温・QNH予想（tq.css）と同じ */
#ai-res { margin-top: 18px; }
#ai-res:empty { display: none; }
.ai-warn { margin: 0 0 12px; border: 2px solid var(--imc); background: var(--err-bg, #fdecea); border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.ai-warn strong { color: var(--imc); font-size: 1.05rem; }
.ai-warn span { font-size: .88rem; }
.ai-err { color: var(--imc); font-weight: 600; }
.ai-none { color: var(--muted); font-size: .9rem; margin: 6px 2px; }

/* 部品の名前は「ad-」で始めない（iPhone の Safari の広告ブロック等が .ad-body などを広告とみなして隠し、開いても中身が出なかった。2026-10-28） */
/* 押すと下に開く欄（ai.js の fold）。見出しはボタンで、開け閉めはサイト側で切り替える（iPhone の Safari で <details> が開かなかったため） */
.fold-h { display: block; width: 100%; margin: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.fold-h:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fold-mk::before { content: "▸"; display: inline-block; margin-right: 6px; transition: transform .15s; }
.open > .fold-mk::before { transform: rotate(90deg); }

/* 「AIP」の大きい枠と、出発空港・経路間・到着空港のタブ */
.ai-big { background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow, none); margin-bottom: 14px; }
.ai-big > .fold-h { cursor: pointer; padding: 12px 16px; font-size: 1.25rem; font-weight: 700; }
.ai-big > .fold-h small { font-size: .8rem; font-weight: 400; color: var(--muted); margin-left: 8px; }
.ai-tabs { display: flex; gap: 6px; padding: 0 16px; border-bottom: 2px solid var(--line); }
.ai-tabs button { flex: none; font: inherit; font-weight: 600; border: 1px solid var(--line); border-bottom: none; background: var(--bg); color: var(--muted); border-radius: 8px 8px 0 0; padding: 8px 14px; margin-bottom: -2px; cursor: pointer; }
.ai-tabs button[aria-selected="true"] { background: var(--card); color: var(--accent); border-color: var(--accent); border-bottom: 2px solid var(--card); }
.ai-panel { padding: 12px 16px 16px; }
.ai-panel h3 { margin: 4px 0 10px; font-size: 1.05rem; }

/* 空港：AD 2・AD 2.24 の2段 */
.ai-mid { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; background: var(--card); }
.ai-mid > .fold-h { cursor: pointer; padding: 12px; font-weight: 700; font-size: 1.05rem; }
.ai-mid > .fold-h .aip-no { margin-right: 10px; min-width: 0; }
.ai-mid.open > .fold-h { border-bottom: 1px solid var(--line); }
.ai-mid-in { padding: 10px; }
.aip-sec { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; }
.aip-sec > .fold-h { cursor: pointer; padding: 8px 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.aip-sec > .fold-h small { color: var(--muted); font-size: .75rem; }
.aip-sec.open > .fold-h { border-bottom: 1px solid var(--line); }
.aip-no { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; color: var(--accent); min-width: 5.2em; }

/* 原文（AIP の切り抜き画像）と日本語訳。PC は左右、スマホは上下 */
.aip-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 10px; }
@media (max-width: 820px) { .aip-body { grid-template-columns: minmax(0, 1fr); } }
.aip-orig { margin: 0; display: grid; gap: 6px; align-content: start; }
.aip-orig figcaption, .aip-trh { font-size: .8rem; color: var(--muted); margin: 0 0 4px; font-weight: 600; }
.aip-orig img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; background: #fff; display: block; cursor: zoom-in; }
.aip-trb { font-size: .88rem; overflow-wrap: anywhere; }
.aip-trb p { margin: 0 0 8px; }
.aip-trb ul { margin: 0 0 8px; padding-left: 1.3em; }
.aip-trsub { font-weight: 700; }
.aip-trw { overflow-x: scroll; margin-bottom: 8px; }
/* 表の中では「121.2MHz(1)」のような語を途中で折らない（入りきらない表は横にスクロール） */
.aip-trt { width: 100%; border-collapse: collapse; font-size: .82rem; line-height: 1.5; }
.aip-trt td, .aip-trt th { border: 1px solid var(--line); padding: 5px 7px; vertical-align: top; text-align: left; min-width: 5.5em; overflow-wrap: normal; word-break: normal; }
.aip-trt thead th { background: var(--bg); }
.aip24h { font-weight: 700; text-align: center; margin: 4px 0 8px; font-size: .9rem; }
.aip24 { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 6px; }
.aip24 li + li { border-top: 1px solid var(--line); }
.aip24 .fold-h { cursor: pointer; padding: 7px 10px; font-size: .9rem; }
.aip-chart-box { padding: 0 10px 10px; }
.aip-chart { display: block; width: 100%; max-width: 760px; margin: 0 auto 8px; border: 1px solid var(--line); background: #fff; cursor: zoom-in; }

/* 経路間：地図と番号付きの一覧 */
.r-head { margin: 2px 0 10px; font-size: .92rem; }
/* 経路間の地図（雨雲の動きと同じく、ドラッグで移動・ピンチ等で拡大縮小） */
.r-view { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 72vh; overflow: hidden; overflow: clip; border: 1px solid var(--line); border-radius: 8px; background: #dfe9f3; user-select: none; -webkit-user-select: none; touch-action: none; cursor: grab; }
.r-view:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.r-view.r-grabbing { cursor: grabbing; }
.r-tiles, .r-ov { position: absolute; inset: 0; width: 100%; height: 100%; }
.r-tiles { pointer-events: none; }
.r-tiles img { position: absolute; display: block; max-width: none; }
.r-area { cursor: pointer; }
.r-attr { margin: 4px 0 10px; font-size: .75rem; }
.r-table { border-top: 1px solid var(--line); }
.r-thead, .r-row > .fold-h { display: grid; grid-template-columns: 30px 13em minmax(0, 1fr) 8em 7.5em; gap: 10px; align-items: center; padding: 6px 4px; }
.r-thead { font-size: .75rem; font-weight: 600; color: var(--muted, #5b6b7f); border-bottom: 1px solid var(--line); }
.r-row { border-bottom: 1px solid var(--line); scroll-margin-top: 12px; }
.r-row > .fold-h { font-size: .88rem; }
/* 経路に直接かかっているもの／付近の仕切りの帯。付近の行は少し薄く（開いたときは元の濃さ） */
.r-band { padding: 6px 8px; background: #eef2f6; color: #3b4a5a; font-size: .82rem; font-weight: 700; border-bottom: 1px solid var(--line); }
.r-band.on { background: #fdecea; color: #b71c1c; }
.r-near:not(.open) > .fold-h { opacity: .75; }
@media (prefers-color-scheme: dark) {
  .r-band { background: #1d2a3e; color: #c8d6e8; }
  .r-band.on { background: #3a1f24; color: #ffb4ab; }
}
.r-row.open > .fold-h { background: var(--accent-bg, rgb(30 120 220 / .07)); }
.r-row > .fold-h:hover { background: var(--accent-bg, rgb(30 120 220 / .07)); }
.r-kind { font-weight: 700; }
.r-name small { display: block; font-size: .72rem; color: var(--muted, #5b6b7f); }
.r-alt { white-space: nowrap; font-variant-numeric: tabular-nums; }
.r-row > .aip-body { padding: 8px 4px 12px; }
@media (max-width: 640px) {
  .r-thead, .r-row > .fold-h { grid-template-columns: 26px minmax(4.5em, 1fr) minmax(5.5em, 1.3fr) auto; gap: 6px; font-size: .8rem; }
  .r-thead > :last-child { display: none; }
  .r-row > .fold-h > :last-child { grid-column: 2 / -1; }
  .r-row .r-num { width: 24px; height: 24px; font-size: .8rem; }
}
.r-num { flex: none; width: 28px; height: 28px; border: 2px solid var(--c); color: var(--c); border-radius: 50%; display: grid; place-items: center; font-weight: 700; }
.r-txt { min-width: 0; }
.r-line { display: block; }
.r-tag { display: inline-block; color: #fff; font-size: .72rem; font-weight: 700; border-radius: 4px; padding: 1px 6px; white-space: nowrap; }

@media (max-width: 640px) {
  .ai-tabs { padding: 0 8px; gap: 4px; }
  .ai-tabs button { flex: 1 1 0; min-width: 0; font-size: .82rem; padding: 8px 4px; white-space: normal; }
  .ai-panel { padding: 10px 8px 12px; }
  .ai-mid-in { padding: 8px 6px; }
}

/* いま使っている AIP の版と有効期限（タブを開いたら小さく出す） */
.ai-ed { margin: 10px 2px 0; font-size: .82rem; color: var(--muted, #5b6b7f); }
.ai-ed b { font-weight: 600; }

/* 経路間の地図の＋−（ボタンの見た目はウェザーブリーフィングの雨雲の動きと同じ .rv-zoom） */
.r-mapbox { position: relative; }
.r-mapbox .rv-zoom button { width: 50px; height: 48px; font-size: 1.7rem; }
.r-mapbox .rv-home { top: 118px; width: 52px; height: 36px; font-size: .8rem; }

/* 入力欄の「飛び方」（VFR／IFR。最初は VFR。改正・SUP・AIC の振り分けに使う） */
.ai-rules { display: inline-flex; align-items: center; gap: 8px; border: 0; margin: 0; padding: 0; }
.ai-rules legend { float: left; font-size: .85rem; font-weight: 600; color: var(--muted); margin-right: 8px; padding: 0; }
.ai-rules label { position: relative; }
.ai-rules input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ai-rules span { display: inline-block; padding: 8px 18px; border: 1px solid var(--accent); color: var(--accent); font-weight: 700; background: var(--card); }
.ai-rules label:first-of-type span { border-radius: 8px 0 0 8px; }
.ai-rules label:last-of-type span { border-radius: 0 8px 8px 0; border-left: 0; }
.ai-rules input:checked + span { background: var(--accent); color: #fff; }
.ai-rules input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 改正（AMDT）・補足版（SUP）・サーキュラー（AIC）の枠 */
.n-big .ai-tabs button { display: inline-flex; align-items: center; gap: 6px; }
.n-miss { padding: 12px 16px; margin: 0; }
.n-cnt { display: inline-block; font-size: .75rem; font-weight: 700; color: var(--accent); background: rgb(30 120 220 / .1); border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: 1px; }
.n-cnt.warn { color: #b26a00; background: rgb(224 123 0 / .14); }
.n-cnt.common { color: #2e7d32; background: rgb(46 125 50 / .12); }
.n-cnt.cond { color: #5e35b1; background: rgb(94 53 177 / .12); }
.n-cnt.gray { color: var(--muted); background: rgb(120 130 140 / .14); }
.n-rest { padding: 0 16px 14px; }
.n-grp > .fold-h small { display: block; font-size: .75rem; font-weight: 400; color: var(--muted); margin: 2px 0 0 18px; }
.n-list { padding: 0 10px 6px; }
.ai-panel > .n-list { padding: 0; }
.n-row { border-bottom: 1px solid var(--line); scroll-margin-top: 12px; }
.n-row:last-child { border-bottom: 0; }
.n-row > .fold-h { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; padding: 9px 4px; font-size: .9rem; }
.n-row > .fold-h:hover, .n-row.open > .fold-h { background: var(--accent-bg, rgb(30 120 220 / .07)); }
.n-no { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; color: var(--muted); white-space: nowrap; font-size: .85rem; }
.n-src .n-rpw { max-width: 640px; }
.n-t small { display: block; font-size: .74rem; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.n-tags { display: flex; flex-wrap: wrap; gap: 4px 8px; justify-content: flex-end; text-align: right; font-size: .8rem; }
.n-why { color: var(--muted); }
.n-why.cond { color: #5e35b1; font-weight: 600; }
.n-when { color: #1565c0; font-weight: 700; white-space: nowrap; }
.n-when.up { color: #c62828; }
.n-unsure { color: #fff; background: #e07b00; border-radius: 4px; padding: 0 6px; font-weight: 700; font-size: .72rem; white-space: nowrap; }
.n-body { padding: 8px 4px 14px; display: grid; gap: 10px; }
.n-orig { max-width: 720px; }
.n-orig figcaption a { margin-left: 8px; font-weight: 600; }
.n-reason { margin: 0; padding: 8px 10px; border-left: 4px solid #e07b00; background: rgb(224 123 0 / .08); font-size: .85rem; }
.n-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: .85rem; }
.n-dl dt { color: var(--muted); font-weight: 600; }
.n-dl dd { margin: 0; overflow-wrap: anywhere; }
.n-mapbox { max-width: 860px; }
.n-mapbox .r-view { aspect-ratio: 4 / 3; max-height: 64vh; }
.n-allbox { max-width: 860px; margin: 4px 0 2px; }
.n-allbox .r-view { aspect-ratio: 4 / 3; max-height: 64vh; }
.n-num { display: inline-grid; width: 22px; height: 22px; margin-right: 6px; font-size: .75rem; vertical-align: middle; font-family: inherit; }
#n-panel-sup .n-row > .fold-h { grid-template-columns: 9.5em minmax(0, 1fr) auto; }
/* 地図の範囲を押したときの、原文の対応箇所（赤い枠） */
.n-src { max-width: 860px; display: grid; gap: 6px; }
.n-srch { margin: 0; font-weight: 700; font-size: .9rem; color: #9b1c16; }
.n-srch small { display: block; font-weight: 400; color: var(--muted); font-size: .78rem; }
.n-foot { margin: -4px 4px 14px; font-size: .78rem; }
@media (max-width: 640px) {
  .n-row > .fold-h { grid-template-columns: minmax(0, 1fr); gap: 2px; font-size: .86rem; }
  .n-tags { justify-content: flex-start; text-align: left; }
  .n-rest { padding: 0 8px 10px; }
  .n-list { padding: 0 4px 6px; }
  .n-mapbox .r-view { aspect-ratio: 1 / 1; }
  .n-allbox .r-view { aspect-ratio: 1 / 1; }
  #n-panel-sup .n-row > .fold-h { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-color-scheme: dark) {
  .n-why.cond { color: #b39ddb; }
  .n-srch { color: #ff8a80; }
  .n-when { color: #90caf9; }
  .n-when.up { color: #ffab91; }
}
.n-tip { margin: 0; padding: 6px 10px; border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); font-size: .85rem; font-weight: 600; }
.n-uq { border-color: #e0a050; }
.n-uq > .fold-h { color: #b26a00; }
.n-uq .n-t small { color: #8a5200; }
@media (prefers-color-scheme: dark) { .n-uq > .fold-h { color: #ffb74d; } .n-uq .n-t small { color: #ffcc80; } }
.n-cnt { white-space: nowrap; }
@media (max-width: 640px) {
  .n-big .ai-tabs button { flex-direction: column; gap: 2px; }
  .n-big .ai-tabs .n-cnt { margin-left: 0; }
}

/* 改正：何がどう変わるか（AI の要約）と、差し替えページの変更の行の枠（2026-10-29） */
.n-sum { padding: 10px 12px; border-left: 4px solid var(--accent, #2f6fdb); background: rgb(47 111 219 / .07); border-radius: 0 8px 8px 0; font-size: .9rem; }
.n-sum p { margin: 0 0 4px; }
.n-sum ul { margin: 4px 0 0; padding-left: 1.2em; }
.n-sum li { margin: 2px 0; }
.n-sumh { font-weight: 700; }
.n-sumh small, .n-revh small { margin-left: 8px; font-weight: 400; color: var(--muted); font-size: .78rem; }
.n-rev { display: grid; gap: 6px; }
.n-revh { margin: 0; font-weight: 700; font-size: .9rem; }
.n-legend { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .8rem; color: var(--muted); }
.n-legend span { display: inline-flex; align-items: center; gap: 5px; }
.n-key { display: inline-block; width: 18px; height: 10px; border-radius: 2px; }
.n-rps { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.n-rp { margin: 0; }
.n-rp figcaption { font-size: .8rem; font-weight: 600; margin-bottom: 3px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.n-rp figcaption span { font-weight: 400; color: var(--muted); }
.n-relc { color: #d7261e; }
.n-rpw { position: relative; width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; cursor: zoom-in; }
.n-rpw img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.n-bx { position: absolute; left: 3%; right: 3%; border-radius: 3px; pointer-events: none; }
.n-bx.whole { inset: 2px; }
.n-bx.rel, .n-key.rel { border: 2.5px solid #d7261e; background: rgb(215 38 30 / .08); }
.n-bx.other, .n-key.other { border: 1.5px dashed #8a8f98; }
.n-bx.unk, .n-key.unk { border: 2px dashed #e07b00; }
/* 表の行（経路間の一覧・改正・SUP・AIC の行）も開いているか分かるように ▸ を付ける。列の並びを崩さないよう左の余白に置く（2026-10-29 クロノコ指示） */
.r-row > .fold-mk, .n-row > .fold-mk { position: relative; padding-left: 22px; }
.r-row > .fold-mk::before, .n-row > .fold-mk::before { position: absolute; left: 6px; top: 50%; margin: -.6em 0 0; line-height: 1.2; }
.n-row > .fold-mk::before { top: 9px; margin: 0; line-height: 1.5; }
.r-thead { padding-left: 22px; }

/* 最初の地図（入力欄のすぐ下）。出発・到着を入れたらすぐ赤い線を出し、指で直してから「航空情報を表示」（ai.js PLAN） */
.ai-plan { margin: 4px 0 10px; display: grid; gap: 6px; }
.ai-plan-h { margin: 0; font-weight: 700; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.ai-plan-h small { font-weight: 500; font-size: .78rem; color: var(--muted); }
.ai-plan .r-view { aspect-ratio: 16 / 10; max-height: 62vh; }
.ai-plan .r-attr { margin: 2px 0 0; }
.ai-plan-note { margin: 0; color: var(--muted); }
@media (max-width: 640px) { .ai-plan .r-view { aspect-ratio: 1 / 1; } }