/* set-sail · voyage-detailed.css
   The parts a DETAILED voyage needs on top of style.css: numbered sub-steps, the
   "did it work?" check, an interface word, a folded leg, a glossary row. Every class is
   prefixed dv- so it cannot collide with the fleet stylesheet.

   Load it after style.css, together with voyage-detailed.js. It exists because there are two
   detailed voyages now (the newcomer and the author) and a second inline copy of these rules
   is exactly the duplication the kit's own rules forbid. A third detailed voyage links this
   file too; it does not paste it. */

/* ── numbered sub-steps inside one leg (1.1, 1.2, …) ───────────────────────────────── */
.dv-steps { margin: 1.1rem 0 1.3rem; display: grid; gap: .85rem; }
.dv-step { display: grid; grid-template-columns: 3.1rem 1fr; gap: .7rem; align-items: start; }
.dv-step > .dv-lbl { font-variant-numeric: tabular-nums; font-weight: 700; opacity: .72; font-size: .9rem; padding-top: .15rem; letter-spacing: .02em; }
.dv-step p { margin: 0 0 .55rem; }
.dv-step p:last-child { margin-bottom: 0; }

/* ── the "did it work?" check that closes a leg ─────────────────────────────────────── */
.dv-check { border-left: 3px solid currentColor; padding: .15rem 0 .15rem .9rem; margin: 1.1rem 0 1.3rem; opacity: .92; }
.dv-check p { margin: 0 0 .5rem; }
.dv-check p:last-child { margin-bottom: 0; }

/* ── a word the reader will see on screen, quoted from the interface ───────────────── */
.dv-ui { font-weight: 600; white-space: nowrap; border-bottom: 1px dotted currentColor; }

/* ── question-and-answer blocks ─────────────────────────────────────────────────────── */
.dv-faq details { border-bottom: 1px solid currentColor; padding: .55rem 0; opacity: .95; }
.dv-faq details[open] { opacity: 1; }
.dv-faq summary { cursor: pointer; font-weight: 600; list-style: none; }
.dv-faq summary::-webkit-details-marker { display: none; }
.dv-faq summary::before { content: "+ "; opacity: .6; }
.dv-faq details[open] summary::before { content: "– "; }
.dv-faq details p { margin: .6rem 0 0; }

/* ── the leg number belongs to the heading, not to a line of small print above it ──── */
.chapter-head > h2 > .dv-no {
  display: inline-grid; place-items: center; margin-right: .6rem;
  min-width: 1.9em; height: 1.9em; padding: 0 .35em; border-radius: 999px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  font-size: .62em; font-variant-numeric: tabular-nums; vertical-align: .18em;
}

/* ── the middle of a leg folds; its description and its closing line stay ──────────── */
.dv-body { margin: 1rem 0; }
.dv-body > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; font-size: .92rem; opacity: .8;
  border: 1px solid currentColor; border-radius: 6px; padding: .3rem .7rem;
}
.dv-body > summary::-webkit-details-marker { display: none; }
.dv-body > summary::after { content: "+"; font-weight: 700; opacity: .7; }
.dv-body[open] > summary::after { content: "–"; }
.dv-body > summary:hover { opacity: 1; }
.dv-body[open] > summary { margin-bottom: .4rem; }

/* the closing line carries the motivation, so it reads a shade stronger than body text */
.dv-why { font-weight: 500; opacity: .95; }

/* ── the one control that opens or shuts every leg ──────────────────────────────────── */
.dv-openall { font: inherit; font-size: .85rem; color: inherit; background: none; cursor: pointer;
  border: 1px solid currentColor; border-radius: 6px; padding: .3rem .7rem; opacity: .8; }
.dv-openall:hover { opacity: 1; }
.dv-openall .dv-when-open { display: none; }
.dv-openall[data-all-open="true"] .dv-when-shut { display: none; }
.dv-openall[data-all-open="true"] .dv-when-open { display: inline; }

/* ── glossary rows ──────────────────────────────────────────────────────────────────── */
.dv-gloss div { padding: .45rem 0; border-bottom: 1px solid currentColor; opacity: .95; }

@media (max-width: 520px) {
  .dv-step { grid-template-columns: 2.5rem 1fr; gap: .5rem; }
}