/* ナブログを作る（navlog.js）。上に経路の欄 → 地図 → 機体・性能・この飛行の値 →「用紙を作る」、下にクロノコの紙のナブログ（VFR・IFR）を再現した用紙。
   「地図を大きくして直す」では .nl-stage に .nl-big：地図が画面いっぱい、入力は下の引き出し（高さは --dh、横棒で上げ下げ） */
#nl-form { container-type: inline-size; max-width: none; padding: 0; border: 0; box-shadow: none; background: none; }
#nl-form label { color: var(--text); font-size: .92rem; font-weight: 700; }
#nl-form label .opt { color: var(--muted); font-size: .8rem; font-weight: 400; }
#nl-res { margin-top: 18px; }
#view-nav .card { padding: 14px 16px; margin-bottom: 12px; }
.nl-h { margin: 0 0 10px; font-size: 1.05rem; }
.nl-h::before { content: ""; display: inline-block; width: 4px; height: 1.05em; margin-right: 8px; vertical-align: -.15em; border-radius: 2px; background: var(--accent); }
.nl-sub { margin: 8px 0 0; font-size: .8rem; color: var(--muted); }
.nl-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 5px; background: #cdebd3; color: #1d6b2b; font-size: .68rem; font-weight: 700; vertical-align: 2px; }
.nl-tag[hidden] { display: none; }

/* 経路の欄 */
.nl-rhd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 4px; }
.nl-rhd .nl-h { margin: 0; flex: 1 1 auto; }
.nl-rnote { color: #8a5a00; }
.nl-bigonly { display: none !important; }
.nl-back { padding: 6px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--text); font: inherit; font-weight: 800; font-size: .86rem; cursor: pointer; }

/* VFR・IFR の切り替え */
.nl-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; flex: none; }
.nl-seg button { padding: 7px 16px; border: 0; background: var(--card); color: var(--text); font: inherit; font-weight: 800; font-size: .92rem; cursor: pointer; }
.nl-seg button + button { border-left: 1px solid var(--line); }
.nl-seg button[aria-pressed="true"] { background: var(--btn, var(--accent)); color: var(--accent-text); }
/* 経路の欄の右上の大きい切り替え（IFR は航空路と MEA が入る。航空情報タブの VFR・IFR と同じ） */
.nl-rulebox { display: flex; align-items: center; gap: 8px; }
.nl-rulelbl { color: var(--muted); font-size: .86rem; font-weight: 700; }
.nl-seg-lg { border-width: 2px; border-color: var(--field-line, var(--line)); border-radius: 12px; }
.nl-seg-lg button { min-width: 84px; padding: 10px 22px; font-size: 1.15rem; letter-spacing: .04em; }
.nl-seg-lg button + button { border-left-width: 2px; border-left-color: var(--field-line, var(--line)); }

