/* The manual's index. Articles reuse topic.css and only need this for the
   category grid and the search box. */
.wrap-wide { max-width: 1000px; margin: 0 auto; padding: 0 22px 40px }
.help-head { padding: 34px 0 6px; text-align: center }
.help-head h1 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -.02em }
.help-head .stand { margin: 12px auto 22px; max-width: 52ch }
#q {
  width: 100%; max-width: 460px; font: inherit; font-size: 16px; color: var(--ink);
  background: #fff; border: 1px solid #ddd8d1; border-radius: 26px; padding: 12px 20px;
}
#q:focus { outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy) }
.none { color: var(--muted); font-size: 14px; margin-top: 16px }

.cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 30px }
.cat { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px }
.cat h2 { margin: 0 0 10px; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted) }
.cat ul { margin: 0; padding: 0; list-style: none; max-width: none }
.cat li { padding: 0; margin: 0 0 13px; position: relative }
.cat li::before { display: none }
.cat li:last-child { margin-bottom: 0 }
.cat a { font-weight: 600; text-decoration: none; font-size: 15px; display: block }
.cat a:hover { text-decoration: underline }
.cat span { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.5; margin-top: 1px }

/* Numbered steps. The picture sits INSIDE its step rather than beside it, so
   there is never a doubt about which instruction it illustrates — the usual
   way an illustrated manual manages to confuse somebody. */
.steps { counter-reset: s; list-style: none; margin: 20px 0 0; padding: 0; max-width: none; }
.steps > li { counter-increment: s; position: relative; padding: 0 0 0 44px; margin: 0 0 26px; }
.steps > li::before {
  content: counter(s); position: absolute; left: 0; top: -2px;
  width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff;
  font-size: 15px; font-weight: 700; display: grid; place-items: center;
}
.steps > li::after { display: none; }
.steps .what { font-size: 15.5px; padding-top: 3px; }
.steps figure { margin: 12px 0 0; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 8px; }
.steps figure img { display: block; width: 100%; height: auto; border-radius: 7px; }
.steps figcaption { font-size: 13px; color: var(--muted); padding: 9px 6px 3px; }
@media (max-width: 600px) {
  .steps > li { padding-left: 36px; }
  .steps > li::before { width: 26px; height: 26px; font-size: 13px; }
}

/* ---------- the contents list, on every article ----------
   A manual is a whole, not a pile of pages. Somebody reading about landed cost
   should be able to see that goods in transit is next door without going back
   to an index to find out. */
.doc { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 40px;
  max-width: 1140px; margin: 0 auto; padding: 0 22px; align-items: start; }
.doc-body { min-width: 0; }
.doc-body .wrap { padding: 0; max-width: none; }
/* The 10px on the RIGHT is the scrollbar's gutter. This list scrolls on its
   own, so a scrollbar sits inside the box, and without that padding the
   highlighted row ended up flush against it — measured at a gap of 0.1px. */
.doc-nav { position: sticky; top: 74px; max-height: calc(100vh - 96px); overflow-y: auto;
  padding: 26px 10px 20px 0; font-size: 14px; }
.doc-nav summary { display: none; }
/* Indented by the link padding rather than the links being OUTDENTED by it.
   The links used to carry margin-left:-10px so their text lined up with these
   headings — but a negative margin only compensates on one side, so the
   highlight bulged 10px past the headings on the left while the right side had
   nowhere to go. Moving the 10px here makes the pill symmetrical about the
   text it wraps, which is the whole point of a pill. */
.doc-nav h3 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); margin: 18px 0 6px 10px; font-weight: 600; }
.doc-nav h3:first-child { margin-top: 0; }
.doc-nav ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.doc-nav li { margin: 0; padding: 0; }
.doc-nav li::before { display: none; }
.doc-nav a { display: block; padding: 5px 10px; border-radius: 7px;
  color: var(--ink); text-decoration: none; line-height: 1.4; }
.doc-nav a:hover { background: var(--navy-soft); }
/* The one being read, marked for the eye and for a screen reader alike. */
.doc-nav a[aria-current="page"] { background: var(--navy); color: #fff; font-weight: 600; }

/* On a phone the list would push the article off the screen, so it folds into
   one line that opens when somebody actually wants it. */
@media (max-width: 900px) {
  .doc { grid-template-columns: 1fr; gap: 0; }
  .doc-nav { position: static; max-height: none; overflow: visible; padding: 20px 0 0; }
  .doc-nav summary { display: block; cursor: pointer; font-weight: 600; color: var(--navy);
    padding: 11px 14px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
  .doc-nav nav { padding: 14px 4px 0; }
  .nav-fold[open] summary { margin-bottom: 4px; }
}

/* A closed <details> was still rendering its contents here — measured at 1080px
   tall with the open attribute absent — so the phone got the whole list on top
   of the article anyway. Hide it explicitly rather than trust the element to do
   it: the belt to that particular pair of braces. */
@media (max-width: 900px) {
  .nav-fold:not([open]) > nav { display: none; }
}