/* /guide/assets/guide.css — the Guide section, in the glossary's clothes.

   This file is not "inspired by" /glossary/. It is built on the glossary's own stylesheet:
   the same custom properties, the same type scale, the same component geometry, the same
   breakpoints. Light background, ink #16161a, accent #33527f, system sans, 900px wrap,
   rounded 10px table box, micro-caps section labels, and the fixed capsule bar at the
   bottom with the sheet that opens out of its middle button.

   What is added on top: the article body (the glossary is a table index, the guide is prose),
   the novel-picks block, the glossary term pills, and the index card grid. Every addition
   reuses the glossary's variables and spacing rhythm so the two sections read as one site.

   Source of truth: /glossary/index.html inline <style>. If that page is restyled, re-copy
   from it — do not patch around the difference. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --ink: #16161a;
  --dim: #6b6b73;
  --line: #e3e3dd;
  --soft: #f8f8f5;
  --bg: #fff;
  --accent: #33527f;
  --mark: #fff3c4;
}

/* the glossary ships a dark scheme; so does this one, off the same variables */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8e8e2;
    --dim: #96968f;
    --line: #2c2c29;
    --soft: #1a1a18;
    --bg: #131312;
    --accent: #9bb6dc;
    --mark: #3d3620;
  }
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.62 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

.wrap { max-width: 900px; margin: 0 auto; padding: 0 22px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; background: var(--bg); padding: 8px 12px; border: 1px solid var(--line); z-index: 99; }

/* ---------- header, verbatim from the glossary ---------- */

header.site {
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 30;
}
header.site .wrap { display: flex; align-items: center; gap: 20px; min-height: 56px; }

.brand { font-weight: 700; font-size: 16px; color: var(--ink); letter-spacing: -0.2px; white-space: nowrap; }
.brand span { color: var(--dim); font-weight: 400; font-size: 13px; margin-left: 6px; font-family: inherit; }
.brand:hover { text-decoration: none; color: var(--ink); }

nav.top { margin-left: auto; display: flex; gap: 16px; font-size: 13.5px; }
nav.top a { color: var(--dim); }
nav.top a:hover { color: var(--ink); text-decoration: none; }
nav.top a[aria-current="page"] { color: var(--ink); font-weight: 600; }

main { padding: 34px 0 120px; }

/* A short page (the index with one card) leaves the soft footer floating with a white gap
   under it, because main's 120px bottom padding sits above the footer, not inside it.
   Stretch the content column so the footer always meets the bottom edge. */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
footer.site { flex: 0 0 auto; }

/* ---------- type scale, verbatim ---------- */

h1 { font-size: 29px; line-height: 1.22; letter-spacing: -0.5px; margin: 0 0 10px; font-weight: 700; }
h2 { font-size: 17px; letter-spacing: -0.1px; margin: 32px 0 10px; font-weight: 700; }
h3 { font-size: 14.5px; margin: 18px 0 6px; font-weight: 700; }

.crumb { font-size: 12.5px; color: var(--dim); margin: 0 0 14px; }
.crumb a { color: var(--dim); }
.crumb a:hover { color: var(--accent); }

.meta {
  font-size: 13px;
  color: var(--dim);
  margin: 0 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
}
.meta span + span::before { content: "·"; margin-right: 10px; opacity: 0.7; }

.lead { margin: 0 0 14px; max-width: 72ch; }
.lead p { margin: 0 0 12px; }

/* The lead of an article: a left rule, the same device the glossary uses for .summary */
.lede {
  border-left: 3px solid var(--line);
  padding: 2px 0 2px 16px;
  margin: 0 0 26px;
  max-width: 74ch;
  font-size: 15.5px;
  color: var(--ink);
}
.lede p { margin: 0; }

/* ---------- article body ---------- */

