/* La cour d'armes (camp.js): the Héros tab as a place, the paquetage of one hero, the râtelier. */

/* ---------- the yard ---------- */
.camp-yard { background: #b48c5c; }
.camp-hero {
  position: absolute; transform: translate(-50%, -100%); pointer-events: auto; padding: 0; border: 0; background: none;
  display: flex; flex-direction: column; align-items: center; color: var(--ink);
}
.camp-hero canvas { display: block; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .25)); }
.camp-hero:active canvas { transform: translateY(2px); }
.camp-hero .ch-plate {
  position: absolute; top: 100%; margin-top: 4px; display: flex; flex-direction: column; align-items: center; padding: 2px 7px 3px; white-space: nowrap;
  background: #4a3220; border: 2px solid var(--edge); border-radius: 3px; box-shadow: inset 0 0 0 1px #7a5634, 0 2px 0 rgba(0, 0, 0, .4);
}
.camp-hero .ch-plate b { font-family: var(--pixel); font-weight: 400; font-size: .66rem; color: var(--gold); max-width: 104px; overflow: hidden; text-overflow: ellipsis; }
.camp-hero .ch-plate small { font-size: .62rem; color: #e6d6b8; line-height: 1.1; }
.camp-hero.expedition canvas, .camp-hero.mission canvas, .camp-hero.prete canvas { opacity: .35; filter: grayscale(.7); }
.camp-hero .ch-away { position: absolute; top: 30%; font-size: .6rem; white-space: nowrap; }
.camp-hero .ch-todo { position: absolute; top: 4px; right: -4px; }
.camp-yard + .roster-head { margin-top: 44px; }

/* ---------- the paquetage ---------- */
.hv-head h2 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-flip { display: inline-flex; gap: 4px; }
.hv-flip .quarter-back { min-width: 34px; }
.hv-stage { position: relative; height: 262px; margin: 0 -12px; overflow: hidden; border-bottom: 3px solid var(--edge); }
.hv-back { position: absolute; inset: 0; background-repeat: no-repeat; background-size: 100% 100%; image-rendering: pixelated; }
.hv-back::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 60%, rgba(16, 8, 20, .35)); }
.hv-hero { position: absolute; left: 40%; bottom: 60px; transform: translateX(-50%); }
.hv-hero canvas { display: block; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .3)); }
.hv-hero.trying canvas { animation: hv-try .35s steps(3); }
@keyframes hv-try { 0% { transform: translateY(-6px); } 100% { transform: none; } }
.hv-tags { position: absolute; left: 10px; top: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.hv-tags b { font-family: var(--pixel); font-weight: 400; font-size: .8rem; color: var(--gold); padding: 2px 7px; background: rgba(42, 26, 16, .82); border: 2px solid var(--edge); border-radius: 3px; }
.hv-tags small { font-family: var(--pixel); font-size: .62rem; color: #f4ead2; padding: 1px 6px; background: rgba(42, 26, 16, .7); border-radius: 2px; }
.hv-sockets { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 8px; }
.hv-socket {
  position: relative; width: 62px; height: 62px; display: grid; place-items: center; padding: 0;
  background: radial-gradient(#3a2c22, #1c1612); border: 3px solid #5a4632; border-radius: 4px;
  box-shadow: inset 0 0 0 2px #2a1e14, 0 3px 0 rgba(0, 0, 0, .45);
}
.hv-socket canvas { max-width: 54px; max-height: 54px; }
.hv-socket.empty canvas { opacity: .3; filter: grayscale(1); }
.hv-socket.r-rare { border-color: #3a74b8; }
.hv-socket.r-epique { border-color: #8a4ac0; }
.hv-socket.r-legendaire { border-color: #e0a030; box-shadow: inset 0 0 0 2px #2a1e14, 0 0 10px rgba(255, 179, 71, .45), 0 3px 0 rgba(0, 0, 0, .45); }
.hv-socket.on { transform: translateX(-6px); outline: 2px solid #fff3a0; outline-offset: 1px; }
.hv-socket .hv-enh, .rack-tile .rt-enh {
  position: absolute; right: 2px; bottom: 1px; font: 400 .62rem var(--pixel); font-style: normal; color: #fff3a0; text-shadow: 1px 1px 0 #2a1a10;
}
.hv-xp { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: #1a1210; }
.hv-xp i { display: block; height: 100%; background: linear-gradient(#ffd34d, #c08a2c); }

.hv-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 0 -12px; background: var(--edge); border-bottom: 3px solid var(--edge); }
.hv-stats span { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 4px; padding: 6px 8px; background: #241c18; }
.hv-stats small { font-family: var(--pixel); font-size: .58rem; color: var(--muted); }
.hv-stats b { font-family: var(--pixel); font-weight: 400; font-size: .74rem; color: #f4ead2; }
.hv-stats i { position: absolute; right: 4px; top: -9px; font: 400 .6rem var(--pixel); font-style: normal; padding: 0 3px; border-radius: 2px; }
.hv-stats .up b { color: #9be3a7; } .hv-stats .up i { background: #24412b; color: #9be3a7; }
.hv-stats .down b { color: #ff9aa2; } .hv-stats .down i { background: #4a2025; color: #ff9aa2; }

.hv-drawer, .hv-skills, .hv-voie { margin: 12px 0 0; }
.hv-drawer-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 2px 8px; }
.hv-drawer-head b { font-family: var(--pixel); font-weight: 400; color: var(--gold); font-size: .9rem; }
.hv-drawer-head small { font-family: var(--pixel); color: var(--muted); font-size: .66rem; }
.hv-pick {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 8px 10px;
  background: #2a211c; border: 3px solid #5a4632; border-radius: 4px; box-shadow: inset 0 0 0 1px #3c3028;
}
.hv-pick.r-rare { border-color: #3a74b8; } .hv-pick.r-epique { border-color: #8a4ac0; } .hv-pick.r-legendaire { border-color: #e0a030; }
.hv-pick-text { flex: 1; min-width: 0; }
.hv-pick-text b { display: block; font-family: var(--pixel); font-weight: 400; font-size: .78rem; color: #f4ead2; }
.hv-pick.r-legendaire b { color: var(--gold); }
.hv-pick-text small { display: block; font-size: .76rem; color: var(--muted); line-height: 1.25; }
.hv-pick-text .hv-owner { color: #e6b86a; }

/* ---------- tiles on the rack ---------- */
.rack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.rack-tile {
  position: relative; aspect-ratio: 1; display: grid; place-items: center; padding: 0;
  background: radial-gradient(#3a2c22 30%, #1c1612); border: 3px solid #4a3a2a; border-radius: 4px; box-shadow: inset 0 0 0 1px #2a1e14, 0 2px 0 rgba(0, 0, 0, .4);
}
.rack-tile canvas.equipment-sprite { max-width: 50px; max-height: 50px; }
.rack-tile.r-rare { border-color: #3a74b8; background: radial-gradient(#22344a 30%, #141c26); }
.rack-tile.r-epique { border-color: #8a4ac0; background: radial-gradient(#3a2448 30%, #1c1426); }
.rack-tile.r-legendaire { border-color: #e0a030; background: radial-gradient(#4a3418 30%, #22180c); box-shadow: inset 0 0 0 1px #2a1e14, 0 0 8px rgba(255, 179, 71, .35); }
.rack-tile.on { outline: 3px solid #fff3a0; outline-offset: 1px; transform: translateY(-2px); }
.rack-tile.worn::after { content: "✓"; position: absolute; right: 4px; bottom: 1px; font: .8rem var(--pixel); color: #9be3a7; text-shadow: 1px 1px 0 #1a1210; }
.rack-tile .rt-tier { position: absolute; left: 3px; bottom: 1px; font: 400 .52rem var(--pixel); font-style: normal; color: #c9b89a; }
.rack-tile .rt-owner { position: absolute; right: -4px; top: -6px; width: 22px; height: 22px; display: grid; place-items: center; overflow: hidden;
  background: #241c18; border: 2px solid var(--edge); border-radius: 50%; }
.rack-tile .rt-owner canvas { max-width: 18px; max-height: 18px; }
.rack-plaques { display: flex; gap: 4px; margin: 4px 0 8px; }
.rack-plaque {
  flex: 1; padding: 6px 2px; font: 400 .7rem var(--pixel); color: #e6d6b8; background: #4a3220; border: 2px solid var(--edge); border-radius: 3px;
  box-shadow: inset 0 0 0 1px #7a5634, inset 0 2px 0 #8a6440, 0 2px 0 rgba(0, 0, 0, .4);
}
.rack-plaque.on { color: var(--gold); background: #6a4628; transform: translateY(2px); box-shadow: inset 0 0 0 1px #9a7444; }
.rack-gems { display: flex; gap: 10px; margin: 0 0 10px; justify-content: center; }
.rack-gem { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; background: none; border: 0; opacity: .55; }
.rack-gem.on { opacity: 1; }
.rack-gem i { width: 12px; height: 12px; transform: rotate(45deg); background: #8b9bb4; border: 2px solid #2a1e14; }
.rack-gem.r-rare i { background: #4a94e0; } .rack-gem.r-epique i { background: #b55088; } .rack-gem.r-legendaire i { background: #fbc547; }
.rack-gem small { font-family: var(--pixel); font-size: .66rem; color: var(--ink); }
.rack-grid.wall { padding: 10px; background: repeating-linear-gradient(#3e2716 0 22px, #2a180a 22px 25px); border: 3px solid var(--edge); border-radius: 4px; }

/* ---------- techniques ---------- */
.sk-belt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; background: linear-gradient(#3a2412, #2a180a); border: 3px solid #6e4a2c; border-radius: 4px;
  box-shadow: inset 0 0 0 2px #1c1008, 0 3px 0 rgba(0, 0, 0, .35); }
.sk-reserve { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; min-height: 84px; padding: 8px; background: #1c1612; border: 2px dashed #4a3a2a; border-radius: 4px; }
.sk-res-head { margin-top: 12px; }
.sk-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 76px; padding: 7px 3px 5px;
  background: #2a211c; border: 3px solid #5a4632; border-radius: 4px; box-shadow: inset 0 0 0 1px #3c3028, 0 2px 0 rgba(0, 0, 0, .4); color: var(--ink);
}
.sk-tile b { font-family: var(--pixel); font-weight: 400; font-size: .6rem; line-height: 1.15; text-align: center; }
.sk-tile small { font-family: var(--pixel); font-size: .56rem; color: #8fb8e8; }
.sk-glyph { display: block; width: 27px; height: 27px; background: center / contain no-repeat; image-rendering: pixelated; }
.sk-tile.empty { border-style: dashed; background: none; box-shadow: none; }
.sk-tile.on { outline: 3px solid #fff3a0; outline-offset: 1px; transform: translateY(-2px); }
.sk-tile.sk-ask:not(.on) { animation: sk-ask 1s steps(2) infinite; }
@keyframes sk-ask { 50% { border-color: #fff3a0; } }
.sk-tile.locked { opacity: .45; }
.sk-tile.locked small { color: var(--muted); }
.sk-tile.el-feu { border-color: #a8442a; } .sk-tile.el-glace { border-color: #2a8aa8; } .sk-tile.el-foudre { border-color: #b08a2a; }
.sk-tile.el-ombre { border-color: #6a3a7a; } .sk-tile.el-lumiere { border-color: #c8b070; } .sk-tile.k-heal, .sk-tile.k-revive { border-color: #3f8a3a; }
.sk-tile.k-buff { border-color: #9a6a2a; } .sk-tile.k-debuff { border-color: #7a3a6a; }
.sk-info { margin: 8px 2px 0; }
.sk-info:empty { display: none; }
.sk-info b { display: flex; justify-content: space-between; font-family: var(--pixel); font-weight: 400; font-size: .78rem; color: var(--gold); }
.sk-info b .pm { color: #8fb8e8; font-size: .7rem; }
.sk-info small { display: block; font-size: .82rem; line-height: 1.3; color: var(--ink); }

/* ---------- below ---------- */
.hv-more { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.hv-row {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; text-align: left; color: var(--ink);
  background: var(--panel); border: 3px solid var(--edge); border-radius: 4px; box-shadow: inset 0 0 0 2px #3c4044, 0 3px 0 rgba(0, 0, 0, .3);
}
.hv-row b { flex: 1; font-family: var(--pixel); font-weight: 400; font-size: .8rem; }
.hv-row small { font-family: var(--pixel); font-size: .66rem; color: var(--muted); }
.hv-flag { color: var(--gold); font-size: 1rem; } .hv-flag.off { color: var(--panel-3); }
.hv-story { display: flex; flex-direction: column; gap: 8px; }

.join-company .jc-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.jc-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; background: #2a211c; border: 3px solid #5a4632; border-radius: 4px; color: var(--ink); }
.jc-slot b { font-family: var(--pixel); font-weight: 400; font-size: .64rem; color: var(--gold); text-align: center; }
.jc-slot small { font-size: .7rem; color: var(--muted); }

/* the hero's place in the company, on the stage */
.hv-pennant { position: absolute; left: 10px; bottom: 14px; display: flex; align-items: center; gap: 4px; padding: 3px 8px; color: var(--muted);
  background: rgba(42, 26, 16, .85); border: 2px solid var(--edge); border-radius: 3px; box-shadow: 0 2px 0 rgba(0, 0, 0, .4); }
.hv-pennant span { font-size: 1rem; }
.hv-pennant small { font-family: var(--pixel); font-size: .62rem; }
.hv-pennant.in { color: var(--gold); }

/* what shows under the stage */
.hv-tabs { display: flex; gap: 4px; margin: 10px 0 0; }
.hv-tab {
  position: relative; flex: 1; padding: 7px 2px; font: 400 .72rem var(--pixel); color: #e6d6b8; background: #4a3220; border: 2px solid var(--edge); border-radius: 3px;
  box-shadow: inset 0 0 0 1px #7a5634, inset 0 2px 0 #8a6440, 0 2px 0 rgba(0, 0, 0, .4);
}
.hv-tab.on { color: var(--gold); background: #6a4628; transform: translateY(2px); box-shadow: inset 0 0 0 1px #9a7444; }
.hv-tab .alert { position: absolute; top: -6px; right: 4px; }

/* techniques: the belt and the reserve */
.sk-n { position: absolute; left: 4px; top: 2px; font: 400 .55rem var(--pixel); font-style: normal; color: #c9a878; }
.sk-tile.empty { min-height: 76px; }
.sk-tile.sm { flex-direction: row; justify-content: flex-start; gap: 6px; min-height: 0; padding: 5px 6px; background: #2a231e; border-width: 2px; text-align: left; }
.sk-tile.sm .sk-glyph { width: 18px; height: 18px; flex: none; }
.sk-tile.sm b { flex: 1; text-align: left; }
.sk-tile[data-drag], .jc-hero, .jc-slot { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.dragging { opacity: .35; }
.drop-over { outline: 3px solid #9be3a7 !important; outline-offset: 1px; }
.sk-reserve.drop-over { outline-offset: -3px; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; margin: 0; opacity: .92; box-shadow: 0 8px 18px rgba(0, 0, 0, .5) !important; }

/* the paths */
.vo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vo-card { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px 7px; color: var(--ink);
  background: #2a211c; border: 3px solid #5a4632; border-radius: 4px; box-shadow: inset 0 0 0 1px #3c3028, 0 3px 0 rgba(0, 0, 0, .4); }
.vo-card .vo-art { height: 86px; display: flex; align-items: flex-end; }
.vo-card b { font-family: var(--pixel); font-weight: 400; font-size: .76rem; color: var(--gold); }
.vo-card small { font-size: .74rem; color: var(--muted); text-align: center; line-height: 1.2; }
.vo-card.mine { border-color: #e0a030; background: #3a2c18; }
.vo-card.mine small { color: var(--gold); font-family: var(--pixel); font-size: .6rem; }
.vo-card.on { outline: 3px solid #fff3a0; outline-offset: 1px; }
.vo-card.shut canvas { filter: brightness(.35) saturate(.4); }
.vo-skills { display: flex; gap: 4px; }
.vo-skills .sk-glyph { width: 18px; height: 18px; }
.vo-detail { margin-top: 10px; padding: 10px; background: #241c18; border: 2px solid #4a3a2a; border-radius: 4px; }
.vo-list { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 10px; }
.vo-skill { display: flex; gap: 8px; align-items: flex-start; }
.vo-skill .sk-glyph { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.vo-skill b { display: block; font-family: var(--pixel); font-weight: 400; font-size: .72rem; }
.vo-skill small { display: block; font-size: .8rem; color: var(--muted); line-height: 1.25; }
.vo-skill.locked { opacity: .5; }
.hv-voie .panel.ascend { margin-top: 10px; }

/* the company */
.company-sheet .jc-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0 14px; }
.jc-slot { position: relative; justify-content: flex-end; min-height: 150px; background: linear-gradient(#3a2c22, #2a1e16); }
.jc-slot.on, .jc-hero.on { outline: 3px solid #fff3a0; outline-offset: 1px; }
.jc-slot.sk-ask, .jc-hero.sk-ask { animation: sk-ask 1s steps(2) infinite; }
.jc-empty { font-size: 2rem; color: var(--panel-3); }
.jc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.jc-hero { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; min-height: 104px; padding: 6px 2px; color: var(--ink);
  background: #2a211c; border: 2px solid #4a3a2a; border-radius: 4px; }
.jc-hero b { font-family: var(--pixel); font-weight: 400; font-size: .56rem; color: var(--gold); text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jc-hero small { font-size: .66rem; color: var(--muted); text-align: center; line-height: 1.1; }
.jc-hero.expedition, .jc-hero.mission, .jc-hero.prete { opacity: .5; }
.jc-auto { padding: 2px 6px; font: 400 .62rem var(--pixel); color: var(--muted); background: none; border: 1px solid var(--edge); border-radius: 3px; }

/* râtelier: worn or free */
.rack-use { padding: 3px 8px; font: 400 .62rem var(--pixel); color: var(--muted); background: none; border: 1px solid var(--edge); border-radius: 3px; }
.rack-use.on { color: var(--gold); border-color: var(--gold); }
.rack-gems { flex-wrap: wrap; align-items: center; }

.sk-reserve .sk-tile { background: #241e1a; }

/* a piece compared with what is worn: the arrow in the corner */
.gv { position: absolute; right: 2px; bottom: 2px; width: 18px; height: 18px; background: center / contain no-repeat; image-rendering: pixelated; }
.rack-tile .rt-enh { right: auto; left: 3px; top: 1px; bottom: auto; }

/* one piece */
.item-sheet { display: flex; flex-direction: column; align-items: stretch; }
.it-pedestal { position: relative; display: grid; place-items: center; height: 132px; margin: 0 0 6px;
  background: radial-gradient(ellipse at 50% 45%, #3a2c22 0 30%, transparent 62%), linear-gradient(transparent 70%, #2a1e16 70%, #241a12); border-radius: 4px; }
.it-pedestal::after { content: ""; position: absolute; left: 50%; bottom: 10px; width: 96px; height: 14px; transform: translateX(-50%); background: #5a4632; border: 2px solid #2a1e14; box-shadow: inset 0 2px 0 #7a5e44; }
.it-pedestal > canvas { position: relative; z-index: 1; margin-bottom: 10px; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .35)); }
.it-pedestal.r-rare { background: radial-gradient(ellipse at 50% 45%, #22406a 0 30%, transparent 62%), linear-gradient(transparent 70%, #2a1e16 70%, #241a12); }
.it-pedestal.r-epique { background: radial-gradient(ellipse at 50% 45%, #4a2a6a 0 30%, transparent 62%), linear-gradient(transparent 70%, #2a1e16 70%, #241a12); }
.it-pedestal.r-legendaire { background: radial-gradient(ellipse at 50% 45%, #6a4a1a 0 32%, transparent 64%), linear-gradient(transparent 70%, #2a1e16 70%, #241a12); }
.it-pedestal .it-enh { position: absolute; right: 30%; top: 14px; font: 400 .9rem var(--pixel); font-style: normal; color: #fff3a0; text-shadow: 1px 1px 0 #2a1a10; z-index: 2; }
.it-name { margin: 0; text-align: center; font-size: 1rem; text-wrap: balance; }
.it-name.r-legendaire { color: var(--gold); } .it-name.r-epique { color: #d49af0; } .it-name.r-rare { color: #8fc4f0; }
.it-kind { margin: 2px 0 8px; text-align: center; font-family: var(--pixel); font-size: .64rem; color: var(--muted); }
.it-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-bottom: 12px; }
.it-chip { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 7px; background: #24412b; border: 1px solid #2f6a3b; border-radius: 3px; }
.it-chip small { font-family: var(--pixel); font-size: .58rem; color: #9be3a7; }
.it-chip b { font-family: var(--pixel); font-weight: 400; font-size: .74rem; color: #d8f8dc; }
.it-wearers { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.it-wearer { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; min-height: 100px; padding: 6px 2px; color: var(--ink);
  background: #2a211c; border: 2px solid #4a3a2a; border-radius: 4px; box-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.it-wearer b { font-family: var(--pixel); font-weight: 400; font-size: .56rem; color: var(--gold); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it-wearer small { font-size: .64rem; color: var(--muted); text-align: center; line-height: 1.1; }
.it-wearer.worn { border-color: #3f8a3a; background: #24331f; opacity: 1; }
.it-wearer.worn small { color: #9be3a7; font-family: var(--pixel); font-size: .56rem; }
.it-wearer:disabled:not(.worn) { opacity: .45; }
.it-forge { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 0 0 12px; padding: 8px 10px; background: #2a1e16; border: 2px solid #6e4a2c; border-radius: 4px; }
.it-forge > div { flex: 1 1 60%; display: flex; gap: 8px; align-items: baseline; }
.it-forge > div b { font: 400 1rem var(--pixel); color: #fff3a0; }
.it-forge > div small { font-size: .78rem; color: var(--muted); line-height: 1.25; }
.item-sheet .row-buttons { margin-top: 12px; }
.it-forge { flex-wrap: nowrap; padding: 8px; }
.it-forge > * { flex: none; margin: 0; width: auto; }