/* glass-nearby.css — the NEARBY strip's own look.
 *
 * Split out of glass-reading.css in round 7, which crossed 800 lines when
 * D-33 landed. The seam is the same one glass-nearby.js already draws: this
 * sheet is the STRIP — the list form of the hero's caption, the pages this
 * one links and where it sits among its own. glass-reading.css keeps the
 * reading measure (the spread, the type scale, the figures), and the two
 * rules that PLACE the strip in the composed mast stay there with the mast's
 * own grid, because that is a fact about the mast, not about the strip.
 */
/* ── NEARBY: the list form of the caption ─────────────────────────────
 * The hero caption says "Cassini-Huygens and the 10 pages it links"; this is
 * those ten pages, as things you can click or say. It sits at the FOOT of
 * the masthead — picture, headline, dateline, then where to go from here —
 * rather than between the picture and the headline, which would push a page
 * away from its own name. Near connections belong on the page; far ones come
 * from the contents or from "find" (docs/design/glass-reading.md).
 *
 * The rows are the rail's `.toc-row`, on purpose: one look, one contract,
 * and glass.js's pick branch opens `data-ch` wherever it finds it. */
.nearby { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.5rem;
  margin: 1.1rem 0 0; padding-top: 0.85rem; border-top: 1px solid var(--line); }
.nearby .nb-lab { font-family: var(--font-display); font-size: var(--rd-kicker);
  letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; }
/* the second line is a SECOND LINE: the topic's own row starts where the
 * links stop, rather than continuing them mid-band. */
.nearby .nb-lab.nb-in { flex: 0 0 100%; margin: 0.35rem 0 0; }
/* A CHIP, not a rail row: the rail's row is a full-width band with a left
 * border, and twelve of those under a headline is the sidebar again lying on
 * its side. Same class, same colours, laid out as a strip. */
.nearby .nb-row { display: inline-flex; align-items: center; gap: 0.4rem;
  max-width: 26ch; margin: 0; padding: 0.3rem 0.65rem; border: 1px solid var(--line);
  border-left: 1px solid var(--line); border-radius: 4px; font-size: 0.92rem;
  overflow: hidden; transform: none; }
/* the TITLE truncates, not the chip: `text-overflow` acts on the box whose
 * own text overflows, and the chip's overflow is a flex item, not text. A
 * hard cut with no ellipsis reads as a rendering fault; this reads as a
 * title that goes on. */
.nearby .nb-row > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nearby .nb-row:hover { background: var(--raised); border-color: var(--amber); transform: none; }
.nearby .nb-row .ord { flex: 0 0 auto; min-width: 0; color: var(--muted); font-family: var(--font-data);
  font-size: 0.78em; letter-spacing: 0; opacity: 0.8; }
.nearby .nb-row.nb-prev .ord, .nearby .nb-row.nb-next .ord { color: var(--cyan); }
.nearby .nb-topic { font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.04em;
  color: var(--lavender); background: none; border: 1px dashed var(--line); border-radius: 4px;
  padding: 0.3rem 0.6rem; cursor: pointer; }
.nearby .nb-topic:hover { border-color: var(--lavender); background: var(--raised); }
.nearby .nb-topic:focus-visible, .nearby .nb-row:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
/* the chip that counts them. Only a phone folds anything away, so only a
   phone draws it: a desk has the room for every row and shows them. */
.nearby .nb-more { display: none; }
@media (max-width: 900px) {
  /* D-33 — NO HIDDEN SCROLLER. It was `overflow-x: auto` with a scrollWidth
     of 2986px inside a 340px window: one row of ten fully on screen, and the
     previous/next controls and the topic chip at x 2419, 2668 and 2909 —
     about seven screens to the right, present in the DOM and unreachable in
     practice. Nothing said they were there, because a hidden scroller says
     nothing.

     Wrapping it whole was the first answer and it cost the article: ten 44px
     targets on a 340px screen wrap to a 444px band and the first sentence
     went from y 848 to y 1018 in an 812px window — D-33 paid for with D-20.
     Four links and a "more" chip is 290px, which still does not fit.

     So the phone strip is what GOES somewhere — `IN <topic>`, previous, next
     and the topic — with one chip that says how many pages this one links.
     Pressing it wraps them in below, and pressing it again folds them away. What is folded is a number on the page,
     not a silence. A desk keeps every row and never draws the chip. */
  .nearby { flex-wrap: wrap; overflow-x: visible; padding-bottom: 0.4rem; }
  /* TWO TO A ROW. A 44px chip is the reach; its WIDTH is a title, and a
     title that takes the whole line makes the strip four rows deep above
     somebody's article. Half the strip each, with the title truncating as it
     already does, puts previous and next on one row and the topic beside the
     count on the next: 188px becomes 137 (measured; an earlier draft of this
     comment said 125 — review M-6). */
  .nearby .nb-row, .nearby .nb-topic, .nearby .nb-more {
    flex: 0 1 calc(50% - 0.35rem); max-width: calc(50% - 0.35rem);
    justify-content: flex-start; overflow: hidden;
  }
  /* a BLOCK, so the ellipsis works: `text-overflow` acts on the box whose own
     text overflows, and a flex container's text is an anonymous item — the
     topic's name was cut mid-word against the dashed border, which reads as a
     rendering fault rather than as a name that goes on. The line-height is
     the 44px reach. */
  .nearby .nb-topic, .nearby .nb-more {
    display: block; line-height: 42px; padding: 0 0.6rem; text-align: left;
    white-space: nowrap; text-overflow: ellipsis;
  }
  .nearby .nb-lab.nb-in, .nearby .nb-row.nb-prev,
  .nearby .nb-row.nb-next, .nearby .nb-topic { order: -1; }
  .nearby .nb-lab.nb-in { flex-basis: 100%; margin: 0 0 0.15rem; }
  /* the chip carries the word NEARBY while the rows are folded, so the label
     would be the second one; open, the label is back and the chip is gone */
  .nearby:not(.nb-open) .nb-link, .nearby:not(.nb-open) .nb-lab:not(.nb-in) { display: none; }
  /* the chip STAYS when the strip is open — it is the way back (M-2) */
  .nearby .nb-more {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.7rem;
    font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.04em;
    color: var(--lavender); background: none; border: 1px dashed var(--line);
    border-radius: 4px; cursor: pointer;
  }
  .nearby .nb-more[hidden] { display: none; }
  .nearby .nb-more:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
  /* every chip in the strip is a 44px target with them (D-21) */
  .nearby .nb-row, .nearby .nb-topic { min-height: 44px; }
}