/* 地図 */
.nl-mapwrap { position: relative; margin-bottom: 12px; }
.nl-mapwrap:not(.on) #nl-map, .nl-mapwrap:not(.on) .nl-bigbtn { display: none; }
.nl-mapempty { margin: 0; padding: 26px 16px; border: 2px dashed var(--line); border-radius: 12px; background: var(--card); color: var(--muted); font-size: .86rem; text-align: center; }
.nl-mapempty[hidden] { display: none; }
#nl-map .r-mapbox { margin: 0; }
#nl-map .r-view { aspect-ratio: 16 / 8; max-height: 48vh; }
#nl-map .r-attr { margin: 2px 0 0; }
.nl-bigbtn { position: absolute; right: 10px; bottom: 34px; z-index: 2; padding: 9px 14px; border: 1px solid #c9d6e3; border-radius: 10px; background: #fff; color: #1a2533; font: inherit; font-weight: 800; font-size: .9rem; box-shadow: 0 3px 10px rgb(0 0 0 / .18); cursor: pointer; }

/* 機体・性能・この飛行の値 */
.nl-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 0 12px; }
.nl-acrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nl-acrow .nl-ac { flex: 1 1 130px; }
.nl-acrow .nl-unit { flex: 0 0 auto; }
.nl-f.prev { border-color: #8fd19e; background: #e6f4ea; }
.nl-f.need { border-color: #e0a800; background: #fff4d6; }
.nl-f.prev, .nl-f.need, .nl-f.prev .nl-ctl input, .nl-f.need .nl-ctl input { color: #1a2533; }
.nl-f.prev > span:first-child, .nl-f.need > span:first-child, .nl-f.prev small, .nl-f.need small { color: #536173; }
.nl-ftag { margin-left: 5px; padding: 0 5px; border-radius: 5px; font-size: .9em; font-style: normal; font-weight: 700; }
.nl-ftag:empty { display: none; }
.nl-f.prev .nl-ftag { background: #cdebd3; color: #1d6b2b; }
.nl-f.need .nl-ftag { background: #ffe7a3; color: #7a5a00; }
.nl-f > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 「用紙を作る」と案内 */
.nl-gobar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 14px; margin: 2px 0 4px; }
.nl-left { flex: 1 1 220px; margin: 0; color: var(--muted); font-size: .88rem; text-align: right; }
.nl-left b { color: #9a7400; }
.nl-left.ok { color: var(--ok-text, #1d6b2b); }
.nl-left.err { color: #c62828; font-weight: 700; }
#nl-go { padding: 11px 22px; border: 0; border-radius: 11px; background: var(--btn, var(--accent)); color: var(--accent-text); font: inherit; font-weight: 800; font-size: 1rem; box-shadow: 0 4px 12px rgb(22 89 180 / .3); cursor: pointer; }
#nl-go.dim { opacity: .62; }

/* ---- 地図を大きくした画面（地図いっぱい＋下から入力の引き出し） ---- */
html.nl-lock, html.nl-lock body { overflow: hidden; }
.nl-stage { --dh: 260px; }
.nl-stage.nl-big { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; padding: 8px 8px 0; background: var(--bg); }
.nl-big .nl-back.nl-bigonly { display: inline-block !important; }
.nl-big .nl-grab.nl-bigonly { display: block !important; }
.nl-big .nl-routecard { position: relative; z-index: 5; flex: none; margin: 0 0 8px; padding: 8px 12px; }
.nl-big .nl-routecard .nl-tag { display: none; }
.nl-big .nl-seg button { min-width: 0; padding: 5px 12px; font-size: .9rem; }
.nl-big .nl-rulelbl { display: none; }
.nl-big #nl-form label { display: none; }
.nl-big #nl-form .tq-grid { gap: 6px 8px; }
.nl-big #nl-form input:not(.via-input) { padding: 6px 10px; }
.nl-big #nl-form .via-field { min-height: 0; max-height: 80px; overflow-y: auto; padding: 3px 6px; gap: 4px; }
.nl-big #nl-form .via-chip { padding-top: 1px; padding-bottom: 1px; }
.nl-big #nl-form .via-field .via-input { padding: 3px 4px; }
/* パソコンでは 出発 → 経由地 → 到着 を1行に */
@media (min-width: 761px) {
  .nl-big .tq-grid.ai-grid { grid-template-columns: minmax(120px, 190px) auto minmax(0, 1fr) auto minmax(120px, 190px); }
  .nl-big .tq-grid.ai-grid > * { grid-row: 1 !important; }
  .nl-big .tq-grid.ai-grid > :nth-child(3) { grid-column: 3; }
  .nl-big .tq-grid.ai-grid > :nth-child(4) { display: block; grid-column: 4; align-self: center; }
  .nl-big .tq-grid.ai-grid > :nth-child(5) { grid-column: 5; }
}
.nl-big .nl-rnote { margin: 4px 0 0; }
.nl-big .nl-mapwrap { flex: 1; min-height: 0; margin: 0 -8px calc(var(--dh) - 14px); }
.nl-big #nl-map { position: absolute; inset: 0; }
.nl-big #nl-map .r-mapbox { height: 100%; }
.nl-big #nl-map .r-view { height: 100%; aspect-ratio: auto; max-height: none; border-width: 1px 0 0; border-radius: 0; }
.nl-big #nl-map .r-attr { position: absolute; right: 8px; bottom: 18px; z-index: 2; margin: 0; padding: 0 6px; border-radius: 4px; background: rgb(255 255 255 / .85); font-size: .7rem; }
.nl-big .nl-bigbtn { display: none; }
.nl-big .nl-drawer { position: absolute; left: 12px; right: 12px; bottom: 0; z-index: 4; display: flex; flex-direction: column; height: var(--dh); padding: 0 12px; border-radius: 18px 18px 0 0; background: var(--bg); box-shadow: 0 -8px 30px rgb(0 0 0 / .25); }
.nl-big.nl-dragging .nl-drawer { transition: none; }
.nl-grab { flex: none; padding: 9px 0 7px; cursor: ns-resize; touch-action: none; }
.nl-grab i { display: block; width: 64px; height: 7px; margin: 0 auto; border-radius: 4px; background: #5b6b7d; }
.nl-grab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
.nl-big .nl-gobar { order: 1; flex: none; margin: 0 0 8px; }
.nl-big .nl-inputs { order: 2; flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding-bottom: 10px; }
.nl-big .nl-inputs .card { margin-bottom: 8px; }

/* 機体と条件 */
.nl-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.nl-f { display: block; margin: 0; border: 2px solid var(--field-line, var(--line)); border-radius: 10px; padding: 3px 10px 4px; background: var(--field, var(--card)); }
.nl-f:focus-within { border-color: var(--accent); }
.nl-f > span:first-child { display: block; font-size: .72rem; color: var(--muted); line-height: 1.5; }
.nl-ctl { display: flex; align-items: baseline; gap: 4px; }
.nl-ctl input, .nl-ctl select { min-width: 0; width: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--text); font: 700 1.08rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; outline: none; }
.nl-ctl select { flex: none; width: auto; min-width: 3.4em; font-size: .9rem; cursor: pointer; }
.nl-ctl input[data-k="ff"] { width: 3.5em; flex: 1 1 auto; }
.nl-ctl input::placeholder { color: var(--muted); opacity: .45; font-weight: 400; }
.nl-ctl small { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.nl-wind-in { display: flex; align-items: baseline; gap: 2px; width: 100%; }
.nl-wind-in input { width: 3.2em; flex: 0 1 auto; }
.nl-wind-in span { color: var(--muted); }

/* 用紙の上の帯：VFR/IFR の切り替えと色の見方 */
.nl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 8px; }
.nl-type { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.nl-type button { padding: 7px 14px; border: 0; background: var(--card); color: var(--text); font: inherit; font-weight: 800; font-size: .88rem; cursor: pointer; }
.nl-type button + button { border-left: 1px solid var(--line); }
.nl-type button[aria-pressed="true"] { background: var(--btn, var(--accent)); color: var(--accent-text); }
.nl-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: .78rem; color: var(--muted); }
.nl-legend li { display: flex; align-items: center; gap: 5px; }
.nl-legend i { display: inline-block; min-width: 26px; height: 16px; border: 1px solid #9aa; border-radius: 3px; background: #fff; font: 700 .72rem/14px ui-monospace, Menlo, Consolas, monospace; font-style: normal; text-align: center; }
.nl-legend .lg-au { color: #0b4fb3; }
.nl-legend .lg-ov { color: #a33f00; background: #ffdcb8; }
.nl-legend .lg-in { background: #fff7cc; border-style: dashed; border-color: #c9a400; }
.nl-legend .lg-g { background: #e3f5e1; border-color: #2e9a3a; }
.nl-legend .lg-mk { color: #000; background: linear-gradient(transparent 35%, #ffb3dc 35%); }
.nl-msg { margin: 0 0 8px; font-size: .8rem; color: var(--muted); min-height: 0; }
.nl-msg:empty { display: none; }
.nl-scroll { overflow-x: auto; border-radius: 6px; }
.nl-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.nl-btns button { padding: 7px 14px; border-radius: 9px; font: inherit; font-weight: 700; font-size: .88rem; border: 1px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; }
.nl-btns button:first-child { background: var(--btn, var(--accent)); color: var(--accent-text); border: 0; }

/* ---- 用紙（紙のナブログの見た目。夜の色づかいでも白い紙のまま） ---- */
.nlp { --ink: #111; --au: #0b4fb3; --in: #fff7cc; --inl: #c9a400; --g: #e3f5e1; --gl: #2e9a3a; --mk: #ffb3dc;
  width: max-content; min-width: 100%; background: #fff; color: var(--ink); padding: 10px; box-sizing: border-box;
  font: 11px/1.25 system-ui, "Hiragino Sans", "Noto Sans JP", sans-serif; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.nlp table { border-collapse: collapse; }
.nlp td, .nlp th { border: 1px solid #555; padding: 2px 2px; text-align: center; vertical-align: middle; }
.nlp .au { color: var(--au); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; }
.nlp .au small, .nlp .big small { font-family: system-ui, sans-serif; font-weight: 500; font-size: .78em; color: #555; }
.nlp .big { font-size: 1.2em; }
.nlp .l { font-size: .74em; font-weight: 700; color: #333; background: #f3f3f3; white-space: nowrap; text-align: left; }
.nlp .u { font-size: .74em; color: #555; border-left: 0; text-align: left; }
.nlp .g { background: var(--g); border-color: var(--gl); min-width: 34px; }
.nlp td.g { height: 1.5em; }
.nlp .bx { border: 2px solid #000; }
.nlp .mk { background-image: linear-gradient(transparent 38%, var(--mk) 38%, var(--mk) 92%, transparent 92%); background-size: 80% 100%; background-repeat: no-repeat; background-position: center; }
.nlp .ttl { font-weight: 900; font-size: 1.25em; letter-spacing: .04em; text-align: left; white-space: nowrap; }
.nlp .ttl2 { font-weight: 900; text-align: left; background: #f3f3f3; }

/* 欄：計算の値（cv。押すと直せる、直すとオレンジ）・書く欄（wr、薄い黄色） */
.nlp .nl-i { box-sizing: border-box; max-width: 100%; padding: 1px 3px; border: 0; border-radius: 2px; background: transparent; color: var(--ink);
  font: 700 11.5px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align: center; outline: none; }
.nlp .nl-i::placeholder { color: var(--au); opacity: 1; font-weight: 700; }
.nlp .nl-i.wr { background: var(--in); border-bottom: 1px dashed var(--inl); border-radius: 0; }
.nlp .nl-i.wr::placeholder { opacity: .7; }
.nlp .nl-i.cv:hover { box-shadow: inset 0 -1px 0 var(--au); }
.nlp .nl-i.cv.ov { background: #ffdcb8; color: #a33f00; }
.nlp .nl-i:focus { box-shadow: inset 0 0 0 2px var(--au); background: #fff; }
.nlp textarea.nl-i { width: 100%; text-align: left; resize: vertical; font-weight: 500; font-size: 11px; line-height: 1.35; }
.nlp td.in { padding: 1px 2px; white-space: nowrap; }
.nlp td.alt { white-space: nowrap; }
.nlp td.alt .nl-i { width: 4.2em; }
.nlp .nl-i.cv { width: 3.1em; }
.nlp td.z .nl-i.cv { width: 2.6em; }
.nlp .nl-i[data-k="w"] { width: 4.9em; }
.nlp .nl-i[data-k="var"], .nlp .nl-i[data-k="dev"] { width: 2.6em; }
.nlp .ar { margin: 0 2px 0 1px; font-weight: 900; }
.nlp .neg { color: #c00; }
.nlp td.mk, .nlp td.mk-c { background-image: linear-gradient(transparent 30%, var(--mk) 30%, var(--mk) 85%, transparent 85%); background-size: 76% 1.5em; background-repeat: no-repeat; background-position: center; }
.nlp b.mk { background: linear-gradient(transparent 45%, var(--mk) 45%); padding: 0 2px; }

/* 上の帯 */
.nlp-hd { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.nlp-hd .kv td, .nlp-hd .kv th { height: 1.7em; }
.nlp-hd .kv th { font-size: .82em; text-align: left; background: #f3f3f3; white-space: nowrap; }
.nlp-hd .kv tr.sep > * { border-top: 2px solid #000; }
.nlp-hd .k1 { min-width: 200px; }
.nlp-hd .k1 .rt { font-size: 1.05em; }
.nlp-hd .k4 td.in .nl-i { width: 4em; }

/* 本体の表 */
.nlt { width: max-content; min-width: 100%; }
.nlt thead th { background: #f3f3f3; font-size: .78em; font-weight: 800; white-space: nowrap; padding: 3px 3px; }
.nlt thead th.g { background: var(--g); }
.nlt thead th.sm { font-size: .68em; }
.nlt thead th.fu { background: #fff3e0; }
.nlt thead th small { font-weight: 500; font-size: .85em; }
.nlt td { font-size: 1.05em; }
.nlt td.wp { text-align: left; min-width: 64px; white-space: nowrap; }
.nlt td.wp b { font-size: 1.02em; }
.nlt td.wp small { display: block; font-size: .72em; color: #555; font-weight: 500; max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
.nlt tr.ce td.wp b { color: #6a2fa0; }
.nlt tr.t td { border-top: 1.5px solid #000; }
.nlt tr.t td.cu, .nlt tr.b td.z { border-top-style: dotted; }
.nlt td.z, .nlt td.cu { min-width: 30px; height: 1.35em; }
.nlt tr.t td.cu, .nlt tr.b td.z { background: #fafafa; }
.nlt tr.b td.cu { font-size: .9em; text-align: right; }
.nlt td.rm { text-align: left; min-width: 150px; padding: 1px 2px; }
.nlt td.rm .nl-i { width: 100%; text-align: left; font-family: system-ui, sans-serif; font-weight: 500; font-size: 11px; }
.nlt td.rm .nl-i::placeholder { font-weight: 500; }

/* IFR：地点の欄の上に ROUTE（航空路） */
.nlt-ifr td.wp .rte { margin-bottom: 2px; }
.nlt-ifr td.wp .rte .nl-i { width: 6.5em; font-size: 11px; }
.nlt td.rm textarea.nl-i::placeholder { color: var(--au); font-weight: 500; }
.nlp-note { margin: 6px 0 0; font-size: 10px; color: #555; width: 0; min-width: 100%; }

/* 風を読むための図 */
.nl-wind { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 8px; }
.nl-wind figure { margin: 0; }
.nl-wind img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.nl-wind figcaption { font-size: .78rem; margin-top: 4px; }
.nl-wind figcaption span { color: var(--muted); font-size: .7rem; }

@media (max-width: 760px) {
  .nl-row2 { grid-template-columns: 1fr; }
  .nl-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #nl-map .r-view { aspect-ratio: 1 / 1; max-height: 52vh; }
  .nl-gobar { justify-content: stretch; }
  .nl-left { text-align: left; }
  #nl-go { flex: 1 1 100%; }
  .nl-big .nl-gobar { flex-wrap: nowrap; }
  .nl-big #nl-go { flex: none; padding: 9px 14px; font-size: .92rem; }
  .nl-big .nl-left { font-size: .8rem; }
  .nl-big .nl-drawer { left: 0; right: 0; padding: 0 10px; }
  /* 地図を大きくした画面の経路の欄：出発と到着を横に並べ、経由地をその下に */
  .nl-big .tq-grid.ai-grid { grid-template-columns: 1fr 1fr !important; }
  .nl-big .tq-grid.ai-grid > :nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; }
  .nl-big .tq-grid.ai-grid > :nth-child(5) { grid-column: 2 !important; grid-row: 1 !important; }
  .nl-big .tq-grid.ai-grid > :nth-child(3) { grid-column: 1 / -1 !important; grid-row: 2 !important; }
}

/* 印刷：画面の用紙だけを出す */
@media print {
  body.nl-printing > *:not(main), body.nl-printing main > *:not(#view-nav), body.nl-printing #view-nav > *:not(#nl-res),
  body.nl-printing #nl-res > *:not(.nl-logcard), body.nl-printing .nl-logcard > *:not(.nl-scroll) { display: none !important; }
  html:has(body.nl-printing), body.nl-printing { background: #fff !important; }
  body.nl-printing main { max-width: none; padding: 0; margin: 0; }
  body.nl-printing #view-nav, body.nl-printing #nl-res { display: block !important; }
  body.nl-printing .nl-logcard { border: 0; box-shadow: none; padding: 0 !important; margin: 0; background: #fff; }
  body.nl-printing .nl-scroll { overflow: visible; }
  body.nl-printing .nlp { width: 100%; padding: 0; font-size: 8.5pt; }
  body.nl-printing .nlp .nlp-note { font-size: 6.5pt; margin-top: 2pt; }
  body.nl-A5 .nlp { font-size: 6.4pt; }
  body.nl-printing .nlp .nl-i { background: transparent !important; border-bottom-color: transparent; color: #000; font-size: inherit; box-shadow: none; }
  body.nl-printing .nlt td.rm { min-width: 0; }
  body.nl-printing .nlp .nl-i::placeholder { color: var(--au); opacity: 1; }
  body.nl-printing .nlp textarea.nl-i { resize: none; }
}