/* TalentChanges (scripts/lib/components/talent-changes.mjs): what changed per class.

   The overview is nine flat class tiles in the addon dialect: a ringed class icon, the name in
   the class color, the new and reworked counts as big Accidental Presidency numbers with their
   words, and a StateSplit bar (sheet.css). The checked tile lifts one step (raised ground and a
   ring in the class color); its panel opens under the row. The panel draws one class's trees
   as a constellation on the tree art: new and reworked talents lit with their icons, a green
   plus on new ones, unchanged ones as dim dots, prerequisite lines lit where both ends changed.
   The card beside the trees is the game tooltip skinned flat: Classic yellow text on the tip
   ground, Classic Era above Forever with removed words struck and added words underlined.

   Motion: 150ms hover and focus changes, icons magnify on hover for fine pointers, the card
   fades in over 150ms. prefers-reduced-motion keeps every state and drops the movement. */

/* The layout follows the module's own width in em, through container queries, so larger
   text reflows it the way a narrower screen does. */
.wfg-cx { --cx-cell: 2.6em; --cx-gap: .7em; container: cx / inline-size; min-width: 0; overflow-wrap: break-word; }

/* ---------- Overview ---------- */

.wfg-cx-pick {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: .4rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.wfg-cx-class {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "ring name" "nums nums" "split split";
  align-items: center;
  gap: .2rem .5rem;
  min-width: 0;
  padding: .45rem .55rem .4rem;
  border: 1px solid var(--edge);
  border-top: 2px solid var(--accent);
  background: var(--panel);
  box-shadow: var(--shadow-inner);
  cursor: pointer;
  transition: background-color var(--t), box-shadow var(--t);
}
.wfg-cx-ring { grid-area: ring; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 1px var(--edge), 0 0 0 2px var(--edge-inner); }
.wfg-cx-ring img { width: 1.75rem; height: 1.75rem; border-radius: 50%; }
.wfg-cx-name { grid-area: name; min-width: 0; font: var(--heading-weight) 1.3rem/1.25 var(--font-heading); letter-spacing: 0; color: var(--accent-text); overflow-wrap: normal; }
.wfg-cx-nums { grid-area: nums; display: flex; gap: .55rem; min-width: 0; font: 400 .72rem/1.15 var(--font-ui); letter-spacing: .02em; }
.wfg-cx-nums > span[data-state] { display: grid; }
.wfg-cx-nums b { font: 400 1.85rem/.95 var(--font-display); }
.wfg-cx-nums [data-state="new"] { color: var(--new); }
.wfg-cx-nums [data-state="reworked"] { color: var(--reworked); }
.wfg-cx-class .wfg-split { grid-area: split; margin: .15rem 0 0; }
.wfg-cx-pick input:checked + .wfg-cx-class { background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--accent), var(--shadow-inner); }
.wfg-cx-pick input:checked + .wfg-cx-class .wfg-cx-ring { box-shadow: 0 0 0 2px var(--accent), 0 0 0 3px var(--edge); }
/* The radio is visually hidden, so its tile wears the global focus ring. */
.wfg-cx-pick input:focus-visible + .wfg-cx-class { outline: 2px solid var(--focus); outline-offset: 2px; }

/* The key above the overview: the words, each after its state's shape. */
.wfg-cx-key { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin: 0; font: 400 .78rem/1.3 var(--font-ui); color: var(--ink-2); }
.wfg-cx-key span { display: inline-flex; align-items: center; gap: .4rem; }
.wfg-cx-key span::before { content: ""; width: .7rem; height: .7rem; background: var(--edge); box-shadow: 0 0 0 2px var(--st), 0 0 0 3px var(--edge); }
.wfg-cx-key [data-state="new"] { --st: var(--new); }
.wfg-cx-key [data-state="new"]::before { content: "+"; display: grid; place-items: center; background: var(--new); font: 600 .7rem/1 var(--font-body); color: var(--edge); }
.wfg-cx-key [data-state="reworked"] { --st: var(--reworked); }
.wfg-cx-key [data-state="unchanged"]::before { width: .45rem; height: .45rem; background: var(--unchanged); box-shadow: 0 0 0 1px var(--edge); }
.wfg-cx-key [data-key="pin"]::before { width: .5rem; height: .5rem; border-radius: 50%; background: var(--correction); box-shadow: 0 0 0 1px var(--edge); }

