/* "Up next" fan-out at the bottom of the gallery hub pages
   (chats, reports, feedback, testimonials) and below the /survey,
   /research/experimental-data, and /research content. Each page hand-picks
   three destinations suited to who is plausibly reading it — see the .np
   markup in the legacy/*.html files and the src pages. Idiom follows the
   homepage deck: mono eyebrow, quiet cards, purple accent. Colors come from
   the site's theme tokens, so the band follows the toggle without a second
   .light-mode block restating every rule.

   Sizing is rem so the band rides each page's fluid root (the dense tier on
   the legacy hubs, site.css's root on templated pages). The band spans its
   parent container — the hubs' .container or the templated .page-container —
   so its edges line up with the content above it. /research is the one page
   that places it outside any container (after the full-bleed evidence deck):
   there the markup adds .np-standalone, which restates the deck's own
   content column (.dw-inner in deck-wireframe.css, 1230px). */

.np {
  /* The card takes the wireframe's own hand: a ruled edge and a hard offset
     cast, on paper, the way the deck's fork cards and the walkthroughs'
     plates do. The three values are the walkthroughs' (walkthrough.css),
     borrowed here rather than imported, so a page can carry this band
     without loading a walkthrough sheet — the same arrangement
     deck-wireframe.css makes with the same numbers. */
  --np-ink: #55555f;
  --np-paper: #fffefb;
  --np-cast: rgba(60, 50, 40, 0.16);

  margin: 4.5rem 0 2.5rem;
  padding: 2rem 0 0;
  border-top: 1px solid var(--rule);

  /* The band speaks in whatever face the page speaks in. It used to name
     Roboto, which is the chrome's face and nobody's reading face, and the
     band is the one component that crosses every family on both sites:
     thirty-nine reachable pages here, and the chat pages on Sway Classroom.
     So the last thing on a reading page — the three destinations the page
     wants clicked — was set in a different sans from the prose 300px above
     it, on the thirty-five of those pages whose body is IBM Plex Sans; and
     on Classroom, whose kit does not include Roboto at all, it fell through
     the stack to the system sans.

     `inherit` rather than a family, for the same reason the three tokens
     above are values rather than an import: this sheet is carried by pages
     belonging to families it must not know about, and the one right answer
     on every one of them is the face the page already set. It is also what
     classroom/css/wire-remap.css could not express — that sheet remaps this
     band's --np-* colors to its own --c-* palette, and had no token to reach
     for here. */
  font-family: inherit;
}
html.dark-mode .np {
  --np-ink: #a8a8b4;
  --np-paper: #15151e;
  --np-cast: rgba(226, 226, 255, 0.09);
}
.np-standalone {
  max-width: 1230px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
/* The band's heading, set as its eyebrow. It is an <h2> because it is one:
   on a page whose only other sub-headings are these cards' <h3>s, a <p> here
   left the document going h1 straight to h3. */
.np-eyebrow {
  font-family: "Roboto Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--link-color);
  margin: 0 0 0.5rem;
}
/* The band's two runs of prose — this line and the cards' blurbs — used to
   ask for weight 300. That was Roboto's Light, and it went with the Roboto
   above: the site loads Roboto 300, so it was a real face. No reading face on
   either site has a 300 (IBM Plex Sans ships here and on Classroom at 400,
   600 and italic 400), so with the family inherited the request would resolve
   to 400 on a templated page and stay Light on the four legacy hubs — a
   weight mismatch swapped in for the family one. They take the page's own
   weight now, which is the same 400 the paragraph above the band is set in. */
.np-note {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-soft);
  margin: 0 0 1.375rem;
}
.np-grid {
  display: grid;
  /* Three, unless the markup says otherwise. A section index page
     (partials/section-index.njk) sets --np-cols to the count its section
     actually has: three columns holding two cards leaves a hole where the
     third would be. */
  grid-template-columns: repeat(var(--np-cols, 3), 1fr);
  gap: 1rem;
}
.np-card {
  display: flex;
  flex-direction: column;
  background: var(--np-paper);
  border: 1.5px solid var(--np-ink);
  border-radius: 5px;
  box-shadow: 3px 3px 0 var(--np-cast);
  padding: 1.25rem 1.3rem 1.15rem;
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
/* Lifting a card deepens its cast rather than recolouring its edge: the
   card is a sheet on the page, so it moves off the page to meet the
   pointer. */
.np-card:hover,
.np-card:focus-visible {
  box-shadow: 5px 5px 0 var(--np-cast);
  transform: translate(-1px, -1px);
}
.np-card h3 {
  font-family: "Roboto Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 0.97rem;
  line-height: 1.38;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  margin: 0 0 0.45rem;
}
.np-card p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-soft);
  margin: 0 0 1rem;
}
.np-go {
  margin-top: auto;
  font-family: "Roboto Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 500;
  font-size: 0.71rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--link-color);
}

