/* 7 October 2026: ui */

/* ---------- Portraits: an avatar inside a frame or a small picture box ----------
   The doll is drawn on 36x36 cells and the standing figure, with the longest weapon, hat and
   shield, fills at most 26 cells across and 26 down (measured over every layer in assets/avatar2).
   A portrait shows exactly that square, so nothing pokes out of the frame around it.
   --ps is how many screen pixels one cell gets (2 = 52px square, 3 = 78px). The stance decides
   where the figure stands in its cell, so each body is centred on its own (--wx). */
.pfwrap, .arenapic, .pvppic { --ps: 2; display: inline-grid; place-items: center; position: relative; flex: none; box-sizing: content-box; width: calc(26px * var(--ps)); height: calc(26px * var(--ps)); overflow: hidden; vertical-align: middle; }
.pfwrap > .av, .arenapic > .av, .pvppic > .av { --s: var(--ps) !important; --wx: 6; --wy: 11; width: calc(26px * var(--ps)); height: calc(26px * var(--ps)); margin: 0 !important; }
.pfwrap > .av.b-warrior, .arenapic > .av.b-warrior, .pvppic > .av.b-warrior, .pfwrap > .av.b-sorcerer, .arenapic > .av.b-sorcerer, .pvppic > .av.b-sorcerer { --wx: 8; }
.pfwrap > .av.b-barbarian, .arenapic > .av.b-barbarian, .pvppic > .av.b-barbarian { --wx: 2; }
/* Only the spear reaches the top row, so only the spear stance starts there; the rest get a cell of floor. */
.pfwrap > .av.b-lancer, .arenapic > .av.b-lancer, .pvppic > .av.b-lancer { --wy: 10; }
/* The same box with or without a frame, so the page does not shift when you put one on. */
.pfwrap:not(.pframe) { border: 3px solid transparent; padding: 2px; }
.hud-who .pfwrap:not(.pframe) { border-width: 2px; padding: 0; }
.wardtop .pfwrap, .sheet .center > .pfwrap { --ps: 3; }
.arenarow .arenapic { width: calc(26px * var(--ps)); height: calc(26px * var(--ps)); place-items: center; }
/* Faction wings sit behind the figure and are wider than it. */
.pvppic.wingpic { overflow: visible; }
.pvppic.wingpic > .av { position: relative; z-index: 1; }
/* ...but inside the bordered picture of a road meeting they are cut at the border too. */
.pe-pic .pvppic.wingpic { overflow: hidden; width: 56px; height: 56px; }

/* ---------- Long lists: headings that fold, and the bar of chips above them (js/collapse.js) ----------
   One look everywhere: crafting, achievements, references, curios, bestiary. */
.lc-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 5px; padding: 8px 14px; margin: 6px 0 2px; background: var(--bg); border-bottom: 1px solid var(--line); }
.lc-bar:empty { display: none; }
.lc-label { font-size: 12px; color: var(--muted); margin: 0 2px 0 4px; }
.lc-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 6px 11px; border-radius: 20px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-family: var(--body); font-size: 13px; font-weight: 400; line-height: 1.1; }
.lc-chip::before { content: ''; width: 12px; height: 12px; flex: none; border-radius: 4px; border: 1px solid var(--muted); box-sizing: border-box; }
.lc-chip.on { border-color: var(--gold); background: #3a2c14; color: var(--ink); }
.lc-chip.on::before { border-color: var(--gold); background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%232a1a07' stroke-width='2'/%3E%3C/svg%3E") center / 12px no-repeat; }
/* Rarity chips are short and sit on their own row: lit and in the rarity's colour while it shows. */
.lc-break { flex-basis: 100%; height: 0; }
.lc-chip.lc-rar { padding: 6px 8px; font-size: 12px; }
.lc-chip.lc-rar::before { display: none; }
.lc-chip.lc-rar.on { color: inherit; }
.lc-chip.lc-rar:not(.on) { color: var(--muted); text-decoration: line-through; opacity: .7; }
.lc-chip.lc-all { margin-left: auto; color: var(--gold); }
.lc-chip.lc-all::before { display: none; }

.lc-head { display: flex; align-items: center; gap: 10px; width: calc(100% - 28px); min-height: 48px; margin: 8px 14px 6px; padding: 8px 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; color: var(--gold); font-family: var(--pixel); font-size: 15px; font-weight: 400; text-align: left; cursor: pointer; }
.lc-title { flex: 1; min-width: 0; }
.lc-count { flex: none; font-family: var(--body); font-size: 12px; padding: 2px 8px; white-space: nowrap; }
.lc-chev { flex: none; width: 9px; height: 9px; margin: -4px 3px 0 2px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg); }
.lc-group.shut > .lc-head .lc-chev { transform: rotate(-45deg); margin-top: 0; }
.lc-group.shut > .lc-body { display: none; }
.lc-group.shut > .lc-head { color: var(--ink); }
.lc-group.lc-empty, .lc-hide { display: none !important; }
.lc-body.grid { padding-top: 2px; }
.lc-none { text-align: center; }
/* A curio set keeps its card; the heading sits inside it. */
.card.cset.lc-group { padding-top: 6px; }
.card.cset.lc-group.shut { padding-bottom: 6px; }
.card.cset.lc-group > .lc-head { width: 100%; margin: 0; padding: 6px 0; background: none; border: 0; border-radius: 0; }
.card.cset.lc-group > .lc-body > .cgrid { margin-top: 6px; }

/* ---------- Skills shown in combat ---------- */
.fskills:empty { display: none; }
.fbasic .btn.fskillpick { flex: 0 0 52px; padding: 5px 2px; }
/* Three buttons in the row: keep Defend's line on one line. */
.fbasic:has(.fskillpick) .btn { padding-left: 5px; padding-right: 5px; }
.fbasic:has(.fskillpick) .btn small { font-size: 10.5px; white-space: nowrap; }
.fbasic .btn.fskillpick.some { border-color: var(--gold); }
.fbasic .btn.fskillpick.some small { color: var(--gold); opacity: 1; }
.lc-skill { min-height: 52px; }
.lc-skill .ability-icon { flex: none; margin: 0; }
.lc-sw { position: relative; flex: none; width: 46px; height: 26px; border-radius: 13px; background: #3a3128; border: 1px solid var(--line); transition: background .15s; }
.lc-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #d8d2c8; transition: left .15s; }
.lc-skill.on .lc-sw { background: #5fae4e; }
.lc-skill.on .lc-sw::after { left: 22px; }
.lc-skill:not(.on) > div, .lc-skill:not(.on) > img { opacity: .5; }
.lc-skcount { margin: 4px 0 8px; color: var(--gold); font-family: var(--pixel); font-size: 14px; }
.lc-skillbtn { margin: 0 14px 8px; width: calc(100% - 28px); }
.abil.lc-off { opacity: .6; }

/* ---------- A selected chip you can read ----------
   Two older rules both style .chip.on (one fills it gold, the other makes its words gold), which
   left the selected choice as a blank gold pill in the Store wardrobe and the look editor. */
.chip.on { color: #2a1a07; }