/* Chopmark Lookup tool — scoped under .cl-tool. Sits inside a standard
   content page, below the intro markdown. */

/* The "Chopmark Hanzi" display webfont is NOT declared here: its
   unicode-range @font-face slices live in the GENERATED
   /data/hanzi-lookup/hanzi-glyphs.css, loaded globally by
   templates/layout.php — which also declares the same slices under the
   site's "Work Sans"/"Montserrat" family names (CJK ranges only), the
   site-wide no-tofu guarantee. unicode-range gives lazy per-need loading
   natively — the browser fetches only the slices whose chars actually
   render, a handful per visit. The old chopmark-glyphs*.woff2 pair
   (retired 2026-08-01) subsetted BMP chars from Plangothic, which only
   HAS ~5.8% of them, so nearly every glyph fell back to the visitor's
   system font — the long-standing bold/serif tile inconsistency. */

.cl-tool { margin: 1.5rem 0 0.5rem; }

/* Matching-method selector — accessible radio group styled as a segmented
   control. The real <input>s are visually hidden but keep keyboard/AT
   semantics (arrow-key nav, focus ring). */
.cl-modes {
  border: 0;
  /* Bottom margin reserves room for the absolute-positioned per-radio
     .cl-seg-loading message; sized so showing/hiding the message never
     overlaps the canvas/results below. */
  margin: 0 0 1.6rem;
  padding: 0;
  min-width: 0;
}
.cl-modes-legend {
  padding: 0;
  margin: 0 0 0.55rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8a7d68;
}
.cl-seg {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.cl-seg-opt {
  flex: 1 1 200px;
  position: relative;
  margin: 0;
}
.cl-seg-opt input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.cl-seg-box {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  height: 100%;
  padding: 0.6rem 0.75rem;
  background: #fdfbf5;
  border: 1px solid #d8cdb6;
  border-radius: 9px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.cl-seg-opt:hover .cl-seg-box { border-color: #b08a3e; }
.cl-seg-opt input:checked + .cl-seg-box {
  border-color: #b08a3e;
  background: #fbf3df;
  box-shadow: inset 0 0 0 1px #b08a3e;
}
.cl-seg-opt input:focus-visible + .cl-seg-box {
  outline: 2px solid #8a6a26;
  outline-offset: 2px;
}
.cl-seg-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #2c2418;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.cl-seg-desc { font-size: 0.74rem; color: #8a7d68; line-height: 1.35; }
/* Per-radio one-time-load indicator — sibling of .cl-seg-box (outside the
   styled button surface) so it reads as a plain status note directly under
   the relevant radio button. Absolute-positioned against the relatively-
   positioned .cl-seg-opt so showing/hiding it doesn't reflow anything
   below the matching-library row (the cl-modes bottom margin reserves
   the room). Hidden by default; the client toggles the [hidden] attribute. */
.cl-seg-loading {
  position: absolute;
  top: 100%;
  left: 0.25rem;
  right: 0.25rem;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  font-style: italic;
  color: #b08a3e;
}
.cl-seg-loading[hidden] { display: none; }

.cl-stage {
  display: flex;
  gap: 1.75rem;
  flex-wrap: wrap;
  align-items: flex-start;
  /* Container-type lets @container rules below query the stage's actual
     inline-size, which is what determines whether the flex children stay
     side-by-side or wrap — viewport-based @media can't capture this
     accurately because the wrap point depends on the page's padding,
     scrollbar, font metrics, and exact rendering (real Safari fits side-
     by-side at viewports where Playwright WebKit reports stacked). */
  container-type: inline-size;
}

.cl-padwrap { flex: 0 0 auto; position: relative; }

/* Small circular button anchored inside the canvas's top-right corner. */
.cl-corner-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fdfbf5;
  border: 1px solid #d8cdb6;
  border-radius: 50%;
  color: #6f6451;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.cl-corner-btn:hover { border-color: #b08a3e; color: #2c2418; background: #fbf3df; }
.cl-corner-btn:focus-visible { outline: 2px solid #8a6a26; outline-offset: 2px; }
.cl-corner-icon { width: 16px; height: 16px; display: block; }

.cl-pad {
  display: block;
  width: 300px;
  height: 300px;
  background: #fffdf8;
  border: 1px solid #d8cdb6;
  border-radius: 10px;
  touch-action: none;
  cursor: crosshair;
}

.cl-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; width: 300px; }

.cl-btn {
  flex: 1 1 45%;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 0.85rem;
  color: #3a3128;
  background: #f3ecdd;
  border: 1px solid #d8cdb6;
  border-radius: 7px;
  cursor: pointer;
}
.cl-btn:hover:not(:disabled) { border-color: #b08a3e; }
.cl-btn:disabled { opacity: 0.45; cursor: default; }

/* The picked-character copy/paste line (left column, below the buttons).
   NB: class is `cl-pick`, deliberately NOT `cl-selected` — that class is
   the selected grid-cell state; reusing it leaked this margin onto the
   selected cell and pushed it down. */
.cl-pick {
  width: 300px;
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  color: #6f6451;
  /* CJK glyphs from the sliced webfont; the family has no Latin cmap, so
     the surrounding prose/pinyin falls through to the body stack (repeated
     here because `inherit` is not valid inside a font-family list). */
  font-family: "Chopmark Hanzi", 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}
.cl-pick:empty { display: none; }
/* Direct Lookup pick block: a single row holding
   "Hanzi: <ch>  Seal: <seal>  (view on Wiktionary)".
   The drawing flows' pickEl renders a single un-wrapped run (no
   .cl-pick-line span) and inherits .cl-pick's block layout, so the
   rules below only kick in for Direct Lookup's nested structure. */
.cl-pick .cl-pick-line {
  display: block;
  margin-top: 0.15rem;
}
.cl-pick .cl-pick-line:first-child { margin-top: 0; }
/* Meaning line under the glyph row — rendered only where the element set
   opts in (today: the Lookup by Radical mirror; see setPick's els.meaning).
   The "Meaning:" label stays upright to match the Hanzi:/Seal: labels; the
   meaning text itself is italic. */
.cl-pick .cl-pick-meaning {
  display: block;
  margin-top: 0.2rem;
  font-style: italic;
  color: #857866;
}
.cl-pick .cl-pick-meaning .cl-pick-label { font-style: normal; }
/* Inline variant (Direct Lookup): flows on after the Wiktionary tail in the
   same row, wrapping only when the definition is long. */
.cl-pick .cl-pick-meaning--inline {
  display: inline;
  margin-left: 0.9rem;
}
.cl-pick .cl-pick-label { display: inline-block; }
.cl-pick .cl-pick-ch {
  -webkit-user-select: all;
  user-select: all;
  margin-left: 0.35rem;
  font-size: 1.3rem;
  color: #2c2418;
  cursor: text;
}
/* Spacing between "Hanzi: X" and the "Seal: …" section that follows it on
   the same row. Modest — the Hanzi glyph already has visual weight. */
.cl-pick .cl-pick-seal-section { margin-left: 1rem; }
/* Wider gap between the "Seal:" label and the seal SVG that follows it,
   so it doesn't read as one tight cluster. */
.cl-pick .cl-pick-label-seal { margin-right: 0.4rem; }
/* <img class="seal-glyph"> uses the same sizing as [seal:X] in markdown.
   margin-right opens a gap to the "(view on Wiktionary)" tail that follows;
   the seal SVG's viewBox usually has internal padding on its right edge,
   so the visual gap is smaller than the numeric value implies.
   Selector includes `img` so specificity (0,2,1) beats
   `.markdown-content img.seal-glyph` in markdown-content.css (also 0,2,1)
   on source order — the lookup page renders inside a .markdown-content
   wrapper, so without this the global rule wins. */
.cl-pick img.cl-pick-seal {
  height: 1.85em;
  margin-right: 1rem;
  vertical-align: -0.575em;
}
.cl-pick .cl-pick-wik {
  color: #b08a3e;
  text-decoration: underline;
}
.cl-pick .cl-pick-wik:hover { color: #8a6a28; }
/* "(you entered ⺅)" — shown when a radical-chart form was folded to the
   working form the data is keyed by. Muted: it explains the swap without
   competing with the character itself. */
.cl-pick .cl-pick-shownas {
  margin-left: 0.4rem;
  font-size: 0.78rem;
  color: #8a7f6a;
}

.cl-results { flex: 1 1 280px; min-width: 260px; }

/* Scoped under .cl-tool so it outranks the site's
   `.page-content-content h2 { margin-top: 2rem }`, which otherwise pushes
   this heading 2rem below the canvas top (and overrides its size). */
.cl-tool .cl-results-title {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8a7d68;
  margin: 0 0 0.7rem;
  line-height: 1.2;
}

.cl-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 1fr;      /* every row the same height… */
  align-items: stretch;     /* …and every cell fills its row */
  gap: 0.5rem;
}

/* Placeholder area below the 5×2 grid — full grid width, one-cell tall.
   Future home of collection chopmark photos. Shown only when something is
   drawn (toggled via the [hidden] attribute by the client). */
.cl-collection {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 160px;
  margin-top: 0.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid #e3dac6;
  border-radius: 9px;
  background: #fdfbf5;
}
.cl-collection[hidden] { display: none; }
/* Empty state — the italic placeholder or a "No … available." message,
   i.e. any panel without --filled (which is content-driven: added only when
   photos / variant grids actually render). Half the resting height of a
   filled panel, across all sections (drawing, Direct Lookup, radical). */
.cl-collection:not(.cl-collection--filled) {
  min-height: 80px;
}
.cl-collection.cl-collection--filled {
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: flex-start;
  align-content: center;
}
.cl-collection-ph {
  font-size: 0.8rem;
  font-style: italic;
  color: #9a8d76;
  text-align: center;
}
/* Gallery heading for the chopmark photo strip ("Example Chopmarks"), in both
   the matcher #cl-collection and the Direct Lookup #cl-direct-chop. Scoped under
   .cl-tool to outrank .page-content-content h3 (1.5rem); matched to the seal/
   calligraphy titles (site h4 = 1.25rem) and the seal example's 0.35rem title
   gap. */
.cl-tool .cl-gallery-title {
  margin: 0 0 0.35rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: #6f5d3e;
  letter-spacing: 0.02em;
  text-align: left;
}
/* When the title is present, lay the collection out as a block (title directly
   above the photo row) — same tight spacing as the seal example strip — rather
   than the flex row-gap + margin a flex collection would add between them. */
.cl-tool .cl-collection--filled:has(> .cl-gallery-title) {
  display: block;
  text-align: left;
}
.cl-chop-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: flex-start;
}
.cl-chopimg {
  width: 150px;
  height: 150px;
  object-fit: contain;
  border: 1px solid #e3dac6;
  border-radius: 6px;
  background: #fffdf8;
  cursor: pointer;
}
/* Dense galleries (>12 photos) shrink the tiles 150px → 100px so a big strip
   doesn't dominate the page. Applied by selectChop/fillChop adding
   .cl-chop-row--compact when imgs.length > 12. */
.cl-chop-row--compact .cl-chopimg {
  width: 100px;
  height: 100px;
}

.cl-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;   /* div + button measured identically */
  width: 100%;
  height: 100%;             /* fill the grid track (buttons too) */
  padding: 0.55rem 0.25rem 0.45rem;
  border: 1px solid #b08a3e;   /* every cell rests at the same gold —     */
  border-radius: 9px;          /* collection chopmarks are no longer the  */
  background: #fbf3df;         /* only ones colored (cl-chop is behavior  */
  font: inherit;               /* only now: tooltip / pinyin / pictures)  */
  text-decoration: none;
  color: inherit;
  min-height: 64px;
  cursor: pointer;          /* every result cell is now selectable */
}
button.cl-cell { -webkit-appearance: none; appearance: none; }
.cl-cell .cl-glyph {
  /* The sliced family carries every indexed char (both tiers — build-
     guaranteed), so the serif fallback is effectively never seen. */
  font-family: "Chopmark Hanzi", serif;
  font-size: 2.1rem;
  line-height: 1.15;
  color: #2c2418;
}
.cl-cell .cl-py { font-size: 0.72rem; color: #6f6451; margin-top: 0.15rem; }
.cl-cell .cl-def {
  font-size: 0.66rem;
  color: #9a8d76;
  margin-top: 0.05rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Every result cell is clickable and shares one appearance — the same gold
   resting state (set on .cl-cell above) plus the hover / keyboard-focus /
   selected treatment below. Collection chopmarks (.cl-chop) are no longer
   colored differently; the class now only drives behavior (rich tooltip,
   pinyin/defs, collection pictures). cl-selected is intentionally placed
   AFTER cl-rank1 (equal specificity) so a selected rank-1 cell shows the
   selected ring rather than the rank-1 glow. */
.cl-cell:hover { border-color: #8a6a26; background: #f6ead0; }
.cl-cell:focus-visible { outline: 2px solid #8a6a26; outline-offset: 2px; }
.cl-cell.cl-rank1 { box-shadow: 0 0 0 2px rgba(176, 138, 62, 0.35); }
.cl-cell.cl-selected {
  border-color: #8a6a26;
  background: #f1e2bd;
  box-shadow: inset 0 0 0 2px #b08a3e;
}
.cl-cell.cl-rank1.cl-selected {
  box-shadow: inset 0 0 0 2px #b08a3e, 0 0 0 2px rgba(176, 138, 62, 0.35);
}

.cl-empty, .cl-status {
  font-size: 0.8rem;
  color: #8a7d68;
  margin: 0.75rem 0 0;
}
.cl-empty-arrow {
  width: 0.95rem;
  height: 0.95rem;
  vertical-align: -0.25em;
  margin-right: 0.15em;
}
/* Positional-text swap pair used in the Direct Lookup empty state:
   "Enter a Hanzi character <on the left|above> to see…". The mobile half
   is hidden by default; the @media block below flips visibility when the
   stage stacks. */
.cl-pos-mobile { display: none; }
.cl-status.cl-err { color: #b3463d; }

/* Stage transitions from side-by-side (canvas/input on the left, results
   on the right) to stacked (canvas/input on top, results below) when the
   .cl-stage container's inline-size drops below the wrap threshold —
   measured empirically at 607px (606→608 transition in both Chromium and
   WebKit), a bit wider than the naive 300+28+260=588 math because the
   padwrap and results have additional intrinsic content needs (corner
   button, results-title, etc.). When the stage stacks:
   - rotate the empty-state arrow 90° clockwise so it points up at the
     canvas/input column that now sits above the text, instead of left
     toward a column that's no longer there;
   - swap the Direct Lookup empty text's "on the left" → "above".
   The container query tracks the actual stage width (set by container-
   type: inline-size on .cl-stage above), so it fires at the same moment
   the flex children wrap — regardless of viewport-vs-content rendering
   differences across browsers (real Safari, Playwright WebKit, Chromium
   all wrap at the same container width even when their viewports for the
   same content differ). */
@container (max-width: 607px) {
  .cl-empty-arrow { transform: rotate(90deg); }
  .cl-pos-desktop { display: none; }
  .cl-pos-mobile { display: inline; }
}

@media (max-width: 560px) {
  .cl-grid { grid-template-columns: repeat(4, 1fr); }
  .cl-pad, .cl-controls, .cl-pick { width: 260px; }
  .cl-pad { height: 260px; }
}

/* ============================================================ */
/* Seal Script mode                                             */
/* ============================================================ */
/* Tile layout: matched seal SVG on top (centered), then a single inline
   label line "<hanzi> <badge> - <pinyin>" centered, then optional
   meaning below. Pinyin and meaning are independently optional. */
/* Seal-mode cells are deliberately ~20% taller than other modes — the
   matched seal SVG is the primary visual signal, so it gets the extra
   vertical room (holder ~44 vs 28 px) plus a margin below it to separate
   the seal char from the inline label / meaning lines. */
.cl-seal-cell { padding: 0.4rem 0.25rem; gap: 0.2rem; min-height: 78px; }
/* The holder is fixed-height — the inline SVG inside has its viewBox
   re-tightened to the actual ink bbox at mount time (see
   mountNormalizedSvg in chopmark-lookup.js), so every glyph's visible ink
   fills this height uniformly regardless of stock viewBox padding. */
.cl-seal-glyph-holder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  width: 100%;
  margin-bottom: 0.35rem;     /* gap between seal char and label/meaning */
}
.cl-seal-glyph-holder svg {
  height: 100%;
  width: auto;
  max-width: 100%;
  display: block;
}
.cl-seal-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  line-height: 1;
}
.cl-seal-cell .cl-seal-han {
  font-family: inherit;     /* modern Hanzi rendered in system font, not the */
  font-size: 1.15rem;       /* chopmark glyph webfont (it's the LABEL, not   */
  line-height: 1;           /* the matched glyph). Shrunk from 1.4rem so it  */
  color: #2c2418;           /* doesn't dominate the inline "han - pinyin".   */
}
/* Pinyin sitting inline next to the Hanzi label, not on its own line —
   inherits .cl-py colour/size but doesn't get the cl-py block-level
   top margin that styles below the cell already use. */
.cl-seal-cell .cl-seal-py-inline { margin-top: 0; }
.cl-seal-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.08rem 0.28rem;
  border-radius: 3px;
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.cl-seal-badge-L { background: #2a7a4f; }   /* Liushutong — green */
.cl-seal-badge-S { background: #b53d2e; }   /* Seal — brick */
.cl-seal-badge-B { background: #9a6a2e; }   /* Bronze — bronze */
.cl-seal-badge-J { background: #34579a; }   /* Oracle (Jiǎgǔ) — slate blue */
.cl-seal-badge-X { background: #888; }      /* unknown / fallback */

/* Collection panel in seal mode: grid of all variants of the clicked char,
   grouped by category. Replaces the chopmark-mode coin photos. */
.cl-tool.cl-seal .cl-collection.cl-collection--filled {
  display: block;            /* override row layout from .cl-collection--filled */
  padding: 0.6rem 0.5rem;
  text-align: left;
}
.cl-seal-cat { margin-bottom: 0.9rem; }
.cl-seal-cat:last-child { margin-bottom: 0; }
/* Scoped under .cl-tool so it outranks .page-content-content h3 (1.5rem)
   — without this our font-size rule loses the cascade and the title
   renders at the site's h3 size. Matched to the site's h4 (1.25rem), the
   size #### headings render at on this page. */
.cl-tool .cl-seal-cat-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #6f5d3e;
  margin: 0 0 0.35rem;
  letter-spacing: 0.02em;
}
.cl-seal-cat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.cl-seal-var {
  width: 56px;
  height: 56px;
  object-fit: contain;
  background: transparent;    /* let the .cl-collection cream show through */
  border: 1px solid #e3dac6;
  border-radius: 4px;
  padding: 3px;
  box-sizing: border-box;
  cursor: pointer;            /* matches chop-image hover (.cl-chopimg) */
}
.cl-seal-var:hover { border-color: #8a6a26; }

/* ============================================================ */
/* Direct Lookup (cl-direct)                                    */
/* ============================================================ */
/* Sibling widget under the drawing tool. Same responsive .cl-stage as the
   drawing tool: input/buttons on the left, the empty prompt (then the pick line
   after a search) on the right — stacking below with an up-arrow when narrow,
   via the shared @container rule. The galleries are pulled OUT to a full-width
   row below the stage (.cl-direct-galleries) so they use the whole page width. */
.cl-direct { margin-top: 1.5rem; }

.cl-direct-inputcol {
  width: 300px;             /* matches .cl-pad, so the right column aligns */
}
.cl-direct-prompt {
  margin: 0 0 0.55rem;
  font-size: 0.85rem;
  color: #6f6451;
  line-height: 1.4;
}
.cl-direct-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.cl-direct-input {
  width: 2.6rem;            /* a little wider than one Hanzi glyph */
  padding: 0.5rem 0.5rem;
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  text-align: center;
  color: #2c2418;
  background: #fffdf8;
  border: 1px solid #d8cdb6;
  border-radius: 7px;
  box-sizing: border-box;
}
.cl-direct-input:focus-visible { outline: 2px solid #8a6a26; outline-offset: 2px; }
/* Both buttons compact + equal width. .cl-btn defaults to flex:1 1 45% (for the
   drawing tool's 2-per-row controls); in the now-full-width Direct Lookup row
   that made Clear grow to fill the whole width, so pin both to content width
   with a shared floor that fits "Find Images". */
.cl-direct-find,
.cl-direct-clear {
  flex: 0 0 auto;
  min-width: 7.5rem;
}

.cl-direct-results { flex: 1 1 280px; min-width: 260px; }
/* Pick line in the right results column (replaces the empty prompt after a
   search). Override .cl-pick's fixed 300px side-column width + top margin so it
   fills the column and sits at the top, like the prompt it replaces. */
.cl-direct-results .cl-pick { width: auto; margin: 0; }

/* Galleries live inside the results column, directly under the top-10 grid
   (on /page/lookup; the radical widget mirrors them below its table). Flex
   column with a gap so only the VISIBLE collections are spaced (hidden ones
   add no gap). */
.cl-direct-galleries {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.cl-direct-galleries .cl-collection { margin-top: 0; }
/* The pick line inherits .cl-pick's fixed 300px side-column width; inside
   the galleries column it should fill the available width instead. */
.cl-direct-galleries .cl-pick { width: auto; margin: 0; }

/* Seal panel here uses the same per-category sectioning as the drawing
   tool's seal mode, but cl-direct-tool doesn't carry the cl-seal class
   so the seal-mode override block: display rule doesn't apply — restamp it. */
.cl-direct-seal.cl-collection--filled {
  display: block;
  padding: 0.6rem 0.5rem;
  text-align: left;
}

/* Calligraphy Variants panel (Direct Lookup only) — between the chop photos
   and the seal panel. Same block layout + 56px tile size as the seal grid; a
   title, then a wrapping row of glyphs, each captioned with its script below. */
.cl-direct-calligraphy.cl-collection--filled {
  display: block;
  padding: 0.6rem 0.5rem;
  text-align: left;
}
.cl-tool .cl-callig-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #6f5d3e;
  margin: 0 0 0.5rem;
  letter-spacing: 0.02em;
}
/* Parent-form stand-in note ("Shown as 興, the standard parent form of 㒷…")
   rendered between the title and the tile row when the char itself has no
   glyph in any brush face (index.parents substitution). */
.cl-callig-parent-note {
  margin: -0.2rem 0 0.5rem;
  font-size: 0.85rem;
  color: #8f8064;
}
.cl-callig-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.1rem;
}
.cl-callig-fig {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
}
.cl-callig-var {
  width: 100px;
  height: 100px;
  object-fit: contain;
  background: transparent;    /* let the .cl-collection cream show through */
  border: 1px solid #e3dac6;
  border-radius: 6px;
  padding: 5px;
  box-sizing: border-box;
  cursor: pointer;            /* matches the seal variant tiles (.cl-seal-var) */
}
.cl-callig-var:hover { border-color: #8a6a26; }
.cl-callig-cap {
  margin-top: 0.3rem;
  font-size: 0.78rem;
  line-height: 1.2;
  color: #6f5d3e;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.cl-callig-cap b { font-weight: 600; }
.cl-callig-face { color: #8f8064; font-weight: 400; }


/* Site-wide image modal sizing override for seal-lookup AND calligraphy SVGs.
   Both are black-ink-on-transparent SVGs, so on the modal's dark backdrop they
   need a white plate to be visible. Seal (hanziyuan) SVGs additionally declare
   tiny intrinsic dimensions (e.g. 65pt × 91pt) that the global modal would
   render postage-stamp small. Force a 500-square (capped to viewport on narrow
   screens) + the white plate — present only in the modal; the in-page
   thumbnails keep the transparent cream-page look set above. !important is
   needed because the modal's setImageSize() writes inline width/height on load. */
.image-modal__img[src*="/data/seal-lookup/svg/"],
.image-modal__img[src*="/data/calligraphy-lookup/svg/"] {
  width: min(500px, calc(100vw - 48px)) !important;
  height: min(500px, calc(100vw - 48px)) !important;
  background: #fff;
  padding: 24px;
  box-sizing: border-box;
  object-fit: contain;        /* seal (hanziyuan) SVGs are typically non-square */
}

/* ============================================================ */
/* Japanese mode (kanji + kana)                                 */
/* ============================================================ */
/* Result tiles reuse .cl-cell (matchHanzi result shape); what's Japanese-
   specific is the class badge (Jōyō/Jinmeiyō/Hiragana/Katakana) and the
   reading line (on/kun for kanji, romaji for kana). Display is cosmetic
   (recognition is vector-based), but nudge the matched glyph toward a
   Japanese system font so divergent forms (直/骨/海/…) render in their JP
   shape rather than the visitor's default Chinese-form CJK font. */
.cl-tool.cl-japanese .cl-cell .cl-glyph {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "YuGothic", "Noto Sans JP", "Noto Sans CJK JP", "Meiryo", serif;
}
/* Compact pill, same visual family as the seal J/B/S/L badges but labeled
   for a non-Japanese-reading audience. Sits between the glyph and readings. */
.cl-jp-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.06rem 0.32rem;
  margin-top: 0.15rem;
  border-radius: 3px;
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.cl-jp-badge-joyo { background: #2a6a7a; }       /* jōyō — teal */
.cl-jp-badge-jinmeiyo { background: #7a3f6a; }   /* jinmeiyō — plum */
.cl-jp-badge-hiragana { background: #3a6a34; }   /* hiragana — green */
.cl-jp-badge-katakana { background: #b06a1e; }   /* katakana — amber */
/* readings can be long (multiple katakana/hiragana); clamp like .cl-def so a
   verbose char doesn't blow out the tile height. */
.cl-jp-cell .cl-jp-read {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ============================================================ */
/* Combined-panel layout (the 2026-07-22 "v2" redesign)           */
/* ============================================================ */
/* Section panels + compact selector chips + ghost affordances for the
   combined "Draw or type the character" / "Build it from parts" layout.
   Scoped under .clc-* / .clc (the class chopmark-lookup-widget.php puts
   on #cl-tool — a pure CSS scope marker since the 2026-07-23 scrub removed the JS V2 branches). */

/* ---- Section panels ----------------------------------------------------- */
.clc-panel {
  background: #fdfbf5;
  border: 1px solid #d8cdb6;
  border-radius: 12px;
  padding: 1.3rem 1.5rem 1.5rem;
  margin: 1.6rem 0;
}
.clc-panel-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.35rem;
}
.clc-panel-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: #b08a3e;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
}
/* Scoped tighter than the site's .page-content-content h2 margins. */
.clc-panel .clc-panel-title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
  color: #2c2418;
  line-height: 1.25;
}
.clc-panel-sub {
  margin: 0 0 0.6rem;
  font-size: 0.9rem;
  color: #6f6451;
  line-height: 1.5;
  max-width: 70ch;
}

/* Legacy v1 elements the shared JS still writes to — never shown in v2
   (the JS also toggles their [hidden]/display, hence !important). */
.clc .clc-hidden,
.clc #cl-collection,
.clc #cl-pick,
.clc #cl-direct-empty { display: none !important; }

/* ---- Compact matching-library selector ---------------------------------- */
.clc .cl-modes { margin-bottom: 0.3rem; }
.clc .cl-modes-legend { color: #6f6451; }
.clc .cl-seg { gap: 0.45rem; }
.clc .cl-seg-opt { flex: 0 1 auto; }
.clc .cl-seg-box {
  flex-direction: row;
  align-items: center;
  padding: 0.4rem 0.95rem;
  background: #fff;
  /* Rounded rectangle, not a full pill — rounder than the 7px text inputs
     (matches the radical widget's .rl-pos position chips). */
  border-radius: 11px;
}
.clc .cl-seg-desc { display: none; }        /* shown via #clc-seg-desc */
.clc .cl-seg-loading { display: none; }     /* mirrored to #clc-seg-loading */
/* One-line description of the SELECTED library + the one-time download
   status. min-height keeps the layout from jumping as the text changes. */
.clc-seg-descline {
  margin: 0 0 1.1rem;
  font-size: 0.78rem;
  color: #6f6451;
  min-height: 1.15em;
}
.clc-seg-descline #clc-seg-loading {
  font-style: italic;
  color: #b08a3e;
}
.clc-seg-descline #clc-seg-loading[hidden] { display: none; }
.clc-seg-descline #clc-seg-loading:not([hidden]) { margin-left: 0.6rem; }

/* ---- Inner surfaces on the cream panel ---------------------------------- */
.clc .cl-pad { background: #fff; }
.clc .cl-btn { background: #fff; }
.clc .cl-btn:hover:not(:disabled) { background: #fbf3df; }
.clc .cl-direct-input { background: #fff; }

/* ---- Selected-character card (left column) ------------------------------- */
/* The pick line (#cl-direct-pick) rendered as a card in the left column's
   free space under the direct-entry row: ONE large Hanzi glyph (no label —
   the glyph speaks for itself), the meaning emphasized beneath it, the
   Wiktionary link last. Sticky (below the fixed nav) so the selected
   character stays visible while the galleries in the right column scroll.
   Requires .cl-stage align-items:stretch (below) so the column is tall
   enough to travel. The shared renderer still emits the "Hanzi:" label and
   the grafted seal section (the radical widget's mirror shows them); the
   card hides both rather than forking the renderer. */
.clc-pick-card {
  position: sticky;
  top: 3.5rem;
  width: 300px;
  margin: 1rem 0 0;
  padding: 0.75rem 0.9rem 0.7rem;
  background: #fff;
  border: 1px solid #d8cdb6;
  border-radius: 9px;
  box-sizing: border-box;
}
.clc-pick-card .cl-pick-line-glyphs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;   /* centers the glyph; full-width rows unaffected */
  row-gap: 0.25rem;
}
.clc-pick-card .cl-pick-label-han,
.clc-pick-card .cl-pick-seal-section { display: none; }
.clc-pick-card .cl-pick-ch {
  font-size: 4.4rem;
  line-height: 1.15;
  margin-left: 0;
}
/* Pinyin centered on its own row between the glyph and the meaning. */
.clc-pick-card .cl-pick-pinyin {
  flex-basis: 100%;
  text-align: center;
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 700;
  color: #6f6451;
}
/* Meaning centered on its own line directly under the glyph, emphasized
   (larger + the warm brown the gallery titles use); the "Meaning:" label is
   hidden — the placement says it. The Wiktionary link drops to the last
   line, centered like the rest of the card (flex order beats the DOM
   order, where the wik tail precedes the meaning). */
.clc-pick-card .cl-pick-meaning--inline {
  display: block;
  flex-basis: 100%;
  margin-left: 0;
  margin-top: 0.15rem;
  font-size: 1.05rem;
  color: #6f5d3e;
  text-align: center;
}
.clc-pick-card .cl-pick-meaning--inline .cl-pick-label { display: none; }
.clc-pick-card .cl-pick-wik-tail {
  flex-basis: 100%;
  order: 10;
  font-size: 0.78rem;
  text-align: center;
}
/* In the card layout the note takes its own centered row under the glyph,
   ahead of the pinyin (the glyph row is a wrapping flex line). */
.clc-pick-card .cl-pick-shownas {
  flex-basis: 100%;
  order: 1;
  margin-left: 0;
  text-align: center;
}
/* The card has room to travel only if the left column is as tall as the
   results column (sticky is bounded by its parent). Stretch is safe: the
   results column is normally the taller one, and in the stacked (wrapped)
   layout each row's height is its own content. */
.clc .cl-stage { align-items: stretch; }
/* Radical-widget variant (#rl-pick): same card, but it sits ABOVE its
   galleries in one column, so a pinned card would overlap the scrolling
   photos — no sticky there. Selector carries .cl-pick too (0,3,0): the
   width must beat BOTH `.cl-direct-galleries .cl-pick { width:auto }`
   (this file) and `.rl-galleries .cl-pick { width:auto }` (radical-
   lookup.css, loaded after this file), which tie at (0,2,0). */
.rl-galleries .cl-pick.clc-pick-card {
  position: static;
  margin-top: 0;
  width: 300px;
}

/* ---- Corner buttons ------------------------------------------------------ */
/* Download-data corner button: lower right of the canvas, sibling of the
   rotate button (which keeps the base .cl-corner-btn top:8px). The canvas is
   300px tall at the top of .cl-padwrap, so bottom-right-inside-canvas is
   top: 300 - 28 (button) - 8 (inset). */
.clc .cl-corner-btn--dl { top: 264px; }
/* Both corner buttons dim until something is drawn (v1 leaves them
   full-opacity; greyed reads clearer next to the ghost text). */
.clc .cl-corner-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.clc .cl-corner-btn:disabled:hover {
  border-color: #d8cdb6;
  color: #6f6451;
  background: #fdfbf5;
}

/* ---- Canvas ghost affordance -------------------------------------------- */
.clc-ghost {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0 2.2rem;
  text-align: center;
  pointer-events: none;
  color: #c9bda4;
}
.clc-ghost-main { font-size: 1.15rem; font-weight: 600; }
.clc-ghost-sub { font-size: 0.78rem; }
.clc.cl-has-ink .clc-ghost { display: none; }

/* ---- Direct-entry row under the canvas buttons -------------------------- */
.clc-direct { width: 300px; margin-top: 1rem; }
.clc-direct-label {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  color: #6f6451;
}

/* ---- Ghost result grid (empty state) ------------------------------------ */
.clc-ghostgrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  /* Sits at the top of the results column (the textual hint above it was
     removed), aligned with the canvas top. */
  margin-top: 0;
}
.clc-ghostgrid[hidden] { display: none; }
.clc-ghostgrid span {
  display: block;
  height: 92px;
  border: 1.5px dashed #e6ddc8;
  border-radius: 9px;
  background: rgba(255, 253, 248, 0.6);
}

/* ---- Contrast: lift the lightest hint text to the darker warm gray ------ */
.clc .cl-empty,
.clc .cl-status { color: #6f6451; }
.clc .cl-results-title { color: #6f6451; }

/* ---- Narrow screens ------------------------------------------------------ */
@media (max-width: 560px) {
  .clc-panel { padding: 1rem 0.9rem 1.2rem; }
  .clc-ghostgrid { grid-template-columns: repeat(4, 1fr); }
  /* 10 tiles at 4 columns leave a ragged half row; show a clean 2×4. */
  .clc-ghostgrid span:nth-child(n+9) { display: none; }
  /* mirror v1's 260px canvas shrink */
  .clc-ghost { width: 260px; height: 260px; }
  .clc-direct { width: 260px; }
  .clc-pick-card { width: 260px; }
  .clc .cl-corner-btn--dl { top: 224px; }   /* 260 - 28 - 8 */
}