/*
 * Field Guides hub — the decision index.
 *
 * It layers on `shell.css` and loads no JavaScript, so nothing here may hide
 * content behind a state a script has to remove. The page is a ledger, not a
 * card grid: every row shares one two-column split, where the left column
 * carries the machine facts (label, update date) and the right column carries
 * the decision and its summary. The current guide is the same shape at a larger
 * type step. Space and hairlines do the separating; the routing-graph port from
 * the homepage is the only ornament.
 */

.hub-main {
  padding-block-end: var(--section-y);
}

/*
 * The shell header only paints its own background once the homepage's motion
 * module marks it stuck. The hub ships no JavaScript at all, so it paints the
 * header itself; without this, the page scrolls under a transparent bar and the
 * lockup collides with the first heading. A `html:not(.js)` rule in `shell.css`
 * would be the better long-term home for this.
 */
.site-header {
  border-block-end-color: var(--line-soft);
  background: oklch(0.165 0.019 245 / 0.94);
  box-shadow:
    0 1px 2px oklch(0.04 0.02 245 / 0.28),
    0 10px 30px oklch(0.04 0.02 245 / 0.16);
  backdrop-filter: blur(18px) saturate(130%);
}

/* --- breadcrumbs -------------------------------------------------------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  padding-block-start: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--step--1);
}

.crumbs a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration-color: transparent;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition:
    color var(--fast) var(--ease),
    text-decoration-color var(--fast) var(--ease);
}

.crumbs span::before {
  content: '/';
  margin-inline-end: 0.55rem;
  color: var(--line);
}

.crumbs span {
  color: var(--ink-2);
}

/* --- page head ---------------------------------------------------------- */

.guides-head {
  padding-block: clamp(1.5rem, 3vw, 2.75rem) clamp(2.5rem, 5vw, 4rem);
}

.guides-kicker {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-block-end: 1.35rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 560;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* The site's paired-port signature, reused rather than reinvented. */
.guides-kicker::before {
  content: '';
  width: 8px;
  height: 8px;
  border: 1px solid var(--accent);
  border-radius: 2px;
  background: var(--accent-wash);
  box-shadow: 16px 0 0 -3px var(--accent-line);
}

.guides-head h1 {
  max-width: 24ch;
  font-size: var(--step-3);
}

.guides-lead {
  max-width: 62ch;
  margin-block-start: 1.4rem;
  color: var(--ink-2);
  font-size: var(--step-1);
  line-height: 1.55;
}

/* --- featured stage ----------------------------------------------------- */

/*
 * The stage is a band, not a floating card. It shares the page's content edges
 * and its two-column split with the index rows below, so the labels line up in
 * one column and the decisions in another down the whole page. A padded panel
 * looked deliberate on its own and broke that alignment by exactly its own
 * padding. Prominence comes from type size, the accent label and the one filled
 * button instead.
 */
.guide-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(8rem, 0.24fr) minmax(0, 1fr);
  align-items: start;
  gap: 1.25rem clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(2rem, 4vw, 3.25rem);
  border-block: 1px solid var(--line);
}

.stage-aside,
.stage-body {
  display: grid;
  justify-items: start;
  min-width: 0;
  gap: 0.9rem;
}

.stage-label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 560;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.stage-label::before {
  content: '';
  width: 8px;
  height: 8px;
  border: 1px solid var(--accent);
  border-radius: 2px;
  background: var(--accent-wash);
}

.guide-stage h2 {
  max-width: 22ch;
  font-size: var(--step-3);
}

/*
 * One link for the whole stage. The anchor carries the guide's title, which is
 * the text a crawler and a screen-reader link list read, and its `::after`
 * stretches the hit area over the band so the button below is a target rather
 * than a second, generic link to the same route.
 *
 * The accepted cost of the stretched-link pattern: the overlay intercepts drags,
 * so the summary on this band cannot be selected with the mouse. It is worth it
 * here because the band exists to be entered, and the alternative was two links
 * to one route with the worse anchor text winning.
 */
