/* 資料の一括ダウンロード（download.js。案 W2・A2） */
.dl-open { font: inherit; font-weight: 700; font-size: .92rem; color: var(--accent-text); background: var(--btn); border: 0; border-radius: 999px; padding: 8px 16px; cursor: pointer; box-shadow: 0 1px 3px rgb(0 0 0 / .15); }
.dl-open:hover { filter: brightness(1.06); }
/* ダウンロードできると知らせる橙の帯（2026-11-01 クロノコが案1を採用） */
.dl-band { --band-bg: linear-gradient(90deg, #fff6e5, var(--card)); --band-line: #f0a020; --band-sub: #5a4a2a; --band-ic: #f39c12; --band-btn: linear-gradient(180deg, #f7a325, #e08600);
  display: flex; align-items: center; gap: 16px; background: var(--band-bg); border: 2px solid var(--band-line); border-radius: 14px; padding: 14px 18px; margin: 0 0 12px; box-shadow: 0 4px 14px rgb(200 120 0 / .14); color: var(--text); }
.dl-band-ic { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--band-ic); color: #fff; display: grid; place-items: center; font-size: 30px; }
.dl-band-tx { flex: 1; min-width: 0; line-height: 1.5; }
.dl-band-tx b { display: block; font-size: 1.12rem; }
.dl-band-tx span { font-size: .88rem; color: var(--band-sub); }
.dl-open.dl-band-go { flex: none; font-weight: 800; font-size: 1.02rem; color: #fff; background: var(--band-btn); padding: 12px 22px; box-shadow: 0 2px 6px rgb(160 90 0 / .35); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.dl-band-go svg { font-size: 1.15em; }
@media (prefers-color-scheme: dark) {
  .dl-band { --band-bg: linear-gradient(90deg, #3a2a10, var(--card)); --band-line: #d08a1c; --band-sub: #e3cfa8; --band-ic: #d08a1c; --band-btn: linear-gradient(180deg, #e0962a, #c47a10); box-shadow: none; }
}
@media (max-width: 560px) {
  .dl-band { flex-wrap: wrap; gap: 10px 12px; padding: 12px 14px; }
  .dl-band-ic { width: 40px; height: 40px; font-size: 22px; }
  .dl-band-tx b { font-size: 1rem; }
  .dl-open.dl-band-go { width: 100%; justify-content: center; }
}

.dl-dlg { width: min(840px, 100vw - 16px); max-height: calc(100dvh - 16px); }
.dl-in { display: flex; flex-direction: column; max-height: calc(100dvh - 18px); }
.dl-top { padding: 16px 20px 10px; border-bottom: 1px solid var(--line); }
.dl-title { display: flex; align-items: center; gap: 8px; }
.dl-title h2 { margin: 0; font-size: 1.2rem; flex: 1; }
.dl-x { font: inherit; font-size: 1.5rem; line-height: 1; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px 8px; }
.dl-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; }
.dl-ol { font-size: .85rem; color: var(--muted); }
.dl-seg { display: inline-flex; border: 1.5px solid var(--accent); border-radius: 999px; overflow: hidden; }
.dl-seg button { font: inherit; font-size: .85rem; font-weight: 600; padding: 6px 12px; white-space: nowrap; border: 0; background: var(--card); color: var(--accent); cursor: pointer; }
.dl-seg button + button { border-left: 1px solid var(--accent); }
.dl-seg button[aria-checked="true"] { background: var(--accent); color: var(--accent-text); }
.dl-all { font: inherit; font-size: .82rem; font-weight: 600; padding: 5px 12px; border: 1.5px solid var(--accent); border-radius: 999px; background: var(--card); color: var(--accent); cursor: pointer; }
.dl-note { margin: 10px 0 0; font-size: .8rem; color: var(--muted); line-height: 1.6; }

.dl-list { overflow-y: auto; padding: 12px 20px; flex: 1; overscroll-behavior: contain; }
.dl-g { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.dl-gh { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 9px 12px; background: var(--accent-soft); }
.dl-ck { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.dl-gt { font-weight: 700; }
.dl-gs { font-size: .8rem; color: var(--muted); flex: 1 1 160px; }
.dl-fold { font: inherit; font-size: .8rem; background: none; border: 0; color: var(--accent); cursor: pointer; white-space: nowrap; padding: 2px 4px; }
.dl-fold::before { content: "▸ "; }
.dl-fold[aria-expanded="true"]::before { content: "▾ "; }
.dl-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--line); cursor: pointer; }
.dl-row img { width: 52px; height: 40px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); flex: none; background: #fff; }
.dl-rt { flex: 1; font-size: .9rem; min-width: 0; }
.dl-rt small { display: block; color: var(--muted); font-size: .76rem; margin-top: 2px; }
.dl-row.dis { cursor: default; opacity: .65; }
.dl-g input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); flex: none; margin: 0; }
.dl-badge { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--code); color: var(--muted); white-space: nowrap; }
.dl-badge.two { background: #fdebd7; color: #a24d00; }
.dl-badge.only { background: #eceff3; color: #5b6472; }
.no-ja .ja-only { display: none; }
.dl-notam .dl-gh { background: #fdecec; }
.dl-soon { display: inline-block; font-size: .74rem; font-weight: 700; color: #7b3fa0; border: 1.5px dashed #b48ad0; border-radius: 999px; padding: 1px 8px; }
.dl-warn { margin: 0; padding: 10px 14px; border-top: 1px solid var(--line); font-size: .82rem; line-height: 1.6; color: #8a1c1c; background: #fff6f6; }
.dl-warn b { display: block; color: #c62828; font-size: .9rem; }

.dl-foot { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.dl-sum { flex: 1; font-size: .78rem; color: var(--muted); min-width: 180px; }
.dl-sum b { color: var(--accent); font-size: 1rem; margin-right: 10px; }
.dl-prog { font-size: .82rem; color: var(--muted); }
.dl-go { font: inherit; font-weight: 700; color: var(--accent-text); background: var(--btn); border: 0; border-radius: 999px; padding: 10px 20px; cursor: pointer; }
.dl-go:disabled { opacity: .5; cursor: default; }

@media (prefers-color-scheme: dark) {
  .dl-badge.two { background: #4a3218; color: #ffc78a; }
  .dl-badge.only { background: #2a3443; color: #b7c2d0; }
  .dl-notam .dl-gh { background: #3b2226; }
  .dl-warn { background: #2d1c1f; color: #ffb4b4; }
  .dl-warn b { color: #ff8a80; }
}
@media (max-width: 560px) {
  .dl-top, .dl-list, .dl-foot { padding-left: 12px; padding-right: 12px; }
  .dl-seg button { padding: 6px 10px; font-size: .82rem; }
  .dl-paren { display: none; }
  .dl-note { font-size: .74rem; }
  .dl-gs { order: 3; flex-basis: 100%; padding-left: 28px; }
  .dl-fold { margin-left: auto; }
  .dl-row img { width: 44px; height: 34px; }
  .dl-go { width: 100%; }
}

/* 資料ごとの色付き・色なし・両方（橙の切り替え） */
.dl-pk { display: inline-flex; flex: none; border: 1.5px solid #e08a2e; border-radius: 999px; overflow: hidden; }
.dl-pk button { font: inherit; font-size: .74rem; font-weight: 700; padding: 3px 9px; border: 0; background: #fff7ee; color: #a24d00; cursor: pointer; white-space: nowrap; }
.dl-pk button + button { border-left: 1px solid #e08a2e; }
.dl-pk button[aria-checked="true"] { background: #e07b00; color: #fff; }
.dl-opts + .dl-opts { margin-top: 8px; }
@media (prefers-color-scheme: dark) {
  .dl-pk button { background: #3a2a18; color: #ffc78a; }
  .dl-pk button[aria-checked="true"] { background: #e07b00; color: #fff; }
}
@media (max-width: 560px) {
  .dl-row { flex-wrap: wrap; }
  .dl-pk { margin-left: 28px; }
  .dl-pk button { padding: 4px 10px; }
}
/* 高層天気図の下の、色付けの元にした資料（2026-11-01） */
.dl-row.dl-child { padding-left: 34px; background: var(--code); }
.dl-srcnote { font-weight: 700; color: var(--muted); }