/* The Guides family's own rules (2026-10-30), linked after web/ship.css by
   the index and every guide. ship.css is inlined into every ship and port
   page, which never draw any of this, so it stays out of ship.css, as the
   Trends page's rules are web/trends.css. Each rule is under .guide-page
   or draws the rail, so none of it can reach another page
   (test/design-system.test.js reads this file as it reads the others and
   fails a rule that redraws a shared component). */

/* A guide's own words (its title takes About's size). */
.guide-page main p { margin: 0 0 var(--space-3); max-width: 62ch; }
.guide-page main p:last-child { margin-bottom: 0; }
@media (min-width: 761px) { .guide-page .col > section ~ section { margin-top: var(--space-6); } }

/* Numbered steps (components/RuledList): a ruled row each, the number in a
   small Harbour circle, the step's name in 600 over what to do. */
.guide-page .steps { list-style: none; counter-reset: step; margin: var(--space-3) 0 0; padding: 0; }
.guide-page .steps li { counter-increment: step; position: relative; padding: var(--space-4) 0 var(--space-4) 44px; border-top: 1px solid var(--line); max-width: 62ch; }
.guide-page .steps li:first-child { border-top: 0; padding-top: 0; }
.guide-page .steps li:last-child { padding-bottom: 0; }
.guide-page .steps li::before { content: counter(step); position: absolute; left: 0; top: var(--space-4); width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-round); background: var(--accent); color: var(--on-accent); font: var(--type-page-small); font-weight: 600; }
.guide-page .steps li:first-child::before { top: 0; }
.guide-page .steps .step { display: block; margin-bottom: var(--space-1); color: var(--text); font-weight: 600; }

/* A name over its sentence, ruled (components/RuledList, points). */
.guide-page .points { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.guide-page .points li { padding: var(--space-3) 0; border-top: 1px solid var(--line); max-width: 62ch; }
.guide-page .points li:first-child { border-top: 0; padding-top: 0; }
.guide-page .points li:last-child { padding-bottom: 0; }
.guide-page .point { display: block; color: var(--text); font-weight: 600; }
.guide-page .points + p { margin-top: var(--space-4); }
.guide-page .name { text-wrap: balance; }
.guide-page main h3 { margin: var(--space-4) 0 0; font: var(--type-page-strong); color: var(--text); }
.guide-page main h3 + .points { margin-top: var(--space-2); }

/* Questions and answers (components/RuledList): the question in 600, the answer under it. */
.guide-page .faq { margin: var(--space-3) 0 0; }
.guide-page .faq div { padding: var(--space-4) 0; border-top: 1px solid var(--line); max-width: 62ch; }
.guide-page .faq div:first-child { border-top: 0; padding-top: 0; }
.guide-page .faq div:last-child { padding-bottom: 0; }
.guide-page .faq dt { color: var(--text); font-weight: 600; margin: 0 0 var(--space-1); }
.guide-page .faq dd { margin: 0; }

/* The index's list (components/RuledList, names that lead on): the name a
   link in 600 over its line in page-small, sub. */
.guide-page .guide-list .g-name { display: block; font-weight: 600; }
.guide-page .guide-list .g-line { display: block; margin-top: var(--space-1); font: var(--type-page-small); color: var(--sub); }

/* The page's columns as the others have them, the rail in the second,
   sticky (components/GuideRail). */
.guide-page main:has(> .guide-rail) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.guide-rail { min-width: 0; position: sticky; top: var(--space-6); align-self: start; max-height: calc(100vh - 2 * var(--space-6)); overflow-y: auto; }

/* Two cards: "In this guide" over "Guides". */
.rail-card { padding: var(--space-5); background: var(--card); border-radius: var(--radius-panel); box-shadow: var(--shadow-card); }
.rail-card + .rail-card { margin-top: var(--space-4); }
.rail-card h2 { margin: 0 0 var(--space-3); font: var(--type-page-strong); color: var(--text); }
.rail-card h2 a { color: inherit; }
.rail-card ol, .rail-card ul { list-style: none; margin: 0; padding: 0; }
.rail-card li a { display: block; padding: var(--space-2) var(--space-3); margin-inline: calc(var(--space-3) * -1); border-radius: var(--radius-control); font: var(--type-page-small); font-weight: 600; }
.rail-card li a:hover { background: var(--page); }
/* The page you are on is marked as the bar marks its page: a pale pill with a Harbour edge. */
.rail-card li a[aria-current] { background: var(--page); color: var(--text); box-shadow: inset 3px 0 0 var(--accent); }
/* A group folds behind its name and a chevron; the one holding this guide is open. */
.rail-group { margin-top: var(--space-2); }
.rail-group:first-of-type { margin-top: 0; }
.rail-group > summary { display: flex; align-items: center; justify-content: space-between; padding: var(--space-1) 0; list-style: none; cursor: pointer; font: var(--type-page-caption); font-weight: 600; color: var(--sub); }
.rail-group > summary::-webkit-details-marker { display: none; }
.rail-group > summary .chev { transition: transform 0.15s; }
.rail-group[open] > summary .chev { transform: rotate(180deg); }
.rail-group > summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.rail-group ul { margin-top: var(--space-1); }
@media (prefers-reduced-motion: reduce) { .rail-group > summary .chev { transition: none; } }

@media (max-width: 760px) {
  /* A phone: the rail is the last card, after the page, its "In this guide" gone. */
  .guide-rail { order: 2; position: static; align-self: stretch; max-height: none; overflow: visible; }
  .rail-toc { display: none; }
  .rail-card { padding: var(--space-5) var(--space-4); }
}