.g-body { max-width: 74ch; }
.g-body p { margin: 0 0 14px; }
.g-body ul, .g-body ol { margin: 0 0 16px; padding-left: 20px; }
.g-body li { margin-bottom: 6px; }
.g-body h2 { scroll-margin-top: 72px; }
.g-body h3 { font-size: 14.5px; margin: 22px 0 6px; }
.g-body strong { font-weight: 700; }

.g-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  background: var(--soft);
  border: 1px solid var(--line);
  padding: 0 4px;
  border-radius: 4px;
}

.g-body blockquote {
  border-left: 3px solid var(--line);
  padding: 2px 0 2px 16px;
  margin: 22px 0;
  color: var(--dim);
  font-size: 15px;
}

.g-body hr { border: 0; border-top: 1px solid var(--line); margin: 30px 0; }

/* table: the glossary's .tblwrap, unchanged */
.tblwrap { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 20px 0 22px; }
.tblwrap table { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 0; }
.tblwrap thead th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  text-align: left;
  padding: 11px 15px;
  color: var(--dim);
  background: var(--soft);
  border-bottom: 1px solid var(--line);
}
.tblwrap tbody td {
  padding: 11px 15px;
  font-size: 14px;
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid var(--line);
  overflow-wrap: break-word;
  word-break: normal;
}
.tblwrap tbody tr:last-child td { border-bottom: 0; }
.tblwrap th:first-child, .tblwrap td:first-child { width: 30%; }
/* A four-column table with a numbering column cannot give 30% to a digit. When the header
   row has exactly four cells, switch the whole table to an explicit split: number, term,
   then the two prose columns share the rest evenly. */
.tblwrap table:has(thead th:nth-child(4):last-child) { table-layout: fixed; }
.tblwrap table:has(thead th:nth-child(4):last-child) th:first-child,
.tblwrap table:has(thead th:nth-child(4):last-child) td:first-child { width: 6%; }
.tblwrap table:has(thead th:nth-child(4):last-child) th:nth-child(2),
.tblwrap table:has(thead th:nth-child(4):last-child) td:nth-child(2) { width: 18%; }
.tblwrap table:has(thead th:nth-child(4):last-child) thead th { padding-left: 12px; padding-right: 12px; white-space: normal; overflow-wrap: normal; }
.tblwrap table:has(thead th:nth-child(4):last-child) thead th:first-child { padding-left: 15px; }
.tblwrap table:has(thead th:nth-child(4):last-child) th:nth-child(3),
.tblwrap table:has(thead th:nth-child(4):last-child) td:nth-child(3),
.tblwrap table:has(thead th:nth-child(4):last-child) th:nth-child(4),
.tblwrap table:has(thead th:nth-child(4):last-child) td:nth-child(4) { width: 39%; }

/* ---------- FAQ: <details>, glossary voice ---------- */

.g-faq { margin-top: 34px; }
.g-faq h2 { margin-top: 26px; }
.g-faq details { border-top: 1px solid var(--line); padding: 12px 0; }
.g-faq details:last-of-type { border-bottom: 1px solid var(--line); }
.g-faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.g-faq summary::-webkit-details-marker { display: none; }
.g-faq summary::after { content: "+"; color: var(--accent); flex: 0 0 auto; }
.g-faq details[open] summary::after { content: "\2212"; }
.g-faq p { margin: 10px 0 2px; color: var(--dim); font-size: 15px; }

/* ---------- novel picks: the glossary's .readmore, same box, same cards ---------- */

.readmore {
  margin: 30px 0 0;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
}
.readmore h2 {
  font-size: 13px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 8px;
  font-weight: 600;
}
.rmintro { font-size: 13.5px; color: var(--dim); margin: 0 0 14px; max-width: 66ch; }

