/* Hub pages (T6, scripts/lib/templates/hub.mjs; ops/design/templates/hub/contract.md). The
   picker is the answer and sits right under the page head; the component styles (panel,
   select list, sigils, racial rows, fact rows, page head) come from public/components/. This
   file lays out the page and the class and race stages. No JavaScript beyond select-list.js. */

.hub-top { padding-bottom: var(--s-5); }
.hub-head .wfg-page-head { padding-bottom: var(--s-3); }

/* ---------- Class stage ---------- */

.hub-trees { display: grid; gap: 1px; padding: 0; list-style: none; }
.hub-trees li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1rem; padding: 2px 0; font: 400 .88rem/1.35 var(--font-ui); color: var(--ink-2); }
.hub-trees b { font-weight: 400; color: var(--ink); }
.hub-trees [data-state="new"] { color: var(--new); }
.hub-trees [data-state="reworked"] { color: var(--reworked); }
.hub-trees [data-state="unchanged"] { color: var(--unchanged-text); }
.wfg-sl-stage .hub-left { font: 400 .8rem/1.4 var(--font-ui); color: var(--ink-3); }
.hub-race-strip { display: flex; flex-wrap: wrap; gap: 2px 4px; padding: 0; list-style: none; }
.hub-race-strip .wfg-race { padding: 2px; gap: 2px; }
.hub-race-strip .wfg-race img { width: 2rem; height: 2rem; }
.hub-race-strip .wfg-race b { font: 400 .72rem/1.2 var(--font-ui); color: var(--ink-2); }
.hub-race-strip .wfg-race small { font-size: .62rem; }
.hub-race-strip .wfg-race-new { top: -2px; right: -2px; padding: 0 .25rem; font-size: .52rem; }

/* ---------- Race stage ---------- */

.hub-race-stage { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 12px; align-items: start; }
.hub-race-stage > div > * { margin: 0; }
.hub-race-stage > div > * + * { margin-top: 6px; }
.hub-faction { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 400 .9rem/1.35 var(--font-ui); color: var(--ink); }
.hub-race-stage .wfg-racials { gap: 5px; margin: 0; }
.hub-race-stage .wfg-racial { gap: 8px; font-size: .84rem; }
.hub-race-stage .wfg-racial-head { gap: 0 6px; }
.hub-race-stage .wfg-racial-head b { font-weight: 500; }
.wfg-racial-dated { flex: 1 0 100%; font: 400 .72rem/1.3 var(--font-ui); color: var(--reworked); }
.hub-none { color: var(--ink-3); }
.wfg-sl-cell .wfg-state { font-size: .7rem; padding: 0 5px; }

/* Phones: the class stage trades its trees and portraits for the rows' race marks, and the
   race stage drops the portrait the row already shows and sets its racials two across. */
.hub--classes .wfg-sl-lines [data-key="who"] { display: none; }
@media (max-width: 40rem) {
  .hub-stage-wide { display: none; }
  .hub--classes .wfg-sl-lines [data-key="who"] { display: grid; }
  .hub-race-stage { grid-template-columns: minmax(0, 1fr); }
  .hub-race-stage .wfg-portrait { display: none; }
  .hub-race-stage .wfg-racials { grid-template-columns: minmax(0, 1fr); gap: 3px; }
}
.wfg-racial-head b { overflow-wrap: anywhere; }

/* ---------- Roster preview in a stage (the rulesets under Realmless) ---------- */

.hub-preview { display: grid; gap: 3px; padding: 0; list-style: none; }
.hub-preview li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font: 400 .86rem/1.35 var(--font-ui); color: var(--ink-2); }
.hub-preview b { font-weight: 400; color: var(--ink); }
.hub-preview .wfg-evidence { margin-left: auto; font-size: .66rem; }
.hub-preview .hub-more { color: var(--ink-3); }


/* ---------- Below the picker ---------- */

.hub-block { margin-bottom: var(--s-6); }
.hub-block h2 { margin: 0 0 var(--s-3); }
.hub-answer { max-width: var(--measure); margin: 0 0 var(--s-2); color: var(--ink); }
.hub-dek { margin: 0 0 var(--s-3); font: 400 .86rem/1.45 var(--font-ui); color: var(--ink-3); }
.hub-lower .affiliate-break { margin: 0 0 var(--s-6); }
.hub--classes .wfg-sl-row .wfg-sl-name b { color: var(--accent-text); }