/**
 * Lookup by Radical widget (templates/radical-lookup-widget.php +
 * public/js/radical-lookup.js). Shares the Chopmark Lookup gold palette
 * (see chopmark-lookup.css: #b08a3e / #8a6a26 accents, #f3ecdd controls).
 */

.rl-tool {
  margin-top: 0.75rem;
}

/* The display:flex rules below would defeat the hidden attribute's UA
   display:none — restate it with higher specificity. */
.rl-controls[hidden],
.rl-results[hidden],
.rl-table[hidden] {
  display: none;
}

.rl-status {
  color: #6b5f4e;
  font-size: 0.95rem;
}

/* Controls row: Reset + component paste field + live match count */
.rl-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.rl-reset {
  flex: 0 0 auto;
}
/* The component field — same family as .cl-direct-input (Direct Lookup),
   widened for a few chars + a readable placeholder. */
.rl-input {
  flex: 0 0 auto;
  width: 12rem;
  padding: 0.4rem 0.6rem;
  font: inherit;
  font-size: 1.05rem;
  line-height: 1.2;
  color: #2c2418;
  background: #fffdf8;
  border: 1px solid #d8cdb6;
  border-radius: 7px;
  box-sizing: border-box;
}
.rl-input::placeholder { color: #9a8c72; font-size: 0.9rem; }
.rl-input:focus-visible { outline: 2px solid #8a6a26; outline-offset: 2px; }
/* Position filter chips — narrows both modes to characters whose selected/
   pasted part sits in that region (Any = off). Rounded-rectangle shape to
   read as a filter, not another radical button (11px matches the Matching
   Library chips; rounder than the 7px text inputs). */
.rl-pos-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.rl-pos-label {
  color: #6b5f4e;
  font-size: 0.85rem;
  margin-right: 2px;
}
.rl-pos {
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.2;
  padding: 0.22rem 0.6rem;
  color: #3a3128;
  background: #f3ecdd;
  border: 1px solid #d8cdb6;
  border-radius: 11px;
  cursor: pointer;
}
.rl-pos:hover { border-color: #8a6a26; background: #f6ead0; }
.rl-pos:focus-visible { outline: 2px solid #8a6a26; outline-offset: 2px; }
.rl-pos.rl-pos-on {
  background: #f1e2bd;
  border-color: #8a6a26;
  box-shadow: inset 0 0 0 1px #b08a3e;
  font-weight: 600;
}
/* "What we could not use" aside on the count line (an unindexed part that was
   ignored, or parts past the 5-part cap). Muted so the count itself still
   reads as the answer. */
.rl-count-note { color: #8a7f6d; font-style: italic; }

/* Coverage-scope chips ("Search: Common characters | All characters").
   Same pill vocabulary as the position chips above, so the controls row reads
   as one family; the only additions are the muted size hint and a disabled
   state for the seconds a several-megabyte tier is in flight. */
.rl-scope-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  /* Own row, pinned left under the paste field. flex-basis:100% forces the
     wrap rather than leaving it to chance: without it the group lands beside
     the position chips or below them depending on viewport width, so the one
     control that changes what is being searched moved around the panel. */
  flex-basis: 100%;
  margin-top: -0.25rem;
}
.rl-scope {
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.2;
  padding: 0.22rem 0.6rem;
  color: #3a3128;
  background: #f3ecdd;
  border: 1px solid #d8cdb6;
  border-radius: 11px;
  cursor: pointer;
}
.rl-scope:hover { border-color: #8a6a26; background: #f6ead0; }
.rl-scope:focus-visible { outline: 2px solid #8a6a26; outline-offset: 2px; }
.rl-scope.rl-scope-on {
  background: #f1e2bd;
  border-color: #8a6a26;
  box-shadow: inset 0 0 0 1px #b08a3e;
  font-weight: 600;
}
.rl-scope[disabled] { cursor: default; opacity: 0.55; }
.rl-scope[disabled]:hover { border-color: #d8cdb6; background: #f3ecdd; }
.rl-scope-size { color: #6b5f4e; font-weight: 400; }

/* Live match count — the heading of the results strip below the table
   (moved down with the strip so the number sits next to what it counts).
   Hidden entirely when empty so the resting page shows no stray gap. */
.rl-count {
  display: block;
  margin: 0.9rem 0 0.35rem;
  color: #6b5f4e;
  font-size: 0.9rem;
}
.rl-count:empty { display: none; }

/* Results strip: bounded height so a broad selection (one common part can
   match thousands of chars) never pushes the table off-screen. */
.rl-results {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  max-height: 28rem;
  overflow-y: auto;
  border: 1px solid #d8cdb6;
  border-radius: 8px;
  background: #fdfaf3;
  padding: 8px;
  margin-bottom: 0.9rem;
}
.rl-none {
  color: #6b5f4e;
  font-size: 0.9rem;
}
.rl-char {
  font: inherit;
  /* Result glyphs come from the sliced "Chopmark Hanzi" webfont (declared in
     the generated /data/hanzi-lookup/hanzi-glyphs.css) so every indexed char
     renders consistently instead of via whatever CJK font the system has. */
  font-family: "Chopmark Hanzi", 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.35rem;
  line-height: 1.25;
  padding: 0.2rem 0.45rem;
  color: #3a3128;
  background: #fff;
  border: 1px solid #d8cdb6;
  border-radius: 6px;
  cursor: pointer;
}
.rl-char:hover { border-color: #8a6a26; background: #f6ead0; }
.rl-char:focus-visible { outline: 2px solid #8a6a26; outline-offset: 2px; }
/* Collection chopmarks — the gold treatment (same family as the drawing
   widget's resting cells). */
.rl-char.rl-chop {
  background: #fbf3df;
  border-color: #b08a3e;
  box-shadow: 0 0 0 1px rgba(176, 138, 62, 0.35);
}
/* The clicked result — the one whose card and galleries are showing below.
   Same inset-ring treatment as the drawing widget's .cl-cell.cl-selected, so
   "this is the tile you are looking at" reads identically in both places.
   Placed AFTER .rl-chop (equal specificity) so a selected chopmark shows the
   selected ring rather than its resting gold glow, mirroring how
   cl-selected wins over cl-rank1. */
.rl-char.rl-selected {
  border-color: #8a6a26;
  background: #f1e2bd;
  box-shadow: inset 0 0 0 2px #b08a3e;
}
.rl-more {
  flex: 0 0 auto;
  font-size: 0.8rem;
}

/* The button table: stroke-count labels inline with their group, buttons
   flowing in one wrapped run (qhanzi-style). */
.rl-table {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.rl-stroke {
  flex: 0 0 auto;
  color: #fff;
  background: #b08a3e;
  border-radius: 5px;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  margin-left: 6px;
}
.rl-stroke:first-child { margin-left: 0; }
.rl-btn {
  font: inherit;
  font-size: 1.25rem;
  line-height: 1.2;
  min-width: 2.1rem;
  padding: 0.18rem 0.3rem;
  color: #3a3128;
  background: #f3ecdd;
  border: 1px solid #d8cdb6;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 120ms ease;
}
.rl-btn:hover { border-color: #8a6a26; background: #f6ead0; }
.rl-btn:focus-visible { outline: 2px solid #8a6a26; outline-offset: 2px; }
.rl-btn.rl-on {
  background: #f1e2bd;
  border-color: #8a6a26;
  box-shadow: inset 0 0 0 2px #b08a3e;
}
.rl-btn.rl-off {
  opacity: 0.22;
  cursor: default;
}
.rl-btn.rl-off:hover { border-color: #d8cdb6; background: #f3ecdd; }

/* Component mode: the table stays live (clicks AND-combine with the pasted
   component since 2026-07-31); the pasted component's own pieces get the
   gold tint (rl-piece) as a "your component contains these parts" aid.
   Composes with rl-off: a piece that can no longer co-occur keeps its tint
   colors under the faded opacity. A selected piece renders as rl-on only
   (the JS drops rl-piece while selected). */
.rl-btn.rl-piece {
  background: #f1e2bd;
  border-color: #b08a3e;
  box-shadow: 0 0 0 1px rgba(176, 138, 62, 0.35);
}
.rl-btn.rl-piece:hover { border-color: #8a6a26; background: #f6ead0; }

/* The mirrored pick line sits in the widget's full-width gallery block, not
   Direct Lookup's 300px stage column — let it (and the meaning line under
   it) use the available width. */
.rl-galleries .cl-pick { width: auto; }

@media (max-width: 640px) {
  .rl-btn { font-size: 1.15rem; min-width: 2rem; }
  .rl-results { max-height: 22rem; }
  .rl-input { width: 100%; }
}