/* ==========================================================================
   Glossary page

   The search in the hero, and below it the letter groups: the letter in the
   display face on the left, the terms on the right. Everything else is a
   component, the letter bar on the foot of the hero included.
   ========================================================================== */

/* -- The hero -------------------------------------------------------------- */

/* The letter bar is laid on the foot of the hero and covers the last 96 of it,
   so the hero's own bottom padding would leave the heading and the search only
   32 clear of the squares. The design holds them 72 clear: measured off the
   frame, the content ends at 465 and the bar opens at 537 in a hero 634 tall.

   The 40 sits on the content rather than on the hero's padding so it rides on
   whatever that padding is: the hero steps it down to 100 at 1024 and 96 at
   600, where the bar does not shrink and the room is needed more, not less. */
.glossary-hero .inner-hero__main {
  margin-bottom: var(--space-40);
}


/* The lead and the Last Updated row are one group, so the aside has two
   children rather than three. With three, space-between would split the slack
   evenly and put the same gap above the row as below it; the design holds the
   row 24 under the lead and lets the rest of the space fall between the group
   and the field on the bottom edge. Full width because the aside aligns its
   children to the start. */
.glossary-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  width: 100%;
}

/* The row is set in the lead's size, not the plain body size the article hero
   gives the same block: measured off the frame, the cap height of its L and of
   the lead's digits are both 14, which is 20px type in this face. */
.glossary-intro .hero-meta {
  font: var(--type-body-large);
}

/* The aside centres its children here, and the row is a flex box running the
   full width, so text-align cannot reach the mark and the line inside it: they
   would sit at the left while everything above and below them is centred. */
@media (max-width: 1024px) {
  .glossary-intro .hero-meta {
    justify-content: center;
  }
}

/* The hero brings the lead down from the large body size to the plain one here,
   and the row under it is the same line of copy, so it steps with it. Kept
   beside the rule it undoes rather than filed with the page's other phone
   rules, which is where the first copy of it was and where it was lost. */
@media (max-width: 600px) {
  .glossary-intro .hero-meta {
    font: var(--type-body);
  }
}


/* -- The search in the hero ------------------------------------------------ */

/* The Text input the closing block uses, so the hover, the focus ring and the
   disabled edge all come from the component. What is written here is the clear
   button, which the blog's list has and the bare component does not. */
/* Full width of the aside, and no margin of its own: the aside sets the lead
   at the top and whatever follows it on its bottom edge, level with the last
   line of the title beside it, and a margin here would add to that gap and
   push the field past the title. */
.glossary-search {
  width: 100%;
}

/* The glass plate the letter bar under it stands on. The Text input already
   fills its box with white at five per cent, which is that plate's colour, so
   the blur is all that is written here, and it is written on this one field:
   every other input on the site stands on a flat surface, where a blur would
   have nothing to pick up. */
.glossary-search .text-input__box {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Sized and placed like the icon on the other side of the field, and painted
   with the icon colour rather than the text colour so it reads as a control
   and not as a character someone typed. */
.glossary-search__clear {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;

  color: var(--icon-primary);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
}

.glossary-search__clear:hover {
  color: var(--text-accent);
}

.glossary-search__clear[hidden] {
  display: none;
}

.glossary-search__clear svg {
  width: 16px;
  height: 16px;
}


/* -- Nothing found --------------------------------------------------------- */

.glossary-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  padding-block: var(--space-64);
}

.glossary-empty[hidden] {
  display: none;
}

.glossary-empty__text {
  margin: 0;
  font: var(--type-body);
  color: var(--text-secondary);
}


/* -- The letter groups ----------------------------------------------------- */

/* One band to a letter. The Band component draws a rule across the full page at
   the band's top and bottom edge while the panel inside stays on the grid, and
   because the rules are overlays rather than items in the column they lie on the
   panel's own border instead of adding to its height. That is what the design
   shows: outside the column the line is the page's divider, inside it the
   panel's border. layout.css takes the rules away at 1024 with every other rule
   on the site; the panel keeps its border, which is an edge and not a rule. */
/* The section's grid rules run the whole way down, through the gaps between the
   letters as well as behind them, so the bands are lifted over them: inside a
   panel the line a reader sees is the panel's own border, between two panels it
   is the rule. That is the order the design draws, and it is the same order the
   Band component uses for its own pair. */
/* A stacking context of its own, so the order written inside it stays inside
   it. Without this the lifted stack below competes with the letter bar, which
   is sticky at z-index 2 and earlier in the document, and the cards scroll over
   the bar instead of under it. */
.section.glossary {
  isolation: isolate;
}

.glossary-groups {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

.glossary-group {
  /* Room for the letter bar, and for the header when it is pinned above it on a
     jump up the page. Both are 97 tall. */
  scroll-margin-top: 194px;
}

/* A real border, not the inset stroke the hub's panel carries. This panel is
   stretched to the column and holds a grid, so the stroke has to come out of the
   box rather than off the content: 1528 less two borders and two 40s is 1446,
   which is the two 715 cards and the 16 between them the design draws. */
.glossary-panel {
  padding: var(--space-40);
  background-color: var(--bg-grey);
  border: 1px solid var(--border-card);
}

.glossary-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  margin-bottom: var(--space-32);
}

/* The letter on a filled square: the accent the eyebrow's dot uses, and the h3
   size in a 64 box. The label is named from the palette because there is no role
   for text on an accent plate, the same reason the filled Button names its own.
   White on this blue is 5.0:1, which clears AA for body text, and the letter is
   36 bold besides. */
.glossary-badge {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0;

  font: var(--type-h3);
  color: var(--white);
  background-color: var(--icon-accent);
}

.glossary-panel__count {
  margin: 0;
  font: var(--type-body-large);
  color: var(--text-primary);
  text-align: right;
}

/* Two to a row, and one card on a row of its own keeps a column's width rather
   than stretching across the panel, which is what the design draws on a letter
   that holds a single term. */
.glossary-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-16);
}

.glossary-term__name {
  margin: 0;
  font: var(--type-h4);
  color: var(--text-primary);
}

/* Pushed to the foot of the card, so two cards sharing a row carry their tags on
   the same line however much copy stands above them. The card is already a
   column, so one auto margin does it. */
.glossary-term__related {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: auto;
}

.glossary-term__related-label {
  font: 700 var(--size-14)/var(--leading-20) var(--font-body);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.glossary-term__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}


/* -- Steps ----------------------------------------------------------------- */

@media (max-width: 1024px) {
  /* One column from the tablet down. The cards no longer share a row, so there
     is nothing left for the equal heights to do and each one is its own. */
  .glossary-cards {
    grid-template-columns: 1fr;
  }

  .glossary-panel {
    padding: var(--space-32);
  }
}

@media (max-width: 600px) {
  .glossary-panel {
    padding: var(--space-20);
  }

  .glossary-badge {
    width: 48px;
    height: 48px;
    font: var(--type-h5);
  }

  .glossary-panel__count {
    font: var(--type-body);
  }

  .glossary-term__name {
    font: var(--type-h5);
  }
}