/* ============================================================
   North Aero - Chart quiz styles (js/chart-quiz.js)
   Shared by the sectional chart, airport diagram and prog chart
   quizzes. Uses the design tokens in css/style.css.
   ============================================================ */
/* The question screen uses the full width on desktop (picture beside
   the question). The other screens stay narrow. */
.cq-wrap { max-width: var(--max-w); margin: 0 auto; }
#cq-app { max-width: var(--max-w-narrow); margin: 0 auto; }
#cq-app.cq-view-question { max-width: none; }
.cq-card p, .cq-card h2, .cq-card h3 { max-width: none; }

.cq-card {
  background: var(--na-surface); border: 1px solid var(--na-border);
  border-radius: var(--radius-md); padding: var(--space-lg);
}
.cq-card:focus { outline: none; }
.cq-card + .cq-card, .cq-extra > * + * { margin-top: var(--space-lg); }
.cq-extra { margin-top: var(--space-lg); }

.cq-lead { font-size: 18px; font-weight: 600; margin-bottom: var(--space-sm); }
.cq-status { color: var(--na-fg-2); margin-bottom: var(--space-lg); }
.cq-notice {
  background: var(--runway-100); border-left: 4px solid var(--runway-500);
  padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-md);
  border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: 15px;
}
.cq-h { font-size: 18px; margin: var(--space-xl) 0 var(--space-md); }
.cq-fine { font-size: 13px; color: var(--na-fg-muted); margin-top: var(--space-lg); }

/* section list on the start screen */
.cq-sections { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-sm); }
.cq-sec {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: var(--space-sm);
  width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--na-fg);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--parchment-deep); border-radius: var(--radius-md);
  background: var(--parchment-light); transition: border-color .15s, background .15s;
}
.cq-sec:hover { border-color: var(--runway-400); }
.cq-sec__key {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 14px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--runway-700);
}
.cq-sec__title { font-weight: 600; }
.cq-sec__count { font-size: 14px; color: var(--na-fg-2); white-space: nowrap; }

/* question screen */
.cq-meta {
  display: flex; flex-wrap: wrap; gap: var(--space-sm);
  justify-content: space-between; align-items: baseline;
  margin-bottom: var(--space-sm); font-size: 14px; color: var(--na-fg-2);
}
.cq-bar { height: 8px; background: var(--hangar-100); border-radius: 999px; overflow: hidden; }
.cq-meta + .cq-bar { margin-bottom: var(--space-md); }
.cq-bar__fill { height: 100%; background: var(--beacon-500); border-radius: 999px; transition: width .2s; }
.cq-bar__fill--low { background: var(--runway-500); }

.cq-newsec {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 15px;
  letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--hangar-800);
  margin: calc(var(--space-lg) * -1) calc(var(--space-lg) * -1) var(--space-lg);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.cq-tag {
  display: inline-block; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--runway-700); background: var(--runway-100);
  padding: 2px 10px; border-radius: 999px; margin-bottom: var(--space-md);
}
.cq-brief {
  margin-bottom: var(--space-md); font-size: 15px;
  border: 1px solid var(--parchment-deep); border-radius: var(--radius-md);
  background: var(--parchment-light); padding: var(--space-sm) var(--space-md);
}
.cq-brief summary { cursor: pointer; font-weight: 600; }
.cq-brief p { margin: var(--space-sm) 0 0; }

.cq-fig { margin: 0 0 var(--space-lg); }
@media (min-width: 960px) {
  .cq-body {
    display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--space-xl); align-items: start;
  }
  .cq-body .cq-fig { margin-bottom: 0; }
}
.cq-fig__link { display: block; border: 1px solid var(--hangar-300); border-radius: var(--radius-md); overflow: hidden; background: var(--hangar-50); }
.cq-fig img { display: block; width: 100%; height: auto; }
.cq-fig figcaption { font-size: 13px; color: var(--na-fg-2); margin-top: var(--space-xs); line-height: 1.45; }
.cq-zoom { white-space: nowrap; margin-left: var(--space-xs); }