.rmcard {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  color: inherit;
}
.rmcard:hover { text-decoration: none; }
.rmn { flex: 0 0 20px; font-style: normal; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
.rmtext { min-width: 0; }
.rmtag {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0 5px;
  margin-bottom: 4px;
  background: var(--bg);
}
.rmcard b { display: block; font-size: 14.5px; font-weight: 600; color: var(--accent); line-height: 1.4; }
.rmcard:hover b { text-decoration: underline; }
.rmcard em { display: block; font-style: normal; font-size: 12.5px; color: var(--dim); margin-top: 3px; line-height: 1.5; }

.rmall { margin: 14px 0 0; font-size: 13px; }

/* ---------- related guides: sibling questions in this section ---------- */

.related {
  margin: 26px 0 0;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}
.related h2 {
  font-size: 13px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 6px;
  font-weight: 600;
}
.related ul { list-style: none; margin: 0; padding: 0; }
.related li { margin: 0; border-top: 1px solid var(--line); }
.related li:first-child { border-top: 0; }
.related a {
  display: block;
  padding: 10px 0;
  color: inherit;
}
.related a:hover { text-decoration: none; }
.related b { display: block; font-size: 14.5px; font-weight: 600; color: var(--accent); line-height: 1.4; }
.related a:hover b { text-decoration: underline; }
.related em { display: block; font-style: normal; font-size: 12.5px; color: var(--dim); margin-top: 3px; line-height: 1.5; }

/* ---------- topics: keyword pages, and the topic block on the index ----------

   A topic page is one question broadened: "everything on qi". It gets its own URL, its own
   title, its own List markup, because that is the only version of it a search engine can rank.
   The visual language is the glossary's — the same 1px-gap grid the index uses for its cards,
   the same .related box an article uses for "other questions". No new vocabulary. */

.tgroups { margin: 26px 0 0; }
.tgroup__h {
  font-size: 11px;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 600;
  margin: 20px 0 8px;
}
.tgroup__h:first-child { margin-top: 0; }

.tclist { list-style: none; margin: 0; padding: 0; }
.tclist--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 258px), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.tclist--grid > li { margin: 0; background: var(--bg); }
/* Row fillers. The grid's background is the divider colour, so a short final row leaves a grey
   block where the missing card would be. These stand in for it and take the page background,
   which also means they are invisible when a viewport happens to fill the row without them. */
.tclist--grid > li.tfiller { background: var(--bg); pointer-events: none; }

/* A group with a single card: auto-fit would stretch that one card across the full 900px and
   it would read as a banner, not a card. Fall back to a fixed track so the card keeps its
   normal size and sits at the left edge where the group's heading is. The empty space to its
   right is honest — that group really does have one article in it today. */
.tclist--grid:has(> li:only-child) {
  grid-template-columns: minmax(min(100%, 258px), 1fr);
  max-width: calc(33.333% - 1px);
}
@media (max-width: 640px) {
  .tclist--grid:has(> li:only-child) { max-width: none; }
}

.tcard { display: flex; flex-direction: column; height: 100%; padding: 13px 15px; color: inherit; }
.tcard:hover { text-decoration: none; background: var(--soft); }
.tcard__top { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.tcard__g { font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); }
.tcard__g::before { content: "·"; margin-right: 7px; }
.tcard i { font-style: normal; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); font-variant-numeric: tabular-nums; }
.tcard b { font-size: 14.5px; font-weight: 600; line-height: 1.35; margin-top: 3px; }
.tcard:hover b { color: var(--accent); }
.tcard em { font-style: normal; font-size: 12.5px; color: var(--dim); line-height: 1.45; margin-top: 3px; }

/* the topic page's article list: a numbered row, the same weight as .related, but with the
   kind label so a reader can tell a comparison from a reading list before clicking. */
.trowlist { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--line); }
.trowlist li { margin: 0; border-bottom: 1px solid var(--line); }
.trowlist a { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; color: inherit; }
.trowlist a:hover { text-decoration: none; }
.trowlist a:hover b { color: var(--accent); text-decoration: underline; }
.trowlist i {
  flex: 0 0 22px;
  font-style: normal;
  font-size: 12px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.trow { min-width: 0; display: block; }
.trow__kind { display: block; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); margin-bottom: 2px; }
.trow b { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.36; }
.trow em { display: block; font-style: normal; font-size: 12.5px; color: var(--dim); line-height: 1.5; margin-top: 3px; }