/* ---------- One class ---------- */

.wfg-cx-panel {
  display: none;
  margin-top: .6rem;
  padding: .9rem 1rem 1rem;
  border: 1px solid var(--edge);
  border-top: 2px solid var(--accent);
  background: var(--panel);
  box-shadow: var(--panel-frame);
  scroll-margin-top: calc(var(--header-h) + .5rem);
}
.wfg-cx-panel:focus { outline: none; }
.wfg-cx:has(.wfg-cx-pick input:nth-of-type(1):checked) .wfg-cx-panel:nth-of-type(1),
.wfg-cx:has(.wfg-cx-pick input:nth-of-type(2):checked) .wfg-cx-panel:nth-of-type(2),
.wfg-cx:has(.wfg-cx-pick input:nth-of-type(3):checked) .wfg-cx-panel:nth-of-type(3),
.wfg-cx:has(.wfg-cx-pick input:nth-of-type(4):checked) .wfg-cx-panel:nth-of-type(4),
.wfg-cx:has(.wfg-cx-pick input:nth-of-type(5):checked) .wfg-cx-panel:nth-of-type(5),
.wfg-cx:has(.wfg-cx-pick input:nth-of-type(6):checked) .wfg-cx-panel:nth-of-type(6),
.wfg-cx:has(.wfg-cx-pick input:nth-of-type(7):checked) .wfg-cx-panel:nth-of-type(7),
.wfg-cx:has(.wfg-cx-pick input:nth-of-type(8):checked) .wfg-cx-panel:nth-of-type(8),
.wfg-cx:has(.wfg-cx-pick input:nth-of-type(9):checked) .wfg-cx-panel:nth-of-type(9) { display: block; }

/* Title, links and Close on one row, the counts under them, so Close holds its place
   whatever a class's counts line runs to. */
.wfg-cx-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "title links close" "counts counts counts";
  align-items: center;
  gap: .35rem 1.1rem;
  margin-bottom: .8rem;
}
.wfg-cx-head > :is(h2, h3, h4) { grid-area: title; }
.wfg-cx-counts { grid-area: counts; }
.wfg-cx-links { grid-area: links; }
.wfg-cx-close { grid-area: close; }
.wfg-cx-head :is(h2, h3, h4) { display: flex; align-items: center; gap: .6rem; margin: 0; font: var(--heading-weight) 1.65rem/1.25 var(--font-heading); letter-spacing: 0; color: var(--ink); }
.wfg-cx-head :is(h2, h3, h4) img { width: 2rem; height: 2rem; border-radius: 50%; box-shadow: 0 0 0 2px var(--accent), 0 0 0 3px var(--edge); }
.wfg-cx-counts { margin: 0; font: 400 .9rem/1.35 var(--font-ui); color: var(--ink-2); }
.wfg-cx-counts [data-state="new"] { color: var(--new); }
.wfg-cx-counts [data-state="reworked"] { color: var(--reworked); }
.wfg-cx-counts [data-state="unchanged"] { color: var(--unchanged-text); }
.wfg-cx-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.1rem; margin: 0; font: 400 .88rem/1.2 var(--font-ui); }
.wfg-cx-links a { display: inline-flex; align-items: center; min-height: 1.75rem; color: var(--accent-text); text-underline-offset: 3px; }
.wfg-cx-links a:hover { color: var(--ink); }
.wfg-cx-close {
  flex: none;
  min-height: 1.75rem;
  padding: .2rem .7rem;
  border: 1px solid var(--line-control);
  border-radius: var(--r-ctl);
  background: transparent;
  font: 400 .84rem/1.2 var(--font-ui);
  color: var(--ink-2);
  cursor: pointer;
  transition: color var(--t), border-color var(--t);
}
.wfg-cx-close:hover { color: var(--ink); border-color: var(--ink-2); }

