/* TalentFrame (scripts/lib/components/talent-frame.mjs): the Classic talent pane in the
   addon dialect. Each talent is a square icon inside a 1px black edge with a 2px ring in its
   state color (the game's green for new, orange for reworked, stone gray and dimmed for
   unchanged); the rank box sits bottom right and a white pip top left marks a talent that a
   dated Blizzard correction touched. Three trees sit side by side, scroll as a snap track
   under 60rem, and become radio tabs under 40rem when the frame asks for tabs. */

.wfg-talents { --cell: 2.75rem; --gap: .85rem; min-width: 0; }
.wfg-trees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.wfg-talents[data-mode="tree"] { --gap: calc(var(--cell) * .3); }
.wfg-talents[data-mode="tree"] .wfg-trees { grid-template-columns: minmax(0, max-content); }

.wfg-tree {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 1rem 1rem 1.2rem;
  /* The black edge is an outer ring and the stone line is the border: the art layers would
     cover an inset line. */
  border: 1px solid var(--edge-inner);
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--edge);
}
.wfg-tree::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tree-bg, none) center / cover no-repeat; opacity: .42; }
.wfg-tree::after { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--bg) 45%, transparent); }
.wfg-tree-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .2rem .6rem;
  margin: 0 0 1rem;
  font: 400 1.25rem/1.02 var(--font-display);
  letter-spacing: .01em;
  color: var(--ink);
}
/* A 28px target without moving the head: padding widens the hit area, the margin gives it back. */
.wfg-tree-head a { display: inline-block; padding-block: .3rem; margin-block: -.3rem; color: inherit; text-decoration-color: var(--line-control); }
.wfg-tree-head a:hover { color: var(--accent-text); text-decoration-color: currentColor; }
.wfg-tree-head small { font-family: var(--font-ui); font-size: .72rem; font-weight: 400; }
.wfg-tree-head [data-state="new"] { color: var(--new); }
.wfg-tree-head [data-state="reworked"] { color: var(--reworked); }

.wfg-tree-grid {
  display: grid;
  grid-template-columns: repeat(4, var(--cell));
  grid-template-rows: repeat(7, var(--cell));
  gap: var(--gap);
  justify-content: center;
}

.wfg-talent {
  --st: var(--unchanged);
  --st-text: var(--unchanged-text);
  position: relative;
  z-index: 1;
  display: block;
  width: var(--cell);
  height: var(--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: help;
  transition: transform .15s cubic-bezier(.2, .8, .2, 1);
}
.wfg-talent[data-state="new"] { --st: var(--new); --st-text: var(--new); }
.wfg-talent[data-state="reworked"] { --st: var(--reworked); --st-text: var(--reworked); }
.wfg-talent img { display: block; width: 100%; height: 100%; }
.wfg-talent[data-state="unchanged"] img { filter: grayscale(1) brightness(.62); }
.wfg-talent[data-unknown] img { filter: saturate(.2) brightness(.72); }
a.wfg-talent { text-decoration: none; }
.wfg-rank {
  position: absolute;
  right: -.45rem;
  bottom: -.45rem;
  min-width: 1.15rem;
  padding: 0 .2rem;
  border: 1px solid var(--edge);
  background: var(--bg);
  font: 400 .68rem/1.3 var(--font-ui);
  text-align: center;
  color: var(--st-text);
}
.wfg-pin {
  position: absolute;
  top: -.3rem;
  left: -.3rem;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--evidence-confirmed);
  box-shadow: 0 0 0 1px var(--edge);
}
.wfg-talent:focus-visible, .wfg-talent.is-pinned { transform: scale(1.1); z-index: 2; }
@media (hover: hover) and (pointer: fine) {
  .wfg-talent:hover { transform: scale(1.1); z-index: 2; }
}

.wfg-arrow { position: relative; z-index: 0; pointer-events: none; }
.wfg-arrow::before, .wfg-arrow::after { content: ""; position: absolute; }
.wfg-arrow.is-down::before { left: 50%; width: 4px; margin-left: -2px; top: calc(var(--cell) - 2px); bottom: calc(var(--cell) + 7px); background: var(--ink-3); }
.wfg-arrow.is-down::after { left: 50%; bottom: calc(var(--cell) - 1px); border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--ink-3); transform: translateX(-50%); }
.wfg-arrow.is-right::before { top: 50%; height: 4px; margin-top: -2px; left: calc(var(--cell) - 2px); right: calc(var(--cell) + 7px); background: var(--ink-3); }
.wfg-arrow.is-right::after { top: 50%; right: calc(var(--cell) - 1px); border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 8px solid var(--ink-3); transform: translateY(-50%); }

/* Phone tabs: one radio per tree, shown under 40rem when the frame asks for them. */
.wfg-tree-tabs { display: none; flex-wrap: wrap; gap: .35rem; min-width: 0; margin: 0 0 .75rem; padding: 0; border: 0; }
.wfg-tree-tabs label {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .3rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  font: 400 .9rem/1.2 var(--font-ui);
  color: var(--ink-2);
  cursor: pointer;
}
.wfg-tree-tabs input:checked + label { border-color: var(--accent); background: var(--panel-2); color: var(--ink); }
.wfg-tree-tabs input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }

@media (max-width: 72rem) {
  .wfg-talents[data-mode="class"] { --cell: 2.35rem; --gap: .7rem; }
}

@media (max-width: 60rem) {
  .wfg-talents[data-mode="class"] .wfg-trees { grid-template-columns: repeat(3, minmax(15.5rem, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .75rem; }
  .wfg-talents[data-mode="class"] .wfg-tree { scroll-snap-align: start; }
}

@media (max-width: 40rem) {
  .wfg-talents[data-mode="class"][data-phone="tabs"] .wfg-tree-tabs { display: flex; }
  .wfg-talents[data-mode="class"][data-phone="tabs"] .wfg-trees { grid-template-columns: minmax(0, 1fr); overflow: visible; padding-bottom: 0; }
  .wfg-talents[data-mode="class"][data-phone="tabs"] .wfg-tree { display: none; }
  .wfg-talents[data-mode="class"][data-phone="tabs"]:has(.wfg-tree-tabs input:nth-of-type(1):checked) .wfg-tree:nth-of-type(1),
  .wfg-talents[data-mode="class"][data-phone="tabs"]:has(.wfg-tree-tabs input:nth-of-type(2):checked) .wfg-tree:nth-of-type(2),
  .wfg-talents[data-mode="class"][data-phone="tabs"]:has(.wfg-tree-tabs input:nth-of-type(3):checked) .wfg-tree:nth-of-type(3) { display: block; }
}

/* Browsers without :has() stack the trees instead of tabbing them. */
@supports not selector(:has(*)) {
  @media (max-width: 40rem) {
    .wfg-talents[data-mode="class"][data-phone="tabs"] .wfg-tree-tabs { display: none; }
    .wfg-talents[data-mode="class"][data-phone="tabs"] .wfg-tree { display: block; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .wfg-talent { transition: none; }
}

@media (forced-colors: active) {
  .wfg-talent { forced-color-adjust: none; }
  .wfg-tree { border-color: CanvasText; }
}