/* "Other topics" on a topic page: .related's box, but the cards sit in a plain list rather
   than the gap grid, because inside a bordered box the grid reads as a second page section. */
.related .tclist li { border-top: 1px solid var(--line); }
.related .tclist li:first-child { border-top: 0; }
.related .tcard { padding: 10px 0; }
.related .tcard:hover { background: none; }

@media (max-width: 640px) {
  .trowlist a { gap: 10px; padding: 12px 0; }
  .trow b { font-size: 14.5px; }
  .tcard { padding: 12px 13px; }
}



.gterms { margin: 30px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.gterms h2 { font-size: 13px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--dim); margin: 0 0 10px; font-weight: 600; }
.gterms ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gterms li { margin: 0; }
.gterms a {
  display: inline-block;
  font-size: 13px;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--dim);
}
.gterms a:hover { color: var(--ink); border-color: var(--dim); text-decoration: none; }
.zh { font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif; font-size: 12px; color: var(--dim); margin-left: 4px; }

/* ---------- index: the glossary's home page, with cards ---------- */

.stat { display: flex; flex-wrap: wrap; gap: 22px; margin: 16px 0 22px; font-size: 13px; color: var(--dim); }
.stat b { color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; }

.tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0 4px; }
.tools input[type="search"] {
  flex: 1 1 240px;
  min-width: 0;
  padding: 13px 15px;
  font: inherit;
  font-size: 15px;
  color: inherit;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
}
.tools input[type="search"]::placeholder { color: var(--dim); }
.tools input[type="search"]:focus { border-color: var(--accent); }
#count { font-size: 12.5px; color: var(--dim); font-variant-numeric: tabular-nums; }

.filterrow { font-size: 12.5px; gap: 6px; margin: 10px 0 0; }
.filterrow button {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--dim);
  border-radius: 999px;
  padding: 6px 11px;
  cursor: pointer;
  font: inherit;
}
.filterrow button:hover { color: var(--ink); border-color: var(--dim); }
.filterrow button[aria-pressed="true"] { background: var(--bg); border-color: var(--ink); color: var(--ink); font-weight: 600; }
.gcount { opacity: 0.7; font-size: 11.5px; }

/* the glossary's .cards grid: 1px gaps over the line colour */
.gtiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 258px), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}
.gtile { background: var(--bg); padding: 13px 15px; display: flex; flex-direction: column; color: inherit; }
/* The grid's background is the line colour, and that doubles as the 1px divider — which only
   works while every cell is filled. Two cards in a three-column row leave the third cell
   showing the divider colour, and a grey rectangle beside two real cards reads as a broken
   image rather than as empty space. The build appends these fillers so every row is complete;
   they are inert, unclickable, and take the page background. */
.gtile--filler { pointer-events: none; }
.gtile p { flex: 1 1 auto; }
.gtile:hover { background: var(--soft); }
.gtile[hidden] { display: none; }
.gtile__kind { display: block; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); margin-bottom: 3px; }
.gtile h2 { font-size: 14.5px; font-weight: 600; line-height: 1.35; margin: 0 0 3px; }
.gtile h2 a { color: var(--ink); }
.gtile h2 a:hover { color: var(--accent); text-decoration: none; }
.gtile p { font-size: 12.5px; color: var(--dim); margin: 3px 0 0; line-height: 1.45; }
.gtile__pick { display: block; font-size: 11.5px; color: var(--dim); margin-top: 5px; }

.gempty {
  margin-top: 22px;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--dim);
  font-size: 13.5px;
}

/* any [hidden] must actually hide: a display value on the same element beats the attribute */
.gempty[hidden], .gtile[hidden], .qsheet[hidden] { display: none; }