.wfg-cx-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); gap: 1rem; align-items: start; }
.wfg-cx-trees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; min-width: 0; }
.wfg-cx-tree {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  padding: .7rem .5rem .9rem;
  border: 1px solid var(--edge-inner);
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--edge);
}
.wfg-cx-tree::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tree-bg, none) center / cover no-repeat; opacity: .22; }
.wfg-cx-tree::after { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--bg) 50%, transparent); }
/* Name over counts in every tree, so the three heads line up whatever the tree's name. */
.wfg-cx-tree-head { display: flex; flex-direction: column; gap: .2rem; margin: 0 .25rem .8rem; font: 400 1.25rem/1 var(--font-display); color: var(--ink); }
.wfg-cx-tree-head small { font: 400 .72rem/1.2 var(--font-ui); color: var(--ink-3); }
.wfg-cx-tree-head [data-state="new"] { color: var(--new); }
.wfg-cx-tree-head [data-state="reworked"] { color: var(--reworked); }
.wfg-cx-tree-head [data-state="unchanged"] { color: var(--unchanged-text); }

/* The constellation. Without JavaScript the panel keeps its counts and links and the map
   is not shown; with it the grid reserves its full size before the data arrives. */
.wfg-cx-map { display: none; }
.wfg-cx[data-ready] .wfg-cx-map {
  display: grid;
  grid-template-columns: repeat(4, var(--cx-cell));
  grid-template-rows: repeat(7, var(--cx-cell));
  gap: var(--cx-gap);
  justify-content: center;
}
.wfg-cx-dot { position: relative; pointer-events: none; }
.wfg-cx-dot::before { content: ""; position: absolute; top: 50%; left: 50%; width: .5rem; height: .5rem; margin: -.25rem 0 0 -.25rem; background: var(--unchanged); box-shadow: 0 0 0 1px var(--edge); opacity: .7; }
.wfg-cx-node {
  --st: var(--reworked);
  position: relative;
  /* Buttons default to a 13.33px font; inherit, so the cell's em size matches the grid's. */
  font: inherit;
  z-index: 1;
  display: block;
  width: var(--cx-cell);
  height: var(--cx-cell);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--edge);
  box-shadow: 0 0 0 2px var(--st), 0 0 0 3px var(--edge);
  cursor: pointer;
  transition: transform var(--t), box-shadow var(--t);
}
.wfg-cx-node[data-state="new"] { --st: var(--new); }
.wfg-cx-node[data-state="unchanged"] { --st: var(--unchanged); }
.wfg-cx-node img { display: block; width: 100%; height: 100%; }
.wfg-cx-node[data-state="unchanged"] img { filter: grayscale(1) brightness(.62); }
/* A dated Blizzard correction: the talent frame's white pip, at the top right here because
   the plus of a new talent holds the top left. */
.wfg-cx-node[data-pinned]::before { content: ""; position: absolute; top: -.25rem; right: -.25rem; z-index: 1; width: .55rem; height: .55rem; border-radius: 50%; background: var(--correction); box-shadow: 0 0 0 1px var(--edge); }
/* New in Forever: a green plus at the corner, so the state is a shape as well as a color. */
.wfg-cx-node[data-state="new"]::after { content: "+"; position: absolute; top: -.45rem; left: -.45rem; display: grid; place-items: center; width: .95rem; height: .95rem; background: var(--new); box-shadow: 0 0 0 1px var(--edge); font: 600 .78rem/1 var(--font-body); color: var(--edge); }
/* The talent the card reads: a Classic yellow ring outside its state ring, apart from the
   white focus ring and from every class color. */
.wfg-cx-node[aria-pressed="true"] { z-index: 2; transform: scale(1.14); box-shadow: 0 0 0 3px var(--st), 0 0 0 4px var(--edge), 0 0 0 6px var(--classic-yellow); }
.wfg-cx-arrow { position: relative; z-index: 0; pointer-events: none; }
.wfg-cx-arrow::before { content: ""; position: absolute; background: var(--line); }
.wfg-cx-arrow.is-lit::before { background: var(--ink-3); }
.wfg-cx-arrow.is-down::before { left: 50%; width: 2px; margin-left: -1px; top: calc(var(--cx-cell) + 3px); bottom: calc(var(--cx-cell) + 3px); }
.wfg-cx-arrow.is-right::before { top: 50%; height: 2px; margin-top: -1px; left: calc(var(--cx-cell) + 3px); right: calc(var(--cx-cell) + 3px); }

