/* SelectList (scripts/lib/components/select-list.mjs): the hub picker. Dense addon rows on
   hairlines; the checked row sits on panel-2 with a 3px accent edge and its name in the
   accent. Each row is its own size container, so its cells switch from stacked lines to
   columns by the row's width, not the viewport's: a list beside its stage counts only its
   own width. Priority 2 cells join at 36rem, priority 3 at 48rem.
   Radio mode: the checked row's stage opens under it (adjacent-sibling selector, no :has()
   and no script needed); from 64rem every stage takes the right-hand column instead.
   Static mode: every cell shows, as labeled lines on narrow rows. Brand v2.1 tokens only. */

[data-select] { --wfg-sl-icon: 2.25rem; --wfg-sl-stage: 22rem; }
.wfg-sl-list { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.wfg-sl-list > * { grid-column: 1; min-width: 0; }

/* ---------- Rows ---------- */

.wfg-sl-row, .wfg-sl-head { display: block; container: wfg-sl / inline-size; }
.wfg-sl-row { position: relative; padding: 6px 12px; border-top: 1px solid var(--hairline); font: 400 .9rem/1.35 var(--font-ui); color: var(--ink-2); }
label.wfg-sl-row { cursor: pointer; }
.wfg-sl-head + .wfg-sl-row, .wfg-sl-group + .wfg-sl-row, .wfg-sl-group + .wfg-radio + .wfg-sl-row { border-top: 0; }
.wfg-sl-cells { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 10px; min-height: var(--wfg-sl-icon); font-size: .86rem; }
[data-icons] .wfg-sl-row .wfg-sl-cells { padding-left: calc(var(--wfg-sl-icon) + 10px); }
.wfg-sl-icon { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: var(--wfg-sl-icon); height: var(--wfg-sl-icon); }
.wfg-sl-icon img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 50%; background: var(--panel-2); box-shadow: 0 0 0 1px var(--edge), 0 0 0 2px var(--edge-inner); }
.wfg-sl-name { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
.wfg-sl-name b { font: 400 1.02rem/1.25 var(--font-ui); color: var(--ink); }
.wfg-sl-name a { color: var(--accent-text); }
.wfg-sl-name .wfg-fact-change { font-size: .74rem; color: var(--ink-3); }
.wfg-sl-name .wfg-fact-change[data-change="new"] { color: var(--new); }
.wfg-sl-name .wfg-fact-change[data-change="changed"] { color: var(--reworked); }
.wfg-sl-name .wfg-evidence { font-size: .68rem; }
.wfg-sl-cell { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-width: 0; }
.wfg-sl-cell .wfg-state { white-space: normal; }
.wfg-sl-row { scroll-margin-top: 12px; }
.wfg-sl-cell[data-p="2"], .wfg-sl-cell[data-p="3"] { display: none; }
.wfg-sl-label { font: 400 .66rem/1.3 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--ink-3); }
.wfg-sl-value { color: var(--ink-2); }
.wfg-sl-list .wfg-at-na { font-style: italic; color: var(--ink-3); }
.wfg-sl-cell[data-kind="count"] .wfg-sl-value { font-variant-numeric: tabular-nums; color: var(--ink); }
.wfg-sl-cell[data-kind="states"] .wfg-sl-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* StateCounts in a row: "19 new 25 reworked 7 unchanged" on narrow rows, three number
   columns under the head's words on wide ones. */
.wfg-sl-states { display: inline-flex; flex-wrap: wrap; gap: 0 10px; font-variant-numeric: tabular-nums; }
.wfg-sl-states [data-state="new"] { color: var(--new); }
.wfg-sl-states [data-state="reworked"] { color: var(--reworked); }
.wfg-sl-states [data-state="unchanged"] { color: var(--unchanged-text); }

