/* Navigation training (templates/navigation). Works from phone width up. */
.nav-page { max-width: 980px; margin: 0 auto; }
.nav-page h1 { font-size: 1.8rem; margin-bottom: .25rem; }
.nav-sub { color: #5b6470; margin-bottom: 1.25rem; }
.nav-card { background: #fff; border: 1px solid #e3e6ea; border-radius: 12px; padding: 1.1rem 1.2rem; margin-bottom: 1rem; }
.nav-status { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.nav-status .nav-badge { font-weight: 600; padding: .3rem .7rem; border-radius: 999px; background: #eef2f6; color: #334; }
.nav-status .nav-badge.is-done { background: #e3f4e8; color: #1e6b34; }
.nav-status .nav-badge.is-needed { background: #fff3dc; color: #7a4d00; }

.nav-lessons { list-style: none; padding: 0; margin: 0; }
.nav-lessons li { display: flex; align-items: center; gap: .9rem; padding: .8rem 0; border-top: 1px solid #eef0f2; }
.nav-lessons li:first-child { border-top: 0; }
.nav-num { flex: 0 0 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: #eef2f6; color: #334; }
.nav-lessons li.is-done .nav-num { background: #2ea043; color: #fff; }
.nav-lessons li.is-locked { opacity: .55; }
.nav-lesson-text { flex: 1 1 auto; min-width: 0; }
.nav-lesson-text strong { display: block; }
.nav-lesson-text small { color: #5b6470; }

.nav-text h2 { font-size: 1.25rem; margin-top: 1.4rem; }
.nav-text h2:first-child { margin-top: 0; }
.nav-text p, .nav-text li { line-height: 1.55; }
.nav-steps { counter-reset: step; list-style: none; padding-left: 0; }
.nav-steps li { counter-increment: step; position: relative; padding-left: 2.2rem; margin-bottom: .55rem; }
.nav-steps li::before { content: counter(step); position: absolute; left: 0; top: .05rem; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: #002855; color: #fff; font-size: .85rem; font-weight: 700; display: grid; place-items: center; }
.nav-tip { background: #f2f7fd; border-left: 4px solid #5b8fd1; padding: .6rem .9rem; border-radius: 6px; margin: .8rem 0; }
.nav-figure-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.nav-figure-row > svg, .nav-figure-row > div { flex: 1 1 220px; max-width: 360px; }

.nav-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.nav-legend-item { display: flex; align-items: center; gap: .55rem; font-size: .92rem; }
.nav-legend-sym { width: 44px; height: 44px; flex: 0 0 44px; }
.nav-legend-sym svg, .nav-legend-box svg { width: 100%; height: 100%; border: 1px solid #e3e6ea; border-radius: 6px; }
.nav-legend-box { width: 140px; height: 140px; margin: .5rem 0 1rem; }
.nav-diagram-box { max-width: 280px; margin: .5rem 0 1rem; }
.nav-compass-diagram { width: 100%; height: auto; }
.nav-compass-explore { display: flex; flex-wrap: wrap; gap: .35rem; }
.nav-highlight { filter: drop-shadow(0 0 4px #f5c211) drop-shadow(0 0 2px #f5c211); stroke: #f5c211 !important; }

.nav-practice { border: 2px solid #dfe7f1; }
.nav-prompt { font-size: 1.08rem; font-weight: 500; }
.nav-map-box { position: relative; margin: .5rem 0 .8rem; }
.nav-map-box.is-small { max-width: 420px; }
.nav-map-wrap { position: relative; overflow: hidden; border: 1px solid #d0d6dd; border-radius: 8px; background: #fff; }
.nav-map-rot { transition: transform .15s ease; transform-origin: 50% 50%; }
.nav-map { display: block; width: 100%; height: auto; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.nav-map text { font-family: 'Switzer', Arial, sans-serif; pointer-events: none; }
.nav-compass-tool [data-grab] { cursor: grab; }
.nav-zoom { position: absolute; right: 8px; bottom: 8px;  /* the north arrow is in the top right corner */ display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.nav-zoom button { width: 40px; height: 40px; border-radius: 8px; border: 1px solid #c6ccd3; background: rgba(255,255,255,.95); font-size: 1.25rem; line-height: 1; }
.nav-fixed-compass { position: absolute; left: 8px; bottom: 8px; width: 92px; text-align: center; z-index: 2; pointer-events: none; }
.nav-fixed-compass svg { width: 80px; height: 80px; }
.nav-fixed-compass small { display: block; font-size: .72rem; background: rgba(255,255,255,.85); border-radius: 4px; }

.nav-input { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .6rem 0; }
.nav-input .form-control { width: 9rem; font-size: 1.1rem; }
.nav-unit { color: #5b6470; }
.nav-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.nav-choices .btn { text-align: left; white-space: normal; min-height: 2.8rem; }
.nav-compass-controls { background: #f7f9fb; border: 1px solid #e3e6ea; border-radius: 8px; padding: .7rem .8rem; margin-bottom: .6rem; }
.nav-ctl { margin-bottom: .5rem; }
.nav-ctl label { font-size: .85rem; color: #5b6470; display: block; }
.nav-ctl-row { display: flex; align-items: center; gap: .35rem; }
.nav-ctl-row input[type=range] { flex: 1 1 auto; min-width: 80px; }
.nav-ctl-row button { min-width: 2.6rem; height: 2.4rem; border: 1px solid #c6ccd3; background: #fff; border-radius: 6px; }
.nav-ctl-read { font-size: 1rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.nav-ctl-read strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.nav-hint { font-size: .82rem; color: #5b6470; margin: .4rem 0 0; }

.nav-feedback:empty { display: none; }
.nav-result { padding: .7rem .9rem; border-radius: 8px; margin: .6rem 0; }
.nav-result.is-right { background: #e3f4e8; color: #1e4d2b; }
.nav-result.is-wrong { background: #fdecea; color: #6b1c15; }
.nav-streak { display: flex; align-items: center; gap: .35rem; margin: .4rem 0 .8rem; color: #5b6470; font-size: .9rem; }
.nav-dot { width: 14px; height: 14px; border-radius: 50%; background: #dfe3e8; }
.nav-dot.is-on { background: #2ea043; }
.nav-streak span:last-child { margin-left: .4rem; }
.nav-done { background: #e3f4e8; border-radius: 8px; padding: .7rem .9rem; margin-bottom: .7rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.nav-done i { color: #2ea043; }

.nav-challenge-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.nav-challenge-map { position: sticky; top: .5rem; }
.nav-leg { border-top: 1px solid #eef0f2; padding-top: .8rem; margin-top: .8rem; }
.nav-leg h3 { font-size: 1.05rem; display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.nav-q { margin-bottom: .6rem; }
.nav-q label, .nav-q-label { font-size: .92rem; display: block; margin-bottom: .15rem; }
.nav-q .input-group { max-width: 15rem; }
.nav-q-choices { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.nav-review td, .nav-review th { font-size: .92rem; vertical-align: top; }
.nav-review .is-right { color: #1e6b34; }
.nav-review .is-wrong { color: #a42015; }

.nav-record { max-width: 640px; margin: 2rem auto; text-align: center; border: 3px double #002855; border-radius: 14px; padding: 2.2rem 1.5rem; background: #fff; }
.nav-record h1 { font-size: 2rem; color: #002855; }
.nav-record .nav-record-name { font-size: 1.5rem; font-weight: 600; margin: 1rem 0 .3rem; }
.nav-record .nav-record-note { font-size: .85rem; color: #5b6470; margin-top: 1.4rem; }

@media (max-width: 820px) {
  .nav-challenge-layout { grid-template-columns: 1fr; }
  .nav-challenge-map { position: static; }
}
@media (max-width: 520px) {
  .nav-card { padding: .9rem .85rem; }
  .nav-page h1 { font-size: 1.45rem; }
  .nav-choices { grid-template-columns: 1fr; }
  .nav-input .form-control { width: 100%; }
  .nav-input { flex-direction: column; align-items: stretch; }
  .nav-lessons li { flex-wrap: wrap; }
  .nav-lessons li .btn { width: 100%; }
  .nav-zoom { flex-direction: row; right: 6px; bottom: 6px; }  /* a short row covers less of a small map */
  .nav-zoom button { width: 36px; height: 36px; }
}
@media print {
  .navbar, footer, .nav-noprint { display: none !important; }
  .nav-record { border-color: #000; }
}

/* Navigation Capstone: plan the hike (templates/navigation/capstone_*.html). Map on top on a phone; map beside the
   step panel on a wide screen. */
.cap-page { max-width: 1320px; margin: 0 auto; }
.cap-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.cap-steps { display: flex; gap: .35rem; overflow-x: auto; margin: .6rem 0 .8rem; padding-bottom: .2rem; }
.cap-steps button { flex: 0 0 auto; border: 1px solid #c6ccd3; background: #fff; border-radius: 999px; padding: .3rem .8rem; font-size: .9rem; }
.cap-steps button span { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: #eef2f6; margin-right: .35rem; font-weight: 700; font-size: .8rem; }
.cap-steps button.active { background: #002855; color: #fff; border-color: #002855; }
.cap-steps button.active span { background: #fff; color: #002855; }
.cap-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: 1rem; align-items: start; }
.cap-map-col { position: sticky; top: .5rem; }
.cap-map .nav-map { cursor: pointer; }
.cap-toolbar { display: flex; gap: .4rem; justify-content: flex-end; margin-bottom: .3rem; }
.cap-toolbar .active { background: #002855; color: #fff; }
.cap-note { min-height: 1.4rem; font-size: .92rem; color: #334; margin: .2rem 0 .4rem; }
.cap-note.is-warn { color: #8a4b00; }
.cap-note.is-hint { color: #0c5460; background: #e8f4f8; border-radius: 6px; padding: .4rem .6rem; }
.cap-panel { max-height: calc(100vh - 2rem); overflow: auto; }
.cap-req { list-style: none; padding: 0; }
.cap-req li { display: flex; gap: .5rem; align-items: center; margin-bottom: .35rem; }
.cap-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .3rem .8rem; font-size: .82rem; color: #445; margin-top: .6rem; }
.cap-legend span { display: flex; align-items: center; gap: .4rem; }
.cap-sym { display: inline-block; width: 26px; height: 0; border-top: 2px solid #6b3f1f; }
.cap-sym-path { border-top-style: dashed; border-top-width: 1.5px; }
.cap-sym-rough { border-top-style: dotted; border-top-width: 2px; }
.cap-dot { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; font-style: normal; font-size: .7rem; font-weight: 700; flex: 0 0 18px; }
.cap-dot-seasonal { background: #fff; color: #1a5fb4; border: 1.5px dashed #1a5fb4; }
.cap-dot-food { background: #e07b00; border-radius: 4px; }
.cap-x { color: #b3261e; font-style: normal; font-weight: 700; width: 18px; text-align: center; }
.cap-ring { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid #c2187a; flex: 0 0 16px; }
.cap-row { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: .3rem 0 .6rem; }
.cap-row .form-select { flex: 1 1 200px; min-width: 0; }
.cap-min { width: 5rem; }
.cap-label { font-weight: 600; font-size: .9rem; margin-top: .4rem; }
.cap-checks { list-style: none; padding: 0; margin: .5rem 0; }
.cap-checks li { padding: .15rem 0; color: #5b6470; }
.cap-checks li.is-ok { color: #1e6b34; }
.cap-checks li.is-bad { color: #a42015; }
.cap-points ol { margin: .3rem 0 0; padding-left: 1.4rem; font-size: .9rem; }
.cap-leg { border: 1px solid #e3e6ea; border-radius: 8px; padding: .6rem .7rem; margin-bottom: .6rem; }
.cap-leg-head { font-size: .95rem; margin-bottom: .4rem; }
.cap-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
.cap-field span { display: block; font-size: .78rem; color: #5b6470; }
.cap-field .form-control { padding: .3rem .45rem; font-variant-numeric: tabular-nums; }
.cap-field-wide { grid-column: 1 / -1; }
.cap-totals { font-size: .9rem; color: #334; margin: .3rem 0; }
.cap-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-bottom: .6rem; }
.cap-summary div { background: #f7f9fb; border-radius: 8px; padding: .45rem .6rem; }
.cap-summary span { display: block; font-size: .75rem; color: #5b6470; }
.cap-summary strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.cap-timeline td, .cap-timeline th { font-size: .88rem; }
.cap-event .cap-choices { display: grid; gap: .35rem; margin: .4rem 0; }
.cap-choice { display: flex; gap: .5rem; align-items: flex-start; border: 1px solid #e3e6ea; border-radius: 8px; padding: .45rem .6rem; cursor: pointer; }
.cap-verdict.is-pass { border-left: 5px solid #2ea043; }
.cap-verdict.is-fail { border-left: 5px solid #c65b00; }
.cap-cats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; margin: .4rem 0 .8rem; }
.cap-cats span { display: block; font-size: .8rem; color: #5b6470; }
.cap-cats strong { font-size: 1.15rem; }
.cap-bar { height: 6px; background: #eef0f2; border-radius: 3px; margin-top: .2rem; }
.cap-bar i { display: block; height: 100%; background: #002855; border-radius: 3px; }
.cap-card-review td { white-space: normal; }
.nav-capstone-card { border: 2px solid #dfe7f1; }

@media (max-width: 900px) {
  .cap-layout { grid-template-columns: 1fr; }
  .cap-map-col { position: static; }
  .cap-panel { max-height: none; }
  .cap-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .cap-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cap-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cap-head h1 { font-size: 1.3rem; }
}
.cap-next { margin-top: .9rem; }