/* ---------- The card ---------- */

.wfg-cx-card {
  min-width: 0;
  padding: .8rem .9rem .85rem;
  border: 1px solid var(--edge);
  background: var(--tip-ground);
  box-shadow: var(--shadow-inner);
  font: 400 .9rem/1.45 var(--font-ui);
  color: var(--ink);
  scroll-margin-top: calc(var(--header-h) + .5rem);
  scroll-margin-bottom: .75rem;
}
.wfg-cx-card[hidden] { display: none; }
.wfg-cx-card.is-in { animation: wfg-cx-in .15s ease; }
@keyframes wfg-cx-in { from { opacity: 0; } to { opacity: 1; } }
.wfg-cx-card p { margin: 0; }
.wfg-cx-card-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .7rem; align-items: center; }
.wfg-cx-card-head img { grid-row: span 2; width: 3rem; height: 3rem; box-shadow: 0 0 0 2px var(--st, var(--line)), 0 0 0 3px var(--edge); }
.wfg-cx-card-head[data-state="new"] { --st: var(--new); }
.wfg-cx-card-head[data-state="reworked"] { --st: var(--reworked); }
.wfg-cx-card-name { margin: 0; font: var(--heading-weight) 1.5rem/1.25 var(--font-heading); letter-spacing: 0; color: var(--accent-text); }
.wfg-cx-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .55rem; font-size: .8rem; color: var(--tip-muted); }
.wfg-cx-ranks { display: flex; flex-wrap: wrap; gap: .3rem; margin: .7rem 0 0; }
.wfg-cx-ranks button, .wfg-cx-step button, .wfg-cx-start button {
  min-height: 2rem;
  padding: .2rem .65rem;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: transparent;
  font: 400 .8rem/1.2 var(--font-ui);
  color: var(--ink-2);
  cursor: pointer;
  transition: color var(--t), border-color var(--t), background-color var(--t);
}
.wfg-cx-ranks button[aria-pressed="true"] { border-color: var(--line-strong); background: var(--bg-3); color: var(--ink); }
.wfg-cx-ranks button:hover, .wfg-cx-step button:hover, .wfg-cx-start button:hover { color: var(--ink); border-color: var(--ink-3); }
.wfg-cx-side { margin-top: .7rem; }
.wfg-cx-side + .wfg-cx-side { padding-top: .6rem; border-top: 1px solid var(--hairline); }
.wfg-cx-label { margin-bottom: .2rem !important; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tip-muted); }
.wfg-cx-text { color: var(--classic-yellow); }
.wfg-cx-was .wfg-cx-text { color: color-mix(in srgb, var(--classic-yellow) 72%, var(--tip-muted)); }
/* Removed words are struck and dimmed; added words get an orange wash with a thin line
   under them, never an underline, which on this site means a link. */
.wfg-cx-text del { text-decoration: line-through 1px; text-decoration-color: var(--ink-2); color: var(--tip-muted); }
.wfg-cx-text ins { text-decoration: none; padding-inline: 1px; background: color-mix(in srgb, var(--reworked) 18%, transparent); box-shadow: inset 0 -1px color-mix(in srgb, var(--reworked) 60%, transparent); color: var(--ink); }
.wfg-cx-new-line { margin-top: .6rem !important; color: var(--classic-green); }
/* Only the tooltip's wording changed (punctuation or capitals): a muted line, and the marks
   lose their orange so the card does not shout about a comma. */
