/* The house catalogue (njreid/woodwerx#22): /designs, /designs/{slug}, /styles/{slug} and
   the glossary placeholder. Uses the tokens in kj.css (loaded by every page); nothing here
   is a colour literal. */

/* `.wrap` (kj.css) gives the horizontal padding and max-width every other page family
   applies by hand around its own sections; catalogue pages have no sections of their own,
   so this is the one place that padding needs to live. */
.kj-cat-page {
  padding-top: 2rem;
  padding-bottom: 3rem;
}

/* The design detail page's own h1, with Configure beside it rather than at the foot of the
   page (catalogue.rs's render_design) — wraps under narrow viewports; kj.css's own h1 bottom
   margin still applies, so the row's own alignment doesn't need to fight it. */
.kj-cat-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}
.kj-cat-heading h1 { margin-bottom: 0; }

.kj-cat-groupby {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 1rem 0 0.75rem;
}

.kj-cat-groupby-label {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.kj-cat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* The pressed pill differs in weight and border width as well as colour, so the state does
   not rest on colour alone. */
.kj-pill {
  font: inherit;
  padding: 0.4rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
}

.kj-pill[aria-pressed="true"] {
  font-weight: 700;
  border: 2px solid var(--ink);
  padding: calc(0.4rem - 1px) calc(1rem - 1px);
  background: var(--ok-bg);
}

.kj-pill:focus-visible,
.kj-cat-card:focus-visible,
.kj-chip:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.kj-cat-groupby-help {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}

/* One-level table of contents, left of the grouped sections (owner-requested). Same shape as
   `landing.css`'s `.coll-page-layout`/`.coll-sidenav` (the collections page's own left nav):
   a fixed-width sticky column that stacks above the content under a narrow viewport. */
.kj-cat-layout { display: flex; gap: 32px; align-items: flex-start; }
.kj-cat-toc { flex: none; width: 180px; position: sticky; top: 16px; }
.kj-cat-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.kj-cat-toc a { display: block; padding: 6px 10px; border-radius: var(--radius); color: var(--ink-soft); text-decoration: none; font-size: 0.92rem; }
.kj-cat-toc a:hover { background: var(--surface-2); color: var(--ink); }
.kj-cat-sections { flex: 1; min-width: 0; }
/* The section the ToC jumps to: clear of the sticky header on landing (same technique
   `.kj-glossary-row` above and `hardware.css`'s `.hw-kind-block` already use). */
.kj-cat-group { scroll-margin-top: var(--kj-anchor-offset, 5rem); }
@media (max-width: 720px) {
  .kj-cat-layout { flex-direction: column; gap: 16px; }
  .kj-cat-toc { width: 100%; position: static; }
  .kj-cat-toc ul { flex-direction: row; flex-wrap: wrap; }
}

.kj-cat-group {
  margin: 1.5rem 0 2rem;
}

.kj-cat-group h2 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

.kj-cat-count {
  font-weight: 400;
  font-size: 0.9em;
  color: var(--ink-soft);
}

.kj-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.25rem;
  margin: 1rem 0 2rem;
}

.kj-cat-empty {
  color: var(--ink-faint);
  grid-column: 1 / -1;
}

.kj-cat-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  text-decoration: none;
  color: var(--ink);
}

/* The favorites heart (issue #68, `catalogue::design_card`, static/favorites.js): a button in
   the card's top-right corner, over the thumbnail. */
