/* ============================================================================
   Jewellery Manufacturing Machinery Glossary (id_cms=14) — glossary layout
   ----------------------------------------------------------------------------
   Loaded from `cms/page.tpl` AFTER guide-premium.css, the same way
   compare-premium.css layers on top of it for page 11. Everything here is
   scoped to `.gls`, the second class the body's wrapper carries
   (`<div class="gde gls">`), so this file is inert on pages 10-13 even though
   they share guide-premium.css.

   Why a second file rather than more `.gde`: a glossary is not a guide. It has
   no thesis, no numbered procedure and no comparison table. What it needs is
   the one thing the `.gde` system has no component for — a way to FIND one
   term among thirty-five — and that is all this file adds: the find panel, the
   A-Z index, the term grid and the :target highlight.

   Measured on the stock page before this existed (1440px / 390px):

     page title      h1 at 24px desktop / 21.57px mobile, under 32px h2s — the
                     title was the SMALLEST heading on the page
     reading measure 832px capped by cms-premium.css, ~536px of empty right
     navigation      none. 29 terms, 0 anchors, 0 jump links. Finding
                     "cavitation" meant Ctrl+F or scrolling 5,904px
     h2 treatment    cms-premium.css draws a full-width hairline under every
                     CMS h2; four of them made four equal grey slabs
     page height     5,904px desktop / 7,705px mobile of undifferentiated
                     h3-then-paragraph

   The h1 size and the 832px cap are both fixed by rules already in
   guide-premium.css (`body#cms:has(.gde)` and `.page-cms.rich-text:has(.gde)`),
   which is the main reason this page joins the `.gde` system rather than
   getting a layout of its own.

   MARKUP CONSTRAINT, unchanged from guide-premium.css: the HTML lives in the
   database and is re-purified on every back-office save (PS_USE_HTMLPURIFIER =
   1, default doctype). HTMLPurifier strips <section>, data-* and aria-*.
   VERIFIED 2026-09-11 against Tools::purifyHTML: `class` AND `id` both survive
   (classes/Tools.php sets Attr.EnableID = true). The whole navigation here —
   jump chips, A-Z index, :target highlight and the per-term canonical anchor
   the DefinedTerm schema publishes — rests on `id` surviving. Keep the content
   to div/p/h2/h3/ul/li/span/strong/a + class + id.

   PALETTE: the pink/white/ink tokens guide-premium.css already defines. No new
   colours.
   ========================================================================== */

/* ---------- Widths ----------
   `.gde__block` is capped at 46rem (`--gde-measure`) for prose. The term grid
   and the A-Z index need more than that, on the same grounds the comparison
   tables did. */
.gls .gde__block:has(.gls__terms),
.gls .gde__block:has(.gls__az),
.gls .gde__block:has(.gls__chips) {
  max-width: 62rem;
}

/* THE TRAP THIS AVOIDS: widening a block widens every <p> in it too. On the
   `.gde` table blocks that produced 117-character lines against a 65-75ch
   target. Prose inside a widened block here is put back on the prose measure;
   only the grid itself gets the extra room.

   Scoped to `.gls` on purpose. The same defect exists on pages 10-13, but
   guide-premium.css is shared with those live pages and fixing it there is its
   own change to verify. */
.gls .gde__block:has(.gls__terms) > p,
.gls .gde__block:has(.gls__az) > p {
  max-width: var(--gde-measure);
}

/* ---------- Find panel ----------
   The one element the old page had no equivalent of. It holds the jump chips,
   and the search field glossary-premium.js injects into it at runtime — the
   field is NOT in the stored body, because <input> outside a <form> does not
   survive the purifier and a search box that vanishes on the next back-office
   save is worse than none. With JS off the panel is still a working table of
   contents, which is why the chips are real links in the body. */
.gls__find {
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.75rem) 1.5rem;
  border: 1px solid var(--skt-pink-border);
  border-radius: 18px;
  background: var(--skt-pink-tint);
}