.wfg-cx-wording { margin-top: .6rem !important; font-size: .8rem; color: var(--tip-muted); }
.wfg-cx-notes { color: var(--ink-3); }
.wfg-cx-card.is-wording .wfg-cx-text ins { background: none; box-shadow: inset 0 -1px var(--line-strong); color: inherit; }
.wfg-cx-card.is-wording .wfg-cx-text del { text-decoration-color: var(--line-strong); }
.wfg-cx-ranks-label { align-self: center; margin-right: .15rem; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tip-muted); }
.wfg-cx-fix { display: flex; gap: .45rem; margin-top: .6rem !important; font-size: .82rem; color: var(--ink); }
.wfg-cx-fix::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: .4em; border-radius: 50%; background: var(--correction); }
.wfg-cx-fix a, .wfg-cx-card a { color: var(--accent-text); text-underline-offset: 2px; }
.wfg-cx-note { margin-top: .45rem !important; font-size: .8rem; color: var(--tip-muted); }
.wfg-cx-step { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: -.2rem 0 .7rem; padding-bottom: .6rem; border-bottom: 1px solid var(--hairline); }
.wfg-cx-step span { font-size: .8rem; color: var(--tip-muted); text-align: center; }
.wfg-cx-step button, .wfg-cx-start button { display: inline-flex; align-items: center; gap: .35rem; }
.wfg-cx-step button svg, .wfg-cx-start button svg { width: .9rem; height: .9rem; }
.wfg-cx-step button[data-dir="prev"] svg { transform: scaleX(-1); }
.wfg-cx-step button[aria-disabled="true"] { opacity: .45; cursor: default; }
.wfg-cx-step button[aria-disabled="true"]:hover { color: var(--ink-2); border-color: var(--line); }
.wfg-cx-intro-title { margin: 0 0 .35rem; font: var(--heading-weight) 1.5rem/1.25 var(--font-heading); letter-spacing: 0; color: var(--accent-text); }
.wfg-cx-intro-trees { display: grid; gap: .15rem; margin: .55rem 0 0; padding: 0; list-style: none; font-size: .86rem; color: var(--ink-2); }
.wfg-cx-intro-trees li { display: flex; justify-content: space-between; gap: .75rem; }
.wfg-cx-intro-trees [data-state="new"] { color: var(--new); }
.wfg-cx-intro-trees [data-state="reworked"] { color: var(--reworked); }
.wfg-cx-start { margin-top: .8rem; }
.wfg-cx-start button { min-height: 2.5rem; padding-inline: 1rem; border-color: var(--line-strong); color: var(--ink); }
.wfg-cx-left-list { margin-top: .75rem; padding-top: .55rem; border-top: 1px solid var(--hairline); font-size: .8rem; color: var(--tip-muted); }
.wfg-cx-left-list summary { display: flex; align-items: center; gap: .45rem; min-height: 1.75rem; color: var(--ink-2); cursor: pointer; list-style: none; }
.wfg-cx-left-list summary::-webkit-details-marker { display: none; }
.wfg-cx-left-list summary::before { content: "+"; display: grid; place-items: center; flex: none; width: 1rem; height: 1rem; border: 1px solid var(--line-strong); font: 400 .8rem/1 var(--font-ui); color: var(--ink-2); }
.wfg-cx-left-list[open] summary::before { content: "\2212"; }
.wfg-cx-left-list summary:hover { color: var(--ink); }
.wfg-cx-left-list p { margin-top: .3rem; }

/* Phone tree tabs: the tree heads become one radio per tree. */
.wfg-cx-tabs { display: none; gap: .35rem; min-width: 0; margin: 0 0 .6rem; padding: 0; border: 0; }
.wfg-cx-tabs label {
  display: inline-flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 2.75rem;
  padding: .25rem .4rem;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  font: 400 .86rem/1.15 var(--font-ui);
  color: var(--ink-2);
  text-align: center;
  cursor: pointer;
}
.wfg-cx-tabs small { font-size: .7rem; line-height: 1.2; }
.wfg-cx-tabs [data-state="new"] { color: var(--new); }
.wfg-cx-tabs [data-state="reworked"] { color: var(--reworked); }
.wfg-cx-tabs input:checked + label { border-color: var(--accent); background: var(--bg-3); color: var(--ink); }
.wfg-cx-tabs input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Touch screens get 44px controls in the card and the panel head. */
@media (pointer: coarse) {
  .wfg-cx-step button, .wfg-cx-start button, .wfg-cx-ranks button, .wfg-cx-close { min-height: 2.75rem; }
  .wfg-cx-ranks button { min-width: 2.75rem; }
  .wfg-cx-left-list summary { min-height: 2.75rem; }
}

