/* Shared editorial hierarchy for Field Notes + Guides.
   Breadcrumb -> type -> title -> deck -> metadata -> tags. */

/* Field Note breadcrumb now mirrors Guide breadcrumb. */
.field-note-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 10px;
  margin-bottom: 24px;
  color: var(--fn-muted);
  font-size: .72rem;
}

.field-note-breadcrumbs a,
.field-note-category-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.field-note-breadcrumbs > span:last-child {
  color: var(--fn-muted);
}

/* Move Field Note identity into the same position as the Guide type line. */
.field-note-type {
  margin: 0 0 10px;
  color: var(--fn-ink);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

/* Metadata now follows the deck, like the Guide. */
.field-note-pretty-meta-after {
  margin-top: 18px;
  margin-bottom: 0;
}

.field-note-pretty-meta-after time {
  margin: 0;
}

/* Tags remain below metadata, but use the same visual cadence as Guide tags. */
.field-note-pretty-tags {
  margin-top: 16px;
}

/* Guide now says what it is as well as which format it uses. */
.guide-type-line {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 10px;
  align-items: center;
}

.guide-type {
  color: inherit;
  font-weight: 700;
}

/* Both breadcrumb trails should feel interactive but quiet. */
.guide-breadcrumbs a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

@media (max-width: 700px) {
  .field-note-breadcrumbs,
  .guide-breadcrumbs {
    margin-bottom: 18px;
  }
}