/* WYW - the index component (venues wayfinding rows). Owner: DEV-A.
   Loads on the four venues pages that carry a wayfinding row, after
   venues-motion.css and before the page's own stylesheet.

   Audit finding 4 (2026-09-11): "things you'll want to know" and "keep
   reading" used the same outlined card as content, so a reader could not
   tell navigation from content by shape. This is the answer: a table of
   contents, not a card grid. Rows the full width of the section, hairline
   separated, no fill and no radius - the one thing on these pages that is
   NOT a box, which is what makes it read as navigation at a glance.

   It must not look like .icard. Nothing here borrows from it.

   Colour is the surface's: the rows inherit ink on paper and cream on a
   chapter, and the arrow is currentColor, so moving a row's section between
   surfaces needs no new rule. */

.index {
  margin-top: 6svh;
  color: inherit;
}

.vchapter--dark .index,
.vchapter--green .index { color: var(--cream); }

/* THE ROW IS THE LINK - the whole 64px+ band is the hit area, not a title
   with an arrow beside it. */
.index__row {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 0.44fr) minmax(0, 1fr) 40px;
  column-gap: clamp(16px, 2vw, 34px);
  /* the small type sits on the title's baseline; the arrow is centred on
     the band instead, so it tracks the row and not the type */
  align-items: baseline;
  /* 1.5px, and a bottom rule on the last row closes the list */
  border-top: 1.5px solid rgba(38, 37, 31, 0.18);
  padding: clamp(18px, 2vw, 26px) 0;
  min-height: 64px;
  color: inherit;
  text-decoration: none;
}

.index__row:last-child { border-bottom: 1.5px solid rgba(38, 37, 31, 0.18); }

.vchapter--dark .index__row,
.vchapter--green .index__row { border-top-color: rgba(243, 236, 218, 0.28); }

.vchapter--dark .index__row:last-child,
.vchapter--green .index__row:last-child { border-bottom-color: rgba(243, 236, 218, 0.28); }

/* the numeral is the FAQ ledger's idiom (venues-faq.css) - decorative, and
   aria-hidden in the markup, but it is still visible text */
.index__n {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(38, 37, 31, 0.68); /* 4.8:1 on paper */
}

.vchapter--dark .index__n,
.vchapter--green .index__n { color: rgba(243, 236, 218, 0.62); }

/* justify-self:start is load-bearing for the marker: a grid item is a BLOCK,
   so a stretched title would paint the sweep across the whole column instead
   of hugging its words. The negative inline margin cancels the marker's own
   overhang, so the type still starts on the column's grid line. */
.index__title {
  justify-self: start;
  margin-inline: -0.12em;
  padding-inline: 0.12em;
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 36px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  /* the house marker, resting at zero width (base.css .hl paints at 100%) */
  background-image: linear-gradient(var(--highlight), var(--highlight));
  background-repeat: no-repeat;
  background-size: 0% 0.85em;
  background-position: 0 68%;
  transition: background-size 0.5s cubic-bezier(0.77, 0, 0.18, 1);
}

.index__line {
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.4;
  color: rgba(38, 37, 31, 0.72); /* 5.4:1 on paper */
}

.vchapter--dark .index__line,
.vchapter--green .index__line { color: rgba(243, 236, 218, 0.72); } /* 6:1 on #383838 */

.index__go {
  align-self: center;
  justify-self: end;
  width: 26px;
  height: 26px;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.index__go svg { display: block; width: 100%; height: 100%; }

/* ---------- states ----------

   GREEN gets the cream block and ink type, the way .vchapter--green .hl
   does, because --highlight is invisible on --green. Ink on --green is
   5.5:1, so the type stays readable through the wipe rather than
   disappearing until the block catches up.

   DARK deliberately does NOT take that override - page.css says so in as
   many words: --highlight is semi-transparent on purpose and composites
   DEEPER on #383838, and the inherited cream reads 3.6:1 on it. Ink on dark
   would be unreadable. (The brief groups green and dark together; page.css
   is explicit that they differ, and it wins. Noted in the report.) */
.vchapter--green .index__row:hover .index__title,
.vchapter--green .index__row:focus-visible .index__title {
  background-image: linear-gradient(var(--cream), var(--cream));
  color: var(--ink);
}

/* :focus-visible is NOT pointer-gated - it only ever fires on real keyboard
   focus. The hover half is: iOS parks :hover on the last-tapped element and
   leaves it there (the .card lesson, page.css). */
.index__row:focus-visible .index__title { background-size: 100% 0.85em; }
.index__row:focus-visible .index__go { transform: translateX(8px); }

/* the house ring (base.css), restated only for the offset a full-width row
   needs to clear its own hairlines */
.index__row:focus-visible { outline-offset: 4px; }

@media (hover: hover) {
  .index__row:hover .index__title { background-size: 100% 0.85em; }
  .index__row:hover .index__go { transform: translateX(8px); }
}

/* ---------- the reveal ----------

   These rows reveal on OPACITY ONLY. The motion layer arms every
   [data-vm-group] child with a transform transition and strips .vm/.vm-in
   1.6s later; a link that has just been transformed and then had its
   compositing layer dropped can hold a stale hit-test region on iOS, and
   the row pays for it with its first tap. A row here is the full width of
   the section and arrives on an 80ms stagger, so the rise adds nothing the
   cascade does not already say - and the whole row is the hit area, which
   is the one thing that must never be approximate.

   Scoped to .index so it reaches the hub's "things you'll want to know"
   and the "keep reading" rows on all three sub-pages at once, and leaves
   every other revealing element on the page with its rise. */
.index .vm,
.index .vm-in { transform: none; }

.index .vm-in { transition: opacity 0.55s ease var(--vm-d, 0s); }

@media (prefers-reduced-motion: reduce) {
  /* the motion layer's own reduce branch sets transition: none on .vm /
     .vm-in; this restates it at the specificity the rules above raised */
  .index .vm,
  .index .vm-in { transition: none; }
}

/* ---------- below 900px ----------
   numeral and title share the first line with the arrow at the right edge;
   the one-liner drops under the title and keeps its indent, so the column
   the eye is following does not move. */
@media (max-width: 900px) {
  .index__row {
    grid-template-columns: 2.4em minmax(0, 1fr) 26px;
    row-gap: 6px;
  }

  .index__n     { grid-column: 1; grid-row: 1; }
  .index__title { grid-column: 2; grid-row: 1; }
  .index__go    { grid-column: 3; grid-row: 1; }
  .index__line  { grid-column: 2 / 4; grid-row: 2; }
}

@media (max-width: 400px) {
  /* 2.4em of gutter is a whole word of title at this width */
  .index__row { grid-template-columns: 1.9em minmax(0, 1fr) 24px; }
  .index__go { width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .index__title,
  .index__go { transition: none; }

  .index__row:hover .index__go,
  .index__row:focus-visible .index__go { transform: none; }
}