.stage-link {
  text-decoration: none;
}

.stage-link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.stage-summary {
  max-width: 64ch;
  color: var(--ink-2);
  line-height: 1.6;
}

.stage-meta,
.entry-meta {
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

/* Decorative. It must not swallow the clicks the stretched link is there to
   catch, and it is hidden from assistive technology for the same reason. */
.stage-cta {
  margin-block-start: 0.6rem;
  pointer-events: none;
}

.guide-stage:active .stage-cta {
  transform: translateY(1px) scale(0.985);
}

/* --- the index ---------------------------------------------------------- */

.guide-index {
  margin-block-start: clamp(3rem, 6vw, 5rem);
}

.guide-index h2 {
  font-size: var(--step-2);
}

.guide-list {
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.guide-entry {
  display: grid;
  grid-template-columns: minmax(8rem, 0.24fr) minmax(0, 1fr);
  gap: 0.65rem clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-block-start: 1px solid var(--line-soft);
}

.guide-entry:last-child {
  border-block-end: 1px solid var(--line-soft);
}

.entry-label {
  grid-row: 1 / 3;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 560;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.guide-entry h3 {
  grid-column: 2;
  max-width: 30ch;
  font-size: var(--step-1);
}

.guide-entry h3 a {
  text-decoration-color: transparent;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
  transition: text-decoration-color var(--fast) var(--ease);
}

.entry-summary {
  grid-column: 2;
  max-width: 62ch;
  color: var(--ink-2);
}

.entry-meta {
  grid-column: 2;
}

/* --- handoff ------------------------------------------------------------ */

/*
 * Space alone separates the handoff. A rule here sat a few centimetres under the
 * one that closes the index and read as an accidental double line.
 */
.guides-handoff {
  display: grid;
  justify-items: start;
  gap: 1rem;
  margin-block-start: clamp(3rem, 6vw, 5rem);
}

.guides-handoff h2 {
  max-width: 26ch;
  font-size: var(--step-2);
}

.guides-handoff p {
  max-width: 60ch;
  color: var(--ink-2);
}

/*
 * The stage CTA is the page's one primary action, so the handoff offers a
 * secondary button and a plain link rather than a second filled button.
 */
.handoff-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-block-start: 0.6rem;
}

.handoff-link {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  color: var(--muted);
  text-decoration-color: transparent;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition:
    color var(--fast) var(--ease),
    text-decoration-color var(--fast) var(--ease);
}

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

@media (hover: hover) and (pointer: fine) {
  .crumbs a:hover {
    color: var(--ink);
    text-decoration-color: var(--accent);
  }

  .guide-entry h3 a:hover {
    text-decoration-color: var(--accent);
  }

  /* The stage reacts as one surface: the pointer is over the stretched link
     wherever it is on the band, so the title and the button answer together. */
  .guide-stage:hover .stage-link {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
  }

  .guide-stage:hover .stage-cta {
    background: var(--accent-strong);
    transform: translateY(-2px);
  }

  .handoff-link:hover {
    color: var(--ink);
    text-decoration-color: var(--accent);
  }
}

/* --- responsive composition -------------------------------------------- */

@media (max-width: 720px) {
  .guide-stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .guide-entry {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  .entry-label {
    grid-row: auto;
  }

  .guide-entry h3,
  .entry-summary,
  .entry-meta {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  .guides-head h1,
  .guide-stage h2,
  .guides-handoff h2 {
    max-width: none;
  }

  .stage-cta,
  .handoff-actions .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crumbs a,
  .guide-entry h3 a,
  .handoff-link {
    transition: none;
  }

  /* Less movement, not less feedback: the colour change stays, the lift goes. */
  .guide-stage:hover .stage-cta,
  .guide-stage:active .stage-cta {
    transform: none;
  }
}