/* 空港ブリーフィング（/tools/airport, /tools/airport/<icao>）。
   新規デザイン言語は最小限にとどめ、既存のカード・page_header・related-ogp-link 等を再利用する。 */

/* 開発中バナー（notam.css の #notam-banner を踏襲するが、このページは通常のドキュメントフローなので固定配置にしない） */
#airport-banner {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-pill); padding: 5px 16px; font-size: 12px; color: var(--color-muted);
  box-shadow: var(--shadow-sm); margin-bottom: 16px;
}
.banner-dev-badge {
  font-size: 11px; font-weight: 700; color: var(--color-accent);
  background: #e3f0fb; border-radius: var(--radius-pill); padding: 2px 8px; letter-spacing: 0.04em;
}

/* 開発中のお知らせモーダル（notam.css #dev-notice-overlay と同一構造。表示制御は dismiss_popup.js） */
#dev-notice-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  z-index: 2000; align-items: center; justify-content: center; padding: 20px;
}
#dev-notice-overlay.visible { display: flex; animation: ab-fade 0.15s ease; }
#dev-notice {
  background: var(--color-surface); border-radius: var(--radius-lg); padding: 28px 24px 22px;
  max-width: 380px; width: 100%; text-align: center;
  box-shadow: var(--shadow-md); animation: ab-pop 0.18s ease;
}
#dev-notice-icon { font-size: 36px; line-height: 1; margin-bottom: 10px; }
#dev-notice-title { font-size: 18px; font-weight: 700; color: var(--color-heading); margin: 0 0 12px; }
#dev-notice-body { font-size: 13px; color: var(--color-muted); line-height: 1.7; margin: 0 0 22px; }
#dev-notice-actions { display: flex; flex-direction: column; gap: 10px; }
#dev-notice-close {
  font-size: 14px; font-weight: 700; color: #fff; background: var(--color-accent);
  border: none; border-radius: var(--radius-md); padding: 11px 16px; cursor: pointer;
  transition: background 0.15s;
}
#dev-notice-close:hover { background: var(--color-accent-dark); }
#dev-notice-dismiss {
  font-size: 13px; font-weight: 600; color: var(--color-muted); background: none; border: none;
  padding: 6px; cursor: pointer; text-decoration: underline;
}
#dev-notice-dismiss:hover { color: var(--color-heading); }
@keyframes ab-fade { from { opacity: 0; } }
@keyframes ab-pop  { from { opacity: 0; transform: translateY(8px) scale(0.97); } }

/* ヘッダー行（見出し＋★） */
.ab-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ab-head-main { min-width: 0; }
.ab-fav-note {
  margin: 4px 0 0; font-size: 0.85rem; color: var(--color-notice-text);
}
.ab-fav-note.is-visible { display: block; }

.airport-fav-btn {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border: none; border-radius: 50%;
  background: var(--color-surface-alt); cursor: pointer; line-height: 1;
  color: var(--color-border-soft); box-shadow: var(--shadow-sm);
  transition: transform 0.12s ease, color 0.12s ease;
}
.airport-fav-btn:hover { transform: scale(1.1); }
.airport-fav-btn .airport-fav-star { font-size: 1.3rem; }
.airport-fav-btn.is-fav { color: var(--color-fav-star); }
.airport-fav-btn:disabled { opacity: 0.5; cursor: default; }
.airport-fav-btn--locked { text-decoration: none; }

.back-link { display: inline-block; margin: 10px 0 24px; }

/* お気に入り空港チップ（一覧ページ） */
.ab-fav-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.ab-fav-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 14px; border-radius: var(--radius-pill);
  background: #fff8e6; border: 1px solid #f0d78c; color: var(--color-heading);
  font-size: 0.85rem; font-weight: 600; text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.ab-fav-chip:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }

