/* Chapter 9: zeiltrim. Two drawings side by side in the stage: the sails from behind and
   the sections from above (or per height in the wind). Stacked on narrow screens. */
.page-head .chain { margin-top: 10px; }
/* Boat choice: one boat for the whole page. */
.boat-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; font-weight: 800; }
.boat-pick span { color: var(--muted); margin-right: 4px; }
.boat-pick a { padding: 6px 14px; border-radius: 999px; border: 2px solid var(--accent); color: var(--accent); text-decoration: none; background: #fff; }
.boat-pick a:hover { background: #eef4ff; }
.boat-pick a[aria-current] { background: var(--accent); color: #fff; }

.zv { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.zv-side { display: grid; gap: 8px; }
.zv-pick .seg { justify-content: center; }
/* Phones: one of the two drawings at a time, with a switch, so the drawing fits in half the
   screen and can stay at the top while you move the sliders. */
.zv-switch { display: none; }
@media (max-width: 860px) {
  .zv { grid-template-columns: minmax(0, 1fr); }
  .zv-switch { display: block; grid-column: 1 / -1; }
  .zv-switch .seg { justify-content: center; }
  .zv:not(.show-side) .zv-side { display: none; }
  .zv.show-side .zv-3d { display: none; }
  .zv svg { max-height: 40svh; }
}

.zv .lbl { font-size: 16px; }
.zv .lbl.small { font-size: 13px; }
.zv .lbl.big { font-size: 20px; }
@media (max-width: 700px) {
  .zv .lbl { font-size: 20px; }
  .zv .lbl.small { font-size: 17px; }
  .zv .lbl.big { font-size: 24px; }
}

/* Rope sliders with chips that say what the rope changes. */
.ropes { display: grid; gap: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; font-weight: 700; }
.chip { font-size: 0.75rem; padding: 1px 8px; border-radius: 999px; background: #eef1f7; color: var(--muted); border: 1px solid #dde3ee; transition: background 0.2s, color 0.2s; }
.chips.on .chip { background: var(--accent); border-color: var(--accent); color: #fff; }

.meter { margin: 0; }

.zv-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; font-variant-numeric: tabular-nums; background: #f2f8fc; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.zv-table caption { text-align: left; font-weight: 800; padding: 0 0 4px; }
.zv-table th, .zv-table td { padding: 4px 8px; text-align: right; }
.zv-table th:first-child { text-align: left; }
.zv-table thead th { color: var(--muted); font-size: 0.8rem; }
.zv-table tr.twist th, .zv-table tr.twist td { border-top: 1px solid var(--border); color: var(--accent); }
.zv-table tr.twist td { text-align: left; }

/* 9.4: answer buttons. */
.ask { margin: 4px 0 0; font-weight: 800; }
.answers { display: grid; gap: 6px; }
.answers .btn { text-align: left; }
.answers .btn.right { background: var(--vaart); border-color: var(--vaart); color: #fff; opacity: 1; }
.answers .btn.wrong { background: var(--kracht); border-color: var(--kracht); color: #fff; opacity: 1; }
.score { margin: 0; color: var(--muted); font-weight: 700; }

/* Trimtabel in the explanation of 9.3. */
.trimtabel { border-collapse: collapse; margin-top: 10px; font-size: 0.9rem; }
.trimtabel caption { text-align: left; font-weight: 800; color: var(--fg); padding-bottom: 4px; }
.trimtabel th, .trimtabel td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; vertical-align: top; }
.trimtabel thead th { background: #f2f8fc; }

/* 9.5: the race map above the sails. On phones the drawings are smaller so both fit at the
   top of the screen, and the text on the map is larger. */
.race-map { margin-bottom: 8px; }
/* Laptops: the sails smaller, so map and sails together stay in view next to the ropes. */
@media (min-width: 861px) {
  #v9-5 .zv { grid-template-columns: auto auto; justify-content: center; }
  #v9-5 .zv svg { width: auto; max-width: 100%; height: max(220px, 100vh - 470px); max-height: 420px; }
}
@media (max-width: 860px) {
  #v9-5 .zv svg { max-height: 30svh; }
  .stage .race-map .lbl { font-size: 24px; }
  .stage .race-map .lbl.big { font-size: 28px; }
  .stage .race-map .leg { display: none; }
}