/* charview.css: the component breakdown, as charview.js draws it, on the
   learning platform (after learn.css) and on the site's lookup (after
   site.css). It reads the shared tokens (tokens.css); the radii and timing
   the learn host defines carry a fallback so the site needs nothing more. */

/* ── THE BREAKDOWN, FROM THE IDS (charview.js idsTreeHTML, owner 2026-10-05) ──
   A tree that grows down from the character. The lines are the classic
   two-halves trick: every child draws the half of the crossbar on each side
   of its own centre and a stub up from it, the first and last child drop the
   outer half, so the bar always runs exactly from the first centre to the
   last. No script measures anything. Every tile is the character's own
   strokes; a tap lights the piece up in the character above (learn.js). */
.bt { display: flex; flex-direction: column; gap: 12px; --bt-line: 1.5px solid var(--hair); --bt-gap: 16px; }
/* No sideways scroll (#2536): a tree wider than its box draws its tiles
   smaller (`.bt-tight`), and one still too wide is zoomed to fit (learn.js
   `btFit`). Hidden overflow only keeps a frame mid-fit from scrolling. */
.bt-scroll { overflow: hidden; margin: 0 -6px; padding: 2px 6px 4px; }
.bt-tree { width: max-content; min-width: 100%; display: flex; flex-direction: column; align-items: center; }
.bt-root {
  width: 116px; height: 116px; display: grid; place-items: center;
  border-radius: var(--r-card, 16px); background: var(--raised);
}
.bt-root svg { width: 96px; height: 96px; }
.bt-root .bt-font { font-size: 64px; }
.bt-root path { fill: var(--fg); transition: opacity var(--fast, 120ms) var(--ease, cubic-bezier(.2, .7, .3, 1)), fill var(--fast, 120ms) var(--ease, cubic-bezier(.2, .7, .3, 1)); }
.bt.lit .bt-root path { opacity: .2; }
.bt.lit .bt-root path.on { opacity: 1; fill: var(--violet); }

.bt-tree ul {
  list-style: none; margin: 0; padding: var(--bt-gap) 0 0;
  display: flex; justify-content: center; position: relative;
}
.bt-tree ul::before { content: ''; position: absolute; top: 0; left: 50%; height: var(--bt-gap); border-left: var(--bt-line); }
.bt-tree li { position: relative; display: flex; flex-direction: column; align-items: center; padding: var(--bt-gap) 4px 0; }
.bt-tree li::before, .bt-tree li::after {
  content: ''; position: absolute; top: 0; width: 50%; height: var(--bt-gap); border-top: var(--bt-line);
}
.bt-tree li::before { right: 50%; }
.bt-tree li::after { left: 50%; border-left: var(--bt-line); }
.bt-tree li:first-child::before { border: 0; }
.bt-tree li:first-child::after { border-top-left-radius: 8px; }
.bt-tree li:last-child::before { border-right: var(--bt-line); border-top-right-radius: 8px; }
.bt-tree li:last-child::after { border: 0; }
.bt-tree li:only-child::before { border: 0; }
.bt-tree li:only-child::after { border: 0; border-left: var(--bt-line); border-radius: 0; }

.bt-n {
  display: flex; flex-direction: column; align-items: center; gap: 5px; width: max-content; min-width: 66px; color: var(--fg);
}
/* The tile is the button (lights the part up); the name beside it is a link
   to the part's page, where it has one. */