footer.site {
  border-top: 1px solid var(--line);
  background: var(--soft);
  padding: 24px 0 132px;
  font-size: 13px;
  color: var(--dim);
}
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }
footer.site a { color: var(--dim); }
footer.site a:hover { color: var(--accent); }
.foot-links { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---------- fixed capsule bar: verbatim from the glossary ---------- */

.slot-h { min-height: 57px; }
.slot-f { min-height: 96px; }

.quicknav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  pointer-events: none;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom));
}
.qbar {
  pointer-events: auto;
  max-width: 520px;
  margin: 0 auto;
  background: #1c1c1a;
  border: 1px solid #2f2f2c;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}
.qbar > * {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 12.5px;
  line-height: 1;
  padding: 10px 6px;
  border-radius: 999px;
  color: #d9d9d2;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  min-width: 0;
}
.qbar > * + * { border-left: 1px solid #33332f; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.qbar > *:first-child { border-radius: 999px 0 0 999px; }
.qbar > *:last-child { border-radius: 0 999px 999px 0; }
.qbar button:hover, .qbar a:hover { background: #2a2a26; color: #fff; text-decoration: none; }
.qbar a[aria-current] { color: #fff; font-weight: 600; }
.qbar svg { flex: 0 0 auto; width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qbar .lbl { overflow: hidden; text-overflow: ellipsis; }
#qhome .lbl { overflow: visible; font-size: 12px; }
.lbl-sm { display: none; }

@media (max-width: 430px) {
  .qbar { max-width: 100%; padding: 5px; }
  .qbar > * { padding: 10px 4px; font-size: 11.5px; gap: 4px; overflow: hidden; }
  .qbar svg { width: 13px; height: 13px; }
  .qbar .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #qhome .lbl { font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
}

/* The third slot says "Free Cultivation Novels", which is 24 characters and simply does not
   fit beside two other labels once the bar gets narrow. Rather than let it ellipsis into
   "Free Cultiv…" — which reads as a truncation bug — it swaps to a shorter string that is
   still a complete thought: "Free Novels". Both strings come from site.config.json
   (quicknav.novels_long / quicknav.novels_short), so this is a swap, not a hardcoded label.
   Threshold raised from 400px to 480px: at 401-479px the long label still fit, but with only
   4-6px of slack, and any font fallback variable ate it. */
@media (max-width: 480px) {
  #qhome .lbl { display: none; }
  #qhome .lbl-sm { display: inline; }
  .qbar > * { gap: 5px; }
}

/* ---------- search overlay ----------

   Same dark capsule language as .qbar/.qsheet, because it opens from the bar and belongs to the
   same gesture. The wrapper is a full-bleed scrim; the box is a 560px column that starts near
   the top so results have room to breathe without the box jumping around as they arrive. */

.gsearch {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.32);
  padding: 72px 12px 12px;
  overflow-y: auto;
}
.gsearch[hidden] { display: none; }
body.gs-open { overflow: hidden; }

.gs-box {
  max-width: 560px;
  margin: 0 auto;
  background: #1c1c1a;
  color: #e8e8e2;
  border: 1px solid #2f2f2c;
  border-radius: 18px;
  padding: 14px 14px 8px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
}
.gs-head { display: flex; align-items: center; gap: 8px; }
#gs-input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 15px;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid #3a3a35;
  background: #242422;
  color: #f2f2ec;
  outline: none;
}
#gs-input::placeholder { color: #8d8d85; }
#gs-input:focus { border-color: #55554f; }
.gs-close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid #3a3a35;
  border-radius: 999px;
  color: #d9d9d2;
  cursor: pointer;
  padding: 0;
}
.gs-close:hover { background: #2a2a26; color: #fff; }
.gs-close svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }

.gs-status {
  margin: 9px 2px 4px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8d8d85;
}
.gs-results { max-height: min(58vh, 460px); overflow-y: auto; padding-bottom: 4px; }

.gs-hit {
  display: block;
  padding: 10px 10px 11px;
  border-radius: 10px;
  text-decoration: none;
  color: #e8e8e2;
  border: 1px solid transparent;
}
.gs-hit + .gs-hit { border-top: 1px solid #2a2a26; border-radius: 10px; }
.gs-hit:hover, .gs-hit:focus-visible {
  background: #2a2a26;
  border-color: #3a3a35;
  text-decoration: none;
  outline: none;
}
.gs-kind {
  display: block;
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #8d8d85;
  margin-bottom: 3px;
}
.gs-hit b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.gs-hit em {
  display: block;
  font-style: normal;
  font-size: 12.5px;
  line-height: 1.45;
  color: #a9a9a1;
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gs-none { font-size: 13px; color: #a9a9a1; margin: 12px 4px 16px; line-height: 1.5; }
.gs-none a { color: #e8e8e2; text-decoration: underline; }

@media (max-width: 430px) {
  .gsearch { padding: 56px 8px 8px; }
  .gs-box { border-radius: 16px; padding: 12px 12px 6px; }
  #gs-input { font-size: 16px; } /* 16px stops iOS zooming the viewport on focus */
  .gs-results { max-height: min(62vh, 420px); }
}

/* the sheet, verbatim from the glossary */
.qsheet {
  pointer-events: auto;
  z-index: 45;
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(74px + env(safe-area-inset-bottom));
  max-width: 560px;
  margin: 0 auto;
  background: #1c1c1a;
  color: #e8e8e2;
  border: 1px solid #2f2f2c;
  border-radius: 18px;
  padding: 16px 16px 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
  max-height: 62vh;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.qsheet.open { opacity: 1; visibility: visible; transform: none; }
.qsheet h2 { font-size: 10.5px; letter-spacing: 1.3px; text-transform: uppercase; color: #8d8d85; margin: 0 0 12px; font-weight: 600; }
.qsheet h2 + .grid + h2 { margin-top: 18px; }
.qsheet .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qsheet a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 10px;
  border: 1px solid #3a3a35;
  border-radius: 999px;
  font-size: 12px;
  color: #d9d9d2;
  text-decoration: none;
  min-width: 0;
}
.qsheet a:hover { background: #2a2a26; border-color: #4a4a44; text-decoration: none; }
.qsheet a[aria-current] { background: #e8e8e2; color: #1c1c1a; border-color: #e8e8e2; font-weight: 600; }
.qsheet a i { flex: 0 0 auto; font-style: normal; font-size: 11px; color: #8d8d85; font-variant-numeric: tabular-nums; }
.qsheet a[aria-current] i { color: #55554f; }
.qsheet a b { font-weight: 400; line-height: 1.25; }
.qbackdrop {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgba(0, 0, 0, 0.32);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.16s ease, visibility 0.16s;
}
.qbackdrop.open { opacity: 1; visibility: visible; }

/* ---------- narrow screens: the glossary's mobile block ---------- */

@media (max-width: 640px) {
  h1 { font-size: 22px; line-height: 1.28; }
  main { padding: 22px 0 140px; }
  header.site .wrap { gap: 12px; }
  .brand span { display: none; }
  /* six nav items: keep one row and scroll sideways rather than grow the sticky header */
  nav.top {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 14px;
    font-size: 12.5px;
    -webkit-overflow-scrolling: touch;
  }
  nav.top::-webkit-scrollbar { display: none; }
  nav.top a { white-space: nowrap; }
  .meta { margin-bottom: 18px; padding-bottom: 14px; }
  .lead, .lede { font-size: 15px; }
  .gtiles { grid-template-columns: 1fr; }
  .gtile { padding: 12px 13px; }
  .tblwrap { margin-left: -4px; margin-right: -4px; border-radius: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tblwrap thead th, .tblwrap tbody td { padding: 10px 9px; font-size: 13px; }
  .tblwrap th:first-child, .tblwrap td:first-child { width: 34%; }
  .readmore { padding: 16px 15px; }
  .slot-f { min-height: 120px; }
}
@media (min-width: 641px) { .slot-f { min-height: 96px; } }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}