.cq-q { font-weight: 600; font-size: 17px; margin-bottom: var(--space-md); }
.cq-opts { display: grid; gap: var(--space-sm); }
.cq-opt {
  display: flex; align-items: flex-start; gap: var(--space-md);
  width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--na-fg);
  padding: var(--space-md); border: 1px solid var(--parchment-deep); border-radius: var(--radius-md);
  background: var(--parchment-light); transition: border-color .15s, background .15s;
}
.cq-opt:hover:not(:disabled) { border-color: var(--runway-400); }
.cq-opt:focus-visible { outline: 2px solid var(--runway-500); outline-offset: 2px; }
.cq-opt:disabled { cursor: default; }
.cq-opt__key {
  flex: 0 0 28px; height: 28px; line-height: 28px; text-align: center;
  border-radius: 50%; font-weight: 700; font-size: 14px;
  background: var(--hangar-100); color: var(--hangar-700);
}
.cq-opt__txt { padding-top: 2px; }
.cq-opt--right { border-color: var(--beacon-500); background: var(--beacon-100); }
.cq-opt--right .cq-opt__key { background: var(--beacon-500); color: #fff; }
.cq-opt--wrong { border-color: var(--warning-500); background: #F8E3E0; }
.cq-opt--wrong .cq-opt__key { background: var(--warning-500); color: #fff; }

.cq-fb:not(:empty) {
  margin-top: var(--space-lg); padding: var(--space-md);
  border-left: 4px solid var(--runway-500);
  background: var(--parchment-light); border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 15px;
}
.cq-verdict { font-weight: 700; margin-bottom: var(--space-xs); }
.cq-v-right { color: var(--beacon-700); }
.cq-v-wrong { color: var(--warning-500); }
.cq-why { margin: 0; }
.cq-video { margin: var(--space-sm) 0 0; font-weight: 600; }

.cq-nav { display: flex; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-lg); }
.cq-menu { margin-top: var(--space-md); font-size: 14px; }
.cq-menu a { color: var(--na-fg-muted); }

/* trip intro */
.cq-trip { border-top: 4px solid var(--runway-500); }
.cq-trip__title { margin-bottom: var(--space-md); }
.cq-trip__intro { font-size: 17px; margin-bottom: var(--space-md); }

/* results */
.cq-results { text-align: left; }
.cq-big { font-size: 44px; font-weight: 700; line-height: 1.1; margin-bottom: var(--space-xs); }
.cq-results > .btn-group { margin-top: var(--space-lg); }
.cq-secbar { margin-bottom: var(--space-md); }
.cq-secbar__head {
  display: flex; justify-content: space-between; gap: var(--space-sm);
  font-size: 14px; font-weight: 600; margin-bottom: 4px;
}
.cq-miss { border-top: 1px solid var(--na-border); padding: var(--space-md) 0; font-size: 15px; }
.cq-miss p { margin: 0 0 var(--space-xs); }
.cq-miss__q { font-weight: 600; }
.cq-miss__you { color: var(--warning-500); }
.cq-miss__ans { color: var(--beacon-700); font-weight: 600; }
.cq-miss__why { color: var(--na-fg-2); }

/* dark call-to-action card for the results template */
.cq-course { background: var(--hangar-900); border-color: var(--hangar-700); }
.cq-course h3 { color: #fff; }
.cq-course p { color: var(--hangar-300); }
.cq-course .eyebrow { color: var(--runway-300); }

@media (max-width: 640px) {
  .cq-card { padding: var(--space-md); }
  .cq-newsec {
    margin: calc(var(--space-md) * -1) calc(var(--space-md) * -1) var(--space-md);
    padding: var(--space-sm) var(--space-md);
  }
  .cq-sec { grid-template-columns: 44px 1fr; }
  .cq-sec__count { grid-column: 2; }
  .cq-meta { font-size: 13px; }
  .cq-big { font-size: 36px; }
  .cq-results .btn-group, .cq-course .btn-group { flex-direction: column; align-items: stretch; }
}