/* 空港検索フィルタ・一覧グリッド */
.ab-filter-row { margin: 0 0 20px; }
.ab-filter-input {
  width: 100%; max-width: 420px; box-sizing: border-box; padding: 10px 14px;
  border: 1px solid var(--color-input-border); border-radius: var(--radius-md); font-size: 14px;
  background: var(--color-surface-alt); color: var(--color-text);
}
.ab-filter-input:focus { outline: none; border-color: #9cc2ea; background: var(--color-surface); }
.ab-filter-empty { color: var(--color-muted); font-size: 0.9rem; }

.ab-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px; margin-bottom: 24px;
}
.ab-pick-card { padding: 14px 16px; }
.ab-pick-icao { margin: 0 0 4px; font-size: 1.05rem; font-weight: 800; color: var(--color-heading); font-family: var(--font-mono, monospace); }
.ab-pick-name { margin: 0; font-size: 0.85rem; color: var(--color-muted); }

/* セクション共通 */
.ab-section { margin: 32px 0; }
.ab-section h2 { margin: 0 0 12px; }
.ab-notice { color: var(--color-muted); }
.ab-source-line { margin: 12px 0 0; font-size: 0.85rem; color: var(--color-muted); display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* NOTAM鮮度バナー（notam_map.js showFreshness をサーバー側にミラー） */
.ab-freshness { margin: 0 0 12px; font-size: 0.85rem; font-weight: 700; padding: 8px 14px; border-radius: var(--radius-md); }
.ab-freshness--ok { color: var(--color-muted); background: transparent; padding: 0; }
.ab-freshness--warn { color: var(--color-notice-text); background: var(--color-notice-bg); border: 1px solid var(--color-notice-border); }
.ab-freshness--critical, .ab-freshness--unknown { color: var(--color-warning-text); background: var(--color-warning-bg); border: 1px solid var(--color-warning-border); }
.ab-freshness--night { color: var(--color-accent-dark); background: #e3f0fb; border: 1px solid var(--color-border); }

.ab-notam-list { display: flex; flex-direction: column; gap: 10px; }
.ab-notam { padding: 14px 16px; }
.ab-notam-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.ab-notam-number { font-weight: 700; font-size: 0.95rem; color: var(--color-heading); font-family: var(--font-mono, monospace); }
.ab-notam-badge {
  font-size: 10px; font-weight: 700; border-radius: var(--radius-pill); padding: 1px 8px; letter-spacing: 0.03em;
}
.ab-notam-badge--perm { background: var(--color-label-bg); color: var(--color-muted-2); }
.ab-notam-badge--est { background: #fff3e0; color: #8b5000; }
.ab-notam-sub { margin: 0 0 6px; font-size: 0.9rem; }
.ab-notam-body-text { margin: 0 0 6px; font-family: var(--font-mono, monospace); font-size: 0.85rem; white-space: pre-wrap; word-break: break-word; color: var(--color-text); }
.ab-notam-valid { margin: 0; font-size: 0.8rem; color: var(--color-muted); }

/* 滑走路別風成分（static/js/flight_computer.js の警告閾値・符号規約と同期。utils/airport_briefing.py 参照） */
.ab-wind-best { margin: 0 0 12px; font-weight: 700; color: var(--color-heading); }
.ab-wind-table { display: flex; flex-direction: column; gap: 8px; }
.ab-wind-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  padding: 10px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface);
}
.ab-wind-rwy { font-weight: 700; font-family: var(--font-mono, monospace); min-width: 84px; }
.ab-wind-cell { color: var(--color-text); }
.ab-wind-cell--warn { color: var(--color-warning-text); font-weight: 700; }
.ab-wind-note { margin: 10px 0 0; font-size: 0.8rem; color: var(--color-muted); }

/* 時系列予報（flight_prep の _weather_body.html の onerror パターンを踏襲） */
.ab-tseries summary { cursor: pointer; font-weight: 700; color: var(--color-heading); margin-bottom: 8px; }
.ab-tseries-body { margin-top: 10px; }
.ab-tseries-img { max-width: 100%; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.ab-tseries-na { color: var(--color-muted); font-size: 0.9rem; }