@media (max-width: 760px) {
  .np-grid { grid-template-columns: 1fr; }
  .np { margin-top: 3.5rem; }
}

/* ---- the band as a page rather than as a foot ----
   The section index pages (/s/feedback/, /s/examples/, /s/resources/) are the
   page behind a nav group's own heading: a name, a line, and the pages that
   hang off it. The destinations are this band, because a set of destinations
   is this band everywhere else on the site and a second component doing the
   same job slightly differently is the thing the language is against
   (WIREFRAME-LANGUAGE.md §4).

   What changes at the top of a page is only what the foot of a page needed:
   the rule above it divided the band from the content it followed, and here
   there is nothing above it but the line that introduces it. The cards
   themselves are untouched — same hand, same paper, same cast. */
.np-lead {
  margin-top: 2.5rem;
  padding-top: 0;
  border-top: 0;
}
/* Three sentences of card on a page with nothing else on it can afford the
   room the foot of a long page cannot. */
.np-lead .np-card { padding: 1.5rem 1.55rem 1.4rem; }
.np-lead .np-card h3 { font-size: 1.06rem; margin-bottom: 0.55rem; }
.np-lead .np-card p { font-size: 0.9375rem; }
@media (max-width: 760px) {
  .np-lead { margin-top: 2rem; }
}

/* ---- the drawn edge ----
   js/next-paths.js replaces each card's border with generated strokes
   (js/hand-ink.js) and sets html.np-ink, which is what takes the CSS border
   off — so a page without the script, or a reader without JavaScript, keeps
   the ruled edge above and nothing here applies. The rules restate the ink
   block in walkthrough-rig.css against this band's own tokens; the two are
   deliberately separate, so a page carrying the band does not have to load a
   walkthrough sheet to get a drawn card. */
html.np-ink .np-card.hi-box {
  position: relative;
  border-color: transparent;
  /* The generated outline has square corners, and a rounded fill under it
     shows through where the strokes cross. */
  border-radius: 0;
}
.np .hi-ink {
  position: absolute;
  left: -7px;
  top: -7px;
  overflow: visible;
  pointer-events: none;
  fill: none;
  z-index: 1;
}
.np .hi-ink path {
  stroke: var(--np-ink);
  stroke-width: 1.15;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
/* The second pass over an edge is lighter, as a real second pass is. */
.np .hi-ink path.hi-p2 { stroke-width: 0.85; stroke-opacity: 0.5; }

/* pathLength="1" normalizes every stroke, so one dash length covers any edge
   and a long line takes no longer to draw than a short one. */
@keyframes np-draw { to { stroke-dashoffset: 0; } }
html.np-ink .np .hi-ink path { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.np-ink .np .hi-on > .hi-ink path {
  animation: np-draw 0.32s cubic-bezier(0.4, 0.05, 0.25, 1) forwards;
  /* The card's place in the row, then the edge's place in the card. */
  animation-delay: calc(var(--b, 0) * 0.055s + var(--i, 0) * 0.035s);
}
@media (prefers-reduced-motion: reduce) {
  html.np-ink .np .hi-ink path,
  html.np-ink .np .hi-on > .hi-ink path { stroke-dashoffset: 0; animation: none; }
  /* The lift to meet the pointer arrives without the travel. */
  .np-card { transition: none; }
}