/* The head: column words, shown once rows turn into columns. */
.wfg-sl-head { padding: 4px 12px; border-bottom: 1px solid var(--edge); background: var(--panel-2); }
.wfg-sl-head .wfg-sl-cells { display: none; min-height: 0; font: 400 .68rem/1.3 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.wfg-sl-head .wfg-sl-states { gap: 0 6px; }

.wfg-sl-group { margin: 0; padding: 8px 12px 3px; border-top: 1px solid var(--line); font: 400 .7rem/1.3 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.wfg-sl-head + .wfg-sl-group { border-top: 0; }

/* The checked row. */
.wfg-radio:checked + .wfg-sl-row { background: var(--panel-2); box-shadow: inset 3px 0 0 var(--accent); }
.wfg-radio:checked + .wfg-sl-row .wfg-sl-name b { color: var(--accent-text); }
.wfg-radio:checked + .wfg-sl-row .wfg-sl-icon img { box-shadow: 0 0 0 1px var(--edge), 0 0 0 3px var(--accent); }
.wfg-radio:focus-visible + .wfg-sl-row { outline: 2px solid var(--focus); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
  label.wfg-sl-row:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
  .wfg-radio:checked + label.wfg-sl-row:hover { background: var(--panel-2); }
}

/* Marks: 24px sigils, lit or dimmed, with N and A/H letters. */
.wfg-marks-row { display: inline-flex; flex-wrap: nowrap; gap: 3px; }
.wfg-marks-key { display: inline-flex; gap: 3px; }
.wfg-marks-key > span { width: 24px; text-align: center; letter-spacing: 0; }
.wfg-mark { position: relative; display: inline-block; width: 24px; height: 24px; }
.wfg-mark img { width: 24px; height: 24px; object-fit: cover; object-position: top; background: var(--panel-2); box-shadow: 0 0 0 1px var(--edge); }
.wfg-mark.is-round img { border-radius: 50%; }
.wfg-mark.is-dim img { opacity: .28; filter: grayscale(1); }
.wfg-mark em { position: absolute; right: -3px; bottom: -3px; min-width: 12px; padding: 0 2px; font: 400 10px/12px var(--font-ui); font-style: normal; text-align: center; color: var(--bg); background: var(--ink-2); box-shadow: 0 0 0 1px var(--edge); }
.wfg-mark em.wfg-mark-new { background: var(--new); }
.wfg-mark em.wfg-mark-only[data-faction="alliance"] { background: var(--alliance); }
.wfg-mark em.wfg-mark-only[data-faction="horde"] { background: var(--horde-text); }
.wfg-mark em + em { right: auto; left: -3px; }

/* Wide rows: columns under the head. */
@container wfg-sl (min-width: 30rem) {
  .wfg-sl-cells { display: grid; grid-template-columns: var(--wfg-sl-cols-1); align-items: center; gap: 0 14px; font-size: .9rem; }
  [data-icons] .wfg-sl-row .wfg-sl-cells { padding-left: 0; }
  .wfg-sl-head .wfg-sl-cells { display: grid; }
  .wfg-sl-icon { position: static; transform: none; }
  .wfg-sl-name { flex: none; }
  .wfg-sl-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wfg-sl-cell[data-kind="states"], .wfg-sl-cell[data-kind="states"] .wfg-sl-value, .wfg-sl-cells > [data-kind="states"] { display: block; }
  .wfg-sl-states { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 6px; width: 100%; }
  .wfg-sl-head .wfg-sl-states > span { letter-spacing: .02em; font-size: .68rem; }
  .wfg-sl-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wfg-sl-head [data-p="2"], .wfg-sl-head [data-p="3"] { display: none; }
}
@container wfg-sl (min-width: 36rem) {
  .wfg-sl-cells { grid-template-columns: var(--wfg-sl-cols-2); }
  .wfg-sl-cell[data-p="2"] { display: inline-flex; }
  .wfg-sl-head [data-p="2"] { display: block; }
}
@container wfg-sl (min-width: 48rem) {
  .wfg-sl-cells { grid-template-columns: var(--wfg-sl-cols-3); }
  .wfg-sl-cell[data-p="3"] { display: inline-flex; }
  .wfg-sl-head [data-p="3"] { display: block; }
}

/* ---------- Static mode: every cell, labeled lines on narrow rows ---------- */

[data-mode="static"] .wfg-sl-cell[data-p] { display: flex; flex: 1 0 100%; }
[data-mode="static"] .wfg-sl-label { min-width: 5.5rem; }
[data-mode="static"] .wfg-sl-name .wfg-sl-note { flex: 1 0 100%; font-size: .8rem; line-height: 1.4; color: var(--ink-3); }
.wfg-sl-act { flex: 1 0 100%; padding: 6px 0 4px; }
.wfg-sl-cells .wfg-sl-src { display: flex; flex: 1 0 100%; flex-wrap: wrap; align-items: center; gap: 0 8px; }
[data-mode="static"] .wfg-sl-head [data-p] { display: none; }
@container wfg-sl (min-width: 30rem) {
  [data-mode="static"] .wfg-sl-cells { display: flex; }
  [data-mode="static"] .wfg-sl-head .wfg-sl-cells { display: none; }
  [data-mode="static"] .wfg-sl-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
@container wfg-sl (min-width: 36rem) {
  [data-mode="static"] .wfg-sl-cells { display: grid; grid-template-columns: var(--wfg-sl-cols-3); align-items: start; }
  [data-mode="static"] .wfg-sl-head .wfg-sl-cells { display: grid; }
  [data-mode="static"] .wfg-sl-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  [data-mode="static"] .wfg-sl-cell[data-p] { display: block; }
  [data-mode="static"] .wfg-sl-head [data-p] { display: block; }
  .wfg-sl-cells .wfg-sl-src { display: block; }
  [data-mode="static"] .wfg-sl-act { grid-column: 1 / -1; }
}

/* ---------- Stage (radio mode) ---------- */

.wfg-sl-stage { display: none; padding: 10px 12px 12px calc(12px + 3px); background: var(--panel-2); box-shadow: inset 3px 0 0 var(--accent); border-bottom: 1px solid var(--hairline); font: 400 .88rem/1.45 var(--font-body); color: var(--ink-2); }
.wfg-radio:checked + .wfg-sl-row + .wfg-sl-stage { display: block; }
.wfg-sl-stage > * { margin: 0; }
.wfg-sl-stage > * + * { margin-top: 8px; }
.wfg-sl-stage-name { display: none; font: 400 1.5rem/1.1 var(--font-display); letter-spacing: .02em; color: var(--accent-text); }
.wfg-sl-stage-name .wfg-fact-change { margin-left: 8px; font: 400 .74rem/1 var(--font-ui); letter-spacing: 0; color: var(--ink-3); }
.wfg-sl-stage-name .wfg-fact-change[data-change="new"] { color: var(--new); }
.wfg-sl-stage-name .wfg-fact-change[data-change="changed"] { color: var(--reworked); }
.wfg-sl-note { color: var(--ink-2); }
.wfg-sl-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 400 .7rem/1.3 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.wfg-sl-sub .wfg-evidence { letter-spacing: .03em; text-transform: none; font-size: .66rem; }
.wfg-sl-lines { display: grid; gap: 2px; }
.wfg-sl-lines > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 8px; }
.wfg-sl-lines > [data-p="1"] { display: none; }
.wfg-sl-stage { container: wfg-stage / inline-size; }
@container wfg-stage (min-width: 18rem) {
  .wfg-sl-lines > div { grid-template-columns: minmax(8.5rem, 35%) minmax(0, 1fr); }
}
.wfg-sl-nopage { font: 400 .8rem/1.4 var(--font-ui); color: var(--ink-3); }
.wfg-sl-lines dt { font: 400 .68rem/1.9 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.wfg-sl-lines dd { margin: 0; min-width: 0; color: var(--ink); }
.wfg-sl-lines .wfg-marks-row { flex-wrap: wrap; padding-top: 3px; }
.wfg-sl-stage .wfg-sl-src { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font: 400 .8rem/1.3 var(--font-ui); }
.wfg-sl-stage .wfg-sl-open { width: 100%; }

.wfg-sl-caption { margin: 0; padding: 8px 12px 10px; border-top: 1px solid var(--edge); font: 400 .8rem/1.5 var(--font-ui); color: var(--ink-3); }
.wfg-sl-caption a { display: inline-block; padding-block: .35rem; margin-block: -.35rem; color: var(--ink-2); text-decoration-color: var(--line-control); }
.wfg-sl-caption .wfg-evidence { vertical-align: .05em; }

/* From 64rem the stages share the right-hand column, beside every row. */
@media (min-width: 64rem) {
  [data-mode="radio"] .wfg-sl-list { grid-template-columns: minmax(0, 1fr) var(--wfg-sl-stage); grid-template-rows: repeat(var(--wfg-sl-rows), auto) 1fr; }
  [data-mode="radio"] .wfg-sl-stage { grid-column: 2; grid-row: 1 / span var(--wfg-sl-span); align-self: stretch; padding: 12px 16px 16px; border-bottom: 0; border-left: 1px solid var(--edge); box-shadow: none; background: var(--panel); }
  [data-mode="radio"] .wfg-sl-stage-name { display: block; }
  [data-mode="radio"] .wfg-sl-lines > [data-p="1"] { display: grid; }
}