.page-cms.rich-text .gls__find-t {
  margin: 0 0 .9rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--skt-pink-dark);
}

/* The search field, built in JS. Styled here so it matches the chips it sits
   above rather than inheriting the theme's form styling. */
.gls__search {
  position: relative;
  margin: 0 0 1.1rem;
}

.gls__search input {
  width: 100%;
  box-sizing: border-box;
  padding: .8rem 2.75rem .8rem 1rem;
  border: 1px solid var(--skt-pink-border);
  border-radius: 999px;
  background: #fff;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--skt-ink);
  -webkit-appearance: none;
  appearance: none;
}

.gls__search input::placeholder {
  color: var(--skt-muted);
  opacity: 1;
}

.gls__search input:focus {
  outline: 2px solid var(--skt-pink);
  outline-offset: 2px;
  border-color: var(--skt-pink);
}

/* Clear button, only shown while the field has something in it. */
.gls__clear {
  position: absolute;
  top: 50%;
  right: .5rem;
  transform: translateY(-50%);
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--skt-pink-tint);
  color: var(--skt-pink-dark);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.gls__clear:hover,
.gls__clear:focus-visible {
  background: var(--skt-pink);
  color: #fff;
}

/* Live result count, written by the script. Announced politely rather than
   assertively so a screen reader finishes the keystroke first. */
.gls__count {
  margin: .75rem 0 0;
  font-size: .85rem;
  color: var(--skt-muted);
  min-height: 1.2em;
}

/* The script appends this element on load and only fills it once something is
   typed. Left with its margin and min-height while empty it reserved ~30px of
   dead space under the chips, which read as unbalanced padding on the panel.
   Collapsed while empty instead; the panel grows by one line the moment a
   count appears, which is nothing beside the reflow the filtering itself
   causes. */
.gls__count:empty {
  margin: 0;
  min-height: 0;
}

/* ---------- Jump chips ---------- */
.page-cms.rich-text .gls__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
}

.page-cms.rich-text .gls__chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .85rem;
  border: 1px solid var(--skt-pink-border);
  border-radius: 999px;
  background: #fff;
  color: var(--skt-ink);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.page-cms.rich-text .gls__chip:hover,
.page-cms.rich-text .gls__chip:focus-visible {
  background: var(--skt-pink);
  border-color: var(--skt-pink);
  color: #fff;
  text-decoration: none;
}

/* The count rides inside the chip. A plain numeral after the label read as a
   footnote marker; a pill reads as a quantity. */
.gls__n {
  display: inline-block;
  min-width: 1.5rem;
  padding: .1rem .35rem;
  border-radius: 999px;
  background: var(--skt-pink-tint);
  color: var(--skt-pink-dark);
  font-size: .72rem;
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  text-align: center;
}

.page-cms.rich-text .gls__chip:hover .gls__n,
.page-cms.rich-text .gls__chip:focus-visible .gls__n {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}

/* ---------- A-Z index ----------
   Thirty-five terms as one dense block of links. This is the page's real
   navigation: it is the only place a reader can see every term at once, and
   every entry in it is the canonical anchor the DefinedTerm schema publishes
   as that term's `url`. */
.page-cms.rich-text .gls__az {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .5rem;
  margin: 1.25rem 0 0;
  max-width: none;
}

