/* ==========================================================================
   LEECOI — Resources (/resources/)
   ==========================================================================

   An index page. The largest block on it is an A to Z of every method taught,
   which is a reference table rather than reading matter, so it is set tighter
   and denser than prose and given a letter rail to jump around with.
   ========================================================================== */

/* ==========================================================================
   SYLLABUS CARDS
   ========================================================================== */

.resource-card {
  block-size: 100%;
}

.resource-card__kind {
  font-size: 0.75rem;
  color: var(--link);
  letter-spacing: 0.02em;
}

/* The card for the four unwritten tracks. Set apart by a dashed edge rather
   than by being greyed out: it is not disabled, it is honest, and it still
   leads somewhere useful. */
.resource-card--pending {
  border-style: dashed;
}

.resource-card--pending .resource-card__kind {
  color: var(--accent-strong);
}

/* ==========================================================================
   POINTERS
   --------------------------------------------------------------------------
   Rows rather than cards, because each is a signpost to a page that owns the
   content. A card would imply the content is here.
   ========================================================================== */

.pointers {
  display: flex;
  flex-direction: column;
}

.pointer {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;

  padding-block: var(--space-xl);
  border-block-start: 1px solid var(--line);
}

.pointer:first-child {
  border-block-start: 0;
  padding-block-start: 0;
}

/* A real count, derived from the data, not a decorative index. */
.pointer__count {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--weight-medium);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.pointer__title {
  font-size: var(--step-d3);
  line-height: var(--step-d3-lh);
  letter-spacing: var(--step-d3-ls);
  font-weight: var(--weight-semi);
}

.pointer__text {
  margin-block: var(--space-xs) var(--space-md);
  color: var(--muted);
  font-size: var(--step-small);
  line-height: 1.65;
  max-width: var(--width-prose);
}

/* ==========================================================================
   PREREQUISITES
   ========================================================================== */

.prereq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--space-xl);
}

.prereq-block {
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background-color: var(--panel);
}

.prereq-block__title {
  font-size: var(--step-d3);
  line-height: var(--step-d3-lh);
  letter-spacing: var(--step-d3-ls);
  font-weight: var(--weight-semi);
  margin-block-end: var(--space-md);
}

.prereq-block__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-inline-start: var(--space-lg);
  list-style: disc outside;
  font-size: var(--step-small);
  line-height: 1.6;
  color: var(--muted);
}

/* ==========================================================================
   METHOD INDEX
   ========================================================================== */

/* ---- Letter rail -------------------------------------------------------- */
.letter-nav {
  margin-block-end: var(--space-xl);
  padding-block-end: var(--space-lg);
  border-block-end: 1px solid var(--line);
}

.letter-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.letter-nav__link {
  display: grid;
  place-items: center;
  /* 24px minimum target, per WCAG 2.2 SC 2.5.8. */
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: var(--radius-sm);

  font-size: 0.75rem;
  color: var(--muted);
  transition:
    color var(--dur-fast) var(--ease-ui),
    background-color var(--dur-fast) var(--ease-ui);
}

.letter-nav__link:hover {
  color: var(--ink);
  background-color: var(--bg-sunk);
}

/* ---- Groups ------------------------------------------------------------- */
.letter-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.letter-group {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;

  padding-block-start: var(--space-lg);
  border-block-start: 1px solid var(--line);
}

.letter-group__letter {
  font-size: var(--step-d3);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  color: var(--accent-strong);
  /* Clears the fixed header when jumped to from the rail. */
  scroll-margin-top: calc(var(--header-h) + var(--space-lg));
}

/* Multi-column so 113 short entries do not become a 113-row column. Columns
   rather than a grid: entries vary in width, and a column layout lets each
   find its own rather than padding every one to the widest. */
.method-list {
  columns: 3 14rem;
  column-gap: var(--space-xl);
}

.method {
  /* An entry must not be split across a column boundary. */
  break-inside: avoid;
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  padding-block: 0.1875rem;
  line-height: 1.5;
}

.method__name {
  font-size: var(--step-small);
  color: var(--ink);
}

/* The track slug, shown as the slug rather than as a colour, so the marker
   carries its meaning in text. An entry taught on both tracks gets two. */
.method__track {
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
  padding: 0.0625rem 0.3125rem;
  border-radius: var(--radius-sm);
  background-color: var(--bg-sunk);
  border: 1px solid var(--line);
}