@media (hover: hover) and (pointer: fine) {
  .wfg-cx-class:hover { background: var(--bg-3); }
  .wfg-cx-node:hover { z-index: 3; transform: scale(1.14); }
}

/* ---------- Narrower containers ---------- */

/* Under 70em the nine tiles go three by three, each a row with its numbers at the right, and
   the card moves under the trees. */
@container cx (max-width: 70em) {
  .wfg-cx-pick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wfg-cx-class { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ring name nums" "split split split"; }
  .wfg-cx-nums { gap: .8rem; }
  .wfg-cx-body { grid-template-columns: minmax(0, 1fr); }
}

/* Under 44em three trees no longer fit side by side: one tree at a time, behind tabs. */
@container cx (max-width: 44em) {
  .wfg-cx-panel { --cx-cell: 2.75em; --cx-gap: .8em; }
  .wfg-cx-head { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title close" "counts counts" "links links"; gap: .35rem .75rem; }
  .wfg-cx-head :is(h2, h3, h4) { font-size: 1.45rem; }
  .wfg-cx-tabs { display: flex; }
  .wfg-cx-trees { grid-template-columns: minmax(0, 1fr); }
  .wfg-cx-tree { display: none; }
  .wfg-cx-tree-head { display: none; }
  .wfg-cx-panel:has(.wfg-cx-tabs input:nth-of-type(1):checked) .wfg-cx-tree:nth-of-type(1),
  .wfg-cx-panel:has(.wfg-cx-tabs input:nth-of-type(2):checked) .wfg-cx-tree:nth-of-type(2),
  .wfg-cx-panel:has(.wfg-cx-tabs input:nth-of-type(3):checked) .wfg-cx-tree:nth-of-type(3) { display: block; }
  /* Without JavaScript every tree's counts stay readable: the tabs only switch the maps. */
  .wfg-cx:not([data-ready]) .wfg-cx-tabs { display: none; }
  .wfg-cx:not([data-ready]) .wfg-cx-tree { display: block; padding-block: .4rem; }
  .wfg-cx:not([data-ready]) .wfg-cx-tree-head { display: flex; margin: 0; }
}

/* Under 36em (phones) each tile stacks its name, numbers and bar, and the panel runs to the
   screen edges. */
@container cx (max-width: 36em) {
  .wfg-cx-pick { gap: .35rem; }
  .wfg-cx-class { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ring name" "nums nums" "split split"; gap: .3rem .4rem; padding: .45rem .45rem .4rem; }
  .wfg-cx-ring { width: 1.75rem; height: 1.75rem; }
  .wfg-cx-ring img { width: 1.45rem; height: 1.45rem; }
  .wfg-cx-name { font-size: 1.15rem; }
  .wfg-cx-nums { display: grid; gap: .05rem; font-size: .74rem; }
  .wfg-cx-nums > span[data-state] { display: block; }
  .wfg-cx-nums b { font-size: 1.2rem; line-height: 1; }
  .wfg-cx-panel { margin-inline: calc(var(--gutter) * -1); padding: .8rem var(--gutter) 1rem; border-inline: 0; }
}

/* Very narrow containers (320px screens, or phones with large text): two tiles a row. */
@container cx (max-width: 21em) {
  .wfg-cx-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wfg-cx-class { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "nums" "split"; }
  .wfg-cx-ring { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wfg-cx-class, .wfg-cx-node, .wfg-cx-close, .wfg-cx-ranks button, .wfg-cx-step button, .wfg-cx-start button { transition: none; }
  .wfg-cx-card.is-in { animation: none; }
  .wfg-cx-node[aria-pressed="true"], .wfg-cx-node:hover { transform: none; }
}

@media (forced-colors: active) {
  .wfg-cx-node, .wfg-cx-key span::before, .wfg-cx-dot::before, .wfg-cx-node[data-pinned]::before { forced-color-adjust: none; }
  .wfg-cx-class, .wfg-cx-panel, .wfg-cx-card { border: 1px solid CanvasText; }
  .wfg-cx-pick input:checked + .wfg-cx-class { outline: 3px solid Highlight; }
  .wfg-cx-tabs input:checked + label, .wfg-cx-ranks button[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: 1px; }
  .wfg-cx-text ins { text-decoration: underline; }
}