.bt-tap { display: block; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.bt-name { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.bt-name:hover, .bt-name:focus-visible { color: var(--seal-text, #A83A25); text-decoration-color: currentColor; }
.bt-t {
  width: 54px; height: 54px; display: grid; place-items: center;
  border-radius: var(--r-chip, 10px); background: var(--raised);
  transition: box-shadow var(--fast, 120ms) var(--ease, cubic-bezier(.2, .7, .3, 1)), transform var(--fast, 120ms) var(--ease, cubic-bezier(.2, .7, .3, 1));
}
.bt-t svg { width: 42px; height: 42px; }
.bt-t path { fill: var(--fg); }
.bt-font { font-family: 'Noto Serif SC', serif; font-size: 30px; line-height: 1; }
/* Under a piece: what the piece is made of, one step quieter. */
.bt-n.piece ~ ul .bt-t { width: 44px; height: 44px; }
.bt-n.piece ~ ul .bt-t svg { width: 34px; height: 34px; }
.bt-n.piece ~ ul .bt-font { font-size: 24px; }
.bt-n.piece .bt-t { background: color-mix(in srgb, var(--violet) 18%, var(--raised)); }
:root[data-theme="dark"] .bt-n.piece .bt-t { background: color-mix(in srgb, var(--violet) 36%, var(--raised)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bt-n.piece .bt-t { background: color-mix(in srgb, var(--violet) 36%, var(--raised)); }
}
.bt-n.known .bt-t { box-shadow: inset 0 0 0 2px var(--jade); }
.bt-n.on .bt-t { box-shadow: 0 0 0 2px var(--violet); transform: translateY(-1px); }
.bt-n.known.on .bt-t { box-shadow: inset 0 0 0 2px var(--jade), 0 0 0 2px var(--violet); }
.bt-tap:focus-visible { outline: none; }
.bt-tap:focus-visible .bt-t { box-shadow: 0 0 0 2px var(--fg-2); }
/* A name wraps between words and never inside one (#2533: "Gebrauc / h"),
   every line centred (#2537). The column is 66px; a single word longer than
   that widens it (min-width wins over max-width), and one known to be long is
   set a little smaller first (`bt-l-long`, views.js). */
.bt-l {
  width: max-content; max-width: 66px; min-width: min-content;
  font-size: 11.5px; line-height: 1.25; color: var(--fg-2); text-align: center;
  overflow-wrap: normal; word-break: normal; hyphens: manual;
}
.bt-l-long { font-size: 10px; }
/* The reading under the name (#2532). */
.bt-py { font-size: 10.5px; line-height: 1.2; }
.bt-n.piece .bt-l { color: var(--fg); font-weight: 600; }
.bt-role {
  padding: 0 6px; border-radius: var(--r-pill, 99px); background: var(--raised);
  color: var(--fg-2); font-size: 10px; font-weight: 500; line-height: 1.5;
}

/* Closed at first (#2501): a part with more inside shows a chevron, and its
   own parts wait for a tap (learn.js). */
.bt-tree li.bt-fold > ul { display: none; }
.bt-more {
  display: none; width: 20px; height: 13px; border-radius: 999px; background: var(--raised);
  align-items: center; justify-content: center;
}
.bt-more svg { width: 9px; height: 6px; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bt-tree li.bt-fold > .bt-n .bt-more { display: inline-flex; }
/* Lit, with a page of its own: a › to it, and the second tap opens it (#2532). */
.bt-go {
  display: none; width: 20px; height: 13px; border-radius: 999px; background: var(--raised);
  align-items: center; justify-content: center;
}
.bt-go svg { width: 6px; height: 9px; fill: none; stroke: var(--violet); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bt-n.on .bt-go { display: inline-flex; }
.bt-tree li.bt-fold > .bt-n.on .bt-more { display: none; }
.bt-root[data-bt-root] { cursor: pointer; }

/* The review card and a word's characters: the same tree, smaller. */
.bt-compact .bt-root { width: 78px; height: 78px; }
.bt-compact .bt-root svg { width: 62px; height: 62px; }
.bt-compact .bt-root .bt-font { font-size: 44px; }
.bt-compact .bt-t { width: 44px; height: 44px; }
.bt-compact .bt-t svg { width: 34px; height: 34px; }
.bt-compact .bt-n { min-width: 56px; }
.bt-compact .bt-l { max-width: 56px; }
.bt-compact .bt-n.piece ~ ul .bt-t { width: 38px; height: 38px; }
.bt-compact .bt-n.piece ~ ul .bt-t svg { width: 29px; height: 29px; }
.bt-compact .bt-tree > .bt-l { margin-top: 6px; }
/* Too wide for its box at its own size (#2536): smaller tiles, narrower names. */
.bt-tight .bt-tree li { padding-left: 2px; padding-right: 2px; }
.bt-tight .bt-n { min-width: 54px; gap: 4px; }
.bt-tight .bt-l { max-width: 54px; font-size: 10.5px; }
.bt-tight .bt-l-long { font-size: 9.5px; }
.bt-tight .bt-t { width: 44px; height: 44px; }
.bt-tight .bt-t svg { width: 34px; height: 34px; }
.bt-tight .bt-n.piece ~ ul .bt-t { width: 38px; height: 38px; }
.bt-tight .bt-n.piece ~ ul .bt-t svg { width: 29px; height: 29px; }
.bt-stack { display: flex; flex-direction: column; gap: 22px; }
.wd-chars .bt { margin: 10px 0 6px; }
.bt-story { margin-top: 14px; }
.bt-story [data-ref] { cursor: pointer; }

/* A group with no name and no strokes, drawn as its parts in a row. */
.bt-t .bt-font-seq { font-size: 15px; letter-spacing: -.02em; color: var(--fg-2); }