.page-cms.rich-text .gls__az a {
  display: inline-block;
  padding: .32rem .7rem;
  border: 1px solid var(--skt-pink-border);
  border-radius: 8px;
  background: #fff;
  color: var(--skt-muted);
  font-size: .85rem;
  line-height: 1.35;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.page-cms.rich-text .gls__az a:hover,
.page-cms.rich-text .gls__az a:focus-visible {
  background: var(--skt-pink-tint);
  border-color: var(--skt-pink);
  color: var(--skt-pink-dark);
  text-decoration: none;
}

/* ---------- Term grid ---------- */
.gls__terms {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: 1rem;
  margin-top: 1.5rem;
}

.gls__t {
  padding: 1.2rem 1.3rem 1.3rem;
  border: 1px solid var(--skt-pink-border);
  border-radius: 16px;
  background: #fff;
  transition: box-shadow .25s ease, border-color .25s ease;
}

/* ---------- Anchor landing ----------
   The theme header is `position: sticky`, so without this every jump link on
   this page — all 35 A-Z entries, the 6 section chips, and any external
   citation of a term — drops the reader at a heading hidden BEHIND the header.

   MEASURED on the live page in the scrolled state (`header.is-scrolled`), the
   only state a jump link can land in:

       390px   68px        992px   137px
       576px   68px       1200px  181px
       768px  181px       1440px  182px

   So: 5.5rem (88px) below 768, 12.5rem (200px) from 768 up. Both leave ~18px
   of clearance above the heading rather than butting it against the header.
   Re-measure these if the header layout changes. */
.gls__t,
.gls .gde__block[id] {
  scroll-margin-top: 5.5rem;
}

@media (min-width: 768px) {
  .gls__t,
  .gls .gde__block[id] {
    scroll-margin-top: 12.5rem;
  }
}

@media (hover: hover) {
  .gls__t:hover {
    box-shadow: 0 8px 24px rgba(213, 0, 117, .08);
  }
}

/* Arriving from the A-Z index or from an external citation, the term the link
   named is marked. Without this the reader lands mid-grid with no idea which
   of the six visible cards they were sent to. */
.gls__t:target {
  border-color: var(--skt-pink);
  box-shadow: 0 0 0 3px var(--skt-pink-tint);
}

.page-cms.rich-text .gls__t .gde__h3 {
  margin: 0 0 .55rem;
  font-size: 1.125rem;
}

.page-cms.rich-text .gls__t p {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.65;
}

.page-cms.rich-text .gls__t p + p {
  margin-top: .6rem;
}

/* "Also called" — the trade synonyms a buyer is as likely to search for as the
   heading itself. Quieter than the definition; it is a cross-reference, not
   part of the meaning. */
.page-cms.rich-text .gls__t .gls__also {
  font-size: .82rem;
  line-height: 1.5;
  color: var(--skt-muted);
}

.gls__also strong {
  color: var(--skt-ink);
  font-weight: 600;
}

@media (max-width: 767.98px) {
  .gls__terms {
    grid-template-columns: 1fr;
  }
}

/* ---------- Back to index ---------- */
.page-cms.rich-text .gls__back {
  margin: 1.25rem 0 0;
  font-size: .85rem;
}

.page-cms.rich-text .gls__back a {
  color: var(--skt-muted);
  text-decoration: none;
}

.page-cms.rich-text .gls__back a::before {
  content: "\2191";
  margin-right: .4rem;
  color: var(--skt-pink);
}

.page-cms.rich-text .gls__back a:hover,
.page-cms.rich-text .gls__back a:focus-visible {
  color: var(--skt-pink-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Search filtering ----------
   Set by glossary-premium.js. Class-driven rather than inline styles so a
   filtered card keeps whatever the reveal transition left on it. */
.gls .is-filtered-out {
  display: none;
}

/* A block whose every term is filtered out hides its heading and standfirst
   too, so the reader is not left scrolling past six empty section titles. */
.gls .gde__block.is-empty {
  display: none;
}

.gls__none {
  margin: 1.5rem 0 0;
  padding: 1.25rem 1.4rem;
  border: 1px dashed var(--skt-pink-border);
  border-radius: 14px;
  background: var(--skt-pink-tint);
  font-size: .9375rem;
  color: var(--skt-ink);
}

/* ---------- Print ----------
   A glossary is printed as a bench reference. The find panel is dead on paper;
   the terms are the point, and none of them should straddle a page break. */
@media print {
  .gls__find,
  .gls__back {
    display: none;
  }

  .gls__terms {
    grid-template-columns: 1fr;
  }

  .gls__t {
    break-inside: avoid;
    box-shadow: none;
  }
}