.kj-cat-card { position: relative; }
.kj-cat-heart {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  z-index: 1;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.kj-cat-heart[aria-pressed="true"] { color: var(--danger); }
.kj-cat-heart:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* `/favorites` cards (crate::favorites): a link to the configuration and a Remove button. */
.kj-fav-link { display: block; color: inherit; text-decoration: none; }
.kj-fav-remove { margin-top: 0.5rem; }

.kj-cat-card h3 {
  margin: 0.5rem 0 0.25rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.kj-cat-thumb {
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.kj-cat-thumb svg {
  width: 100%;
  height: 100%;
}

/* The two theme renders (tools/render/thumbnails.mjs) — one shown, one hidden, picked the
   same way kj.css's own theme toggle picks dark vs light (shell.rs's THEME_TOGGLE_JS):
   explicit [data-theme] wins, otherwise prefers-color-scheme. */
.kj-cat-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kj-cat-thumb img.thumb-dark { display: none; }
:root[data-theme="dark"] .kj-cat-thumb img.thumb-light { display: none; }
:root[data-theme="dark"] .kj-cat-thumb img.thumb-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kj-cat-thumb img.thumb-light { display: none; }
  :root:not([data-theme="light"]) .kj-cat-thumb img.thumb-dark { display: block; }
}

.kj-cat-thumb--large {
  max-width: 32rem;
  margin: 1rem 0;
}

/* A style's history/elements copy (catalogue.rs's style_page) — plain prose, no new layout
   beyond a readable measure and the spacing every other section on this page already gets. */
.kj-style-copy {
  max-width: 65ch;
}

/* Per-style colour and type (njreid/woodwerx styles redesign): both `styles_index`'s cards
   (`.kj-style-card`) and each style's own detail page (`.kj-style-page`) set two inline
   custom properties — `--style-hue` (0-360, `StyleContentEntry::accent_hue`) and
   `--style-font` (that style's Google Font, plus the shared display fallback) — and read
   them back here. One hue per style, not a hand-picked hex, so every style gets a real
   light/dark palette for free: saturation and lightness are fixed by theme below, only the
   hue moves. Values were chosen to give roughly the same contrast in both themes (a light
   near-white tint against a dark, saturated ink in light mode; a dark, muted tint against a
   light, saturated ink in dark mode) rather than eyeballed per style. */
.kj-style-card,
.kj-style-page {
  --style-accent: hsl(var(--style-hue) 55% 32%);
  --style-accent-bg: hsl(var(--style-hue) 42% 95%);
  --style-accent-line: hsl(var(--style-hue) 35% 78%);
}
:root[data-theme="dark"] .kj-style-card,
:root[data-theme="dark"] .kj-style-page {
  --style-accent: hsl(var(--style-hue) 70% 78%);
  --style-accent-bg: hsl(var(--style-hue) 32% 16%);
  --style-accent-line: hsl(var(--style-hue) 32% 34%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kj-style-card,
  :root:not([data-theme="light"]) .kj-style-page {
    --style-accent: hsl(var(--style-hue) 70% 78%);
    --style-accent-bg: hsl(var(--style-hue) 32% 16%);
    --style-accent-line: hsl(var(--style-hue) 32% 34%);
  }
}

/* Bigger cards than the plain `.kj-cat-card` grid (`/designs`'s own cards keep the smaller
   layout) — this treatment needs room for a display-sized heading in its own font. */
.kj-cat-grid--styles {
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 1.5rem;
}

/* The /styles tiles: a saturated field in the style's hue, a bold pattern that evokes the
   period (data-motif, from style-content.json), the style's own display font, and the first
   few designs in it. Colours come from --style-hue only, so a new style needs a hue and a
   motif name and nothing else. The pattern fades toward the text side to keep the title
   readable. Light and dark share the structure; dark just sinks the field. */
.kj-style-card {
  --tile-bg: hsl(var(--style-hue) 62% 33%);
  --tile-fg: #fff;
  --c1: hsl(var(--style-hue) 80% 58% / 0.5);
  --c2: hsl(calc(var(--style-hue) + 155) 90% 64% / 0.85);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 13rem;
  padding: 1.5rem 1.5rem 1.25rem;
  background: var(--tile-bg);
  border-color: hsl(var(--style-hue) 60% 22%);
  color: var(--tile-fg);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kj-style-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
:root[data-theme="dark"] .kj-style-card {
  --tile-bg: hsl(var(--style-hue) 58% 19%);
  --tile-fg: hsl(var(--style-hue) 100% 93%);
  --c1: hsl(var(--style-hue) 70% 42% / 0.55);
  --c2: hsl(calc(var(--style-hue) + 155) 80% 52% / 0.8);
  border-color: hsl(var(--style-hue) 55% 32%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kj-style-card {
    --tile-bg: hsl(var(--style-hue) 58% 19%);
    --tile-fg: hsl(var(--style-hue) 100% 93%);
    --c1: hsl(var(--style-hue) 70% 42% / 0.55);
    --c2: hsl(calc(var(--style-hue) + 155) 80% 52% / 0.8);
    border-color: hsl(var(--style-hue) 55% 32%);
  }
}

.kj-style-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(105deg, rgba(0, 0, 0, 0.12) 0%, #000 85%);
  mask-image: linear-gradient(105deg, rgba(0, 0, 0, 0.12) 0%, #000 85%);
}

.kj-style-card h3 {
  font-family: var(--style-font, var(--font-display));
  font-weight: var(--style-weight, 400);
  font-size: 2rem;
  line-height: 1.1;
  color: var(--tile-fg);
  margin: 0 0 0.6rem;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.28);
  overflow-wrap: anywhere;
}

.kj-style-models {
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.kj-style-models li::before { content: "\2022\00a0"; opacity: 0.7; }
.kj-style-models .kj-style-more { opacity: 0.8; font-style: italic; }

.kj-style-card .kj-cat-size {
  color: var(--tile-fg);
  opacity: 0.85;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Patterns. --c1 is the style's own lighter tint, --c2 a contrasting pop. */
.kj-style-card[data-motif="rings"]::before { background:
  radial-gradient(circle at 104% 108%, var(--c2) 0 16px, transparent 17px),
  repeating-radial-gradient(circle at 104% 108%, var(--c1) 0 7px, transparent 7px 20px); }
.kj-style-card[data-motif="slats"]::before { background:
  repeating-linear-gradient(0deg, var(--c2) 0 5px, transparent 5px 46px),
  repeating-linear-gradient(90deg, var(--c1) 0 12px, transparent 12px 60px); }
.kj-style-card[data-motif="fan"]::before { background:
  radial-gradient(circle at 78% 112%, var(--c2) 0 20%, transparent 20.5%),
  repeating-conic-gradient(from -90deg at 78% 112%, var(--c1) 0 7.5deg, transparent 7.5deg 15deg); }
.kj-style-card[data-motif="waves"]::before { background:
  radial-gradient(circle at 100% 50%, transparent 20%, var(--c1) 21%, var(--c1) 34%, transparent 35%) 0 0 / 64px 80px,
  radial-gradient(circle at 0% 50%, transparent 20%, var(--c2) 21%, var(--c2) 34%, transparent 35%) 0 -40px / 64px 80px; }
.kj-style-card[data-motif="grid"]::before { background:
  radial-gradient(circle at 84% 34%, var(--c2) 0 38px, transparent 39px),
  linear-gradient(var(--c1) 2px, transparent 2px) 0 0 / 30px 30px,
  linear-gradient(90deg, var(--c1) 2px, transparent 2px) 0 0 / 30px 30px; }
.kj-style-card[data-motif="stripes"]::before { background:
  repeating-linear-gradient(90deg, transparent 0 24px, var(--c2) 24px 27px, transparent 27px 48px),
  repeating-linear-gradient(90deg, var(--c1) 0 24px, transparent 24px 48px); }
.kj-style-card[data-motif="lattice"]::before { background:
  radial-gradient(circle at 17px 17px, var(--c2) 0 4px, transparent 5px) 0 0 / 34px 34px,
  linear-gradient(var(--c1) 5px, transparent 5px) 0 0 / 34px 34px,
  linear-gradient(90deg, var(--c1) 5px, transparent 5px) 0 0 / 34px 34px; }
.kj-style-card[data-motif="fret"]::before { background:
  repeating-linear-gradient(-45deg, var(--c2) 0 2px, transparent 2px 26px),
  repeating-linear-gradient(45deg, var(--c1) 0 6px, transparent 6px 26px); }
.kj-style-card[data-motif="lines"]::before { background:
  radial-gradient(circle at 84% 50%, transparent 0 34px, var(--c2) 34px 36px, transparent 37px),
  repeating-linear-gradient(0deg, var(--c1) 0 1px, transparent 1px 14px); }
.kj-style-card[data-motif="gingham"]::before { background:
  repeating-linear-gradient(0deg, var(--c1) 0 20px, transparent 20px 40px),
  repeating-linear-gradient(90deg, var(--c1) 0 20px, transparent 20px 40px); }
.kj-style-card[data-motif="planks"]::before { background:
  radial-gradient(ellipse 14px 8px at 74% 36%, var(--c2) 0 60%, transparent 70%),
  radial-gradient(ellipse 10px 6px at 30% 78%, var(--c2) 0 60%, transparent 70%),
  repeating-linear-gradient(90deg, transparent 0 58px, var(--c1) 58px 62px); }
.kj-style-card[data-motif="grain"]::before { background:
  repeating-linear-gradient(-2deg, var(--c2) 0 1px, transparent 1px 26px),
  repeating-linear-gradient(3deg, var(--c1) 0 2px, transparent 2px 8px); }
.kj-style-card[data-motif="chevron"]::before { background:
  linear-gradient(135deg, var(--c1) 25%, transparent 25%) -18px 0 / 36px 36px,
  linear-gradient(225deg, var(--c1) 25%, transparent 25%) -18px 0 / 36px 36px,
  linear-gradient(315deg, var(--c2) 25%, transparent 25%) 0 0 / 36px 36px,
  linear-gradient(45deg, var(--c2) 25%, transparent 25%) 0 0 / 36px 36px; }
.kj-style-card[data-motif="sunburst"]::before { background:
  radial-gradient(circle at 100% 0, var(--c2) 0 44px, transparent 45px),
  repeating-conic-gradient(from 90deg at 100% 0, var(--c1) 0 6deg, transparent 6deg 12deg); }
.kj-style-card[data-motif="stitch"]::before { background:
  radial-gradient(circle at 7px 7px, var(--c2) 0 2px, transparent 3px) 0 0 / 14px 14px,
  linear-gradient(45deg, transparent 46%, var(--c1) 46% 54%, transparent 54%) 0 0 / 28px 28px,
  linear-gradient(-45deg, transparent 46%, var(--c1) 46% 54%, transparent 54%) 0 0 / 28px 28px; }
.kj-style-card[data-motif="banding"]::before { background:
  repeating-linear-gradient(0deg, transparent 0 14px, var(--c1) 14px 19px, transparent 19px 23px, var(--c2) 23px 24px, transparent 24px 42px); }
.kj-style-card[data-motif="rosette"]::before { background:
  repeating-conic-gradient(from 0deg at 88% 30%, var(--c2) 0 12deg, transparent 12deg 30deg),
  repeating-radial-gradient(circle at 88% 30%, transparent 0 9px, var(--c1) 9px 12px); }
.kj-style-card[data-motif="pegs"]::before { background:
  radial-gradient(circle at 18px 18px, var(--c2) 0 6px, transparent 7px) 0 0 / 40px 40px,
  linear-gradient(transparent 15px, var(--c1) 15px 21px, transparent 21px) 0 0 / 100% 40px; }
.kj-style-card[data-motif="diamonds"]::before { background:
  linear-gradient(135deg, var(--c1) 25%, transparent 25%) -20px 0 / 40px 40px,
  linear-gradient(225deg, var(--c1) 25%, transparent 25%) -20px 0 / 40px 40px,
  linear-gradient(315deg, var(--c2) 25%, transparent 25%) 0 0 / 40px 40px; }
.kj-style-card[data-motif="seigaiha"]::before { background:
  radial-gradient(circle at 50% 100%, transparent 0 7px, var(--c1) 7px 9px, transparent 9px 15px, var(--c1) 15px 17px, transparent 17px 23px, var(--c2) 23px 25px, transparent 25px) 0 0 / 50px 25px,
  radial-gradient(circle at 50% 100%, transparent 0 7px, var(--c1) 7px 9px, transparent 9px 15px, var(--c1) 15px 17px, transparent 17px 23px, var(--c2) 23px 25px, transparent 25px) 25px 12.5px / 50px 25px; }
.kj-style-card[data-motif="confetti"]::before { background:
  radial-gradient(circle at 16px 16px, var(--c2) 0 7px, transparent 8px) 0 0 / 72px 72px,
  linear-gradient(135deg, var(--c1) 25%, transparent 25%) 0 0 / 46px 46px,
  repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.35) 0 3px, transparent 3px 14px); }
.kj-style-card[data-motif="atomic"]::before { background:
  radial-gradient(circle at 12px 12px, var(--c2) 0 4px, transparent 5px) 0 0 / 48px 48px,
  radial-gradient(circle at 36px 36px, var(--c1) 0 11px, transparent 12px) 0 0 / 48px 48px; }
.kj-style-card[data-motif="hexsign"]::before { background:
  radial-gradient(circle at 86% 50%, transparent 0 66px, var(--c2) 66px 70px, transparent 71px),
  radial-gradient(circle at 86% 50%, var(--c2) 0 24px, transparent 25px),
  repeating-conic-gradient(from 0deg at 86% 50%, var(--c1) 0 7.5deg, transparent 7.5deg 15deg); }
.kj-style-card[data-motif="dots"]::before { background:
  radial-gradient(circle, var(--c1) 0 6px, transparent 7px) 0 0 / 24px 24px,
  radial-gradient(circle, var(--c2) 0 6px, transparent 7px) 12px 12px / 24px 24px; }
.kj-style-card[data-motif="reeds"]::before { background:
  repeating-linear-gradient(90deg, var(--c1) 0 7px, transparent 7px 11px, var(--c2) 11px 12px, transparent 12px 16px); }
.kj-style-card[data-motif="scallop"]::before { background:
  radial-gradient(circle at 50% 0, transparent 0 14px, var(--c2) 14px 16px, transparent 16px) 17px 8px / 34px 16px,
  radial-gradient(circle at 50% 0, transparent 0 14px, var(--c1) 14px 16px, transparent 16px) 0 0 / 34px 16px; }
.kj-style-card[data-motif="tiles"]::before { background:
  linear-gradient(45deg, transparent 42%, var(--c2) 42% 58%, transparent 58%) 0 0 / 44px 44px,
  conic-gradient(var(--c1) 25%, transparent 0 50%, var(--c1) 0 75%, transparent 0) 0 0 / 44px 44px; }
.kj-style-card[data-motif="spindles"]::before { background:
  linear-gradient(0deg, var(--c2) 0 7px, transparent 7px) 0 88% / 100% 100% no-repeat,
  repeating-linear-gradient(90deg, transparent 0 9px, var(--c1) 9px 16px, transparent 16px 26px); }

/* The detail page (catalogue.rs's style_page): the accent carries through the title, the
   History/Elements subheadings and the Wikipedia/leaders links, but deliberately stops
   there — the sliders table, joints list and licence line stay on the page's ordinary ink
   tokens so data stays legible and nothing here fights `.kj-cat-sliders`/`.kj-cat-joints`. */
.kj-style-page h1#style-title {
  font-family: var(--style-font, var(--font-display));
  color: var(--style-accent);
}

.kj-style-copy h2 {
  font-family: var(--style-font, var(--font-display));
  color: var(--style-accent);
}

/* Breathing room between the History/Elements copy and the designs grid. */
.kj-style-page .kj-style-designs-head {
  margin-top: clamp(3rem, 7vw, 5rem);
}

.kj-style-copy .kj-cat-source a {
  color: var(--style-accent);
}

.kj-style-leaders {
  margin-top: 1.5rem;
}

.kj-style-leaders p {
  color: var(--ink-soft);
}

.kj-style-leaders ul {
  padding-left: 1.25rem;
  margin: 0.5rem 0 0;
}

.kj-style-leaders a {
  color: var(--style-accent);
  font-weight: 600;
}

/* The read-only 3D viewer embed on a design's own page (catalogue.rs's render_design) —
   sized the same way configure.css sizes the configurator's own copy of this iframe. */
.kj-cat-hero-viewer {
  margin: 1rem 0;
  position: relative;
}

.kj-cat-hero-frame {
  width: 100%;
  height: min(70vh, 640px);
  min-height: 360px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.kj-cat-noimg {
  color: var(--ink-faint);
  font-size: 0.85rem;
}

.kj-cat-size {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: 0.25rem 0;
}

.kj-cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0 1rem;
}

.kj-chip {
  display: inline-block;
  font-size: 0.8rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--ok-bg);
  color: var(--ink);
  border: 1px solid var(--line);
  text-decoration: none;
}

.kj-cat-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.kj-cat-sliders {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 1.5rem;
  font-size: 0.9rem;
  white-space: nowrap;
}

.kj-cat-sliders th,
.kj-cat-sliders td {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--line);
}

.kj-cat-joints {
  padding-left: 1.25rem;
}

/* The glossary (catalogue.rs's glossary_page): a term and its definition, each pair
   wrapped in a div (HTML5 permits one or more div children of dl, each carrying a
   dt/dd group) so the drawing and the text can sit side by side rather than stacked. */
.kj-glossary {
  margin: 0 0 2rem;
}
.kj-glossary-row {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-top: 1.75rem;
  scroll-margin-top: var(--kj-anchor-offset, 5rem);
}
.kj-glossary-text {
  flex: 1 1 auto;
  min-width: 0;
}
.kj-glossary dt {
  font-weight: 600;
  font-size: 1.05rem;
}
.kj-glossary dd {
  margin: 0.25rem 0 0;
}
/* The viewer's own vendored IBM Plex Mono (crates/kj-web mounts viewer/vendor/ at
   /app/vendor/ — configure.rs/catalogue.rs's own KJ_ASSETS pattern); falls back to a system
   monospace stack if KJ_ASSETS isn't configured (the drawings themselves still render, just
   in a different font, the same graceful-degradation the rest of this page already has). */
@font-face {
  font-family: "KJ Viewer Mono";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/app/vendor/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}

/* kj.css's --surface/--ink now share the viewer's own vellum/blueprint palette
   (viewer/index.html's --panel/--paper/--ink), so a glossary drawing reads as a page
   out of the viewer itself just by following the site's own theme. */
.kj-glossary-drawing {
  flex: 0 0 auto;
  width: 20rem;
  max-width: 40%;
  margin: 0;
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}
/* Rendered model drawings: transparent WebP on the same --surface card, light/dark pair
   toggled like .kj-cat-thumb's. */
.kj-glossary-model { padding: 0.25rem; }
.kj-glossary-model img { display: block; width: 100%; height: auto; }
.kj-glossary-model img.gl-dark { display: none; }
:root[data-theme="dark"] .kj-glossary-model img.gl-light { display: none; }
:root[data-theme="dark"] .kj-glossary-model img.gl-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kj-glossary-model img.gl-light { display: none; }
  :root:not([data-theme="light"]) .kj-glossary-model img.gl-dark { display: block; }
}
.kj-glossary-drawing svg {
  width: 100%;
  height: auto;
}
.kj-glossary-drawing svg text {
  font-family: "KJ Viewer Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

.kj-cat-joints a {
  color: var(--accent-strong);
}

.kj-cat-licence,
.kj-cat-source {
  color: var(--ink-faint);
  font-size: 0.85rem;
}

@media (max-width: 640px) {
  .kj-cat-grid--styles {
    grid-template-columns: 1fr;
  }

  .kj-glossary-row {
    flex-direction: column;
  }

  .kj-glossary-drawing {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 375px) {
  .kj-cat-grid {
    grid-template-columns: 1fr;
  }

  .kj-style-card {
    min-height: 0;
  }

  .kj-cat-pills {
    width: 100%;
  }

  .kj-pill {
    flex: 1 1 auto;
  }
}

/* "Hardware for this style" (hardware.rs::for_style_markup): chips grouped by kind of hardware. */
.kj-style-hardware {
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

.kj-style-hardware-lede {
  color: var(--ink-soft);
}

.kj-style-hardware-list {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr);
  gap: 0.5rem 1rem;
  margin: 0 0 1rem;
}

.kj-style-hardware-list dt {
  color: var(--ink-faint);
  font-weight: 600;
  font-size: 0.9rem;
}

.kj-style-hardware-list dd {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
}

@media (max-width: 520px) {
  .kj-style-hardware-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
  }
  .kj-style-hardware-list dd {
    margin-bottom: 0.6rem;
  }
}